@raintonic/formaui 0.2.0

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

@@ -0,0 +1,317 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, signal, viewChild, TemplateRef, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, InjectionToken, output, contentChildren, effect } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * # FuiStepComponent
+ *
+ * Represents a single step within an `fui-stepper`.
+ * Each step has a label, optional description/icon, and content that is lazily rendered.
+ *
+ * ## Usage
+ *
+ * ```html
+ * <fui-stepper>
+ *   <fui-step label="Account" description="Create your account">
+ *     <p>Account creation form here...</p>
+ *   </fui-step>
+ *   <fui-step label="Profile" icon="user">
+ *     <p>Profile setup here...</p>
+ *   </fui-step>
+ * </fui-stepper>
+ * ```
+ */
+class FuiStepComponent {
+    // Inputs
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    completed = input(false, { ...(ngDevMode ? { debugName: "completed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    editable = input(true, { ...(ngDevMode ? { debugName: "editable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    stepControl = input(null, ...(ngDevMode ? [{ debugName: "stepControl" }] : /* istanbul ignore next */ []));
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    // Internal state
+    _interacted = signal(false, ...(ngDevMode ? [{ debugName: "_interacted" }] : /* istanbul ignore next */ []));
+    // Content template reference for lazy rendering
+    contentTemplate = viewChild(TemplateRef, ...(ngDevMode ? [{ debugName: "contentTemplate" }] : /* istanbul ignore next */ []));
+    // Computed state
+    hasError = computed(() => {
+        const errMsg = this.errorMessage();
+        if (errMsg && errMsg.length > 0) {
+            return true;
+        }
+        const control = this.stepControl();
+        return !!(control && control.invalid && this._interacted());
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    state = computed(() => {
+        if (this.hasError()) {
+            return 'error';
+        }
+        if (this.completed()) {
+            return 'completed';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    /** Mark this step as interacted and select it via the parent stepper. */
+    select() {
+        this._interacted.set(true);
+    }
+    /** Reset the step to its initial state. */
+    reset() {
+        this._interacted.set(false);
+        const control = this.stepControl();
+        if (control) {
+            control.reset();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.6", type: FuiStepComponent, isStandalone: true, selector: "fui-step", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, completed: { classPropertyName: "completed", publicName: "completed", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, stepControl: { classPropertyName: "stepControl", publicName: "stepControl", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-template><ng-content></ng-content></ng-template>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fui-step',
+                    standalone: true,
+                    template: '<ng-template><ng-content></ng-content></ng-template>',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], completed: [{ type: i0.Input, args: [{ isSignal: true, alias: "completed", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], stepControl: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepControl", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], contentTemplate: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
+
+const FORMAUI_STEPPER = new InjectionToken('FORMAUI_STEPPER');
+
+let nextStepperId = 0;
+/**
+ * # FuiStepperComponent
+ *
+ * A stepper component that guides users through a sequence of steps.
+ * Supports horizontal and vertical orientations, linear and non-linear navigation,
+ * step validation, and lazy content rendering.
+ *
+ * ## Usage
+ *
+ * ### Basic horizontal stepper
+ * ```html
+ * <fui-stepper>
+ *   <fui-step label="Step 1">Content 1</fui-step>
+ *   <fui-step label="Step 2">Content 2</fui-step>
+ *   <fui-step label="Step 3">Content 3</fui-step>
+ * </fui-stepper>
+ * ```
+ *
+ * ### Vertical stepper
+ * ```html
+ * <fui-stepper orientation="vertical">
+ *   <fui-step label="Step 1">Content 1</fui-step>
+ *   <fui-step label="Step 2">Content 2</fui-step>
+ * </fui-stepper>
+ * ```
+ *
+ * ### Linear stepper with form validation
+ * ```html
+ * <fui-stepper [linear]="true">
+ *   <fui-step label="Account" [stepControl]="accountForm">
+ *     <form [formGroup]="accountForm">...</form>
+ *   </fui-step>
+ *   <fui-step label="Address" [stepControl]="addressForm">
+ *     <form [formGroup]="addressForm">...</form>
+ *   </fui-step>
+ * </fui-stepper>
+ * ```
+ */
+class FuiStepperComponent {
+    // Inputs
+    orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    // Outputs
+    selectionChange = output();
+    animationDone = output();
+    // Content children
+    steps = contentChildren(FuiStepComponent, ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+    // Internal state
+    _selectedIndex = signal(0, ...(ngDevMode ? [{ debugName: "_selectedIndex" }] : /* istanbul ignore next */ []));
+    // Unique ID for ARIA linking
+    _uniqueId = nextStepperId++;
+    // Computed: active step
+    _selectedStep = computed(() => {
+        const allSteps = this.steps();
+        const idx = this._selectedIndex();
+        return allSteps[idx] ?? null;
+    }, ...(ngDevMode ? [{ debugName: "_selectedStep" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Sync selectedIndex input with internal state
+        effect(() => {
+            const idx = this.selectedIndex();
+            this._selectedIndex.set(idx);
+        });
+    }
+    /** Navigate to the next step. In linear mode, validates the current step first. */
+    next() {
+        const allSteps = this.steps();
+        const currentIdx = this._selectedIndex();
+        if (currentIdx >= allSteps.length - 1) {
+            return;
+        }
+        if (this.linear()) {
+            const currentStep = allSteps[currentIdx];
+            if (currentStep) {
+                currentStep._interacted.set(true);
+                const control = currentStep.stepControl();
+                if (control?.invalid) {
+                    return;
+                }
+            }
+        }
+        this._setSelectedIndex(currentIdx + 1);
+    }
+    /** Navigate to the previous step. */
+    previous() {
+        const currentIdx = this._selectedIndex();
+        if (currentIdx > 0) {
+            this._setSelectedIndex(currentIdx - 1);
+        }
+    }
+    /** Navigate directly to a specific step by index. */
+    goToStep(index) {
+        const allSteps = this.steps();
+        if (index < 0 || index >= allSteps.length) {
+            return;
+        }
+        if (this.linear() && index > this._selectedIndex()) {
+            // In linear mode, can only go forward if all preceding steps are valid
+            for (let i = this._selectedIndex(); i < index; i++) {
+                const step = allSteps[i];
+                if (step) {
+                    step._interacted.set(true);
+                    const control = step.stepControl();
+                    if (control?.invalid) {
+                        return;
+                    }
+                }
+            }
+        }
+        this._setSelectedIndex(index);
+    }
+    /** Reset all steps and return to the first step. */
+    reset() {
+        this._selectedIndex.set(0);
+        this.steps().forEach((step) => {
+            step.reset();
+        });
+    }
+    /** @internal Handle step header click */
+    _onStepHeaderClick(index) {
+        this.goToStep(index);
+    }
+    /** @internal Check if a step is disabled for navigation */
+    _isStepDisabled(index) {
+        if (!this.linear()) {
+            return false;
+        }
+        const allSteps = this.steps();
+        // Can always go backward
+        if (index < this._selectedIndex()) {
+            // Check if the target step is editable
+            const targetStep = allSteps[index];
+            return targetStep ? !targetStep.editable() : false;
+        }
+        // For forward navigation in linear mode, check all preceding steps
+        if (index > this._selectedIndex()) {
+            for (let i = this._selectedIndex(); i < index; i++) {
+                const step = allSteps[i];
+                if (step) {
+                    const control = step.stepControl();
+                    if (control?.invalid) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+    /** @internal Handle keyboard navigation on step headers */
+    _onHeaderKeydown(event, currentIndex) {
+        const isHorizontal = this.orientation() === 'horizontal';
+        const allSteps = this.steps();
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                if (isHorizontal && currentIndex < allSteps.length - 1) {
+                    newIndex = currentIndex + 1;
+                }
+                break;
+            case 'ArrowLeft':
+                if (isHorizontal && currentIndex > 0) {
+                    newIndex = currentIndex - 1;
+                }
+                break;
+            case 'ArrowDown':
+                if (!isHorizontal && currentIndex < allSteps.length - 1) {
+                    newIndex = currentIndex + 1;
+                    event.preventDefault();
+                }
+                break;
+            case 'ArrowUp':
+                if (!isHorizontal && currentIndex > 0) {
+                    newIndex = currentIndex - 1;
+                    event.preventDefault();
+                }
+                break;
+            case 'Home':
+                newIndex = 0;
+                event.preventDefault();
+                break;
+            case 'End':
+                newIndex = allSteps.length - 1;
+                event.preventDefault();
+                break;
+            default:
+                return;
+        }
+        if (newIndex !== currentIndex) {
+            this._onStepHeaderClick(newIndex);
+        }
+    }
+    /** @internal Set the selected index and emit selection change */
+    _setSelectedIndex(newIndex) {
+        const allSteps = this.steps();
+        const previousIndex = this._selectedIndex();
+        if (newIndex === previousIndex) {
+            return;
+        }
+        const previousStep = allSteps[previousIndex] ?? null;
+        const selectedStep = allSteps[newIndex] ?? null;
+        // Mark the new step as interacted
+        if (selectedStep) {
+            selectedStep._interacted.set(true);
+        }
+        this._selectedIndex.set(newIndex);
+        this.selectionChange.emit({
+            selectedIndex: newIndex,
+            previousIndex,
+            selectedStep,
+            previousStep,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiStepperComponent, isStandalone: true, selector: "fui-stepper", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", animationDone: "animationDone" }, host: { properties: { "class.fui-stepper--horizontal": "orientation() === \"horizontal\"", "class.fui-stepper--vertical": "orientation() === \"vertical\"", "class.fui-stepper--linear": "linear()" }, classAttribute: "fui-stepper" }, providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }], queries: [{ propertyName: "steps", predicate: FuiStepComponent, isSignal: true }], ngImport: i0, template: "<!-- Step Headers -->\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <button\n      class=\"fui-stepper__step-header\"\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\n      [attr.aria-label]=\"\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\n      \"\n      [disabled]=\"_isStepDisabled($index)\"\n      role=\"tab\"\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      (click)=\"_onStepHeaderClick($index)\"\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\n      type=\"button\"\n    >\n      <div class=\"fui-stepper__step-icon\">\n        @if (step.state() === 'completed' && !step.icon()) {\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\n        } @else if (step.hasError()) {\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\n        } @else if (step.icon()) {\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\n        } @else {\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\n        }\n      </div>\n      <div class=\"fui-stepper__step-text\">\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\n        @if (step.description()) {\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\n        }\n        @if (step.hasError()) {\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\n        }\n      </div>\n    </button>\n    @if (!last) {\n      <div\n        class=\"fui-stepper__connector\"\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\n      ></div>\n    }\n  }\n</div>\n\n<!-- Step Content -->\n<div class=\"fui-stepper__content\">\n  @for (step of steps(); track $index) {\n    <div\n      class=\"fui-stepper__step-body\"\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\n      role=\"tabpanel\"\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\n    >\n      @if (_selectedIndex() === $index || step._interacted()) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-stepper{display:block;font-family:var(--fui-font-family-sans)}.fui-stepper__header{display:flex;align-items:center}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-gap-8);padding:var(--fui-padding-8) var(--fui-padding-12);border-radius:var(--fui-border-radius-md);transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary);color:var(--fui-primary-contrast);border-color:var(--fui-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-semibold)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success);color:var(--fui-white);border-color:var(--fui-success)}.fui-stepper__step-header--completed .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-danger);color:var(--fui-white);border-color:var(--fui-danger)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-danger)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-surface-03);color:var(--fui-text-disabled);border-color:var(--fui-border-color)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--fui-border-color);background-color:var(--fui-surface-01);color:var(--fui-text-secondary);flex-shrink:0;transition:background-color,color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-number{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium);color:var(--fui-text-secondary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-description{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-font-size-01);color:var(--fui-danger)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-color);transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-stepper__connector--completed{background-color:var(--fui-success)}.fui-stepper__content{margin-top:var(--fui-spacing-05)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-stepper', standalone: true, imports: [NgTemplateOutlet, FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-stepper',
+                        '[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 -->\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <button\n      class=\"fui-stepper__step-header\"\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\n      [attr.aria-label]=\"\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\n      \"\n      [disabled]=\"_isStepDisabled($index)\"\n      role=\"tab\"\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      (click)=\"_onStepHeaderClick($index)\"\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\n      type=\"button\"\n    >\n      <div class=\"fui-stepper__step-icon\">\n        @if (step.state() === 'completed' && !step.icon()) {\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\n        } @else if (step.hasError()) {\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\n        } @else if (step.icon()) {\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\n        } @else {\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\n        }\n      </div>\n      <div class=\"fui-stepper__step-text\">\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\n        @if (step.description()) {\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\n        }\n        @if (step.hasError()) {\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\n        }\n      </div>\n    </button>\n    @if (!last) {\n      <div\n        class=\"fui-stepper__connector\"\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\n      ></div>\n    }\n  }\n</div>\n\n<!-- Step Content -->\n<div class=\"fui-stepper__content\">\n  @for (step of steps(); track $index) {\n    <div\n      class=\"fui-stepper__step-body\"\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\n      role=\"tabpanel\"\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\n    >\n      @if (_selectedIndex() === $index || step._interacted()) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\n      }\n    </div>\n  }\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-stepper{display:block;font-family:var(--fui-font-family-sans)}.fui-stepper__header{display:flex;align-items:center}.fui-stepper__step-header{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;outline:none}.fui-stepper__step-header{display:flex;align-items:center;gap:var(--fui-gap-8);padding:var(--fui-padding-8) var(--fui-padding-12);border-radius:var(--fui-border-radius-md);transition:background-color,color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms;cursor:pointer;flex-shrink:0}.fui-stepper__step-header:hover:not(:disabled){background-color:var(--fui-surface-02)}.fui-stepper__step-header:focus-visible{outline:2px solid var(--fui-primary);outline-offset:2px}.fui-stepper__step-header--active .fui-stepper__step-icon{background-color:var(--fui-primary);color:var(--fui-primary-contrast);border-color:var(--fui-primary)}.fui-stepper__step-header--active .fui-stepper__step-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-semibold)}.fui-stepper__step-header--completed .fui-stepper__step-icon{background-color:var(--fui-success);color:var(--fui-white);border-color:var(--fui-success)}.fui-stepper__step-header--completed .fui-stepper__step-label{color:var(--fui-text-primary)}.fui-stepper__step-header--error .fui-stepper__step-icon{background-color:var(--fui-danger);color:var(--fui-white);border-color:var(--fui-danger)}.fui-stepper__step-header--error .fui-stepper__step-label{color:var(--fui-danger)}.fui-stepper__step-header--disabled{cursor:not-allowed;opacity:.5}.fui-stepper__step-header--disabled .fui-stepper__step-icon{background-color:var(--fui-surface-03);color:var(--fui-text-disabled);border-color:var(--fui-border-color)}.fui-stepper__step-header--disabled .fui-stepper__step-label{color:var(--fui-text-disabled)}.fui-stepper__step-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--fui-border-color);background-color:var(--fui-surface-01);color:var(--fui-text-secondary);flex-shrink:0;transition:background-color,color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-number{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-semibold);line-height:1}.fui-stepper__step-text{display:flex;flex-direction:column;gap:2px;text-align:left}.fui-stepper__step-label{font-size:var(--fui-font-size-02);font-weight:var(--fui-font-weight-medium);color:var(--fui-text-secondary);transition:color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-stepper__step-description{font-size:var(--fui-font-size-01);color:var(--fui-text-secondary)}.fui-stepper__step-error{font-size:var(--fui-font-size-01);color:var(--fui-danger)}.fui-stepper__connector{flex:1;height:2px;min-width:24px;background-color:var(--fui-border-color);transition:background-color var(--fui-duration-moderate-01) var(--fui-ease-standard) 0ms}.fui-stepper__connector--completed{background-color:var(--fui-success)}.fui-stepper__content{margin-top:var(--fui-spacing-05)}.fui-stepper__step-body{display:none}.fui-stepper__step-body--active{display:block;animation:fui-stepper-fade-in var(--fui-duration-fast-02) var(--fui-ease-entrance)}.fui-stepper--horizontal .fui-stepper__header{flex-direction:row}.fui-stepper--vertical .fui-stepper__header{flex-direction:column;align-items:stretch}.fui-stepper--vertical .fui-stepper__connector{width:2px;height:24px;min-width:unset;flex:unset;margin-left:23px}.fui-stepper--vertical .fui-stepper__step-header{width:100%}@keyframes fui-stepper-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], animationDone: [{ type: i0.Output, args: ["animationDone"] }], steps: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => FuiStepComponent), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FORMAUI_STEPPER, FuiStepComponent, FuiStepperComponent };
+//# sourceMappingURL=raintonic-formaui-components-stepper.mjs.map

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

@@ -0,0 +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 {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  signal,\n  computed,\n  viewChild,\n  TemplateRef,\n  booleanAttribute,\n  WritableSignal,\n  Signal,\n} from '@angular/core';\nimport { AbstractControl } from '@angular/forms';\nimport { StepState } from './stepper.types';\n\n/**\n * # FuiStepComponent\n *\n * Represents a single step within an `fui-stepper`.\n * Each step has a label, optional description/icon, and content that is lazily rendered.\n *\n * ## Usage\n *\n * ```html\n * <fui-stepper>\n *   <fui-step label=\"Account\" description=\"Create your account\">\n *     <p>Account creation form here...</p>\n *   </fui-step>\n *   <fui-step label=\"Profile\" icon=\"user\">\n *     <p>Profile setup here...</p>\n *   </fui-step>\n * </fui-stepper>\n * ```\n */\n@Component({\n  selector: 'fui-step',\n  standalone: true,\n  template: '<ng-template><ng-content></ng-content></ng-template>',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class FuiStepComponent {\n  // Inputs\n  readonly label = input.required<string>();\n  readonly description = input('');\n  readonly icon = input('');\n  readonly completed = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly editable = input<boolean, unknown>(true, { transform: booleanAttribute });\n  readonly errorMessage = input('');\n  readonly stepControl = input<AbstractControl | null>(null);\n  readonly optional = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n  // Internal state\n  readonly _interacted: WritableSignal<boolean> = signal(false);\n\n  // Content template reference for lazy rendering\n  readonly contentTemplate: Signal<TemplateRef<unknown> | undefined> = viewChild(TemplateRef);\n\n  // Computed state\n  readonly hasError: Signal<boolean> = computed(() => {\n    const errMsg = this.errorMessage();\n    if (errMsg && errMsg.length > 0) {\n      return true;\n    }\n    const control = this.stepControl();\n    return !!(control && control.invalid && this._interacted());\n  });\n\n  readonly state: Signal<StepState> = computed(() => {\n    if (this.hasError()) {\n      return 'error';\n    }\n    if (this.completed()) {\n      return 'completed';\n    }\n    return 'default';\n  });\n\n  /** Mark this step as interacted and select it via the parent stepper. */\n  select(): void {\n    this._interacted.set(true);\n  }\n\n  /** Reset the step to its initial state. */\n  reset(): void {\n    this._interacted.set(false);\n    const control = this.stepControl();\n    if (control) {\n      control.reset();\n    }\n  }\n}\n","import { InjectionToken } from '@angular/core';\n\nexport type StepperOrientation = 'horizontal' | 'vertical';\nexport type StepState = 'active' | 'completed' | 'error' | 'disabled' | 'default';\n\nexport interface StepSelectionChange {\n  selectedIndex: number;\n  previousIndex: number;\n  selectedStep: unknown;\n  previousStep: unknown;\n}\n\nexport const FORMAUI_STEPPER = new InjectionToken<unknown>('FORMAUI_STEPPER');\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n  input,\n  output,\n  signal,\n  computed,\n  effect,\n  contentChildren,\n  booleanAttribute,\n  WritableSignal,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\nimport { FuiStepComponent } from './step.component';\nimport { StepperOrientation, StepSelectionChange, FORMAUI_STEPPER } from './stepper.types';\n\nlet nextStepperId = 0;\n\n/**\n * # FuiStepperComponent\n *\n * A stepper component that guides users through a sequence of steps.\n * Supports horizontal and vertical orientations, linear and non-linear navigation,\n * step validation, and lazy content rendering.\n *\n * ## Usage\n *\n * ### Basic horizontal stepper\n * ```html\n * <fui-stepper>\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\n *   <fui-step label=\"Step 3\">Content 3</fui-step>\n * </fui-stepper>\n * ```\n *\n * ### Vertical stepper\n * ```html\n * <fui-stepper orientation=\"vertical\">\n *   <fui-step label=\"Step 1\">Content 1</fui-step>\n *   <fui-step label=\"Step 2\">Content 2</fui-step>\n * </fui-stepper>\n * ```\n *\n * ### Linear stepper with form validation\n * ```html\n * <fui-stepper [linear]=\"true\">\n *   <fui-step label=\"Account\" [stepControl]=\"accountForm\">\n *     <form [formGroup]=\"accountForm\">...</form>\n *   </fui-step>\n *   <fui-step label=\"Address\" [stepControl]=\"addressForm\">\n *     <form [formGroup]=\"addressForm\">...</form>\n *   </fui-step>\n * </fui-stepper>\n * ```\n */\n@Component({\n  selector: 'fui-stepper',\n  standalone: true,\n  imports: [NgTemplateOutlet, FuiIconComponent],\n  templateUrl: './stepper.component.html',\n  styleUrls: ['./stepper.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-stepper',\n    '[class.fui-stepper--horizontal]': 'orientation() === \"horizontal\"',\n    '[class.fui-stepper--vertical]': 'orientation() === \"vertical\"',\n    '[class.fui-stepper--linear]': 'linear()',\n  },\n  providers: [{ provide: FORMAUI_STEPPER, useExisting: FuiStepperComponent }],\n})\nexport class FuiStepperComponent {\n  // Inputs\n  readonly orientation = input<StepperOrientation>('horizontal');\n  readonly linear = input<boolean, unknown>(false, { transform: booleanAttribute });\n  readonly selectedIndex = input(0);\n\n  // Outputs\n  readonly selectionChange = output<StepSelectionChange>();\n  readonly animationDone = output();\n\n  // Content children\n  readonly steps = contentChildren(FuiStepComponent);\n\n  // Internal state\n  readonly _selectedIndex: WritableSignal<number> = signal(0);\n\n  // Unique ID for ARIA linking\n  readonly _uniqueId = nextStepperId++;\n\n  // Computed: active step\n  readonly _selectedStep = computed(() => {\n    const allSteps = this.steps();\n    const idx = this._selectedIndex();\n    return allSteps[idx] ?? null;\n  });\n\n  constructor() {\n    // Sync selectedIndex input with internal state\n    effect(() => {\n      const idx = this.selectedIndex();\n      this._selectedIndex.set(idx);\n    });\n  }\n\n  /** Navigate to the next step. In linear mode, validates the current step first. */\n  next(): void {\n    const allSteps = this.steps();\n    const currentIdx = this._selectedIndex();\n\n    if (currentIdx >= allSteps.length - 1) {\n      return;\n    }\n\n    if (this.linear()) {\n      const currentStep = allSteps[currentIdx];\n      if (currentStep) {\n        currentStep._interacted.set(true);\n        const control = currentStep.stepControl();\n        if (control?.invalid) {\n          return;\n        }\n      }\n    }\n\n    this._setSelectedIndex(currentIdx + 1);\n  }\n\n  /** Navigate to the previous step. */\n  previous(): void {\n    const currentIdx = this._selectedIndex();\n    if (currentIdx > 0) {\n      this._setSelectedIndex(currentIdx - 1);\n    }\n  }\n\n  /** Navigate directly to a specific step by index. */\n  goToStep(index: number): void {\n    const allSteps = this.steps();\n    if (index < 0 || index >= allSteps.length) {\n      return;\n    }\n\n    if (this.linear() && index > this._selectedIndex()) {\n      // In linear mode, can only go forward if all preceding steps are valid\n      for (let i = this._selectedIndex(); i < index; i++) {\n        const step = allSteps[i];\n        if (step) {\n          step._interacted.set(true);\n          const control = step.stepControl();\n          if (control?.invalid) {\n            return;\n          }\n        }\n      }\n    }\n\n    this._setSelectedIndex(index);\n  }\n\n  /** Reset all steps and return to the first step. */\n  reset(): void {\n    this._selectedIndex.set(0);\n    this.steps().forEach((step) => {\n      step.reset();\n    });\n  }\n\n  /** @internal Handle step header click */\n  _onStepHeaderClick(index: number): void {\n    this.goToStep(index);\n  }\n\n  /** @internal Check if a step is disabled for navigation */\n  _isStepDisabled(index: number): boolean {\n    if (!this.linear()) {\n      return false;\n    }\n\n    const allSteps = this.steps();\n\n    // Can always go backward\n    if (index < this._selectedIndex()) {\n      // Check if the target step is editable\n      const targetStep = allSteps[index];\n      return targetStep ? !targetStep.editable() : false;\n    }\n\n    // For forward navigation in linear mode, check all preceding steps\n    if (index > this._selectedIndex()) {\n      for (let i = this._selectedIndex(); i < index; i++) {\n        const step = allSteps[i];\n        if (step) {\n          const control = step.stepControl();\n          if (control?.invalid) {\n            return true;\n          }\n        }\n      }\n    }\n\n    return false;\n  }\n\n  /** @internal Handle keyboard navigation on step headers */\n  _onHeaderKeydown(event: KeyboardEvent, currentIndex: number): void {\n    const isHorizontal = this.orientation() === 'horizontal';\n    const allSteps = this.steps();\n    let newIndex = currentIndex;\n\n    switch (event.key) {\n      case 'ArrowRight':\n        if (isHorizontal && currentIndex < allSteps.length - 1) {\n          newIndex = currentIndex + 1;\n        }\n        break;\n      case 'ArrowLeft':\n        if (isHorizontal && currentIndex > 0) {\n          newIndex = currentIndex - 1;\n        }\n        break;\n      case 'ArrowDown':\n        if (!isHorizontal && currentIndex < allSteps.length - 1) {\n          newIndex = currentIndex + 1;\n          event.preventDefault();\n        }\n        break;\n      case 'ArrowUp':\n        if (!isHorizontal && currentIndex > 0) {\n          newIndex = currentIndex - 1;\n          event.preventDefault();\n        }\n        break;\n      case 'Home':\n        newIndex = 0;\n        event.preventDefault();\n        break;\n      case 'End':\n        newIndex = allSteps.length - 1;\n        event.preventDefault();\n        break;\n      default:\n        return;\n    }\n\n    if (newIndex !== currentIndex) {\n      this._onStepHeaderClick(newIndex);\n    }\n  }\n\n  /** @internal Set the selected index and emit selection change */\n  private _setSelectedIndex(newIndex: number): void {\n    const allSteps = this.steps();\n    const previousIndex = this._selectedIndex();\n\n    if (newIndex === previousIndex) {\n      return;\n    }\n\n    const previousStep = allSteps[previousIndex] ?? null;\n    const selectedStep = allSteps[newIndex] ?? null;\n\n    // Mark the new step as interacted\n    if (selectedStep) {\n      selectedStep._interacted.set(true);\n    }\n\n    this._selectedIndex.set(newIndex);\n\n    this.selectionChange.emit({\n      selectedIndex: newIndex,\n      previousIndex,\n      selectedStep,\n      previousStep,\n    });\n  }\n}\n","<!-- Step Headers -->\n<div class=\"fui-stepper__header\" role=\"tablist\" [attr.aria-orientation]=\"orientation()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <button\n      class=\"fui-stepper__step-header\"\n      [class.fui-stepper__step-header--active]=\"_selectedIndex() === $index\"\n      [class.fui-stepper__step-header--completed]=\"step.state() === 'completed'\"\n      [class.fui-stepper__step-header--error]=\"step.hasError()\"\n      [class.fui-stepper__step-header--disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-selected]=\"_selectedIndex() === $index\"\n      [attr.aria-disabled]=\"_isStepDisabled($index)\"\n      [attr.aria-current]=\"_selectedIndex() === $index ? 'step' : null\"\n      [attr.aria-label]=\"\n        step.label() + (step.state() === 'completed' ? ' (completed)' : step.hasError() ? ' (error)' : '')\n      \"\n      [disabled]=\"_isStepDisabled($index)\"\n      role=\"tab\"\n      [attr.id]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-controls]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      (click)=\"_onStepHeaderClick($index)\"\n      (keydown)=\"_onHeaderKeydown($event, $index)\"\n      type=\"button\"\n    >\n      <div class=\"fui-stepper__step-icon\">\n        @if (step.state() === 'completed' && !step.icon()) {\n          <fui-icon name=\"check\" size=\"sm\"></fui-icon>\n        } @else if (step.hasError()) {\n          <fui-icon name=\"warning\" size=\"sm\"></fui-icon>\n        } @else if (step.icon()) {\n          <fui-icon [name]=\"step.icon()\" size=\"sm\"></fui-icon>\n        } @else {\n          <span class=\"fui-stepper__step-number\">{{ $index + 1 }}</span>\n        }\n      </div>\n      <div class=\"fui-stepper__step-text\">\n        <span class=\"fui-stepper__step-label\">{{ step.label() }}</span>\n        @if (step.description()) {\n          <span class=\"fui-stepper__step-description\">{{ step.description() }}</span>\n        }\n        @if (step.hasError()) {\n          <span class=\"fui-stepper__step-error\">{{ step.errorMessage() }}</span>\n        }\n      </div>\n    </button>\n    @if (!last) {\n      <div\n        class=\"fui-stepper__connector\"\n        [class.fui-stepper__connector--completed]=\"step.state() === 'completed'\"\n      ></div>\n    }\n  }\n</div>\n\n<!-- Step Content -->\n<div class=\"fui-stepper__content\">\n  @for (step of steps(); track $index) {\n    <div\n      class=\"fui-stepper__step-body\"\n      [class.fui-stepper__step-body--active]=\"_selectedIndex() === $index\"\n      role=\"tabpanel\"\n      [attr.id]=\"'fui-step-content-' + _uniqueId + '-' + $index\"\n      [attr.aria-labelledby]=\"'fui-step-header-' + _uniqueId + '-' + $index\"\n      [attr.aria-expanded]=\"_selectedIndex() === $index\"\n    >\n      @if (_selectedIndex() === $index || step._interacted()) {\n        <ng-container [ngTemplateOutlet]=\"step.contentTemplate()!\"></ng-container>\n      }\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAgBA;;;;;;;;;;;;;;;;;;AAkBG;MAQU,gBAAgB,CAAA;;AAElB,IAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,IAAA,WAAW,GAAG,KAAK,CAAC,EAAE,kFAAC;AACvB,IAAA,IAAI,GAAG,KAAK,CAAC,EAAE,2EAAC;IAChB,SAAS,GAAG,KAAK,CAAmB,KAAK,iFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;IAC3E,QAAQ,GAAG,KAAK,CAAmB,IAAI,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACzE,IAAA,YAAY,GAAG,KAAK,CAAC,EAAE,mFAAC;AACxB,IAAA,WAAW,GAAG,KAAK,CAAyB,IAAI,kFAAC;IACjD,QAAQ,GAAG,KAAK,CAAmB,KAAK,gFAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;;AAG1E,IAAA,WAAW,GAA4B,MAAM,CAAC,KAAK,kFAAC;;AAGpD,IAAA,eAAe,GAA6C,SAAS,CAAC,WAAW,sFAAC;;AAGlF,IAAA,QAAQ,GAAoB,QAAQ,CAAC,MAAK;AACjD,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,EAAE;QAClC,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;AAC/B,YAAA,OAAO,IAAI;QACb;AACA,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,QAAA,OAAO,CAAC,EAAE,OAAO,IAAI,OAAO,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;AAC7D,IAAA,CAAC,+EAAC;AAEO,IAAA,KAAK,GAAsB,QAAQ,CAAC,MAAK;AAChD,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,OAAO,OAAO;QAChB;AACA,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACpB,YAAA,OAAO,WAAW;QACpB;AACA,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,4EAAC;;IAGF,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;IAC5B;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC;AAC3B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;QAClC,IAAI,OAAO,EAAE;YACX,OAAO,CAAC,KAAK,EAAE;QACjB;IACF;uGAjDW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAeoD,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAnBhF,sDAAsD,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAIrD,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,QAAQ,EAAE,sDAAsD;oBAChE,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;AACtC,iBAAA;w2BAgBgF,WAAW,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;MC7C/E,eAAe,GAAG,IAAI,cAAc,CAAU,iBAAiB;;ACM5E,IAAI,aAAa,GAAG,CAAC;AAErB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCG;MAiBU,mBAAmB,CAAA;;AAErB,IAAA,WAAW,GAAG,KAAK,CAAqB,YAAY,kFAAC;IACrD,MAAM,GAAG,KAAK,CAAmB,KAAK,8EAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACxE,IAAA,aAAa,GAAG,KAAK,CAAC,CAAC,oFAAC;;IAGxB,eAAe,GAAG,MAAM,EAAuB;IAC/C,aAAa,GAAG,MAAM,EAAE;;AAGxB,IAAA,KAAK,GAAG,eAAe,CAAC,gBAAgB,4EAAC;;AAGzC,IAAA,cAAc,GAA2B,MAAM,CAAC,CAAC,qFAAC;;IAGlD,SAAS,GAAG,aAAa,EAAE;;AAG3B,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AACrC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;AAC7B,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,EAAE;AACjC,QAAA,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,IAAI;AAC9B,IAAA,CAAC,oFAAC;AAEF,IAAA,WAAA,GAAA;;QAEE,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE;AAChC,YAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC;AAC9B,QAAA,CAAC,CAAC;IACJ;;IAGA,IAAI,GAAA;AACF,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;AAC7B,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;QAExC,IAAI,UAAU,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;YACrC;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;AACjB,YAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,CAAC;YACxC,IAAI,WAAW,EAAE;AACf,gBAAA,WAAW,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AACjC,gBAAA,MAAM,OAAO,GAAG,WAAW,CAAC,WAAW,EAAE;AACzC,gBAAA,IAAI,OAAO,EAAE,OAAO,EAAE;oBACpB;gBACF;YACF;QACF;AAEA,QAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,CAAC,CAAC;IACxC;;IAGA,QAAQ,GAAA;AACN,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE;AACxC,QAAA,IAAI,UAAU,GAAG,CAAC,EAAE;AAClB,YAAA,IAAI,CAAC,iBAAiB,CAAC,UAAU,GAAG,CAAC,CAAC;QACxC;IACF;;AAGA,IAAA,QAAQ,CAAC,KAAa,EAAA;AACpB,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;QAC7B,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,QAAQ,CAAC,MAAM,EAAE;YACzC;QACF;AAEA,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE;;AAElD,YAAA,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;AAClD,gBAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;gBACxB,IAAI,IAAI,EAAE;AACR,oBAAA,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;AAC1B,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,oBAAA,IAAI,OAAO,EAAE,OAAO,EAAE;wBACpB;oBACF;gBACF;YACF;QACF;AAEA,QAAA,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;IAC/B;;IAGA,KAAK,GAAA;AACH,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;QAC1B,IAAI,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,KAAI;YAC5B,IAAI,CAAC,KAAK,EAAE;AACd,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,kBAAkB,CAAC,KAAa,EAAA;AAC9B,QAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;IACtB;;AAGA,IAAA,eAAe,CAAC,KAAa,EAAA;AAC3B,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;AAClB,YAAA,OAAO,KAAK;QACd;AAEA,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;;AAG7B,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE;;AAEjC,YAAA,MAAM,UAAU,GAAG,QAAQ,CAAC,KAAK,CAAC;AAClC,YAAA,OAAO,UAAU,GAAG,CAAC,UAAU,CAAC,QAAQ,EAAE,GAAG,KAAK;QACpD;;AAGA,QAAA,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE;AACjC,YAAA,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;AAClD,gBAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC;gBACxB,IAAI,IAAI,EAAE;AACR,oBAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAClC,oBAAA,IAAI,OAAO,EAAE,OAAO,EAAE;AACpB,wBAAA,OAAO,IAAI;oBACb;gBACF;YACF;QACF;AAEA,QAAA,OAAO,KAAK;IACd;;IAGA,gBAAgB,CAAC,KAAoB,EAAE,YAAoB,EAAA;QACzD,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,KAAK,YAAY;AACxD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;QAC7B,IAAI,QAAQ,GAAG,YAAY;AAE3B,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,YAAY;gBACf,IAAI,YAAY,IAAI,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACtD,oBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC;gBAC7B;gBACA;AACF,YAAA,KAAK,WAAW;AACd,gBAAA,IAAI,YAAY,IAAI,YAAY,GAAG,CAAC,EAAE;AACpC,oBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC;gBAC7B;gBACA;AACF,YAAA,KAAK,WAAW;gBACd,IAAI,CAAC,YAAY,IAAI,YAAY,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AACvD,oBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC;oBAC3B,KAAK,CAAC,cAAc,EAAE;gBACxB;gBACA;AACF,YAAA,KAAK,SAAS;AACZ,gBAAA,IAAI,CAAC,YAAY,IAAI,YAAY,GAAG,CAAC,EAAE;AACrC,oBAAA,QAAQ,GAAG,YAAY,GAAG,CAAC;oBAC3B,KAAK,CAAC,cAAc,EAAE;gBACxB;gBACA;AACF,YAAA,KAAK,MAAM;gBACT,QAAQ,GAAG,CAAC;gBACZ,KAAK,CAAC,cAAc,EAAE;gBACtB;AACF,YAAA,KAAK,KAAK;AACR,gBAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;gBAC9B,KAAK,CAAC,cAAc,EAAE;gBACtB;AACF,YAAA;gBACE;;AAGJ,QAAA,IAAI,QAAQ,KAAK,YAAY,EAAE;AAC7B,YAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;QACnC;IACF;;AAGQ,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AACxC,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,EAAE;AAC7B,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,EAAE;AAE3C,QAAA,IAAI,QAAQ,KAAK,aAAa,EAAE;YAC9B;QACF;QAEA,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,IAAI;QACpD,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,IAAI,IAAI;;QAG/C,IAAI,YAAY,EAAE;AAChB,YAAA,YAAY,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC;QACpC;AAEA,QAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,CAAC;AAEjC,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,YAAA,aAAa,EAAE,QAAQ;YACvB,aAAa;YACb,YAAY;YACZ,YAAY;AACb,SAAA,CAAC;IACJ;uGA5MW,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,oxBAFnB,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAC,gDAa1C,gBAAgB,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrFnD,s6FAsEA,EAAA,MAAA,EAAA,CAAA,yoKAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDTY,gBAAgB,oJAAE,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAajC,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,cACX,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,EAAA,eAAA,EAG5B,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,aAAa;AACpB,wBAAA,iCAAiC,EAAE,gCAAgC;AACnE,wBAAA,+BAA+B,EAAE,8BAA8B;AAC/D,wBAAA,6BAA6B,EAAE,UAAU;qBAC1C,EAAA,SAAA,EACU,CAAC,EAAE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAA,mBAAqB,EAAE,CAAC,EAAA,QAAA,EAAA,s6FAAA,EAAA,MAAA,EAAA,CAAA,yoKAAA,CAAA,EAAA;qiBAa1C,gBAAgB,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErFnD;;AAEG;;;;"}

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

@@ -0,0 +1,197 @@
+import * as i0 from '@angular/core';
+import { input, TemplateRef, ViewChild, Component, model, output, signal, effect, ViewChildren, ContentChildren, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @component FuiTabComponent
+ * @selector fui-tab
+ * @description Individual tab definition used inside `fui-tab-group`. Provides a label
+ * for the tab header and wraps its content in an `ng-template` for lazy rendering.
+ *
+ * @input label - (required) Text displayed in the tab header button
+ * @input disabled - Whether the tab is disabled and cannot be selected (default: false)
+ *
+ * @example
+ * <fui-tab label="Settings" [disabled]="!canEdit">
+ *   <p>Settings panel content here.</p>
+ * </fui-tab>
+ */
+class FuiTabComponent {
+    /**
+     * The label for the tab
+     */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the tab is disabled
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Template reference for the tab content
+     */
+    content;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.6", type: FuiTabComponent, isStandalone: true, selector: "fui-tab", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fui-tab',
+                    standalone: true,
+                    template: `
+    <ng-template>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+let nextTabGroupId = 0;
+/**
+ * @component FuiTabGroupComponent
+ * @selector fui-tab-group
+ * @description Container for `fui-tab` components. Manages tab selection, keyboard navigation
+ * (ArrowLeft/Right, Home, End, Enter, Space), and roving tabindex for accessibility.
+ * Uses content projection to collect tab definitions and renders their content lazily.
+ *
+ * @input selectedIndex - Two-way model signal for the active tab index (default: 0)
+ *
+ * @output selectedTabChange - Emits the FuiTabComponent instance when a new tab is selected
+ *
+ * @cssvar --fui-tab-label-font-size - Font size of tab labels
+ * @cssvar --fui-tab-label-min-height - Minimum height of tab header buttons
+ * @cssvar --fui-tab-label-padding-x - Horizontal padding of tab labels
+ * @cssvar --fui-tab-label-padding-y - Vertical padding of tab labels
+ * @cssvar --fui-tab-panel-padding - Padding of the tab content panel
+ * @cssvar --fui-tab-indicator-height - Height of the active-tab underline indicator
+ * @cssvar --fui-tab-active-color - Color of the active tab label and indicator
+ *
+ * @example
+ * <fui-tab-group [(selectedIndex)]="activeTab">
+ *   <fui-tab label="Overview">Overview content</fui-tab>
+ *   <fui-tab label="Details">Details content</fui-tab>
+ *   <fui-tab label="History" [disabled]="true">History content</fui-tab>
+ * </fui-tab-group>
+ */
+class FuiTabGroupComponent {
+    /** Unique ID prefix for this tab group instance to avoid collisions */
+    tabGroupId = `fui-tab-group-${nextTabGroupId++}`;
+    /**
+     * The index of the selected tab
+     */
+    selectedIndex = model(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Event emitted when a tab is selected
+     */
+    selectedTabChange = output();
+    /**
+     * Query for all tab components
+     */
+    tabComponents;
+    /**
+     * Query for tab header buttons for focus management
+     */
+    tabButtons;
+    /**
+     * Signal containing all tabs
+     */
+    tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // React to external or internal selectedIndex changes and emit selectedTabChange accordingly
+        effect(() => {
+            const idx = this.selectedIndex();
+            const tabs = this.tabs();
+            if (!tabs?.length)
+                return;
+            if (idx >= 0 && idx < tabs.length) {
+                const tab = tabs[idx];
+                if (!tab.disabled()) {
+                    this.selectedTabChange.emit(tab);
+                }
+            }
+        });
+    }
+    ngAfterContentInit() {
+        this.tabs.set(this.tabComponents.toArray());
+        // Listen for changes in tab components
+        this.tabComponents.changes.subscribe(() => {
+            this.tabs.set(this.tabComponents.toArray());
+        });
+    }
+    /**
+     * Select a tab by index
+     */
+    selectTab(index) {
+        const tabs = this.tabs();
+        if (index >= 0 && index < tabs.length && !tabs[index].disabled()) {
+            // Update the model; the effect defined in ngAfterContentInit will emit selectedTabChange
+            this.selectedIndex.set(index);
+        }
+    }
+    onKeydown(event, index) {
+        const tabs = this.tabs();
+        if (!tabs?.length)
+            return;
+        const last = tabs.length - 1;
+        let next = index;
+        switch (event.key) {
+            case 'ArrowRight':
+                next = index === last ? 0 : index + 1;
+                break;
+            case 'ArrowLeft':
+                next = index === 0 ? last : index - 1;
+                break;
+            case 'Home':
+                next = 0;
+                break;
+            case 'End':
+                next = last;
+                break;
+            case 'Enter':
+            case ' ': // Space key
+                this.selectTab(index);
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        while (tabs[next]?.disabled()) {
+            next = (next + 1) % tabs.length;
+            if (next === index)
+                break;
+        }
+        // Focus the target tab button (roving tabindex)
+        const buttons = this.tabButtons?.toArray();
+        if (buttons?.[next]) {
+            buttons[next].nativeElement.focus();
+        }
+    }
+    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\">\n  <div class=\"fui-tab-header\" role=\"tablist\">\n    @for (tab of tabs(); track $index) {\n      <button\n        #tabButton\n        class=\"fui-tab-label\"\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\n        [disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"selectedIndex() === $index\"\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\n        [id]=\"tabGroupId + '-tab-' + $index\"\n        role=\"tab\"\n        type=\"button\"\n        (click)=\"selectTab($index)\"\n        (keydown)=\"onKeydown($event, $index)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n\n  <div class=\"fui-tab-content\">\n    @for (tab of tabs(); track $index) {\n      <div\n        class=\"fui-tab-panel\"\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\n        [id]=\"tabGroupId + '-panel-' + $index\"\n        role=\"tabpanel\"\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\n      >\n        @if (selectedIndex() === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-tab-group{--fui-tab-label-font-size: var(--fui-font-size-02);--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);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-color);background-color:color-mix(in srgb,var(--fui-surface-02) 80%,transparent);-webkit-backdrop-filter:blur(8px);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-color)}.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:color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 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-surface-02)}.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-opacity-disabled)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.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-02, .11s) var(--fui-ease-entrance, 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:576px){.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\">\n  <div class=\"fui-tab-header\" role=\"tablist\">\n    @for (tab of tabs(); track $index) {\n      <button\n        #tabButton\n        class=\"fui-tab-label\"\n        [class.fui-tab-label--active]=\"selectedIndex() === $index\"\n        [class.fui-tab-label--disabled]=\"tab.disabled()\"\n        [disabled]=\"tab.disabled()\"\n        [attr.aria-selected]=\"selectedIndex() === $index\"\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : -1\"\n        [attr.aria-controls]=\"tabGroupId + '-panel-' + $index\"\n        [id]=\"tabGroupId + '-tab-' + $index\"\n        role=\"tab\"\n        type=\"button\"\n        (click)=\"selectTab($index)\"\n        (keydown)=\"onKeydown($event, $index)\"\n      >\n        {{ tab.label() }}\n      </button>\n    }\n  </div>\n\n  <div class=\"fui-tab-content\">\n    @for (tab of tabs(); track $index) {\n      <div\n        class=\"fui-tab-panel\"\n        [class.fui-tab-panel--active]=\"selectedIndex() === $index\"\n        [attr.aria-labelledby]=\"tabGroupId + '-tab-' + $index\"\n        [id]=\"tabGroupId + '-panel-' + $index\"\n        role=\"tabpanel\"\n        [attr.tabindex]=\"selectedIndex() === $index ? 0 : null\"\n        [attr.aria-hidden]=\"selectedIndex() !== $index\"\n      >\n        @if (selectedIndex() === $index) {\n          <ng-container [ngTemplateOutlet]=\"tab.content\"></ng-container>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-tab-group{--fui-tab-label-font-size: var(--fui-font-size-02);--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);contain:layout style;display:flex;flex-direction:column;width:100%}.fui-tab-header{display:flex;border-bottom:1px solid var(--fui-border-color);background-color:color-mix(in srgb,var(--fui-surface-02) 80%,transparent);-webkit-backdrop-filter:blur(8px);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-color)}.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:color,background-color var(--fui-duration-fast-02) var(--fui-ease-standard) 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-surface-02)}.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-opacity-disabled)}.fui-tab-label--disabled:hover{background-color:transparent}.fui-tab-label:focus-visible{outline:2px solid var(--fui-primary);outline-offset:-2px}.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-02, .11s) var(--fui-ease-entrance, 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:576px){.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]
+            }], tabButtons: [{
+                type: ViewChildren,
+                args: ['tabButton']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiTabComponent, FuiTabGroupComponent };
+//# sourceMappingURL=raintonic-formaui-components-tab.mjs.map