@raintonic/formaui 0.4.0 → 0.9.2

package/fesm2022/raintonic-formaui-components-stepper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, signal, viewChild, TemplateRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, output, contentChildren, effect } from '@angular/core';
+import { input, booleanAttribute, signal, viewChild, TemplateRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, output, contentChildren, viewChildren, ElementRef, effect } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FuiIconComponent } from '@raintonic/formaui/components/icon';
 
@@ -32,6 +32,7 @@ class FuiStepComponent {
     errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     stepControl = input(null, ...(ngDevMode ? [{ debugName: "stepControl" }] : /* istanbul ignore next */ []));
     optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     // Internal state
     _interacted = signal(false, ...(ngDevMode ? [{ debugName: "_interacted" }] : /* istanbul ignore next */ []));
     // Content template reference for lazy rendering
@@ -46,6 +47,9 @@ class FuiStepComponent {
         return !!(control && control.invalid && this._interacted());
     }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     state = computed(() => {
+        if (this.disabled()) {
+            return 'disabled';
+        }
         if (this.hasError()) {
             return 'error';
         }
@@ -67,7 +71,7 @@ class FuiStepComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiStepComponent, isStandalone: true, selector: "fui-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiStepComponent, isStandalone: true, selector: "fui-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", 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 } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepComponent, decorators: [{
             type: Component,
@@ -78,7 +82,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     encapsulation: ViewEncapsulation.None,
                 }]
-        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 const FORMAUI_STEPPER = new InjectionToken('FORMAUI_STEPPER');
 
@@ -131,6 +135,8 @@ class FuiStepperComponent {
     animationDone = output();
     // Content children
     steps = contentChildren(FuiStepComponent, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    // Template references to step header buttons for scroll-into-view
+    stepHeaderButtons = viewChildren('stepHeaderBtn', { ...(ngDevMode ? { debugName: "stepHeaderButtons" } : /* istanbul ignore next */ {}), read: ElementRef });
     // Internal state
     _selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "_selectedIndex" }] : /* istanbul ignore next */ []));
     // Unique ID for ARIA linking
@@ -142,37 +148,27 @@ class FuiStepperComponent {
         return allSteps[idx] ?? null;
     }, ...(ngDevMode ? [{ debugName: "_selectedStep" }] : /* istanbul ignore next */ []));
     constructor() {
-        // Sync selectedIndex input with internal state
+        // Sync selectedIndex input → internal state
         effect(() => {
             const idx = this.selectedIndex();
             this._selectedIndex.set(idx);
         });
+        // Scroll the active header into view after navigation
+        effect(() => {
+            const idx = this._selectedIndex();
+            const btnEl = this.stepHeaderButtons()[idx];
+            btnEl?.nativeElement.scrollIntoView?.({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+        });
     }
     /** Navigate to the next step. In linear mode, validates the current step first. */
     next() {
-        const allSteps = this.steps();
         const currentIdx = this._selectedIndex();
-        if (currentIdx >= allSteps.length - 1) {
-            return;
-        }
-        if (this.linear()) {
-            const currentStep = allSteps[currentIdx];
-            if (currentStep) {
-                currentStep._interacted.set(true);
-                const control = currentStep.stepControl();
-                if (control?.invalid) {
-                    return;
-                }
-            }
-        }
-        this._setSelectedIndex(currentIdx + 1);
+        this.goToStep(currentIdx + 1);
     }
     /** Navigate to the previous step. */
     previous() {
         const currentIdx = this._selectedIndex();
-        if (currentIdx > 0) {
-            this._setSelectedIndex(currentIdx - 1);
-        }
+        this.goToStep(currentIdx - 1);
     }
     /** Navigate directly to a specific step by index. */
     goToStep(index) {
@@ -180,19 +176,17 @@ class FuiStepperComponent {
         if (index < 0 || index >= allSteps.length) {
             return;
         }
+        // In linear mode, mark preceding steps as interacted when moving forward
+        // (do this BEFORE the disabled check so validation errors become visible)
         if (this.linear() && index > this._selectedIndex()) {
-            // In linear mode, can only go forward if all preceding steps are valid
             for (let i = this._selectedIndex(); i < index; i++) {
-                const step = allSteps[i];
-                if (step) {
-                    step._interacted.set(true);
-                    const control = step.stepControl();
-                    if (control?.invalid) {
-                        return;
-                    }
-                }
+                allSteps[i]?._interacted.set(true);
             }
         }
+        // If the target step is disabled (explicitly or by linear rules), block navigation
+        if (this._isStepDisabled(index)) {
+            return;
+        }
         this._setSelectedIndex(index);
     }
     /** Reset all steps and return to the first step. */
@@ -208,25 +202,36 @@ class FuiStepperComponent {
     }
     /** @internal Check if a step is disabled for navigation */
     _isStepDisabled(index) {
+        const allSteps = this.steps();
+        const step = allSteps[index];
+        // Step is explicitly disabled
+        if (step?.disabled()) {
+            return true;
+        }
         if (!this.linear()) {
             return false;
         }
-        const allSteps = this.steps();
-        // Can always go backward
+        // Can always go backward in linear mode (respect editable)
         if (index < this._selectedIndex()) {
-            // Check if the target step is editable
-            const targetStep = allSteps[index];
-            return targetStep ? !targetStep.editable() : false;
+            return step ? !step.editable() : false;
         }
-        // For forward navigation in linear mode, check all preceding steps
+        // In linear mode, forward steps are disabled if any preceding step
+        // (starting from the current) is not completed and has no valid form control.
         if (index > this._selectedIndex()) {
             for (let i = this._selectedIndex(); i < index; i++) {
-                const step = allSteps[i];
-                if (step) {
-                    const control = step.stepControl();
-                    if (control?.invalid) {
-                        return true;
+                const precedingStep = allSteps[i];
+                if (precedingStep) {
+                    // Already completed — allow skipping past it
+                    if (precedingStep.completed() || precedingStep.state() === 'completed') {
+                        continue;
+                    }
+                    // Has a valid form control — allow proceeding
+                    const control = precedingStep.stepControl();
+                    if (control && !control.invalid) {
+                        continue;
                     }
+                    // No valid reason to allow — disable this forward step
+                    return true;
                 }
             }
         }
@@ -297,7 +302,7 @@ class FuiStepperComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiStepperComponent, isStandalone: true, selector: "fui-stepper", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", animationDone: "animationDone" }, host: { properties: { "class.fui-stepper--horizontal": "orientation() === \"horizontal\"", "class.fui-stepper--vertical": "orientation() === \"vertical\"", "class.fui-stepper--linear": "linear()" }, classAttribute: "fui-stepper" }, providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }], queries: [{ propertyName: "steps", predicate: FuiStepComponent, isSignal: true }], ngImport: i0, template: "<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-stepper{display:block;font-family:var(--fui-font-family-sans)}.fui-stepper__header{display:flex;align-items:center}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-gap-8);padding:var(--fui-padding-8) var(--fui-padding-12);border-radius:var(--fui-border-radius-md);transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary);color:var(--fui-primary-contrast);border-color:var(--fui-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-semibold)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success);color:var(--fui-white);border-color:var(--fui-success)}.fui-stepper__step-header--completed .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-danger);color:var(--fui-white);border-color:var(--fui-danger)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-danger)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-surface-03);color:var(--fui-text-disabled);border-color:var(--fui-border-color)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--fui-border-color);background-color:var(--fui-surface-01);color:var(--fui-text-secondary);flex-shrink:0;transition:background-color,color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-number{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium);color:var(--fui-text-secondary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-description{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-font-size-01);color:var(--fui-danger)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-color);transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-stepper__connector--completed{background-color:var(--fui-success)}.fui-stepper__content{margin-top:var(--fui-spacing-05)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiStepperComponent, isStandalone: true, selector: "fui-stepper", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", animationDone: "animationDone" }, host: { properties: { "class.fui-stepper--horizontal": "orientation() === \"horizontal\"", "class.fui-stepper--vertical": "orientation() === \"vertical\"", "class.fui-stepper--linear": "linear()" }, classAttribute: "fui-stepper" }, providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }], queries: [{ propertyName: "steps", predicate: FuiStepComponent, isSignal: true }], viewQueries: [{ propertyName: "stepHeaderButtons", predicate: ["stepHeaderBtn"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      #stepHeaderBtn\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-stepper{display:block;font-family:var(--fui-font-sans)}.fui-stepper__header{display:flex;align-items:center;overflow-x:auto}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-4) var(--fui-spacing-6);border-radius:var(--fui-radius-md);transition-property:background-color,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-bg-subtle)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);border-color:var(--fui-border-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill);border-color:var(--fui-border-success)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill);border-color:var(--fui-border-error)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-text-error)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-bg-muted);color:var(--fui-text-disabled);border-color:var(--fui-border-default)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:var(--fui-border-width-md) solid var(--fui-border-default);background-color:var(--fui-bg-default);color:var(--fui-text-secondary);flex-shrink:0;transition-property:background-color,color,border-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__step-number{font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-secondary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__step-description{font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-default);transition-property:background-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__connector--completed{background-color:var(--fui-fill-success)}.fui-stepper__content{margin-top:var(--fui-spacing-7)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast) var(--fui-ease-out)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}.fui-stepper--linear .fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success-80);border-color:var(--fui-success-80)}.fui-stepper--linear .fui-stepper__connector--completed{background-color:var(--fui-success-80)}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepperComponent, decorators: [{
             type: Component,
@@ -306,8 +311,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                         '[class.fui-stepper--horizontal]': 'orientation() === "horizontal"',
                         '[class.fui-stepper--vertical]': 'orientation() === "vertical"',
                         '[class.fui-stepper--linear]': 'linear()',
-                    }, providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }], template: "<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-stepper{display:block;font-family:var(--fui-font-family-sans)}.fui-stepper__header{display:flex;align-items:center}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-gap-8);padding:var(--fui-padding-8) var(--fui-padding-12);border-radius:var(--fui-border-radius-md);transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary);color:var(--fui-primary-contrast);border-color:var(--fui-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-semibold)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success);color:var(--fui-white);border-color:var(--fui-success)}.fui-stepper__step-header--completed .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-danger);color:var(--fui-white);border-color:var(--fui-danger)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-danger)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-surface-03);color:var(--fui-text-disabled);border-color:var(--fui-border-color)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--fui-border-color);background-color:var(--fui-surface-01);color:var(--fui-text-secondary);flex-shrink:0;transition:background-color,color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-number{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium);color:var(--fui-text-secondary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-description{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-font-size-01);color:var(--fui-danger)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-color);transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-stepper__connector--completed{background-color:var(--fui-success)}.fui-stepper__content{margin-top:var(--fui-spacing-05)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiStepComponent), { isSignal: true }] }] } });
+                    }, providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }], template: "<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      #stepHeaderBtn\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-stepper{display:block;font-family:var(--fui-font-sans)}.fui-stepper__header{display:flex;align-items:center;overflow-x:auto}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-spacing-4);padding:var(--fui-spacing-4) var(--fui-spacing-6);border-radius:var(--fui-radius-md);transition-property:background-color,color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-bg-subtle)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary-bg);color:var(--fui-text-on-fill);border-color:var(--fui-border-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-fill-success);color:var(--fui-text-on-fill);border-color:var(--fui-border-success)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-fill-error);color:var(--fui-text-on-fill);border-color:var(--fui-border-error)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-text-error)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-bg-muted);color:var(--fui-text-disabled);border-color:var(--fui-border-default)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:var(--fui-border-width-md) solid var(--fui-border-default);background-color:var(--fui-bg-default);color:var(--fui-text-secondary);flex-shrink:0;transition-property:background-color,color,border-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__step-number{font-size:var(--fui-text-base);font-weight:var(--fui-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-text-base);font-weight:var(--fui-weight-medium);color:var(--fui-text-secondary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__step-description{font-size:var(--fui-text-sm);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-text-sm);color:var(--fui-text-error)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-default);transition-property:background-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-stepper__connector--completed{background-color:var(--fui-fill-success)}.fui-stepper__content{margin-top:var(--fui-spacing-7)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast) var(--fui-ease-out)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}.fui-stepper--linear .fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success-80);border-color:var(--fui-success-80)}.fui-stepper--linear .fui-stepper__connector--completed{background-color:var(--fui-success-80)}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiStepComponent), { isSignal: true }] }], stepHeaderButtons: [{ type: i0.ViewChildren, args: ['stepHeaderBtn', { ...{ read: ElementRef }, isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/raintonic-formaui-components-stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-stepper.mjs","sources":["../../../lib/components/stepper/step.component.ts","../../../lib/components/stepper/stepper.types.ts","../../../lib/components/stepper/stepper.component.ts","../../../lib/components/stepper/stepper.component.html","../../../lib/components/stepper/raintonic-formaui-components-stepper.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  signal,\r\n  computed,\r\n  viewChild,\r\n  TemplateRef,\r\n  booleanAttribute,\r\n  WritableSignal,\r\n  Signal,\r\n} from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { StepState } from './stepper.types';\r\n\r\n/**\r\n * # FuiStepComponent\r\n *\r\n * Represents a single step within an `fui-stepper`.\r\n * Each step has a label, optional description/icon, and content that is lazily rendered.\r\n *\r\n * ## Usage\r\n *\r\n * ```html\r\n * <fui-stepper>\r\n *   <fui-step label=\"Account\" description=\"Create your account\">\r\n *     <p>Account creation form here...</p>\r\n *   </fui-step>\r\n *   <fui-step label=\"Profile\" icon=\"user\">\r\n *     <p>Profile setup here...</p>\r\n *   </fui-step>\r\n * </fui-stepper>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-step',\r\n  standalone: true,\r\n  template: '<ng-template><ng-content></ng-content></ng-template>',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class FuiStepComponent {\r\n  // Inputs\r\n  readonly label = input.required<string>();\r\n  readonly description = input('');\r\n  readonly icon = input('');\r\n  readonly completed = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly editable = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly errorMessage = input('');\r\n  readonly stepControl = input<AbstractControl | null>(null);\r\n  readonly optional = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n  // Internal state\r\n  readonly _interacted: WritableSignal<boolean> = signal(false);\r\n\r\n  // Content template reference for lazy rendering\r\n  readonly contentTemplate: Signal<TemplateRef<unknown> | undefined> = viewChild(TemplateRef);\r\n\r\n  // Computed state\r\n  readonly hasError: Signal<boolean> = computed(() => {\r\n    const errMsg = this.errorMessage();\r\n    if (errMsg && errMsg.length > 0) {\r\n      return true;\r\n    }\r\n    const control = this.stepControl();\r\n    return !!(control && control.invalid && this._interacted());\r\n  });\r\n\r\n  readonly state: Signal<StepState> = computed(() => {\r\n    if (this.hasError()) {\r\n      return 'error';\r\n    }\r\n    if (this.completed()) {\r\n      return 'completed';\r\n    }\r\n    return 'default';\r\n  });\r\n\r\n  /** Mark this step as interacted and select it via the parent stepper. */\r\n  select(): void {\r\n    this._interacted.set(true);\r\n  }\r\n\r\n  /** Reset the step to its initial state. */\r\n  reset(): void {\r\n    this._interacted.set(false);\r\n    const control = this.stepControl();\r\n    if (control) {\r\n      control.reset();\r\n    }\r\n  }\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\n\r\nexport type StepperOrientation = 'horizontal' | 'vertical';\r\nexport type StepState = 'active' | 'completed' | 'error' | 'disabled' | 'default';\r\n\r\nexport interface StepSelectionChange {\r\n  selectedIndex: number;\r\n  previousIndex: number;\r\n  selectedStep: unknown;\r\n  previousStep: unknown;\r\n}\r\n\r\nexport const FORMAUI_STEPPER = new InjectionToken<unknown>('FORMAUI_STEPPER');\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  signal,\r\n  computed,\r\n  effect,\r\n  contentChildren,\r\n  booleanAttribute,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiStepComponent } from './step.component';\r\nimport { StepperOrientation, StepSelectionChange, FORMAUI_STEPPER } from './stepper.types';\r\n\r\nlet nextStepperId = 0;\r\n\r\n/**\r\n * # FuiStepperComponent\r\n *\r\n * A stepper component that guides users through a sequence of steps.\r\n * Supports horizontal and vertical orientations, linear and non-linear navigation,\r\n * step validation, and lazy content rendering.\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic horizontal stepper\r\n * ```html\r\n * <fui-stepper>\r\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\r\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\r\n *   <fui-step label=\"Step 3\">Content 3</fui-step>\r\n * </fui-stepper>\r\n * ```\r\n *\r\n * ### Vertical stepper\r\n * ```html\r\n * <fui-stepper orientation=\"vertical\">\r\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\r\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\r\n * </fui-stepper>\r\n * ```\r\n *\r\n * ### Linear stepper with form validation\r\n * ```html\r\n * <fui-stepper [linear]=\"true\">\r\n *   <fui-step label=\"Account\" [stepControl]=\"accountForm\">\r\n *     <form [formGroup]=\"accountForm\">...</form>\r\n *   </fui-step>\r\n *   <fui-step label=\"Address\" [stepControl]=\"addressForm\">\r\n *     <form [formGroup]=\"addressForm\">...</form>\r\n *   </fui-step>\r\n * </fui-stepper>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-stepper',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet, FuiIconComponent],\r\n  templateUrl: './stepper.component.html',\r\n  styleUrls: ['./stepper.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-stepper',\r\n    '[class.fui-stepper--horizontal]': 'orientation() === \"horizontal\"',\r\n    '[class.fui-stepper--vertical]': 'orientation() === \"vertical\"',\r\n    '[class.fui-stepper--linear]': 'linear()',\r\n  },\r\n  providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }],\r\n})\r\nexport class FuiStepperComponent {\r\n  // Inputs\r\n  readonly orientation = input<StepperOrientation>('horizontal');\r\n  readonly linear = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly selectedIndex = input(0);\r\n\r\n  // Outputs\r\n  readonly selectionChange = output<StepSelectionChange>();\r\n  readonly animationDone = output();\r\n\r\n  // Content children\r\n  readonly steps = contentChildren(FuiStepComponent);\r\n\r\n  // Internal state\r\n  readonly _selectedIndex: WritableSignal<number> = signal(0);\r\n\r\n  // Unique ID for ARIA linking\r\n  readonly _uniqueId = nextStepperId++;\r\n\r\n  // Computed: active step\r\n  readonly _selectedStep = computed(() => {\r\n    const allSteps = this.steps();\r\n    const idx = this._selectedIndex();\r\n    return allSteps[idx] ?? null;\r\n  });\r\n\r\n  constructor() {\r\n    // Sync selectedIndex input with internal state\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      this._selectedIndex.set(idx);\r\n    });\r\n  }\r\n\r\n  /** Navigate to the next step. In linear mode, validates the current step first. */\r\n  next(): void {\r\n    const allSteps = this.steps();\r\n    const currentIdx = this._selectedIndex();\r\n\r\n    if (currentIdx >= allSteps.length - 1) {\r\n      return;\r\n    }\r\n\r\n    if (this.linear()) {\r\n      const currentStep = allSteps[currentIdx];\r\n      if (currentStep) {\r\n        currentStep._interacted.set(true);\r\n        const control = currentStep.stepControl();\r\n        if (control?.invalid) {\r\n          return;\r\n        }\r\n      }\r\n    }\r\n\r\n    this._setSelectedIndex(currentIdx + 1);\r\n  }\r\n\r\n  /** Navigate to the previous step. */\r\n  previous(): void {\r\n    const currentIdx = this._selectedIndex();\r\n    if (currentIdx > 0) {\r\n      this._setSelectedIndex(currentIdx - 1);\r\n    }\r\n  }\r\n\r\n  /** Navigate directly to a specific step by index. */\r\n  goToStep(index: number): void {\r\n    const allSteps = this.steps();\r\n    if (index < 0 || index >= allSteps.length) {\r\n      return;\r\n    }\r\n\r\n    if (this.linear() && index > this._selectedIndex()) {\r\n      // In linear mode, can only go forward if all preceding steps are valid\r\n      for (let i = this._selectedIndex(); i < index; i++) {\r\n        const step = allSteps[i];\r\n        if (step) {\r\n          step._interacted.set(true);\r\n          const control = step.stepControl();\r\n          if (control?.invalid) {\r\n            return;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    this._setSelectedIndex(index);\r\n  }\r\n\r\n  /** Reset all steps and return to the first step. */\r\n  reset(): void {\r\n    this._selectedIndex.set(0);\r\n    this.steps().forEach((step) => {\r\n      step.reset();\r\n    });\r\n  }\r\n\r\n  /** @internal Handle step header click */\r\n  _onStepHeaderClick(index: number): void {\r\n    this.goToStep(index);\r\n  }\r\n\r\n  /** @internal Check if a step is disabled for navigation */\r\n  _isStepDisabled(index: number): boolean {\r\n    if (!this.linear()) {\r\n      return false;\r\n    }\r\n\r\n    const allSteps = this.steps();\r\n\r\n    // Can always go backward\r\n    if (index < this._selectedIndex()) {\r\n      // Check if the target step is editable\r\n      const targetStep = allSteps[index];\r\n      return targetStep ? !targetStep.editable() : false;\r\n    }\r\n\r\n    // For forward navigation in linear mode, check all preceding steps\r\n    if (index > this._selectedIndex()) {\r\n      for (let i = this._selectedIndex(); i < index; i++) {\r\n        const step = allSteps[i];\r\n        if (step) {\r\n          const control = step.stepControl();\r\n          if (control?.invalid) {\r\n            return true;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /** @internal Handle keyboard navigation on step headers */\r\n  _onHeaderKeydown(event: KeyboardEvent, currentIndex: number): void {\r\n    const isHorizontal = this.orientation() === 'horizontal';\r\n    const allSteps = this.steps();\r\n    let newIndex = currentIndex;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        if (isHorizontal && currentIndex < allSteps.length - 1) {\r\n          newIndex = currentIndex + 1;\r\n        }\r\n        break;\r\n      case 'ArrowLeft':\r\n        if (isHorizontal && currentIndex > 0) {\r\n          newIndex = currentIndex - 1;\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n        if (!isHorizontal && currentIndex < allSteps.length - 1) {\r\n          newIndex = currentIndex + 1;\r\n          event.preventDefault();\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        if (!isHorizontal && currentIndex > 0) {\r\n          newIndex = currentIndex - 1;\r\n          event.preventDefault();\r\n        }\r\n        break;\r\n      case 'Home':\r\n        newIndex = 0;\r\n        event.preventDefault();\r\n        break;\r\n      case 'End':\r\n        newIndex = allSteps.length - 1;\r\n        event.preventDefault();\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n\r\n    if (newIndex !== currentIndex) {\r\n      this._onStepHeaderClick(newIndex);\r\n    }\r\n  }\r\n\r\n  /** @internal Set the selected index and emit selection change */\r\n  private _setSelectedIndex(newIndex: number): void {\r\n    const allSteps = this.steps();\r\n    const previousIndex = this._selectedIndex();\r\n\r\n    if (newIndex === previousIndex) {\r\n      return;\r\n    }\r\n\r\n    const previousStep = allSteps[previousIndex] ?? null;\r\n    const selectedStep = allSteps[newIndex] ?? null;\r\n\r\n    // Mark the new step as interacted\r\n    if (selectedStep) {\r\n      selectedStep._interacted.set(true);\r\n    }\r\n\r\n    this._selectedIndex.set(newIndex);\r\n\r\n    this.selectionChange.emit({\r\n      selectedIndex: newIndex,\r\n      previousIndex,\r\n      selectedStep,\r\n      previousStep,\r\n    });\r\n  }\r\n}\r\n","<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"raintonic-formaui-components-stepper.mjs","sources":["../../../lib/components/stepper/step.component.ts","../../../lib/components/stepper/stepper.types.ts","../../../lib/components/stepper/stepper.component.ts","../../../lib/components/stepper/stepper.component.html","../../../lib/components/stepper/raintonic-formaui-components-stepper.ts"],"sourcesContent":["import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  signal,\r\n  computed,\r\n  viewChild,\r\n  TemplateRef,\r\n  booleanAttribute,\r\n  WritableSignal,\r\n  Signal,\r\n} from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { StepState } from './stepper.types';\r\n\r\n/**\r\n * # FuiStepComponent\r\n *\r\n * Represents a single step within an `fui-stepper`.\r\n * Each step has a label, optional description/icon, and content that is lazily rendered.\r\n *\r\n * ## Usage\r\n *\r\n * ```html\r\n * <fui-stepper>\r\n *   <fui-step label=\"Account\" description=\"Create your account\">\r\n *     <p>Account creation form here...</p>\r\n *   </fui-step>\r\n *   <fui-step label=\"Profile\" icon=\"user\">\r\n *     <p>Profile setup here...</p>\r\n *   </fui-step>\r\n * </fui-stepper>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-step',\r\n  standalone: true,\r\n  template: '<ng-template><ng-content></ng-content></ng-template>',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n})\r\nexport class FuiStepComponent {\r\n  // Inputs\r\n  readonly label = input.required<string>();\r\n  readonly description = input('');\r\n  readonly icon = input('');\r\n  readonly completed = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly editable = input<boolean, unknown>(true, { transform: booleanAttribute });\r\n  readonly errorMessage = input('');\r\n  readonly stepControl = input<AbstractControl | null>(null);\r\n  readonly optional = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly disabled = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n\r\n  // Internal state\r\n  readonly _interacted: WritableSignal<boolean> = signal(false);\r\n\r\n  // Content template reference for lazy rendering\r\n  readonly contentTemplate: Signal<TemplateRef<unknown> | undefined> = viewChild(TemplateRef);\r\n\r\n  // Computed state\r\n  readonly hasError: Signal<boolean> = computed(() => {\r\n    const errMsg = this.errorMessage();\r\n    if (errMsg && errMsg.length > 0) {\r\n      return true;\r\n    }\r\n    const control = this.stepControl();\r\n    return !!(control && control.invalid && this._interacted());\r\n  });\r\n\r\n  readonly state: Signal<StepState> = computed(() => {\r\n    if (this.disabled()) {\r\n      return 'disabled';\r\n    }\r\n    if (this.hasError()) {\r\n      return 'error';\r\n    }\r\n    if (this.completed()) {\r\n      return 'completed';\r\n    }\r\n    return 'default';\r\n  });\r\n\r\n  /** Mark this step as interacted and select it via the parent stepper. */\r\n  select(): void {\r\n    this._interacted.set(true);\r\n  }\r\n\r\n  /** Reset the step to its initial state. */\r\n  reset(): void {\r\n    this._interacted.set(false);\r\n    const control = this.stepControl();\r\n    if (control) {\r\n      control.reset();\r\n    }\r\n  }\r\n}\r\n","import { InjectionToken } from '@angular/core';\r\n\r\nexport type StepperOrientation = 'horizontal' | 'vertical';\r\nexport type StepState = 'active' | 'completed' | 'error' | 'disabled' | 'default';\r\n\r\nexport interface StepSelectionChange {\r\n  selectedIndex: number;\r\n  previousIndex: number;\r\n  selectedStep: unknown;\r\n  previousStep: unknown;\r\n}\r\n\r\nexport const FORMAUI_STEPPER = new InjectionToken<unknown>('FORMAUI_STEPPER');\r\n","import {\r\n  Component,\r\n  ChangeDetectionStrategy,\r\n  ViewEncapsulation,\r\n  input,\r\n  output,\r\n  signal,\r\n  computed,\r\n  effect,\r\n  contentChildren,\r\n  booleanAttribute,\r\n  WritableSignal,\r\n  viewChildren,\r\n  ElementRef,\r\n} from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\r\nimport { FuiStepComponent } from './step.component';\r\nimport { StepperOrientation, StepSelectionChange, FORMAUI_STEPPER } from './stepper.types';\r\n\r\nlet nextStepperId = 0;\r\n\r\n/**\r\n * # FuiStepperComponent\r\n *\r\n * A stepper component that guides users through a sequence of steps.\r\n * Supports horizontal and vertical orientations, linear and non-linear navigation,\r\n * step validation, and lazy content rendering.\r\n *\r\n * ## Usage\r\n *\r\n * ### Basic horizontal stepper\r\n * ```html\r\n * <fui-stepper>\r\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\r\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\r\n *   <fui-step label=\"Step 3\">Content 3</fui-step>\r\n * </fui-stepper>\r\n * ```\r\n *\r\n * ### Vertical stepper\r\n * ```html\r\n * <fui-stepper orientation=\"vertical\">\r\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\r\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\r\n * </fui-stepper>\r\n * ```\r\n *\r\n * ### Linear stepper with form validation\r\n * ```html\r\n * <fui-stepper [linear]=\"true\">\r\n *   <fui-step label=\"Account\" [stepControl]=\"accountForm\">\r\n *     <form [formGroup]=\"accountForm\">...</form>\r\n *   </fui-step>\r\n *   <fui-step label=\"Address\" [stepControl]=\"addressForm\">\r\n *     <form [formGroup]=\"addressForm\">...</form>\r\n *   </fui-step>\r\n * </fui-stepper>\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'fui-stepper',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet, FuiIconComponent],\r\n  templateUrl: './stepper.component.html',\r\n  styleUrls: ['./stepper.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-stepper',\r\n    '[class.fui-stepper--horizontal]': 'orientation() === \"horizontal\"',\r\n    '[class.fui-stepper--vertical]': 'orientation() === \"vertical\"',\r\n    '[class.fui-stepper--linear]': 'linear()',\r\n  },\r\n  providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }],\r\n})\r\nexport class FuiStepperComponent {\r\n  // Inputs\r\n  readonly orientation = input<StepperOrientation>('horizontal');\r\n  readonly linear = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  readonly selectedIndex = input(0);\r\n\r\n  // Outputs\r\n  readonly selectionChange = output<StepSelectionChange>();\r\n  readonly animationDone = output();\r\n\r\n  // Content children\r\n  readonly steps = contentChildren(FuiStepComponent);\r\n\r\n  // Template references to step header buttons for scroll-into-view\r\n  readonly stepHeaderButtons = viewChildren('stepHeaderBtn', { read: ElementRef });\r\n\r\n  // Internal state\r\n  readonly _selectedIndex: WritableSignal<number> = signal(0);\r\n\r\n  // Unique ID for ARIA linking\r\n  readonly _uniqueId = nextStepperId++;\r\n\r\n  // Computed: active step\r\n  readonly _selectedStep = computed(() => {\r\n    const allSteps = this.steps();\r\n    const idx = this._selectedIndex();\r\n    return allSteps[idx] ?? null;\r\n  });\r\n\r\n  constructor() {\r\n    // Sync selectedIndex input → internal state\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      this._selectedIndex.set(idx);\r\n    });\r\n\r\n    // Scroll the active header into view after navigation\r\n    effect(() => {\r\n      const idx = this._selectedIndex();\r\n      const btnEl = this.stepHeaderButtons()[idx];\r\n      btnEl?.nativeElement.scrollIntoView?.({ behavior: 'smooth', block: 'nearest', inline: 'start' });\r\n    });\r\n  }\r\n\r\n  /** Navigate to the next step. In linear mode, validates the current step first. */\r\n  next(): void {\r\n    const currentIdx = this._selectedIndex();\r\n    this.goToStep(currentIdx + 1);\r\n  }\r\n\r\n  /** Navigate to the previous step. */\r\n  previous(): void {\r\n    const currentIdx = this._selectedIndex();\r\n    this.goToStep(currentIdx - 1);\r\n  }\r\n\r\n  /** Navigate directly to a specific step by index. */\r\n  goToStep(index: number): void {\r\n    const allSteps = this.steps();\r\n    if (index < 0 || index >= allSteps.length) {\r\n      return;\r\n    }\r\n\r\n    // In linear mode, mark preceding steps as interacted when moving forward\r\n    // (do this BEFORE the disabled check so validation errors become visible)\r\n    if (this.linear() && index > this._selectedIndex()) {\r\n      for (let i = this._selectedIndex(); i < index; i++) {\r\n        allSteps[i]?._interacted.set(true);\r\n      }\r\n    }\r\n\r\n    // If the target step is disabled (explicitly or by linear rules), block navigation\r\n    if (this._isStepDisabled(index)) {\r\n      return;\r\n    }\r\n\r\n    this._setSelectedIndex(index);\r\n  }\r\n\r\n  /** Reset all steps and return to the first step. */\r\n  reset(): void {\r\n    this._selectedIndex.set(0);\r\n    this.steps().forEach((step) => {\r\n      step.reset();\r\n    });\r\n  }\r\n\r\n  /** @internal Handle step header click */\r\n  _onStepHeaderClick(index: number): void {\r\n    this.goToStep(index);\r\n  }\r\n\r\n  /** @internal Check if a step is disabled for navigation */\r\n  _isStepDisabled(index: number): boolean {\r\n    const allSteps = this.steps();\r\n    const step = allSteps[index];\r\n\r\n    // Step is explicitly disabled\r\n    if (step?.disabled()) {\r\n      return true;\r\n    }\r\n\r\n    if (!this.linear()) {\r\n      return false;\r\n    }\r\n\r\n    // Can always go backward in linear mode (respect editable)\r\n    if (index < this._selectedIndex()) {\r\n      return step ? !step.editable() : false;\r\n    }\r\n\r\n    // In linear mode, forward steps are disabled if any preceding step\r\n    // (starting from the current) is not completed and has no valid form control.\r\n    if (index > this._selectedIndex()) {\r\n      for (let i = this._selectedIndex(); i < index; i++) {\r\n        const precedingStep = allSteps[i];\r\n        if (precedingStep) {\r\n          // Already completed — allow skipping past it\r\n          if (precedingStep.completed() || precedingStep.state() === 'completed') {\r\n            continue;\r\n          }\r\n          // Has a valid form control — allow proceeding\r\n          const control = precedingStep.stepControl();\r\n          if (control && !control.invalid) {\r\n            continue;\r\n          }\r\n          // No valid reason to allow — disable this forward step\r\n          return true;\r\n        }\r\n      }\r\n    }\r\n\r\n    return false;\r\n  }\r\n\r\n  /** @internal Handle keyboard navigation on step headers */\r\n  _onHeaderKeydown(event: KeyboardEvent, currentIndex: number): void {\r\n    const isHorizontal = this.orientation() === 'horizontal';\r\n    const allSteps = this.steps();\r\n    let newIndex = currentIndex;\r\n\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        if (isHorizontal && currentIndex < allSteps.length - 1) {\r\n          newIndex = currentIndex + 1;\r\n        }\r\n        break;\r\n      case 'ArrowLeft':\r\n        if (isHorizontal && currentIndex > 0) {\r\n          newIndex = currentIndex - 1;\r\n        }\r\n        break;\r\n      case 'ArrowDown':\r\n        if (!isHorizontal && currentIndex < allSteps.length - 1) {\r\n          newIndex = currentIndex + 1;\r\n          event.preventDefault();\r\n        }\r\n        break;\r\n      case 'ArrowUp':\r\n        if (!isHorizontal && currentIndex > 0) {\r\n          newIndex = currentIndex - 1;\r\n          event.preventDefault();\r\n        }\r\n        break;\r\n      case 'Home':\r\n        newIndex = 0;\r\n        event.preventDefault();\r\n        break;\r\n      case 'End':\r\n        newIndex = allSteps.length - 1;\r\n        event.preventDefault();\r\n        break;\r\n      default:\r\n        return;\r\n    }\r\n\r\n    if (newIndex !== currentIndex) {\r\n      this._onStepHeaderClick(newIndex);\r\n    }\r\n  }\r\n\r\n  /** @internal Set the selected index and emit selection change */\r\n  private _setSelectedIndex(newIndex: number): void {\r\n    const allSteps = this.steps();\r\n    const previousIndex = this._selectedIndex();\r\n\r\n    if (newIndex === previousIndex) {\r\n      return;\r\n    }\r\n\r\n    const previousStep = allSteps[previousIndex] ?? null;\r\n    const selectedStep = allSteps[newIndex] ?? null;\r\n\r\n    // Mark the new step as interacted\r\n    if (selectedStep) {\r\n      selectedStep._interacted.set(true);\r\n    }\r\n\r\n    this._selectedIndex.set(newIndex);\r\n\r\n    this.selectionChange.emit({\r\n      selectedIndex: newIndex,\r\n      previousIndex,\r\n      selectedStep,\r\n      previousStep,\r\n    });\r\n  }\r\n}\r\n","<!-- Step Headers -->\r\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\r\n  @for (step of steps(); track $index; let last = $last) {\r\n    <button\r\n      #stepHeaderBtn\r\n      class=\"fui-stepper__step-header\"\r\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\r\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\r\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\r\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\r\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\r\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\r\n      [attr.aria-label]=\"\r\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\r\n      \"\r\n      [disabled]=\"_isStepDisabled($index)\"\r\n      role=\"tab\"\r\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      (click)=\"_onStepHeaderClick($index)\"\r\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\r\n      type=\"button\"\r\n    >\r\n      <div class=\"fui-stepper__step-icon\">\r\n        @if (step.state() === 'completed' && !step.icon()) {\r\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\r\n        } @else if (step.hasError()) {\r\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\r\n        } @else if (step.icon()) {\r\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\r\n        } @else {\r\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\r\n        }\r\n      </div>\r\n      <div class=\"fui-stepper__step-text\">\r\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\r\n        @if (step.description()) {\r\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\r\n        }\r\n        @if (step.hasError()) {\r\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\r\n        }\r\n      </div>\r\n    </button>\r\n    @if (!last) {\r\n      <div\r\n        class=\"fui-stepper__connector\"\r\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\r\n      ></div>\r\n    }\r\n  }\r\n</div>\r\n\r\n<!-- Step Content -->\r\n<div class=\"fui-stepper__content\">\r\n  @for (step of steps(); track $index) {\r\n    <div\r\n      class=\"fui-stepper__step-body\"\r\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\r\n      role=\"tabpanel\"\r\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\r\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\r\n    >\r\n      @if (_selectedIndex() === $index || step._interacted()) {\r\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-strength-meter.mjs

@@ -0,0 +1,149 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, ChangeDetectorRef, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FuiIntlBase, FUI_STRENGTH_METER } from '@raintonic/formaui/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+const DEFAULT_STRENGTH_CONFIG = {
+    minLength: 8,
+    requireUppercase: true,
+    requireLowercase: true,
+    requireNumbers: true,
+    requireSpecial: false,
+};
+
+class FuiStrengthMeterIntl extends FuiIntlBase {
+    strengthAriaLabel(level) {
+        return `Password strength: ${level}`;
+    }
+    ruleMinLength(min) {
+        return `At least ${min} characters`;
+    }
+    ruleUppercase = 'Uppercase letter';
+    ruleLowercase = 'Lowercase letter';
+    ruleNumbers = 'Number';
+    ruleSpecial = 'Special character';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStrengthMeterIntl, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStrengthMeterIntl, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStrengthMeterIntl, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * # FuiStrengthMeterComponent
+ *
+ * A password strength meter that displays per-rule satisfaction bars
+ * and a rule checklist. Computes strength from a `value` input (the
+ * password string) and a `config` input controlling which rules apply.
+ *
+ * ## Features
+ * - Per-rule bar segments that light up when satisfied
+ * - Rule checklist with check/x icons
+ * - Configurable rules (min length, uppercase, lowercase, numbers, special)
+ * - Intl support via DI
+ * - Can be used standalone or inside a password-input template
+ *
+ * ## Usage
+ *
+ * ### Standalone
+ * ```html
+ * <fui-strength-meter [value]="password" [config]="{ minLength: 10 }"></fui-strength-meter>
+ * ```
+ *
+ * ### Used with password-input
+ * Wire the strength meter alongside a password-input control to show real-time
+ * password strength feedback.
+ */
+class FuiStrengthMeterComponent {
+    intl = inject(FuiStrengthMeterIntl);
+    _cdr = inject(ChangeDetectorRef);
+    /** The password value to evaluate. */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Configuration controlling which rules are active. */
+    config = input(DEFAULT_STRENGTH_CONFIG, ...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /** Computed overall strength level. */
+    strength = computed(() => {
+        return this._calculateStrength(this.value());
+    }, ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-rule satisfaction state. Each entry drives one bar segment and one
+     * checklist row.
+     */
+    rules = computed(() => {
+        const password = this.value();
+        const config = this.config();
+        const rules = [];
+        const minLen = config.minLength ?? 8;
+        rules.push({
+            key: 'minLength',
+            label: this.intl.ruleMinLength(minLen),
+            satisfied: password.length >= minLen,
+        });
+        if (config.requireUppercase) {
+            rules.push({ key: 'uppercase', label: this.intl.ruleUppercase, satisfied: /[A-Z]/.test(password) });
+        }
+        if (config.requireLowercase) {
+            rules.push({ key: 'lowercase', label: this.intl.ruleLowercase, satisfied: /[a-z]/.test(password) });
+        }
+        if (config.requireNumbers) {
+            rules.push({ key: 'numbers', label: this.intl.ruleNumbers, satisfied: /[0-9]/.test(password) });
+        }
+        if (config.requireSpecial) {
+            rules.push({ key: 'special', label: this.intl.ruleSpecial, satisfied: /[^A-Za-z0-9]/.test(password) });
+        }
+        return rules;
+    }, ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.intl.changes.pipe(takeUntilDestroyed()).subscribe(() => {
+            this._cdr.markForCheck();
+        });
+    }
+    _calculateStrength(password) {
+        if (!password || password.length === 0) {
+            return 'weak';
+        }
+        const config = this.config();
+        let score = 0;
+        const maxScore = 5;
+        const minLen = config.minLength ?? 8;
+        if (password.length >= minLen) {
+            score++;
+        }
+        if (password.length >= minLen + 4) {
+            score++;
+        }
+        if (/[A-Z]/.test(password))
+            score++;
+        if (/[a-z]/.test(password))
+            score++;
+        if (/[0-9]/.test(password))
+            score++;
+        if (/[^A-Za-z0-9]/.test(password))
+            score++;
+        const ratio = score / maxScore;
+        if (ratio <= 0.3)
+            return 'weak';
+        if (ratio <= 0.5)
+            return 'fair';
+        if (ratio <= 0.8)
+            return 'good';
+        return 'strong';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStrengthMeterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiStrengthMeterComponent, isStandalone: true, selector: "fui-strength-meter", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "fui-strength-meter" }, providers: [{ provide: FUI_STRENGTH_METER, useExisting: FuiStrengthMeterComponent }], ngImport: i0, template: "<div\r\n  class=\"fui-strength-meter__inner\"\r\n  aria-live=\"polite\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"intl.strengthAriaLabel(strength())\"\r\n>\r\n  <div class=\"fui-strength-meter__bars\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <div\r\n        class=\"fui-strength-meter__bar-segment\"\r\n        [class.fui-strength-meter__bar-segment--satisfied]=\"rule.satisfied\"\r\n        [attr.aria-label]=\"rule.label + ': ' + (rule.satisfied ? '\u2713' : '\u2717')\"\r\n      ></div>\r\n    }\r\n  </div>\r\n  <ul class=\"fui-strength-meter__rules\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <li class=\"fui-strength-meter__rule\" [class.fui-strength-meter__rule--satisfied]=\"rule.satisfied\">\r\n        <fui-icon [name]=\"rule.satisfied ? 'check' : 'x'\" size=\"sm\" aria-hidden=\"true\" />\r\n        <span>{{ rule.label }}</span>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-strength-meter{display:block}.fui-strength-meter__inner{display:flex;flex-direction:column;gap:var(--fui-spacing-2);padding-top:var(--fui-spacing-4)}.fui-strength-meter__bars{display:flex;gap:var(--fui-spacing-2, 4px)}.fui-strength-meter__bar-segment{flex:1 1 0;height:4px;background-color:var(--fui-bg-muted, var(--fui-neutral-20));border-radius:var(--fui-radius-pill);transition-property:background-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__bar-segment--satisfied{background-color:var(--fui-fill-success)}.fui-strength-meter__rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.fui-strength-meter__rule{display:flex;align-items:center;gap:var(--fui-spacing-2, 4px);font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__rule fui-icon{color:var(--fui-text-disabled);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__rule--satisfied{color:var(--fui-text-success)}.fui-strength-meter__rule--satisfied fui-icon{color:var(--fui-text-success)}@media(prefers-reduced-motion:reduce){.fui-strength-meter__bar-segment,.fui-strength-meter__rule{transition:none}}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStrengthMeterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-strength-meter', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [{ provide: FUI_STRENGTH_METER, useExisting: FuiStrengthMeterComponent }], host: {
+                        class: 'fui-strength-meter',
+                    }, template: "<div\r\n  class=\"fui-strength-meter__inner\"\r\n  aria-live=\"polite\"\r\n  role=\"group\"\r\n  [attr.aria-label]=\"intl.strengthAriaLabel(strength())\"\r\n>\r\n  <div class=\"fui-strength-meter__bars\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <div\r\n        class=\"fui-strength-meter__bar-segment\"\r\n        [class.fui-strength-meter__bar-segment--satisfied]=\"rule.satisfied\"\r\n        [attr.aria-label]=\"rule.label + ': ' + (rule.satisfied ? '\u2713' : '\u2717')\"\r\n      ></div>\r\n    }\r\n  </div>\r\n  <ul class=\"fui-strength-meter__rules\">\r\n    @for (rule of rules(); track rule.key) {\r\n      <li class=\"fui-strength-meter__rule\" [class.fui-strength-meter__rule--satisfied]=\"rule.satisfied\">\r\n        <fui-icon [name]=\"rule.satisfied ? 'check' : 'x'\" size=\"sm\" aria-hidden=\"true\" />\r\n        <span>{{ rule.label }}</span>\r\n      </li>\r\n    }\r\n  </ul>\r\n</div>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-out);transition-delay:0ms}.fui-motion-fade-out{transition-property:opacity;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in);transition-delay:0ms}.fui-motion-slide-in-bottom{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition-property:transform;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition-property:transform,opacity;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-out);transition-delay:0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-base) var(--fui-ease-out)}@keyframes fui-popover-enter{0%{opacity:0;transform:translateY(-14px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}.fui-strength-meter{display:block}.fui-strength-meter__inner{display:flex;flex-direction:column;gap:var(--fui-spacing-2);padding-top:var(--fui-spacing-4)}.fui-strength-meter__bars{display:flex;gap:var(--fui-spacing-2, 4px)}.fui-strength-meter__bar-segment{flex:1 1 0;height:4px;background-color:var(--fui-bg-muted, var(--fui-neutral-20));border-radius:var(--fui-radius-pill);transition-property:background-color;transition-duration:var(--fui-duration-base);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__bar-segment--satisfied{background-color:var(--fui-fill-success)}.fui-strength-meter__rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.fui-strength-meter__rule{display:flex;align-items:center;gap:var(--fui-spacing-2, 4px);font-family:var(--fui-font-sans);font-size:var(--fui-text-sm);color:var(--fui-text-secondary);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__rule fui-icon{color:var(--fui-text-disabled);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-strength-meter__rule--satisfied{color:var(--fui-text-success)}.fui-strength-meter__rule--satisfied fui-icon{color:var(--fui-text-success)}@media(prefers-reduced-motion:reduce){.fui-strength-meter__bar-segment,.fui-strength-meter__rule{transition:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_STRENGTH_CONFIG, FuiStrengthMeterComponent, FuiStrengthMeterIntl };
+//# sourceMappingURL=raintonic-formaui-components-strength-meter.mjs.map