Skip to main content
cngx-src documentation

CngxStepperPresenter

DirectivePrimaryv0.1.0WCAG AA

projects/common/stepper/presenter.directive.ts

GitHub

Import#

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

Description#

Stepper presenter - the brain of every stepper / wizard flow. Holds the active-step model, registry, linear policy, orientation, and commit-controller lifecycle. Provides CNGX_STEPPER_HOST for atom registration and CNGX_STATEFUL so transition bridges (<cngx-toast-on />, <cngx-banner-on />) compose without explicit [state] wiring.

Sheriff: common Level 2. Pure directive - zero template, zero CSS. Level-4 organisms compose this via hostDirectives.

https://cngxjs.github.io/cngx/examples/#/ui/stepper/stepper-commit-action/pessimistic-optimistic-commits-with-bridge-directives

Related#

Metadata#

Selector
[cngxStepper]
Export as
cngxStepper
Implements
CngxStepperHost

Providers#

CNGX_STEPPER_HOST
useExisting CngxStepperPresenter
CNGX_STATEFUL
useExisting CngxStepperPresenter

Relationships

Depends on2

CNGX_STEPPER_HOSTservice
CNGX_STATEFULservice

Index#

Properties

commitStatecommitTransitionintendedStepIndexlastFailedIndexoriginIndexDuringCommitstatestepTree

Methods

canNavigateToclearLastFailedregisterresetselectselectByIdselectNextselectPreviousunregister

Inputs

activeStepIndexcommitActioncommitModeInputlinearInputorientationInput

Outputs

activeStepIndex

Derived State

activeGroupIdactiveStepIdbusycanGoNextcanGoPreviouscommitModeflatStepsisFirstStepisLastSteplinearnextStepLabelorientationpreviousStepLabelstepCountstepsOnlyvisibleStripNodes

Inputs#

activeStepIndex#number
model()
default 0
commitAction#CngxStepperCommitAction | null
input()
default null
commitModeInput#'optimistic' | 'pessimistic' | undefined
input()
default undefined, { alias: 'commitMode', }
linearInput#boolean | undefined
input()
default undefined, { alias: 'linear', }
orientationInput#'horizontal' | 'vertical' | undefined
input()
default undefined, { alias: 'orientation', }

Outputs#

activeStepIndex#number
model()

Instance Properties#

commitState#unknown
Readonly
this.commitController.state
commitTransition#StatusTransition
Readonly

Reactive current/previous pair for the commit-state status. Skin sub-components mount a <span cngxLiveRegion> reading this tracker. Allocated once per presenter - the underlying linkedSignal is shared across all consumers.

createTransitionTracker(() =>
  this.commitController.state.status(),
)
intendedStepIndex#Signal
Readonly

Step index the user is committing to. Tracked separately from state.data() because the AsyncState data slot only updates on success. Drives per-step aria-busy in the organism.

this.commitController.intendedValue
lastFailedIndex#Signal
Readonly

{@inheritDoc CngxStepperHost.lastFailedIndex}

this.lastFailedIndexState.asReadonly()
originIndexDuringCommit#Signal
Readonly

{@inheritDoc CngxStepperHost.originIndexDuringCommit}

this.originIndexDuringCommitState.asReadonly()
state#CngxAsyncState
Readonly

Producer surface for the CNGX_STATEFUL bridge contract.

this.commitController.state
stepTree#Signal
Readonly
this.treeState.asReadonly()

Methods#

canNavigateTo#boolean
canNavigateTo(index: number)

{@inheritDoc CngxStepperHost.canNavigateTo}

Wraps the private isLinearBlocked predicate plus the per-step disabled check. The header-reachability contract surface; isLinearBlocked stays private so the organism reads this method, never the internal gate.

@paramindexnumber
clearLastFailed#void

{@inheritDoc CngxStepperHost.clearLastFailed}

register#void
register(handle: CngxStepRegistration, parentId: string | null)
@paramhandleCngxStepRegistration
@paramparentIdstring | null= null
reset#void
select#void
select(index: number)
@paramindexnumber
selectById#void
selectById(id: string)
@paramidstring
selectNext#void
selectPrevious#void
unregister#void
unregister(id: string)
@paramidstring
Enter to selectArrow Down Arrow Up to navigateEsc to close