@shival99/z-ui 2.0.2 → 2.0.3

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

@@ -6,7 +6,10 @@ import * as i1 from '@angular/forms';
 import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { hexToHsl, lightnessToSliderValue, DEFAULT_COLORS, BlossomColorPickerComponent } from '@dayflow/blossom-color-picker-angular';
 import { TranslatePipe } from '@ngx-translate/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { ZSelectComponent } from '@shival99/z-ui/components/z-select';
 import { ZToastService } from '@shival99/z-ui/components/z-toast';
 import { ZTranslateService, ZCacheService } from '@shival99/z-ui/services';
 import { zTransform, zUuid, zMergeClasses, zCreateEvent } from '@shival99/z-ui/utils';
@@ -76,6 +79,7 @@ class ZInputComponent {
     _toastService = inject(ZToastService);
     _zTranslate = inject(ZTranslateService);
     inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    nativeColorInputRef = viewChild('nativeColorInputEl', ...(ngDevMode ? [{ debugName: "nativeColorInputRef" }] : []));
     zOnSearch = output();
     zOnChange = output();
     zOnBlur = output();
@@ -135,6 +139,12 @@ class ZInputComponent {
         alpha: 100,
         layer: 'outer',
     }, ...(ngDevMode ? [{ debugName: "_blossomColor" }] : []));
+    _colorPickerHsv = signal({ hue: 258, saturation: 65, value: 85 }, ...(ngDevMode ? [{ debugName: "_colorPickerHsv" }] : []));
+    _colorPickerRgb = signal({ red: 79, green: 70, blue: 229 }, ...(ngDevMode ? [{ debugName: "_colorPickerRgb" }] : []));
+    _colorPickerHsl = signal({ hue: 243, saturation: 75, lightness: 59 }, ...(ngDevMode ? [{ debugName: "_colorPickerHsl" }] : []));
+    _colorPickerAlpha = signal(100, ...(ngDevMode ? [{ debugName: "_colorPickerAlpha" }] : []));
+    _colorPickerFormat = signal('hex', ...(ngDevMode ? [{ debugName: "_colorPickerFormat" }] : []));
+    _colorPickerSavedColors = signal([], ...(ngDevMode ? [{ debugName: "_colorPickerSavedColors" }] : []));
     inputId = zUuid('z-input');
     suggestHistory = signal([], ...(ngDevMode ? [{ debugName: "suggestHistory" }] : []));
     suggestActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : []));
@@ -177,6 +187,8 @@ class ZInputComponent {
         return val === null || val === undefined ? '' : String(val);
     }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
     normalizedColorValue = computed(() => this._normalizeHexColor(this._value()), ...(ngDevMode ? [{ debugName: "normalizedColorValue" }] : []));
+    colorMode = computed(() => this.zColorConfig().mode ?? 'blossom', ...(ngDevMode ? [{ debugName: "colorMode" }] : []));
+    isBlossomColorMode = computed(() => this.colorMode() === 'blossom', ...(ngDevMode ? [{ debugName: "isBlossomColorMode" }] : []));
     blossomCoreBorderColor = computed(() => {
         const color = this.normalizedColorValue();
         if (color === '#FFFFFF' || color === '#000000') {
@@ -185,6 +197,61 @@ class ZInputComponent {
         return color;
     }, ...(ngDevMode ? [{ debugName: "blossomCoreBorderColor" }] : []));
     blossomColor = this._blossomColor.asReadonly();
+    colorPickerHsv = this._colorPickerHsv.asReadonly();
+    colorPickerRgbValue = this._colorPickerRgb.asReadonly();
+    colorPickerHslValue = this._colorPickerHsl.asReadonly();
+    colorPickerAlpha = this._colorPickerAlpha.asReadonly();
+    colorPickerFormat = this._colorPickerFormat.asReadonly();
+    colorPickerFormatOptions = [
+        { label: 'HEX', value: 'hex' },
+        { label: 'RGB', value: 'rgb' },
+        { label: 'HSL', value: 'hsl' },
+        { label: 'HSV', value: 'hsv' },
+    ];
+    colorPickerHueColor = computed(() => `hsl(${this.colorPickerHsv().hue} 100% 50%)`, ...(ngDevMode ? [{ debugName: "colorPickerHueColor" }] : []));
+    colorPickerSvStyle = computed(() => ({
+        background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${this.colorPickerHueColor()})`,
+    }), ...(ngDevMode ? [{ debugName: "colorPickerSvStyle" }] : []));
+    colorPickerCursorStyle = computed(() => {
+        const hsv = this.colorPickerHsv();
+        return {
+            left: `${hsv.saturation}%`,
+            top: `${100 - hsv.value}%`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "colorPickerCursorStyle" }] : []));
+    defaultColorPickerSavedColors = computed(() => {
+        const { savedColors } = this.zColorConfig();
+        if (savedColors) {
+            return this._normalizeColorList(savedColors);
+        }
+        return this._normalizeColorList([
+            '#16A34A',
+            '#2563EB',
+            '#4F46E5',
+            '#7C3AED',
+            '#C026D3',
+            '#DB2777',
+            '#DC2626',
+            '#EA580C',
+            '#7F56D9',
+            '#111827',
+            '#155E75',
+            '#A3A310',
+            '#0EA5E9',
+            '#D946EF',
+            '#E11D48',
+            '#22C55E',
+        ]);
+    }, ...(ngDevMode ? [{ debugName: "defaultColorPickerSavedColors" }] : []));
+    colorPickerSavedColors = computed(() => {
+        const cachedColors = this._colorPickerSavedColors();
+        const fallbackColors = this.defaultColorPickerSavedColors();
+        return this._normalizeColorList([...cachedColors, ...fallbackColors]).slice(0, 8);
+    }, ...(ngDevMode ? [{ debugName: "colorPickerSavedColors" }] : []));
+    colorPickerSavedSwatches = computed(() => this.colorPickerSavedColors().map(color => ({
+        color,
+        isLight: this._isLightHexColor(color),
+    })), ...(ngDevMode ? [{ debugName: "colorPickerSavedSwatches" }] : []));
     blossomCoreSize = computed(() => {
         const size = this.zSize();
         if (size === 'sm') {
@@ -340,7 +407,9 @@ class ZInputComponent {
     _onChange = () => void 0;
     _onTouched = () => void 0;
     _ngControl = null;
+    _colorPickerPopoverControl = null;
     ngOnInit() {
+        this._loadColorPickerSavedColors();
         queueMicrotask(() => {
             try {
                 this._ngControl = this._injector.get(NgControl, null);
@@ -384,7 +453,7 @@ class ZInputComponent {
     writeValue(value) {
         this._value.set(value);
         if (this.zType() === 'color') {
-            this._syncBlossomColorFromHex(this._normalizeHexColor(value));
+            this._syncColorStateFromHex(this._normalizeHexColor(value));
         }
     }
     registerOnChange(fn) {
@@ -472,11 +541,7 @@ class ZInputComponent {
         const { value: rawValue } = event.target;
         let value = rawValue;
         if (this.zType() === 'number') {
-            const cleanValue = this._cleanNumberValue(value);
-            value = cleanValue === '' ? null : parseFloat(cleanValue);
-            if (value !== null && isNaN(value)) {
-                value = null;
-            }
+            value = this._parseNumberValue(value);
         }
         this._value.set(value);
         this.uiState.update(s => ({ ...s, dirty: true }));
@@ -489,14 +554,10 @@ class ZInputComponent {
         let value = rawValue;
         if (this.zType() === 'color' && typeof rawValue === 'string') {
             value = this._normalizeHexColor(rawValue);
-            this._syncBlossomColorFromHex(value);
+            this._syncColorStateFromHex(value);
         }
         if (this.zType() === 'number' && typeof rawValue === 'string') {
-            const cleanValue = this._cleanNumberValue(rawValue);
-            value = cleanValue === '' ? null : parseFloat(cleanValue);
-            if (value !== null && isNaN(value)) {
-                value = null;
-            }
+            value = this._parseNumberValue(rawValue);
         }
         this._value.set(value);
         this.uiState.update(s => ({ ...s, dirty: true }));
@@ -656,6 +717,108 @@ class ZInputComponent {
         this._blossomColor.set(color);
         this.zOnColorCollapse.emit(color);
     }
+    onColorPickerControl(control) {
+        this._colorPickerPopoverControl = control;
+    }
+    onColorPickerOpen() {
+        this._syncColorPickerFromHex(this.normalizedColorValue());
+        this._loadColorPickerSavedColors();
+    }
+    onColorPickerFormatChange(value) {
+        if (!value || Array.isArray(value)) {
+            return;
+        }
+        this._colorPickerFormat.set(value);
+    }
+    onColorPickerHexChange(value) {
+        const raw = String(value ?? '').trim();
+        if (!/^#?[0-9a-fA-F]{3}$/.test(raw) && !/^#?[0-9a-fA-F]{6}$/.test(raw)) {
+            return;
+        }
+        this._commitColor(this._normalizeHexColor(raw.startsWith('#') ? raw : `#${raw}`));
+    }
+    onColorPickerAlphaValueChange(value) {
+        const alpha = Number(value ?? 100);
+        if (Number.isNaN(alpha)) {
+            return;
+        }
+        this._setColorPickerAlpha(alpha);
+    }
+    onColorPickerRgbChange(channel, value) {
+        const channelValue = this._parseBoundedNumber(value, 0, 255);
+        if (channelValue === null) {
+            return;
+        }
+        const rgb = this.colorPickerRgbValue();
+        const nextRgb = { ...rgb, [channel]: channelValue };
+        this._commitColor(this._rgbToHex(nextRgb));
+    }
+    onColorPickerHslChange(channel, value) {
+        const max = channel === 'hue' ? 360 : 100;
+        const channelValue = this._parseBoundedNumber(value, 0, max);
+        if (channelValue === null) {
+            return;
+        }
+        const hsl = this.colorPickerHslValue();
+        const nextHsl = { ...hsl, [channel]: channelValue };
+        this._commitColor(this._hslToHex(nextHsl));
+    }
+    onColorPickerHsvValueChange(channel, value) {
+        const max = channel === 'hue' ? 360 : 100;
+        const channelValue = this._parseBoundedNumber(value, 0, max);
+        if (channelValue === null) {
+            return;
+        }
+        const nextHsv = { ...this.colorPickerHsv(), [channel]: channelValue };
+        this._colorPickerHsv.set(nextHsv);
+        this._commitColor(this._hsvToHex(nextHsv));
+    }
+    onColorPickerHueInput(event) {
+        const input = event.target;
+        const hue = Number(input?.value ?? 0);
+        this._colorPickerHsv.update(color => ({ ...color, hue }));
+        this._commitColor(this._hsvToHex(this._colorPickerHsv()));
+    }
+    onColorPickerAlphaInput(event) {
+        const input = event.target;
+        const alpha = Number(input?.value ?? 100);
+        this._setColorPickerAlpha(alpha);
+    }
+    onColorPickerSvPointerDown(event) {
+        this._updateColorPickerSv(event);
+        const target = event.currentTarget;
+        target.setPointerCapture(event.pointerId);
+    }
+    onColorPickerSvPointerMove(event) {
+        if (!event.buttons) {
+            return;
+        }
+        this._updateColorPickerSv(event);
+    }
+    selectSavedColor(color) {
+        this._commitColor(color);
+    }
+    addCurrentColorToSaved() {
+        const color = this.normalizedColorValue();
+        if (!/^#[0-9A-F]{6}$/.test(color)) {
+            return;
+        }
+        const nextColors = this._normalizeColorList([color, ...this.colorPickerSavedColors()]).slice(0, 8);
+        this._colorPickerSavedColors.set(nextColors);
+        ZCacheService.set(this._colorPickerCacheKey(), nextColors);
+    }
+    async openNativeColorPicker() {
+        const eyeDropper = this._getEyeDropper();
+        if (eyeDropper) {
+            const result = await eyeDropper.open();
+            this._commitColor(result.sRGBHex);
+            return;
+        }
+        this.nativeColorInputRef()?.nativeElement.click();
+    }
+    closeColorPicker() {
+        this._colorPickerPopoverControl?.close();
+    }
     _emitControl() {
         this.zControl.emit({
             valid: () => this.valid(),
@@ -767,6 +930,17 @@ class ZInputComponent {
         const history = ZCacheService.get(cacheKey, []) ?? [];
         this.suggestHistory.set(history);
     }
+    _colorPickerCacheKey() {
+        const configuredKey = this.zColorConfig().cacheKey;
+        if (configuredKey) {
+            return `input-color-picker-${configuredKey}`;
+        }
+        return 'input-color-picker-saved-colors';
+    }
+    _loadColorPickerSavedColors() {
+        const savedColors = ZCacheService.get(this._colorPickerCacheKey(), []) ?? [];
+        this._colorPickerSavedColors.set(this._normalizeColorList(savedColors).slice(0, 8));
+    }
     _incrementValue(multiplier) {
         const currentValue = this._value();
         const numValue = typeof currentValue === 'number' ? currentValue : parseFloat(String(currentValue)) || 0;
@@ -799,6 +973,28 @@ class ZInputComponent {
         }
         return cleaned;
     }
+    _parseNumberValue(value) {
+        const cleanValue = this._cleanNumberValue(value);
+        if (cleanValue === '') {
+            return null;
+        }
+        let numberValue = parseFloat(cleanValue);
+        if (isNaN(numberValue)) {
+            return null;
+        }
+        const min = this.zMin();
+        const max = this.zMax();
+        if (min !== undefined && numberValue < min) {
+            numberValue = min;
+        }
+        if (max !== undefined && numberValue > max) {
+            numberValue = max;
+        }
+        if (!this.zAllowNegative() && numberValue < 0) {
+            return 0;
+        }
+        return numberValue;
+    }
     _getEffectiveMask() {
         const mask = this.zMask();
         if (mask) {
@@ -881,6 +1077,9 @@ class ZInputComponent {
         return errors;
     }
     _normalizeHexColor(value) {
+        return this._tryNormalizeHexColor(value) ?? '#000000';
+    }
+    _tryNormalizeHexColor(value) {
         const raw = String(value ?? '')
             .trim()
             .toUpperCase();
@@ -891,7 +1090,7 @@ class ZInputComponent {
             const [r, g, b] = raw.slice(1).split('');
             return `#${r}${r}${g}${g}${b}${b}`;
         }
-        return '#000000';
+        return null;
     }
     _syncBlossomColorFromHex(hex) {
         const { h, s, l } = hexToHsl(hex);
@@ -905,6 +1104,243 @@ class ZInputComponent {
             layer: current.layer,
         });
     }
+    _syncColorStateFromHex(hex) {
+        this._syncBlossomColorFromHex(hex);
+        this._syncColorPickerFromHex(hex);
+    }
+    _syncColorPickerFromHex(hex) {
+        const hsv = this._hexToHsv(hex);
+        const rgb = this._hsvToRgb(hsv);
+        this._colorPickerHsv.set(hsv);
+        this._colorPickerRgb.set(rgb);
+        this._colorPickerHsl.set(this._rgbToHsl(rgb));
+    }
+    _commitColor(hex) {
+        const color = this._normalizeHexColor(hex);
+        this._value.set(color);
+        this._syncColorStateFromHex(color);
+        this.uiState.update(s => ({ ...s, dirty: true }));
+        this._onChange(color);
+        this._changeSubject.next(color);
+        if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'change') {
+            this._asyncValidationSubject.next(color);
+        }
+    }
+    _setColorPickerAlpha(alpha) {
+        const boundedAlpha = Math.min(100, Math.max(0, Math.round(alpha)));
+        this._colorPickerAlpha.set(boundedAlpha);
+    }
+    _parseBoundedNumber(value, min, max) {
+        const numericValue = Number(value);
+        if (Number.isNaN(numericValue)) {
+            return null;
+        }
+        return Math.min(max, Math.max(min, Math.round(numericValue)));
+    }
+    _normalizeColorList(colors) {
+        const result = [];
+        for (const color of colors) {
+            const normalized = this._tryNormalizeHexColor(color);
+            if (!normalized) {
+                continue;
+            }
+            if (result.includes(normalized)) {
+                continue;
+            }
+            result.push(normalized);
+        }
+        return result;
+    }
+    _isLightHexColor(hex) {
+        const normalized = this._normalizeHexColor(hex).slice(1);
+        const red = parseInt(normalized.slice(0, 2), 16);
+        const green = parseInt(normalized.slice(2, 4), 16);
+        const blue = parseInt(normalized.slice(4, 6), 16);
+        const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+        return luminance > 0.82;
+    }
+    _getEyeDropper() {
+        const maybeWindow = window;
+        if (!maybeWindow.EyeDropper) {
+            return null;
+        }
+        return new maybeWindow.EyeDropper();
+    }
+    _updateColorPickerSv(event) {
+        const target = event.currentTarget;
+        const rect = target.getBoundingClientRect();
+        const saturation = ((event.clientX - rect.left) / rect.width) * 100;
+        const value = 100 - ((event.clientY - rect.top) / rect.height) * 100;
+        this._colorPickerHsv.update(color => ({
+            ...color,
+            saturation: Math.min(100, Math.max(0, saturation)),
+            value: Math.min(100, Math.max(0, value)),
+        }));
+        this._commitColor(this._hsvToHex(this._colorPickerHsv()));
+    }
+    _hexToHsv(hex) {
+        const normalized = this._normalizeHexColor(hex).slice(1);
+        const red = parseInt(normalized.slice(0, 2), 16) / 255;
+        const green = parseInt(normalized.slice(2, 4), 16) / 255;
+        const blue = parseInt(normalized.slice(4, 6), 16) / 255;
+        const max = Math.max(red, green, blue);
+        const min = Math.min(red, green, blue);
+        const delta = max - min;
+        let hue = 0;
+        if (delta !== 0) {
+            if (max === red) {
+                hue = ((green - blue) / delta) % 6;
+            }
+            if (max === green) {
+                hue = (blue - red) / delta + 2;
+            }
+            if (max === blue) {
+                hue = (red - green) / delta + 4;
+            }
+            hue = Math.round(hue * 60);
+            if (hue < 0) {
+                hue += 360;
+            }
+        }
+        return {
+            hue,
+            saturation: max === 0 ? 0 : Math.round((delta / max) * 100),
+            value: Math.round(max * 100),
+        };
+    }
+    _hsvToRgb(color) {
+        const hex = this._hsvToHex(color).slice(1);
+        return {
+            red: parseInt(hex.slice(0, 2), 16),
+            green: parseInt(hex.slice(2, 4), 16),
+            blue: parseInt(hex.slice(4, 6), 16),
+        };
+    }
+    _rgbToHex(color) {
+        return [color.red, color.green, color.blue]
+            .map(channel => Math.min(255, Math.max(0, channel)).toString(16).padStart(2, '0'))
+            .join('')
+            .toUpperCase()
+            .replace(/^/, '#');
+    }
+    _rgbToHsl(color) {
+        const red = color.red / 255;
+        const green = color.green / 255;
+        const blue = color.blue / 255;
+        const max = Math.max(red, green, blue);
+        const min = Math.min(red, green, blue);
+        const delta = max - min;
+        const lightness = (max + min) / 2;
+        let hue = 0;
+        let saturation = 0;
+        if (delta !== 0) {
+            saturation = delta / (1 - Math.abs(2 * lightness - 1));
+            if (max === red) {
+                hue = ((green - blue) / delta) % 6;
+            }
+            if (max === green) {
+                hue = (blue - red) / delta + 2;
+            }
+            if (max === blue) {
+                hue = (red - green) / delta + 4;
+            }
+            hue = Math.round(hue * 60);
+            if (hue < 0) {
+                hue += 360;
+            }
+        }
+        return {
+            hue,
+            saturation: Math.round(saturation * 100),
+            lightness: Math.round(lightness * 100),
+        };
+    }
+    _hslToHex(color) {
+        const saturation = color.saturation / 100;
+        const lightness = color.lightness / 100;
+        const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+        const hueSection = color.hue / 60;
+        const x = chroma * (1 - Math.abs((hueSection % 2) - 1));
+        const match = lightness - chroma / 2;
+        let red = chroma;
+        let green = 0;
+        let blue = x;
+        if (hueSection < 1) {
+            red = chroma;
+            green = x;
+            blue = 0;
+        }
+        if (hueSection >= 1 && hueSection < 2) {
+            red = x;
+            green = chroma;
+            blue = 0;
+        }
+        if (hueSection >= 2 && hueSection < 3) {
+            red = 0;
+            green = chroma;
+            blue = x;
+        }
+        if (hueSection >= 3 && hueSection < 4) {
+            red = 0;
+            green = x;
+            blue = chroma;
+        }
+        if (hueSection >= 4 && hueSection < 5) {
+            red = x;
+            green = 0;
+            blue = chroma;
+        }
+        return [red, green, blue]
+            .map(channel => Math.round((channel + match) * 255)
+            .toString(16)
+            .padStart(2, '0'))
+            .join('')
+            .toUpperCase()
+            .replace(/^/, '#');
+    }
+    _hsvToHex(color) {
+        const saturation = color.saturation / 100;
+        const value = color.value / 100;
+        const chroma = value * saturation;
+        const hueSection = color.hue / 60;
+        const x = chroma * (1 - Math.abs((hueSection % 2) - 1));
+        const match = value - chroma;
+        let red = chroma;
+        let green = 0;
+        let blue = x;
+        if (hueSection < 1) {
+            red = chroma;
+            green = x;
+            blue = 0;
+        }
+        if (hueSection >= 1 && hueSection < 2) {
+            red = x;
+            green = chroma;
+            blue = 0;
+        }
+        if (hueSection >= 2 && hueSection < 3) {
+            red = 0;
+            green = chroma;
+            blue = x;
+        }
+        if (hueSection >= 3 && hueSection < 4) {
+            red = 0;
+            green = x;
+            blue = chroma;
+        }
+        if (hueSection >= 4 && hueSection < 5) {
+            red = x;
+            green = 0;
+            blue = chroma;
+        }
+        return [red, green, blue]
+            .map(channel => Math.round((channel + match) * 255)
+            .toString(16)
+            .padStart(2, '0'))
+            .join('')
+            .toUpperCase()
+            .replace(/^/, '#');
+    }
     _generateColorPalette(count) {
         const safeCount = Math.max(1, Math.floor(count));
         const basePalette = [...DEFAULT_COLORS];
@@ -934,7 +1370,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 (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          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\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 ? normalizedColorValue() : 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-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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%-0.25rem)] 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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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-[0.1875rem] rounded-sm 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-sm 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=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"], dependencies: [{ kind: "component", type: BlossomColorPickerComponent, selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { 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 }, { propertyName: "nativeColorInputRef", first: true, predicate: ["nativeColorInputEl"], 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          <div class=\"z-[10] shrink-0\">\n            @if (isBlossomColorMode()) {\n              <blossom-color-picker\n                class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n                [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n                [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n                [value]=\"blossomColor()\"\n                [defaultValue]=\"blossomOptions().defaultValue\"\n                [colors]=\"blossomColors()\"\n                [disabled]=\"isDisabled() || zReadonly()\"\n                [openOnHover]=\"blossomOptions().openOnHover\"\n                [initialExpanded]=\"blossomOptions().initialExpanded\"\n                [animationDuration]=\"blossomOptions().animationDuration\"\n                [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n                [coreSize]=\"blossomOptions().coreSize\"\n                [petalSize]=\"blossomOptions().petalSize\"\n                [showCoreColor]=\"blossomOptions().showCoreColor\"\n                [sliderPosition]=\"blossomOptions().sliderPosition\"\n                [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n                (colorChange)=\"onBlossomColorChange($event)\"\n                (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n            } @else {\n              <button\n                type=\"button\"\n                class=\"z-input-color-trigger\"\n                z-popover\n                [zPopoverContent]=\"colorPickerPopover\"\n                zTrigger=\"click\"\n                zPosition=\"bottom-left\"\n                zClass=\"z-input-color-picker-popover\"\n                [zOffset]=\"8\"\n                [zPopoverWidth]=\"330\"\n                [zDisabled]=\"isDisabled() || zReadonly()\"\n                [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n                [style.background]=\"normalizedColorValue()\"\n                (zControl)=\"onColorPickerControl($event)\"\n                (zShow)=\"onColorPickerOpen()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [attr.aria-label]=\"'Color picker'\"></button>\n            }\n          </div>\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 ? normalizedColorValue() : 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-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\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          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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%-0.25rem)] 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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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-[0.1875rem] rounded-sm 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-sm 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  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\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=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ZInputComponent), selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: i0.forwardRef(() => BlossomColorPickerComponent), selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => 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: i0.forwardRef(() => ZButtonComponent), selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: i0.forwardRef(() => ZIconComponent), selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: i0.forwardRef(() => ZPopoverDirective), selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i0.forwardRef(() => TranslatePipe), name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZInputComponent, decorators: [{
             type: Component,
@@ -943,9 +1379,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         FormsModule,
                         ReactiveFormsModule,
                         NgxMaskDirective,
+                        ZButtonComponent,
                         ZIconComponent,
+                        ZPopoverDirective,
+                        ZSelectComponent,
                         NgTemplateOutlet,
                         TranslatePipe,
+                        forwardRef(() => ZInputComponent),
                     ], standalone: true, providers: [
                         provideNgxMask(),
                         {
@@ -953,8 +1393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", 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 (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          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\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 ? normalizedColorValue() : 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-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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%-0.25rem)] 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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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-[0.1875rem] rounded-sm 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-sm 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=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"] }]
-        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnKeydown: [{ type: i0.Output, args: ["zOnKeydown"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnColorCollapse: [{ type: i0.Output, args: ["zOnColorCollapse"] }], 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 }] }], zAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlign", 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 }] }], zColorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColorConfig", 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          <div class=\"z-[10] shrink-0\">\n            @if (isBlossomColorMode()) {\n              <blossom-color-picker\n                class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n                [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n                [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n                [value]=\"blossomColor()\"\n                [defaultValue]=\"blossomOptions().defaultValue\"\n                [colors]=\"blossomColors()\"\n                [disabled]=\"isDisabled() || zReadonly()\"\n                [openOnHover]=\"blossomOptions().openOnHover\"\n                [initialExpanded]=\"blossomOptions().initialExpanded\"\n                [animationDuration]=\"blossomOptions().animationDuration\"\n                [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n                [coreSize]=\"blossomOptions().coreSize\"\n                [petalSize]=\"blossomOptions().petalSize\"\n                [showCoreColor]=\"blossomOptions().showCoreColor\"\n                [sliderPosition]=\"blossomOptions().sliderPosition\"\n                [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n                (colorChange)=\"onBlossomColorChange($event)\"\n                (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n            } @else {\n              <button\n                type=\"button\"\n                class=\"z-input-color-trigger\"\n                z-popover\n                [zPopoverContent]=\"colorPickerPopover\"\n                zTrigger=\"click\"\n                zPosition=\"bottom-left\"\n                zClass=\"z-input-color-picker-popover\"\n                [zOffset]=\"8\"\n                [zPopoverWidth]=\"330\"\n                [zDisabled]=\"isDisabled() || zReadonly()\"\n                [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n                [style.background]=\"normalizedColorValue()\"\n                (zControl)=\"onColorPickerControl($event)\"\n                (zShow)=\"onColorPickerOpen()\"\n                (mousedown)=\"$event.preventDefault()\"\n                [attr.aria-label]=\"'Color picker'\"></button>\n            }\n          </div>\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 ? normalizedColorValue() : 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-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\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          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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%-0.25rem)] 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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\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-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\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-[0.1875rem] rounded-sm 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-sm 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  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\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=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"] }]
+        }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], nativeColorInputRef: [{ type: i0.ViewChild, args: ['nativeColorInputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnKeydown: [{ type: i0.Output, args: ["zOnKeydown"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnColorCollapse: [{ type: i0.Output, args: ["zOnColorCollapse"] }], 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 }] }], zAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlign", 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 }] }], zColorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColorConfig", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.