@egose/shadcn-theme-ng 0.3.0 → 0.5.0

package/stepper/fesm2022/stepper.mjs

@@ -0,0 +1,396 @@
+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/button';
+import { classes, hlm } from '@egose/shadcn-theme-ng/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() === 'bottom' && "flex-col 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("flex min-w-0 touch-manipulation flex-col truncate text-sm font-medium", this.state() === 'error' && "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: "group inline-flex shrink-0 outline-none items-center gap-2 touch-manipulation transition-opacity data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50" }, providers: [provideIcons({ lucideCheck, lucideCircleAlert })], usesInheritance: true, ngImport: i0, template: "\n    <span aria-hidden=\"true\" [class]=\"_indicatorClass()\">\n      @if (_iconName(); as icon) {\n        <ng-icon [name]=\"icon\" />\n      } @else {\n        <span>{{ index() + 1 }}</span>\n      }\n    </span>\n\n    <span [class]=\"_labelClass()\">\n      @if (_templateLabel(); as templateLabel) {\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\" />\n      } @else if (_stringLabel(); as stringLabel) {\n        {{ stringLabel }}\n      }\n\n      @if (_showOptionalLabel()) {\n        <span class=\"text-muted-foreground text-xs\">Optional</span>\n      }\n\n      @if (_showErrorLabel()) {\n        <span class=\"text-destructive text-xs\">{{ errorMessage() }}</span>\n      }\n    </span>\n  ", 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: "group inline-flex shrink-0 outline-none items-center gap-2 touch-manipulation transition-opacity data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+                        '[attr.data-disabled]': 'disabled() ? "true" : null',
+                    },
+                    template: "\n    <span aria-hidden=\"true\" [class]=\"_indicatorClass()\">\n      @if (_iconName(); as icon) {\n        <ng-icon [name]=\"icon\" />\n      } @else {\n        <span>{{ index() + 1 }}</span>\n      }\n    </span>\n\n    <span [class]=\"_labelClass()\">\n      @if (_templateLabel(); as templateLabel) {\n        <ng-container [ngTemplateOutlet]=\"templateLabel.template\" />\n      } @else if (_stringLabel(); as stringLabel) {\n        {{ stringLabel }}\n      }\n\n      @if (_showOptionalLabel()) {\n        <span class=\"text-muted-foreground text-xs\">Optional</span>\n      }\n\n      @if (_showErrorLabel()) {\n        <span class=\"text-destructive text-xs\">{{ errorMessage() }}</span>\n      }\n    </span>\n  ",
+                }]
+        }], 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': "animate-in fade-in slide-in-from-right-8 fill-mode-both",
+            'enter-backward': "animate-in fade-in slide-in-from-left-8 fill-mode-both",
+            'leave-forward': "animate-out fade-out slide-out-to-left-8 fill-mode-both absolute top-0 right-0 left-0",
+            'leave-backward': "animate-out fade-out slide-out-to-right-8 fill-mode-both absolute top-0 right-0 left-0",
+            'enter-bottom': "animate-in fade-in slide-in-from-bottom-2 fill-mode-both duration-400 [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("grid", expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]", this.animationsEnabled() && "transition-[grid-template-rows]");
+    }
+    _connectorClass(index) {
+        return hlm("block h-full w-px transition-colors duration-200 motion-reduce:transition-none", index < this.selectedIndex ? "bg-primary" : "bg-border");
+    }
+    _verticalStepClass(showConnector, index) {
+        return hlm("ms-4 overflow-hidden ps-6", showConnector && "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: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ", 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: "\n    @switch (orientation) {\n      @case ('horizontal') {\n        <div class=\"flex w-full flex-col gap-6\">\n          @if (headerPosition() === 'top') {\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n          } @else {\n            <ng-container [ngTemplateOutlet]=\"horizontalPanelTemplate\" />\n            <ng-container [ngTemplateOutlet]=\"horizontalStepsTemplate\" [ngTemplateOutletContext]=\"{ steps: steps }\" />\n          }\n        </div>\n      }\n\n      @case ('vertical') {\n        <div class=\"flex w-full flex-col gap-3\">\n          @for (step of steps; track step; let i = $index) {\n            <div class=\"flex flex-col gap-2\">\n              <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n\n              <div\n                [class]=\"_gridContainerClass(selectedIndex === i)\"\n                [style.transition-duration.ms]=\"animationDuration()\"\n              >\n                <section\n                  [class]=\"_verticalStepClass(!$last, i)\"\n                  role=\"region\"\n                  [id]=\"_getStepContentId(i)\"\n                  [attr.aria-labelledby]=\"_getStepLabelId(i)\"\n                >\n                  <ng-container [ngTemplateOutlet]=\"step.content\" />\n                </section>\n              </div>\n\n              @if (!$last) {\n                <div class=\"ms-4 h-6 w-px\" aria-hidden=\"true\">\n                  <span [class]=\"_connectorClass(step.index())\"></span>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    }\n\n    <ng-template #stepHeaderTemplate let-step=\"step\">\n      <hlm-step-header\n        cdkStepHeader\n        class=\"min-w-0\"\n        (click)=\"step.select()\"\n        (keydown)=\"_onKeydown($event)\"\n        [tabIndex]=\"_getFocusIndex() === step.index() ? 0 : -1\"\n        [id]=\"_getStepLabelId(step.index())\"\n        [attr.role]=\"orientation === 'horizontal' ? 'tab' : 'button'\"\n        [attr.aria-posinset]=\"orientation === 'horizontal' ? step.index() + 1 : null\"\n        [attr.aria-setsize]=\"orientation === 'horizontal' ? steps.length : null\"\n        [attr.aria-selected]=\"orientation === 'horizontal' ? step.isSelected() : null\"\n        [attr.aria-current]=\"orientation === 'vertical' && step.isSelected() ? 'step' : null\"\n        [attr.aria-expanded]=\"orientation === 'vertical' ? step.isSelected() : null\"\n        [attr.aria-controls]=\"_getStepContentId(step.index())\"\n        [attr.aria-label]=\"step.ariaLabel || null\"\n        [attr.aria-labelledby]=\"!step.ariaLabel && step.ariaLabelledby ? step.ariaLabelledby : null\"\n        [attr.aria-disabled]=\"!step.isNavigable() || (orientation === 'vertical' && step.isSelected()) ? 'true' : null\"\n        [index]=\"step.index()\"\n        [state]=\"step.indicatorType()\"\n        [label]=\"step.stepLabelContent() || step.label\"\n        [selected]=\"step.isSelected()\"\n        [reached]=\"step.index() < selectedIndex\"\n        [active]=\"step.isNavigable()\"\n        [optional]=\"step.optional\"\n        [errorMessage]=\"step.errorMessage\"\n        [disabled]=\"linear && !step.isNavigable()\"\n        [labelPosition]=\"orientation === 'horizontal' ? labelPosition() : 'end'\"\n        [indicatorMode]=\"indicatorMode()\"\n        [icon]=\"stepIcon(step)\"\n      />\n    </ng-template>\n\n    <ng-template #horizontalStepsTemplate let-steps=\"steps\">\n      <ol\n        class=\"flex w-full items-center\"\n        role=\"tablist\"\n        aria-orientation=\"horizontal\"\n        [attr.aria-label]=\"stepperAriaLabelledby() ? null : (stepperAriaLabel() ?? null)\"\n        [attr.aria-labelledby]=\"stepperAriaLabelledby()\"\n      >\n        @for (step of steps; track step) {\n          <li class=\"flex min-w-0 items-center\">\n            <ng-container [ngTemplateOutlet]=\"stepHeaderTemplate\" [ngTemplateOutletContext]=\"{ step: step }\" />\n          </li>\n\n          @if (!$last) {\n            <li class=\"mx-3 flex min-w-8 flex-1 items-center\" aria-hidden=\"true\">\n              <span class=\"bg-border relative h-px w-full overflow-hidden rounded\">\n                <span\n                  class=\"bg-primary absolute inset-y-0 inset-s-0 transition-[width] duration-200\"\n                  [style.width.%]=\"step.index() < selectedIndex ? 100 : 0\"\n                ></span>\n              </span>\n            </li>\n          }\n        }\n      </ol>\n    </ng-template>\n\n    <ng-template #horizontalPanelTemplate>\n      <div class=\"relative min-h-0 overflow-hidden\">\n        @for (activeIndex of [selectedIndex]; track activeIndex) {\n          <section\n            role=\"tabpanel\"\n            [id]=\"_getStepContentId(activeIndex)\"\n            [attr.aria-labelledby]=\"_getStepLabelId(activeIndex)\"\n            [style.animation-duration.ms]=\"animationDuration()\"\n            [animate.enter]=\"animationsEnabled() ? _enterAnimationClass() : ''\"\n            [animate.leave]=\"animationsEnabled() ? _leaveAnimationClass() : ''\"\n          >\n            <ng-container [ngTemplateOutlet]=\"steps.get(activeIndex)?.content\" />\n          </section>\n        }\n      </div>\n    </ng-template>\n  ",
+                }]
+        }], 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 };
+

package/stepper/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "stepper",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/stepper.mjs",
+  "typings": "types/stepper.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/stepper.d.ts",
+      "default": "./fesm2022/stepper.mjs"
+    }
+  },
+  "type": "module"
+}

package/stepper/types/stepper.d.ts

@@ -0,0 +1,116 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef, ValueProvider } from '@angular/core';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { CdkStepLabel, CdkStep, CdkStepHeader, CdkStepper, CdkStepperNext, CdkStepperPrevious } from '@angular/cdk/stepper';
+
+declare class HlmStepLabel extends CdkStepLabel {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepLabel, "[hlmStepLabel]", never, {}, {}, never, never, true, never>;
+}
+
+declare class HlmStep extends CdkStep {
+    private readonly _viewContainerRef;
+    private readonly _destroyRef;
+    readonly icon: _angular_core.InputSignal<string | null>;
+    /** Content for step label given by `<ng-template hlmStepLabel>`. */
+    readonly stepLabelContent: _angular_core.Signal<HlmStepLabel | undefined>;
+    /** Content that will be rendered lazily. */
+    private readonly _lazyContent;
+    /** Currently-attached portal containing the lazy content. */
+    portal: TemplatePortal<unknown> | null;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStep, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStep, "hlm-step", ["hlmStep"], { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; }, {}, ["stepLabelContent", "_lazyContent"], ["*"], true, never>;
+}
+
+/**
+ * Content for an `hlm-step` that will be rendered lazily.
+ */
+declare class HlmStepContent<C> {
+    readonly template: TemplateRef<C>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepContent<any>, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepContent<any>, "ng-template[hlmStepContent]", never, {}, {}, never, never, true, never>;
+}
+
+type HlmStepperLabelPosition = 'end' | 'bottom';
+type HlmStepperHeaderPosition = 'top' | 'bottom';
+type HlmStepperIndicatorMode = 'number' | 'state' | 'icon';
+interface HlmStepperConfig {
+    animationEnabled: boolean;
+    animationDuration: number;
+    defaultIndicatorMode: HlmStepperIndicatorMode;
+}
+declare function provideHlmStepperConfig(config: Partial<HlmStepperConfig>): ValueProvider;
+declare function injectHlmStepperConfig(): HlmStepperConfig;
+
+declare class HlmStepHeader extends CdkStepHeader {
+    private readonly _config;
+    readonly state: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | HlmStepLabel | null>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly index: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly reached: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly optional: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly icon: _angular_core.InputSignal<string | null>;
+    readonly indicatorMode: _angular_core.InputSignal<HlmStepperIndicatorMode>;
+    readonly labelPosition: _angular_core.InputSignal<HlmStepperLabelPosition>;
+    constructor();
+    protected readonly _stringLabel: _angular_core.Signal<string | null>;
+    protected readonly _templateLabel: _angular_core.Signal<HlmStepLabel | null>;
+    protected readonly _showOptionalLabel: _angular_core.Signal<boolean>;
+    protected readonly _showErrorLabel: _angular_core.Signal<boolean>;
+    protected readonly _buttonVariant: _angular_core.Signal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "light" | "dark" | "accent" | "destructive" | "muted" | "outline" | "link" | "ghost" | null | undefined>;
+    protected readonly _indicatorClass: _angular_core.Signal<string>;
+    protected readonly _labelClass: _angular_core.Signal<string>;
+    protected readonly _iconName: _angular_core.Signal<string | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepHeader, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStepHeader, "hlm-step-header", never, { "state": { "alias": "state"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "index": { "alias": "index"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "reached": { "alias": "reached"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "optional": { "alias": "optional"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "indicatorMode": { "alias": "indicatorMode"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class HlmStepper extends CdkStepper {
+    private readonly _config;
+    readonly labelPosition: _angular_core.InputSignal<HlmStepperLabelPosition>;
+    readonly headerPosition: _angular_core.InputSignal<HlmStepperHeaderPosition>;
+    readonly indicatorMode: _angular_core.InputSignal<HlmStepperIndicatorMode>;
+    readonly stepperAriaLabel: _angular_core.InputSignal<string | null>;
+    readonly stepperAriaLabelledby: _angular_core.InputSignal<string | null>;
+    readonly animationsEnabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly animationDuration: _angular_core.InputSignalWithTransform<number, unknown>;
+    protected readonly _animationDirection: _angular_core.WritableSignal<"forward" | "backward">;
+    protected readonly _hasSelectionChanged: _angular_core.WritableSignal<boolean>;
+    constructor();
+    next(): void;
+    protected stepIcon(step: CdkStep): string | null;
+    protected _enterAnimationClass(): string;
+    protected _leaveAnimationClass(): string;
+    protected _gridContainerClass(expanded: boolean): string;
+    protected _connectorClass(index: number): string;
+    protected _verticalStepClass(showConnector: boolean, index: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepper, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HlmStepper, "hlm-stepper", never, { "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "headerPosition": { "alias": "headerPosition"; "required": false; "isSignal": true; }; "indicatorMode": { "alias": "indicatorMode"; "required": false; "isSignal": true; }; "stepperAriaLabel": { "alias": "stepperAriaLabel"; "required": false; "isSignal": true; }; "stepperAriaLabelledby": { "alias": "stepperAriaLabelledby"; "required": false; "isSignal": true; }; "animationsEnabled": { "alias": "animationsEnabled"; "required": false; "isSignal": true; }; "animationDuration": { "alias": "animationDuration"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Button that moves to the next step in a stepper workflow. */
+declare class HlmStepperNext extends CdkStepperNext {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepperNext, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepperNext, "button[hlmStepperNext]", never, {}, {}, never, never, true, never>;
+}
+
+/** Button that moves to the previous step in a stepper workflow. */
+declare class HlmStepperPrevious extends CdkStepperPrevious {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepperPrevious, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HlmStepperPrevious, "button[hlmStepperPrevious]", never, {}, {}, never, never, true, never>;
+}
+
+declare const HlmStepperImports: readonly [typeof HlmStepper, typeof HlmStep, typeof HlmStepHeader, typeof HlmStepperNext, typeof HlmStepperPrevious, typeof HlmStepContent, typeof HlmStepLabel];
+declare class HlmStepperModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HlmStepperModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<HlmStepperModule, never, [typeof HlmStepper, typeof HlmStep, typeof HlmStepHeader, typeof HlmStepperNext, typeof HlmStepperPrevious, typeof HlmStepContent, typeof HlmStepLabel], [typeof HlmStepper, typeof HlmStep, typeof HlmStepHeader, typeof HlmStepperNext, typeof HlmStepperPrevious, typeof HlmStepContent, typeof HlmStepLabel]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<HlmStepperModule>;
+}
+
+export { HlmStep, HlmStepContent, HlmStepHeader, HlmStepLabel, HlmStepper, HlmStepperImports, HlmStepperModule, HlmStepperNext, HlmStepperPrevious, injectHlmStepperConfig, provideHlmStepperConfig };
+export type { HlmStepperConfig, HlmStepperHeaderPosition, HlmStepperIndicatorMode, HlmStepperLabelPosition };