CngxStepperConfig

Interface

projects/common/stepper/stepper-config.ts

Info
API

Import#

import { CngxStepperConfig } from '@cngx/common/stepper'

Description#

Stepper config surface. Resolution priority: per-instance Input

provideStepperConfigAt (viewProviders) > provideStepperConfig (root) > library default. Canonical cngx config shape.

Index#

Properties

ariaLabels connectors defaultCommitMode defaultLinear defaultOrientation density densityBreakpoints fallbackLabels groupCollapse groupCollapseSummary headerNavigation mobileBreakpoint mobileCollapse mobileIndicatorPosition mobileSwipe routerSyncMode routerSyncParam skin templates

Instance Properties#

ariaLabels#CngxStepperAriaLabels

ReadonlyOptional

connectors#boolean

ReadonlyOptional

Opt-in connector rail between adjacent step indicators on the classic skin. Off by default. The rule is double-scoped on [data-skin='classic'], so the four other skins are mechanically untouched (each ships its own inter-step decoration). Per-instance [connectors] Input still wins.

defaultCommitMode#"optimistic" | "pessimistic"

ReadonlyOptional

defaultLinear#boolean

ReadonlyOptional

defaultOrientation#"horizontal" | "vertical"

ReadonlyOptional

density#CngxStepperDensity

ReadonlyOptional

Space-driven density policy for the classic strip. 'auto' degrades labels on the strip's own container width; 'comfortable' (default) keeps full labels. Orthogonal to mobileCollapse. Apply app-wide via withStepperDensity.

densityBreakpoints#CngxStepperDensityBreakpoints

ReadonlyOptional

Per-step px thresholds for the density: 'auto' ladder. Default STEPPER_DEFAULT_DENSITY_BREAKPOINTS. Override via withStepperDensity's second argument.

fallbackLabels#CngxStepperFallbackLabels

ReadonlyOptional

groupCollapse#CngxStepperGroupCollapse

ReadonlyOptional

Focus-driven group-collapse policy. 'expand-active' collapses non-active cngxStepGroup branches to their header node and expands only the active group; 'off' (default) keeps the full strip. Orthogonal to mobileCollapse. Apply app-wide via withStepperGroupCollapse.

groupCollapseSummary#CngxStepperGroupSummary

ReadonlyOptional

What a collapsed cngxStepGroup header shows beside its label. Default 'progress' (completed/total). Only applies when groupCollapse is 'expand-active'. Set via withStepperGroupCollapseSummary.

headerNavigation#CngxStepperHeaderNavigation

ReadonlyOptional

Header-navigation policy. 'none' makes the step headers inert labels (footer-only navigation); 'visited' (default) keeps them focusable buttons whose reachability folds into the linear axis. Per-instance [headerNavigation] Input still wins.

mobileBreakpoint#string

ReadonlyOptional

Media query the mobile auto-collapse policy reacts to. Default STEPPER_DEFAULT_MOBILE_BREAKPOINT. Tablet consumers can re-aim the trigger via withStepperMobileBreakpoint.

mobileCollapse#CngxStepperMobileCollapse

ReadonlyOptional

mobileIndicatorPosition#CngxStepperMobileIndicatorPosition

ReadonlyOptional

Where the mobile auto-collapse indicator sits relative to the panel content. Default 'top'. Override per-instance via the [mobileIndicatorPosition] input or app-wide via withStepperMobileIndicatorPosition.

mobileSwipe#boolean

ReadonlyOptional

Whether horizontal swipe gestures advance/retreat the active step while the stepper is in mobile-collapse mode ('dots' / 'text'). Default true. Override per-instance via the [mobileSwipe] input or app-wide via withStepperMobileSwipe. Ignored on the classic strip and on the Material twin (<cngx-mat-stepper>).

routerSyncMode#"fragment" | "queryParam"

ReadonlyOptional

routerSyncParam#string

ReadonlyOptional

skin#CngxStepperSkin

ReadonlyOptional

templates#CngxStepperTemplates

ReadonlyOptional