@raintonic/formaui 0.9.0 → 0.9.2

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

@@ -302,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 }], 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:2px 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 });
+    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,
@@ -311,7 +311,7 @@ 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      #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:2px 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"] }]
+                    }, 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 }] }] } });
 
 /**

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  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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"}
+{"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-tab.mjs

@@ -174,13 +174,13 @@ class FuiTabGroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTabGroupComponent, isStandalone: true, selector: "fui-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fui-tab-group" }, queries: [{ propertyName: "tabComponents", predicate: FuiTabComponent }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-brand-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiTabGroupComponent, isStandalone: true, selector: "fui-tab-group", inputs: { selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedIndex: "selectedIndexChange", selectedTabChange: "selectedTabChange" }, host: { classAttribute: "fui-tab-group" }, queries: [{ propertyName: "tabComponents", predicate: FuiTabComponent }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-primary-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:var(--fui-weight-regular);line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:var(--fui-weight-semibold)}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fui-tab-group', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'fui-tab-group',
-                    }, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-brand-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:400;line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:600}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"] }]
+                    }, template: "<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-tab-group{--fui-tab-label-font-size: var(--fui-text-base);--fui-tab-label-min-height: 3rem;--fui-tab-label-padding-x: 1.5rem;--fui-tab-label-padding-y: .75rem;--fui-tab-panel-padding: 1.5rem;--fui-tab-indicator-height: 2px;--fui-tab-active-color: var(--fui-primary-fg);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:var(--fui-border-width-sm) solid var(--fui-border-default);background-color:color-mix(in srgb,var(--fui-bg-subtle) 80%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;left:0;z-index:var(--fui-z-sticky, 1020)}.fui-tab-header:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--fui-border-default)}.fui-tab-label{display:flex;align-items:center;justify-content:center;padding:var(--fui-tab-label-padding-y) var(--fui-tab-label-padding-x);border:none;background:transparent;color:var(--fui-text-secondary);font-size:var(--fui-tab-label-font-size);font-weight:var(--fui-weight-regular);line-height:1.25rem;cursor:pointer;position:relative;transition-property:color,background-color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms;white-space:nowrap;min-height:var(--fui-tab-label-min-height)}.fui-tab-label:hover:not(.fui-tab-label--disabled){color:var(--fui-text-primary);background-color:var(--fui-bg-subtle)}.fui-tab-label--active{color:var(--fui-tab-active-color);font-weight:var(--fui-weight-semibold)}.fui-tab-label--active:after{content:\"\";position:absolute;bottom:-1px;left:0;right:0;height:var(--fui-tab-indicator-height);background-color:var(--fui-tab-active-color);z-index:1}.fui-tab-label--disabled{color:var(--fui-text-secondary);cursor:not-allowed;opacity:var(--fui-state-disabled-opacity)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:1px solid var(--fui-primary-10)}.fui-tab-content{flex:1;z-index:9;position:relative;overflow:hidden}.fui-tab-panel{display:none;padding:var(--fui-tab-panel-padding);background:transparent;animation:fadeIn var(--fui-duration-fast, .11s) var(--fui-ease-out, cubic-bezier(0, 0, .38, .9))}.fui-tab-panel--active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.fui-tab-header{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.fui-tab-header::-webkit-scrollbar{display:none}.fui-tab-label{flex-shrink:0;padding:.5rem 1rem;min-height:2.5rem;font-size:.8125rem}.fui-tab-panel{padding:1rem}}@media(prefers-reduced-motion:reduce){.fui-tab-label{transition:none}.fui-tab-panel{animation:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }, { type: i0.Output, args: ["selectedIndexChange"] }], selectedTabChange: [{ type: i0.Output, args: ["selectedTabChange"] }], tabComponents: [{
                 type: ContentChildren,
                 args: [FuiTabComponent]

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

@@ -1 +1 @@
-{"version":3,"file":"raintonic-formaui-components-tab.mjs","sources":["../../../lib/components/tab/tab.component.ts","../../../lib/components/tab/tab-group.component.ts","../../../lib/components/tab/tab-group.component.html","../../../lib/components/tab/raintonic-formaui-components-tab.ts"],"sourcesContent":["import { Component, input, TemplateRef, ViewChild, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * @component FuiTabComponent\r\n * @selector fui-tab\r\n * @description Individual tab definition used inside `fui-tab-group`. Provides a label\r\n * for the tab header and wraps its content in an `ng-template` for lazy rendering.\r\n *\r\n * @input label - (required) Text displayed in the tab header button\r\n * @input disabled - Whether the tab is disabled and cannot be selected (default: false)\r\n *\r\n * @example\r\n * <fui-tab label=\"Settings\" [disabled]=\"!canEdit\">\r\n *   <p>Settings panel content here.</p>\r\n * </fui-tab>\r\n */\r\n@Component({\r\n  selector: 'fui-tab',\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n})\r\nexport class FuiTabComponent {\r\n  /**\r\n   * The label for the tab\r\n   */\r\n  readonly label: InputSignal<string> = input.required<string>();\r\n\r\n  /**\r\n   * Whether the tab is disabled\r\n   */\r\n  readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n  /**\r\n   * Template reference for the tab content\r\n   */\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<unknown>;\r\n}\r\n","import {\r\n  AfterContentInit,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ContentChildren,\r\n  effect,\r\n  ElementRef,\r\n  model,\r\n  ModelSignal,\r\n  output,\r\n  OutputEmitterRef,\r\n  QueryList,\r\n  signal,\r\n  ViewChildren,\r\n  ViewEncapsulation,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FuiTabComponent } from './tab.component';\r\n\r\nlet nextTabGroupId = 0;\r\n\r\n/**\r\n * @component FuiTabGroupComponent\r\n * @selector fui-tab-group\r\n * @description Container for `fui-tab` components. Manages tab selection, keyboard navigation\r\n * (ArrowLeft/Right, Home, End, Enter, Space), and roving tabindex for accessibility.\r\n * Uses content projection to collect tab definitions and renders their content lazily.\r\n *\r\n * @input selectedIndex - Two-way model signal for the active tab index (default: 0)\r\n *\r\n * @output selectedTabChange - Emits the FuiTabComponent instance when a new tab is selected\r\n *\r\n * @cssvar --fui-tab-label-font-size - Font size of tab labels\r\n * @cssvar --fui-tab-label-min-height - Minimum height of tab header buttons\r\n * @cssvar --fui-tab-label-padding-x - Horizontal padding of tab labels\r\n * @cssvar --fui-tab-label-padding-y - Vertical padding of tab labels\r\n * @cssvar --fui-tab-panel-padding - Padding of the tab content panel\r\n * @cssvar --fui-tab-indicator-height - Height of the active-tab underline indicator\r\n * @cssvar --fui-tab-active-color - Color of the active tab label and indicator\r\n *\r\n * @example\r\n * <fui-tab-group [(selectedIndex)]=\"activeTab\">\r\n *   <fui-tab label=\"Overview\">Overview content</fui-tab>\r\n *   <fui-tab label=\"Details\">Details content</fui-tab>\r\n *   <fui-tab label=\"History\" [disabled]=\"true\">History content</fui-tab>\r\n * </fui-tab-group>\r\n */\r\n@Component({\r\n  selector: 'fui-tab-group',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './tab-group.component.html',\r\n  styleUrls: ['./tab-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tab-group',\r\n  },\r\n})\r\nexport class FuiTabGroupComponent implements AfterContentInit {\r\n  /** Unique ID prefix for this tab group instance to avoid collisions */\r\n  readonly tabGroupId = `fui-tab-group-${nextTabGroupId++}`;\r\n\r\n  /**\r\n   * The index of the selected tab\r\n   */\r\n  readonly selectedIndex: ModelSignal<number> = model(0);\r\n\r\n  /**\r\n   * Event emitted when a tab is selected\r\n   */\r\n  readonly selectedTabChange: OutputEmitterRef<FuiTabComponent> = output<FuiTabComponent>();\r\n\r\n  /**\r\n   * Query for all tab components\r\n   */\r\n  @ContentChildren(FuiTabComponent) tabComponents!: QueryList<FuiTabComponent>;\r\n\r\n  /**\r\n   * Query for tab header buttons for focus management\r\n   */\r\n  @ViewChildren('tabButton') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;\r\n\r\n  /**\r\n   * Signal containing all tabs\r\n   */\r\n  readonly tabs: WritableSignal<FuiTabComponent[]> = signal<FuiTabComponent[]>([]);\r\n\r\n  constructor() {\r\n    // React to external or internal selectedIndex changes and emit selectedTabChange accordingly\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      const tabs = this.tabs();\r\n      if (!tabs?.length) return;\r\n      if (idx >= 0 && idx < tabs.length) {\r\n        const tab = tabs[idx];\r\n        if (!tab.disabled()) {\r\n          this.selectedTabChange.emit(tab);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this.tabs.set(this.tabComponents.toArray());\r\n\r\n    // Listen for changes in tab components\r\n    this.tabComponents.changes.subscribe(() => {\r\n      this.tabs.set(this.tabComponents.toArray());\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Select a tab by index\r\n   */\r\n  selectTab(index: number): void {\r\n    const tabs = this.tabs();\r\n    if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {\r\n      // Update the model; the effect defined in ngAfterContentInit will emit selectedTabChange\r\n      this.selectedIndex.set(index);\r\n    }\r\n  }\r\n\r\n  onKeydown(event: KeyboardEvent, index: number): void {\r\n    const tabs = this.tabs();\r\n    if (!tabs?.length) return;\r\n    const last = tabs.length - 1;\r\n    let next = index;\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        next = index === last ? 0 : index + 1;\r\n        break;\r\n      case 'ArrowLeft':\r\n        next = index === 0 ? last : index - 1;\r\n        break;\r\n      case 'Home':\r\n        next = 0;\r\n        break;\r\n      case 'End':\r\n        next = last;\r\n        break;\r\n      case 'Enter':\r\n      case ' ': // Space key\r\n        this.selectTab(index);\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n    event.preventDefault();\r\n    while (tabs[next]?.disabled()) {\r\n      next = (next + 1) % tabs.length;\r\n      if (next === index) break;\r\n    }\r\n    // Focus the target tab button (roving tabindex)\r\n    const buttons = this.tabButtons?.toArray();\r\n    if (buttons?.[next]) {\r\n      buttons[next].nativeElement.focus();\r\n    }\r\n  }\r\n}\r\n","<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-tab.mjs","sources":["../../../lib/components/tab/tab.component.ts","../../../lib/components/tab/tab-group.component.ts","../../../lib/components/tab/tab-group.component.html","../../../lib/components/tab/raintonic-formaui-components-tab.ts"],"sourcesContent":["import { Component, input, TemplateRef, ViewChild, InputSignal } from '@angular/core';\r\n\r\n/**\r\n * @component FuiTabComponent\r\n * @selector fui-tab\r\n * @description Individual tab definition used inside `fui-tab-group`. Provides a label\r\n * for the tab header and wraps its content in an `ng-template` for lazy rendering.\r\n *\r\n * @input label - (required) Text displayed in the tab header button\r\n * @input disabled - Whether the tab is disabled and cannot be selected (default: false)\r\n *\r\n * @example\r\n * <fui-tab label=\"Settings\" [disabled]=\"!canEdit\">\r\n *   <p>Settings panel content here.</p>\r\n * </fui-tab>\r\n */\r\n@Component({\r\n  selector: 'fui-tab',\r\n  standalone: true,\r\n  template: `\r\n    <ng-template>\r\n      <ng-content></ng-content>\r\n    </ng-template>\r\n  `,\r\n})\r\nexport class FuiTabComponent {\r\n  /**\r\n   * The label for the tab\r\n   */\r\n  readonly label: InputSignal<string> = input.required<string>();\r\n\r\n  /**\r\n   * Whether the tab is disabled\r\n   */\r\n  readonly disabled: InputSignal<boolean> = input(false);\r\n\r\n  /**\r\n   * Template reference for the tab content\r\n   */\r\n  @ViewChild(TemplateRef, { static: true }) content!: TemplateRef<unknown>;\r\n}\r\n","import {\r\n  AfterContentInit,\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ContentChildren,\r\n  effect,\r\n  ElementRef,\r\n  model,\r\n  ModelSignal,\r\n  output,\r\n  OutputEmitterRef,\r\n  QueryList,\r\n  signal,\r\n  ViewChildren,\r\n  ViewEncapsulation,\r\n  WritableSignal,\r\n} from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FuiTabComponent } from './tab.component';\r\n\r\nlet nextTabGroupId = 0;\r\n\r\n/**\r\n * @component FuiTabGroupComponent\r\n * @selector fui-tab-group\r\n * @description Container for `fui-tab` components. Manages tab selection, keyboard navigation\r\n * (ArrowLeft/Right, Home, End, Enter, Space), and roving tabindex for accessibility.\r\n * Uses content projection to collect tab definitions and renders their content lazily.\r\n *\r\n * @input selectedIndex - Two-way model signal for the active tab index (default: 0)\r\n *\r\n * @output selectedTabChange - Emits the FuiTabComponent instance when a new tab is selected\r\n *\r\n * @cssvar --fui-tab-label-font-size - Font size of tab labels\r\n * @cssvar --fui-tab-label-min-height - Minimum height of tab header buttons\r\n * @cssvar --fui-tab-label-padding-x - Horizontal padding of tab labels\r\n * @cssvar --fui-tab-label-padding-y - Vertical padding of tab labels\r\n * @cssvar --fui-tab-panel-padding - Padding of the tab content panel\r\n * @cssvar --fui-tab-indicator-height - Height of the active-tab underline indicator\r\n * @cssvar --fui-tab-active-color - Color of the active tab label and indicator\r\n *\r\n * @example\r\n * <fui-tab-group [(selectedIndex)]=\"activeTab\">\r\n *   <fui-tab label=\"Overview\">Overview content</fui-tab>\r\n *   <fui-tab label=\"Details\">Details content</fui-tab>\r\n *   <fui-tab label=\"History\" [disabled]=\"true\">History content</fui-tab>\r\n * </fui-tab-group>\r\n */\r\n@Component({\r\n  selector: 'fui-tab-group',\r\n  standalone: true,\r\n  imports: [CommonModule],\r\n  templateUrl: './tab-group.component.html',\r\n  styleUrls: ['./tab-group.component.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.None,\r\n  host: {\r\n    class: 'fui-tab-group',\r\n  },\r\n})\r\nexport class FuiTabGroupComponent implements AfterContentInit {\r\n  /** Unique ID prefix for this tab group instance to avoid collisions */\r\n  readonly tabGroupId = `fui-tab-group-${nextTabGroupId++}`;\r\n\r\n  /**\r\n   * The index of the selected tab\r\n   */\r\n  readonly selectedIndex: ModelSignal<number> = model(0);\r\n\r\n  /**\r\n   * Event emitted when a tab is selected\r\n   */\r\n  readonly selectedTabChange: OutputEmitterRef<FuiTabComponent> = output<FuiTabComponent>();\r\n\r\n  /**\r\n   * Query for all tab components\r\n   */\r\n  @ContentChildren(FuiTabComponent) tabComponents!: QueryList<FuiTabComponent>;\r\n\r\n  /**\r\n   * Query for tab header buttons for focus management\r\n   */\r\n  @ViewChildren('tabButton') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;\r\n\r\n  /**\r\n   * Signal containing all tabs\r\n   */\r\n  readonly tabs: WritableSignal<FuiTabComponent[]> = signal<FuiTabComponent[]>([]);\r\n\r\n  constructor() {\r\n    // React to external or internal selectedIndex changes and emit selectedTabChange accordingly\r\n    effect(() => {\r\n      const idx = this.selectedIndex();\r\n      const tabs = this.tabs();\r\n      if (!tabs?.length) return;\r\n      if (idx >= 0 && idx < tabs.length) {\r\n        const tab = tabs[idx];\r\n        if (!tab.disabled()) {\r\n          this.selectedTabChange.emit(tab);\r\n        }\r\n      }\r\n    });\r\n  }\r\n\r\n  ngAfterContentInit(): void {\r\n    this.tabs.set(this.tabComponents.toArray());\r\n\r\n    // Listen for changes in tab components\r\n    this.tabComponents.changes.subscribe(() => {\r\n      this.tabs.set(this.tabComponents.toArray());\r\n    });\r\n  }\r\n\r\n  /**\r\n   * Select a tab by index\r\n   */\r\n  selectTab(index: number): void {\r\n    const tabs = this.tabs();\r\n    if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {\r\n      // Update the model; the effect defined in ngAfterContentInit will emit selectedTabChange\r\n      this.selectedIndex.set(index);\r\n    }\r\n  }\r\n\r\n  onKeydown(event: KeyboardEvent, index: number): void {\r\n    const tabs = this.tabs();\r\n    if (!tabs?.length) return;\r\n    const last = tabs.length - 1;\r\n    let next = index;\r\n    switch (event.key) {\r\n      case 'ArrowRight':\r\n        next = index === last ? 0 : index + 1;\r\n        break;\r\n      case 'ArrowLeft':\r\n        next = index === 0 ? last : index - 1;\r\n        break;\r\n      case 'Home':\r\n        next = 0;\r\n        break;\r\n      case 'End':\r\n        next = last;\r\n        break;\r\n      case 'Enter':\r\n      case ' ': // Space key\r\n        this.selectTab(index);\r\n        return;\r\n      default:\r\n        return;\r\n    }\r\n    event.preventDefault();\r\n    while (tabs[next]?.disabled()) {\r\n      next = (next + 1) % tabs.length;\r\n      if (next === index) break;\r\n    }\r\n    // Focus the target tab button (roving tabindex)\r\n    const buttons = this.tabButtons?.toArray();\r\n    if (buttons?.[next]) {\r\n      buttons[next].nativeElement.focus();\r\n    }\r\n  }\r\n}\r\n","<div class=\"fui-tab-group\">\r\n  <div class=\"fui-tab-header\" role=\"tablist\">\r\n    @for (tab of tabs(); track $index) {\r\n      <button\r\n        #tabButton\r\n        class=\"fui-tab-label\"\r\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\r\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\r\n        [disabled]=\"tab.disabled()\"\r\n        [attr.aria-selected]=\"selectedIndex() === $index\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\r\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\r\n        [id]=\"tabGroupId + '-tab-' + $index\"\r\n        role=\"tab\"\r\n        type=\"button\"\r\n        (click)=\"selectTab($index)\"\r\n        (keydown)=\"onKeydown($event, $index)\"\r\n      >\r\n        {{ tab.label() }}\r\n      </button>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"fui-tab-content\">\r\n    @for (tab of tabs(); track $index) {\r\n      <div\r\n        class=\"fui-tab-panel\"\r\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\r\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\r\n        [id]=\"tabGroupId + '-panel-' + $index\"\r\n        role=\"tabpanel\"\r\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\r\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\r\n      >\r\n        @if (selectedIndex() === $index) {\r\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\r\n        }\r\n      </div>\r\n    }\r\n  </div>\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-time-picker.mjs

@@ -649,7 +649,7 @@ class FuiTimePickerComponent {
                 provide: FUI_FORM_FIELD_CONTROL,
                 useExisting: FuiTimePickerComponent,
             },
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true, static: true }, { propertyName: "_fuiInput", first: true, predicate: FuiInputDirective, descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\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-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }, { propertyName: "timeListPanel", first: true, predicate: ["timeListPanel"], descendants: true, static: true }, { propertyName: "_fuiInput", first: true, predicate: FuiInputDirective, descendants: true }], hostDirectives: [{ directive: i1.FuiPopupOverlayDirective, inputs: ["positions", "positions", "panelClass", "panelClass", "backdropClass", "backdropClass", "scrollStrategy", "scrollStrategy", "minWidthFromTrigger", "minWidthFromTrigger"], outputs: ["openedChange", "openedChange", "escapeKey", "escapeKey"] }, { directive: i1.FuiFormControlSyncDirective }], ngImport: i0, template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\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-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"], dependencies: [{ kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }, { kind: "component", type: FuiTimeListComponent, selector: "fui-time-list", inputs: ["options", "selectedValue", "format"], outputs: ["optionSelected"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTimePickerComponent, decorators: [{
             type: Component,
@@ -683,7 +683,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
                             provide: FUI_FORM_FIELD_CONTROL,
                             useExisting: FuiTimePickerComponent,
                         },
-                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\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-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:1px solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
+                    ], template: "<div class=\"fui-time-picker__wrapper\">\r\n  <input\r\n    #inputElement\r\n    fuiInput\r\n    class=\"fui-time-picker__input\"\r\n    type=\"text\"\r\n    [placeholder]=\"placeholder()\"\r\n    [disabled]=\"disabled()\"\r\n    [readonly]=\"readonly()\"\r\n    [value]=\"_displayValue()\"\r\n    [attr.aria-expanded]=\"panelOpen()\"\r\n    [attr.aria-haspopup]=\"'listbox'\"\r\n    role=\"combobox\"\r\n    autocomplete=\"off\"\r\n    (input)=\"_onManualInput($event)\"\r\n    (keydown)=\"_onKeydown($event)\"\r\n    (focus)=\"_onFocus()\"\r\n    (blur)=\"_onBlur()\"\r\n  />\r\n  @if (!disabled() && !readonly()) {\r\n    <button\r\n      type=\"button\"\r\n      class=\"fui-time-picker__toggle\"\r\n      (click)=\"_togglePanel()\"\r\n      tabindex=\"-1\"\r\n      [attr.aria-label]=\"intl.toggleAriaLabel\"\r\n    >\r\n      <fui-icon name=\"clock\" size=\"sm\"></fui-icon>\r\n    </button>\r\n  }\r\n</div>\r\n\r\n<div\r\n  #timeListPanel\r\n  class=\"fui-time-picker__panel\"\r\n  role=\"dialog\"\r\n  tabindex=\"-1\"\r\n  [attr.aria-label]=\"intl.dialogAriaLabel\"\r\n  [hidden]=\"!panelOpen()\"\r\n>\r\n  <fui-time-list\r\n    [options]=\"_timeOptions()\"\r\n    [selectedValue]=\"_value()\"\r\n    [format]=\"formatInput()\"\r\n    (optionSelected)=\"_onOptionSelected($event)\"\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-time-picker{--fui-time-picker-font-size: var(--fui-text-base);--fui-time-picker-toggle-size: 1.5rem;display:inline-block;width:100%;position:relative}.fui-time-picker__wrapper{width:100%;min-height:100%;display:flex;align-items:center;gap:var(--fui-spacing-1);cursor:pointer;background:transparent;border:none}.fui-time-picker__input{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--fui-font-sans);font-size:var(--fui-text-base);font-weight:var(--fui-weight-regular);line-height:var(--fui-leading-normal);letter-spacing:var(--fui-tracking-normal);color:var(--fui-text-primary);padding:0;cursor:text}.fui-time-picker__input::placeholder{color:var(--fui-text-disabled)}.fui-time-picker__input:disabled{cursor:not-allowed;opacity:.5}.fui-time-picker__toggle{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-time-picker__toggle:focus-visible{outline:2px solid var(--fui-primary-10)}.fui-time-picker__toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--fui-time-picker-toggle-size);height:var(--fui-time-picker-toggle-size);color:var(--fui-text-secondary);border-radius:var(--fui-radius-sm);transition-property:color;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker__toggle:hover:not(:disabled){color:var(--fui-text-primary)}.fui-time-picker__toggle:disabled{color:var(--fui-text-disabled);cursor:not-allowed}.fui-time-picker--disabled{pointer-events:none}.fui-time-picker--disabled .fui-time-picker__wrapper{cursor:not-allowed;opacity:.5}.fui-time-picker--readonly{pointer-events:none}.fui-time-picker--readonly .fui-time-picker__wrapper{cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input{color:var(--fui-text-primary)!important;-webkit-text-fill-color:var(--fui-text-primary)!important;cursor:default;opacity:1}.fui-time-picker--readonly .fui-time-picker__input:disabled{opacity:1;cursor:default}.fui-time-picker__panel{--fui-time-picker-panel-border-radius: var(--fui-radius-md);--fui-time-picker-panel-shadow: var(--fui-shadow-md);--fui-time-picker-panel-bg: var(--fui-bg-default);--fui-time-picker-panel-border-color: var(--fui-border-default);background:var(--fui-time-picker-panel-bg);border:var(--fui-border-width-sm) solid var(--fui-time-picker-panel-border-color);border-radius:var(--fui-time-picker-panel-border-radius);box-shadow:var(--fui-time-picker-panel-shadow);transition-property:opacity,transform;transition-duration:var(--fui-duration-fast);transition-timing-function:var(--fui-ease-in-out);transition-delay:0ms}.fui-time-picker-backdrop{background:transparent}@media(prefers-contrast:high){.fui-time-picker__panel{border-width:2px}}@media(prefers-reduced-motion:reduce){.fui-time-picker__panel{transition:none}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formatInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], showSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSeconds", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], placeholderInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonlyInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], errorStateMatcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorStateMatcher", required: false }] }], timeChange: [{ type: i0.Output, args: ["timeChange"] }], inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: false }]