@shival99/z-ui 2.6.8 → 2.6.9

package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs

@@ -0,0 +1,80 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { SkeletonComponent } from 'boneyard-js/angular';
+
+class ZSkeletonAutoComponent {
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zName = input('z-skeleton-auto', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zName" }] : /* istanbul ignore next */ []));
+    zColor = input('#e0e0e0', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zColor" }] : /* istanbul ignore next */ []));
+    zDarkColor = input('#374151', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDarkColor" }] : /* istanbul ignore next */ []));
+    zAnimate = input('shimmer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAnimate" }] : /* istanbul ignore next */ []));
+    zWavePreset = input('legacy-strong', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zWavePreset" }] : /* istanbul ignore next */ []));
+    zWaveDuration = input(1.5, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zWaveDuration" }] : /* istanbul ignore next */ []));
+    zInitialBones = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zInitialBones" }] : /* istanbul ignore next */ []));
+    zStagger = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zStagger" }] : /* istanbul ignore next */ []));
+    zTransition = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTransition" }] : /* istanbul ignore next */ []));
+    zBoneClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zBoneClass" }] : /* istanbul ignore next */ []));
+    zFallbackRows = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFallbackRows" }] : /* istanbul ignore next */ []));
+    zFallbackGap = input(8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFallbackGap" }] : /* istanbul ignore next */ []));
+    zFallbackRowHeight = input('12px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFallbackRowHeight" }] : /* istanbul ignore next */ []));
+    zFallbackRadius = input('var(--radius-sm)', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zFallbackRadius" }] : /* istanbul ignore next */ []));
+    containerClass = computed(() => zMergeClasses('block w-full', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []));
+    effectiveAnimate = computed(() => {
+        if (this.zWavePreset() === 'legacy-strong') {
+            return false;
+        }
+        return this.zAnimate();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveAnimate" }] : /* istanbul ignore next */ []));
+    waveDurationStyle = computed(() => {
+        const seconds = this.zWaveDuration();
+        if (seconds <= 0) {
+            return '1.5s';
+        }
+        return `${seconds}s`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "waveDurationStyle" }] : /* istanbul ignore next */ []));
+    resolvedBoneClass = computed(() => {
+        const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';
+        const merged = zMergeClasses(presetClass, this.zBoneClass());
+        if (!merged) {
+            return undefined;
+        }
+        return merged;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedBoneClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSkeletonAutoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.6", type: ZSkeletonAutoComponent, isStandalone: true, selector: "z-skeleton-auto", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zName: { classPropertyName: "zName", publicName: "zName", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zDarkColor: { classPropertyName: "zDarkColor", publicName: "zDarkColor", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zWavePreset: { classPropertyName: "zWavePreset", publicName: "zWavePreset", isSignal: true, isRequired: false, transformFunction: null }, zWaveDuration: { classPropertyName: "zWaveDuration", publicName: "zWaveDuration", isSignal: true, isRequired: false, transformFunction: null }, zInitialBones: { classPropertyName: "zInitialBones", publicName: "zInitialBones", isSignal: true, isRequired: false, transformFunction: null }, zStagger: { classPropertyName: "zStagger", publicName: "zStagger", isSignal: true, isRequired: false, transformFunction: null }, zTransition: { classPropertyName: "zTransition", publicName: "zTransition", isSignal: true, isRequired: false, transformFunction: null }, zBoneClass: { classPropertyName: "zBoneClass", publicName: "zBoneClass", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRows: { classPropertyName: "zFallbackRows", publicName: "zFallbackRows", isSignal: true, isRequired: false, transformFunction: null }, zFallbackGap: { classPropertyName: "zFallbackGap", publicName: "zFallbackGap", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRowHeight: { classPropertyName: "zFallbackRowHeight", publicName: "zFallbackRowHeight", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRadius: { classPropertyName: "zFallbackRadius", publicName: "zFallbackRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--z-skeleton-auto-wave-duration": "waveDurationStyle()" } }, ngImport: i0, template: "<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "boneyard-skeleton", inputs: ["loading", "name", "initialBones", "color", "darkColor", "animate", "stagger", "transition", "boneClass", "cssClass", "snapshotConfig", "select"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZSkeletonAutoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-skeleton-auto', imports: [SkeletonComponent, ZSkeletonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',
+                    }, template: "<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zName: [{ type: i0.Input, args: [{ isSignal: true, alias: "zName", required: false }] }], zColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColor", required: false }] }], zDarkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDarkColor", required: false }] }], zAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimate", required: false }] }], zWavePreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWavePreset", required: false }] }], zWaveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWaveDuration", required: false }] }], zInitialBones: [{ type: i0.Input, args: [{ isSignal: true, alias: "zInitialBones", required: false }] }], zStagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStagger", required: false }] }], zTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTransition", required: false }] }], zBoneClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBoneClass", required: false }] }], zFallbackRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRows", required: false }] }], zFallbackGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackGap", required: false }] }], zFallbackRowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRowHeight", required: false }] }], zFallbackRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRadius", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZSkeletonAutoComponent };
+//# sourceMappingURL=shival99-z-ui-components-z-skeleton-auto.mjs.map

package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-skeleton-auto.mjs","sources":["../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.ts","../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.html","../../../../libs/core-ui/components/z-skeleton-auto/shival99-z-ui-components-z-skeleton-auto.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport { SkeletonComponent as BoneyardSkeletonComponent } from 'boneyard-js/angular';\nimport type { ClassValue } from 'clsx';\nimport type { ZSkeletonAutoAnimate, ZSkeletonAutoBones } from './z-skeleton-auto.types';\n\n@Component({\n  selector: 'z-skeleton-auto',\n  imports: [BoneyardSkeletonComponent, ZSkeletonComponent],\n  standalone: true,\n  templateUrl: './z-skeleton-auto.component.html',\n  styleUrl: './z-skeleton-auto.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',\n  },\n})\nexport class ZSkeletonAutoComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zLoading = input(false, { transform: zTransform });\n  public readonly zName = input<string>('z-skeleton-auto');\n\n  public readonly zColor = input<string | undefined>('#e0e0e0');\n  public readonly zDarkColor = input<string | undefined>('#374151');\n  public readonly zAnimate = input<ZSkeletonAutoAnimate>('shimmer');\n  public readonly zWavePreset = input<'boneyard' | 'legacy-strong'>('legacy-strong');\n  public readonly zWaveDuration = input<number>(1.5);\n  public readonly zInitialBones = input<ZSkeletonAutoBones | undefined>(undefined);\n  public readonly zStagger = input<number | boolean>(false);\n  public readonly zTransition = input<number | boolean>(false);\n  public readonly zBoneClass = input<string>('');\n\n  public readonly zFallbackRows = input<number>(3);\n  public readonly zFallbackGap = input<number>(8);\n  public readonly zFallbackRowHeight = input<string>('12px');\n  public readonly zFallbackRadius = input<string>('var(--radius-sm)');\n\n  protected readonly containerClass = computed(() => zMergeClasses('block w-full', this.class()));\n  protected readonly effectiveAnimate = computed<ZSkeletonAutoAnimate>(() => {\n    if (this.zWavePreset() === 'legacy-strong') {\n      return false;\n    }\n\n    return this.zAnimate();\n  });\n\n  protected readonly waveDurationStyle = computed(() => {\n    const seconds = this.zWaveDuration();\n    if (seconds <= 0) {\n      return '1.5s';\n    }\n\n    return `${seconds}s`;\n  });\n\n  protected readonly resolvedBoneClass = computed(() => {\n    const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';\n    const merged = zMergeClasses(presetClass, this.zBoneClass());\n    if (!merged) {\n      return undefined;\n    }\n\n    return merged;\n  });\n}\n","<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["BoneyardSkeletonComponent"],"mappings":"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"}

package/fesm2022/shival99-z-ui-components-z-steps.mjs

@@ -0,0 +1,420 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DestroyRef, output, input, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { cva } from 'class-variance-authority';
+
+const zStepsContainerVariants = cva(['relative list-none m-0 p-0'], {
+    variants: {
+        orientation: {
+            vertical: 'text-foreground',
+            horizontal: 'flex items-center w-full',
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+    },
+});
+const zStepsItemVariants = cva(['relative flex items-start'], {
+    variants: {
+        orientation: {
+            vertical: 'last:mb-0',
+            horizontal: 'flex-1 last:flex-none',
+        },
+        size: {
+            sm: 'mb-6 ps-10 min-h-6',
+            default: 'mb-8 ps-12 min-h-8',
+            lg: 'mb-10 ps-14 min-h-10',
+        },
+    },
+    compoundVariants: [{ orientation: 'horizontal', class: 'mb-0 ps-0 min-h-0' }],
+    defaultVariants: {
+        orientation: 'vertical',
+        size: 'default',
+    },
+});
+const zStepsIconVariants = cva([
+    'absolute start-0 z-10 flex items-center justify-center rounded-full border shadow-sm ring-[3px] ring-background transform-gpu transition-transform duration-200 ease-out hover:scale-105',
+], {
+    variants: {
+        size: {
+            sm: 'w-8 h-8 text-xs',
+            default: 'w-9 h-9 text-sm',
+            lg: 'w-11 h-11 text-base',
+        },
+        status: {
+            pending: 'bg-background border-input text-muted-foreground ring-muted/70',
+            current: 'bg-primary border-primary text-primary-foreground ring-primary/20',
+            completed: 'bg-primary border-primary text-primary-foreground ring-primary/20',
+            error: 'bg-destructive border-destructive text-destructive-foreground ring-destructive/20',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        status: 'pending',
+    },
+});
+const zStepsLineVariants = cva(['absolute border-s-2 border-input/80'], {
+    variants: {
+        size: {
+            sm: 'start-4 top-4 bottom-0',
+            default: 'start-[18px] top-[1.125rem] bottom-0',
+            lg: 'start-[22px] top-[1.375rem] bottom-0',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+const zStepsConnectorVariants = cva(['transition-colors duration-200'], {
+    variants: {
+        orientation: {
+            vertical: 'hidden',
+            horizontal: 'flex-1 h-1 mx-4 rounded-full',
+        },
+        status: {
+            pending: 'bg-input',
+            current: 'bg-input',
+            completed: 'bg-primary',
+            error: 'bg-destructive/30',
+        },
+    },
+    defaultVariants: {
+        orientation: 'vertical',
+        status: 'pending',
+    },
+});
+const zStepsArrowItemVariants = cva(['z-steps-arrow-item relative flex flex-1 flex-col justify-center transition-all duration-200'], {
+    variants: {
+        size: {
+            sm: 'min-w-[7.5rem] py-2 px-4',
+            default: 'min-w-[9.375rem] py-3 px-5',
+            lg: 'min-w-[11.25rem] py-4 px-6',
+        },
+        status: {
+            pending: 'bg-muted text-muted-foreground',
+            current: 'bg-primary text-primary-foreground z-steps-arrow-active',
+            completed: 'bg-primary text-primary-foreground z-steps-arrow-active',
+            error: 'bg-destructive text-destructive-foreground',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        status: 'pending',
+    },
+});
+const zStepsDotVariants = cva(['rounded-full transition-all duration-200'], {
+    variants: {
+        size: {
+            sm: 'w-2 h-2',
+            default: 'w-2.5 h-2.5',
+            lg: 'w-3 h-3',
+        },
+        status: {
+            pending: 'bg-muted-foreground/30',
+            current: 'bg-primary ring-2 ring-primary/20',
+            completed: 'bg-primary ring-2 ring-primary/20',
+            error: 'bg-destructive ring-2 ring-destructive/20',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+        status: 'pending',
+    },
+});
+const zStepsDotLineVariants = cva(['transition-colors duration-200'], {
+    variants: {
+        orientation: {
+            vertical: 'w-[0.125rem] flex-1 min-h-14 rounded-full',
+            horizontal: 'h-[0.125rem] flex-1 rounded-full',
+        },
+        status: {
+            pending: 'bg-muted-foreground/20',
+            current: 'bg-muted-foreground/20',
+            completed: 'bg-primary',
+            error: 'bg-destructive/30',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+        status: 'pending',
+    },
+});
+
+const RESPONSIVE_BREAKPOINT = 640;
+class ZStepsComponent {
+    _elementRef = inject(ElementRef);
+    _destroyRef = inject(DestroyRef);
+    zOnStepClick = output();
+    zControl = output();
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zSteps = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSteps" }] : /* istanbul ignore next */ []));
+    zCurrent = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zCurrent" }] : /* istanbul ignore next */ []));
+    zOrientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOrientation" }] : /* istanbul ignore next */ []));
+    zType = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zType" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zClickable = input(false, { ...(ngDevMode ? { debugName: "zClickable" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zShowNumber = input(true, { ...(ngDevMode ? { debugName: "zShowNumber" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zResponsive = input(true, { ...(ngDevMode ? { debugName: "zResponsive" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : /* istanbul ignore next */ {}), transform: zTransform });
+    _internalCurrent = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_internalCurrent" }] : /* istanbul ignore next */ []));
+    _stepOverrides = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_stepOverrides" }] : /* istanbul ignore next */ []));
+    _resizeObserver = null;
+    isResponsiveVertical = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isResponsiveVertical" }] : /* istanbul ignore next */ []));
+    currentStep = computed(() => this._internalCurrent() ?? this.zCurrent(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+    mergedSteps = computed(() => {
+        const steps = this.zSteps();
+        const overrides = this._stepOverrides();
+        return steps.map((step, index) => {
+            const override = overrides.get(index);
+            return override ? { ...step, ...override } : step;
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mergedSteps" }] : /* istanbul ignore next */ []));
+    effectiveOrientation = computed(() => {
+        if (this.zResponsive() && this.isResponsiveVertical()) {
+            return 'vertical';
+        }
+        return this.zOrientation();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveOrientation" }] : /* istanbul ignore next */ []));
+    containerClasses = computed(() => zMergeClasses(zStepsContainerVariants({
+        orientation: this.effectiveOrientation(),
+    }), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    getItemClasses = computed(() => zStepsItemVariants({
+        orientation: this.effectiveOrientation(),
+        size: this.zSize(),
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getItemClasses" }] : /* istanbul ignore next */ []));
+    iconClassesMap = computed(() => {
+        const size = this.zSize();
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        const classMap = new Map();
+        steps.forEach((step, index) => {
+            const status = this._getStepStatus(step, index, current);
+            const baseClasses = zStepsIconVariants({ size, status });
+            classMap.set(index, zMergeClasses(baseClasses, step.iconClass));
+        });
+        return classMap;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClassesMap" }] : /* istanbul ignore next */ []));
+    lineClasses = computed(() => zStepsLineVariants({ size: this.zSize() }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lineClasses" }] : /* istanbul ignore next */ []));
+    getConnectorClassesByIndex = computed(() => {
+        const orientation = this.effectiveOrientation();
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        return steps.map((step, index) => {
+            const status = this._getConnectorStatus(step, index, current);
+            return zStepsConnectorVariants({ orientation, status });
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getConnectorClassesByIndex" }] : /* istanbul ignore next */ []));
+    stepStatuses = computed(() => {
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        return steps.map((step, index) => this._getStepStatus(step, index, current));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stepStatuses" }] : /* istanbul ignore next */ []));
+    getArrowClassesByIndex = computed(() => {
+        const size = this.zSize();
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        const total = steps.length;
+        return steps.map((step, index) => {
+            const status = this._getStepStatus(step, index, current);
+            const baseClasses = zStepsArrowItemVariants({ size, status });
+            let positionClass = 'z-steps-arrow-middle';
+            if (index === 0) {
+                positionClass = 'z-steps-arrow-first';
+            }
+            if (index === total - 1) {
+                positionClass = 'z-steps-arrow-last';
+            }
+            return zMergeClasses(baseClasses, positionClass);
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getArrowClassesByIndex" }] : /* istanbul ignore next */ []));
+    getDotClassesByIndex = computed(() => {
+        const size = this.zSize();
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        return steps.map((step, index) => {
+            const status = this._getStepStatus(step, index, current);
+            return zStepsDotVariants({ size, status });
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getDotClassesByIndex" }] : /* istanbul ignore next */ []));
+    getDotLineClassesByIndex = computed(() => {
+        const orientation = this.effectiveOrientation();
+        const steps = this.mergedSteps();
+        const current = this.currentStep();
+        return steps.map((step, index) => {
+            const status = this._getConnectorStatus(step, index, current);
+            return zStepsDotLineVariants({ orientation, status });
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getDotLineClassesByIndex" }] : /* istanbul ignore next */ []));
+    defaultIconSize = computed(() => {
+        const size = this.zSize();
+        if (size === 'sm') {
+            return '16';
+        }
+        if (size === 'lg') {
+            return '24';
+        }
+        return '20';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultIconSize" }] : /* istanbul ignore next */ []));
+    getIconSizeByIndex = computed(() => {
+        const defaultSize = this.defaultIconSize();
+        const steps = this.mergedSteps();
+        return steps.map(step => step.iconSize ?? defaultSize);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "getIconSizeByIndex" }] : /* istanbul ignore next */ []));
+    iconWidth = computed(() => {
+        const size = this.zSize();
+        if (size === 'sm') {
+            return 32;
+        }
+        if (size === 'lg') {
+            return 44;
+        }
+        return 36;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconWidth" }] : /* istanbul ignore next */ []));
+    ngAfterViewInit() {
+        if (this.zResponsive() && this.zOrientation() === 'horizontal') {
+            this._setupResizeObserver();
+        }
+        this._destroyRef.onDestroy(() => {
+            this._resizeObserver?.disconnect();
+        });
+        this.zControl.emit({
+            setActive: (index) => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                if (index >= 0 && index < this.zSteps().length) {
+                    this._internalCurrent.set(index);
+                }
+            },
+            next: () => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                const current = this.currentStep();
+                const total = this.zSteps().length;
+                if (current < total - 1) {
+                    this._internalCurrent.set(current + 1);
+                }
+            },
+            prev: () => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                const current = this.currentStep();
+                if (current > 0) {
+                    this._internalCurrent.set(current - 1);
+                }
+            },
+            reset: () => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                this._internalCurrent.set(0);
+                this._stepOverrides.set(new Map());
+            },
+            setDisabled: (index, disabled) => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                this._updateStepOverride(index, { disabled });
+            },
+            setStatus: (index, status) => {
+                if (this.zDisabled()) {
+                    return;
+                }
+                this._updateStepOverride(index, { status });
+            },
+            getCurrent: () => this.currentStep(),
+            getTotal: () => this.zSteps().length,
+        });
+    }
+    _updateStepOverride(index, override) {
+        const overrides = new Map(this._stepOverrides());
+        const existing = overrides.get(index) || {};
+        overrides.set(index, { ...existing, ...override });
+        this._stepOverrides.set(overrides);
+    }
+    _setupResizeObserver() {
+        const container = this._elementRef.nativeElement;
+        this._resizeObserver = new ResizeObserver(entries => {
+            const width = entries[0]?.contentRect.width || 0;
+            this.isResponsiveVertical.set(width < RESPONSIVE_BREAKPOINT);
+        });
+        this._resizeObserver.observe(container);
+    }
+    _getStepStatus(step, index, current) {
+        if (step.status) {
+            return step.status;
+        }
+        if (index < current) {
+            return 'completed';
+        }
+        if (index === current) {
+            return 'current';
+        }
+        return 'pending';
+    }
+    _getConnectorStatus(step, index, current) {
+        if (step.status === 'error') {
+            return 'error';
+        }
+        if (index < current) {
+            return 'completed';
+        }
+        return 'pending';
+    }
+    onStepClick(index) {
+        if (this.zDisabled()) {
+            return;
+        }
+        const step = this.zSteps()[index];
+        if (step.disabled) {
+            return;
+        }
+        if (!this.zClickable()) {
+            return;
+        }
+        this.zOnStepClick.emit(index);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZStepsComponent, isStandalone: true, selector: "z-steps", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSteps: { classPropertyName: "zSteps", publicName: "zSteps", isSignal: true, isRequired: true, transformFunction: null }, zCurrent: { classPropertyName: "zCurrent", publicName: "zCurrent", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zClickable: { classPropertyName: "zClickable", publicName: "zClickable", isSignal: true, isRequired: false, transformFunction: null }, zShowNumber: { classPropertyName: "zShowNumber", publicName: "zShowNumber", isSignal: true, isRequired: false, transformFunction: null }, zResponsive: { classPropertyName: "zResponsive", publicName: "zResponsive", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnStepClick: "zOnStepClick", zControl: "zControl" }, host: { classAttribute: "block" }, ngImport: i0, template: "<ol\n  [class]=\"containerClasses()\"\n  [class.rounded-md]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.border]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.border-border/70]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.bg-muted/20]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.p-2]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\">\n  @for (step of mergedSteps(); track $index; let i = $index; let last = $last) {\n    @if (effectiveOrientation() === 'vertical') {\n      @if (zType() === 'dot') {\n        <!-- Vertical Dot Layout -->\n        <li\n          class=\"flex items-start gap-3\"\n          [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n          [class.cursor-not-allowed]=\"step.disabled\"\n          [class.opacity-50]=\"step.disabled\"\n          (click)=\"onStepClick(i)\">\n          <!-- Dot + Line Column -->\n          <div class=\"flex w-10 shrink-0 flex-col items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div\n                class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/30]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n\n          <!-- Content (optional) -->\n          @if (step.title) {\n            <span\n              class=\"pt-0.5 text-sm\"\n              [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n              [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n              [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n              {{ step.title }}\n            </span>\n          }\n        </li>\n      } @else {\n        <!-- Vertical Layout -->\n        <li\n          class=\"flex items-start gap-3\"\n          [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n          [class.cursor-not-allowed]=\"step.disabled\"\n          [class.opacity-50]=\"step.disabled\"\n          (click)=\"onStepClick(i)\">\n          <div class=\"flex w-10 shrink-0 flex-col items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto!\">\n              @switch (stepStatuses()[i]) {\n                @case ('completed') {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else {\n                    <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                }\n                @case ('error') {\n                  <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                }\n                @default {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else if (zShowNumber()) {\n                    <span class=\"font-medium\">{{ i + 1 }}</span>\n                  }\n                }\n              }\n            </span>\n\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div\n                class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/30]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n\n          <!-- Content -->\n          @if (step.title || step.description) {\n            <div class=\"min-w-0 flex-1 pt-1 pb-3\">\n              @if (step.title) {\n                <h3 class=\"leading-tight font-medium\">{{ step.title }}</h3>\n              }\n              @if (step.description) {\n                <p class=\"text-muted-foreground mt-1 text-sm\">{{ step.description }}</p>\n              }\n            </div>\n          }\n        </li>\n      }\n    } @else {\n      <!-- Horizontal Layout -->\n      <li\n        [class]=\"zType() === 'arrow' ? 'flex-1' : 'flex-1 last:flex-none'\"\n        [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n        [class.cursor-not-allowed]=\"step.disabled\"\n        [class.opacity-50]=\"step.disabled\"\n        (click)=\"onStepClick(i)\">\n        @if (zType() === 'arrow') {\n          <!-- Arrow Style -->\n          <div [class]=\"getArrowClassesByIndex()[i]\">\n            <div class=\"flex items-center gap-3.5\">\n              @if (step.icon) {\n                <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" class=\"shrink-0\" />\n              }\n              <div class=\"flex min-w-0 flex-col\">\n                @if (step.title) {\n                  <h3\n                    z-tooltip\n                    [zContent]=\"step.title\"\n                    [zAutoDetect]=\"true\"\n                    zPosition=\"top\"\n                    class=\"truncate text-sm leading-tight font-semibold whitespace-nowrap\">\n                    {{ step.title }}\n                  </h3>\n                }\n                @if (step.description) {\n                  <p\n                    z-tooltip\n                    [zContent]=\"step.description\"\n                    [zAutoDetect]=\"true\"\n                    zPosition=\"bottom\"\n                    class=\"mt-1 truncate text-xs whitespace-nowrap opacity-80\">\n                    {{ step.description }}\n                  </p>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (zType() === 'dot') {\n          <!-- Dot Style: Simple dots with optional labels -->\n          <div class=\"flex items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\"></span>\n\n            <!-- Content (optional) -->\n            @if (step.title) {\n              <span\n                z-tooltip\n                [zContent]=\"step.title\"\n                [zAutoDetect]=\"true\"\n                zPosition=\"top\"\n                class=\"ms-2 max-w-24 truncate text-sm whitespace-nowrap\"\n                [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n                [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n                [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n                {{ step.title }}\n              </span>\n            }\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div\n                class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/25]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n        } @else if (zType() === 'inline') {\n          <!-- Inline: Icon + Content + Line in one row -->\n          <div class=\"flex items-center\">\n            <div class=\"flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2\">\n              <!-- Step Icon -->\n              <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n                @switch (stepStatuses()[i]) {\n                  @case ('completed') {\n                    @if (step.icon) {\n                      <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    } @else {\n                      <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    }\n                  }\n                  @case ('error') {\n                    <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                  @default {\n                    @if (step.icon) {\n                      <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    } @else if (zShowNumber()) {\n                      <span class=\"font-medium\">{{ i + 1 }}</span>\n                    }\n                  }\n                }\n              </span>\n\n              <!-- Content Inline -->\n              @if (step.title || step.description) {\n                <div class=\"min-w-0 flex-1\">\n                  @if (step.title) {\n                    <h3\n                      z-tooltip\n                      [zContent]=\"step.title\"\n                      [zAutoDetect]=\"true\"\n                      zPosition=\"top\"\n                      class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n                      {{ step.title }}\n                    </h3>\n                  }\n                  @if (step.description) {\n                    <p\n                      z-tooltip\n                      [zContent]=\"step.description\"\n                      [zAutoDetect]=\"true\"\n                      zPosition=\"bottom\"\n                      class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n                      {{ step.description }}\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div\n                class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/25]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n        } @else {\n          <!-- Default: Icon + Line row, Content below -->\n          <div class=\"flex items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n              @switch (stepStatuses()[i]) {\n                @case ('completed') {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else {\n                    <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                }\n                @case ('error') {\n                  <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                }\n                @default {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else if (zShowNumber()) {\n                    <span class=\"font-medium\">{{ i + 1 }}</span>\n                  }\n                }\n              }\n            </span>\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div [class]=\"getConnectorClassesByIndex()[i]\"></div>\n            }\n          </div>\n\n          <!-- Content Below -->\n          @if (step.title || step.description) {\n            <div\n              class=\"z-steps-content mt-3 flex flex-col text-center\"\n              [style.width.px]=\"150\"\n              [style.margin-left.px]=\"(iconWidth() - 150) / 2\">\n              @if (step.title) {\n                <h3\n                  z-tooltip\n                  [zContent]=\"step.title\"\n                  [zAutoDetect]=\"true\"\n                  zPosition=\"top\"\n                  class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n                  {{ step.title }}\n                </h3>\n              }\n              @if (step.description) {\n                <p\n                  z-tooltip\n                  [zContent]=\"step.description\"\n                  [zAutoDetect]=\"true\"\n                  zPosition=\"bottom\"\n                  class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n                  {{ step.description }}\n                </p>\n              }\n            </div>\n          }\n        }\n      </li>\n    }\n  }\n</ol>\n", styles: ["z-steps ol li:not(:last-child)>div[class*=border-s]{height:calc(100% + 2rem)}z-steps ol li[class*=mb-6]:not(:last-child)>div[class*=border-s]{height:calc(100% + 1.5rem)}z-steps ol li[class*=mb-10]:not(:last-child)>div[class*=border-s]{height:calc(100% + 2.5rem)}z-steps .z-steps-arrow-item{position:relative;display:flex;flex-direction:column;justify-content:center;transition:all .2s ease-out}z-steps .z-steps-arrow-item:hover{filter:brightness(.92)}z-steps .z-steps-arrow-first{border-radius:var(--radius-md) 0 0 var(--radius-md);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}z-steps .z-steps-arrow-middle{margin-left:-.5rem;padding-left:2rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}z-steps .z-steps-arrow-last{margin-left:-.5rem;padding-left:2rem;border-radius:0 var(--radius-md) var(--radius-md) 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZStepsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-steps', imports: [ZIconComponent, ZTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'block',
+                    }, template: "<ol\n  [class]=\"containerClasses()\"\n  [class.rounded-md]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.border]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.border-border/70]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.bg-muted/20]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n  [class.p-2]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\">\n  @for (step of mergedSteps(); track $index; let i = $index; let last = $last) {\n    @if (effectiveOrientation() === 'vertical') {\n      @if (zType() === 'dot') {\n        <!-- Vertical Dot Layout -->\n        <li\n          class=\"flex items-start gap-3\"\n          [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n          [class.cursor-not-allowed]=\"step.disabled\"\n          [class.opacity-50]=\"step.disabled\"\n          (click)=\"onStepClick(i)\">\n          <!-- Dot + Line Column -->\n          <div class=\"flex w-10 shrink-0 flex-col items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div\n                class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/30]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n\n          <!-- Content (optional) -->\n          @if (step.title) {\n            <span\n              class=\"pt-0.5 text-sm\"\n              [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n              [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n              [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n              {{ step.title }}\n            </span>\n          }\n        </li>\n      } @else {\n        <!-- Vertical Layout -->\n        <li\n          class=\"flex items-start gap-3\"\n          [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n          [class.cursor-not-allowed]=\"step.disabled\"\n          [class.opacity-50]=\"step.disabled\"\n          (click)=\"onStepClick(i)\">\n          <div class=\"flex w-10 shrink-0 flex-col items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto!\">\n              @switch (stepStatuses()[i]) {\n                @case ('completed') {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else {\n                    <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                }\n                @case ('error') {\n                  <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                }\n                @default {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else if (zShowNumber()) {\n                    <span class=\"font-medium\">{{ i + 1 }}</span>\n                  }\n                }\n              }\n            </span>\n\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div\n                class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/30]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n\n          <!-- Content -->\n          @if (step.title || step.description) {\n            <div class=\"min-w-0 flex-1 pt-1 pb-3\">\n              @if (step.title) {\n                <h3 class=\"leading-tight font-medium\">{{ step.title }}</h3>\n              }\n              @if (step.description) {\n                <p class=\"text-muted-foreground mt-1 text-sm\">{{ step.description }}</p>\n              }\n            </div>\n          }\n        </li>\n      }\n    } @else {\n      <!-- Horizontal Layout -->\n      <li\n        [class]=\"zType() === 'arrow' ? 'flex-1' : 'flex-1 last:flex-none'\"\n        [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n        [class.cursor-not-allowed]=\"step.disabled\"\n        [class.opacity-50]=\"step.disabled\"\n        (click)=\"onStepClick(i)\">\n        @if (zType() === 'arrow') {\n          <!-- Arrow Style -->\n          <div [class]=\"getArrowClassesByIndex()[i]\">\n            <div class=\"flex items-center gap-3.5\">\n              @if (step.icon) {\n                <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" class=\"shrink-0\" />\n              }\n              <div class=\"flex min-w-0 flex-col\">\n                @if (step.title) {\n                  <h3\n                    z-tooltip\n                    [zContent]=\"step.title\"\n                    [zAutoDetect]=\"true\"\n                    zPosition=\"top\"\n                    class=\"truncate text-sm leading-tight font-semibold whitespace-nowrap\">\n                    {{ step.title }}\n                  </h3>\n                }\n                @if (step.description) {\n                  <p\n                    z-tooltip\n                    [zContent]=\"step.description\"\n                    [zAutoDetect]=\"true\"\n                    zPosition=\"bottom\"\n                    class=\"mt-1 truncate text-xs whitespace-nowrap opacity-80\">\n                    {{ step.description }}\n                  </p>\n                }\n              </div>\n            </div>\n          </div>\n        } @else if (zType() === 'dot') {\n          <!-- Dot Style: Simple dots with optional labels -->\n          <div class=\"flex items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\"></span>\n\n            <!-- Content (optional) -->\n            @if (step.title) {\n              <span\n                z-tooltip\n                [zContent]=\"step.title\"\n                [zAutoDetect]=\"true\"\n                zPosition=\"top\"\n                class=\"ms-2 max-w-24 truncate text-sm whitespace-nowrap\"\n                [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n                [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n                [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n                {{ step.title }}\n              </span>\n            }\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div\n                class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/25]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n        } @else if (zType() === 'inline') {\n          <!-- Inline: Icon + Content + Line in one row -->\n          <div class=\"flex items-center\">\n            <div class=\"flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2\">\n              <!-- Step Icon -->\n              <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n                @switch (stepStatuses()[i]) {\n                  @case ('completed') {\n                    @if (step.icon) {\n                      <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    } @else {\n                      <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    }\n                  }\n                  @case ('error') {\n                    <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                  @default {\n                    @if (step.icon) {\n                      <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                    } @else if (zShowNumber()) {\n                      <span class=\"font-medium\">{{ i + 1 }}</span>\n                    }\n                  }\n                }\n              </span>\n\n              <!-- Content Inline -->\n              @if (step.title || step.description) {\n                <div class=\"min-w-0 flex-1\">\n                  @if (step.title) {\n                    <h3\n                      z-tooltip\n                      [zContent]=\"step.title\"\n                      [zAutoDetect]=\"true\"\n                      zPosition=\"top\"\n                      class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n                      {{ step.title }}\n                    </h3>\n                  }\n                  @if (step.description) {\n                    <p\n                      z-tooltip\n                      [zContent]=\"step.description\"\n                      [zAutoDetect]=\"true\"\n                      zPosition=\"bottom\"\n                      class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n                      {{ step.description }}\n                    </p>\n                  }\n                </div>\n              }\n            </div>\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div\n                class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n                [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n                [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n                [class.bg-muted-foreground/25]=\"\n                  stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n                \"></div>\n            }\n          </div>\n        } @else {\n          <!-- Default: Icon + Line row, Content below -->\n          <div class=\"flex items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n              @switch (stepStatuses()[i]) {\n                @case ('completed') {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else {\n                    <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  }\n                }\n                @case ('error') {\n                  <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                }\n                @default {\n                  @if (step.icon) {\n                    <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n                  } @else if (zShowNumber()) {\n                    <span class=\"font-medium\">{{ i + 1 }}</span>\n                  }\n                }\n              }\n            </span>\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div [class]=\"getConnectorClassesByIndex()[i]\"></div>\n            }\n          </div>\n\n          <!-- Content Below -->\n          @if (step.title || step.description) {\n            <div\n              class=\"z-steps-content mt-3 flex flex-col text-center\"\n              [style.width.px]=\"150\"\n              [style.margin-left.px]=\"(iconWidth() - 150) / 2\">\n              @if (step.title) {\n                <h3\n                  z-tooltip\n                  [zContent]=\"step.title\"\n                  [zAutoDetect]=\"true\"\n                  zPosition=\"top\"\n                  class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n                  {{ step.title }}\n                </h3>\n              }\n              @if (step.description) {\n                <p\n                  z-tooltip\n                  [zContent]=\"step.description\"\n                  [zAutoDetect]=\"true\"\n                  zPosition=\"bottom\"\n                  class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n                  {{ step.description }}\n                </p>\n              }\n            </div>\n          }\n        }\n      </li>\n    }\n  }\n</ol>\n", styles: ["z-steps ol li:not(:last-child)>div[class*=border-s]{height:calc(100% + 2rem)}z-steps ol li[class*=mb-6]:not(:last-child)>div[class*=border-s]{height:calc(100% + 1.5rem)}z-steps ol li[class*=mb-10]:not(:last-child)>div[class*=border-s]{height:calc(100% + 2.5rem)}z-steps .z-steps-arrow-item{position:relative;display:flex;flex-direction:column;justify-content:center;transition:all .2s ease-out}z-steps .z-steps-arrow-item:hover{filter:brightness(.92)}z-steps .z-steps-arrow-first{border-radius:var(--radius-md) 0 0 var(--radius-md);clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}z-steps .z-steps-arrow-middle{margin-left:-.5rem;padding-left:2rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}z-steps .z-steps-arrow-last{margin-left:-.5rem;padding-left:2rem;border-radius:0 var(--radius-md) var(--radius-md) 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}\n"] }]
+        }], propDecorators: { zOnStepClick: [{ type: i0.Output, args: ["zOnStepClick"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSteps", required: true }] }], zCurrent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCurrent", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClickable", required: false }] }], zShowNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowNumber", required: false }] }], zResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResponsive", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZStepsComponent, zStepsArrowItemVariants, zStepsConnectorVariants, zStepsContainerVariants, zStepsIconVariants, zStepsItemVariants, zStepsLineVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-steps.mjs.map