@shival99/z-ui 2.3.10 → 2.3.11

package/fesm2022/shival99-z-ui-components-z-audio-player.mjs

@@ -0,0 +1,210 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, output, viewChild, signal, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+
+const Z_AUDIO_PLAYER_WAVEFORM = [
+    28, 42, 34, 56, 38, 66, 45, 32, 52, 72, 46, 58, 36, 78, 48, 64, 40, 30, 54, 70, 44, 60, 35, 50, 76, 42, 58, 38, 68,
+    46, 34, 56, 74, 40, 62, 36, 52, 70, 44, 30, 48, 64, 38, 58, 76, 42, 54, 34, 66, 46, 72, 40, 56, 32, 68, 48, 60, 36,
+    74, 44, 52, 30, 64, 42, 78, 46, 58, 34, 70, 40, 54, 32, 66, 48, 62, 38, 72, 44, 56, 30, 68, 42, 60, 36, 76, 46, 54,
+    34, 64, 40, 70, 48, 58, 32, 66, 44, 74, 38, 52, 30, 62, 46, 68, 36, 56, 78, 42, 60, 34, 72, 48, 54, 38, 66, 44, 76,
+    40, 58, 32, 70, 46, 62, 36, 74, 48, 56, 30, 64, 42, 68, 38, 52, 72, 44, 60, 34, 76, 46, 54, 32, 66, 40, 58, 74, 36,
+    62, 48, 70, 42, 56, 30, 68, 44, 60, 38, 74, 46, 54, 32, 66, 40, 58, 72, 36, 62, 48, 70, 42, 56, 34, 76, 44, 60, 38,
+    68, 46, 52, 30, 64, 42, 74, 36, 58, 48, 70, 40, 54, 32, 66, 44, 60, 38, 76, 46, 56, 34, 68, 42, 72, 48, 58,
+];
+
+class ZAudioPlayerComponent {
+    _destroyRef = inject(DestroyRef);
+    _animationFrameId = null;
+    _isSeeking = false;
+    constructor() {
+        this._destroyRef.onDestroy(() => this._stopPlaybackFrame());
+    }
+    zSrc = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSrc" }] : /* istanbul ignore next */ []));
+    zTitle = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTitle" }] : /* istanbul ignore next */ []));
+    zTags = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTags" }] : /* istanbul ignore next */ []));
+    zDownload = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDownload" }] : /* istanbul ignore next */ []));
+    zLoaded = output();
+    zError = output();
+    zPlay = output();
+    audio = viewChild.required('audio', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "audio" }] : /* istanbul ignore next */ []));
+    isPlaying = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPlaying" }] : /* istanbul ignore next */ []));
+    currentTime = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTime" }] : /* istanbul ignore next */ []));
+    duration = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+    waveform = Z_AUDIO_PLAYER_WAVEFORM;
+    title = this.zTitle;
+    tags = this.zTags;
+    progress = computed(() => {
+        const duration = this.duration();
+        return duration > 0 ? this.currentTime() / duration : 0;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+    currentTimeLabel = computed(() => this._formatTime(this.currentTime()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentTimeLabel" }] : /* istanbul ignore next */ []));
+    durationLabel = computed(() => this._formatTime(this.duration()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "durationLabel" }] : /* istanbul ignore next */ []));
+    async togglePlay() {
+        const audio = this.audio().nativeElement;
+        if (audio.paused) {
+            await audio.play();
+            return;
+        }
+        audio.pause();
+    }
+    onWaveformPointerDown(event) {
+        if (event.button !== 0 || !(event.currentTarget instanceof HTMLElement)) {
+            return;
+        }
+        this._isSeeking = true;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        this._seekToPointerPosition(event);
+    }
+    onWaveformPointerMove(event) {
+        if (!this._isSeeking) {
+            return;
+        }
+        this._seekToPointerPosition(event);
+    }
+    onWaveformPointerUp(event) {
+        if (!(event.currentTarget instanceof HTMLElement)) {
+            return;
+        }
+        this._isSeeking = false;
+        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+    }
+    _seekToPointerPosition(event) {
+        if (!(event.currentTarget instanceof HTMLElement)) {
+            return;
+        }
+        const duration = this.duration();
+        const track = event.currentTarget.querySelector('.z-audio-player__waveform-track');
+        const bounds = track?.getBoundingClientRect();
+        if (!bounds) {
+            return;
+        }
+        const width = bounds.width;
+        if (duration <= 0 || width <= 0) {
+            return;
+        }
+        const offset = Math.min(Math.max(event.clientX - bounds.left, 0), width);
+        this._seekToTime((offset / width) * duration);
+    }
+    onWaveformKeydown(event) {
+        const duration = this.duration();
+        if (duration <= 0) {
+            return;
+        }
+        const step = event.shiftKey ? 10 : 5;
+        const currentTime = this.currentTime();
+        const nextTime = {
+            ArrowLeft: currentTime - step,
+            ArrowRight: currentTime + step,
+            Home: 0,
+            End: duration,
+        }[event.key];
+        if (nextTime === undefined) {
+            return;
+        }
+        event.preventDefault();
+        this._seekToTime(nextTime);
+    }
+    onLoadedMetadata() {
+        this.duration.set(Number.isFinite(this.audio().nativeElement.duration) ? this.audio().nativeElement.duration : 0);
+        this.zLoaded.emit();
+    }
+    onLoadStart() {
+        this._stopPlaybackFrame();
+        this.currentTime.set(0);
+        this.duration.set(0);
+        this.isPlaying.set(false);
+    }
+    onTimeUpdate() {
+        if (this._animationFrameId === null) {
+            this.currentTime.set(this.audio().nativeElement.currentTime);
+        }
+    }
+    onEnded() {
+        this._stopPlaybackFrame();
+        this.currentTime.set(this.audio().nativeElement.currentTime);
+        this.isPlaying.set(false);
+        this.zPlay.emit(false);
+    }
+    onError() {
+        this.isPlaying.set(false);
+        this.zError.emit(new Error('i18n_z_ui_gallery_preview_load_error'));
+    }
+    onPlayStateChange(isPlaying) {
+        this.isPlaying.set(isPlaying);
+        this.zPlay.emit(isPlaying);
+        if (isPlaying) {
+            this._startPlaybackFrame();
+            return;
+        }
+        this._stopPlaybackFrame();
+        this.currentTime.set(this.audio().nativeElement.currentTime);
+    }
+    _seekToTime(time) {
+        const audio = this.audio().nativeElement;
+        const nextTime = Math.min(Math.max(time, 0), this.duration());
+        audio.currentTime = nextTime;
+        this.currentTime.set(audio.currentTime);
+    }
+    _startPlaybackFrame() {
+        if (this._animationFrameId !== null) {
+            return;
+        }
+        const update = () => {
+            const audio = this.audio().nativeElement;
+            this.currentTime.set(audio.currentTime);
+            if (!audio.paused && !audio.ended) {
+                this._animationFrameId = window.requestAnimationFrame(update);
+                return;
+            }
+            this._animationFrameId = null;
+        };
+        this._animationFrameId = window.requestAnimationFrame(update);
+    }
+    _stopPlaybackFrame() {
+        if (this._animationFrameId === null) {
+            return;
+        }
+        window.cancelAnimationFrame(this._animationFrameId);
+        this._animationFrameId = null;
+    }
+    _formatTime(value) {
+        if (!Number.isFinite(value) || value < 0) {
+            return '0:00';
+        }
+        const minutes = Math.floor(value / 60);
+        const seconds = Math.floor(value % 60)
+            .toString()
+            .padStart(2, '0');
+        return `${minutes}:${seconds}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZAudioPlayerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZAudioPlayerComponent, isStandalone: true, selector: "z-audio-player", inputs: { zSrc: { classPropertyName: "zSrc", publicName: "zSrc", isSignal: true, isRequired: true, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zTags: { classPropertyName: "zTags", publicName: "zTags", isSignal: true, isRequired: false, transformFunction: null }, zDownload: { classPropertyName: "zDownload", publicName: "zDownload", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zLoaded: "zLoaded", zError: "zError", zPlay: "zPlay" }, host: { classAttribute: "block w-full min-w-0" }, viewQueries: [{ propertyName: "audio", first: true, predicate: ["audio"], descendants: true, isSignal: true }], ngImport: i0, template: "<section\n  class=\"border-border bg-card text-foreground relative overflow-hidden rounded-lg border shadow-sm\"\n  [attr.aria-label]=\"title() || ('i18n_z_ui_gallery_preview' | translate)\">\n  <audio\n    #audio\n    class=\"sr-only\"\n    [src]=\"zSrc()\"\n    preload=\"metadata\"\n    (loadstart)=\"onLoadStart()\"\n    (play)=\"onPlayStateChange(true)\"\n    (pause)=\"onPlayStateChange(false)\"\n    (loadedmetadata)=\"onLoadedMetadata()\"\n    (timeupdate)=\"onTimeUpdate()\"\n    (ended)=\"onEnded()\"\n    (error)=\"onError()\"></audio>\n\n  <div\n    class=\"focus-visible:outline-ring relative h-[7.5rem] cursor-pointer touch-none overflow-hidden px-4 py-5 select-none [background:color-mix(in_oklab,var(--primary)_8%,var(--card))] focus-visible:outline-2 focus-visible:outline-offset-[-2px] max-[30rem]:h-24\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'i18n_z_ui_audio_player_seek' | translate\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"duration()\"\n    [attr.aria-valuenow]=\"currentTime()\"\n    (pointerdown)=\"onWaveformPointerDown($event)\"\n    (pointermove)=\"onWaveformPointerMove($event)\"\n    (pointerup)=\"onWaveformPointerUp($event)\"\n    (pointercancel)=\"onWaveformPointerUp($event)\"\n    (keydown)=\"onWaveformKeydown($event)\">\n    <div\n      class=\"z-audio-player__waveform-track absolute inset-[1.25rem_1rem] flex cursor-pointer items-center gap-[0.2rem] overflow-hidden\">\n      @for (bar of waveform; track $index) {\n        <span\n          class=\"max-h-full min-h-[0.1rem] min-w-[0.1rem] flex-1 rounded-full\"\n          [style.background]=\"\n            ($index + 0.5) / waveform.length < progress()\n              ? 'var(--primary)'\n              : 'color-mix(in oklab, var(--muted-foreground) 42%, transparent)'\n          \"\n          [style.height.%]=\"bar\"></span>\n      }\n      <span\n        class=\"bg-foreground pointer-events-none absolute top-0 bottom-0 z-[1] w-[3px] -translate-x-1/2 translate-z-0 [box-shadow:0_0_0_1px_color-mix(in_oklab,var(--foreground)_24%,transparent)]\"\n        [style.left.%]=\"progress() * 100\">\n        <span class=\"bg-foreground absolute top-[-0.2rem] left-1/2 size-[0.55rem] -translate-x-1/2 rounded-full\"></span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    class=\"flex min-w-0 items-end justify-between gap-4 p-4 max-[30rem]:flex-col max-[30rem]:items-start max-[30rem]:gap-3 max-[30rem]:pr-4\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n      <span class=\"min-w-0 overflow-hidden text-base font-semibold text-ellipsis whitespace-nowrap\">{{ title() }}</span>\n      @if (tags().length) {\n        <div class=\"flex flex-wrap gap-[0.35rem]\">\n          @for (tag of tags(); track tag) {\n            <span class=\"bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs leading-none\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"flex flex-none items-center gap-2\">\n      <span class=\"text-muted-foreground text-sm tabular-nums\">{{ currentTimeLabel() }} / {{ durationLabel() }}</span>\n      @if (zDownload()) {\n        <a\n          z-button\n          zType=\"default\"\n          zSize=\"sm\"\n          zShape=\"circle\"\n          [zWave]=\"false\"\n          [href]=\"zSrc()\"\n          [download]=\"title() || null\"\n          [attr.aria-label]=\"'i18n_z_ui_gallery_download' | translate\"\n          [title]=\"'i18n_z_ui_gallery_download' | translate\"\n          class=\"inline-flex items-center justify-center no-underline\">\n          <z-icon zType=\"lucideDownload\" zSize=\"16\" />\n        </a>\n      }\n    </div>\n  </div>\n\n  <button\n    z-button\n    zType=\"default\"\n    zSize=\"xl\"\n    zShape=\"circle\"\n    [zWave]=\"false\"\n    type=\"button\"\n    class=\"absolute top-20 right-4 z-[1] shadow-md max-[30rem]:top-16\"\n    [attr.aria-label]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    (click)=\"togglePlay()\">\n    <z-icon\n      [zType]=\"isPlaying() ? 'tablerPlayerPauseFill' : 'tablerPlayerPlayFill'\"\n      zSize=\"24\"\n      [class.translate-x-px]=\"!isPlaying()\" />\n  </button>\n</section>\n", dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZAudioPlayerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-audio-player', standalone: true, imports: [TranslatePipe, ZButtonComponent, ZIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'block w-full min-w-0',
+                    }, template: "<section\n  class=\"border-border bg-card text-foreground relative overflow-hidden rounded-lg border shadow-sm\"\n  [attr.aria-label]=\"title() || ('i18n_z_ui_gallery_preview' | translate)\">\n  <audio\n    #audio\n    class=\"sr-only\"\n    [src]=\"zSrc()\"\n    preload=\"metadata\"\n    (loadstart)=\"onLoadStart()\"\n    (play)=\"onPlayStateChange(true)\"\n    (pause)=\"onPlayStateChange(false)\"\n    (loadedmetadata)=\"onLoadedMetadata()\"\n    (timeupdate)=\"onTimeUpdate()\"\n    (ended)=\"onEnded()\"\n    (error)=\"onError()\"></audio>\n\n  <div\n    class=\"focus-visible:outline-ring relative h-[7.5rem] cursor-pointer touch-none overflow-hidden px-4 py-5 select-none [background:color-mix(in_oklab,var(--primary)_8%,var(--card))] focus-visible:outline-2 focus-visible:outline-offset-[-2px] max-[30rem]:h-24\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'i18n_z_ui_audio_player_seek' | translate\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"duration()\"\n    [attr.aria-valuenow]=\"currentTime()\"\n    (pointerdown)=\"onWaveformPointerDown($event)\"\n    (pointermove)=\"onWaveformPointerMove($event)\"\n    (pointerup)=\"onWaveformPointerUp($event)\"\n    (pointercancel)=\"onWaveformPointerUp($event)\"\n    (keydown)=\"onWaveformKeydown($event)\">\n    <div\n      class=\"z-audio-player__waveform-track absolute inset-[1.25rem_1rem] flex cursor-pointer items-center gap-[0.2rem] overflow-hidden\">\n      @for (bar of waveform; track $index) {\n        <span\n          class=\"max-h-full min-h-[0.1rem] min-w-[0.1rem] flex-1 rounded-full\"\n          [style.background]=\"\n            ($index + 0.5) / waveform.length < progress()\n              ? 'var(--primary)'\n              : 'color-mix(in oklab, var(--muted-foreground) 42%, transparent)'\n          \"\n          [style.height.%]=\"bar\"></span>\n      }\n      <span\n        class=\"bg-foreground pointer-events-none absolute top-0 bottom-0 z-[1] w-[3px] -translate-x-1/2 translate-z-0 [box-shadow:0_0_0_1px_color-mix(in_oklab,var(--foreground)_24%,transparent)]\"\n        [style.left.%]=\"progress() * 100\">\n        <span class=\"bg-foreground absolute top-[-0.2rem] left-1/2 size-[0.55rem] -translate-x-1/2 rounded-full\"></span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    class=\"flex min-w-0 items-end justify-between gap-4 p-4 max-[30rem]:flex-col max-[30rem]:items-start max-[30rem]:gap-3 max-[30rem]:pr-4\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n      <span class=\"min-w-0 overflow-hidden text-base font-semibold text-ellipsis whitespace-nowrap\">{{ title() }}</span>\n      @if (tags().length) {\n        <div class=\"flex flex-wrap gap-[0.35rem]\">\n          @for (tag of tags(); track tag) {\n            <span class=\"bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs leading-none\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"flex flex-none items-center gap-2\">\n      <span class=\"text-muted-foreground text-sm tabular-nums\">{{ currentTimeLabel() }} / {{ durationLabel() }}</span>\n      @if (zDownload()) {\n        <a\n          z-button\n          zType=\"default\"\n          zSize=\"sm\"\n          zShape=\"circle\"\n          [zWave]=\"false\"\n          [href]=\"zSrc()\"\n          [download]=\"title() || null\"\n          [attr.aria-label]=\"'i18n_z_ui_gallery_download' | translate\"\n          [title]=\"'i18n_z_ui_gallery_download' | translate\"\n          class=\"inline-flex items-center justify-center no-underline\">\n          <z-icon zType=\"lucideDownload\" zSize=\"16\" />\n        </a>\n      }\n    </div>\n  </div>\n\n  <button\n    z-button\n    zType=\"default\"\n    zSize=\"xl\"\n    zShape=\"circle\"\n    [zWave]=\"false\"\n    type=\"button\"\n    class=\"absolute top-20 right-4 z-[1] shadow-md max-[30rem]:top-16\"\n    [attr.aria-label]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    (click)=\"togglePlay()\">\n    <z-icon\n      [zType]=\"isPlaying() ? 'tablerPlayerPauseFill' : 'tablerPlayerPlayFill'\"\n      zSize=\"24\"\n      [class.translate-x-px]=\"!isPlaying()\" />\n  </button>\n</section>\n" }]
+        }], ctorParameters: () => [], propDecorators: { zSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSrc", required: true }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zTags: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTags", required: false }] }], zDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDownload", required: false }] }], zLoaded: [{ type: i0.Output, args: ["zLoaded"] }], zError: [{ type: i0.Output, args: ["zError"] }], zPlay: [{ type: i0.Output, args: ["zPlay"] }], audio: [{ type: i0.ViewChild, args: ['audio', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZAudioPlayerComponent };
+//# sourceMappingURL=shival99-z-ui-components-z-audio-player.mjs.map

package/fesm2022/shival99-z-ui-components-z-audio-player.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-audio-player.mjs","sources":["../../../../libs/core-ui/components/z-audio-player/z-audio-player.define.ts","../../../../libs/core-ui/components/z-audio-player/z-audio-player.component.ts","../../../../libs/core-ui/components/z-audio-player/z-audio-player.component.html","../../../../libs/core-ui/components/z-audio-player/shival99-z-ui-components-z-audio-player.ts"],"sourcesContent":["export const Z_AUDIO_PLAYER_WAVEFORM = [\n  28, 42, 34, 56, 38, 66, 45, 32, 52, 72, 46, 58, 36, 78, 48, 64, 40, 30, 54, 70, 44, 60, 35, 50, 76, 42, 58, 38, 68,\n  46, 34, 56, 74, 40, 62, 36, 52, 70, 44, 30, 48, 64, 38, 58, 76, 42, 54, 34, 66, 46, 72, 40, 56, 32, 68, 48, 60, 36,\n  74, 44, 52, 30, 64, 42, 78, 46, 58, 34, 70, 40, 54, 32, 66, 48, 62, 38, 72, 44, 56, 30, 68, 42, 60, 36, 76, 46, 54,\n  34, 64, 40, 70, 48, 58, 32, 66, 44, 74, 38, 52, 30, 62, 46, 68, 36, 56, 78, 42, 60, 34, 72, 48, 54, 38, 66, 44, 76,\n  40, 58, 32, 70, 46, 62, 36, 74, 48, 56, 30, 64, 42, 68, 38, 52, 72, 44, 60, 34, 76, 46, 54, 32, 66, 40, 58, 74, 36,\n  62, 48, 70, 42, 56, 30, 68, 44, 60, 38, 74, 46, 54, 32, 66, 40, 58, 72, 36, 62, 48, 70, 42, 56, 34, 76, 44, 60, 38,\n  68, 46, 52, 30, 64, 42, 74, 36, 58, 48, 70, 40, 54, 32, 66, 44, 60, 38, 76, 46, 56, 34, 68, 42, 72, 48, 58,\n] as const;\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n  type ElementRef,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { Z_AUDIO_PLAYER_WAVEFORM } from './z-audio-player.define';\n\n@Component({\n  selector: 'z-audio-player',\n  standalone: true,\n  imports: [TranslatePipe, ZButtonComponent, ZIconComponent],\n  templateUrl: './z-audio-player.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'block w-full min-w-0',\n  },\n})\nexport class ZAudioPlayerComponent {\n  private readonly _destroyRef = inject(DestroyRef);\n  private _animationFrameId: number | null = null;\n  private _isSeeking = false;\n\n  constructor() {\n    this._destroyRef.onDestroy(() => this._stopPlaybackFrame());\n  }\n\n  public readonly zSrc = input.required<string>();\n  public readonly zTitle = input('');\n  public readonly zTags = input<readonly string[]>([]);\n  public readonly zDownload = input(true);\n  public readonly zLoaded = output<void>();\n  public readonly zError = output<Error>();\n  public readonly zPlay = output<boolean>();\n\n  protected readonly audio = viewChild.required<ElementRef<HTMLAudioElement>>('audio');\n  protected readonly isPlaying = signal(false);\n  protected readonly currentTime = signal(0);\n  protected readonly duration = signal(0);\n  protected readonly waveform = Z_AUDIO_PLAYER_WAVEFORM;\n  protected readonly title = this.zTitle;\n  protected readonly tags = this.zTags;\n\n  protected readonly progress = computed(() => {\n    const duration = this.duration();\n    return duration > 0 ? this.currentTime() / duration : 0;\n  });\n\n  protected readonly currentTimeLabel = computed(() => this._formatTime(this.currentTime()));\n  protected readonly durationLabel = computed(() => this._formatTime(this.duration()));\n\n  protected async togglePlay(): Promise<void> {\n    const audio = this.audio().nativeElement;\n    if (audio.paused) {\n      await audio.play();\n      return;\n    }\n\n    audio.pause();\n  }\n\n  protected onWaveformPointerDown(event: PointerEvent): void {\n    if (event.button !== 0 || !(event.currentTarget instanceof HTMLElement)) {\n      return;\n    }\n\n    this._isSeeking = true;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    this._seekToPointerPosition(event);\n  }\n\n  protected onWaveformPointerMove(event: PointerEvent): void {\n    if (!this._isSeeking) {\n      return;\n    }\n\n    this._seekToPointerPosition(event);\n  }\n\n  protected onWaveformPointerUp(event: PointerEvent): void {\n    if (!(event.currentTarget instanceof HTMLElement)) {\n      return;\n    }\n\n    this._isSeeking = false;\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n  }\n\n  private _seekToPointerPosition(event: PointerEvent): void {\n    if (!(event.currentTarget instanceof HTMLElement)) {\n      return;\n    }\n\n    const duration = this.duration();\n    const track = event.currentTarget.querySelector<HTMLElement>('.z-audio-player__waveform-track');\n    const bounds = track?.getBoundingClientRect();\n    if (!bounds) {\n      return;\n    }\n\n    const width = bounds.width;\n    if (duration <= 0 || width <= 0) {\n      return;\n    }\n\n    const offset = Math.min(Math.max(event.clientX - bounds.left, 0), width);\n    this._seekToTime((offset / width) * duration);\n  }\n\n  protected onWaveformKeydown(event: KeyboardEvent): void {\n    const duration = this.duration();\n    if (duration <= 0) {\n      return;\n    }\n\n    const step = event.shiftKey ? 10 : 5;\n    const currentTime = this.currentTime();\n    const nextTime = {\n      ArrowLeft: currentTime - step,\n      ArrowRight: currentTime + step,\n      Home: 0,\n      End: duration,\n    }[event.key];\n\n    if (nextTime === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n    this._seekToTime(nextTime);\n  }\n\n  protected onLoadedMetadata(): void {\n    this.duration.set(Number.isFinite(this.audio().nativeElement.duration) ? this.audio().nativeElement.duration : 0);\n    this.zLoaded.emit();\n  }\n\n  protected onLoadStart(): void {\n    this._stopPlaybackFrame();\n    this.currentTime.set(0);\n    this.duration.set(0);\n    this.isPlaying.set(false);\n  }\n\n  protected onTimeUpdate(): void {\n    if (this._animationFrameId === null) {\n      this.currentTime.set(this.audio().nativeElement.currentTime);\n    }\n  }\n\n  protected onEnded(): void {\n    this._stopPlaybackFrame();\n    this.currentTime.set(this.audio().nativeElement.currentTime);\n    this.isPlaying.set(false);\n    this.zPlay.emit(false);\n  }\n\n  protected onError(): void {\n    this.isPlaying.set(false);\n    this.zError.emit(new Error('i18n_z_ui_gallery_preview_load_error'));\n  }\n\n  protected onPlayStateChange(isPlaying: boolean): void {\n    this.isPlaying.set(isPlaying);\n    this.zPlay.emit(isPlaying);\n\n    if (isPlaying) {\n      this._startPlaybackFrame();\n      return;\n    }\n\n    this._stopPlaybackFrame();\n    this.currentTime.set(this.audio().nativeElement.currentTime);\n  }\n\n  private _seekToTime(time: number): void {\n    const audio = this.audio().nativeElement;\n    const nextTime = Math.min(Math.max(time, 0), this.duration());\n    audio.currentTime = nextTime;\n    this.currentTime.set(audio.currentTime);\n  }\n\n  private _startPlaybackFrame(): void {\n    if (this._animationFrameId !== null) {\n      return;\n    }\n\n    const update = (): void => {\n      const audio = this.audio().nativeElement;\n      this.currentTime.set(audio.currentTime);\n\n      if (!audio.paused && !audio.ended) {\n        this._animationFrameId = window.requestAnimationFrame(update);\n        return;\n      }\n\n      this._animationFrameId = null;\n    };\n\n    this._animationFrameId = window.requestAnimationFrame(update);\n  }\n\n  private _stopPlaybackFrame(): void {\n    if (this._animationFrameId === null) {\n      return;\n    }\n\n    window.cancelAnimationFrame(this._animationFrameId);\n    this._animationFrameId = null;\n  }\n\n  private _formatTime(value: number): string {\n    if (!Number.isFinite(value) || value < 0) {\n      return '0:00';\n    }\n\n    const minutes = Math.floor(value / 60);\n    const seconds = Math.floor(value % 60)\n      .toString()\n      .padStart(2, '0');\n    return `${minutes}:${seconds}`;\n  }\n}\n","<section\n  class=\"border-border bg-card text-foreground relative overflow-hidden rounded-lg border shadow-sm\"\n  [attr.aria-label]=\"title() || ('i18n_z_ui_gallery_preview' | translate)\">\n  <audio\n    #audio\n    class=\"sr-only\"\n    [src]=\"zSrc()\"\n    preload=\"metadata\"\n    (loadstart)=\"onLoadStart()\"\n    (play)=\"onPlayStateChange(true)\"\n    (pause)=\"onPlayStateChange(false)\"\n    (loadedmetadata)=\"onLoadedMetadata()\"\n    (timeupdate)=\"onTimeUpdate()\"\n    (ended)=\"onEnded()\"\n    (error)=\"onError()\"></audio>\n\n  <div\n    class=\"focus-visible:outline-ring relative h-[7.5rem] cursor-pointer touch-none overflow-hidden px-4 py-5 select-none [background:color-mix(in_oklab,var(--primary)_8%,var(--card))] focus-visible:outline-2 focus-visible:outline-offset-[-2px] max-[30rem]:h-24\"\n    role=\"slider\"\n    tabindex=\"0\"\n    [attr.aria-label]=\"'i18n_z_ui_audio_player_seek' | translate\"\n    [attr.aria-valuemin]=\"0\"\n    [attr.aria-valuemax]=\"duration()\"\n    [attr.aria-valuenow]=\"currentTime()\"\n    (pointerdown)=\"onWaveformPointerDown($event)\"\n    (pointermove)=\"onWaveformPointerMove($event)\"\n    (pointerup)=\"onWaveformPointerUp($event)\"\n    (pointercancel)=\"onWaveformPointerUp($event)\"\n    (keydown)=\"onWaveformKeydown($event)\">\n    <div\n      class=\"z-audio-player__waveform-track absolute inset-[1.25rem_1rem] flex cursor-pointer items-center gap-[0.2rem] overflow-hidden\">\n      @for (bar of waveform; track $index) {\n        <span\n          class=\"max-h-full min-h-[0.1rem] min-w-[0.1rem] flex-1 rounded-full\"\n          [style.background]=\"\n            ($index + 0.5) / waveform.length < progress()\n              ? 'var(--primary)'\n              : 'color-mix(in oklab, var(--muted-foreground) 42%, transparent)'\n          \"\n          [style.height.%]=\"bar\"></span>\n      }\n      <span\n        class=\"bg-foreground pointer-events-none absolute top-0 bottom-0 z-[1] w-[3px] -translate-x-1/2 translate-z-0 [box-shadow:0_0_0_1px_color-mix(in_oklab,var(--foreground)_24%,transparent)]\"\n        [style.left.%]=\"progress() * 100\">\n        <span class=\"bg-foreground absolute top-[-0.2rem] left-1/2 size-[0.55rem] -translate-x-1/2 rounded-full\"></span>\n      </span>\n    </div>\n  </div>\n\n  <div\n    class=\"flex min-w-0 items-end justify-between gap-4 p-4 max-[30rem]:flex-col max-[30rem]:items-start max-[30rem]:gap-3 max-[30rem]:pr-4\">\n    <div class=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n      <span class=\"min-w-0 overflow-hidden text-base font-semibold text-ellipsis whitespace-nowrap\">{{ title() }}</span>\n      @if (tags().length) {\n        <div class=\"flex flex-wrap gap-[0.35rem]\">\n          @for (tag of tags(); track tag) {\n            <span class=\"bg-muted text-muted-foreground rounded-md px-2 py-1 text-xs leading-none\">{{ tag }}</span>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"flex flex-none items-center gap-2\">\n      <span class=\"text-muted-foreground text-sm tabular-nums\">{{ currentTimeLabel() }} / {{ durationLabel() }}</span>\n      @if (zDownload()) {\n        <a\n          z-button\n          zType=\"default\"\n          zSize=\"sm\"\n          zShape=\"circle\"\n          [zWave]=\"false\"\n          [href]=\"zSrc()\"\n          [download]=\"title() || null\"\n          [attr.aria-label]=\"'i18n_z_ui_gallery_download' | translate\"\n          [title]=\"'i18n_z_ui_gallery_download' | translate\"\n          class=\"inline-flex items-center justify-center no-underline\">\n          <z-icon zType=\"lucideDownload\" zSize=\"16\" />\n        </a>\n      }\n    </div>\n  </div>\n\n  <button\n    z-button\n    zType=\"default\"\n    zSize=\"xl\"\n    zShape=\"circle\"\n    [zWave]=\"false\"\n    type=\"button\"\n    class=\"absolute top-20 right-4 z-[1] shadow-md max-[30rem]:top-16\"\n    [attr.aria-label]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    [title]=\"(isPlaying() ? 'i18n_z_ui_media_player_pause' : 'i18n_z_ui_media_player_play') | translate\"\n    (click)=\"togglePlay()\">\n    <z-icon\n      [zType]=\"isPlaying() ? 'tablerPlayerPauseFill' : 'tablerPlayerPlayFill'\"\n      zSize=\"24\"\n      [class.translate-x-px]=\"!isPlaying()\" />\n  </button>\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAAO,MAAM,uBAAuB,GAAG;IACrC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAClH,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAClH,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAClH,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAClH,EA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"}

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

@@ -1128,7 +1128,7 @@ class ZAutocompleteComponent {
                 useExisting: forwardRef(() => ZAutocompleteComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\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() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "pipe", type: ZHighlightPipe, name: "zHighlight" }, { kind: "pipe", type: ZSafeHtmlPipe, name: "zSafeHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], queries: [{ propertyName: "customOptionDirective", first: true, predicate: (ZAutocompleteOptionDirective), descendants: true, isSignal: true }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["dropdownTpl"], descendants: true, isSignal: true }, { propertyName: "virtualScrollRef", first: true, predicate: ["virtualScrollElement"], descendants: true, isSignal: true }, { propertyName: "optionsContainerRef", first: true, predicate: ["optionsContainer"], descendants: true, isSignal: true }, { propertyName: "loadMoreSentinelRef", first: true, predicate: ["loadMoreSentinel"], descendants: true, isSignal: true }, { propertyName: "virtualOptionElements", predicate: ["virtualOptionEl"], descendants: true, isSignal: true }], exportAs: ["zAutocomplete"], ngImport: i0, template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\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() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZLoadingComponent, selector: "z-loading", inputs: ["class", "zSpinner", "zSize", "zColor", "zText", "zOverlay", "zOverlayType", "zFullscreen", "zLoading"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { 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: "22.1.2", ngImport: i0, type: ZAutocompleteComponent, decorators: [{
             type: Component,
@@ -1149,7 +1149,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
                             useExisting: forwardRef(() => ZAutocompleteComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\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() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zAutocomplete', template: "<div class=\"z-autocomplete-wrapper relative flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"autocompleteId\" 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\n    #triggerEl\n    z-popover\n    [zPopoverContent]=\"dropdownTpl\"\n    [zOffset]=\"0\"\n    [zDisabled]=\"isInteractionDisabled()\"\n    zPopoverWidth=\"trigger\"\n    zPopoverTrigger=\"manual\"\n    zPosition=\"bottom\"\n    zClass=\"border-0 shadow-none bg-transparent p-0\"\n    (zControl)=\"onPopoverControl($event)\"\n    (zShow)=\"onPopoverShow()\"\n    (zHideStart)=\"onPopoverHideStart()\"\n    (zHide)=\"onPopoverHideEnd()\"\n    (zPositionChange)=\"onPositionChange($event)\"\n    class=\"z-autocomplete-trigger\"\n    [class]=\"inputClasses()\"\n    z-tooltip\n    [zContent]=\"inputValue()\"\n    [zShowDelay]=\"300\"\n    zTooltipTrigger=\"hover\"\n    zTooltipPosition=\"top\"\n    [zTooltipDisabled]=\"uiState().isFocused || uiState().isOpen || !hasValue()\"\n    [zTriggerElement]=\"inputEl\"\n    [class.z-autocomplete-open]=\"uiState().isOpen\"\n    [class.z-autocomplete-open-top]=\"uiState().isOpen && isPositionTop()\"\n    [class.z-autocomplete-open-bottom]=\"uiState().isOpen && !isPositionTop()\"\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() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n    }\n\n    <input\n      #inputEl\n      [id]=\"autocompleteId\"\n      type=\"text\"\n      class=\"z-autocomplete-input placeholder:text-muted-foreground min-w-0 flex-1 overflow-hidden bg-transparent text-ellipsis whitespace-nowrap outline-none\"\n      [class.text-sm]=\"zSize() === 'sm' || zSize() === 'default'\"\n      [placeholder]=\"zPlaceholder()\"\n      [disabled]=\"isDisabled()\"\n      [readOnly]=\"isReadonly()\"\n      [value]=\"inputValue()\"\n      (mousedown)=\"isReadonly() && $event.preventDefault()\"\n      (input)=\"onInput($event)\"\n      (focus)=\"onFocus($event)\"\n      (blur)=\"onBlur($event)\"\n      (click)=\"onInputClick()\"\n      (keydown)=\"onKeydown($event)\"\n      autocomplete=\"off\"\n      autocorrect=\"off\"\n      spellcheck=\"false\" />\n\n    @if (isLoading() || isLoadingState() || isLoadingMore()) {\n      <z-icon zType=\"lucideLoaderCircle\" zSize=\"16\" class=\"text-muted-foreground shrink-0 animate-spin\" />\n    } @else {\n      @if (zAllowClear() && hasValue() && !isDisabled() && !isReadonly()) {\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground flex shrink-0 cursor-pointer items-center justify-center transition-colors\"\n          (mousedown)=\"clearInput($event)\"\n          tabindex=\"-1\">\n          <z-icon zType=\"lucideX\" zSize=\"18\" class=\"cursor-pointer!\" />\n        </button>\n      }\n\n      @if (zSuffix()) {\n        <z-icon [zType]=\"zSuffix() || 'lucideSearch'\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n      }\n    }\n  </div>\n</div>\n\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    [id]=\"dropdownId\"\n    class=\"z-autocomplete-dropdown bg-popover border-ring overflow-hidden border shadow-[var(--z-popover-shadow)]\"\n    [class.z-autocomplete-dropdown-bottom]=\"!isPositionTop()\"\n    [class.rounded-b-sm]=\"!isPositionTop()\"\n    [class.rounded-t-sm]=\"isPositionTop()\"\n    [class.border-t-0]=\"!isPositionTop()\"\n    [class.border-b-0]=\"isPositionTop()\"\n    [style.width.px]=\"dropdownWidth()\"\n    role=\"listbox\"\n    (mousedown)=\"$event.preventDefault()\">\n    @if (isLoading() || isLoadingState()) {\n      <div\n        class=\"z-autocomplete-content-state flex flex-col items-center justify-center\"\n        [style.minHeight.px]=\"effectiveHeightExpand()\">\n        <z-loading [zLoading]=\"true\" zSize=\"default\" />\n      </div>\n    } @else {\n      @if (filteredOptions().length === 0) {\n        <!-- Empty State -->\n        <div\n          class=\"z-autocomplete-content-state flex flex-col items-center justify-center p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\">\n          @if (inputValue().trim() !== '') {\n            <!-- Searched but no results -->\n            <z-empty [zIcon]=\"zEmptyIcon()\" zSize=\"sm\" [zMessage]=\"effectiveEmptyText()\" />\n          } @else {\n            <!-- No data initially -->\n            <z-empty [zIcon]=\"zNoDataIcon()\" zSize=\"sm\" [zMessage]=\"effectiveNoDataText()\" />\n          }\n        </div>\n      } @else if (shouldUseVirtualScroll()) {\n        <!-- Virtual Scroll Mode -->\n        <div\n          #virtualScrollElement\n          class=\"z-autocomplete-content-state z-autocomplete-options z-autocomplete-virtual-scroll relative overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.height.px]=\"effectiveHeightExpand()\">\n          <div class=\"z-autocomplete-virtual-inner relative\" [style.height.px]=\"virtualizer.getTotalSize()\">\n            @for (virtualItem of virtualizer.getVirtualItems(); track virtualItem.index) {\n              @let opt = filteredOptions()[virtualItem.index];\n              @let isActive = activeIndex() === virtualItem.index;\n              <div\n                #virtualOptionEl\n                class=\"z-autocomplete-option absolute right-0 left-0 min-w-0\"\n                [ngClass]=\"getOptionClasses(opt, virtualItem.index)\"\n                [attr.data-index]=\"virtualItem.index\"\n                [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n                [style.height.px]=\"zDynamicSize() ? null : effectiveOptionHeight()\"\n                [style.minHeight.px]=\"zDynamicSize() ? effectiveOptionHeight() : null\"\n                [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n                [style.transform]=\"'translateY(' + virtualItem.start + 'px)'\"\n                [attr.aria-selected]=\"isActive\"\n                role=\"option\"\n                (mouseenter)=\"activeIndex.set(virtualItem.index)\"\n                (click)=\"selectOption(opt)\">\n                @if (effectiveOptionTemplate()) {\n                  <ng-container\n                    *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n                } @else {\n                  @if (opt.icon) {\n                    <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                  }\n                  <div class=\"min-w-0 flex-1\">\n                    <span\n                      class=\"block min-w-0 truncate\"\n                      z-tooltip\n                      [zContent]=\"opt.label\"\n                      [zShowDelay]=\"300\"\n                      zPosition=\"top\"\n                      [zHideDelay]=\"0\"\n                      [zOffset]=\"5\"\n                      [zArrow]=\"false\"\n                      [zTriggerElement]=\"virtualOptionEl\"\n                      [innerHTML]=\"\n                        config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                      \"></span>\n                    @if (opt.description) {\n                      <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      } @else {\n        <!-- Normal Scroll Mode -->\n        <div\n          #optionsContainer\n          class=\"z-autocomplete-content-state z-autocomplete-options flex flex-col gap-0.75 overflow-x-hidden overflow-y-auto overscroll-y-contain p-1\"\n          [style.minHeight.px]=\"effectiveHeightExpand()\"\n          [style.maxHeight.px]=\"effectiveHeightExpand()\">\n          @for (item of optionViews(); track item.trackKey) {\n            @let opt = item.option;\n            @let i = item.index;\n            @let isActive = activeIndex() === i;\n            <div\n              #optionEl2\n              class=\"z-autocomplete-option relative min-w-0\"\n              [ngClass]=\"getOptionClasses(opt, i)\"\n              [style.display]=\"hasCustomOptionTemplate() ? 'block' : null\"\n              [style.minHeight.px]=\"hasCustomOptionTemplate() ? null : effectiveOptionHeight()\"\n              [style.overflow]=\"hasCustomOptionTemplate() ? 'visible' : null\"\n              [attr.aria-selected]=\"isActive\"\n              role=\"option\"\n              (mouseenter)=\"activeIndex.set(i)\"\n              (click)=\"selectOption(opt)\">\n              @if (effectiveOptionTemplate()) {\n                <ng-container\n                  *ngTemplateOutlet=\"effectiveOptionTemplate()!; context: { $implicit: opt, active: isActive }\" />\n              } @else {\n                @if (opt.icon) {\n                  <z-icon [zType]=\"opt.icon\" zSize=\"16\" class=\"shrink-0\" />\n                }\n                <div class=\"min-w-0 flex-1\">\n                  <span\n                    class=\"block min-w-0 truncate\"\n                    z-tooltip\n                    [zContent]=\"opt.label\"\n                    [zShowDelay]=\"300\"\n                    zPosition=\"top\"\n                    [zHideDelay]=\"0\"\n                    [zOffset]=\"5\"\n                    [zArrow]=\"false\"\n                    [zTriggerElement]=\"optionEl2\"\n                    [innerHTML]=\"\n                      config().highlightMatch ? (opt.label | zHighlight: highlightQuery() | zSafeHtml) : opt.label\n                    \"></span>\n                  @if (opt.description) {\n                    <span class=\"text-muted-foreground block min-w-0 truncate text-xs\">{{ opt.description }}</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (canLoadMore()) {\n            <div #loadMoreSentinel class=\"h-px w-full shrink-0\"></div>\n          }\n        </div>\n      }\n\n      @if (isLoadingMore()) {\n        <div class=\"z-autocomplete-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  </div>\n</ng-template>\n", styles: [".z-autocomplete-wrapper{width:100%}.z-autocomplete-trigger{-webkit-user-select:none;user-select:none}.z-autocomplete-trigger:focus-within{outline:none}.z-autocomplete-trigger *{cursor:inherit}.z-autocomplete-input{text-overflow:ellipsis;overflow:hidden}.z-autocomplete-input::placeholder{color:hsl(var(--muted-foreground))}.z-autocomplete-input:disabled{cursor:not-allowed}.z-autocomplete-open-bottom{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.z-autocomplete-open-top{border-top-left-radius:0!important;border-top-right-radius:0!important}.z-autocomplete-dropdown{animation:z-autocomplete-dropdown-from-top .15s ease-out}.z-autocomplete-dropdown-bottom{animation:z-autocomplete-dropdown-from-bottom .15s ease-out}@keyframes z-autocomplete-dropdown-from-top{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}@keyframes z-autocomplete-dropdown-from-bottom{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.z-autocomplete-separator{display:none}.z-autocomplete-options{overflow-x:hidden!important}.z-autocomplete-scrollbar{--scrollbar-padding: 0;--scrollbar-track-color: transparent;--scrollbar-thumb-color: hsl(var(--muted-foreground) / .3);--scrollbar-thumb-hover-color: hsl(var(--muted-foreground) / .5);--scrollbar-size: 6px}.z-autocomplete-virtual-scroll .z-autocomplete-virtual-inner{width:100%}.z-autocomplete-content-state{animation:z-autocomplete-content-fade-in .15s ease-out}@keyframes z-autocomplete-content-fade-in{0%{opacity:0}to{opacity:1}}.z-autocomplete-option mark{background:transparent;color:hsl(var(--primary));font-weight:600}.z-autocomplete-option{transition:background-color .1s ease,color .1s ease}.z-autocomplete-options:not(.z-autocomplete-virtual-scroll) .z-autocomplete-option{animation:z-autocomplete-option-enter .12s ease-out;animation-fill-mode:both}@keyframes z-autocomplete-option-enter{0%{opacity:0}to{opacity:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], dropdownTpl: [{ type: i0.ViewChild, args: ['dropdownTpl', { isSignal: true }] }], virtualScrollRef: [{ type: i0.ViewChild, args: ['virtualScrollElement', { isSignal: true }] }], optionsContainerRef: [{ type: i0.ViewChild, args: ['optionsContainer', { isSignal: true }] }], loadMoreSentinelRef: [{ type: i0.ViewChild, args: ['loadMoreSentinel', { isSignal: true }] }], virtualOptionElements: [{ type: i0.ViewChildren, args: ['virtualOptionEl', { isSignal: true }] }], customOptionDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZAutocompleteOptionDirective), { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptions", required: false }] }], zConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zConfig", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", 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 }] }], 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 }] }], zLoadingOutline: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoadingOutline", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVirtualScroll", required: false }] }], zDynamicSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDynamicSize", required: false }] }], zOptionHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionHeight", required: false }] }], zDropdownMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDropdownMaxHeight", required: false }] }], zHeightExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeightExpand", required: false }] }], zMaxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxVisible", required: false }] }], zResetOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResetOnSelect", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zNoDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataText", required: false }] }], zNoDataIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNoDataIcon", required: false }] }], zAllowCustomValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowCustomValue", required: false }] }], zDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounceTime", 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 }] }], zKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zKey", required: false }] }], zOptionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOptionTemplate", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnLoadMore: [{ type: i0.Output, args: ["zOnLoadMore"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnCommit: [{ type: i0.Output, args: ["zOnCommit"] }], zValueChange: [{ type: i0.Output, args: ["zValueChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }] } });
 
 /**