@tailng-ui/primitives 0.42.0 → 0.44.0

package/src/lib/layout/stepper/tng-stepper.js

@@ -1,9 +1,573 @@
-import { Directive, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, HostListener, inject, input, isDevMode, output, } from '@angular/core';
+import { createTngIdFactory } from '@tailng-ui/cdk';
 import * as i0 from "@angular/core";
+const createStepperTriggerId = createTngIdFactory('tng-stepper-trigger');
+const createStepperPanelId = createTngIdFactory('tng-stepper-panel');
+let nextStepperItemRegistrationOrder = 0;
+function normalizeBooleanInput(value) {
+    if (typeof value === 'boolean') {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const normalized = value.trim().toLowerCase();
+        if (normalized === '' || normalized === 'true') {
+            return true;
+        }
+        if (normalized === 'false') {
+            return false;
+        }
+    }
+    return false;
+}
+function normalizeOrientationInput(value) {
+    return value === 'vertical' ? 'vertical' : 'horizontal';
+}
+function normalizeOptionalValueInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    return undefined;
+}
+function normalizeValueInput(value) {
+    if (typeof value === 'number' || typeof value === 'string') {
+        return value;
+    }
+    return String(value);
+}
+function normalizeOptionalStringInput(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (value === null) {
+        return null;
+    }
+    if (typeof value === 'string') {
+        return value;
+    }
+    if (typeof value === 'number' || typeof value === 'boolean' || typeof value === 'bigint') {
+        return String(value);
+    }
+    return undefined;
+}
+function compareStepperItemsByDomPosition(a, b) {
+    const aElement = a.getHostElement();
+    const bElement = b.getHostElement();
+    if (aElement === bElement) {
+        return a.getRegistrationOrder() - b.getRegistrationOrder();
+    }
+    const relativePosition = aElement.compareDocumentPosition(bElement);
+    if (relativePosition & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+    }
+    if (relativePosition & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+    }
+    return a.getRegistrationOrder() - b.getRegistrationOrder();
+}
+function valuesEqual(a, b) {
+    return a === b;
+}
 export class TngStepper {
+    hostRef = inject(ElementRef);
+    items = new Set();
+    uncontrolledValue = null;
+    focusedValue = null;
+    lastSelectedValue = null;
+    lastSelectedIndex = -1;
+    initialized = false;
+    hasUserSelection = false;
+    hasExplicitFocus = false;
+    duplicateWarnings = new Set();
+    value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}), transform: normalizeOptionalValueInput });
+    defaultValue = input(undefined, { ...(ngDevMode ? { debugName: "defaultValue" } : {}), transform: normalizeOptionalValueInput });
+    orientation = input('horizontal', { ...(ngDevMode ? { debugName: "orientation" } : {}), transform: normalizeOrientationInput });
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : {}), transform: normalizeBooleanInput });
+    loopFocus = input(true, { ...(ngDevMode ? { debugName: "loopFocus" } : {}), transform: normalizeBooleanInput });
+    ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), transform: normalizeOptionalStringInput });
+    ariaLabelledby = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabelledby" } : {}), transform: normalizeOptionalStringInput });
+    valueChange = output();
+    stepChange = output();
+    get ariaLabelAttr() {
+        return this.ariaLabel() ?? null;
+    }
+    get ariaLabelledbyAttr() {
+        return this.ariaLabelledby() ?? null;
+    }
+    get dataLinear() {
+        return this.linear() ? '' : null;
+    }
+    get dataOrientation() {
+        return this.orientation();
+    }
     dataSlot = 'stepper';
+    ngDoCheck() {
+        this.syncStateFromRegistry();
+    }
+    ngOnDestroy() {
+        this.items.clear();
+    }
+    registerItem(item) {
+        this.items.add(item);
+        this.syncStateFromRegistry();
+    }
+    unregisterItem(item) {
+        const orderedItems = [...this.getOrderedItems()].sort((a, b) => a.getLastKnownIndex() - b.getLastKnownIndex());
+        const removedValue = item.getValue();
+        const selectedValue = this.getEffectiveValue();
+        const removedIndex = valuesEqual(selectedValue, removedValue) ? this.lastSelectedIndex : item.getLastKnownIndex();
+        this.items.delete(item);
+        if (valuesEqual(selectedValue, removedValue)) {
+            this.applyLifecycleSelection(this.resolveNearestEnabledValue(orderedItems, removedIndex));
+        }
+        if (valuesEqual(this.focusedValue, removedValue)) {
+            this.focusedValue = this.resolveNearestEnabledValue(orderedItems, removedIndex);
+            this.hasExplicitFocus = false;
+        }
+        this.syncStateFromRegistry();
+    }
+    notifyItemMutated(item) {
+        if (this.isItemSelected(item) && item.disabled()) {
+            this.applyLifecycleSelection(this.resolveNeighborForItem(item));
+        }
+        if (valuesEqual(this.focusedValue, item.getValue()) && item.disabled()) {
+            this.focusedValue = this.resolveNeighborForItem(item);
+            this.hasExplicitFocus = false;
+        }
+        this.syncStateFromRegistry();
+    }
+    select(value) {
+        const item = this.findItemByValue(value);
+        if (item === null) {
+            return;
+        }
+        this.requestActivation(item, 'programmatic');
+    }
+    focus(value) {
+        const item = this.findEnabledItemByValue(value);
+        if (item === null) {
+            return;
+        }
+        this.focusItem(item);
+    }
+    next() {
+        this.moveFocusFromCurrent('next');
+    }
+    prev() {
+        this.moveFocusFromCurrent('prev');
+    }
+    getItemIndex(item) {
+        return this.getOrderedItems().indexOf(item);
+    }
+    getItemCount() {
+        return this.getOrderedItems().length;
+    }
+    isItemSelected(item) {
+        return valuesEqual(this.getEffectiveValue(), item.getValue());
+    }
+    isItemActivatable(item) {
+        if (item.disabled()) {
+            return false;
+        }
+        if (!this.linear()) {
+            return true;
+        }
+        if (this.isItemSelected(item) || item.completed()) {
+            return true;
+        }
+        const selectedIndex = this.getSelectedIndex();
+        const itemIndex = this.getItemIndex(item);
+        return selectedIndex >= 0 && itemIndex >= 0 && itemIndex < selectedIndex;
+    }
+    getItemState(item) {
+        if (item.disabled()) {
+            return 'disabled';
+        }
+        if (item.error()) {
+            return 'error';
+        }
+        if (this.isItemSelected(item)) {
+            return 'current';
+        }
+        if (item.completed()) {
+            return 'completed';
+        }
+        return 'upcoming';
+    }
+    getTriggerTabIndex(item) {
+        if (item.disabled()) {
+            return '-1';
+        }
+        const tabStopValue = this.resolveCurrentTabStopValue();
+        if (tabStopValue === null) {
+            return '-1';
+        }
+        return valuesEqual(tabStopValue, item.getValue()) ? '0' : '-1';
+    }
+    onTriggerFocused(item) {
+        if (!item.disabled()) {
+            this.focusedValue = item.getValue();
+            this.hasExplicitFocus = true;
+        }
+    }
+    onTriggerClicked(item, event) {
+        if (!this.isItemActivatable(item)) {
+            event.preventDefault();
+            return;
+        }
+        this.requestActivation(item, 'pointer');
+    }
+    onTriggerKeydown(item, event) {
+        if (item.disabled() || event.altKey || event.ctrlKey || event.metaKey) {
+            return;
+        }
+        if (this.handleFocusKey(item, event)) {
+            return;
+        }
+        if (!this.isActivationKey(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        this.requestActivation(item, 'keyboard');
+    }
+    requestActivation(item, trigger) {
+        if (!this.isItemActivatable(item)) {
+            return;
+        }
+        const nextValue = item.getValue();
+        const previousValue = this.getEffectiveValue();
+        if (valuesEqual(previousValue, nextValue)) {
+            return;
+        }
+        if (!this.isControlled()) {
+            this.uncontrolledValue = nextValue;
+            this.hasUserSelection = true;
+        }
+        this.focusedValue = nextValue;
+        this.valueChange.emit(nextValue);
+        this.stepChange.emit({ value: nextValue, previousValue, trigger });
+        this.syncStateFromRegistry();
+    }
+    syncStateFromRegistry() {
+        this.warnForDuplicateValues();
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length === 0) {
+            this.clearSelectionState();
+            return;
+        }
+        if (!this.initialized) {
+            this.initializeSelection(enabledItems);
+        }
+        this.restoreRemovedDefaultSelectionIfNeeded();
+        this.normalizeSelectionForCurrentItems(enabledItems);
+        this.normalizeFocusForCurrentItems(enabledItems);
+        this.syncDomAttributes();
+    }
+    warnForDuplicateValues() {
+        if (!isDevMode()) {
+            return;
+        }
+        const seen = new Set();
+        for (const item of this.getOrderedItems()) {
+            const value = item.getValue();
+            if (!seen.has(value)) {
+                seen.add(value);
+                continue;
+            }
+            if (this.duplicateWarnings.has(value)) {
+                continue;
+            }
+            this.duplicateWarnings.add(value);
+            // eslint-disable-next-line no-console
+            console.warn(`TngStepper: duplicate step value "${String(value)}" registered.`);
+        }
+    }
+    clearSelectionState() {
+        this.uncontrolledValue = null;
+        this.focusedValue = null;
+        this.hasExplicitFocus = false;
+        this.initialized = true;
+        this.syncDomAttributes();
+    }
+    initializeSelection(enabledItems) {
+        this.initialized = true;
+        if (this.isControlled()) {
+            return;
+        }
+        const defaultValue = this.defaultValue();
+        this.uncontrolledValue =
+            defaultValue !== undefined && defaultValue !== null && this.findEnabledItemByValue(defaultValue) !== null
+                ? defaultValue
+                : (enabledItems[0]?.getValue() ?? null);
+    }
+    normalizeSelectionForCurrentItems(enabledItems) {
+        const selectedItem = this.findEnabledItemByValue(this.getEffectiveValue());
+        if (selectedItem === null) {
+            if (!this.isControlled()) {
+                this.uncontrolledValue = this.resolveNearestEnabledValueForMissingSelection();
+            }
+            return;
+        }
+        this.restoreDefaultSelectionIfNeeded(enabledItems);
+    }
+    restoreDefaultSelectionIfNeeded(enabledItems) {
+        if (this.isControlled() || this.hasUserSelection) {
+            return;
+        }
+        const defaultValue = this.defaultValue();
+        if (defaultValue === undefined || defaultValue === null) {
+            return;
+        }
+        if (enabledItems.some((item) => valuesEqual(item.getValue(), defaultValue))) {
+            this.uncontrolledValue = defaultValue;
+        }
+    }
+    restoreRemovedDefaultSelectionIfNeeded() {
+        if (this.isControlled() || this.hasUserSelection) {
+            return;
+        }
+        const defaultValue = this.defaultValue();
+        if (defaultValue === undefined ||
+            defaultValue === null ||
+            !valuesEqual(this.lastSelectedValue, defaultValue) ||
+            this.findItemByValue(defaultValue) !== null) {
+            return;
+        }
+        const orderedItems = [...this.getOrderedItems()].sort((a, b) => a.getLastKnownIndex() - b.getLastKnownIndex());
+        this.uncontrolledValue = this.resolveNearestEnabledValue(orderedItems, this.lastSelectedIndex);
+    }
+    normalizeFocusForCurrentItems(enabledItems) {
+        if (this.hasExplicitFocus &&
+            this.focusedValue !== null &&
+            this.findEnabledItemByValue(this.focusedValue) !== null) {
+            return;
+        }
+        this.focusedValue = this.getEffectiveValue() ?? enabledItems[0]?.getValue() ?? null;
+    }
+    syncDomAttributes() {
+        const orderedItems = this.getOrderedItems();
+        const itemCount = orderedItems.length;
+        this.lastSelectedIndex = -1;
+        this.lastSelectedValue = null;
+        for (const [index, item] of orderedItems.entries()) {
+            if (this.isItemSelected(item)) {
+                this.lastSelectedIndex = index;
+                this.lastSelectedValue = item.getValue();
+            }
+            item.syncDomAttributes({
+                activatable: this.isItemActivatable(item),
+                current: this.isItemSelected(item),
+                index,
+                state: this.getItemState(item),
+                tabIndex: this.getTriggerTabIndex(item),
+                total: itemCount,
+            });
+        }
+    }
+    applyLifecycleSelection(value) {
+        if (!this.isControlled()) {
+            this.uncontrolledValue = value;
+        }
+    }
+    handleFocusKey(item, event) {
+        const move = this.resolveFocusMove(event.key);
+        if (move === null) {
+            return false;
+        }
+        if (this.moveFocus(item, move)) {
+            event.preventDefault();
+        }
+        return true;
+    }
+    isActivationKey(key) {
+        return key === 'Enter' || key === ' ' || key === 'Spacebar';
+    }
+    resolveFocusMove(key) {
+        if (key === 'Home') {
+            return 'first';
+        }
+        if (key === 'End') {
+            return 'last';
+        }
+        if (this.orientation() === 'vertical') {
+            return this.resolveVerticalFocusMove(key);
+        }
+        return this.resolveHorizontalFocusMove(key);
+    }
+    resolveVerticalFocusMove(key) {
+        if (key === 'ArrowDown') {
+            return 'next';
+        }
+        if (key === 'ArrowUp') {
+            return 'prev';
+        }
+        return null;
+    }
+    resolveHorizontalFocusMove(key) {
+        if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
+            return null;
+        }
+        const isRtl = this.resolveDirection() === 'rtl';
+        const moveNext = key === (isRtl ? 'ArrowLeft' : 'ArrowRight');
+        return moveNext ? 'next' : 'prev';
+    }
+    moveFocusFromCurrent(move) {
+        const current = this.findEnabledItemByValue(this.resolveCurrentTabStopValue()) ?? this.getEnabledItems()[0] ?? null;
+        if (current !== null) {
+            this.moveFocus(current, move);
+        }
+    }
+    moveFocus(source, move) {
+        const enabledItems = this.getEnabledItems();
+        if (enabledItems.length === 0) {
+            return false;
+        }
+        const currentIndex = enabledItems.indexOf(source);
+        if (currentIndex < 0) {
+            return false;
+        }
+        const nextIndex = this.resolveFocusTargetIndex(enabledItems.length, currentIndex, move);
+        if (nextIndex === null) {
+            return false;
+        }
+        const target = enabledItems[nextIndex] ?? null;
+        if (target === null || target === source) {
+            return false;
+        }
+        this.focusItem(target);
+        return true;
+    }
+    resolveFocusTargetIndex(itemCount, currentIndex, move) {
+        if (move === 'first') {
+            return 0;
+        }
+        if (move === 'last') {
+            return itemCount - 1;
+        }
+        if (move === 'next') {
+            return this.resolveRelativeFocusTargetIndex(itemCount, currentIndex, 1);
+        }
+        return this.resolveRelativeFocusTargetIndex(itemCount, currentIndex, -1);
+    }
+    resolveRelativeFocusTargetIndex(itemCount, currentIndex, delta) {
+        const nextIndex = currentIndex + delta;
+        if (nextIndex >= 0 && nextIndex < itemCount) {
+            return nextIndex;
+        }
+        if (!this.loopFocus()) {
+            return null;
+        }
+        return delta > 0 ? 0 : itemCount - 1;
+    }
+    focusItem(item) {
+        this.focusedValue = item.getValue();
+        this.hasExplicitFocus = true;
+        item.focusTrigger();
+    }
+    getEffectiveValue() {
+        if (this.isControlled()) {
+            return this.getControlledEffectiveValue();
+        }
+        return this.getUncontrolledEffectiveValue();
+    }
+    getControlledEffectiveValue() {
+        const controlledValue = this.value();
+        if (controlledValue === undefined || controlledValue === null) {
+            return null;
+        }
+        const controlledItem = this.findItemByValue(controlledValue);
+        if (controlledItem === null) {
+            return this.getEnabledItems()[0]?.getValue() ?? null;
+        }
+        if (controlledItem.disabled()) {
+            return this.resolveNeighborForItem(controlledItem);
+        }
+        return controlledValue;
+    }
+    getUncontrolledEffectiveValue() {
+        if (!this.hasUserSelection) {
+            const defaultValue = this.defaultValue();
+            if (defaultValue !== undefined && defaultValue !== null && this.findEnabledItemByValue(defaultValue) !== null) {
+                return defaultValue;
+            }
+        }
+        return this.uncontrolledValue;
+    }
+    isControlled() {
+        return this.value() !== undefined;
+    }
+    getSelectedIndex() {
+        const value = this.getEffectiveValue();
+        if (value === null) {
+            return -1;
+        }
+        return this.getOrderedItems().findIndex((item) => valuesEqual(item.getValue(), value));
+    }
+    resolveCurrentTabStopValue() {
+        if (this.focusedValue !== null && this.findEnabledItemByValue(this.focusedValue) !== null) {
+            return this.focusedValue;
+        }
+        const selectedValue = this.getEffectiveValue();
+        if (selectedValue !== null && this.findEnabledItemByValue(selectedValue) !== null) {
+            return selectedValue;
+        }
+        return this.getEnabledItems()[0]?.getValue() ?? null;
+    }
+    resolveNeighborForItem(item) {
+        const orderedItems = this.getOrderedItems();
+        return this.resolveNearestEnabledValue(orderedItems, orderedItems.indexOf(item));
+    }
+    resolveNearestEnabledValue(orderedItems, index) {
+        for (let i = index - 1; i >= 0; i -= 1) {
+            const item = orderedItems[i];
+            if (item !== undefined && !item.disabled()) {
+                return item.getValue();
+            }
+        }
+        for (let i = index + 1; i < orderedItems.length; i += 1) {
+            const item = orderedItems[i];
+            if (item !== undefined && !item.disabled()) {
+                return item.getValue();
+            }
+        }
+        return null;
+    }
+    resolveNearestEnabledValueForMissingSelection() {
+        const controlledValue = this.getEffectiveValue();
+        const orderedItems = this.getOrderedItems();
+        const selectedIndex = orderedItems.findIndex((item) => valuesEqual(item.getValue(), controlledValue));
+        if (selectedIndex >= 0) {
+            return this.resolveNearestEnabledValue(orderedItems, selectedIndex);
+        }
+        return this.getEnabledItems()[0]?.getValue() ?? null;
+    }
+    findItemByValue(value) {
+        if (value === null) {
+            return null;
+        }
+        return this.getOrderedItems().find((item) => valuesEqual(item.getValue(), value)) ?? null;
+    }
+    findEnabledItemByValue(value) {
+        const item = this.findItemByValue(value);
+        return item !== null && !item.disabled() ? item : null;
+    }
+    getEnabledItems() {
+        return this.getOrderedItems().filter((item) => !item.disabled());
+    }
+    getOrderedItems() {
+        return Array.from(this.items).sort(compareStepperItemsByDomPosition);
+    }
+    resolveDirection() {
+        const host = this.hostRef.nativeElement;
+        return host.closest('[dir="rtl"]') !== null ? 'rtl' : 'ltr';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepper, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepper, isStandalone: true, selector: "[tngStepper]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepper"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngStepper, isStandalone: true, selector: "[tngStepper]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, loopFocus: { classPropertyName: "loopFocus", publicName: "loopFocus", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", stepChange: "stepChange" }, host: { properties: { "attr.aria-label": "this.ariaLabelAttr", "attr.aria-labelledby": "this.ariaLabelledbyAttr", "attr.data-linear": "this.dataLinear", "attr.data-orientation": "this.dataOrientation", "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepper"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepper, decorators: [{
             type: Directive,
@@ -11,8 +575,340 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                     selector: '[tngStepper]',
                     exportAs: 'tngStepper',
                 }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], loopFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "loopFocus", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], ariaLabelAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-label']
+            }], ariaLabelledbyAttr: [{
+                type: HostBinding,
+                args: ['attr.aria-labelledby']
+            }], dataLinear: [{
+                type: HostBinding,
+                args: ['attr.data-linear']
+            }], dataOrientation: [{
+                type: HostBinding,
+                args: ['attr.data-orientation']
+            }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngStepperItem {
+    hostRef = inject(ElementRef);
+    stepper = inject(TngStepper);
+    registrationOrder = nextStepperItemRegistrationOrder++;
+    lastKnownIndex = -1;
+    trigger = null;
+    connectors = new Set();
+    panels = new Set();
+    triggerId = createStepperTriggerId();
+    value = input(createStepperTriggerId(), { ...(ngDevMode ? { debugName: "value" } : {}), transform: normalizeValueInput });
+    completed = input(false, { ...(ngDevMode ? { debugName: "completed" } : {}), transform: normalizeBooleanInput });
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : {}), transform: normalizeBooleanInput });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: normalizeBooleanInput });
+    error = input(false, { ...(ngDevMode ? { debugName: "error" } : {}), transform: normalizeBooleanInput });
+    label = input(undefined, { ...(ngDevMode ? { debugName: "label" } : {}), transform: normalizeOptionalStringInput });
+    description = input(undefined, { ...(ngDevMode ? { debugName: "description" } : {}), transform: normalizeOptionalStringInput });
+    dataSlot = 'stepper-item';
+    ngOnInit() {
+        this.stepper.registerItem(this);
+    }
+    ngDoCheck() {
+        this.stepper.notifyItemMutated(this);
+    }
+    ngOnDestroy() {
+        this.stepper.unregisterItem(this);
+    }
+    registerTrigger(trigger) {
+        this.trigger = trigger;
+        this.stepper.notifyItemMutated(this);
+    }
+    unregisterTrigger(trigger) {
+        if (this.trigger === trigger) {
+            this.trigger = null;
+            this.stepper.notifyItemMutated(this);
+        }
+    }
+    registerConnector(connector) {
+        this.connectors.add(connector);
+        this.stepper.notifyItemMutated(this);
+    }
+    unregisterConnector(connector) {
+        this.connectors.delete(connector);
+        this.stepper.notifyItemMutated(this);
+    }
+    registerPanel(panel) {
+        this.panels.add(panel);
+        this.stepper.notifyItemMutated(this);
+    }
+    unregisterPanel(panel) {
+        this.panels.delete(panel);
+        this.stepper.notifyItemMutated(this);
+    }
+    getValue() {
+        return this.value();
+    }
+    getHostElement() {
+        return this.hostRef.nativeElement;
+    }
+    getRegistrationOrder() {
+        return this.registrationOrder;
+    }
+    getLastKnownIndex() {
+        return this.lastKnownIndex;
+    }
+    getTriggerId() {
+        return this.trigger?.getId() ?? this.triggerId;
+    }
+    getPanelId() {
+        return Array.from(this.panels)[0]?.getId() ?? null;
+    }
+    focusTrigger() {
+        this.trigger?.focusSelf();
+    }
+    syncDomAttributes(state) {
+        this.lastKnownIndex = state.index;
+        const host = this.hostRef.nativeElement;
+        host.setAttribute('data-state', state.state);
+        host.setAttribute('data-step-index', String(state.index));
+        this.setBooleanAttribute(host, 'data-optional', this.optional());
+        this.trigger?.syncDomAttributes(state);
+        for (const connector of this.connectors) {
+            connector.syncDomAttributes(state.state);
+        }
+        for (const panel of this.panels) {
+            panel.syncDomAttributes(state.current, this.getTriggerId());
+        }
+    }
+    setBooleanAttribute(element, name, value) {
+        if (value) {
+            element.setAttribute(name, '');
+        }
+        else {
+            element.removeAttribute(name);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: TngStepperItem, isStandalone: true, selector: "[tngStepperItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepperItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperItem]',
+                    exportAs: 'tngStepperItem',
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], completed: [{ 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngStepperTrigger {
+    hostRef = inject(ElementRef);
+    item = inject(TngStepperItem);
+    stepper = inject(TngStepper);
+    id = createStepperTriggerId();
+    dataSlot = 'stepper-trigger';
+    get idAttr() {
+        const explicitId = this.hostRef.nativeElement.getAttribute('id');
+        return explicitId ?? this.id;
+    }
+    get typeAttr() {
+        return this.hostRef.nativeElement.tagName.toLowerCase() === 'button' ? 'button' : null;
+    }
+    ngOnInit() {
+        this.item.registerTrigger(this);
+    }
+    ngOnDestroy() {
+        this.item.unregisterTrigger(this);
+    }
+    getId() {
+        return this.idAttr;
+    }
+    focusSelf() {
+        this.hostRef.nativeElement.focus();
+    }
+    syncDomAttributes(state) {
+        const host = this.hostRef.nativeElement;
+        if (state.current) {
+            host.setAttribute('aria-current', 'step');
+        }
+        else {
+            host.removeAttribute('aria-current');
+        }
+        if (!state.activatable) {
+            host.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            host.removeAttribute('aria-disabled');
+        }
+        host.setAttribute('aria-label', this.resolveAriaLabel(state.index, state.total));
+        host.setAttribute('data-state', state.state);
+        host.setAttribute('data-step-index', String(state.index));
+        host.setAttribute('tabindex', state.tabIndex);
+        if (this.item.optional()) {
+            host.setAttribute('data-optional', '');
+        }
+        else {
+            host.removeAttribute('data-optional');
+        }
+        const panelId = this.item.getPanelId();
+        if (panelId !== null) {
+            host.setAttribute('aria-controls', panelId);
+        }
+        else {
+            host.removeAttribute('aria-controls');
+        }
+    }
+    onClick(event) {
+        this.stepper.onTriggerClicked(this.item, event);
+    }
+    onFocus() {
+        this.stepper.onTriggerFocused(this.item);
+    }
+    onKeydown(event) {
+        this.stepper.onTriggerKeydown(this.item, event);
+    }
+    resolveAriaLabel(index, total) {
+        const label = this.item.label() ?? this.hostRef.nativeElement.textContent?.trim() ?? 'Step';
+        return [label, `Step ${index + 1} of ${total}`, this.resolveStateText()]
+            .filter((part) => part.length > 0)
+            .join(', ');
+    }
+    resolveStateText() {
+        if (this.item.error()) {
+            return 'Error';
+        }
+        if (this.item.optional()) {
+            return 'Optional';
+        }
+        if (this.item.completed()) {
+            return 'Completed';
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperTrigger, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepperTrigger, isStandalone: true, selector: "[tngStepperTrigger]", host: { listeners: { "click": "onClick($event)", "focus": "onFocus()", "keydown": "onKeydown($event)" }, properties: { "attr.data-slot": "this.dataSlot", "attr.id": "this.idAttr", "attr.type": "this.typeAttr" } }, exportAs: ["tngStepperTrigger"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperTrigger]',
+                    exportAs: 'tngStepperTrigger',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], idAttr: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }], typeAttr: [{
+                type: HostBinding,
+                args: ['attr.type']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], onFocus: [{
+                type: HostListener,
+                args: ['focus']
+            }], onKeydown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+export class TngStepperLabel {
+    dataSlot = 'stepper-label';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepperLabel, isStandalone: true, selector: "[tngStepperLabel]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepperLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperLabel]',
+                    exportAs: 'tngStepperLabel',
+                }]
         }], propDecorators: { dataSlot: [{
                 type: HostBinding,
                 args: ['attr.data-slot']
             }] } });
+export class TngStepperDescription {
+    dataSlot = 'stepper-description';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperDescription, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepperDescription, isStandalone: true, selector: "[tngStepperDescription]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepperDescription"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperDescription, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperDescription]',
+                    exportAs: 'tngStepperDescription',
+                }]
+        }], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
+export class TngStepperPanel {
+    hostRef = inject(ElementRef);
+    item = inject(TngStepperItem);
+    panelId = createStepperPanelId();
+    dataSlot = 'stepper-panel';
+    get id() {
+        return this.panelId;
+    }
+    constructor() {
+        this.item.registerPanel(this);
+    }
+    ngOnDestroy() {
+        this.item.unregisterPanel(this);
+    }
+    getId() {
+        return this.panelId;
+    }
+    syncDomAttributes(current, triggerId) {
+        const host = this.hostRef.nativeElement;
+        host.setAttribute('aria-labelledby', triggerId);
+        host.setAttribute('data-state', current ? 'active' : 'inactive');
+        if (current) {
+            host.removeAttribute('hidden');
+        }
+        else {
+            host.setAttribute('hidden', '');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepperPanel, isStandalone: true, selector: "[tngStepperPanel]", host: { properties: { "attr.data-slot": "this.dataSlot", "attr.id": "this.id" } }, exportAs: ["tngStepperPanel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperPanel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperPanel]',
+                    exportAs: 'tngStepperPanel',
+                }]
+        }], ctorParameters: () => [], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }], id: [{
+                type: HostBinding,
+                args: ['attr.id']
+            }] } });
+export class TngStepperConnector {
+    hostRef = inject(ElementRef);
+    item = inject(TngStepperItem);
+    dataSlot = 'stepper-connector';
+    constructor() {
+        this.item.registerConnector(this);
+    }
+    ngOnDestroy() {
+        this.item.unregisterConnector(this);
+    }
+    syncDomAttributes(state) {
+        this.hostRef.nativeElement.setAttribute('data-state', state);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperConnector, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: TngStepperConnector, isStandalone: true, selector: "[tngStepperConnector]", host: { properties: { "attr.data-slot": "this.dataSlot" } }, exportAs: ["tngStepperConnector"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TngStepperConnector, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tngStepperConnector]',
+                    exportAs: 'tngStepperConnector',
+                }]
+        }], ctorParameters: () => [], propDecorators: { dataSlot: [{
+                type: HostBinding,
+                args: ['attr.data-slot']
+            }] } });
 //# sourceMappingURL=tng-stepper.js.map