@nanahoshi/mona-ui 0.1.0

package/fesm2022/nanahoshi-mona-ui-stepper.mjs

@@ -0,0 +1,537 @@
+import * as i0 from '@angular/core';
+import { Directive, inject, ElementRef, computed, input, afterRenderEffect, DestroyRef, signal, contentChild, TemplateRef, model, effect, afterNextRender, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { select } from '@mirei/ts-collections';
+import { fromEvent } from 'rxjs';
+import { ThemeService } from '@nanahoshi/mona-ui/theme';
+import { cva } from 'class-variance-authority';
+
+/**
+ * Marks an ng-template as the custom indicator template for mona-stepper.
+ * The template context provides the step options, index, active state, and current step index.
+ */
+class StepperIndicatorTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperIndicatorTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: StepperIndicatorTemplateDirective, isStandalone: true, selector: "ng-template[monaStepperIndicatorTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperIndicatorTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaStepperIndicatorTemplate]"
+                }]
+        }] });
+
+/**
+ * Marks an ng-template as the custom label template for mona-stepper.
+ * The template context provides the step options, index, active state, and current step index.
+ */
+class StepperLabelTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperLabelTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: StepperLabelTemplateDirective, isStandalone: true, selector: "ng-template[monaStepperLabelTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperLabelTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaStepperLabelTemplate]"
+                }]
+        }] });
+
+/**
+ * Marks an ng-template as the custom step template for mona-stepper.
+ * When provided, this template replaces the entire default step indicator and label for each step.
+ * The template context provides the step options, index, active state, and current step index.
+ */
+class StepperStepTemplateDirective {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperStepTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.6", type: StepperStepTemplateDirective, isStandalone: true, selector: "ng-template[monaStepperStepTemplate]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperStepTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "ng-template[monaStepperStepTemplate]"
+                }]
+        }] });
+
+const stepperBaseVariants = cva(`
+        relative grid outline-none
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "w-full h-auto",
+            vertical: "h-full w-auto"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+const stepperStepListVariants = cva(`
+        absolute flex list-none col-span-full
+        font-medium z-1
+    `, {
+    variants: {
+        orientation: {
+            horizontal: `
+                    flex-row w-full
+                    -translate-y-3
+                `,
+            vertical: `
+                    flex-col h-full w-max
+                    -translate-x-3
+                `
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+const stepperStepListItemVariants = cva(`
+        flex items-center
+        grow-1 shrink-0 basis-auto
+        z-1
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "flex-col gap-2",
+            vertical: "flex-row gap-2 justify-start"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+const stepperStepIndicatorVariants = cva(`
+        w-8 h-8
+        flex items-center justify-center
+        bg-background border border-border
+        text-foreground outline-none
+        transition-colors duration-400 ease-in-out
+    `, {
+    variants: {
+        active: {
+            true: "bg-primary text-primary-foreground",
+            false: ""
+        },
+        focused: {
+            true: "ring-2 ring-primary/40",
+            false: ""
+        },
+        rounded: {
+            small: "rounded-sm",
+            medium: "rounded-md",
+            large: "rounded-lg",
+            full: "rounded-full",
+            none: "rounded-none"
+        }
+    }
+});
+const stepperTrackVariants = cva(`
+        relative grid
+        bg-background border border-border
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "w-full h-2",
+            vertical: "h-full w-2"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+const stepperTrackLineVariants = cva(`
+        absolute bg-primary
+    `, {
+    variants: {
+        orientation: {
+            horizontal: "h-full transition-width duration-300 ease-out",
+            vertical: "w-full transition-height duration-300 ease-out"
+        }
+    },
+    defaultVariants: {
+        orientation: "horizontal"
+    }
+});
+
+const stepperBaseThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperBaseVariants;
+        default:
+            return stepperBaseVariants;
+    }
+};
+const stepperStepListThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperStepListVariants;
+        default:
+            return stepperStepListVariants;
+    }
+};
+const stepperStepListItemThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperStepListItemVariants;
+        default:
+            return stepperStepListItemVariants;
+    }
+};
+const stepperStepIndicatorThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperStepIndicatorVariants;
+        default:
+            return stepperStepIndicatorVariants;
+    }
+};
+const stepperTrackThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperTrackVariants;
+        default:
+            return stepperTrackVariants;
+    }
+};
+const stepperTrackLineThemeVariants = (theme) => {
+    switch (theme) {
+        case "mona":
+            return stepperTrackLineVariants;
+        default:
+            return stepperTrackLineVariants;
+    }
+};
+
+class StepperIndicatorDirective {
+    #wasFocused;
+    #host;
+    #themeService;
+    constructor() {
+        this.#wasFocused = false;
+        this.#host = inject(ElementRef);
+        this.#themeService = inject(ThemeService);
+        this.stepIndicatorClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const active = this.active();
+            const focused = this.focused();
+            const rounded = this.rounded();
+            return stepperStepIndicatorThemeVariants(theme)({ active, focused, rounded });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stepIndicatorClass" }] : /* istanbul ignore next */ []));
+        this.active = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
+        this.focused = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.rounded = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        afterRenderEffect({
+            read: () => {
+                const focused = this.focused();
+                if (focused && !this.#wasFocused) {
+                    this.#host.nativeElement.focus();
+                }
+                this.#wasFocused = focused;
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: StepperIndicatorDirective, isStandalone: true, selector: "span[monaStepperIndicator]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: true, transformFunction: null }, focused: { classPropertyName: "focused", publicName: "focused", isSignal: true, isRequired: true, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "stepIndicatorClass()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "span[monaStepperIndicator]",
+                    host: {
+                        "[class]": "stepIndicatorClass()"
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: true }] }], focused: [{ type: i0.Input, args: [{ isSignal: true, alias: "focused", required: true }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: true }] }] } });
+
+class StepperComponent {
+    #destroyRef;
+    #hostElementRef;
+    #themeService;
+    #trackItemSize;
+    #trackLength;
+    constructor() {
+        this.#destroyRef = inject(DestroyRef);
+        this.#hostElementRef = inject(ElementRef);
+        this.#themeService = inject(ThemeService);
+        this.#trackItemSize = computed(() => {
+            const stepCount = this.viewSteps().length;
+            return stepCount !== 0 ? 100 / stepCount : 0;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#trackItemSize" }] : /* istanbul ignore next */ []));
+        this.#trackLength = computed(() => {
+            const step = this.activeStep();
+            const stepCount = this.viewSteps().length;
+            return step && stepCount > 1 ? `${(100 / (stepCount - 1)) * step.index}%` : "0%";
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "#trackLength" }] : /* istanbul ignore next */ []));
+        this.activeStep = computed(() => {
+            const steps = this.viewSteps();
+            if (steps.length === 0) {
+                return undefined;
+            }
+            const step = this.step();
+            const clampedIndex = Math.min(Math.max(step, 0), steps.length - 1);
+            return steps.elementAt(clampedIndex);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+        this.baseClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return stepperBaseThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "baseClass" }] : /* istanbul ignore next */ []));
+        this.highlightedStep = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightedStep" }] : /* istanbul ignore next */ []));
+        this.hostStyles = computed(() => {
+            const orientation = this.orientation();
+            const stepCount = this.viewSteps().length;
+            return {
+                gridTemplateColumns: orientation === "horizontal" ? `repeat(${stepCount * 2}, 1fr)` : undefined,
+                gridTemplateRows: orientation === "vertical" ? `repeat(${stepCount * 2}, 1fr)` : undefined
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hostStyles" }] : /* istanbul ignore next */ []));
+        this.indicatorTemplate = contentChild(StepperIndicatorTemplateDirective, {
+            read: TemplateRef
+        });
+        this.labelTemplate = contentChild(StepperLabelTemplateDirective, { read: TemplateRef });
+        this.listClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return stepperStepListThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listClass" }] : /* istanbul ignore next */ []));
+        this.listItemClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return stepperStepListItemThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "listItemClass" }] : /* istanbul ignore next */ []));
+        this.progressMax = computed(() => Math.max(this.viewSteps().length - 1, 0), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressMax" }] : /* istanbul ignore next */ []));
+        this.stepTemplate = contentChild(StepperStepTemplateDirective, {
+            read: TemplateRef
+        });
+        this.trackClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return stepperTrackThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackClass" }] : /* istanbul ignore next */ []));
+        this.trackInnerStyles = computed(() => {
+            const orientation = this.orientation();
+            const length = this.#trackLength();
+            return {
+                [orientation === "horizontal" ? "width" : "height"]: length
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackInnerStyles" }] : /* istanbul ignore next */ []));
+        this.trackItemStyles = computed(() => {
+            const orientation = this.orientation();
+            const itemSize = this.#trackItemSize();
+            return {
+                [orientation === "horizontal" ? "maxWidth" : "maxHeight"]: `${itemSize}%`
+            };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackItemStyles" }] : /* istanbul ignore next */ []));
+        this.trackLineClass = computed(() => {
+            const theme = this.#themeService.theme();
+            const orientation = this.orientation();
+            return stepperTrackLineThemeVariants(theme)({ orientation });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackLineClass" }] : /* istanbul ignore next */ []));
+        this.trackStyles = computed(() => {
+            const orientation = this.orientation();
+            const step = this.activeStep();
+            const stepCount = this.viewSteps().length;
+            const gridColumn = orientation === "horizontal" && step != null ? `2/${stepCount * 2}` : undefined;
+            const gridRow = orientation === "vertical" && step != null ? `2/${stepCount * 2}` : undefined;
+            return { gridColumn, gridRow };
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "trackStyles" }] : /* istanbul ignore next */ []));
+        this.viewSteps = computed(() => {
+            const steps = this.steps();
+            return select(steps, (step, index) => ({
+                options: step,
+                index
+            })).toImmutableSet();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewSteps" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the accessible label for the stepper group.
+         * @default "Progress"
+         */
+        this.ariaLabel = input("Progress", { ...(ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {}), alias: "aria-label" });
+        /**
+         * @description Sets the flow of the stepper.
+         * If set to true, the user will only be able to navigate to the previous or the next step.
+         * @default true
+         */
+        this.linear = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the orientation of the stepper.
+         */
+        this.orientation = input("horizontal", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the accessible label for the progress bar element.
+         * @default "Step progress"
+         */
+        this.progressAriaLabel = input("Step progress", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "progressAriaLabel" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the roundness of the stepper steps.
+         */
+        this.rounded = input("full", /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the active step of the stepper.
+         */
+        this.step = model(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        /**
+         * @description Sets the steps of the stepper.
+         */
+        this.steps = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const activeIndex = this.step();
+            const stepCount = this.viewSteps().length;
+            if (stepCount === 0) {
+                return;
+            }
+            const clampedIndex = Math.min(Math.max(activeIndex, 0), stepCount - 1);
+            this.highlightedStep.set(clampedIndex);
+        });
+        afterNextRender({
+            read: () => this.setKeyboardEvents()
+        });
+    }
+    isStepActive(step) {
+        const active = this.activeStep();
+        return active != null && step.index <= active.index;
+    }
+    isStepLocked(step) {
+        if (step.options.disabled) {
+            return true;
+        }
+        if (!this.linear()) {
+            return false;
+        }
+        const active = this.activeStep();
+        if (!active) {
+            return false;
+        }
+        return Math.abs(step.index - active.index) > 1;
+    }
+    onIndicatorFocus(step) {
+        this.setHighlightedStep(step.index);
+    }
+    onStepClick(step) {
+        this.setActiveStep(step);
+    }
+    moveHighlight(offset) {
+        const steps = this.viewSteps();
+        const current = this.highlightedStep();
+        const linear = this.linear();
+        const activeStep = this.activeStep();
+        const stepCount = steps.length;
+        let target = current + offset;
+        const minIndex = linear && activeStep ? Math.max(activeStep.index - 1, 0) : 0;
+        const maxIndex = linear && activeStep ? Math.min(activeStep.index + 1, stepCount - 1) : stepCount - 1;
+        target = Math.min(Math.max(target, minIndex), maxIndex);
+        // Skip over disabled steps in the direction of travel.
+        while (target >= 0 && target < stepCount && steps.elementAt(target)?.options.disabled) {
+            target += offset;
+        }
+        if (target >= 0 && target < stepCount) {
+            this.setHighlightedStep(target);
+        }
+    }
+    setActiveStep(step) {
+        if (step.options.disabled) {
+            return;
+        }
+        const linear = this.linear();
+        const activeStep = this.activeStep();
+        const isPreviousStep = activeStep && activeStep.index - 1 === step.index;
+        const isNextStep = activeStep && activeStep.index + 1 === step.index;
+        if (!linear || (activeStep && (isPreviousStep || isNextStep))) {
+            this.step.set(step.index);
+            this.highlightedStep.set(step.index);
+        }
+    }
+    setHighlightedStep(index) {
+        const stepCount = this.viewSteps().length;
+        if (stepCount === 0) {
+            return;
+        }
+        const clampedIndex = Math.min(Math.max(index, 0), stepCount - 1);
+        this.highlightedStep.set(clampedIndex);
+    }
+    setKeyboardEvents() {
+        fromEvent(this.#hostElementRef.nativeElement, "keydown")
+            .pipe(takeUntilDestroyed(this.#destroyRef))
+            .subscribe(event => {
+            const orientation = this.orientation();
+            const previousKey = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+            const nextKey = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+            if (event.key === previousKey) {
+                event.preventDefault();
+                this.moveHighlight(-1);
+            }
+            else if (event.key === nextKey) {
+                event.preventDefault();
+                this.moveHighlight(1);
+            }
+            else if (event.key === "Home") {
+                event.preventDefault();
+                this.setHighlightedStep(0);
+            }
+            else if (event.key === "End") {
+                event.preventDefault();
+                this.setHighlightedStep(this.viewSteps().length - 1);
+            }
+            else if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                const highlightedStep = this.highlightedStep();
+                const step = this.viewSteps().elementAt(highlightedStep);
+                if (step) {
+                    this.setActiveStep(step);
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: StepperComponent, isStandalone: true, selector: "mona-stepper", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, linear: { classPropertyName: "linear", publicName: "linear", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, progressAriaLabel: { classPropertyName: "progressAriaLabel", publicName: "progressAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { step: "stepChange" }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel()", "class": "baseClass()", "style": "hostStyles()" } }, queries: [{ propertyName: "indicatorTemplate", first: true, predicate: StepperIndicatorTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "labelTemplate", first: true, predicate: StepperLabelTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "stepTemplate", first: true, predicate: StepperStepTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<ol [class]=\"listClass()\">\r\n    @for (step of viewSteps(); track step.index) {\r\n        @let active = isStepActive(step);\r\n        @let locked = isStepLocked(step);\r\n        @let focused = step.index === highlightedStep();\r\n        @let options = step.options;\r\n        @let index = step.index;\r\n        @let currentIndex = activeStep()?.index ?? -1;\r\n        @let disabled = !!options.disabled;\r\n        <li\r\n            [class]=\"listItemClass()\"\r\n            [class.cursor-pointer]=\"!locked\"\r\n            [class.cursor-not-allowed]=\"locked\"\r\n            [style]=\"trackItemStyles()\"\r\n            role=\"presentation\"\r\n            (click)=\"onStepClick(step)\">\r\n            @if (stepTemplate()) {\r\n                <span\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"stepTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                            $implicit: options,\r\n                            index,\r\n                            active,\r\n                            currentIndex,\r\n                            disabled\r\n                        }\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <span\r\n                    monaStepperIndicator\r\n                    [rounded]=\"rounded()\"\r\n                    [active]=\"active\"\r\n                    [focused]=\"focused\"\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    @if (indicatorTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\r\n                            [ngTemplateOutletContext]=\"{\r\n                                $implicit: options,\r\n                                index,\r\n                                active,\r\n                                currentIndex,\r\n                                disabled\r\n                            }\"></ng-container>\r\n                    } @else {\r\n                        {{ step.index + 1 }}\r\n                    }\r\n                </span>\r\n            }\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        $implicit: options,\r\n                        index,\r\n                        active,\r\n                        currentIndex,\r\n                        disabled\r\n                    }\"></ng-container>\r\n            } @else {\r\n                <span aria-hidden=\"true\">{{ options.label }}</span>\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n<div\r\n    [class]=\"trackClass()\"\r\n    [style]=\"trackStyles()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"step()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"progressMax()\"\r\n    [attr.aria-label]=\"progressAriaLabel()\">\r\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: StepperIndicatorDirective, selector: "span[monaStepperIndicator]", inputs: ["active", "focused", "rounded"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: StepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "mona-stepper", imports: [NgTemplateOutlet, StepperIndicatorDirective], host: {
+                        role: "group",
+                        "[attr.aria-label]": "ariaLabel()",
+                        "[class]": "baseClass()",
+                        "[style]": "hostStyles()"
+                    }, template: "<ol [class]=\"listClass()\">\r\n    @for (step of viewSteps(); track step.index) {\r\n        @let active = isStepActive(step);\r\n        @let locked = isStepLocked(step);\r\n        @let focused = step.index === highlightedStep();\r\n        @let options = step.options;\r\n        @let index = step.index;\r\n        @let currentIndex = activeStep()?.index ?? -1;\r\n        @let disabled = !!options.disabled;\r\n        <li\r\n            [class]=\"listItemClass()\"\r\n            [class.cursor-pointer]=\"!locked\"\r\n            [class.cursor-not-allowed]=\"locked\"\r\n            [style]=\"trackItemStyles()\"\r\n            role=\"presentation\"\r\n            (click)=\"onStepClick(step)\">\r\n            @if (stepTemplate()) {\r\n                <span\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    <ng-container\r\n                        [ngTemplateOutlet]=\"stepTemplate()\"\r\n                        [ngTemplateOutletContext]=\"{\r\n                            $implicit: options,\r\n                            index,\r\n                            active,\r\n                            currentIndex,\r\n                            disabled\r\n                        }\"></ng-container>\r\n                </span>\r\n            } @else {\r\n                <span\r\n                    monaStepperIndicator\r\n                    [rounded]=\"rounded()\"\r\n                    [active]=\"active\"\r\n                    [focused]=\"focused\"\r\n                    role=\"button\"\r\n                    [attr.aria-current]=\"step.index === activeStep()?.index ? 'step' : undefined\"\r\n                    [attr.aria-disabled]=\"locked ? true : undefined\"\r\n                    [attr.aria-label]=\"options.label\"\r\n                    [attr.tabindex]=\"focused ? 0 : -1\"\r\n                    (focus)=\"onIndicatorFocus(step)\">\r\n                    @if (indicatorTemplate()) {\r\n                        <ng-container\r\n                            [ngTemplateOutlet]=\"indicatorTemplate()\"\r\n                            [ngTemplateOutletContext]=\"{\r\n                                $implicit: options,\r\n                                index,\r\n                                active,\r\n                                currentIndex,\r\n                                disabled\r\n                            }\"></ng-container>\r\n                    } @else {\r\n                        {{ step.index + 1 }}\r\n                    }\r\n                </span>\r\n            }\r\n            @if (labelTemplate()) {\r\n                <ng-container\r\n                    [ngTemplateOutlet]=\"labelTemplate()\"\r\n                    [ngTemplateOutletContext]=\"{\r\n                        $implicit: options,\r\n                        index,\r\n                        active,\r\n                        currentIndex,\r\n                        disabled\r\n                    }\"></ng-container>\r\n            } @else {\r\n                <span aria-hidden=\"true\">{{ options.label }}</span>\r\n            }\r\n        </li>\r\n    }\r\n</ol>\r\n<div\r\n    [class]=\"trackClass()\"\r\n    [style]=\"trackStyles()\"\r\n    role=\"progressbar\"\r\n    [attr.aria-valuenow]=\"step()\"\r\n    [attr.aria-valuemin]=\"0\"\r\n    [attr.aria-valuemax]=\"progressMax()\"\r\n    [attr.aria-label]=\"progressAriaLabel()\">\r\n    <div [class]=\"trackLineClass()\" [style]=\"trackInnerStyles()\"></div>\r\n</div>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { indicatorTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperIndicatorTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], labelTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperLabelTemplateDirective), { ...{ read: TemplateRef }, isSignal: true }] }], stepTemplate: [{ type: i0.ContentChild, args: [i0.forwardRef(() => StepperStepTemplateDirective), { ...{
+                            read: TemplateRef
+                        }, isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], progressAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressAriaLabel", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }, { type: i0.Output, args: ["stepChange"] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
+
+/*
+ * Public API Surface of @nanahoshi/mona-ui/stepper
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StepperComponent, StepperIndicatorTemplateDirective, StepperLabelTemplateDirective, StepperStepTemplateDirective };
+//# sourceMappingURL=nanahoshi-mona-ui-stepper.mjs.map