@egose/shadcn-theme-ng-tw 0.3.0 → 0.5.0

package/stepper/fesm2022/stepper.mjs

@@ -0,0 +1,686 @@
+import * as i0 from '@angular/core';
+import { inject, TemplateRef, Directive, ViewContainerRef, DestroyRef, input, contentChild, effect, untracked, ChangeDetectionStrategy, Component, InjectionToken, numberAttribute, booleanAttribute, computed, signal, NgModule } from '@angular/core';
+import { TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/stepper';
+import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperModule, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
+import { NgTemplateOutlet } from '@angular/common';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideCircleAlert, lucideCheck } from '@ng-icons/lucide';
+import { buttonVariants } from '@egose/shadcn-theme-ng-tw/button';
+import { classes, hlm } from '@egose/shadcn-theme-ng-tw/utils';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { cva } from 'class-variance-authority';
+import { tap } from 'rxjs/operators';
+
+/**
+ * Content for an `hlm-step` that will be rendered lazily.
+ */
+class HlmStepContent {
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepContent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmStepContent, isStandalone: true, selector: "ng-template[hlmStepContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[hlmStepContent]',
+                }]
+        }] });
+
+class HlmStepLabel extends CdkStepLabel {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmStepLabel, isStandalone: true, selector: "[hlmStepLabel]", usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[hlmStepLabel]',
+                }]
+        }] });
+
+class HlmStep extends CdkStep {
+    _viewContainerRef = inject(ViewContainerRef);
+    _destroyRef = inject(DestroyRef);
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Content for step label given by `<ng-template hlmStepLabel>`. */
+    stepLabelContent = contentChild(HlmStepLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepLabelContent" }] : /* istanbul ignore next */ []));
+    /** Content that will be rendered lazily. */
+    _lazyContent = contentChild(HlmStepContent, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_lazyContent" }] : /* istanbul ignore next */ []));
+    /** Currently-attached portal containing the lazy content. */
+    portal = null;
+    constructor() {
+        super();
+        effect(() => {
+            const isSelected = this.isSelected();
+            const lazyContent = this._lazyContent();
+            untracked(() => {
+                if (isSelected && lazyContent && !this.portal) {
+                    this.portal = new TemplatePortal(lazyContent.template, this._viewContainerRef);
+                }
+            });
+        });
+        this._destroyRef.onDestroy(() => {
+            if (this.portal?.isAttached) {
+                this.portal.detach();
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStep, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.3", type: HlmStep, isStandalone: true, selector: "hlm-step", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "hidden": "" } }, providers: [
+            {
+                provide: CdkStep,
+                useExisting: HlmStep,
+            },
+        ], queries: [{ propertyName: "stepLabelContent", first: true, predicate: HlmStepLabel, descendants: true, isSignal: true }, { propertyName: "_lazyContent", first: true, predicate: HlmStepContent, descendants: true, isSignal: true }], exportAs: ["hlmStep"], usesInheritance: true, ngImport: i0, template: `
+    <ng-template>
+      <ng-content></ng-content>
+      <ng-template [cdkPortalOutlet]="portal"></ng-template>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStep, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-step',
+                    exportAs: 'hlmStep',
+                    imports: [CdkPortalOutlet],
+                    providers: [
+                        {
+                            provide: CdkStep,
+                            useExisting: HlmStep,
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        hidden: '',
+                    },
+                    template: `
+    <ng-template>
+      <ng-content></ng-content>
+      <ng-template [cdkPortalOutlet]="portal"></ng-template>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], stepLabelContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepLabel), { isSignal: true }] }], _lazyContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => HlmStepContent), { isSignal: true }] }] } });
+
+const defaultConfig = {
+    animationEnabled: true,
+    animationDuration: 300,
+    defaultIndicatorMode: 'state',
+};
+const HlmStepperConfigToken = new InjectionToken('HlmStepperConfig');
+function normalizeDuration(duration) {
+    if (!Number.isFinite(duration)) {
+        return defaultConfig.animationDuration;
+    }
+    return Math.max(0, Math.round(duration));
+}
+function provideHlmStepperConfig(config) {
+    const mergedConfig = { ...defaultConfig, ...config };
+    return {
+        provide: HlmStepperConfigToken,
+        useValue: { ...mergedConfig, animationDuration: normalizeDuration(mergedConfig.animationDuration) },
+    };
+}
+function injectHlmStepperConfig() {
+    const config = inject(HlmStepperConfigToken, { optional: true }) ?? defaultConfig;
+    return { ...config, animationDuration: normalizeDuration(config.animationDuration) };
+}
+
+class HlmStepHeader extends CdkStepHeader {
+    _config = injectHlmStepperConfig();
+    state = input('number', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []));
+    label = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    index = input(0, { ...(ngDevMode ? { debugName: "index" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    reached = input(false, { ...(ngDevMode ? { debugName: "reached" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    optional = input(false, { ...(ngDevMode ? { debugName: "optional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    icon = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    indicatorMode = input(this._config.defaultIndicatorMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
+    labelPosition = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        classes(() => [this.labelPosition() === "tw:bottom" && 'tw:flex-col tw:text-center']);
+    }
+    _stringLabel = computed(() => {
+        const label = this.label();
+        return typeof label === 'string' ? label : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stringLabel" }] : /* istanbul ignore next */ []));
+    _templateLabel = computed(() => {
+        const label = this.label();
+        return label instanceof HlmStepLabel ? label : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_templateLabel" }] : /* istanbul ignore next */ []));
+    _showOptionalLabel = computed(() => this.optional() && this.state() !== 'error', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showOptionalLabel" }] : /* istanbul ignore next */ []));
+    _showErrorLabel = computed(() => this.state() === 'error' && !!this.errorMessage(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showErrorLabel" }] : /* istanbul ignore next */ []));
+    _buttonVariant = computed(() => {
+        if (this.state() === 'error') {
+            return 'destructive';
+        }
+        if (this.selected() || this.reached()) {
+            return 'default';
+        }
+        return 'outline';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_buttonVariant" }] : /* istanbul ignore next */ []));
+    _indicatorClass = computed(() => `${buttonVariants({ size: 'icon-sm', variant: this._buttonVariant() })}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_indicatorClass" }] : /* istanbul ignore next */ []));
+    _labelClass = computed(() => hlm('tw:flex tw:min-w-0 tw:touch-manipulation tw:flex-col tw:truncate tw:text-sm tw:font-medium', this.state() === 'error' && 'tw:text-destructive'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+    _iconName = computed(() => {
+        const state = this.state();
+        const mode = this.indicatorMode();
+        const showStateIcon = this.selected() || this.reached();
+        if (mode === 'number') {
+            return null;
+        }
+        if (state === 'error') {
+            return 'lucideCircleAlert';
+        }
+        if (mode === 'state') {
+            if (!showStateIcon) {
+                return null;
+            }
+            return 'lucideCheck';
+            // TODO: to be discussed: should we follow the same ui as material stepper and show a pencil icon for edit state?
+            // if (state === 'done') return 'lucideCheck';
+            // if (state === 'edit') return 'lucidePencil';
+        }
+        return this.icon();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconName" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepHeader, isStandalone: true, selector: "hlm-step-header", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, reached: { classPropertyName: "reached", publicName: "reached", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, optional: { classPropertyName: "optional", publicName: "optional", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-disabled": "disabled() ? \"true\" : null" }, classAttribute: "tw:group tw:inline-flex tw:shrink-0 tw:outline-none tw:items-center tw:gap-2 tw:touch-manipulation tw:transition-opacity tw:data-[disabled=true]:pointer-events-none tw:data-[disabled=true]:opacity-50" }, providers: [provideIcons({ lucideCheck, lucideCircleAlert })], usesInheritance: true, ngImport: i0, template: `
+    <span aria-hidden="true" [class]="_indicatorClass()">
+      @if (_iconName(); as icon) {
+        <ng-icon [name]="icon" />
+      } @else {
+        <span>{{ index() + 1 }}</span>
+      }
+    </span>
+
+    <span [class]="_labelClass()">
+      @if (_templateLabel(); as templateLabel) {
+        <ng-container [ngTemplateOutlet]="templateLabel.template" />
+      } @else if (_stringLabel(); as stringLabel) {
+        {{ stringLabel }}
+      }
+
+      @if (_showOptionalLabel()) {
+        <span class="tw:text-muted-foreground tw:text-xs">Optional</span>
+      }
+
+      @if (_showErrorLabel()) {
+        <span class="tw:text-destructive tw:text-xs">{{ errorMessage() }}</span>
+      }
+    </span>
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepHeader, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-step-header',
+                    imports: [NgTemplateOutlet, NgIcon],
+                    providers: [provideIcons({ lucideCheck, lucideCircleAlert })],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'tw:group tw:inline-flex tw:shrink-0 tw:outline-none tw:items-center tw:gap-2 tw:touch-manipulation tw:transition-opacity tw:data-[disabled=true]:pointer-events-none tw:data-[disabled=true]:opacity-50',
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                    },
+                    template: `
+    <span aria-hidden="true" [class]="_indicatorClass()">
+      @if (_iconName(); as icon) {
+        <ng-icon [name]="icon" />
+      } @else {
+        <span>{{ index() + 1 }}</span>
+      }
+    </span>
+
+    <span [class]="_labelClass()">
+      @if (_templateLabel(); as templateLabel) {
+        <ng-container [ngTemplateOutlet]="templateLabel.template" />
+      } @else if (_stringLabel(); as stringLabel) {
+        {{ stringLabel }}
+      }
+
+      @if (_showOptionalLabel()) {
+        <span class="tw:text-muted-foreground tw:text-xs">Optional</span>
+      }
+
+      @if (_showErrorLabel()) {
+        <span class="tw:text-destructive tw:text-xs">{{ errorMessage() }}</span>
+      }
+    </span>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], reached: [{ type: i0.Input, args: [{ isSignal: true, alias: "reached", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], optional: [{ type: i0.Input, args: [{ isSignal: true, alias: "optional", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }] } });
+
+const stepTransition = cva('', {
+    variants: {
+        motion: {
+            none: '',
+            'enter-forward': 'tw:animate-in fade-in slide-in-from-right-8 tw:fill-mode-both',
+            'enter-backward': 'tw:animate-in fade-in slide-in-from-left-8 tw:fill-mode-both',
+            'leave-forward': 'tw:animate-out fade-out slide-out-to-left-8 tw:fill-mode-both tw:absolute tw:top-0 tw:right-0 tw:left-0',
+            'leave-backward': 'tw:animate-out fade-out slide-out-to-right-8 tw:fill-mode-both tw:absolute tw:top-0 tw:right-0 tw:left-0',
+            'enter-bottom': 'tw:animate-in fade-in slide-in-from-bottom-2 tw:fill-mode-both tw:duration-400 tw:[animation-timing-function:cubic-bezier(0.34,1.56,0.64,1)]',
+        },
+    },
+    defaultVariants: { motion: 'none' },
+});
+class HlmStepper extends CdkStepper {
+    _config = injectHlmStepperConfig();
+    labelPosition = input('end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelPosition" }] : /* istanbul ignore next */ []));
+    headerPosition = input('top', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerPosition" }] : /* istanbul ignore next */ []));
+    indicatorMode = input(this._config.defaultIndicatorMode, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorMode" }] : /* istanbul ignore next */ []));
+    stepperAriaLabel = input('Progress', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperAriaLabel" }] : /* istanbul ignore next */ []));
+    stepperAriaLabelledby = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepperAriaLabelledby" }] : /* istanbul ignore next */ []));
+    animationsEnabled = input(this._config.animationEnabled, { ...(ngDevMode ? { debugName: "animationsEnabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    animationDuration = input(this._config.animationDuration, { ...(ngDevMode ? { debugName: "animationDuration" } : /* istanbul ignore next */ {}), transform: numberAttribute });
+    _animationDirection = signal('forward', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_animationDirection" }] : /* istanbul ignore next */ []));
+    _hasSelectionChanged = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasSelectionChanged" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.selectionChange
+            .pipe(tap((event) => {
+            if (event.previouslySelectedIndex >= 0 && event.selectedIndex !== event.previouslySelectedIndex) {
+                this._hasSelectionChanged.set(true);
+            }
+            this._animationDirection.set(event.selectedIndex < event.previouslySelectedIndex ? 'backward' : 'forward');
+        }), takeUntilDestroyed())
+            .subscribe();
+    }
+    next() {
+        const stepControl = this.selected?.stepControl;
+        if (stepControl && typeof stepControl !== 'function') {
+            // Classic reactive-forms control: surface validation errors before a denied linear transition.
+            // Signal `Field` controls expose validity through invocation and need no touch pass.
+            stepControl.markAllAsTouched();
+            stepControl.updateValueAndValidity();
+        }
+        const invalid = !!stepControl && (typeof stepControl === 'function' ? stepControl().invalid() : stepControl.invalid);
+        if (this.linear && invalid) {
+            return;
+        }
+        super.next();
+    }
+    stepIcon(step) {
+        return step instanceof HlmStep ? step.icon() : null;
+    }
+    _enterAnimationClass() {
+        if (!this._hasSelectionChanged()) {
+            return '';
+        }
+        return stepTransition({ motion: this._animationDirection() === 'forward' ? 'enter-forward' : 'enter-backward' });
+    }
+    _leaveAnimationClass() {
+        if (!this._hasSelectionChanged()) {
+            return '';
+        }
+        return stepTransition({ motion: this._animationDirection() === 'forward' ? 'leave-forward' : 'leave-backward' });
+    }
+    _gridContainerClass(expanded) {
+        return hlm('tw:grid', expanded ? 'tw:grid-rows-[1fr]' : 'tw:grid-rows-[0fr]', this.animationsEnabled() && 'tw:transition-[grid-template-rows]');
+    }
+    _connectorClass(index) {
+        return hlm('tw:block tw:h-full tw:w-px tw:transition-colors tw:duration-200 tw:motion-reduce:transition-none', index < this.selectedIndex ? 'tw:bg-primary' : 'tw:bg-border');
+    }
+    _verticalStepClass(showConnector, index) {
+        return hlm('tw:ms-4 tw:overflow-hidden tw:ps-6', showConnector && 'tw:border-s', this.animationsEnabled() && this.selectedIndex === index && stepTransition({ motion: 'enter-bottom' }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmStepper, isStandalone: true, selector: "hlm-stepper", inputs: { labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, headerPosition: { classPropertyName: "headerPosition", publicName: "headerPosition", isSignal: true, isRequired: false, transformFunction: null }, indicatorMode: { classPropertyName: "indicatorMode", publicName: "indicatorMode", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabel: { classPropertyName: "stepperAriaLabel", publicName: "stepperAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, stepperAriaLabelledby: { classPropertyName: "stepperAriaLabelledby", publicName: "stepperAriaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, animationsEnabled: { classPropertyName: "animationsEnabled", publicName: "animationsEnabled", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: CdkStepper, useExisting: HlmStepper }], usesInheritance: true, ngImport: i0, template: `
+    @switch (orientation) {
+      @case ('horizontal') {
+        <div class="tw:flex tw:w-full tw:flex-col tw:gap-6">
+          @if (headerPosition() === 'top') {
+            <ng-container [ngTemplateOutlet]="horizontalStepsTemplate" [ngTemplateOutletContext]="{ steps: steps }" />
+            <ng-container [ngTemplateOutlet]="horizontalPanelTemplate" />
+          } @else {
+            <ng-container [ngTemplateOutlet]="horizontalPanelTemplate" />
+            <ng-container [ngTemplateOutlet]="horizontalStepsTemplate" [ngTemplateOutletContext]="{ steps: steps }" />
+          }
+        </div>
+      }
+
+      @case ('vertical') {
+        <div class="tw:flex tw:w-full tw:flex-col tw:gap-3">
+          @for (step of steps; track step; let i = $index) {
+            <div class="tw:flex tw:flex-col tw:gap-2">
+              <ng-container [ngTemplateOutlet]="stepHeaderTemplate" [ngTemplateOutletContext]="{ step: step }" />
+
+              <div
+                [class]="_gridContainerClass(selectedIndex === i)"
+                [style.transition-duration.ms]="animationDuration()"
+              >
+                <section
+                  [class]="_verticalStepClass(!$last, i)"
+                  role="region"
+                  [id]="_getStepContentId(i)"
+                  [attr.aria-labelledby]="_getStepLabelId(i)"
+                >
+                  <ng-container [ngTemplateOutlet]="step.content" />
+                </section>
+              </div>
+
+              @if (!$last) {
+                <div class="tw:ms-4 tw:h-6 tw:w-px" aria-hidden="true">
+                  <span [class]="_connectorClass(step.index())"></span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    }
+
+    <ng-template #stepHeaderTemplate let-step="step">
+      <hlm-step-header
+        cdkStepHeader
+        class="tw:min-w-0"
+        (click)="step.select()"
+        (keydown)="_onKeydown($event)"
+        [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1"
+        [id]="_getStepLabelId(step.index())"
+        [attr.role]="orientation === 'horizontal' ? 'tab' : 'button'"
+        [attr.aria-posinset]="orientation === 'horizontal' ? step.index() + 1 : null"
+        [attr.aria-setsize]="orientation === 'horizontal' ? steps.length : null"
+        [attr.aria-selected]="orientation === 'horizontal' ? step.isSelected() : null"
+        [attr.aria-current]="orientation === 'vertical' && step.isSelected() ? 'step' : null"
+        [attr.aria-expanded]="orientation === 'vertical' ? step.isSelected() : null"
+        [attr.aria-controls]="_getStepContentId(step.index())"
+        [attr.aria-label]="step.ariaLabel || null"
+        [attr.aria-labelledby]="!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null"
+        [attr.aria-disabled]="!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null"
+        [index]="step.index()"
+        [state]="step.indicatorType()"
+        [label]="step.stepLabelContent() || step.label"
+        [selected]="step.isSelected()"
+        [reached]="step.index() < selectedIndex"
+        [active]="step.isNavigable()"
+        [optional]="step.optional"
+        [errorMessage]="step.errorMessage"
+        [disabled]="linear && !step.isNavigable()"
+        [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
+        [indicatorMode]="indicatorMode()"
+        [icon]="stepIcon(step)"
+      />
+    </ng-template>
+
+    <ng-template #horizontalStepsTemplate let-steps="steps">
+      <ol
+        class="tw:flex tw:w-full tw:items-center"
+        role="tablist"
+        aria-orientation="horizontal"
+        [attr.aria-label]="stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)"
+        [attr.aria-labelledby]="stepperAriaLabelledby()"
+      >
+        @for (step of steps; track step) {
+          <li class="tw:flex tw:min-w-0 tw:items-center">
+            <ng-container [ngTemplateOutlet]="stepHeaderTemplate" [ngTemplateOutletContext]="{ step: step }" />
+          </li>
+
+          @if (!$last) {
+            <li class="tw:mx-3 tw:flex tw:min-w-8 tw:flex-1 tw:items-center" aria-hidden="true">
+              <span class="tw:bg-border tw:relative tw:h-px tw:w-full tw:overflow-hidden tw:rounded">
+                <span
+                  class="tw:bg-primary tw:absolute tw:inset-y-0 tw:inset-s-0 tw:transition-[width] tw:duration-200"
+                  [style.width.%]="step.index() < selectedIndex ? 100 : 0"
+                ></span>
+              </span>
+            </li>
+          }
+        }
+      </ol>
+    </ng-template>
+
+    <ng-template #horizontalPanelTemplate>
+      <div class="tw:relative tw:min-h-0 tw:overflow-hidden">
+        @for (activeIndex of [selectedIndex]; track activeIndex) {
+          <section
+            role="tabpanel"
+            [id]="_getStepContentId(activeIndex)"
+            [attr.aria-labelledby]="_getStepLabelId(activeIndex)"
+            [style.animation-duration.ms]="animationDuration()"
+            [animate.enter]="animationsEnabled() ? _enterAnimationClass() : ''"
+            [animate.leave]="animationsEnabled() ? _leaveAnimationClass() : ''"
+          >
+            <ng-container [ngTemplateOutlet]="steps.get(activeIndex)?.content" />
+          </section>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CdkStepperModule }, { kind: "directive", type: i1.CdkStepHeader, selector: "[cdkStepHeader]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HlmStepHeader, selector: "hlm-step-header", inputs: ["state", "label", "errorMessage", "index", "selected", "reached", "active", "optional", "disabled", "icon", "indicatorMode", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepper, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'hlm-stepper',
+                    imports: [CdkStepperModule, NgTemplateOutlet, HlmStepHeader],
+                    providers: [{ provide: CdkStepper, useExisting: HlmStepper }],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @switch (orientation) {
+      @case ('horizontal') {
+        <div class="tw:flex tw:w-full tw:flex-col tw:gap-6">
+          @if (headerPosition() === 'top') {
+            <ng-container [ngTemplateOutlet]="horizontalStepsTemplate" [ngTemplateOutletContext]="{ steps: steps }" />
+            <ng-container [ngTemplateOutlet]="horizontalPanelTemplate" />
+          } @else {
+            <ng-container [ngTemplateOutlet]="horizontalPanelTemplate" />
+            <ng-container [ngTemplateOutlet]="horizontalStepsTemplate" [ngTemplateOutletContext]="{ steps: steps }" />
+          }
+        </div>
+      }
+
+      @case ('vertical') {
+        <div class="tw:flex tw:w-full tw:flex-col tw:gap-3">
+          @for (step of steps; track step; let i = $index) {
+            <div class="tw:flex tw:flex-col tw:gap-2">
+              <ng-container [ngTemplateOutlet]="stepHeaderTemplate" [ngTemplateOutletContext]="{ step: step }" />
+
+              <div
+                [class]="_gridContainerClass(selectedIndex === i)"
+                [style.transition-duration.ms]="animationDuration()"
+              >
+                <section
+                  [class]="_verticalStepClass(!$last, i)"
+                  role="region"
+                  [id]="_getStepContentId(i)"
+                  [attr.aria-labelledby]="_getStepLabelId(i)"
+                >
+                  <ng-container [ngTemplateOutlet]="step.content" />
+                </section>
+              </div>
+
+              @if (!$last) {
+                <div class="tw:ms-4 tw:h-6 tw:w-px" aria-hidden="true">
+                  <span [class]="_connectorClass(step.index())"></span>
+                </div>
+              }
+            </div>
+          }
+        </div>
+      }
+    }
+
+    <ng-template #stepHeaderTemplate let-step="step">
+      <hlm-step-header
+        cdkStepHeader
+        class="tw:min-w-0"
+        (click)="step.select()"
+        (keydown)="_onKeydown($event)"
+        [tabIndex]="_getFocusIndex() === step.index() ? 0 : -1"
+        [id]="_getStepLabelId(step.index())"
+        [attr.role]="orientation === 'horizontal' ? 'tab' : 'button'"
+        [attr.aria-posinset]="orientation === 'horizontal' ? step.index() + 1 : null"
+        [attr.aria-setsize]="orientation === 'horizontal' ? steps.length : null"
+        [attr.aria-selected]="orientation === 'horizontal' ? step.isSelected() : null"
+        [attr.aria-current]="orientation === 'vertical' && step.isSelected() ? 'step' : null"
+        [attr.aria-expanded]="orientation === 'vertical' ? step.isSelected() : null"
+        [attr.aria-controls]="_getStepContentId(step.index())"
+        [attr.aria-label]="step.ariaLabel || null"
+        [attr.aria-labelledby]="!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null"
+        [attr.aria-disabled]="!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null"
+        [index]="step.index()"
+        [state]="step.indicatorType()"
+        [label]="step.stepLabelContent() || step.label"
+        [selected]="step.isSelected()"
+        [reached]="step.index() < selectedIndex"
+        [active]="step.isNavigable()"
+        [optional]="step.optional"
+        [errorMessage]="step.errorMessage"
+        [disabled]="linear && !step.isNavigable()"
+        [labelPosition]="orientation === 'horizontal' ? labelPosition() : 'end'"
+        [indicatorMode]="indicatorMode()"
+        [icon]="stepIcon(step)"
+      />
+    </ng-template>
+
+    <ng-template #horizontalStepsTemplate let-steps="steps">
+      <ol
+        class="tw:flex tw:w-full tw:items-center"
+        role="tablist"
+        aria-orientation="horizontal"
+        [attr.aria-label]="stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)"
+        [attr.aria-labelledby]="stepperAriaLabelledby()"
+      >
+        @for (step of steps; track step) {
+          <li class="tw:flex tw:min-w-0 tw:items-center">
+            <ng-container [ngTemplateOutlet]="stepHeaderTemplate" [ngTemplateOutletContext]="{ step: step }" />
+          </li>
+
+          @if (!$last) {
+            <li class="tw:mx-3 tw:flex tw:min-w-8 tw:flex-1 tw:items-center" aria-hidden="true">
+              <span class="tw:bg-border tw:relative tw:h-px tw:w-full tw:overflow-hidden tw:rounded">
+                <span
+                  class="tw:bg-primary tw:absolute tw:inset-y-0 tw:inset-s-0 tw:transition-[width] tw:duration-200"
+                  [style.width.%]="step.index() < selectedIndex ? 100 : 0"
+                ></span>
+              </span>
+            </li>
+          }
+        }
+      </ol>
+    </ng-template>
+
+    <ng-template #horizontalPanelTemplate>
+      <div class="tw:relative tw:min-h-0 tw:overflow-hidden">
+        @for (activeIndex of [selectedIndex]; track activeIndex) {
+          <section
+            role="tabpanel"
+            [id]="_getStepContentId(activeIndex)"
+            [attr.aria-labelledby]="_getStepLabelId(activeIndex)"
+            [style.animation-duration.ms]="animationDuration()"
+            [animate.enter]="animationsEnabled() ? _enterAnimationClass() : ''"
+            [animate.leave]="animationsEnabled() ? _leaveAnimationClass() : ''"
+          >
+            <ng-container [ngTemplateOutlet]="steps.get(activeIndex)?.content" />
+          </section>
+        }
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], headerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerPosition", required: false }] }], indicatorMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorMode", required: false }] }], stepperAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabel", required: false }] }], stepperAriaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperAriaLabelledby", required: false }] }], animationsEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationsEnabled", required: false }] }], animationDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "animationDuration", required: false }] }] } });
+
+/** Button that moves to the next step in a stepper workflow. */
+class HlmStepperNext extends CdkStepperNext {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperNext, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmStepperNext, isStandalone: true, selector: "button[hlmStepperNext]", host: { properties: { "type": "type", "style.touch-action": "\"manipulation\"" }, classAttribute: "hlm-stepper-next" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperNext, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[hlmStepperNext]',
+                    host: {
+                        class: 'hlm-stepper-next',
+                        '[type]': 'type',
+                        '[style.touch-action]': '"manipulation"',
+                    },
+                }]
+        }] });
+
+/** Button that moves to the previous step in a stepper workflow. */
+class HlmStepperPrevious extends CdkStepperPrevious {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperPrevious, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.3", type: HlmStepperPrevious, isStandalone: true, selector: "button[hlmStepperPrevious]", host: { properties: { "type": "type", "style.touch-action": "\"manipulation\"" }, classAttribute: "hlm-stepper-previous" }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperPrevious, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[hlmStepperPrevious]',
+                    host: {
+                        class: 'hlm-stepper-previous',
+                        '[type]': 'type',
+                        '[style.touch-action]': '"manipulation"',
+                    },
+                }]
+        }] });
+
+/*
+ * Public API Surface of stepper
+ */
+const HlmStepperImports = [
+    HlmStepper,
+    HlmStep,
+    HlmStepHeader,
+    HlmStepperNext,
+    HlmStepperPrevious,
+    HlmStepContent,
+    HlmStepLabel,
+];
+class HlmStepperModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperModule, imports: [HlmStepper,
+            HlmStep,
+            HlmStepHeader,
+            HlmStepperNext,
+            HlmStepperPrevious,
+            HlmStepContent,
+            HlmStepLabel], exports: [HlmStepper,
+            HlmStep,
+            HlmStepHeader,
+            HlmStepperNext,
+            HlmStepperPrevious,
+            HlmStepContent,
+            HlmStepLabel] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperModule, imports: [HlmStepper,
+            HlmStepHeader] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmStepperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [...HlmStepperImports],
+                    exports: [...HlmStepperImports],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { HlmStep, HlmStepContent, HlmStepHeader, HlmStepLabel, HlmStepper, HlmStepperImports, HlmStepperModule, HlmStepperNext, HlmStepperPrevious, injectHlmStepperConfig, provideHlmStepperConfig };
+