yukit-web 0.5.1 → 0.6.0

package/fesm2022/yukit-web.mjs

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as i0 from '@angular/core';
-import { input, Directive, inject, ElementRef, NgZone, DestroyRef, forwardRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, runInInjectionContext, DOCUMENT as DOCUMENT$1 } from '@angular/core';
+import { input, Directive, inject, ElementRef, NgZone, DestroyRef, forwardRef, booleanAttribute, signal, computed, model, output, linkedSignal, effect, untracked, ChangeDetectionStrategy, Component, TemplateRef, contentChildren, Injectable, viewChild, contentChild, Injector, afterNextRender, numberAttribute, afterRenderEffect, runInInjectionContext, DOCUMENT as DOCUMENT$1 } from '@angular/core';
 import { classes, hlm } from 'yukit-web/helm/utils';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
@@ -15,7 +15,7 @@ import * as i1 from '@spartan-ng/brain/tooltip';
 import { provideBrnTooltipDefaultOptions, BrnTooltip } from '@spartan-ng/brain/tooltip';
 import { tooltipPositionVariants, DEFAULT_TOOLTIP_CONTENT_CLASSES, DEFAULT_TOOLTIP_SVG_CLASS } from 'yukit-web/helm/tooltip';
 import { NgIcon, provideIcons } from '@ng-icons/core';
-import { lucideX, lucideChevronRight, lucideChevronLeft, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucidePencil, lucideMinus, lucideCheck, lucideCopy, lucideTrash2, lucideSave, lucideArrowLeft, lucideArchiveRestore, lucidePlus, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideEllipsis, lucideStar } from '@ng-icons/lucide';
+import { lucideX, lucideChevronRight, lucideChevronLeft, lucideUpload, lucideSearch, lucideEyeOff, lucideEye, lucideChevronsUpDown, lucideChevronUp, lucideChevronDown, lucidePencil, lucideCheck, lucideMinus, lucideCopy, lucideTrash2, lucideSave, lucideArrowLeft, lucideArchiveRestore, lucidePlus, lucideSettings2, lucideList, lucideLayoutGrid, lucideDownload, lucideEllipsis, lucideStar } from '@ng-icons/lucide';
 import * as i1$1 from 'yukit-web/helm/badge';
 import { HlmBadge } from 'yukit-web/helm/badge';
 import * as i1$2 from 'yukit-web/helm/breadcrumb';
@@ -85,6 +85,7 @@ import * as i1$n from '@spartan-ng/brain/alert-dialog';
 import { BrnAlertDialogTrigger } from '@spartan-ng/brain/alert-dialog';
 import * as i1$p from 'yukit-web/helm/tabs';
 import { HlmTabsImports } from 'yukit-web/helm/tabs';
+import { _IdGenerator } from '@angular/cdk/a11y';
 import * as i1$q from 'yukit-web/helm/attachment';
 import { HlmAttachment, HlmAttachmentGroup, HlmAttachmentMedia, HlmAttachmentContent, HlmAttachmentTitle, HlmAttachmentDescription, HlmAttachmentActions, HlmAttachmentAction, HlmAttachmentTrigger } from 'yukit-web/helm/attachment';
 import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
@@ -5084,6 +5085,268 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                     }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<hlm-tabs\n  [tab]=\"activeTab()\"\n  [orientation]=\"orientation()\"\n  [activationMode]=\"activationMode()\"\n  (tabActivated)=\"onTabActivated($event)\"\n>\n  <hlm-tabs-list [variant]=\"variant()\" [class]=\"_listClass()\">\n    @for (tab of _resolved(); track tab.id) {\n      <button [hlmTabsTrigger]=\"tab.id\" [disabled]=\"tab.disabled ?? false\">\n        @if (tab.template) {\n          <ng-container [ngTemplateOutlet]=\"tab.template\" />\n        } @else {\n          {{ tab.label }}\n        }\n      </button>\n    }\n  </hlm-tabs-list>\n\n  @for (panel of panels(); track panel.tabId()) {\n    <div [hlmTabsContent]=\"panel.tabId()\">\n      <ng-template hlmTabsContentLazy>\n        <ng-container [ngTemplateOutlet]=\"panel.templateRef\" />\n      </ng-template>\n    </div>\n  }\n</hlm-tabs>\n" }]
         }], propDecorators: { _contents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabContentDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwTabPanelDirective), { isSignal: true }] }], activationMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "activationMode", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }, { type: i0.Output, args: ["activeTabChange"] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
 
+/**
+ * Replaces the content of every step's indicator circle (the number, or the check once completed).
+ * The circle itself keeps its shape and state colors.
+ *
+ * Usage:
+ * ```html
+ * <ng-template yuwStepIndicator let-state let-step="step">
+ *   <ng-icon [name]="icons[step.id]" />
+ * </ng-template>
+ * ```
+ */
+class YuwStepIndicatorDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+    }
+    static ngTemplateContextGuard(_dir, _ctx) {
+        return true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepIndicatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.22", type: YuwStepIndicatorDirective, isStandalone: true, selector: "ng-template[yuwStepIndicator]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepIndicatorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwStepIndicator]',
+                }]
+        }] });
+
+/**
+ * Declares the content of a single `<yuw-stepper>` step. Apply it to an `<ng-template>` and pass the
+ * id of the step it belongs to, matching an entry in the `steps` input.
+ *
+ * Inputs:
+ * - `yuwStepPanel`: Required string; id of the step this panel renders for.
+ */
+class YuwStepPanelDirective {
+    constructor() {
+        this.templateRef = inject(TemplateRef);
+        this.stepId = input.required({ ...(ngDevMode ? { debugName: "stepId" } : /* istanbul ignore next */ {}), alias: 'yuwStepPanel' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.22", type: YuwStepPanelDirective, isStandalone: true, selector: "ng-template[yuwStepPanel]", inputs: { stepId: { classPropertyName: "stepId", publicName: "yuwStepPanel", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[yuwStepPanel]',
+                }]
+        }], propDecorators: { stepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "yuwStepPanel", required: true }] }] } });
+
+/**
+ * A step counts as completed when the consumer says so, or, when it says nothing, once it lies behind the active one.
+ * In `linear` mode a step ahead of the active one is reachable only when every step before it is explicitly completed;
+ * a disabled step is never reachable.
+ */
+function resolveSteps(steps, activeIndex, linear) {
+    let gateOpen = true;
+    return steps.map((step, index) => {
+        const completed = step.completed ?? index < activeIndex;
+        const state = index === activeIndex ? 'active' : completed ? 'completed' : 'upcoming';
+        const reachable = !step.disabled && (!linear || index <= activeIndex || gateOpen);
+        gateOpen = gateOpen && step.completed === true;
+        return { step, index, state, reachable, context: { $implicit: state, step, index } };
+    });
+}
+
+/**
+ * Accent classes read `--yuw-accent`. Neutral parts name the raw `--neutrals-*` tokens because `data-yuw-color`
+ * remaps `--border` and `--foreground` to the accent.
+ */
+const yuwStepIndicatorVariants = cva('flex size-8 shrink-0 items-center justify-center rounded-full border text-sm font-medium transition-colors [&_ng-icon]:text-base', {
+    variants: {
+        state: {
+            completed: 'border-(--yuw-accent) bg-(--yuw-accent) text-(--yuw-accent-foreground)',
+            active: 'border-(--yuw-accent) bg-(--yuw-accent) text-(--yuw-accent-foreground) ring-3 ring-(--yuw-accent)/20',
+            upcoming: 'border-(--neutrals-outline) bg-background text-muted-foreground',
+        },
+    },
+});
+const yuwStepTriggerVariants = cva('flex items-center gap-3 rounded-md text-left outline-none transition-colors focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-default', {
+    variants: {
+        state: {
+            completed: 'text-(--neutrals-element-high)',
+            active: 'text-(--neutrals-element-high)',
+            upcoming: 'text-muted-foreground',
+        },
+        disabled: {
+            true: 'opacity-50',
+            false: '',
+        },
+    },
+});
+const yuwStepSeparatorVariants = cva('shrink-0 transition-colors', {
+    variants: {
+        orientation: {
+            horizontal: 'mx-3 h-px min-w-8 flex-1',
+            vertical: 'my-1 ml-4 min-h-6 w-px flex-1',
+        },
+        done: {
+            true: 'bg-(--yuw-accent)',
+            false: 'bg-(--neutrals-outline)',
+        },
+    },
+});
+const yuwStepperLayoutVariants = cva('flex min-w-0 gap-6', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-col',
+            vertical: 'flex-row',
+        },
+    },
+});
+const yuwStepListVariants = cva('flex', {
+    variants: {
+        orientation: {
+            horizontal: 'relative flex-row items-center overflow-x-auto p-1 scroll-fade-x [scrollbar-width:none] [&::-webkit-scrollbar]:hidden overscroll-none',
+            vertical: 'flex-col',
+        },
+    },
+});
+const yuwStepVariants = cva('flex', {
+    variants: {
+        orientation: {
+            horizontal: 'flex-1 items-center whitespace-nowrap last:flex-none',
+            vertical: 'flex-col',
+        },
+    },
+});
+
+const TOOLTIP_POSITION = {
+    horizontal: 'top',
+    vertical: 'right',
+};
+/**
+ * Multi-step flow: a header of numbered steps and the panel of the active one.
+ *
+ * Steps come from the `steps` input; each panel is an `<ng-template yuwStepPanel="<id>">` whose id matches a step.
+ * A horizontal header that does not fit scrolls sideways (touch, trackpad, mouse wheel or drag), its edges fading out.
+ * Only the active panel is rendered, so state that must survive a step change belongs to the parent (a form group).
+ * Navigation buttons are the consumer's: grab the stepper with a template reference and call `next()` / `previous()`,
+ * disabling them with `hasNext()` / `hasPrevious()`.
+ *
+ * Inputs / Models:
+ * - `steps`: The step definitions (`YuwStepItemDto[]`), in order.
+ * - `activeStep`: Two-way id of the current step.
+ * - `linear`: A step ahead can only be reached once every step before it has `completed: true`. Default is `false`.
+ * - `orientation`: `'horizontal'` header above the panel, or `'vertical'` header beside it. Default is `'horizontal'`.
+ * - `iconOnly`: Hides each step's label and description visually; they stay announced to screen readers and the label
+ *   shows as a tooltip. Pair it with a `yuwStepIndicator` template so the circles carry an icon. Default is `false`.
+ * - `color`: Accent of the active and completed steps (any `YuwColorDto`). Default is `'primary'`.
+ * - `class`: Extra classes merged last onto the root element.
+ *
+ * Content:
+ * - `<ng-template yuwStepIndicator let-state let-step="step" let-index="index">` replaces the number/check inside
+ *   every indicator.
+ *
+ * Usage:
+ * ```html
+ * <yuw-stepper #stepper [steps]="steps" [(activeStep)]="current" linear>
+ *   <ng-template yuwStepPanel="account">…</ng-template>
+ *   <ng-template yuwStepPanel="billing">…</ng-template>
+ * </yuw-stepper>
+ * <yuw-button [disabled]="!stepper.hasNext()" (clicked)="stepper.next()">{{ 'next' | translate }}</yuw-button>
+ * ```
+ */
+class YuwStepperComponent {
+    constructor() {
+        this._idPrefix = inject(_IdGenerator).getId('yuw-stepper-');
+        this._window = inject(DOCUMENT).defaultView;
+        this._list = viewChild.required('list');
+        this.indicator = contentChild(YuwStepIndicatorDirective, ...(ngDevMode ? [{ debugName: "indicator" }] : /* istanbul ignore next */ []));
+        this.panels = contentChildren(YuwStepPanelDirective, ...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+        this.activeStep = model.required(...(ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []));
+        this.color = input('secondary', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        this.iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.linear = input(false, { ...(ngDevMode ? { debugName: "linear" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+        this.orientation = input('horizontal', ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+        this.steps = input.required(...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        this.userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
+        this._activePanel = computed(() => {
+            const active = this.activeStep();
+            return this.panels().find((panel) => panel.stepId() === active)?.templateRef;
+        }, ...(ngDevMode ? [{ debugName: "_activePanel" }] : /* istanbul ignore next */ []));
+        this._activeTriggerId = computed(() => `${this._idPrefix}-${this.activeStep()}`, ...(ngDevMode ? [{ debugName: "_activeTriggerId" }] : /* istanbul ignore next */ []));
+        this.activeIndex = computed(() => this.steps().findIndex((step) => step.id === this.activeStep()), ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+        this._items = computed(() => {
+            const orientation = this.orientation();
+            return resolveSteps(this.steps(), this.activeIndex(), this.linear()).map((view) => ({
+                ...view,
+                triggerId: `${this._idPrefix}-${view.step.id}`,
+                ariaCurrent: view.state === 'active' ? 'step' : null,
+                triggerClass: yuwStepTriggerVariants({ state: view.state, disabled: view.step.disabled ?? false }),
+                indicatorClass: yuwStepIndicatorVariants({ state: view.state }),
+                separatorClass: yuwStepSeparatorVariants({ orientation, done: view.state === 'completed' }),
+            }));
+        }, ...(ngDevMode ? [{ debugName: "_items" }] : /* istanbul ignore next */ []));
+        this._labelClass = computed(() => (this.iconOnly() ? 'sr-only' : 'flex flex-col'), ...(ngDevMode ? [{ debugName: "_labelClass" }] : /* istanbul ignore next */ []));
+        this._listClass = computed(() => yuwStepListVariants({ orientation: this.orientation() }), ...(ngDevMode ? [{ debugName: "_listClass" }] : /* istanbul ignore next */ []));
+        this._rootClass = computed(() => cn(yuwStepperLayoutVariants({ orientation: this.orientation() }), this.userClass()), ...(ngDevMode ? [{ debugName: "_rootClass" }] : /* istanbul ignore next */ []));
+        this._stepClass = computed(() => yuwStepVariants({ orientation: this.orientation() }), ...(ngDevMode ? [{ debugName: "_stepClass" }] : /* istanbul ignore next */ []));
+        this._tooltipPosition = computed(() => TOOLTIP_POSITION[this.orientation()], ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
+        this.hasNext = computed(() => this._neighbour(1) !== undefined, ...(ngDevMode ? [{ debugName: "hasNext" }] : /* istanbul ignore next */ []));
+        this.hasPrevious = computed(() => this._neighbour(-1) !== undefined, ...(ngDevMode ? [{ debugName: "hasPrevious" }] : /* istanbul ignore next */ []));
+        this.isLast = computed(() => this.activeIndex() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLast" }] : /* istanbul ignore next */ []));
+        afterRenderEffect(() => {
+            this.activeStep();
+            this._revealActive();
+        });
+    }
+    next() {
+        this._goTo(this._neighbour(1));
+    }
+    previous() {
+        this._goTo(this._neighbour(-1));
+    }
+    select(id) {
+        this.activeStep.set(id);
+    }
+    _goTo(id) {
+        if (id !== undefined) {
+            this.activeStep.set(id);
+        }
+    }
+    /** Closest reachable step in `direction`, skipping disabled ones. */
+    _neighbour(direction) {
+        const items = this._items();
+        const from = this.activeIndex();
+        for (let index = from + direction; index >= 0 && index < items.length; index += direction) {
+            if (items[index].reachable) {
+                return items[index].step.id;
+            }
+            if (!items[index].step.disabled) {
+                return undefined;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Centers the active step inside a horizontally overflowing header by scrolling the list itself, never
+     * `scrollIntoView`, which would also scroll the page to a stepper below the fold on first render.
+     */
+    _revealActive() {
+        const list = this._list().nativeElement;
+        const active = list.querySelector('[aria-current="step"]');
+        if (!active || list.scrollWidth <= list.clientWidth) {
+            return;
+        }
+        list.scrollTo({
+            left: active.offsetLeft - (list.clientWidth - active.offsetWidth) / 2,
+            behavior: this._window?.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: YuwStepperComponent, isStandalone: true, selector: "yuw-stepper", inputs: { activeStep: { classPropertyName: "activeStep", publicName: "activeStep", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", 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 }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeStep: "activeStepChange" }, host: { classAttribute: "contents" }, providers: [provideIcons({ lucideCheck })], queries: [{ propertyName: "indicator", first: true, predicate: YuwStepIndicatorDirective, descendants: true, isSignal: true }, { propertyName: "panels", predicate: YuwStepPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"_rootClass()\">\n  <ol #list yuwMouseScrollX [class]=\"_listClass()\" [attr.data-yuw-color]=\"color()\">\n    @for (item of _items(); track item.step.id; let last = $last) {\n      <li [class]=\"_stepClass()\">\n        <button\n          type=\"button\"\n          [id]=\"item.triggerId\"\n          [class]=\"item.triggerClass\"\n          [disabled]=\"!item.reachable\"\n          [attr.aria-current]=\"item.ariaCurrent\"\n          [yuwTooltip]=\"item.step.label\"\n          [tooltipDisabled]=\"!iconOnly()\"\n          [position]=\"_tooltipPosition()\"\n          (click)=\"select(item.step.id)\"\n        >\n          <span [class]=\"item.indicatorClass\">\n            @if (indicator(); as custom) {\n              <ng-container [ngTemplateOutlet]=\"custom.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else if (item.state === 'completed') {\n              <ng-icon name=\"lucideCheck\" aria-hidden=\"true\" />\n            } @else {\n              {{ item.index + 1 }}\n            }\n          </span>\n          <span [class]=\"_labelClass()\">\n            <span class=\"text-sm font-medium\">{{ item.step.label }}</span>\n            @if (item.step.description) {\n              <span class=\"text-xs text-muted-foreground\">{{ item.step.description }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"item.separatorClass\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @if (_activePanel(); as panel) {\n    <div role=\"region\" class=\"min-w-0 flex-1\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel\" />\n    </div>\n  }\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: NgIcon, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }, { kind: "directive", type: YuwMouseScrollXDirective, selector: "[yuwMouseScrollX]" }, { kind: "directive", type: YuwTooltipDirective, selector: "[yuwTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: YuwStepperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'yuw-stepper', imports: [NgTemplateOutlet, NgIcon, YuwMouseScrollXDirective, YuwTooltipDirective], providers: [provideIcons({ lucideCheck })], host: {
+                        class: 'contents',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"_rootClass()\">\n  <ol #list yuwMouseScrollX [class]=\"_listClass()\" [attr.data-yuw-color]=\"color()\">\n    @for (item of _items(); track item.step.id; let last = $last) {\n      <li [class]=\"_stepClass()\">\n        <button\n          type=\"button\"\n          [id]=\"item.triggerId\"\n          [class]=\"item.triggerClass\"\n          [disabled]=\"!item.reachable\"\n          [attr.aria-current]=\"item.ariaCurrent\"\n          [yuwTooltip]=\"item.step.label\"\n          [tooltipDisabled]=\"!iconOnly()\"\n          [position]=\"_tooltipPosition()\"\n          (click)=\"select(item.step.id)\"\n        >\n          <span [class]=\"item.indicatorClass\">\n            @if (indicator(); as custom) {\n              <ng-container [ngTemplateOutlet]=\"custom.templateRef\" [ngTemplateOutletContext]=\"item.context\" />\n            } @else if (item.state === 'completed') {\n              <ng-icon name=\"lucideCheck\" aria-hidden=\"true\" />\n            } @else {\n              {{ item.index + 1 }}\n            }\n          </span>\n          <span [class]=\"_labelClass()\">\n            <span class=\"text-sm font-medium\">{{ item.step.label }}</span>\n            @if (item.step.description) {\n              <span class=\"text-xs text-muted-foreground\">{{ item.step.description }}</span>\n            }\n          </span>\n        </button>\n        @if (!last) {\n          <span [class]=\"item.separatorClass\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  @if (_activePanel(); as panel) {\n    <div role=\"region\" class=\"min-w-0 flex-1\" [attr.aria-labelledby]=\"_activeTriggerId()\">\n      <ng-container [ngTemplateOutlet]=\"panel\" />\n    </div>\n  }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { _list: [{ type: i0.ViewChild, args: ['list', { isSignal: true }] }], indicator: [{ type: i0.ContentChild, args: [i0.forwardRef(() => YuwStepIndicatorDirective), { isSignal: true }] }], panels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => YuwStepPanelDirective), { isSignal: true }] }], activeStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeStep", required: true }] }, { type: i0.Output, args: ["activeStepChange"] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], linear: [{ type: i0.Input, args: [{ isSignal: true, alias: "linear", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: true }] }], userClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
 /**
  * Container directive for a single file attachment card.
  *
@@ -8085,5 +8348,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
+export { DATATABLE_ALIGN_CLASS, DATATABLE_LAYOUT_CLASS, DATATABLE_WRAP_CONTENT_CLASS, YUWS_NO_DATA_PLACEHOLDER, YUW_DATATABLE_FEATURES, YUW_DATATABLE_WRAP_MIN_WIDTH, YUW_PASSWORD_REVEAL_STATES, YUW_SIDEBAR_RAIL_ICON_SIZE, YUW_SIDEBAR_RAIL_PADDING, YUW_SIDEBAR_RAIL_WIDTH, YuwAccordion, YuwAccordionContentComponent, YuwAccordionImports, YuwAccordionItem, YuwAccordionTriggerComponent, YuwActionsCellComponent, YuwAlertActionDirective, YuwAlertComponent, YuwAlertDescriptionDirective, YuwAlertDialogComponent, YuwAlertDialogMediaDirective, YuwAlertDialogTriggerDirective, YuwAlertImports, YuwAlertTitleDirective, YuwAttachmentActionDirective, YuwAttachmentActionsDirective, YuwAttachmentContentDirective, YuwAttachmentDescriptionDirective, YuwAttachmentDirective, YuwAttachmentGroupDirective, YuwAttachmentMediaDirective, YuwAttachmentTitleDirective, YuwAttachmentTriggerDirective, YuwAvatarComponent, YuwBadgeComponent, YuwBreadcrumbComponent, YuwBreadcrumbTrailService, YuwButtonComponent, YuwButtonGroupComponent, YuwButtonGroupContentDirective, YuwCaptionDirective, YuwCardActionDirective, YuwCardContentDirective, YuwCardDescriptionDirective, YuwCardDirective, YuwCardFooterDirective, YuwCardHeaderDirective, YuwCardImports, YuwCardTitleDirective, YuwCheckboxComponent, YuwClassDirective, YuwComboboxComponent, YuwComboboxItemDirective, YuwComboboxTriggerButtonDirective, YuwComboboxTriggerDirective, YuwCommandComponent, YuwCommandDialogComponent, YuwContextMenuCheckboxDirective, YuwContextMenuCheckboxIndicatorComponent, YuwContextMenuDirective, YuwContextMenuGroupDirective, YuwContextMenuImports, YuwContextMenuItemDirective, YuwContextMenuLabelDirective, YuwContextMenuRadioDirective, YuwContextMenuRadioIndicatorComponent, YuwContextMenuSeparatorDirective, YuwContextMenuShortcutDirective, YuwContextMenuSubDirective, YuwContextMenuSubIndicatorComponent, YuwContextMenuSubTriggerDirective, YuwContextMenuTriggerDirective, YuwDatatableComponent, YuwDatatablePaginationDirective, YuwDatatableRowSelect, YuwDatepickerComponent, YuwDialogCloseDirective, YuwDialogComponent, YuwDialogFooterDirective, YuwDialogImports, YuwDialogTriggerDirective, YuwEmptyContentDirective, YuwEmptyDescriptionDirective, YuwEmptyDirective, YuwEmptyHeaderDirective, YuwEmptyImports, YuwEmptyMediaDirective, YuwEmptyTitleDirective, YuwFieldBase, YuwInputAddonImports, YuwInputComponent, YuwInputFileComponent, YuwInputOtpComponent, YuwItemActionsDirective, YuwItemContentDirective, YuwItemDescriptionDirective, YuwItemDirective, YuwItemFooterDirective, YuwItemGroupDirective, YuwItemHeaderDirective, YuwItemImports, YuwItemMediaDirective, YuwItemSeparatorDirective, YuwItemTitleDirective, YuwLabel, YuwLeftAddonDirective, YuwMouseScrollXDirective, YuwMouseScrollYDirective, YuwPaginationComponent, YuwPasswordInputComponent, YuwPopoverComponent, YuwPopoverTriggerDirective, YuwRadioGroupComponent, YuwRightAddonDirective, YuwSearchInputComponent, YuwSheetCloseDirective, YuwSheetComponent, YuwSheetFooterDirective, YuwSheetHeaderDirective, YuwSheetImports, YuwSheetTriggerDirective, YuwSidebarComponent, YuwSidebarContentDirective, YuwSidebarContentExtraDirective, YuwSidebarFooterDirective, YuwSidebarFooterExtraDirective, YuwSidebarGroupContentDirective, YuwSidebarGroupDirective, YuwSidebarGroupLabelDirective, YuwSidebarHeaderDirective, YuwSidebarInsetDirective, YuwSidebarMenuAvatarButtonDirective, YuwSidebarMenuBadgeDirective, YuwSidebarMenuButtonDirective, YuwSidebarMenuDirective, YuwSidebarMenuItemDirective, YuwSidebarMenuSubButtonDirective, YuwSidebarMenuSubDirective, YuwSidebarMenuSubItemDirective, YuwSidebarRailDirective, YuwSidebarRailService, YuwSidebarSeparatorDirective, YuwSidebarSubmenuService, YuwSidebarTriggerComponent, YuwSidebarWrapperDirective, YuwSkeletonDirective, YuwSpinnerComponent, YuwStepIndicatorDirective, YuwStepPanelDirective, YuwStepperComponent, YuwSwitchComponent, YuwTBodyDirective, YuwTFootDirective, YuwTHeadDirective, YuwTabContentDirective, YuwTabPanelDirective, YuwTableContainerDirective, YuwTableDirective, YuwTableImports, YuwTabsComponent, YuwTdDirective, YuwTextFieldBase, YuwTextareaComponent, YuwThDirective, YuwToasterComponent, YuwTooltipDirective, YuwTrDirective, YuwValueAccessorBase, YuwsActiveStatusCellComponent, YuwsAdvanceOnEnterDirective, YuwsAvatarNameCellComponent, YuwsCardGridComponent, YuwsCardGridItemComponent, YuwsClampedTextCellComponent, YuwsConfirmDialogComponent, YuwsCopyButtonComponent, YuwsFilterComboboxComponent, YuwsFilterContentDirective, YuwsFlagCellComponent, YuwsFormSheetComponent, YuwsIconActionCellComponent, YuwsImageCellComponent, YuwsImageFieldComponent, YuwsImageUploadComponent, YuwsLinkCellComponent, YuwsListPaginationComponent, YuwsListTableComponent, YuwsListToolbarComponent, YuwsPageHeaderComponent, YuwsPageSizeComponent, YuwsStatusToggleCellComponent, YuwsTitleSkeletonDirective, buildInputOtpGroups, buildYuwActionsColumn, buildYuwsActiveStatusColumn, buildYuwsDateTimeColumn, buildYuwsIconActionColumn, buildYuwsOptionalTextColumn, buildYuwsStatusToggleColumn, cn, createPagedList, createYuwsSheetEditor, datatableCellVariants, datatableContainerVariants, datatableHeadVariants, datatableHeaderCellVariants, datatableRowVariants, getPaginationRange, provideValueAccessor, totalInputOtpLength, yuwCommandDefaultFilter, yuwsInitialsOf, yuwsMediaQuerySignal, yuwsPendingRowClass, yuwsReadFileAsDataUrl };
 //# sourceMappingURL=yukit-web.mjs.map