@shival99/z-ui 1.4.2 → 1.4.3

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

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, computed, inject, Injector, DestroyRef, TemplateRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, Injector, DestroyRef, viewChild, output, input, signal, computed, TemplateRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1 from '@angular/forms';
 import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -70,6 +70,14 @@ const zTextareaVariants = cva([
 });
 
 class ZInputComponent {
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _toastService = inject(ZToastService);
+    _zTranslate = inject(ZTranslateService);
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    zOnSearch = output();
+    zOnChange = output();
+    zControl = output();
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     zType = input('text', ...(ngDevMode ? [{ debugName: "zType" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
@@ -105,32 +113,6 @@ class ZInputComponent {
     zResize = input(true, { ...(ngDevMode ? { debugName: "zResize" } : {}), transform: zTransform });
     zMaxLength = input(undefined, ...(ngDevMode ? [{ debugName: "zMaxLength" }] : []));
     zAutoSuggest = input(undefined, ...(ngDevMode ? [{ debugName: "zAutoSuggest" }] : []));
-    zOnSearch = output();
-    zOnChange = output();
-    zControl = output();
-    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
-    inputId = zUuid('z-input');
-    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : []));
-    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
-    suggestHistory = signal([], ...(ngDevMode ? [{ debugName: "suggestHistory" }] : []));
-    suggestActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : []));
-    showSuggestPopover = signal(false, ...(ngDevMode ? [{ debugName: "showSuggestPopover" }] : []));
-    filteredSuggestHistory = computed(() => {
-        const history = this.suggestHistory();
-        const currentValue = String(this._value() ?? '')
-            .toLowerCase()
-            .trim();
-        if (!currentValue) {
-            return history;
-        }
-        const matching = [];
-        const nonMatching = [];
-        for (const item of history) {
-            const target = item.toLowerCase().includes(currentValue) ? matching : nonMatching;
-            target.push(item);
-        }
-        return [...matching, ...nonMatching];
-    }, ...(ngDevMode ? [{ debugName: "filteredSuggestHistory" }] : []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
     _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
     _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
@@ -138,29 +120,25 @@ class ZInputComponent {
     _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
     _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
     _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
-    _injector = inject(Injector);
-    _destroyRef = inject(DestroyRef);
-    _toastService = inject(ZToastService);
-    _zTranslate = inject(ZTranslateService);
-    _searchSubject = new Subject();
-    _changeSubject = new Subject();
-    _asyncValidationSubject = new Subject();
-    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
     _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
-    _asyncCancelSubject = new Subject();
-    _asyncValidationAbortController = null;
-    _onChange = () => void 0;
-    _onTouched = () => void 0;
-    _ngControl = null;
+    inputId = zUuid('z-input');
+    suggestHistory = signal([], ...(ngDevMode ? [{ debugName: "suggestHistory" }] : []));
+    suggestActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : []));
+    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
+    uiState = signal({
+        passwordVisible: false,
+        isFocused: false,
+        showSuggestPopover: false,
+        colorCopied: false,
+    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
     isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
     isPasswordType = computed(() => this.zType() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordType" }] : []));
     isColorType = computed(() => this.zType() === 'color', ...(ngDevMode ? [{ debugName: "isColorType" }] : []));
-    colorCopied = signal(false, ...(ngDevMode ? [{ debugName: "colorCopied" }] : []));
     isPrefixTemplate = computed(() => this.zPrefix() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isPrefixTemplate" }] : []));
     isSuffixTemplate = computed(() => this.zSuffix() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isSuffixTemplate" }] : []));
     isTextarea = computed(() => this.zType() === 'textarea', ...(ngDevMode ? [{ debugName: "isTextarea" }] : []));
     effectiveType = computed(() => {
-        if (this.zType() === 'password' && this.passwordVisible()) {
+        if (this.zType() === 'password' && this.uiState().passwordVisible) {
             return 'text';
         }
         if (this.zType() === 'number' && this.effectiveMask()) {
@@ -200,6 +178,22 @@ class ZInputComponent {
         }
         return String(val);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    filteredSuggestHistory = computed(() => {
+        const history = this.suggestHistory();
+        const currentValue = String(this._value() ?? '')
+            .toLowerCase()
+            .trim();
+        if (!currentValue) {
+            return history;
+        }
+        const matching = [];
+        const nonMatching = [];
+        for (const item of history) {
+            const target = item.toLowerCase().includes(currentValue) ? matching : nonMatching;
+            target.push(item);
+        }
+        return [...matching, ...nonMatching];
+    }, ...(ngDevMode ? [{ debugName: "filteredSuggestHistory" }] : []));
     _shouldShowValidation = computed(() => {
         const control = this._formControl();
         this._formStateVersion();
@@ -290,6 +284,22 @@ class ZInputComponent {
         return value !== null && value !== undefined && value !== '';
     }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
     showClearButton = computed(() => this.zAllowClear() && this.hasValue() && !this.isDisabled() && !this.zReadonly(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    state = computed(() => ({
+        focused: this.uiState().isFocused,
+        touched: this._touched(),
+        blurred: !this.uiState().isFocused,
+        dirty: this._dirty(),
+        disabled: this.isDisabled(),
+        readonly: this.zReadonly(),
+    }), ...(ngDevMode ? [{ debugName: "state" }] : []));
+    _searchSubject = new Subject();
+    _changeSubject = new Subject();
+    _asyncValidationSubject = new Subject();
+    _asyncCancelSubject = new Subject();
+    _asyncValidationAbortController = null;
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
     ngOnInit() {
         queueMicrotask(() => {
             try {
@@ -331,86 +341,6 @@ class ZInputComponent {
             }, 20);
         }
     }
-    async _runAsyncValidation(value) {
-        const asyncValidators = this.zAsyncValidators();
-        if (asyncValidators.length === 0) {
-            return;
-        }
-        if ((value === null || value === undefined || value === '') && !this.zRequired()) {
-            this._asyncErrors.set(new Map());
-            this.isValidating.set(false);
-            return;
-        }
-        this._cancelAsyncValidation();
-        this._asyncValidationAbortController = new AbortController();
-        const { signal } = this._asyncValidationAbortController;
-        this.isValidating.set(true);
-        const errors = new Map();
-        try {
-            const validationPromises = asyncValidators.map(async (validator) => {
-                if (signal.aborted) {
-                    return null;
-                }
-                try {
-                    const result = validator.validate(value);
-                    if (!isObservable(result)) {
-                        const isValid = await result;
-                        if (signal.aborted) {
-                            return null;
-                        }
-                        return { validator, isValid };
-                    }
-                    const safeResult$ = result.pipe(takeUntil(this._asyncCancelSubject), catchError(err => {
-                        console.error(`Async validation error for ${validator.error}:`, err);
-                        return of(false);
-                    }));
-                    const isValid = await firstValueFrom(safeResult$);
-                    if (signal.aborted) {
-                        return null;
-                    }
-                    return { validator, isValid };
-                }
-                catch (error) {
-                    if (!signal.aborted) {
-                        console.error(`Async validation error for ${validator.error}:`, error);
-                        return {
-                            validator,
-                            isValid: false,
-                            error: true,
-                        };
-                    }
-                    return null;
-                }
-            });
-            const results = await Promise.all(validationPromises);
-            if (signal.aborted) {
-                return;
-            }
-            for (const result of results) {
-                if (result && !result.isValid) {
-                    errors.set(result.validator.error, result.validator.message);
-                }
-            }
-            this._asyncErrors.set(errors);
-        }
-        catch (error) {
-            if (!signal.aborted) {
-                console.error('Async validation error:', error);
-            }
-        }
-        finally {
-            if (!signal.aborted) {
-                this.isValidating.set(false);
-            }
-        }
-    }
-    _cancelAsyncValidation() {
-        if (this._asyncValidationAbortController) {
-            this._asyncValidationAbortController.abort();
-            this._asyncValidationAbortController = null;
-        }
-        this._asyncCancelSubject.next();
-    }
     writeValue(value) {
         this._value.set(value);
     }
@@ -471,6 +401,22 @@ class ZInputComponent {
     getValue() {
         return this._value();
     }
+    saveToSuggestHistory(value) {
+        const key = this.zAutoSuggest();
+        if (!key || !value || value.trim() === '') {
+            return;
+        }
+        const cacheKey = `autosuggest-${key}`;
+        let history = ZCacheService.get(cacheKey, []) ?? [];
+        const trimmedValue = value.trim();
+        history = history.filter(item => item !== trimmedValue);
+        history.unshift(trimmedValue);
+        if (history.length > 5) {
+            history = history.slice(0, 5);
+        }
+        ZCacheService.set(cacheKey, history);
+        this.suggestHistory.set(history);
+    }
     clearValue(event) {
         event.stopPropagation();
         this._value.set(null);
@@ -482,23 +428,6 @@ class ZInputComponent {
         }
         this.focus();
     }
-    _emitControl() {
-        this.zControl.emit({
-            validate: () => this.validate(),
-            reset: () => this.reset(),
-            focus: () => this.focus(),
-            blur: () => this.blur(),
-            markAsTouched: () => this.markAsTouched(),
-            markAsUntouched: () => this.markAsUntouched(),
-            markAsDirty: () => this.markAsDirty(),
-            markAsPristine: () => this.markAsPristine(),
-            setValue: (value) => this.setValue(value),
-            hasError: this.hasError,
-            isValidating: this.isValidating,
-            value: this._value.asReadonly(),
-            errorMessage: this.errorMessage,
-        });
-    }
     onInput(event) {
         const { value: rawValue } = event.target;
         let value = rawValue;
@@ -528,7 +457,6 @@ class ZInputComponent {
         this._value.set(value);
         this._dirty.set(true);
         this._onChange(value);
-        // Emit debounced change event
         this._changeSubject.next(value);
         if (this.zSearch()) {
             this._searchSubject.next(value);
@@ -536,7 +464,7 @@ class ZInputComponent {
         if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'change') {
             this._asyncValidationSubject.next(value);
         }
-        if (this.hasAutoSuggest() && this.isFocused()) {
+        if (this.hasAutoSuggest() && this.uiState().isFocused) {
             this._loadSuggestHistory();
             if (this.suggestHistory().length > 0) {
                 this._showSuggestPopover();
@@ -549,7 +477,7 @@ class ZInputComponent {
             this._touched.set(true);
         }
         this._onTouched();
-        this.isFocused.set(false);
+        this.uiState.update(s => ({ ...s, isFocused: false }));
         if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'blur') {
             this._asyncValidationSubject.next(this._value());
         }
@@ -564,7 +492,7 @@ class ZInputComponent {
         }
     }
     onFocus() {
-        this.isFocused.set(true);
+        this.uiState.update(s => ({ ...s, isFocused: true }));
         this._loadSuggestHistory();
         if (this.hasAutoSuggest() && this.suggestHistory().length > 0) {
             this._showSuggestPopover();
@@ -588,7 +516,7 @@ class ZInputComponent {
         if (event.key === 'Enter' && this.hasAutoSuggest()) {
             const activeIndex = this.suggestActiveIndex();
             const history = this.filteredSuggestHistory();
-            if (this.showSuggestPopover() && activeIndex >= 0 && activeIndex < history.length) {
+            if (this.uiState().showSuggestPopover && activeIndex >= 0 && activeIndex < history.length) {
                 event.preventDefault();
                 this.selectSuggestItem(history[activeIndex]);
                 return;
@@ -604,7 +532,7 @@ class ZInputComponent {
             }
             return;
         }
-        if (!this.hasAutoSuggest() || !this.showSuggestPopover()) {
+        if (!this.hasAutoSuggest() || !this.uiState().showSuggestPopover) {
             return;
         }
         const history = this.filteredSuggestHistory();
@@ -647,27 +575,127 @@ class ZInputComponent {
             this.suggestActiveIndex.set(-1);
         }, 150);
     }
-    _showSuggestPopover() {
-        this.showSuggestPopover.set(true);
+    onArrowClick(event, direction) {
+        event.preventDefault();
+        const multiplier = direction === 'up' ? 1 : -1;
+        this._incrementValue(multiplier);
     }
-    _hideSuggestPopover() {
-        this.showSuggestPopover.set(false);
+    togglePasswordVisibility() {
+        this.uiState.update(s => ({ ...s, passwordVisible: !s.passwordVisible }));
     }
-    saveToSuggestHistory(value) {
-        const key = this.zAutoSuggest();
-        if (!key || !value || value.trim() === '') {
+    copyColorToClipboard() {
+        const colorValue = String(this._value() || '#000000').toUpperCase();
+        void navigator.clipboard.writeText(colorValue).then(() => {
+            this.uiState.update(s => ({ ...s, colorCopied: true }));
+            this._toastService.success(`Copied ${colorValue}`);
+            setTimeout(() => {
+                this.uiState.update(s => ({ ...s, colorCopied: false }));
+            }, 1500);
+        });
+    }
+    _emitControl() {
+        this.zControl.emit({
+            validate: () => this.validate(),
+            reset: () => this.reset(),
+            focus: () => this.focus(),
+            blur: () => this.blur(),
+            markAsTouched: () => this.markAsTouched(),
+            markAsUntouched: () => this.markAsUntouched(),
+            markAsDirty: () => this.markAsDirty(),
+            markAsPristine: () => this.markAsPristine(),
+            setValue: (value) => this.setValue(value),
+            hasError: this.hasError,
+            isValidating: this.isValidating,
+            value: this._value.asReadonly(),
+            errorMessage: this.errorMessage,
+            state: this.state,
+        });
+    }
+    async _runAsyncValidation(value) {
+        const asyncValidators = this.zAsyncValidators();
+        if (asyncValidators.length === 0) {
             return;
         }
-        const cacheKey = `autosuggest-${key}`;
-        let history = ZCacheService.get(cacheKey, []) ?? [];
-        const trimmedValue = value.trim();
-        history = history.filter(item => item !== trimmedValue);
-        history.unshift(trimmedValue);
-        if (history.length > 5) {
-            history = history.slice(0, 5);
+        if ((value === null || value === undefined || value === '') && !this.zRequired()) {
+            this._asyncErrors.set(new Map());
+            this.isValidating.set(false);
+            return;
         }
-        ZCacheService.set(cacheKey, history);
-        this.suggestHistory.set(history);
+        this._cancelAsyncValidation();
+        this._asyncValidationAbortController = new AbortController();
+        const { signal } = this._asyncValidationAbortController;
+        this.isValidating.set(true);
+        const errors = new Map();
+        try {
+            const validationPromises = asyncValidators.map(async (validator) => {
+                if (signal.aborted) {
+                    return null;
+                }
+                try {
+                    const result = validator.validate(value);
+                    if (!isObservable(result)) {
+                        const isValid = await result;
+                        if (signal.aborted) {
+                            return null;
+                        }
+                        return { validator, isValid };
+                    }
+                    const safeResult$ = result.pipe(takeUntil(this._asyncCancelSubject), catchError(err => {
+                        console.error(`Async validation error for ${validator.error}:`, err);
+                        return of(false);
+                    }));
+                    const isValid = await firstValueFrom(safeResult$);
+                    if (signal.aborted) {
+                        return null;
+                    }
+                    return { validator, isValid };
+                }
+                catch (error) {
+                    if (!signal.aborted) {
+                        console.error(`Async validation error for ${validator.error}:`, error);
+                        return {
+                            validator,
+                            isValid: false,
+                            error: true,
+                        };
+                    }
+                    return null;
+                }
+            });
+            const results = await Promise.all(validationPromises);
+            if (signal.aborted) {
+                return;
+            }
+            for (const result of results) {
+                if (result && !result.isValid) {
+                    errors.set(result.validator.error, result.validator.message);
+                }
+            }
+            this._asyncErrors.set(errors);
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('Async validation error:', error);
+            }
+        }
+        finally {
+            if (!signal.aborted) {
+                this.isValidating.set(false);
+            }
+        }
+    }
+    _cancelAsyncValidation() {
+        if (this._asyncValidationAbortController) {
+            this._asyncValidationAbortController.abort();
+            this._asyncValidationAbortController = null;
+        }
+        this._asyncCancelSubject.next();
+    }
+    _showSuggestPopover() {
+        this.uiState.update(s => ({ ...s, showSuggestPopover: true }));
+    }
+    _hideSuggestPopover() {
+        this.uiState.update(s => ({ ...s, showSuggestPopover: false }));
     }
     _loadSuggestHistory() {
         const key = this.zAutoSuggest();
@@ -679,24 +707,6 @@ class ZInputComponent {
         const history = ZCacheService.get(cacheKey, []) ?? [];
         this.suggestHistory.set(history);
     }
-    onArrowClick(event, direction) {
-        event.preventDefault();
-        const multiplier = direction === 'up' ? 1 : -1;
-        this._incrementValue(multiplier);
-    }
-    togglePasswordVisibility() {
-        this.passwordVisible.update(v => !v);
-    }
-    copyColorToClipboard() {
-        const colorValue = String(this._value() || '#000000').toUpperCase();
-        void navigator.clipboard.writeText(colorValue).then(() => {
-            this.colorCopied.set(true);
-            this._toastService.success(`Copied ${colorValue}`);
-            setTimeout(() => {
-                this.colorCopied.set(false);
-            }, 1500);
-        });
-    }
     _incrementValue(multiplier) {
         const currentValue = this._value();
         const numValue = typeof currentValue === 'number' ? currentValue : parseFloat(String(currentValue)) || 0;
@@ -776,7 +786,7 @@ class ZInputComponent {
                 useExisting: forwardRef(() => ZInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"colorCopied() ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"colorCopied() ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (passwordVisible()) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && showSuggestPopover() && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZInputComponent, decorators: [{
             type: Component,
@@ -787,8 +797,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useExisting: forwardRef(() => ZInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"colorCopied() ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"colorCopied() ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (passwordVisible()) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && showSuggestPopover() && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"] }]
-        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.