@shival99/z-ui 1.6.10 → 1.7.0

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

@@ -8,7 +8,7 @@ import { TranslatePipe } from '@ngx-translate/core';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZToastService } from '@shival99/z-ui/components/z-toast';
 import { ZTranslateService, ZCacheService } from '@shival99/z-ui/services';
-import { zTransform, zUuid, zMergeClasses } from '@shival99/z-ui/utils';
+import { zTransform, zUuid, zMergeClasses, zCreateEvent } from '@shival99/z-ui/utils';
 import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { Subject, merge, filter, debounceTime, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
 import { cva } from 'class-variance-authority';
@@ -78,6 +78,7 @@ class ZInputComponent {
     zOnSearch = output();
     zOnChange = output();
     zControl = output();
+    zEvent = output();
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     zType = input('text', ...(ngDevMode ? [{ debugName: "zType" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
@@ -114,9 +115,7 @@ class ZInputComponent {
     zMaxLength = input(undefined, ...(ngDevMode ? [{ debugName: "zMaxLength" }] : []));
     zAutoSuggest = input(undefined, ...(ngDevMode ? [{ debugName: "zAutoSuggest" }] : []));
     _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
     _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
     _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
     _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
     _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
@@ -128,56 +127,65 @@ class ZInputComponent {
     uiState = signal({
         passwordVisible: false,
         isFocused: false,
+        touched: false,
+        dirty: false,
         showSuggestPopover: false,
         colorCopied: false,
     }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    typeConfig = computed(() => {
+        const type = this.zType();
+        return {
+            isPassword: type === 'password',
+            isColor: type === 'color',
+            isTextarea: type === 'textarea',
+            isNumber: type === 'number',
+        };
+    }, ...(ngDevMode ? [{ debugName: "typeConfig" }] : []));
+    slotConfig = computed(() => {
+        const prefix = this.zPrefix();
+        const suffix = this.zSuffix();
+        return {
+            isPrefixTemplate: prefix instanceof TemplateRef,
+            isSuffixTemplate: suffix instanceof TemplateRef,
+            hasPrefix: this.zSearch() || !!prefix,
+            hasSuffix: !!suffix,
+        };
+    }, ...(ngDevMode ? [{ debugName: "slotConfig" }] : []));
+    maskConfig = computed(() => {
+        const effectiveMask = this._getEffectiveMask();
+        const effectiveType = this._getEffectiveType(effectiveMask);
+        const effectiveDecimalMarker = this._getEffectiveDecimalMarker();
+        return { effectiveMask, effectiveType, effectiveDecimalMarker };
+    }, ...(ngDevMode ? [{ debugName: "maskConfig" }] : []));
+    displayValue = computed(() => {
+        const val = this._value();
+        return val === null || val === undefined ? '' : String(val);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    hasValue = computed(() => {
+        const value = this._value();
+        return value !== null && value !== undefined && value !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
     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" }] : []));
-    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.uiState().passwordVisible) {
-            return 'text';
-        }
-        if (this.zType() === 'number' && this.effectiveMask()) {
-            return 'text';
-        }
-        return this.zType();
-    }, ...(ngDevMode ? [{ debugName: "effectiveType" }] : []));
-    showArrows = computed(() => this.zType() === 'number' && this.zShowArrows(), ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
-    effectiveMask = computed(() => {
-        if (this.zMask()) {
-            return this.zMask();
-        }
-        if (this.zType() === 'number') {
-            const decimalPlaces = this.zDecimalPlaces();
-            if (decimalPlaces !== undefined) {
-                return `separator.${decimalPlaces}`;
-            }
-            return 'separator.0';
-        }
-        return '';
-    }, ...(ngDevMode ? [{ debugName: "effectiveMask" }] : []));
-    effectiveDecimalMarker = computed(() => {
-        const thousandSep = this.zThousandSeparator();
-        const decimalMark = this.zDecimalMarker();
-        if (thousandSep === '.') {
-            return ',';
+    showArrows = computed(() => this.typeConfig().isNumber && this.zShowArrows(), ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    hasAutoSuggest = computed(() => {
+        const key = this.zAutoSuggest();
+        return key !== undefined && key.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasAutoSuggest" }] : []));
+    showClearButton = computed(() => this.zAllowClear() && this.hasValue() && !this.isDisabled() && !this.zReadonly(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
         }
-        if (thousandSep === ',') {
-            return '.';
+        if (this.zReadonly()) {
+            return 'readonly';
         }
-        return decimalMark;
-    }, ...(ngDevMode ? [{ debugName: "effectiveDecimalMarker" }] : []));
-    displayValue = computed(() => {
-        const val = this._value();
-        if (val === null || val === undefined) {
-            return '';
+        if (this.hasError()) {
+            return 'error';
         }
-        return String(val);
-    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    inputClasses = computed(() => zMergeClasses(zInputVariants({ zSize: this.zSize(), zStatus: this.currentStatus() }), this.class()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    textareaClasses = computed(() => zMergeClasses(zTextareaVariants({ zStatus: this.currentStatus() }), this.class()), ...(ngDevMode ? [{ debugName: "textareaClasses" }] : []));
     filteredSuggestHistory = computed(() => {
         const history = this.suggestHistory();
         const currentValue = String(this._value() ?? '')
@@ -198,12 +206,12 @@ class ZInputComponent {
         const control = this._formControl();
         this._formStateVersion();
         if (this._isNgModel()) {
-            return this._dirty() || this._touched();
+            return this.uiState().dirty || this.uiState().touched;
         }
         if (control) {
             return control.dirty;
         }
-        return this._dirty() || this._touched();
+        return this.uiState().dirty || this.uiState().touched;
     }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
     hasError = computed(() => {
         const asyncErrors = this._asyncErrors();
@@ -221,7 +229,6 @@ class ZInputComponent {
         }
         return control.invalid && this._shouldShowValidation();
     }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
-    showError = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
     errorMessage = computed(() => {
         const asyncErrors = this._asyncErrors();
         if (asyncErrors.size > 0) {
@@ -246,49 +253,11 @@ class ZInputComponent {
         const errorInfo = getDefaultErrorInfo(errors);
         return this._zTranslate.instant(errorInfo.key, errorInfo.params);
     }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
-    hasPrefix = computed(() => this.zSearch() || !!this.zPrefix(), ...(ngDevMode ? [{ debugName: "hasPrefix" }] : []));
-    hasSuffix = computed(() => !!this.zSuffix(), ...(ngDevMode ? [{ debugName: "hasSuffix" }] : []));
-    isTextPrefix = computed(() => {
-        const prefix = this.zPrefix();
-        return typeof prefix === 'string' && prefix.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isTextPrefix" }] : []));
-    isTextSuffix = computed(() => {
-        const suffix = this.zSuffix();
-        return typeof suffix === 'string' && suffix.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "isTextSuffix" }] : []));
-    currentStatus = computed(() => {
-        if (this.isDisabled()) {
-            return 'disabled';
-        }
-        if (this.zReadonly()) {
-            return 'readonly';
-        }
-        if (this.hasError()) {
-            return 'error';
-        }
-        return 'default';
-    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
-    inputClasses = computed(() => zMergeClasses(zInputVariants({
-        zSize: this.zSize(),
-        zStatus: this.currentStatus(),
-    }), this.class()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
-    textareaClasses = computed(() => zMergeClasses(zTextareaVariants({
-        zStatus: this.currentStatus(),
-    }), this.class()), ...(ngDevMode ? [{ debugName: "textareaClasses" }] : []));
-    hasAutoSuggest = computed(() => {
-        const key = this.zAutoSuggest();
-        return key !== undefined && key.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasAutoSuggest" }] : []));
-    hasValue = computed(() => {
-        const value = this._value();
-        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(),
+        touched: this.uiState().touched,
         blurred: !this.uiState().isFocused,
-        dirty: this._dirty(),
+        dirty: this.uiState().dirty,
         disabled: this.isDisabled(),
         readonly: this.zReadonly(),
     }), ...(ngDevMode ? [{ debugName: "state" }] : []));
@@ -360,21 +329,20 @@ class ZInputComponent {
         this.inputRef()?.nativeElement.blur();
     }
     markAsTouched() {
-        this._touched.set(true);
+        this.uiState.update(s => ({ ...s, touched: true }));
         this._onTouched();
     }
     markAsUntouched() {
-        this._touched.set(false);
+        this.uiState.update(s => ({ ...s, touched: false }));
     }
     markAsDirty() {
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
     }
     markAsPristine() {
-        this._dirty.set(false);
+        this.uiState.update(s => ({ ...s, dirty: false }));
     }
     validate() {
-        this._touched.set(true);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, touched: true, dirty: true }));
         this._onTouched();
         if (this._ngControl?.control) {
             this._ngControl.control.markAsDirty();
@@ -387,8 +355,7 @@ class ZInputComponent {
         this.isValidating.set(false);
         this._asyncErrors.set(new Map());
         this._value.set(null);
-        this._touched.set(false);
-        this._dirty.set(false);
+        this.uiState.update(s => ({ ...s, touched: false, dirty: false }));
         this._onChange(null);
         if (this._ngControl?.control) {
             this._ngControl.control.markAsPristine();
@@ -421,7 +388,7 @@ class ZInputComponent {
     clearValue(event) {
         event.stopPropagation();
         this._value.set(null);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(null);
         this._changeSubject.next(null);
         if (this.zSearch()) {
@@ -440,7 +407,7 @@ class ZInputComponent {
             }
         }
         this._value.set(value);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(value);
         if (this.zSearch()) {
             this._searchSubject.next(value);
@@ -456,7 +423,7 @@ class ZInputComponent {
             }
         }
         this._value.set(value);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(value);
         this._changeSubject.next(value);
         if (this.zSearch()) {
@@ -473,12 +440,14 @@ class ZInputComponent {
             }
         }
     }
-    onBlur() {
-        if (this._dirty()) {
-            this._touched.set(true);
+    onBlur(event) {
+        if (this.uiState().dirty) {
+            this.uiState.update(s => ({ ...s, touched: true }));
         }
         this._onTouched();
         this.uiState.update(s => ({ ...s, isFocused: false }));
+        this.zEvent.emit(zCreateEvent('blur', event));
+        this.closeSuggestPopover();
         if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'blur') {
             this._asyncValidationSubject.next(this._value());
         }
@@ -492,14 +461,16 @@ class ZInputComponent {
             }
         }
     }
-    onFocus() {
+    onFocus(event) {
         this.uiState.update(s => ({ ...s, isFocused: true }));
+        this.zEvent.emit(zCreateEvent('focus', event));
         this._loadSuggestHistory();
         if (this.hasAutoSuggest() && this.suggestHistory().length > 0) {
             this._showSuggestPopover();
         }
     }
     onKeydown(event) {
+        this.zEvent.emit(zCreateEvent('keydown', event));
         if (this.zType() !== 'number') {
             return;
         }
@@ -561,7 +532,7 @@ class ZInputComponent {
     }
     selectSuggestItem(item) {
         this._value.set(item);
-        this._dirty.set(true);
+        this.uiState.update(s => ({ ...s, dirty: true }));
         this._onChange(item);
         this._hideSuggestPopover();
         this.suggestActiveIndex.set(-1);
@@ -736,6 +707,40 @@ class ZInputComponent {
         }
         return cleaned;
     }
+    _getEffectiveMask() {
+        const mask = this.zMask();
+        if (mask) {
+            return mask;
+        }
+        if (this.zType() !== 'number') {
+            return '';
+        }
+        const decimalPlaces = this.zDecimalPlaces();
+        if (decimalPlaces !== undefined) {
+            return `separator.${decimalPlaces}`;
+        }
+        return 'separator.0';
+    }
+    _getEffectiveType(effectiveMask) {
+        const type = this.zType();
+        if (type === 'password' && this.uiState().passwordVisible) {
+            return 'text';
+        }
+        if (type === 'number' && effectiveMask) {
+            return 'text';
+        }
+        return type;
+    }
+    _getEffectiveDecimalMarker() {
+        const thousandSep = this.zThousandSeparator();
+        if (thousandSep === '.') {
+            return ',';
+        }
+        if (thousandSep === ',') {
+            return '.';
+        }
+        return this.zDecimalMarker();
+    }
     _getValidationErrors() {
         const errors = [];
         const value = this._value();
@@ -783,14 +788,14 @@ class ZInputComponent {
         return errors;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zControl: "zControl" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zControl: "zControl", zEvent: "zEvent" }, providers: [
             provideNgxMask(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 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]=\"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 });
+        ], 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 (typeConfig().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($event)\"\n        (focus)=\"onFocus($event)\"\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 (typeConfig().isColor) {\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($event)\"\n              (focus)=\"onFocus($event)\" />\n          </label>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\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 (slotConfig().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]=\"typeConfig().isColor ? 'text' : maskConfig().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]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().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 (typeConfig().isColor) {\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 (typeConfig().isPassword && 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 (hasError()) {\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,
@@ -801,8 +806,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]=\"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 }] }] } });
+                    ], 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 (typeConfig().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($event)\"\n        (focus)=\"onFocus($event)\"\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 (typeConfig().isColor) {\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($event)\"\n              (focus)=\"onFocus($event)\" />\n          </label>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\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 (slotConfig().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]=\"typeConfig().isColor ? 'text' : maskConfig().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]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().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 (typeConfig().isColor) {\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 (typeConfig().isPassword && 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 (hasError()) {\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"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], 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.