@shival99/z-ui 2.4.3 → 2.4.4

package/fesm2022/shival99-z-ui-components-z-metric-card.mjs

@@ -53,7 +53,7 @@ const zMetricCardValueVariants = cva('font-bold tracking-normal text-foreground'
         zSize: 'default',
     },
 });
-const zMetricCardTrendVariants = cva('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', {
+const zMetricCardTrendVariants = cva('inline-flex items-center gap-1 rounded-(--radius-pill) px-2 py-0.5 text-xs font-medium', {
     variants: {
         zTrendDirection: {
             up: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
@@ -129,14 +129,14 @@ class ZMetricCardComponent {
         }
         this.zActionClick.emit(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZMetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZMetricCardComponent, isStandalone: true, selector: "z-metric-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zTrend: { classPropertyName: "zTrend", publicName: "zTrend", isSignal: true, isRequired: false, transformFunction: null }, zProgress: { classPropertyName: "zProgress", publicName: "zProgress", isSignal: true, isRequired: false, transformFunction: null }, zAction: { classPropertyName: "zAction", publicName: "zAction", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null }, zDecor: { classPropertyName: "zDecor", publicName: "zDecor", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zActionClick: "zActionClick" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-full\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZMetricCardComponent, isStandalone: true, selector: "z-metric-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zValue: { classPropertyName: "zValue", publicName: "zValue", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zIcon: { classPropertyName: "zIcon", publicName: "zIcon", isSignal: true, isRequired: false, transformFunction: null }, zTrend: { classPropertyName: "zTrend", publicName: "zTrend", isSignal: true, isRequired: false, transformFunction: null }, zProgress: { classPropertyName: "zProgress", publicName: "zProgress", isSignal: true, isRequired: false, transformFunction: null }, zAction: { classPropertyName: "zAction", publicName: "zAction", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zVariant: { classPropertyName: "zVariant", publicName: "zVariant", isSignal: true, isRequired: false, transformFunction: null }, zDecor: { classPropertyName: "zDecor", publicName: "zDecor", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zActionClick: "zActionClick" }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-(--radius-pill)\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded-sm\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZMetricCardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZMetricCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-metric-card', imports: [NgTemplateOutlet, ZIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-full\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\n" }]
+                    }, template: "@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-(--radius-pill)\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded-sm\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\n" }]
         }], propDecorators: { zActionClick: [{ type: i0.Output, args: ["zActionClick"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValue", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIcon", required: false }] }], zTrend: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrend", required: false }] }], zProgress: [{ type: i0.Input, args: [{ isSignal: true, alias: "zProgress", required: false }] }], zAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAction", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVariant", required: false }] }], zDecor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecor", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }] } });
 
 /**

package/fesm2022/shival99-z-ui-components-z-metric-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-metric-card.mjs","sources":["../../../../libs/core-ui/components/z-metric-card/z-metric-card.variants.ts","../../../../libs/core-ui/components/z-metric-card/z-metric-card.component.ts","../../../../libs/core-ui/components/z-metric-card/z-metric-card.component.html","../../../../libs/core-ui/components/z-metric-card/shival99-z-ui-components-z-metric-card.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zMetricCardVariants = cva('relative overflow-hidden rounded-lg transition-colors', {\n  variants: {\n    zSize: {\n      sm: 'p-4',\n      default: 'p-5',\n      lg: 'p-6',\n    },\n    zVariant: {\n      default: 'bg-card text-card-foreground border border-border shadow-sm',\n      bordered: 'bg-background text-foreground border border-border',\n      soft: 'bg-muted/45 text-foreground border border-transparent',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n    zVariant: 'default',\n  },\n});\n\nexport const zMetricCardIconVariants = cva('inline-flex shrink-0 items-center justify-center rounded-md', {\n  variants: {\n    zSize: {\n      sm: 'size-8',\n      default: 'size-9',\n      lg: 'size-10',\n    },\n    zVariant: {\n      default: 'bg-primary/10 text-primary',\n      bordered: 'bg-muted text-muted-foreground',\n      soft: 'bg-background text-primary shadow-xs',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n    zVariant: 'default',\n  },\n});\n\nexport const zMetricCardValueVariants = cva('font-bold tracking-normal text-foreground', {\n  variants: {\n    zSize: {\n      sm: 'text-xl',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const zMetricCardTrendVariants = cva(\n  'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',\n  {\n    variants: {\n      zTrendDirection: {\n        up: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n        down: 'bg-destructive/10 text-destructive',\n        neutral: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      zTrendDirection: 'neutral',\n    },\n  }\n);\n\nexport type ZMetricCardVariants = VariantProps<typeof zMetricCardVariants>;\nexport type ZMetricCardIconVariants = VariantProps<typeof zMetricCardIconVariants>;\nexport type ZMetricCardTrendVariants = VariantProps<typeof zMetricCardTrendVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, output, ViewEncapsulation } from '@angular/core';\nimport { ZIconComponent, type ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type {\n  ZMetricCardAction,\n  ZMetricCardDecor,\n  ZMetricCardSize,\n  ZMetricCardTrend,\n  ZMetricCardTrendDirection,\n  ZMetricCardVariant,\n} from './z-metric-card.types';\nimport {\n  zMetricCardIconVariants,\n  zMetricCardTrendVariants,\n  zMetricCardValueVariants,\n  zMetricCardVariants,\n} from './z-metric-card.variants';\n\n@Component({\n  selector: 'z-metric-card',\n  imports: [NgTemplateOutlet, ZIconComponent],\n  standalone: true,\n  templateUrl: './z-metric-card.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZMetricCardComponent {\n  public readonly zActionClick = output<ZMetricCardAction>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zTitle = input<string>('');\n  public readonly zValue = input<string | number>('');\n  public readonly zDescription = input<string>('');\n  public readonly zIcon = input<ZIcon>();\n  public readonly zTrend = input<ZMetricCardTrend>();\n  public readonly zProgress = input<number>();\n  public readonly zAction = input<ZMetricCardAction>();\n  public readonly zSize = input<ZMetricCardSize>('default');\n  public readonly zVariant = input<ZMetricCardVariant>('default');\n  public readonly zDecor = input<ZMetricCardDecor>('wave');\n  public readonly zLoading = input(false, { transform: zTransform });\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(zMetricCardVariants({ zSize: this.zSize(), zVariant: this.zVariant() }), this.class())\n  );\n\n  protected readonly iconClasses = computed(() =>\n    zMetricCardIconVariants({ zSize: this.zSize(), zVariant: this.zVariant() })\n  );\n\n  protected readonly valueClasses = computed(() => zMetricCardValueVariants({ zSize: this.zSize() }));\n  protected readonly decorClasses = computed(() =>\n    zMergeClasses(\n      'pointer-events-none absolute right-0 top-0 text-primary/10 transition-opacity duration-200',\n      this.zVariant() === 'bordered' ? 'text-muted-foreground/10' : '',\n      this.zVariant() === 'soft' ? 'text-primary/15' : ''\n    )\n  );\n\n  protected readonly trendDirection = computed<ZMetricCardTrendDirection>(() => this.zTrend()?.direction ?? 'neutral');\n  protected readonly trendClasses = computed(() =>\n    zMetricCardTrendVariants({ zTrendDirection: this.trendDirection() })\n  );\n\n  protected readonly trendIcon = computed<ZIcon>(() => {\n    const direction = this.trendDirection();\n    if (direction === 'up') {\n      return 'lucideTrendingUp';\n    }\n\n    if (direction === 'down') {\n      return 'lucideTrendingDown';\n    }\n\n    return 'lucideMinus';\n  });\n\n  protected readonly normalizedProgress = computed(() => {\n    const progress = this.zProgress();\n    if (progress === null || progress === undefined || Number.isNaN(progress)) {\n      return null;\n    }\n\n    return Math.min(100, Math.max(0, progress));\n  });\n\n  protected onActionClick(): void {\n    const action = this.zAction();\n    if (!action) {\n      return;\n    }\n\n    this.zActionClick.emit(action);\n  }\n}\n","@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-full\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;AAEO,MAAM,mBAAmB,GAAG,GAAG,CAAC,uDAAuD,EAAE;AAC9F,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,KAAK;AACT,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,EAAE,EAAE,KAAK;AACV,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,OAAO,EAAE,6DAA6D;AACtE,YAAA,QAAQ,EAAE,oDAAoD;AAC9D,YAAA,IAAI,EAAE,uDAAuD;AAC9D,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,QAAQ,EAAE,SAAS;AACpB,KAAA;AACF,CAAA;AAEM,MAAM,uBAAuB,GAAG,GAAG,CAAC,6DAA6D,EAAE;AACxG,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,QAAQ;AACZ,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,EAAE,EAAE,SAAS;AACd,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,OAAO,EAAE,4BAA4B;AACrC,YAAA,QAAQ,EAAE,gCAAgC;AAC1C,YAAA,IAAI,EAAE,sCAAsC;AAC7C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,QAAQ,EAAE,SAAS;AACpB,KAAA;AACF,CAAA;AAEM,MAAM,wBAAwB,GAAG,GAAG,CAAC,2CAA2C,EAAE;AACvF,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE;AACL,YAAA,EAAE,EAAE,SAAS;AACb,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,EAAE,EAAE,UAAU;AACf,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,KAAK,EAAE,SAAS;AACjB,KAAA;AACF,CAAA;AAEM,MAAM,wBAAwB,GAAG,GAAG,CACzC,6EAA6E,EAC7E;AACE,IAAA,QAAQ,EAAE;AACR,QAAA,eAAe,EAAE;AACf,YAAA,EAAE,EAAE,0DAA0D;AAC9D,YAAA,IAAI,EAAE,oCAAoC;AAC1C,YAAA,OAAO,EAAE,gCAAgC;AAC1C,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,eAAe,EAAE,SAAS;AAC3B,KAAA;AACF,CAAA;;MCnCU,oBAAoB,CAAA;IACf,YAAY,GAAG,MAAM,EAAqB;IAE1C,KAAK,GAAG,KAAK,CAAa,EAAE;8EAAC;IAC7B,MAAM,GAAG,KAAK,CAAS,EAAE;+EAAC;IAC1B,MAAM,GAAG,KAAK,CAAkB,EAAE;+EAAC;IACnC,YAAY,GAAG,KAAK,CAAS,EAAE;qFAAC;AAChC,IAAA,KAAK,GAAG,KAAK;yFAAS;AACtB,IAAA,MAAM,GAAG,KAAK;0FAAoB;AAClC,IAAA,SAAS,GAAG,KAAK;6FAAU;AAC3B,IAAA,OAAO,GAAG,KAAK;2FAAqB;IACpC,KAAK,GAAG,KAAK,CAAkB,SAAS;8EAAC;IACzC,QAAQ,GAAG,KAAK,CAAqB,SAAS;iFAAC;IAC/C,MAAM,GAAG,KAAK,CAAmB,MAAM;+EAAC;IACxC,QAAQ,GAAG,KAAK,CAAC,KAAK,gFAAI,SAAS,EAAE,UAAU,EAAA,CAAG;AAE/C,IAAA,WAAW,GAAG,QAAQ,CAAC,MACxC,aAAa,CAAC,mBAAmB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;oFACrG;IAEkB,WAAW,GAAG,QAAQ,CAAC,MACxC,uBAAuB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;oFAC5E;AAEkB,IAAA,YAAY,GAAG,QAAQ,CAAC,MAAM,wBAAwB,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC;qFAAC;AAChF,IAAA,YAAY,GAAG,QAAQ,CAAC,MACzC,aAAa,CACX,4FAA4F,EAC5F,IAAI,CAAC,QAAQ,EAAE,KAAK,UAAU,GAAG,0BAA0B,GAAG,EAAE,EAChE,IAAI,CAAC,QAAQ,EAAE,KAAK,MAAM,GAAG,iBAAiB,GAAG,EAAE,CACpD;qFACF;AAEkB,IAAA,cAAc,GAAG,QAAQ,CAA4B,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,SAAS,IAAI,SAAS;uFAAC;AACjG,IAAA,YAAY,GAAG,QAAQ,CAAC,MACzC,wBAAwB,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;qFACrE;AAEkB,IAAA,SAAS,GAAG,QAAQ,CAAQ,MAAK;AAClD,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,EAAE;AACvC,QAAA,IAAI,SAAS,KAAK,IAAI,EAAE;AACtB,YAAA,OAAO,kBAAkB;QAC3B;AAEA,QAAA,IAAI,SAAS,KAAK,MAAM,EAAE;AACxB,YAAA,OAAO,oBAAoB;QAC7B;AAEA,QAAA,OAAO,aAAa;IACtB,CAAC;kFAAC;AAEiB,IAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAK;AACpD,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,EAAE;AACjC,QAAA,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;AACzE,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;2FAAC;IAEQ,aAAa,GAAA;AACrB,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE;QAC7B,IAAI,CAAC,MAAM,EAAE;YACX;QACF;AAEA,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IAChC;uGAnEW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,OAAA,EAAA,eAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC/BjC,+wMAmJA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7HY,gBAAgB,oJAAE,cAAc,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,OAAA,EAAA,eAAA,EAAA,UAAA,EAAA,mBAAA,EAAA,OAAA,EAAA,cAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAS/B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAXhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,eAAe,WAChB,CAAC,gBAAgB,EAAE,cAAc,CAAC,EAAA,UAAA,EAC/B,IAAI,EAAA,eAAA,EAEC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,SAAS,EAAE,eAAe;AAC3B,qBAAA,EAAA,QAAA,EAAA,+wMAAA,EAAA;;;AE7BH;;AAEG;;;;"}
+{"version":3,"file":"shival99-z-ui-components-z-metric-card.mjs","sources":["../../../../libs/core-ui/components/z-metric-card/z-metric-card.variants.ts","../../../../libs/core-ui/components/z-metric-card/z-metric-card.component.ts","../../../../libs/core-ui/components/z-metric-card/z-metric-card.component.html","../../../../libs/core-ui/components/z-metric-card/shival99-z-ui-components-z-metric-card.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const zMetricCardVariants = cva('relative overflow-hidden rounded-lg transition-colors', {\n  variants: {\n    zSize: {\n      sm: 'p-4',\n      default: 'p-5',\n      lg: 'p-6',\n    },\n    zVariant: {\n      default: 'bg-card text-card-foreground border border-border shadow-sm',\n      bordered: 'bg-background text-foreground border border-border',\n      soft: 'bg-muted/45 text-foreground border border-transparent',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n    zVariant: 'default',\n  },\n});\n\nexport const zMetricCardIconVariants = cva('inline-flex shrink-0 items-center justify-center rounded-md', {\n  variants: {\n    zSize: {\n      sm: 'size-8',\n      default: 'size-9',\n      lg: 'size-10',\n    },\n    zVariant: {\n      default: 'bg-primary/10 text-primary',\n      bordered: 'bg-muted text-muted-foreground',\n      soft: 'bg-background text-primary shadow-xs',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n    zVariant: 'default',\n  },\n});\n\nexport const zMetricCardValueVariants = cva('font-bold tracking-normal text-foreground', {\n  variants: {\n    zSize: {\n      sm: 'text-xl',\n      default: 'text-2xl',\n      lg: 'text-3xl',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const zMetricCardTrendVariants = cva(\n  'inline-flex items-center gap-1 rounded-(--radius-pill) px-2 py-0.5 text-xs font-medium',\n  {\n    variants: {\n      zTrendDirection: {\n        up: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n        down: 'bg-destructive/10 text-destructive',\n        neutral: 'bg-muted text-muted-foreground',\n      },\n    },\n    defaultVariants: {\n      zTrendDirection: 'neutral',\n    },\n  }\n);\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, output, ViewEncapsulation } from '@angular/core';\nimport { ZIconComponent, type ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type {\n  ZMetricCardAction,\n  ZMetricCardDecor,\n  ZMetricCardSize,\n  ZMetricCardTrend,\n  ZMetricCardTrendDirection,\n  ZMetricCardVariant,\n} from './z-metric-card.types';\nimport {\n  zMetricCardIconVariants,\n  zMetricCardTrendVariants,\n  zMetricCardValueVariants,\n  zMetricCardVariants,\n} from './z-metric-card.variants';\n\n@Component({\n  selector: 'z-metric-card',\n  imports: [NgTemplateOutlet, ZIconComponent],\n  standalone: true,\n  templateUrl: './z-metric-card.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZMetricCardComponent {\n  public readonly zActionClick = output<ZMetricCardAction>();\n\n  public readonly class = input<ClassValue>('');\n  public readonly zTitle = input<string>('');\n  public readonly zValue = input<string | number>('');\n  public readonly zDescription = input<string>('');\n  public readonly zIcon = input<ZIcon>();\n  public readonly zTrend = input<ZMetricCardTrend>();\n  public readonly zProgress = input<number>();\n  public readonly zAction = input<ZMetricCardAction>();\n  public readonly zSize = input<ZMetricCardSize>('default');\n  public readonly zVariant = input<ZMetricCardVariant>('default');\n  public readonly zDecor = input<ZMetricCardDecor>('wave');\n  public readonly zLoading = input(false, { transform: zTransform });\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(zMetricCardVariants({ zSize: this.zSize(), zVariant: this.zVariant() }), this.class())\n  );\n\n  protected readonly iconClasses = computed(() =>\n    zMetricCardIconVariants({ zSize: this.zSize(), zVariant: this.zVariant() })\n  );\n\n  protected readonly valueClasses = computed(() => zMetricCardValueVariants({ zSize: this.zSize() }));\n  protected readonly decorClasses = computed(() =>\n    zMergeClasses(\n      'pointer-events-none absolute right-0 top-0 text-primary/10 transition-opacity duration-200',\n      this.zVariant() === 'bordered' ? 'text-muted-foreground/10' : '',\n      this.zVariant() === 'soft' ? 'text-primary/15' : ''\n    )\n  );\n\n  protected readonly trendDirection = computed<ZMetricCardTrendDirection>(() => this.zTrend()?.direction ?? 'neutral');\n  protected readonly trendClasses = computed(() =>\n    zMetricCardTrendVariants({ zTrendDirection: this.trendDirection() })\n  );\n\n  protected readonly trendIcon = computed<ZIcon>(() => {\n    const direction = this.trendDirection();\n    if (direction === 'up') {\n      return 'lucideTrendingUp';\n    }\n\n    if (direction === 'down') {\n      return 'lucideTrendingDown';\n    }\n\n    return 'lucideMinus';\n  });\n\n  protected readonly normalizedProgress = computed(() => {\n    const progress = this.zProgress();\n    if (progress === null || progress === undefined || Number.isNaN(progress)) {\n      return null;\n    }\n\n    return Math.min(100, Math.max(0, progress));\n  });\n\n  protected onActionClick(): void {\n    const action = this.zAction();\n    if (!action) {\n      return;\n    }\n\n    this.zActionClick.emit(action);\n  }\n}\n","@if (zLoading()) {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n  <div class=\"space-y-4\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"bg-muted h-9 w-9 animate-pulse rounded-md\"></div>\n      <div class=\"bg-muted h-5 w-16 animate-pulse rounded-(--radius-pill)\"></div>\n    </div>\n    <div class=\"space-y-2\">\n      <div class=\"bg-muted h-4 w-24 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-8 w-32 animate-pulse rounded-sm\"></div>\n      <div class=\"bg-muted h-3 w-40 animate-pulse rounded-sm\"></div>\n    </div>\n  </div>\n} @else {\n  @if (zDecor() !== 'none') {\n    <ng-container [ngTemplateOutlet]=\"metricDecor\" />\n  }\n\n  <div class=\"relative z-10 flex items-start justify-between gap-4\">\n    <div class=\"min-w-0 space-y-3\">\n      @if (zIcon()) {\n        <span [class]=\"iconClasses()\">\n          <z-icon [zType]=\"zIcon()\" zSize=\"18\" />\n        </span>\n      }\n\n      <div class=\"min-w-0\">\n        @if (zTitle()) {\n          <p class=\"text-muted-foreground overflow-hidden text-sm font-medium text-ellipsis whitespace-nowrap\">\n            {{ zTitle() }}\n          </p>\n        }\n        <p [class]=\"valueClasses()\">{{ zValue() }}</p>\n        @if (zDescription()) {\n          <p class=\"text-muted-foreground mt-1 overflow-hidden text-sm text-ellipsis whitespace-nowrap\">\n            {{ zDescription() }}\n          </p>\n        }\n      </div>\n    </div>\n\n    <div class=\"flex shrink-0 flex-col items-end gap-2\">\n      @if (zTrend(); as trend) {\n        <span [class]=\"trendClasses()\">\n          <z-icon [zType]=\"trendIcon()\" zSize=\"12\" />\n          <span>{{ trend.value }}</span>\n          @if (trend.label) {\n            <span>{{ trend.label }}</span>\n          }\n        </span>\n      }\n\n      @if (zAction(); as action) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:bg-muted hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors\"\n          [attr.aria-label]=\"action.label\"\n          (click)=\"onActionClick()\">\n          <z-icon [zType]=\"action.icon ?? 'lucideMoreHorizontal'\" zSize=\"16\" />\n        </button>\n      }\n    </div>\n  </div>\n\n  @if (normalizedProgress() !== null) {\n    <div class=\"bg-muted mt-4 h-1.5 overflow-hidden rounded-full\">\n      <div\n        class=\"bg-primary h-full rounded-full transition-[width] duration-300\"\n        [style.width.%]=\"normalizedProgress()\"></div>\n    </div>\n  }\n\n  <ng-content />\n}\n\n<ng-template #metricDecor>\n  @switch (zDecor()) {\n    @case ('bars') {\n      <svg [class]=\"decorClasses()\" width=\"122\" height=\"98\" viewBox=\"0 0 122 98\" fill=\"none\" aria-hidden=\"true\">\n        <rect x=\"54\" y=\"50\" width=\"10\" height=\"34\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"72\" y=\"30\" width=\"10\" height=\"54\" rx=\"5\" fill=\"currentColor\" />\n        <rect x=\"90\" y=\"14\" width=\"10\" height=\"70\" rx=\"5\" fill=\"currentColor\" />\n        <path d=\"M43 84H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('dots') {\n      <svg [class]=\"decorClasses()\" width=\"124\" height=\"96\" viewBox=\"0 0 124 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"66\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"22\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"55\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"77\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"99\" cy=\"44\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"66\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"88\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n        <circle cx=\"110\" cy=\"66\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('grid') {\n      <svg [class]=\"decorClasses()\" width=\"116\" height=\"94\" viewBox=\"0 0 116 94\" fill=\"none\" aria-hidden=\"true\">\n        <path d=\"M18 10H106V74H18V10Z\" stroke=\"currentColor\" stroke-width=\"1\" />\n        <path d=\"M18 26H106M18 42H106M18 58H106M34 10V74M50 10V74M66 10V74M82 10V74M98 10V74\" stroke=\"currentColor\" />\n        <circle cx=\"34\" cy=\"58\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"58\" cy=\"34\" r=\"3\" fill=\"currentColor\" />\n        <circle cx=\"82\" cy=\"46\" r=\"3\" fill=\"currentColor\" />\n      </svg>\n    }\n    @case ('rings') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <circle cx=\"96\" cy=\"28\" r=\"26\" stroke=\"currentColor\" stroke-width=\"8\" />\n        <circle cx=\"96\" cy=\"28\" r=\"12\" stroke=\"currentColor\" stroke-width=\"4\" />\n        <circle cx=\"64\" cy=\"58\" r=\"20\" stroke=\"currentColor\" stroke-width=\"6\" />\n        <path d=\"M42 78C56 64 72 51 91 35\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" />\n      </svg>\n    }\n    @case ('spark') {\n      <svg [class]=\"decorClasses()\" width=\"126\" height=\"96\" viewBox=\"0 0 126 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M35 70L50 53L63 61L77 34L90 42L108 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"7\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\" />\n        <path d=\"M36 82H112\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"6\" fill=\"currentColor\" />\n      </svg>\n    }\n    @default {\n      <svg [class]=\"decorClasses()\" width=\"128\" height=\"96\" viewBox=\"0 0 128 96\" fill=\"none\" aria-hidden=\"true\">\n        <path\n          d=\"M21 70C34 49 47 39 62 42C82 46 85 20 107 18\"\n          stroke=\"currentColor\"\n          stroke-width=\"10\"\n          stroke-linecap=\"round\" />\n        <path\n          d=\"M30 82C45 64 58 56 72 58C91 61 96 41 112 38\"\n          stroke=\"currentColor\"\n          stroke-width=\"5\"\n          stroke-linecap=\"round\" />\n        <circle cx=\"108\" cy=\"18\" r=\"7\" fill=\"currentColor\" />\n        <circle cx=\"112\" cy=\"38\" r=\"4\" fill=\"currentColor\" />\n      </svg>\n    }\n  }\n</ng-template>\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-modal.mjs

@@ -18,10 +18,10 @@ import { Subject, takeUntil, fromEvent, filter } from 'rxjs';
 
 class ZModalContentDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZModalContentDirective, isStandalone: true, selector: "[z-modal-content], [zModalContent]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ZModalContentDirective, isStandalone: true, selector: "[z-modal-content], [zModalContent]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-modal-content], [zModalContent]',
@@ -31,10 +31,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 class ZModalFooterDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZModalFooterDirective, isStandalone: true, selector: "[z-modal-footer], [zModalFooter]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ZModalFooterDirective, isStandalone: true, selector: "[z-modal-footer], [zModalFooter]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalFooterDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalFooterDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-modal-footer], [zModalFooter]',
@@ -44,10 +44,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 class ZModalHeaderDirective {
     templateRef = inject((TemplateRef));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: ZModalHeaderDirective, isStandalone: true, selector: "[z-modal-header], [zModalHeader]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.6", type: ZModalHeaderDirective, isStandalone: true, selector: "[z-modal-header], [zModalHeader]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalHeaderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalHeaderDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[z-modal-header], [zModalHeader]',
@@ -57,7 +57,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const Z_MODAL_DATA = new InjectionToken('Z_MODAL_DATA');
-const Z_MODAL_ANIMATION_DURATION = 200;
+const Z_MODAL_ANIMATION_DURATION = 150;
 const Z_MODAL_CONTENT_REVEAL_DURATION = 240;
 var ZModalTriggerAction;
 (function (ZModalTriggerAction) {
@@ -663,10 +663,10 @@ class ZModalComponent {
             this._backdropSubscription = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZModalComponent, isStandalone: true, selector: "z-modal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zBodyClass: { classPropertyName: "zBodyClass", publicName: "zBodyClass", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zDisableShadow: { classPropertyName: "zDisableShadow", publicName: "zDisableShadow", isSignal: true, isRequired: false, transformFunction: null }, zHeaderBorder: { classPropertyName: "zHeaderBorder", publicName: "zHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, zFooterBorder: { classPropertyName: "zFooterBorder", publicName: "zFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOk: "zOk", zCancel: "zCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZModalHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZModalContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zModal"], ngImport: i0, template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    @if (!effectiveContentLoading()) {\n      @if (!effectiveHideHeader()) {\n        @if (effectiveTitle()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div [class]=\"headerContentClasses()\">\n              <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n                @if (effectiveTitle(); as title) {\n                  @switch (title | zContentType) {\n                    @case ('template') {\n                      <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                    }\n                    @case ('html') {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"title\"\n                        [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                    }\n                    @default {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"$any(title) | translate\">\n                        {{ $any(title) | translate }}\n                      </h4>\n                    }\n                  }\n                }\n              </div>\n              @if (effectiveClosable()) {\n                <button\n                  type=\"button\"\n                  data-testid=\"z-modal-close-header-button\"\n                  z-button\n                  zType=\"subtle\"\n                  zSize=\"xs\"\n                  [zWave]=\"false\"\n                  (click)=\"onCloseClick()\">\n                  <z-icon zType=\"lucideX\" />\n                </button>\n              }\n            </div>\n          </header>\n        } @else if (effectiveClosable()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div class=\"flex justify-end px-4\">\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            </div>\n          </header>\n        }\n      }\n\n      <ng-scrollbar\n        class=\"z-modal-scrollbar flex-1\"\n        #mainContent\n        track=\"vertical\"\n        cdkScrollable\n        (scroll)=\"onContentScroll($event)\">\n        <main [class]=\"serviceBodyClasses()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex h-[12.5rem] flex-col gap-4 px-4 py-4\">\n        <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .96;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .96;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { 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", "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"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: ZContentTypePipe, name: "zContentType" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZModalComponent, isStandalone: true, selector: "z-modal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zBodyClass: { classPropertyName: "zBodyClass", publicName: "zBodyClass", isSignal: true, isRequired: false, transformFunction: null }, zVisible: { classPropertyName: "zVisible", publicName: "zVisible", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zDescription: { classPropertyName: "zDescription", publicName: "zDescription", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zClosable: { classPropertyName: "zClosable", publicName: "zClosable", isSignal: true, isRequired: false, transformFunction: null }, zMaskClosable: { classPropertyName: "zMaskClosable", publicName: "zMaskClosable", isSignal: true, isRequired: false, transformFunction: null }, zDisableShadow: { classPropertyName: "zDisableShadow", publicName: "zDisableShadow", isSignal: true, isRequired: false, transformFunction: null }, zHeaderBorder: { classPropertyName: "zHeaderBorder", publicName: "zHeaderBorder", isSignal: true, isRequired: false, transformFunction: null }, zFooterBorder: { classPropertyName: "zFooterBorder", publicName: "zFooterBorder", isSignal: true, isRequired: false, transformFunction: null }, zHideHeader: { classPropertyName: "zHideHeader", publicName: "zHideHeader", isSignal: true, isRequired: false, transformFunction: null }, zHideFooter: { classPropertyName: "zHideFooter", publicName: "zHideFooter", isSignal: true, isRequired: false, transformFunction: null }, zOkText: { classPropertyName: "zOkText", publicName: "zOkText", isSignal: true, isRequired: false, transformFunction: null }, zCancelText: { classPropertyName: "zCancelText", publicName: "zCancelText", isSignal: true, isRequired: false, transformFunction: null }, zOkDestructive: { classPropertyName: "zOkDestructive", publicName: "zOkDestructive", isSignal: true, isRequired: false, transformFunction: null }, zOkDisabled: { classPropertyName: "zOkDisabled", publicName: "zOkDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zContentLoading: { classPropertyName: "zContentLoading", publicName: "zContentLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zOverlay: { classPropertyName: "zOverlay", publicName: "zOverlay", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOk: "zOk", zCancel: "zCancel", zAfterClose: "zAfterClose", zScrollbar: "zScrollbar", zVisible: "zVisibleChange" }, host: { properties: { "class": "hostClasses()", "style.width": "effectiveWidth()" } }, providers: [TranslatePipe], queries: [{ propertyName: "customHeader", first: true, predicate: ZModalHeaderDirective, descendants: true, isSignal: true }, { propertyName: "customContent", first: true, predicate: ZModalContentDirective, descendants: true, isSignal: true }, { propertyName: "customFooter", first: true, predicate: ZModalFooterDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "contentOutlet", first: true, predicate: ["contentOutlet"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "mainContentRef", first: true, predicate: ["mainContent"], descendants: true, isSignal: true }], exportAs: ["zModal"], ngImport: i0, template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    @if (!effectiveContentLoading()) {\n      @if (!effectiveHideHeader()) {\n        @if (effectiveTitle()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div [class]=\"headerContentClasses()\">\n              <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n                @if (effectiveTitle(); as title) {\n                  @switch (title | zContentType) {\n                    @case ('template') {\n                      <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                    }\n                    @case ('html') {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"title\"\n                        [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                    }\n                    @default {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"$any(title) | translate\">\n                        {{ $any(title) | translate }}\n                      </h4>\n                    }\n                  }\n                }\n              </div>\n              @if (effectiveClosable()) {\n                <button\n                  type=\"button\"\n                  data-testid=\"z-modal-close-header-button\"\n                  z-button\n                  zType=\"subtle\"\n                  zSize=\"xs\"\n                  [zWave]=\"false\"\n                  (click)=\"onCloseClick()\">\n                  <z-icon zType=\"lucideX\" />\n                </button>\n              }\n            </div>\n          </header>\n        } @else if (effectiveClosable()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div class=\"flex justify-end px-4\">\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            </div>\n          </header>\n        }\n      }\n\n      <ng-scrollbar\n        class=\"z-modal-scrollbar flex-1\"\n        #mainContent\n        track=\"vertical\"\n        cdkScrollable\n        (scroll)=\"onContentScroll($event)\">\n        <main [class]=\"serviceBodyClasses()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex h-[12.5rem] flex-col gap-4 px-4 py-4\">\n        <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { 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", "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"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "pipe", type: ZContentTypePipe, name: "zContentType" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-modal', imports: [
                         NgTemplateOutlet,
@@ -682,7 +682,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                     ], standalone: true, providers: [TranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class]': 'hostClasses()',
                         '[style.width]': 'effectiveWidth()',
-                    }, exportAs: 'zModal', template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    @if (!effectiveContentLoading()) {\n      @if (!effectiveHideHeader()) {\n        @if (effectiveTitle()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div [class]=\"headerContentClasses()\">\n              <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n                @if (effectiveTitle(); as title) {\n                  @switch (title | zContentType) {\n                    @case ('template') {\n                      <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                    }\n                    @case ('html') {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"title\"\n                        [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                    }\n                    @default {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"$any(title) | translate\">\n                        {{ $any(title) | translate }}\n                      </h4>\n                    }\n                  }\n                }\n              </div>\n              @if (effectiveClosable()) {\n                <button\n                  type=\"button\"\n                  data-testid=\"z-modal-close-header-button\"\n                  z-button\n                  zType=\"subtle\"\n                  zSize=\"xs\"\n                  [zWave]=\"false\"\n                  (click)=\"onCloseClick()\">\n                  <z-icon zType=\"lucideX\" />\n                </button>\n              }\n            </div>\n          </header>\n        } @else if (effectiveClosable()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div class=\"flex justify-end px-4\">\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            </div>\n          </header>\n        }\n      }\n\n      <ng-scrollbar\n        class=\"z-modal-scrollbar flex-1\"\n        #mainContent\n        track=\"vertical\"\n        cdkScrollable\n        (scroll)=\"onContentScroll($event)\">\n        <main [class]=\"serviceBodyClasses()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex h-[12.5rem] flex-col gap-4 px-4 py-4\">\n        <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .96;transform-origin:center center;animation:z-enter .18s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .96;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .15s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .12s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"] }]
+                    }, exportAs: 'zModal', template: "<!-- Template mode content (rendered in host element, which is moved to overlay) -->\n@if (isTemplateMode() && shouldRenderContent()) {\n  @if (customHeader(); as headerDir) {\n    <header [class.z-modal-header-shadow]=\"shouldShowShadow()\" [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n      <div class=\"flex items-start justify-between px-4\">\n        <ng-container *ngTemplateOutlet=\"headerDir.templateRef\" />\n      </div>\n    </header>\n  } @else if (!effectiveHideHeader()) {\n    @if (effectiveTitle()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div [class]=\"headerContentClasses()\">\n          <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n            @if (effectiveTitle(); as title) {\n              @switch (title | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                }\n                @case ('html') {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"title\"\n                    [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                }\n                @default {\n                  <h4\n                    data-testid=\"z-modal-title\"\n                    class=\"m-0 truncate text-base leading-snug font-semibold\"\n                    z-tooltip\n                    [zContent]=\"$any(title) | translate\">\n                    {{ $any(title) | translate }}\n                  </h4>\n                }\n              }\n            }\n            @if (effectiveDescription(); as description) {\n              @switch (description | zContentType) {\n                @case ('template') {\n                  <ng-container *ngTemplateOutlet=\"$any(description)\" />\n                }\n                @case ('html') {\n                  <p\n                    data-testid=\"z-modal-description\"\n                    class=\"text-muted-foreground m-0 mt-1 text-sm\"\n                    [innerHTML]=\"$any(description) | zSafeHtml\"></p>\n                }\n                @default {\n                  <p data-testid=\"z-modal-description\" class=\"text-muted-foreground m-0 mt-1 text-sm\">\n                    {{ $any(description) | translate }}\n                  </p>\n                }\n              }\n            }\n          </div>\n          @if (effectiveClosable()) {\n            <button\n              type=\"button\"\n              data-testid=\"z-modal-close-header-button\"\n              z-button\n              zType=\"subtle\"\n              zSize=\"xs\"\n              [zWave]=\"false\"\n              (click)=\"onCloseClick()\">\n              <z-icon zType=\"lucideX\" />\n            </button>\n          }\n        </div>\n      </header>\n    } @else if (effectiveClosable()) {\n      <header\n        [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n        [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n        <div class=\"flex justify-end px-4\">\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-close-header-button\"\n            z-button\n            zType=\"subtle\"\n            zSize=\"xs\"\n            [zWave]=\"false\"\n            (click)=\"onCloseClick()\">\n            <z-icon zType=\"lucideX\" />\n          </button>\n        </div>\n      </header>\n    }\n  }\n\n  <ng-scrollbar\n    class=\"z-modal-scrollbar flex-1\"\n    #mainContent\n    track=\"vertical\"\n    cdkScrollable\n    (scroll)=\"onContentScroll($event)\">\n    <main [class]=\"templateBodyClasses()\">\n      <div [class.invisible]=\"effectiveContentLoading()\" [class.pointer-events-none]=\"effectiveContentLoading()\">\n        @if (customContent(); as contentDir) {\n          <ng-container *ngTemplateOutlet=\"contentDir.templateRef\" />\n        } @else {\n          <ng-content />\n        }\n      </div>\n\n      @if (effectiveContentLoading()) {\n        <div class=\"absolute inset-4 flex flex-col\">\n          <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n        </div>\n      }\n    </main>\n  </ng-scrollbar>\n\n  @if (customFooter(); as footerDir) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        <ng-container *ngTemplateOutlet=\"footerDir.templateRef\" />\n      </div>\n    </footer>\n  } @else if (!effectiveHideFooter()) {\n    <footer [class.z-modal-footer-shadow]=\"shouldShowShadow()\" [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n      <div class=\"flex flex-row justify-end gap-2 px-4\">\n        @if (effectiveCancelText() !== null) {\n          <button type=\"button\" data-testid=\"z-modal-cancel-button\" z-button zType=\"outline\" (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? ('i18n_z_ui_modal_cancel' | translate) }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? ('i18n_z_ui_common_ok' | translate) }}\n          </button>\n        }\n      </div>\n    </footer>\n  }\n}\n\n<!-- Service mode content -->\n@if (isServiceMode()) {\n  <!-- Confirm Modal Layout (no skeleton) -->\n  @if (isConfirmMode()) {\n    <div class=\"flex flex-col items-center px-4 pt-2 pb-4 text-center\">\n      @if (config.zConfirmIcon) {\n        <div class=\"relative mb-4 flex size-20 items-center justify-center\">\n          <div class=\"absolute inset-0 rounded-full\" [class]=\"confirmIconColors().ring\"></div>\n          <div class=\"relative flex size-14 items-center justify-center rounded-full\" [class]=\"confirmIconColors().bg\">\n            <z-icon [zType]=\"config.zConfirmIcon\" zSize=\"30\" [zStrokeWidth]=\"2.6\" [class]=\"confirmIconColors().icon\" />\n          </div>\n        </div>\n      }\n\n      <!-- Title centered -->\n      @if (effectiveTitle(); as title) {\n        @switch (title | zContentType) {\n          @case ('template') {\n            <ng-container *ngTemplateOutlet=\"$any(title)\" />\n          }\n          @case ('html') {\n            <h4\n              data-testid=\"z-modal-title\"\n              class=\"m-0 text-lg leading-snug font-semibold\"\n              [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n          }\n          @default {\n            <h4 data-testid=\"z-modal-title\" class=\"m-0 text-lg leading-snug font-semibold\">\n              {{ $any(title) | translate }}\n            </h4>\n          }\n        }\n      }\n\n      <!-- Description centered -->\n      @if (config.zContent; as content) {\n        <p\n          data-testid=\"z-modal-description\"\n          class=\"text-muted-foreground m-0 mt-2 text-sm\"\n          [innerHTML]=\"$any(content) | translate | zSafeHtml\"></p>\n      }\n    </div>\n\n    <!-- Footer centered -->\n    @if (!effectiveHideFooter()) {\n      <footer class=\"mt-4 flex flex-row justify-center gap-3 pb-2\">\n        @if (effectiveCancelText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-cancel-button\"\n            z-button\n            zType=\"outline\"\n            (click)=\"onCloseClick()\">\n            {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n          </button>\n        }\n\n        @if (effectiveOkText() !== null) {\n          <button\n            type=\"button\"\n            class=\"min-w-28\"\n            data-testid=\"z-modal-ok-button\"\n            z-button\n            [zType]=\"effectiveTypeOk()\"\n            [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n            [zLoading]=\"effectiveLoading()\"\n            (click)=\"onOkClick()\">\n            {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n          </button>\n        }\n      </footer>\n    }\n  } @else {\n    <!-- Normal Modal Layout -->\n    @if (!effectiveContentLoading()) {\n      @if (!effectiveHideHeader()) {\n        @if (effectiveTitle()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div [class]=\"headerContentClasses()\">\n              <div class=\"min-w-0 flex-1 overflow-hidden pr-2\">\n                @if (effectiveTitle(); as title) {\n                  @switch (title | zContentType) {\n                    @case ('template') {\n                      <ng-container *ngTemplateOutlet=\"$any(title)\" />\n                    }\n                    @case ('html') {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"title\"\n                        [innerHTML]=\"$any(title) | zSafeHtml\"></h4>\n                    }\n                    @default {\n                      <h4\n                        data-testid=\"z-modal-title\"\n                        class=\"m-0 truncate text-base leading-snug font-semibold\"\n                        z-tooltip\n                        [zContent]=\"$any(title) | translate\">\n                        {{ $any(title) | translate }}\n                      </h4>\n                    }\n                  }\n                }\n              </div>\n              @if (effectiveClosable()) {\n                <button\n                  type=\"button\"\n                  data-testid=\"z-modal-close-header-button\"\n                  z-button\n                  zType=\"subtle\"\n                  zSize=\"xs\"\n                  [zWave]=\"false\"\n                  (click)=\"onCloseClick()\">\n                  <z-icon zType=\"lucideX\" />\n                </button>\n              }\n            </div>\n          </header>\n        } @else if (effectiveClosable()) {\n          <header\n            [class.z-modal-header-shadow]=\"shouldShowShadow()\"\n            [class.z-modal-header-border]=\"effectiveHeaderBorder()\">\n            <div class=\"flex justify-end px-4\">\n              <button\n                type=\"button\"\n                data-testid=\"z-modal-close-header-button\"\n                z-button\n                zType=\"subtle\"\n                zSize=\"xs\"\n                [zWave]=\"false\"\n                (click)=\"onCloseClick()\">\n                <z-icon zType=\"lucideX\" />\n              </button>\n            </div>\n          </header>\n        }\n      }\n\n      <ng-scrollbar\n        class=\"z-modal-scrollbar flex-1\"\n        #mainContent\n        track=\"vertical\"\n        cdkScrollable\n        (scroll)=\"onContentScroll($event)\">\n        <main [class]=\"serviceBodyClasses()\">\n          <ng-template #contentOutlet />\n\n          @if (isStringContent()) {\n            <div data-testid=\"z-modal-content\" [innerHTML]=\"$any(config.zContent) | zSafeHtml\"></div>\n          }\n        </main>\n      </ng-scrollbar>\n\n      @if (!effectiveHideFooter()) {\n        <footer\n          [class.z-modal-footer-shadow]=\"shouldShowShadow()\"\n          [class.z-modal-footer-border]=\"effectiveFooterBorder()\">\n          <div class=\"flex flex-row justify-end gap-2 px-4\">\n            @if (effectiveCancelText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-cancel-button\"\n                z-button\n                zType=\"outline\"\n                (click)=\"onCloseClick()\">\n                @if (config.zCancelIcon) {\n                  <z-icon [zType]=\"config.zCancelIcon\" />\n                }\n                {{ effectiveCancelText() ?? 'i18n_z_ui_modal_cancel' | translate }}\n              </button>\n            }\n\n            @if (effectiveOkText() !== null) {\n              <button\n                type=\"button\"\n                class=\"min-w-28\"\n                data-testid=\"z-modal-ok-button\"\n                z-button\n                [zType]=\"effectiveOkDestructive() ? 'destructive' : 'default'\"\n                [disabled]=\"effectiveOkDisabled() || effectiveLoading()\"\n                [zLoading]=\"effectiveLoading()\"\n                (click)=\"onOkClick()\">\n                @if (config.zOkIcon && !effectiveLoading()) {\n                  <z-icon [zType]=\"config.zOkIcon\" />\n                }\n                {{ effectiveOkText() ?? 'i18n_z_ui_common_ok' | translate }}\n              </button>\n            }\n          </div>\n        </footer>\n      }\n    } @else {\n      <div class=\"flex h-[12.5rem] flex-col gap-4 px-4 py-4\">\n        <z-skeleton class=\"h-full\" [zRows]=\"effectiveSkeletonRows()\" />\n      </div>\n    }\n  }\n}\n", styles: ["@charset \"UTF-8\";:host.z-modal-service-mode,:host.z-modal-template-mode{pointer-events:auto;--z-enter-opacity: 0;--z-enter-scale: .95;transform-origin:center center;animation:z-enter .2s cubic-bezier(.16,1,.3,1) forwards}:host.z-modal-service-mode.modal-leave,:host.z-modal-template-mode.modal-leave{--z-exit-opacity: 0;--z-exit-scale: .95;transform-origin:center center;animation:z-exit .15s cubic-bezier(.4,0,1,1) forwards}:host.z-modal-template-host{display:contents}::ng-deep .z-modal-backdrop-dark{background-color:#0009;animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-blur{background-color:#0000000d;backdrop-filter:blur(2px);animation:z-backdrop-enter .2s ease-out forwards}::ng-deep .z-modal-backdrop-dark.z-backdrop-leaving,::ng-deep .z-modal-backdrop-blur.z-backdrop-leaving{animation:z-backdrop-exit .15s ease-in forwards}.z-modal-header-shadow{padding-bottom:1rem;box-shadow:0 2px 8px -2px #0000001a}.z-modal-footer-shadow{padding-top:1rem;box-shadow:0 -2px 8px -2px #0000001a}.z-modal-header-border{border-bottom:1px solid var(--border)}.z-modal-footer-border{border-top:1px solid var(--border)}:host main{overscroll-behavior:contain}:host header,:host footer{transition:box-shadow .2s ease-out,padding .2s ease-out}.z-modal-scrollbar{--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px}:host.z-modal-height-morph{transition:height .24s cubic-bezier(.16,1,.3,1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { zOk: [{ type: i0.Output, args: ["zOk"] }], zCancel: [{ type: i0.Output, args: ["zCancel"] }], zAfterClose: [{ type: i0.Output, args: ["zAfterClose"] }], zScrollbar: [{ type: i0.Output, args: ["zScrollbar"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBodyClass", required: false }] }], zVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisible", required: false }] }, { type: i0.Output, args: ["zVisibleChange"] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDescription", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClosable", required: false }] }], zMaskClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaskClosable", required: false }] }], zDisableShadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisableShadow", required: false }] }], zHeaderBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeaderBorder", required: false }] }], zFooterBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFooterBorder", required: false }] }], zHideHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideHeader", required: false }] }], zHideFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHideFooter", required: false }] }], zOkText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkText", required: false }] }], zCancelText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCancelText", required: false }] }], zOkDestructive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDestructive", required: false }] }], zOkDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOkDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zContentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zOverlay: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOverlay", required: false }] }], customHeader: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalHeaderDirective), { isSignal: true }] }], customContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalContentDirective), { isSignal: true }] }], customFooter: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZModalFooterDirective), { isSignal: true }] }], contentOutlet: [{ type: i0.ViewChild, args: ['contentOutlet', { ...{ read: ViewContainerRef }, isSignal: true }] }], mainContentRef: [{ type: i0.ViewChild, args: ['mainContent', { isSignal: true }] }] } });
 
 let ZModalRef = class ZModalRef {
@@ -889,10 +889,10 @@ class ZModalService {
             ],
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZModalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZModalService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',