@shival99/z-ui 1.8.13 → 1.9.1

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

@@ -86,7 +86,7 @@ class ZSkeletonComponent {
     rowsArray = computed(() => {
         const type = this.zType();
         if (type !== 'bar' && type !== 'text') {
-            return [{ index: 0, height: '0px' }];
+            return [{ index: 0, height: '0rem' }];
         }
         const rowCount = this.zRows() || this._calculatedRows();
         const gapBetweenRows = this.zGap();
@@ -123,7 +123,7 @@ class ZSkeletonComponent {
         this._calculatedRows.set(1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZSkeletonComponent, isStandalone: true, selector: "z-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", 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 }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zGap: { classPropertyName: "zGap", publicName: "zGap", isSignal: true, isRequired: false, transformFunction: null }, zAnimated: { classPropertyName: "zAnimated", publicName: "zAnimated", isSignal: true, isRequired: false, transformFunction: null }, zRadius: { classPropertyName: "zRadius", publicName: "zRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "zWidth()", "style.height": "zHeight()" }, classAttribute: "z-skeleton-host" }, ngImport: i0, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:32px;height:32px}.z-skeleton-circle-default{width:48px;height:48px}.z-skeleton-circle-lg{width:64px;height:64px}.z-skeleton-text{height:16px;border-radius:4px}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZSkeletonComponent, isStandalone: true, selector: "z-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", 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 }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zGap: { classPropertyName: "zGap", publicName: "zGap", isSignal: true, isRequired: false, transformFunction: null }, zAnimated: { classPropertyName: "zAnimated", publicName: "zAnimated", isSignal: true, isRequired: false, transformFunction: null }, zRadius: { classPropertyName: "zRadius", publicName: "zRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "zWidth()", "style.height": "zHeight()" }, classAttribute: "z-skeleton-host" }, ngImport: i0, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:2rem;height:2rem}.z-skeleton-circle-default{width:3rem;height:3rem}.z-skeleton-circle-lg{width:4rem;height:4rem}.z-skeleton-text{height:1rem;border-radius:.25rem}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSkeletonComponent, decorators: [{
             type: Component,
@@ -131,7 +131,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         class: 'z-skeleton-host',
                         '[style.width]': 'zWidth()',
                         '[style.height]': 'zHeight()',
-                    }, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:32px;height:32px}.z-skeleton-circle-default{width:48px;height:48px}.z-skeleton-circle-lg{width:64px;height:64px}.z-skeleton-text{height:16px;border-radius:4px}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"] }]
+                    }, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:2rem;height:2rem}.z-skeleton-circle-default{width:3rem;height:3rem}.z-skeleton-circle-lg{width:4rem;height:4rem}.z-skeleton-text{height:1rem;border-radius:.25rem}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGap", required: false }] }], zAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimated", required: false }] }], zRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRadius", required: false }] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-skeleton.mjs","sources":["../../../../libs/core-ui/components/z-skeleton/z-skeleton.variants.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.html","../../../../libs/core-ui/components/z-skeleton/shival99-z-ui-components-z-skeleton.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSkeletonVariants = cva('z-skeleton', {\n  variants: {\n    type: {\n      bar: 'z-skeleton-bar',\n      circle: 'z-skeleton-circle',\n      text: 'z-skeleton-text',\n    },\n    size: {\n      sm: '',\n      default: '',\n      lg: '',\n    },\n    animated: {\n      true: 'z-skeleton-animated',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      type: 'circle',\n      size: 'sm',\n      class: 'z-skeleton-circle-sm',\n    },\n    {\n      type: 'circle',\n      size: 'default',\n      class: 'z-skeleton-circle-default',\n    },\n    {\n      type: 'circle',\n      size: 'lg',\n      class: 'z-skeleton-circle-lg',\n    },\n  ],\n  defaultVariants: {\n    type: 'bar',\n    size: 'default',\n    animated: true,\n  },\n});\n\nexport type ZSkeletonVariants = VariantProps<typeof zSkeletonVariants>;\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  signal,\n} from '@angular/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSkeletonRowItem, ZSkeletonSize, ZSkeletonType } from './z-skeleton.types';\nimport { zSkeletonVariants } from './z-skeleton.variants';\n\n@Component({\n  selector: 'z-skeleton',\n  standalone: true,\n  templateUrl: './z-skeleton.component.html',\n  styleUrl: './z-skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'z-skeleton-host',\n    '[style.width]': 'zWidth()',\n    '[style.height]': 'zHeight()',\n  },\n})\nexport class ZSkeletonComponent implements AfterViewInit, OnDestroy {\n  private readonly _elementRef = inject(ElementRef);\n\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZSkeletonType>('bar');\n  public readonly zSize = input<ZSkeletonSize>('default');\n  public readonly zWidth = input<string>('100%');\n  public readonly zHeight = input<string | undefined>(undefined);\n  public readonly zRows = input<number>(1);\n  public readonly zGap = input<number>(8);\n  public readonly zAnimated = input<boolean>(true);\n  public readonly zRadius = input<string>('4px');\n\n  private readonly _calculatedRows = signal<number>(1);\n\n  private _parentElement: HTMLElement | null = null;\n  private _originalOverflow = '';\n\n  ngAfterViewInit(): void {\n    if (this.zType() === 'bar') {\n      this._calculateBarRows();\n    }\n    this._setParentOverflowHidden();\n  }\n\n  ngOnDestroy(): void {\n    this._restoreParentOverflow();\n  }\n\n  protected readonly containerClass = computed(() => zMergeClasses(this.class()));\n  protected readonly skeletonClasses = computed(() =>\n    zSkeletonVariants({\n      type: this.zType(),\n      size: this.zSize(),\n      animated: this.zAnimated(),\n    })\n  );\n\n  protected readonly circleStyles = computed(() => {\n    if (this.zHeight() || this.zWidth() !== '100%') {\n      return {\n        width: this.zWidth(),\n        height: this.zHeight() || this.zWidth(),\n      };\n    }\n    return {};\n  });\n\n  protected readonly shouldShowMultipleRows = computed(\n    () => (this.zType() === 'bar' || this.zType() === 'text') && this.zRows() > 1\n  );\n\n  protected readonly rowsArray = computed<ZSkeletonRowItem[]>(() => {\n    const type = this.zType();\n    if (type !== 'bar' && type !== 'text') {\n      return [{ index: 0, height: '0px' }];\n    }\n\n    const rowCount = this.zRows() || this._calculatedRows();\n    const gapBetweenRows = this.zGap();\n    const totalGapSpace = (rowCount - 1) * gapBetweenRows;\n    const height = this.zHeight();\n    const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;\n\n    return Array.from({ length: rowCount }, (_, i) => ({\n      index: i,\n      height: rowHeight,\n    }));\n  });\n\n  private _setParentOverflowHidden(): void {\n    this._parentElement = this._elementRef.nativeElement.parentElement;\n    if (this._parentElement) {\n      this._originalOverflow = this._parentElement.style.overflow || '';\n      this._parentElement.style.overflow = 'hidden';\n    }\n  }\n\n  private _restoreParentOverflow(): void {\n    if (this._parentElement) {\n      this._parentElement.style.overflow = this._originalOverflow;\n    }\n  }\n\n  private _calculateBarRows(): void {\n    const { parentElement } = this._elementRef.nativeElement || {};\n    if (!parentElement) {\n      return;\n    }\n\n    const rows = this.zRows();\n    if (rows && rows > 0) {\n      this._calculatedRows.set(rows);\n      return;\n    }\n\n    this._calculatedRows.set(1);\n  }\n}\n","<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shival99-z-ui-components-z-skeleton.mjs","sources":["../../../../libs/core-ui/components/z-skeleton/z-skeleton.variants.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.html","../../../../libs/core-ui/components/z-skeleton/shival99-z-ui-components-z-skeleton.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSkeletonVariants = cva('z-skeleton', {\n  variants: {\n    type: {\n      bar: 'z-skeleton-bar',\n      circle: 'z-skeleton-circle',\n      text: 'z-skeleton-text',\n    },\n    size: {\n      sm: '',\n      default: '',\n      lg: '',\n    },\n    animated: {\n      true: 'z-skeleton-animated',\n      false: '',\n    },\n  },\n  compoundVariants: [\n    {\n      type: 'circle',\n      size: 'sm',\n      class: 'z-skeleton-circle-sm',\n    },\n    {\n      type: 'circle',\n      size: 'default',\n      class: 'z-skeleton-circle-default',\n    },\n    {\n      type: 'circle',\n      size: 'lg',\n      class: 'z-skeleton-circle-lg',\n    },\n  ],\n  defaultVariants: {\n    type: 'bar',\n    size: 'default',\n    animated: true,\n  },\n});\n\nexport type ZSkeletonVariants = VariantProps<typeof zSkeletonVariants>;\n","import {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  signal,\n} from '@angular/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSkeletonRowItem, ZSkeletonSize, ZSkeletonType } from './z-skeleton.types';\nimport { zSkeletonVariants } from './z-skeleton.variants';\n\n@Component({\n  selector: 'z-skeleton',\n  standalone: true,\n  templateUrl: './z-skeleton.component.html',\n  styleUrl: './z-skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'z-skeleton-host',\n    '[style.width]': 'zWidth()',\n    '[style.height]': 'zHeight()',\n  },\n})\nexport class ZSkeletonComponent implements AfterViewInit, OnDestroy {\n  private readonly _elementRef = inject(ElementRef);\n\n  public readonly class = input<ClassValue>('');\n  public readonly zType = input<ZSkeletonType>('bar');\n  public readonly zSize = input<ZSkeletonSize>('default');\n  public readonly zWidth = input<string>('100%');\n  public readonly zHeight = input<string | undefined>(undefined);\n  public readonly zRows = input<number>(1);\n  public readonly zGap = input<number>(8);\n  public readonly zAnimated = input<boolean>(true);\n  public readonly zRadius = input<string>('4px');\n\n  private readonly _calculatedRows = signal<number>(1);\n\n  private _parentElement: HTMLElement | null = null;\n  private _originalOverflow = '';\n\n  ngAfterViewInit(): void {\n    if (this.zType() === 'bar') {\n      this._calculateBarRows();\n    }\n    this._setParentOverflowHidden();\n  }\n\n  ngOnDestroy(): void {\n    this._restoreParentOverflow();\n  }\n\n  protected readonly containerClass = computed(() => zMergeClasses(this.class()));\n  protected readonly skeletonClasses = computed(() =>\n    zSkeletonVariants({\n      type: this.zType(),\n      size: this.zSize(),\n      animated: this.zAnimated(),\n    })\n  );\n\n  protected readonly circleStyles = computed(() => {\n    if (this.zHeight() || this.zWidth() !== '100%') {\n      return {\n        width: this.zWidth(),\n        height: this.zHeight() || this.zWidth(),\n      };\n    }\n    return {};\n  });\n\n  protected readonly shouldShowMultipleRows = computed(\n    () => (this.zType() === 'bar' || this.zType() === 'text') && this.zRows() > 1\n  );\n\n  protected readonly rowsArray = computed<ZSkeletonRowItem[]>(() => {\n    const type = this.zType();\n    if (type !== 'bar' && type !== 'text') {\n      return [{ index: 0, height: '0rem' }];\n    }\n\n    const rowCount = this.zRows() || this._calculatedRows();\n    const gapBetweenRows = this.zGap();\n    const totalGapSpace = (rowCount - 1) * gapBetweenRows;\n    const height = this.zHeight();\n    const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;\n\n    return Array.from({ length: rowCount }, (_, i) => ({\n      index: i,\n      height: rowHeight,\n    }));\n  });\n\n  private _setParentOverflowHidden(): void {\n    this._parentElement = this._elementRef.nativeElement.parentElement;\n    if (this._parentElement) {\n      this._originalOverflow = this._parentElement.style.overflow || '';\n      this._parentElement.style.overflow = 'hidden';\n    }\n  }\n\n  private _restoreParentOverflow(): void {\n    if (this._parentElement) {\n      this._parentElement.style.overflow = this._originalOverflow;\n    }\n  }\n\n  private _calculateBarRows(): void {\n    const { parentElement } = this._elementRef.nativeElement || {};\n    if (!parentElement) {\n      return;\n    }\n\n    const rows = this.zRows();\n    if (rows && rows > 0) {\n      this._calculatedRows.set(rows);\n      return;\n    }\n\n    this._calculatedRows.set(1);\n  }\n}\n","<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n  @if (zType() === 'circle') {\n    <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n  } @else if (zType() === 'bar' || zType() === 'text') {\n    @if (shouldShowMultipleRows()) {\n      @for (row of rowsArray(); track row.index) {\n        <div\n          class=\"z-skeleton-row\"\n          [class]=\"skeletonClasses()\"\n          [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n          [style.height]=\"row.height\"\n          [style.width]=\"zWidth()\"\n          [style.border-radius]=\"zRadius()\"></div>\n      }\n    } @else {\n      <div\n        [class]=\"skeletonClasses()\"\n        [style.width]=\"zWidth()\"\n        [style.height]=\"zHeight() || '100%'\"\n        [style.border-radius]=\"zRadius()\"></div>\n    }\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -35,19 +35,19 @@ const zStepsItemVariants = cva(['relative flex items-start'], {
     },
 });
 const zStepsIconVariants = cva([
-    'absolute start-0 z-10 flex items-center justify-center rounded-full ring-6 ring-background transform-gpu transition-transform duration-200 ease-out hover:scale-110',
+    '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-6 h-6 text-xs',
-            default: 'w-8 h-8 text-sm',
-            lg: 'w-10 h-10 text-base',
+            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 border-input text-muted-foreground ring-muted',
-            current: 'bg-primary text-primary-foreground ring-primary/20',
-            completed: 'bg-primary text-primary-foreground ring-primary/20',
-            error: 'bg-destructive text-destructive-foreground ring-destructive/20',
+            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: {
@@ -55,12 +55,12 @@ const zStepsIconVariants = cva([
         status: 'pending',
     },
 });
-const zStepsLineVariants = cva(['absolute border-s border-input'], {
+const zStepsLineVariants = cva(['absolute border-s-2 border-input/80'], {
     variants: {
         size: {
-            sm: 'start-3 top-3 bottom-0',
-            default: 'start-4 top-4 bottom-0',
-            lg: 'start-5 top-5 bottom-0',
+            sm: 'start-4 top-4 bottom-0',
+            default: 'start-[18px] top-[1.125rem] bottom-0',
+            lg: 'start-[22px] top-[1.375rem] bottom-0',
         },
     },
     defaultVariants: {
@@ -88,9 +88,9 @@ const zStepsConnectorVariants = cva(['transition-colors duration-200'], {
 const zStepsArrowItemVariants = cva(['z-steps-arrow-item relative flex flex-1 flex-col justify-center transition-all duration-200'], {
     variants: {
         size: {
-            sm: 'min-w-[120px] py-2 px-4',
-            default: 'min-w-[150px] py-3 px-5',
-            lg: 'min-w-[180px] py-4 px-6',
+            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',
@@ -113,9 +113,9 @@ const zStepsDotVariants = cva(['rounded-full transition-all duration-200'], {
         },
         status: {
             pending: 'bg-muted-foreground/30',
-            current: 'bg-primary ring-4 ring-primary/20',
-            completed: 'bg-primary ring-4 ring-primary/20',
-            error: 'bg-destructive ring-4 ring-destructive/20',
+            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: {
@@ -126,8 +126,8 @@ const zStepsDotVariants = cva(['rounded-full transition-all duration-200'], {
 const zStepsDotLineVariants = cva(['transition-colors duration-200'], {
     variants: {
         orientation: {
-            vertical: 'w-px flex-1 min-h-14',
-            horizontal: 'h-px flex-1',
+            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',
@@ -184,16 +184,18 @@ class ZStepsComponent {
         orientation: this.effectiveOrientation(),
         size: this.zSize(),
     }), ...(ngDevMode ? [{ debugName: "getItemClasses" }] : []));
-    getIconClassesByStatus = computed(() => {
+    iconClassesMap = computed(() => {
         const size = this.zSize();
         const steps = this.mergedSteps();
         const current = this.currentStep();
-        return steps.map((step, index) => {
+        const classMap = new Map();
+        steps.forEach((step, index) => {
             const status = this._getStepStatus(step, index, current);
             const baseClasses = zStepsIconVariants({ size, status });
-            return zMergeClasses(baseClasses, step.iconClass);
+            classMap.set(index, zMergeClasses(baseClasses, step.iconClass));
         });
-    }, ...(ngDevMode ? [{ debugName: "getIconClassesByStatus" }] : []));
+        return classMap;
+    }, ...(ngDevMode ? [{ debugName: "iconClassesMap" }] : []));
     lineClasses = computed(() => zStepsLineVariants({ size: this.zSize() }), ...(ngDevMode ? [{ debugName: "lineClasses" }] : []));
     getConnectorClassesByIndex = computed(() => {
         const orientation = this.effectiveOrientation();
@@ -263,12 +265,12 @@ class ZStepsComponent {
     iconWidth = computed(() => {
         const size = this.zSize();
         if (size === 'sm') {
-            return 24;
+            return 32;
         }
         if (size === 'lg') {
-            return 40;
+            return 44;
         }
-        return 32;
+        return 36;
     }, ...(ngDevMode ? [{ debugName: "iconWidth" }] : []));
     ngAfterViewInit() {
         if (this.zResponsive() && this.zOrientation() === 'horizontal') {
@@ -377,13 +379,13 @@ class ZStepsComponent {
         this.zOnStepClick.emit(index);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 [class]=\"containerClasses()\">\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 flex-col items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div [class]=\"getDotLineClassesByIndex()[i]\" class=\"my-1.5\"></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]=\"getItemClasses()\"\n          [class.!items-start]=\"!step.description && (step.title || step.icon)\"\n          [class.items-center]=\"!step.description && (step.title || step.icon)\"\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          <!-- Vertical Line -->\n          @if (!last) {\n            <div [class]=\"lineClasses()\"></div>\n          }\n\n          <!-- Step Icon -->\n          <span [class]=\"getIconClassesByStatus()[i]\">\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 -->\n          @if (step.title || step.description) {\n            <div class=\"flex min-w-0 flex-col\" [style.padding-top.px]=\"!step.description ? iconWidth() / 5 : 0\">\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-20 truncate text-sm whitespace-nowrap\"\n                [class.text-foreground]=\"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 [class]=\"getDotLineClassesByIndex()[i]\" class=\"mx-2 min-w-8\"></div>\n            }\n          </div>\n        } @else if (zType() === 'inline') {\n          <!-- Inline: Icon + Content + Line in one row -->\n          <div class=\"flex items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"getIconClassesByStatus()[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=\"ms-3 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=\"max-w-30 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 max-w-30 truncate text-xs whitespace-nowrap\">\n                    {{ step.description }}\n                  </p>\n                }\n              </div>\n            }\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div [class]=\"getConnectorClassesByIndex()[i]\"></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]=\"getIconClassesByStatus()[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:6px 0 0 6px;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:-8px;padding-left:calc(16px + 1rem);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:-8px;padding-left:calc(16px + 1rem);border-radius:0 6px 6px 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", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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:.375rem 0 0 .375rem;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 .375rem .375rem 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", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.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 [class]=\"containerClasses()\">\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 flex-col items-center\">\n            <!-- Dot -->\n            <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n            <!-- Vertical Line -->\n            @if (!last) {\n              <div [class]=\"getDotLineClassesByIndex()[i]\" class=\"my-1.5\"></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]=\"getItemClasses()\"\n          [class.!items-start]=\"!step.description && (step.title || step.icon)\"\n          [class.items-center]=\"!step.description && (step.title || step.icon)\"\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          <!-- Vertical Line -->\n          @if (!last) {\n            <div [class]=\"lineClasses()\"></div>\n          }\n\n          <!-- Step Icon -->\n          <span [class]=\"getIconClassesByStatus()[i]\">\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 -->\n          @if (step.title || step.description) {\n            <div class=\"flex min-w-0 flex-col\" [style.padding-top.px]=\"!step.description ? iconWidth() / 5 : 0\">\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-20 truncate text-sm whitespace-nowrap\"\n                [class.text-foreground]=\"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 [class]=\"getDotLineClassesByIndex()[i]\" class=\"mx-2 min-w-8\"></div>\n            }\n          </div>\n        } @else if (zType() === 'inline') {\n          <!-- Inline: Icon + Content + Line in one row -->\n          <div class=\"flex items-center\">\n            <!-- Step Icon -->\n            <span [class]=\"getIconClassesByStatus()[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=\"ms-3 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=\"max-w-30 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 max-w-30 truncate text-xs whitespace-nowrap\">\n                    {{ step.description }}\n                  </p>\n                }\n              </div>\n            }\n\n            <!-- Horizontal Line -->\n            @if (!last) {\n              <div [class]=\"getConnectorClassesByIndex()[i]\"></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]=\"getIconClassesByStatus()[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:6px 0 0 6px;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:-8px;padding-left:calc(16px + 1rem);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:-8px;padding-left:calc(16px + 1rem);border-radius:0 6px 6px 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}\n"] }]
+                    }, 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:.375rem 0 0 .375rem;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 .375rem .375rem 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 }] }] } });
 
 /**