forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-stepper.mjs

@@ -0,0 +1,886 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, model, output, input, booleanAttribute, computed, effect, Directive, ElementRef } from '@angular/core';
+import { createDefaults, injectTextDirection, RovingTabindex, Collection, firstEnabledHost, reconcileRovingActive, moveIndex, registerHandle, hostId, resolveListNavigation, injectHasFocusableContent } from 'forty-cdk/core';
+
+/** Injection token for the root stepper context (`ForStepper`). */
+const FOR_STEPPER_CONTEXT = new InjectionToken('FOR_STEPPER_CONTEXT');
+/** Injection token for the per-step item context (`ForStepperItem`). */
+const FOR_STEPPER_ITEM_CONTEXT = new InjectionToken('FOR_STEPPER_ITEM_CONTEXT');
+function injectStepperContext(piece) {
+    const ctx = inject(FOR_STEPPER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/stepper] ${piece} must be used inside a [forStepper] element.`);
+    }
+    return ctx;
+}
+function injectStepperItemContext(piece) {
+    const ctx = inject(FOR_STEPPER_ITEM_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/stepper] ${piece} must be used inside a [forStepperItem] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for stepper defaults, read at the root injector when no
+ * consumer has called `provideForStepperDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_STEPPER_FALLBACK_DEFAULTS = {
+    activationMode: 'manual',
+    loop: true,
+};
+const { token, provideDefaults } = createDefaults('FOR_STEPPER_DEFAULTS', FOR_STEPPER_FALLBACK_DEFAULTS);
+/** Token holding the resolved stepper defaults for the current scope. */
+const FOR_STEPPER_DEFAULTS = token;
+/**
+ * Configures forty-cdk stepper defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library defaults
+ * at the root).
+ */
+function provideForStepperDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Root of the Stepper primitive. Owns the selected step index, linear
+ * progression, accessibility mode, orientation, and disabled state. Provides
+ * the shared context to descendant directives.
+ *
+ * Implements the [WAI-ARIA Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+ * in `mode="interactive"` (roving tabindex, `role="tablist"`, `aria-selected`)
+ * and an ordered-list progress pattern with `aria-current="step"` in
+ * `mode="progress"`.
+ *
+ * `activationMode='manual'` (default): arrow navigation only moves focus;
+ * Space / Enter activates. Recommended for wizards where step activation
+ * triggers validation. `activationMode='automatic'`: arrow navigation moves
+ * focus AND selects the step.
+ */
+class ForStepper {
+    #defaults = inject(FOR_STEPPER_DEFAULTS);
+    /**
+     * Two-way bindable selected step index in the inclusive range `0 … count`.
+     * Defaults to `0`. The terminal value `=== count()` (one past the last step) is
+     * the **completed** state (see `isCompleted` / `complete`). The `model()` change
+     * emitter (`(selectedIndexChange)`) fires only on internal selection changes
+     * (trigger click, Next/Previous, automatic-mode arrow navigation), never on
+     * consumer writes via `[(selectedIndex)]`.
+     */
+    selectedIndex = model(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits once each time the stepper transitions **into** the completed terminal
+     * state — i.e. when `selectedIndex()` reaches `count()`. Does not re-emit while
+     * it stays completed; retreating via `previous()` and re-entering emits again.
+     */
+    complete = output();
+    /**
+     * When true, steps are only reachable after all preceding steps are completed
+     * or optional. Navigating back (`previous()`) always works regardless of this
+     * flag.
+     */
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Accessibility model. `'interactive'` (default): full WAI-ARIA Tabs pattern
+     * — `role="tablist"`, `role="tab"`, `role="tabpanel"`, roving tabindex, arrow
+     * navigation. `'progress'`: ordered list with `aria-current="step"` on the
+     * active trigger — no tab stop manipulation.
+     */
+    mode = input('interactive', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /**
+     * Layout axis for the step list. Affects `aria-orientation` on the list and
+     * which arrow keys navigate in interactive mode.
+     */
+    orientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Arrow-key activation timing in interactive mode. Defaults to the value from
+     * `provideForStepperDefaults` for the surrounding scope (library default:
+     * `'manual'`).
+     */
+    activationMode = input(this.#defaults.activationMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activationMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether arrow navigation wraps around past the first / last selectable
+     * trigger. Defaults to the value from `provideForStepperDefaults` for the
+     * surrounding scope (library default: `true`).
+     */
+    loop = input(this.#defaults.loop, { ...(ngDevMode ? { debugName: "loop" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * When true, all step triggers are non-interactive and the root carries
+     * `data-disabled`.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and swaps
+     * ArrowLeft / ArrowRight semantics in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    roving = new RovingTabindex();
+    #items = new Collection();
+    #triggers = new Collection();
+    #contents = new Collection();
+    /** Total number of registered step items. */
+    count = computed(() => this.#items.items().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /**
+     * True when the stepper is in the terminal **completed** state: `selectedIndex()`
+     * has reached `count()` (one past the last step). No step is current and every
+     * `[forStepperContent]` panel is inactive while this holds.
+     */
+    isCompleted = computed(() => this.selectedIndex() >= this.count(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCompleted" }] : /* istanbul ignore next */ []));
+    #firstSelectableTriggerHost = computed(() => firstEnabledHost(this.#triggers.items()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#firstSelectableTriggerHost" }] : /* istanbul ignore next */ []));
+    constructor() {
+        reconcileRovingActive(this.roving, this.#triggers.items);
+        let wasCompleted = this.isCompleted();
+        effect(() => {
+            const completed = this.isCompleted();
+            if (completed && !wasCompleted) {
+                this.complete.emit();
+            }
+            wasCompleted = completed;
+        });
+    }
+    indexOf(item) {
+        return this.#items.items().indexOf(item);
+    }
+    isCurrent(index) {
+        return this.selectedIndex() === index;
+    }
+    isReachable(index) {
+        if (!this.linear()) {
+            return true;
+        }
+        if (index === 0) {
+            return true;
+        }
+        const items = this.#items.items();
+        for (let i = 0; i < index; i++) {
+            const item = items[i];
+            if (!item || (!item.completed() && !item.optional())) {
+                return false;
+            }
+        }
+        return true;
+    }
+    resolvedStateFor(index) {
+        return this.#items.items()[index]?.resolvedState() ?? 'pending';
+    }
+    select(index) {
+        if (this.disabled()) {
+            return;
+        }
+        const count = this.count();
+        if (count === 0) {
+            return;
+        }
+        const clamped = Math.max(0, Math.min(index, count));
+        if (!this.isReachable(clamped)) {
+            return;
+        }
+        this.selectedIndex.set(clamped);
+    }
+    next() {
+        if (!this.canAdvance()) {
+            return;
+        }
+        this.selectedIndex.set(this.selectedIndex() + 1);
+    }
+    previous() {
+        if (this.disabled() || this.selectedIndex() <= 0) {
+            return;
+        }
+        this.selectedIndex.set(this.selectedIndex() - 1);
+    }
+    canAdvance() {
+        if (this.disabled() || this.selectedIndex() >= this.count()) {
+            return false;
+        }
+        if (!this.linear()) {
+            return true;
+        }
+        const current = this.#items.items()[this.selectedIndex()];
+        return (current?.completed() ?? false) || (current?.optional() ?? false);
+    }
+    canRetreat() {
+        return this.selectedIndex() > 0 && !this.disabled();
+    }
+    navigate(currentTrigger, action) {
+        if (this.disabled()) {
+            return;
+        }
+        const triggers = this.#triggers.items();
+        if (triggers.length === 0) {
+            return;
+        }
+        const currentIndex = triggers.findIndex((t) => t.host === currentTrigger);
+        const next = moveIndex(currentIndex < 0 ? 0 : currentIndex, triggers.length, action, {
+            loop: this.loop(),
+            isDisabled: (i) => !triggers[i].selectable(),
+        });
+        if (next === null) {
+            return;
+        }
+        const target = triggers[next];
+        if (!target) {
+            return;
+        }
+        target.host.focus();
+        if (this.activationMode() === 'automatic') {
+            this.selectedIndex.set(next);
+        }
+    }
+    registerItem(h) {
+        this.#items.register(h);
+    }
+    unregisterItem(h) {
+        this.#items.unregister(h);
+    }
+    registerTrigger(h) {
+        this.#triggers.register(h);
+    }
+    unregisterTrigger(h) {
+        this.#triggers.unregister(h);
+        this.roving.unregister(h.host);
+    }
+    registerContent(h) {
+        this.#contents.register(h);
+    }
+    unregisterContent(h) {
+        this.#contents.unregister(h);
+    }
+    triggerIdFor(index) {
+        return this.#triggers.items()[index]?.id() ?? null;
+    }
+    contentIdFor(index) {
+        return this.#contents.items()[index]?.id() ?? null;
+    }
+    indexOfContent(host) {
+        return this.#contents.indexOfHost(host);
+    }
+    isFirstSelectableTrigger(el) {
+        return this.#firstSelectableTriggerHost() === el;
+    }
+    hasCurrentTrigger() {
+        const idx = this.selectedIndex();
+        const triggers = this.#triggers.items();
+        if (idx < 0 || idx >= triggers.length) {
+            return false;
+        }
+        const trigger = triggers[idx];
+        return trigger !== undefined && trigger.selectable();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepper, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForStepper, isStandalone: true, selector: "[forStepper]", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activationMode: { classPropertyName: "activationMode", publicName: "activationMode", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", complete: "complete" }, host: { properties: { "attr.data-orientation": "orientation()", "attr.data-mode": "mode()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.dir": "dir()" } }, providers: [{ provide: FOR_STEPPER_CONTEXT, useExisting: ForStepper }], exportAs: ["forStepper"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepper, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepper]',
+                    exportAs: 'forStepper',
+                    host: {
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                    },
+                    providers: [{ provide: FOR_STEPPER_CONTEXT, useExisting: ForStepper }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], complete: [{ type: i0.Output, args: ["complete"] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }] } });
+
+/**
+ * The step-list container. In `mode="interactive"` renders as `role="tablist"`
+ * with `aria-orientation`; in `mode="progress"` renders as `role="list"`.
+ *
+ * Apply on an `<ol>` (recommended for semantic list markup) wrapping the
+ * `[forStepperItem]` elements. The `[forStepperContent]` panels live as
+ * siblings of the list.
+ */
+class ForStepperList {
+    ctx = injectStepperContext('ForStepperList');
+    /** Accessible name for the step list. Defers to a consumer `aria-labelledby`. */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperList, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForStepperList, isStandalone: true, selector: "[forStepperList]", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "ctx.mode() === 'interactive' ? 'tablist' : 'list'", "attr.aria-orientation": "ctx.mode() === 'interactive' ? ctx.orientation() : null", "attr.aria-label": "ariaLabel() || null", "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forStepperList"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperList, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperList]',
+                    exportAs: 'forStepperList',
+                    host: {
+                        '[attr.role]': "ctx.mode() === 'interactive' ? 'tablist' : 'list'",
+                        '[attr.aria-orientation]': "ctx.mode() === 'interactive' ? ctx.orientation() : null",
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                }]
+        }], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * One step within a `ForStepper`. Owns per-step state (`completed`, `optional`,
+ * `disabled`, `hasError`, `state`) and exposes the `ForStepperItemContext` that
+ * child `[forStepperTrigger]`, `[forStepperIndicator]`, and
+ * `[forStepperSeparator]` directives consume.
+ *
+ * Apply on a list item element (e.g. `<li forStepperItem>`). The step's index
+ * is derived reactively from its DOM position within the stepper via the root's
+ * item collection.
+ */
+class ForStepperItem {
+    ctx = injectStepperContext('ForStepperItem');
+    /** Host element — satisfies `ForStepperItemHandle.host` for collection registration. */
+    host = inject(ElementRef).nativeElement;
+    /**
+     * Manual completion flag. When `true`, the step is completed regardless of any
+     * bound `field()`. Bind via `[completed]`.
+     */
+    _completedInput = input(false, { ...(ngDevMode ? { debugName: "_completedInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'completed' });
+    /** Marks this step as optional (can be skipped in linear mode). */
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** When true, this step's trigger ignores clicks and the step is unreachable by keyboard. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Manual error flag. When `true`, the step reflects the `'error'` resolved state
+     * (unless current) regardless of any bound `field()`. Bind via `[hasError]`.
+     */
+    _hasErrorInput = input(false, { ...(ngDevMode ? { debugName: "_hasErrorInput" } : /* istanbul ignore next */ {}), transform: booleanAttribute, alias: 'hasError' });
+    /**
+     * Optional Signal Forms field. When bound, the step's `completed` and
+     * `hasError` derive from the field's reactive validity: `completed` is `true`
+     * when the field is valid and touched; `hasError` is `true` when the field is
+     * touched and invalid. A manual `[completed]` / `[hasError]` input always wins
+     * when set. Leave unset to drive completion manually.
+     *
+     * The `@angular/forms` peer is optional: the field *type* is imported with
+     * `import type`, so binding `[field]` requires the peer but the primitive
+     * compiles and tree-shakes without it for consumers who never use it.
+     */
+    field = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step is completed. A manual `[completed]` input wins; otherwise,
+     * when a `field()` is bound, derives `true` from `field` valid + touched.
+     */
+    completed = computed(() => {
+        if (this._completedInput()) {
+            return true;
+        }
+        const f = this.field();
+        if (!f) {
+            return false;
+        }
+        const state = f();
+        return state.valid() && state.touched();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "completed" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether this step has an error. A manual `[hasError]` input wins; otherwise,
+     * when a `field()` is bound, derives `true` from `field` touched + invalid.
+     */
+    hasError = computed(() => {
+        if (this._hasErrorInput()) {
+            return true;
+        }
+        const f = this.field();
+        if (!f) {
+            return false;
+        }
+        const state = f();
+        return state.touched() && state.invalid();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    /**
+     * Custom state string override. When non-empty, wins over the derived resolved
+     * state (`error`, `active`, `completed`, `pending`) and drives every
+     * `data-state` attribute on this step.
+     */
+    state = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Whether this step is disabled — own `disabled` OR the root stepper's `disabled`. */
+    effectiveDisabled = computed(() => this.disabled() || this.ctx.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    /** DOM-order index of this step within the stepper. */
+    index = computed(() => this.ctx.indexOf(this), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+    /** True when this step is the currently selected step. */
+    current = computed(() => this.ctx.isCurrent(this.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /**
+     * True when this step can be focused and activated. False when the step is
+     * effectively disabled or not yet reachable in linear mode.
+     */
+    selectable = computed(() => this.ctx.isReachable(this.index()) && !this.effectiveDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+    /**
+     * Resolved `data-state` string. Precedence:
+     * 1. Custom `state()` when non-empty.
+     * 2. `'error'` when `hasError()` and not current.
+     * 3. `'active'` when current.
+     * 4. `'completed'` when `completed()`.
+     * 5. `'pending'` otherwise.
+     */
+    resolvedState = computed(() => {
+        const custom = this.state();
+        if (custom) {
+            return custom;
+        }
+        if (this.hasError() && !this.current()) {
+            return 'error';
+        }
+        if (this.current()) {
+            return 'active';
+        }
+        if (this.completed()) {
+            return 'completed';
+        }
+        return 'pending';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedState" }] : /* istanbul ignore next */ []));
+    constructor() {
+        registerHandle(this, (h) => this.ctx.registerItem(h), (h) => this.ctx.unregisterItem(h), 'afterNextRender');
+    }
+    /** Selects this step. Delegates to `ForStepperContext.select(index)`. */
+    select() {
+        this.ctx.select(this.index());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForStepperItem, isStandalone: true, selector: "[forStepperItem]", inputs: { _completedInput: { classPropertyName: "_completedInput", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, _hasErrorInput: { classPropertyName: "_hasErrorInput", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-state": "resolvedState()", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-orientation": "ctx.orientation()" } }, providers: [{ provide: FOR_STEPPER_ITEM_CONTEXT, useExisting: ForStepperItem }], exportAs: ["forStepperItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperItem]',
+                    exportAs: 'forStepperItem',
+                    host: {
+                        '[attr.data-state]': 'resolvedState()',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                    providers: [{ provide: FOR_STEPPER_ITEM_CONTEXT, useExisting: ForStepperItem }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { _completedInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], _hasErrorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }] } });
+
+/**
+ * Header for one step. In `mode="interactive"` carries `role="tab"`, participates
+ * in the roving tabindex, and wires `aria-selected` / `aria-controls` /
+ * `aria-disabled`. In `mode="progress"` carries `aria-current="step"` on the
+ * active step only and is a static element (no tab-stop manipulation).
+ *
+ * Apply on a `<button type="button">` for interactive mode so Enter / Space
+ * activation is native. A static element (`<span>`) is acceptable for progress
+ * mode.
+ *
+ * Disabled triggers in interactive mode keep their tab stop (`aria-disabled`
+ * instead of native `disabled`) so assistive tech can announce them.
+ */
+class ForStepperTrigger {
+    ctx = injectStepperContext('ForStepperTrigger');
+    item = injectStepperItemContext('ForStepperTrigger');
+    #host = inject(ElementRef).nativeElement;
+    /** Generated (or consumer-set static) id for this trigger. Used by content panels for `aria-labelledby`. */
+    id = hostId('for-stepper-trigger');
+    /** Id of the content panel this trigger controls (the matching panel by step index). */
+    controlsId = computed(() => this.ctx.contentIdFor(this.item.index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlsId" }] : /* istanbul ignore next */ []));
+    /**
+     * APG tabindex cascade (interactive mode only). In progress mode returns
+     * `null` so no tab-stop attribute is emitted. In interactive mode:
+     * - `null` when not selectable (disabled or unreachable in linear mode).
+     * - Roving-tracker value once any trigger has been focused.
+     * - `0` when this step is current.
+     * - `-1` when another trigger owns the current step.
+     * - `0` if this is the first selectable trigger (fallback entry point).
+     * - `-1` otherwise.
+     */
+    tabindex = computed(() => {
+        if (this.ctx.mode() !== 'interactive') {
+            return null;
+        }
+        if (!this.item.selectable()) {
+            return -1;
+        }
+        if (this.ctx.roving.hasActive()) {
+            return this.ctx.roving.tabindexFor(this.#host);
+        }
+        if (this.item.current()) {
+            return 0;
+        }
+        if (this.ctx.hasCurrentTrigger()) {
+            return -1;
+        }
+        return this.ctx.isFirstSelectableTrigger(this.#host) ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host,
+            id: this.id,
+            selectable: this.item.selectable,
+            disabled: computed(() => !this.item.selectable()),
+        };
+        registerHandle(handle, (h) => this.ctx.registerTrigger(h), (h) => this.ctx.unregisterTrigger(h), 'afterNextRender');
+    }
+    onClick() {
+        if (this.ctx.mode() !== 'interactive' || !this.item.selectable()) {
+            return;
+        }
+        this.item.select();
+    }
+    onFocus() {
+        if (this.ctx.mode() !== 'interactive' || !this.item.selectable()) {
+            return;
+        }
+        this.ctx.roving.setActive(this.#host);
+    }
+    onKeyDown(event) {
+        if (this.ctx.mode() !== 'interactive' || !this.item.selectable()) {
+            return;
+        }
+        const action = resolveListNavigation(event, {
+            orientation: this.ctx.orientation(),
+            dir: this.ctx.dir(),
+        });
+        if (!action) {
+            return;
+        }
+        event.preventDefault();
+        this.ctx.navigate(this.#host, action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperTrigger, isStandalone: true, selector: "[forStepperTrigger]", host: { listeners: { "click": "onClick()", "focus": "onFocus()", "keydown": "onKeyDown($event)" }, properties: { "attr.role": "ctx.mode() === 'interactive' ? 'tab' : null", "id": "id()", "attr.aria-selected": "ctx.mode() === 'interactive' ? (item.current() ? 'true' : 'false') : null", "attr.aria-controls": "ctx.mode() === 'interactive' && item.current() ? controlsId() : null", "attr.aria-current": "ctx.mode() === 'progress' && item.current() ? 'step' : null", "attr.aria-disabled": "ctx.mode() === 'interactive' && !item.selectable() ? 'true' : null", "attr.tabindex": "tabindex()", "attr.data-state": "item.resolvedState()", "attr.data-disabled": "item.effectiveDisabled() ? \"\" : null", "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forStepperTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperTrigger]',
+                    exportAs: 'forStepperTrigger',
+                    host: {
+                        '[attr.role]': "ctx.mode() === 'interactive' ? 'tab' : null",
+                        '[id]': 'id()',
+                        '[attr.aria-selected]': "ctx.mode() === 'interactive' ? (item.current() ? 'true' : 'false') : null",
+                        '[attr.aria-controls]': "ctx.mode() === 'interactive' && item.current() ? controlsId() : null",
+                        '[attr.aria-current]': "ctx.mode() === 'progress' && item.current() ? 'step' : null",
+                        '[attr.aria-disabled]': "ctx.mode() === 'interactive' && !item.selectable() ? 'true' : null",
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.data-state]': 'item.resolvedState()',
+                        '[attr.data-disabled]': 'item.effectiveDisabled() ? "" : null',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                        '(click)': 'onClick()',
+                        '(focus)': 'onFocus()',
+                        '(keydown)': 'onKeyDown($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Decorative icon slot for a step. Hidden from the accessibility tree
+ * (`aria-hidden="true"`). Reflects the step's resolved `data-state` so
+ * consumers can swap icons via CSS `[data-state="completed"]`,
+ * `[data-state="error"]`, etc., or with `@if` keyed on the exported
+ * `#indicator="forStepperIndicator"` reference.
+ *
+ * Must be used inside a `[forStepperItem]` element.
+ */
+class ForStepperIndicator {
+    item = injectStepperItemContext('ForStepperIndicator');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperIndicator, isStandalone: true, selector: "[forStepperIndicator]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "item.resolvedState()" } }, exportAs: ["forStepperIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperIndicator]',
+                    exportAs: 'forStepperIndicator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'item.resolvedState()',
+                    },
+                }]
+        }] });
+
+/**
+ * Decorative connector between steps. Hidden from the accessibility tree
+ * (`aria-hidden="true"`). Reflects `data-state="completed"` when the preceding
+ * step is marked completed, `data-state="pending"` otherwise. Also reflects
+ * `data-orientation` so consumers can style horizontal vs vertical separators
+ * differently.
+ *
+ * Must be used inside a `[forStepperItem]` element.
+ */
+class ForStepperSeparator {
+    ctx = injectStepperContext('ForStepperSeparator');
+    item = injectStepperItemContext('ForStepperSeparator');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperSeparator, isStandalone: true, selector: "[forStepperSeparator]", host: { attributes: { "aria-hidden": "true" }, properties: { "attr.data-state": "item.completed() ? 'completed' : 'pending'", "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forStepperSeparator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperSeparator]',
+                    exportAs: 'forStepperSeparator',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': "item.completed() ? 'completed' : 'pending'",
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                }]
+        }] });
+
+/**
+ * Panel for one step. Correlates to a step by **position** — the Nth
+ * `[forStepperContent]` panel in registration (DOM document) order corresponds
+ * to the Nth step.
+ *
+ * In `mode="interactive"` the panel carries `role="tabpanel"` and is a tab
+ * stop (`tabindex="0"`) only when it has no focusable content of its own
+ * (WAI-ARIA Tabs APG rule). In `mode="progress"` the panel carries
+ * `role="group"` and is never a tab stop.
+ *
+ * While inactive the directive reflects `aria-hidden="true"` and `inert` so
+ * mounted-but-inactive panels are removed from the accessibility tree and focus
+ * order automatically. DOM presence is the consumer's responsibility — wrap
+ * with `@if (current())` to unmount or leave mounted and toggle visibility with
+ * CSS via `[data-state="inactive"]`.
+ */
+class ForStepperContent {
+    ctx = injectStepperContext('ForStepperContent');
+    #host = inject(ElementRef).nativeElement;
+    /** Generated (or consumer-set static) id for this panel. Used by triggers for `aria-controls`. */
+    id = hostId('for-stepper-content');
+    #hasFocusableContent = injectHasFocusableContent();
+    #index = computed(() => this.ctx.indexOfContent(this.#host), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#index" }] : /* istanbul ignore next */ []));
+    /** True when this panel corresponds to the currently selected step. */
+    current = computed(() => this.ctx.isCurrent(this.#index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
+    /** Id of the trigger that labels this panel (`aria-labelledby`). */
+    labelledBy = computed(() => this.ctx.triggerIdFor(this.#index()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelledBy" }] : /* istanbul ignore next */ []));
+    /**
+     * APG tabindex: `'0'` only when in interactive mode and the panel has no
+     * focusable content of its own, so screen-reader users can reach the panel
+     * itself. A panel containing buttons / links / form controls gets no
+     * `tabindex`, avoiding a redundant tab stop.
+     */
+    tabindex = computed(() => {
+        if (this.ctx.mode() !== 'interactive') {
+            return null;
+        }
+        return this.#hasFocusableContent() ? null : '0';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = { host: this.#host, id: this.id };
+        registerHandle(handle, (h) => this.ctx.registerContent(h), (h) => this.ctx.unregisterContent(h), 'afterNextRender');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperContent, isStandalone: true, selector: "[forStepperContent]", host: { properties: { "attr.role": "ctx.mode() === 'interactive' ? 'tabpanel' : 'group'", "id": "id()", "attr.aria-labelledby": "labelledBy()", "attr.tabindex": "tabindex()", "attr.aria-hidden": "current() ? null : \"true\"", "attr.inert": "current() ? null : \"\"", "attr.data-state": "current() ? \"active\" : \"inactive\"", "attr.data-orientation": "ctx.orientation()" } }, exportAs: ["forStepperContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperContent]',
+                    exportAs: 'forStepperContent',
+                    host: {
+                        '[attr.role]': "ctx.mode() === 'interactive' ? 'tabpanel' : 'group'",
+                        '[id]': 'id()',
+                        '[attr.aria-labelledby]': 'labelledBy()',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.aria-hidden]': 'current() ? null : "true"',
+                        '[attr.inert]': 'current() ? null : ""',
+                        '[attr.data-state]': 'current() ? "active" : "inactive"',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Terminal "all steps complete" panel. Shown (active) only while the stepper is in
+ * the completed state (`selectedIndex` has reached `count`); gated the same way as
+ * `[forStepperContent]` — `aria-hidden` / `inert` / `data-state` flip with
+ * `isCompleted()`. The natural place for a wizard's final success panel.
+ *
+ * DOM presence is the consumer's responsibility — wrap with `@if` driven by the same
+ * completed condition, or leave it mounted and toggle visibility with CSS via
+ * `[data-state="active"]`.
+ */
+class ForStepperCompletedContent {
+    ctx = injectStepperContext('ForStepperCompletedContent');
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperCompletedContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperCompletedContent, isStandalone: true, selector: "[forStepperCompletedContent]", host: { attributes: { "role": "group" }, properties: { "attr.aria-hidden": "ctx.isCompleted() ? null : \"true\"", "attr.inert": "ctx.isCompleted() ? null : \"\"", "attr.data-state": "ctx.isCompleted() ? \"active\" : \"inactive\"" } }, exportAs: ["forStepperCompletedContent"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperCompletedContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperCompletedContent]',
+                    exportAs: 'forStepperCompletedContent',
+                    host: {
+                        role: 'group',
+                        '[attr.aria-hidden]': 'ctx.isCompleted() ? null : "true"',
+                        '[attr.inert]': 'ctx.isCompleted() ? null : ""',
+                        '[attr.data-state]': 'ctx.isCompleted() ? "active" : "inactive"',
+                    },
+                }]
+        }] });
+
+/**
+ * "Next" button for the stepper. Apply on a `<button>` element. Reflects
+ * `aria-disabled="true"` when `canAdvance()` is false (last step reached, root
+ * disabled, or in linear mode the current step is not completed / optional).
+ *
+ * The button retains its native `type="button"` attribute via the `type` host
+ * binding to prevent accidental form submission.
+ *
+ * Clicking while `aria-disabled` is a no-op because `next()` guards internally.
+ */
+class ForStepperNext {
+    ctx = injectStepperContext('ForStepperNext');
+    onClick() {
+        this.ctx.next();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperNext, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperNext, isStandalone: true, selector: "button[forStepperNext]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-disabled": "!ctx.canAdvance() ? \"true\" : null" } }, exportAs: ["forStepperNext"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[forStepperNext]',
+                    exportAs: 'forStepperNext',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-disabled]': '!ctx.canAdvance() ? "true" : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+/**
+ * "Previous" button for the stepper. Apply on a `<button>` element. Reflects
+ * `aria-disabled="true"` when `canRetreat()` is false (first step reached or
+ * root disabled).
+ *
+ * The button retains its native `type="button"` attribute via the `type` host
+ * binding to prevent accidental form submission.
+ *
+ * Clicking while `aria-disabled` is a no-op because `previous()` guards
+ * internally.
+ */
+class ForStepperPrevious {
+    ctx = injectStepperContext('ForStepperPrevious');
+    onClick() {
+        this.ctx.previous();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperPrevious, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForStepperPrevious, isStandalone: true, selector: "button[forStepperPrevious]", host: { attributes: { "type": "button" }, listeners: { "click": "onClick()" }, properties: { "attr.aria-disabled": "!ctx.canRetreat() ? \"true\" : null" } }, exportAs: ["forStepperPrevious"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperPrevious, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[forStepperPrevious]',
+                    exportAs: 'forStepperPrevious',
+                    host: {
+                        type: 'button',
+                        '[attr.aria-disabled]': '!ctx.canRetreat() ? "true" : null',
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }] });
+
+/**
+ * Optional progress indicator for the Stepper. Reads the stepper context and
+ * reflects how far through the steps the user is as a WAI-ARIA
+ * [`progressbar`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/progressbar_role):
+ * `aria-valuemin="0"`, `aria-valuemax="100"`, `aria-valuenow` = the computed
+ * percent, and an `aria-valuetext` describing the position. Publishes a
+ * `--for-stepper-progress` (0–1) custom property for styling; ships no visuals.
+ *
+ * Must be used inside a `[forStepper]` element.
+ */
+class ForStepperProgress {
+    ctx = injectStepperContext('ForStepperProgress');
+    /**
+     * Basis for the reported percent. `'index'` (default) derives progress from
+     * the current step index; `'completed'`
+     * derives it from the count of steps whose resolved state is `completed`.
+     */
+    valueBy = input('index', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueBy" }] : /* istanbul ignore next */ []));
+    /**
+     * Accessible name for the progressbar. Defaults to `null`, emitting no
+     * `aria-label`; prefer a visible label referenced via `aria-labelledby` when
+     * one exists.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    #completedCount = computed(() => {
+        const total = this.ctx.count();
+        let n = 0;
+        for (let i = 0; i < total; i++) {
+            if (this.ctx.resolvedStateFor(i) === 'completed') {
+                n++;
+            }
+        }
+        return n;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#completedCount" }] : /* istanbul ignore next */ []));
+    #value = computed(() => this.valueBy() === 'completed' ? this.#completedCount() : this.ctx.selectedIndex(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#value" }] : /* istanbul ignore next */ []));
+    /**
+     * Progress as a whole-number percent in `[0, 100]`, reflected to
+     * `aria-valuenow` and (divided by 100) to the `--for-stepper-progress`
+     * custom property.
+     */
+    percent = computed(() => {
+        const total = this.ctx.count();
+        if (total <= 1) {
+            return total === 1 && this.#value() >= 1 ? 100 : 0;
+        }
+        const raw = Math.round((this.#value() / (total - 1)) * 100);
+        return Math.min(100, Math.max(0, raw));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "percent" }] : /* istanbul ignore next */ []));
+    /**
+     * Human-readable position string reflected to `aria-valuetext`: `"Step X of N"`
+     * on the `'index'` basis, `"P% complete"` on the `'completed'` basis.
+     */
+    valueText = computed(() => this.valueBy() === 'completed'
+        ? `${this.percent()}% complete`
+        : `Step ${Math.min(this.ctx.selectedIndex() + 1, this.ctx.count())} of ${this.ctx.count()}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperProgress, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForStepperProgress, isStandalone: true, selector: "[forStepperProgress]", inputs: { valueBy: { classPropertyName: "valueBy", publicName: "valueBy", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "progressbar" }, properties: { "attr.aria-valuemin": "0", "attr.aria-valuemax": "100", "attr.aria-valuenow": "percent()", "attr.aria-valuetext": "valueText()", "attr.aria-label": "ariaLabel() || null", "attr.data-orientation": "ctx.orientation()", "style.--for-stepper-progress": "percent() / 100" } }, exportAs: ["forStepperProgress"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForStepperProgress, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forStepperProgress]',
+                    exportAs: 'forStepperProgress',
+                    host: {
+                        role: 'progressbar',
+                        '[attr.aria-valuemin]': '0',
+                        '[attr.aria-valuemax]': '100',
+                        '[attr.aria-valuenow]': 'percent()',
+                        '[attr.aria-valuetext]': 'valueText()',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-orientation]': 'ctx.orientation()',
+                        '[style.--for-stepper-progress]': 'percent() / 100',
+                    },
+                }]
+        }], propDecorators: { valueBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueBy", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_STEPPER_CONTEXT, FOR_STEPPER_DEFAULTS, FOR_STEPPER_ITEM_CONTEXT, ForStepper, ForStepperCompletedContent, ForStepperContent, ForStepperIndicator, ForStepperItem, ForStepperList, ForStepperNext, ForStepperPrevious, ForStepperProgress, ForStepperSeparator, ForStepperTrigger, provideForStepperDefaults };
+//# sourceMappingURL=forty-cdk-stepper.mjs.map