@shival99/z-ui 1.9.27 → 2.0.2

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

@@ -0,0 +1,128 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { output, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { cva } from 'class-variance-authority';
+
+const zMetricCardVariants = cva('relative overflow-hidden rounded-lg transition-colors', {
+    variants: {
+        zSize: {
+            sm: 'p-4',
+            default: 'p-5',
+            lg: 'p-6',
+        },
+        zVariant: {
+            default: 'bg-card text-card-foreground border border-border shadow-sm',
+            bordered: 'bg-background text-foreground border border-border',
+            soft: 'bg-muted/45 text-foreground border border-transparent',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zVariant: 'default',
+    },
+});
+const zMetricCardIconVariants = cva('inline-flex shrink-0 items-center justify-center rounded-md', {
+    variants: {
+        zSize: {
+            sm: 'size-8',
+            default: 'size-9',
+            lg: 'size-10',
+        },
+        zVariant: {
+            default: 'bg-primary/10 text-primary',
+            bordered: 'bg-muted text-muted-foreground',
+            soft: 'bg-background text-primary shadow-xs',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zVariant: 'default',
+    },
+});
+const zMetricCardValueVariants = cva('font-bold tracking-normal text-foreground', {
+    variants: {
+        zSize: {
+            sm: 'text-xl',
+            default: 'text-2xl',
+            lg: 'text-3xl',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+    },
+});
+const zMetricCardTrendVariants = cva('inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium', {
+    variants: {
+        zTrendDirection: {
+            up: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',
+            down: 'bg-destructive/10 text-destructive',
+            neutral: 'bg-muted text-muted-foreground',
+        },
+    },
+    defaultVariants: {
+        zTrendDirection: 'neutral',
+    },
+});
+
+class ZMetricCardComponent {
+    zActionClick = output();
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zTitle = input('', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
+    zValue = input('', ...(ngDevMode ? [{ debugName: "zValue" }] : []));
+    zDescription = input('', ...(ngDevMode ? [{ debugName: "zDescription" }] : []));
+    zIcon = input(...(ngDevMode ? [undefined, { debugName: "zIcon" }] : []));
+    zTrend = input(...(ngDevMode ? [undefined, { debugName: "zTrend" }] : []));
+    zProgress = input(...(ngDevMode ? [undefined, { debugName: "zProgress" }] : []));
+    zAction = input(...(ngDevMode ? [undefined, { debugName: "zAction" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zVariant = input('default', ...(ngDevMode ? [{ debugName: "zVariant" }] : []));
+    zDecor = input('wave', ...(ngDevMode ? [{ debugName: "zDecor" }] : []));
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
+    hostClasses = computed(() => zMergeClasses(zMetricCardVariants({ zSize: this.zSize(), zVariant: this.zVariant() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    iconClasses = computed(() => zMetricCardIconVariants({ zSize: this.zSize(), zVariant: this.zVariant() }), ...(ngDevMode ? [{ debugName: "iconClasses" }] : []));
+    valueClasses = computed(() => zMetricCardValueVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "valueClasses" }] : []));
+    decorClasses = computed(() => zMergeClasses('pointer-events-none absolute right-0 top-0 text-primary/10 transition-opacity duration-200', this.zVariant() === 'bordered' ? 'text-muted-foreground/10' : '', this.zVariant() === 'soft' ? 'text-primary/15' : ''), ...(ngDevMode ? [{ debugName: "decorClasses" }] : []));
+    trendDirection = computed(() => this.zTrend()?.direction ?? 'neutral', ...(ngDevMode ? [{ debugName: "trendDirection" }] : []));
+    trendClasses = computed(() => zMetricCardTrendVariants({ zTrendDirection: this.trendDirection() }), ...(ngDevMode ? [{ debugName: "trendClasses" }] : []));
+    trendIcon = computed(() => {
+        const direction = this.trendDirection();
+        if (direction === 'up') {
+            return 'lucideTrendingUp';
+        }
+        if (direction === 'down') {
+            return 'lucideTrendingDown';
+        }
+        return 'lucideMinus';
+    }, ...(ngDevMode ? [{ debugName: "trendIcon" }] : []));
+    normalizedProgress = computed(() => {
+        const progress = this.zProgress();
+        if (progress === null || progress === undefined || Number.isNaN(progress)) {
+            return null;
+        }
+        return Math.min(100, Math.max(0, progress));
+    }, ...(ngDevMode ? [{ debugName: "normalizedProgress" }] : []));
+    onActionClick() {
+        const action = this.zAction();
+        if (!action) {
+            return;
+        }
+        this.zActionClick.emit(action);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZMetricCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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" }]
+        }], 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 }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZMetricCardComponent, zMetricCardIconVariants, zMetricCardTrendVariants, zMetricCardValueVariants, zMetricCardVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-metric-card.mjs.map

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

@@ -0,0 +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":"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"}

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

@@ -615,6 +615,20 @@ class ZSelectComponent {
     _ngControl = null;
     _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
     constructor() {
+        effect(onCleanup => {
+            const triggerEl = this.triggerRef()?.nativeElement;
+            if (!triggerEl) {
+                return;
+            }
+            const observer = new ResizeObserver(() => {
+                this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+            });
+            observer.observe(triggerEl);
+            this.dropdownWidth.set(triggerEl.getBoundingClientRect().width);
+            onCleanup(() => {
+                observer.disconnect();
+            });
+        });
         effect(() => {
             if (!this.zSearchServer() && !this.hasAsyncOptions()) {
                 return;
@@ -1280,7 +1294,7 @@ class ZSelectComponent {
                 useExisting: forwardRef(() => ZSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                zPosition=\"top\"\n                [zHideDelay]=\"0\"\n                [zOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { 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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customSelectedDirective", first: true, predicate: (ZSelectSelectedDirective), descendants: true, isSignal: true }, { propertyName: "customOptionDirective", first: true, predicate: (ZSelectOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["dropdownSearchInput"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }], exportAs: ["zSelect"], ngImport: i0, template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                zPosition=\"top\"\n                [zHideDelay]=\"0\"\n                [zOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { 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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "pipe", type: ZIsSelectedPipe, name: "zIsSelected" }, { kind: "pipe", type: ZOptionClassesPipe, name: "zOptionClasses" }, { kind: "pipe", type: ZTagClassesPipe, name: "zTagClasses" }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSelectComponent, decorators: [{
             type: Component,
@@ -1305,7 +1319,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => ZSelectComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                zPosition=\"top\"\n                [zHideDelay]=\"0\"\n                [zOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zSelect', template: "<div class=\"z-select-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"selectId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  <div class=\"relative\">\n    <div\n      #triggerEl\n      [id]=\"selectId\"\n      z-popover\n      [zPopoverContent]=\"dropdownTpl\"\n      [zOffset]=\"6\"\n      [zDisabled]=\"isInteractionDisabled()\"\n      [zScrollClose]=\"zScrollClose()\"\n      zPopoverWidth=\"trigger\"\n      zTrigger=\"click\"\n      [zPosition]=\"zPosition()\"\n      zClass=\"border-0 shadow-none p-0\"\n      (zControl)=\"onPopoverControl($event)\"\n      (zShow)=\"onPopoverShow()\"\n      (zHideStart)=\"onPopoverHideStart()\"\n      (zHide)=\"onPopoverHideEnd()\"\n      class=\"z-select-trigger cursor-pointer\"\n      [class]=\"selectClasses()\"\n      [class.z-select-open]=\"uiState().isOpen\"\n      (mousedown)=\"onTriggerMousedown()\"\n      (keydown)=\"onTriggerKeydown($event)\"\n      tabindex=\"0\"\n      role=\"combobox\"\n      [attr.aria-expanded]=\"uiState().isOpen\"\n      [attr.aria-haspopup]=\"'listbox'\"\n      [attr.aria-controls]=\"dropdownId\">\n      @if (zPrefix()) {\n        <z-icon [zType]=\"zPrefix() || 'lucideChevronDown'\" zSize=\"18\" class=\"text-muted-foreground shrink-0\" />\n      }\n\n      <div\n        class=\"z-select-tags-wrapper flex min-w-0 flex-1 items-center gap-1\"\n        [class.flex-wrap]=\"zWrap()\"\n        [class.overflow-hidden]=\"!zWrap()\">\n        @if (isMultipleMode()) {\n          @if (selectedOptions().length === 0) {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          } @else {\n            @for (opt of displayedTags(); track opt.value) {\n              <span\n                #tagEl\n                [class]=\"opt | zTagClasses: zSize() : isTagsMode()\"\n                class=\"z-select-tag\"\n                [class.min-w-0]=\"!zWrap()\"\n                [class.shrink]=\"!zWrap()\">\n                @if (effectiveSelectedTemplate()) {\n                  <ng-container *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: opt }\" />\n                } @else {\n                  <span\n                    class=\"truncate\"\n                    [class.max-w-25]=\"zWrap()\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"6\"\n                    [zTriggerElement]=\"tagEl\">\n                    {{ opt.label }}\n                  </span>\n                }\n                @if (zAllowClear() && !isDisabled()) {\n                  <button\n                    type=\"button\"\n                    class=\"-mr-0.5 flex size-3.5 shrink-0 items-center justify-center rounded-sm transition-colors hover:bg-black/10\"\n                    (click)=\"removeOption($event, opt)\"\n                    tabindex=\"-1\">\n                    <z-icon zType=\"lucideX\" zSize=\"10\" />\n                  </button>\n                }\n              </span>\n            }\n            @if (remainingCount() > 0) {\n              <span\n                class=\"z-select-remaining text-muted-foreground bg-muted rounded-sm px-1.5 py-0.5 text-xs font-medium\">\n                +{{ remainingCount() }}\n              </span>\n            }\n          }\n        } @else {\n          @if (selectedOption()) {\n            @if (effectiveSelectedTemplate()) {\n              <ng-container\n                *ngTemplateOutlet=\"effectiveSelectedTemplate()!; context: { $implicit: selectedOption() }\" />\n            } @else {\n              <span\n                class=\"truncate\"\n                z-tooltip\n                [zContent]=\"selectedOption()!.label\"\n                zPosition=\"top\"\n                [zHideDelay]=\"0\"\n                [zOffset]=\"10\">\n                {{ selectedOption()!.label }}\n              </span>\n            }\n          } @else {\n            <span class=\"text-muted-foreground truncate whitespace-nowrap\">\n              {{ effectivePlaceholder() }}\n            </span>\n          }\n        }\n      </div>\n\n      @if (isLoading() || isLoadingMore()) {\n        <z-icon zType=\"lucideLoaderCircle\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      @if (!isLoading() && zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 items-center justify-center transition-colors\"\n          (click)=\"clearAll($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" />\n        </button>\n      }\n\n      @if (uiState().isValidating) {\n        <z-icon zType=\"lucideLoader2\" zSize=\"18\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n      }\n\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"18\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"uiState().isOpen\" />\n    </div>\n\n    @if (hasError()) {\n      <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 pt-2 text-xs duration-200\">\n        {{ errorMessage() }}\n      </p>\n    }\n  </div>\n\n  <ng-template #dropdownTpl let-close=\"close\">\n    <div\n      [id]=\"dropdownId\"\n      class=\"z-select-dropdown bg-popover border-border rounded-sm border shadow-lg\"\n      [style.width.px]=\"dropdownWidth()\"\n      [style.min-width.px]=\"dropdownWidth()\">\n      @if (zShowSearch()) {\n        <div class=\"border-border flex items-center border-b px-3\">\n          <z-icon zType=\"lucideSearch\" zSize=\"18\" class=\"text-muted-foreground/50 mr-2 shrink-0\" />\n          <input\n            #dropdownSearchInput\n            type=\"text\"\n            class=\"placeholder:text-muted-foreground text-foreground flex h-10 w-full bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n            [placeholder]=\"effectivePlaceholderSearch()\"\n            [ngModel]=\"searchText()\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            autocomplete=\"off\"\n            autocorrect=\"off\"\n            spellcheck=\"false\" />\n        </div>\n      }\n\n      @if (isLoading()) {\n        <div class=\"flex items-center justify-center\" [style.height.px]=\"optionsMaxHeight()\">\n          <z-loading [zLoading]=\"true\" zSize=\"default\" />\n        </div>\n      } @else {\n        @if (filteredOptions().length > 0) {\n          @if (shouldUseVirtualScroll()) {\n            <div\n              #virtualScrollElement\n              class=\"z-select-options z-select-virtual-scroll overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.height.px]=\"optionsMaxHeight()\">\n              <div class=\"z-select-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n                @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n                  @let opt = filteredOptions()[virtualItem.index];\n                  <div\n                    #optionEl\n                    class=\"z-select-option absolute right-0 left-0 min-w-0\"\n                    [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                    [style.height.px]=\"zOptionHeight()\"\n                    [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                    (click)=\"selectOption(opt, close)\">\n                    @if (effectiveOptionTemplate()) {\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          effectiveOptionTemplate()!;\n                          context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                        \" />\n                    } @else {\n                      <span\n                        class=\"min-w-0 flex-1 truncate\"\n                        z-tooltip\n                        [zContent]=\"opt.label\"\n                        zPosition=\"top\"\n                        [zHideDelay]=\"0\"\n                        [zOffset]=\"5\"\n                        [zArrow]=\"false\"\n                        [zTriggerElement]=\"optionEl\"\n                        [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                    }\n                    @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                      <z-icon zType=\"lucideCheck\" zSize=\"16\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                    }\n                  </div>\n                }\n              </div>\n              @if (isLoadingMore()) {\n                <div\n                  class=\"bg-popover/80 absolute right-0 bottom-0 left-0 flex items-center justify-center py-2\"\n                  [style.transform]=\"'translateY(' + virtualizer.getTotalSize() + 'px)'\">\n                  <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n                </div>\n              }\n            </div>\n          } @else {\n            <div\n              #optionsContainer\n              class=\"z-select-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n              [style.maxHeight.px]=\"optionsMaxHeight()\">\n              @for (opt of filteredOptions(); track opt.value) {\n                <div\n                  #optionEl2\n                  class=\"z-select-option relative min-w-0\"\n                  [ngClass]=\"opt | zIsSelected: currentValue() : isMultipleMode() | zOptionClasses: opt.disabled\"\n                  [style.minHeight.px]=\"zOptionHeight()\"\n                  (click)=\"selectOption(opt, close)\">\n                  @if (effectiveOptionTemplate()) {\n                    <ng-container\n                      *ngTemplateOutlet=\"\n                        effectiveOptionTemplate()!;\n                        context: { $implicit: opt, selected: opt | zIsSelected: currentValue() : isMultipleMode() }\n                      \" />\n                  } @else {\n                    <span\n                      class=\"min-w-0 flex-1 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zArrow]=\"false\"\n                      [zOffset]=\"5\"\n                      [zHideDelay]=\"0\"\n                      [zTriggerElement]=\"optionEl2\"\n                      [innerHTML]=\"opt.label | zHighlight: searchText() | zSafeHtml\"></span>\n                  }\n                  @if (opt | zIsSelected: currentValue() : isMultipleMode()) {\n                    <z-icon zType=\"lucideCheck\" zSize=\"18\" [zStrokeWidth]=\"4\" class=\"text-primary ml-auto shrink-0\" />\n                  }\n                </div>\n              }\n              @if (canLoadMore()) {\n                <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n              }\n            </div>\n          }\n        } @else {\n          <div class=\"flex items-center justify-center p-1\" [style.height.px]=\"optionsMaxHeight()\">\n            @if (isEmptyData()) {\n              <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n            } @else {\n              <z-empty zIcon=\"lucideSearchX\" zSize=\"sm\" [zMessage]=\"effectiveNotFoundText()\" />\n            }\n          </div>\n        }\n\n        @if (isLoadingMore()) {\n          <div class=\"z-select-loading-more border-border/50 flex items-center justify-center border-t py-1.5\">\n            <z-loading zSize=\"xs\" [zLoading]=\"true\" />\n          </div>\n        }\n      }\n\n      @if (zShowAction() && (zActionTemplate() || isMultipleMode())) {\n        <div class=\"border-border flex items-center gap-2 border-t px-2 py-1.5\">\n          @if (zActionTemplate()) {\n            <ng-container *ngTemplateOutlet=\"zActionTemplate()!\" />\n          } @else {\n            <z-button\n              zSize=\"xs\"\n              [zType]=\"isAllSelected() ? 'ghost-error' : 'ghost-info'\"\n              class=\"min-w-0 flex-1\"\n              (click)=\"toggleSelectAllAction()\"\n              [zWave]=\"false\">\n              <z-icon [zType]=\"isAllSelected() ? 'lucideX' : 'lucideCheckCheck'\" zSize=\"18\" class=\"shrink-0\" />\n              <span class=\"truncate\">{{ isAllSelected() ? effectiveClearAllText() : effectiveSelectAllText() }}</span>\n            </z-button>\n          }\n        </div>\n      }\n    </div>\n  </ng-template>\n</div>\n", styles: [".z-select-trigger{-webkit-user-select:none;user-select:none}.z-select-trigger:focus{outline:none}.z-select-trigger *{cursor:inherit}.z-select-tag{-webkit-user-select:none;user-select:none;animation:z-select-tag-enter .2s cubic-bezier(.4,0,.2,1)}@keyframes z-select-tag-enter{0%{opacity:0;transform:scale(.8) translateY(.25rem)}to{opacity:1;transform:scale(1) translateY(0)}}.z-select-remaining{animation:z-select-remaining-enter .25s cubic-bezier(.4,0,.2,1)}@keyframes z-select-remaining-enter{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.z-select-dropdown input{text-overflow:ellipsis;overflow:hidden}.z-select-options{overflow-x:hidden!important}.z-select-virtual-scroll .z-select-virtual-inner{width:100%}.z-select-loading-more{animation:z-select-loading-enter .2s ease-out}@keyframes z-select-loading-enter{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchInputRef: [{ type: i0.ViewChild, args: ['dropdownSearchInput', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], customSelectedDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectSelectedDirective), { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZSelectOptionDirective), { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWrap", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zPlaceholderSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholderSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zNotFoundText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNotFoundText", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zMaxTagCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxTagCount", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zShowAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowAction", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zTranslateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTranslateLabels", required: false }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zSearchServer: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchServer", required: false }] }], zLoadingMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingMore", required: false }] }], zEnableLoadMore: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEnableLoadMore", required: false }] }], zScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollDistance", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zScrollClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "zScrollClose", required: false }] }], zPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPosition", required: false }] }], zSelectedTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedTemplate", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zActionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zActionTemplate", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }] } });
 
 /**