@shival99/z-ui 2.1.32 → 2.2.0

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

@@ -81,8 +81,10 @@ class ZInputComponent {
     _toastService = inject(ZToastService);
     _zTranslate = inject(ZTranslateService);
     _maskConfig = inject(Z_NGX_MASK_CONFIG, { optional: true });
-    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
-    nativeColorInputRef = viewChild('nativeColorInputEl', ...(ngDevMode ? [{ debugName: "nativeColorInputRef" }] : []));
+    inputRef = viewChild('inputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []));
+    nativeColorInputRef = viewChild('nativeColorInputEl', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeColorInputRef" }] : /* istanbul ignore next */ []));
     zOnSearch = output();
     zOnChange = output();
     zOnBlur = output();
@@ -92,69 +94,113 @@ class ZInputComponent {
     zOnColorCollapse = output();
     zControl = output();
     zEvent = output();
-    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
-    zType = input('text', ...(ngDevMode ? [{ debugName: "zType" }] : []));
-    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
-    zAlign = input('left', ...(ngDevMode ? [{ debugName: "zAlign" }] : []));
-    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
-    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
-    zPlaceholder = input('', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
-    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
-    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
-    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
-    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
-    zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : {}), transform: zTransform });
-    zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
-    zSuffix = input('', ...(ngDevMode ? [{ debugName: "zSuffix" }] : []));
-    zMin = input(undefined, ...(ngDevMode ? [{ debugName: "zMin" }] : []));
-    zMax = input(undefined, ...(ngDevMode ? [{ debugName: "zMax" }] : []));
-    zStep = input(1, ...(ngDevMode ? [{ debugName: "zStep" }] : []));
-    zShowArrows = input(true, { ...(ngDevMode ? { debugName: "zShowArrows" } : {}), transform: zTransform });
-    zMask = input('', ...(ngDevMode ? [{ debugName: "zMask" }] : []));
-    zDecimalPlaces = input(undefined, ...(ngDevMode ? [{ debugName: "zDecimalPlaces" }] : []));
-    zAllowNegative = input(false, { ...(ngDevMode ? { debugName: "zAllowNegative" } : {}), transform: zTransform });
-    zThousandSeparator = input(undefined, ...(ngDevMode ? [{ debugName: "zThousandSeparator" }] : []));
-    zDecimalMarker = input(undefined, ...(ngDevMode ? [{ debugName: "zDecimalMarker" }] : []));
-    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
-    zAsyncValidators = input([], ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : []));
-    zAsyncDebounce = input(300, ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : []));
-    zAsyncValidateOn = input('change', ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : []));
-    zShowPasswordToggle = input(true, { ...(ngDevMode ? { debugName: "zShowPasswordToggle" } : {}), transform: zTransform });
-    zSearch = input(false, { ...(ngDevMode ? { debugName: "zSearch" } : {}), transform: zTransform });
-    zDebounce = input(300, ...(ngDevMode ? [{ debugName: "zDebounce" }] : []));
-    zAutofocus = input(false, { ...(ngDevMode ? { debugName: "zAutofocus" } : {}), transform: zTransform });
-    zAutoComplete = input('off', ...(ngDevMode ? [{ debugName: "zAutoComplete" }] : []));
-    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
-    zAutoSizeContent = input(false, { ...(ngDevMode ? { debugName: "zAutoSizeContent" } : {}), transform: zTransform });
-    zRows = input(3, ...(ngDevMode ? [{ debugName: "zRows" }] : []));
-    zResize = input(true, { ...(ngDevMode ? { debugName: "zResize" } : {}), transform: zTransform });
-    zMaxLength = input(undefined, ...(ngDevMode ? [{ debugName: "zMaxLength" }] : []));
-    zAutoSuggest = input(undefined, ...(ngDevMode ? [{ debugName: "zAutoSuggest" }] : []));
-    zColorConfig = input({}, ...(ngDevMode ? [{ debugName: "zColorConfig" }] : []));
-    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
-    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
-    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
-    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
-    _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
-    _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
-    _customError = signal(null, ...(ngDevMode ? [{ debugName: "_customError" }] : []));
-    isLoading = computed(() => this.zLoading() || this.isValidating(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zType = input('text', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zType" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zAlign = input('left', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAlign" }] : /* istanbul ignore next */ []));
+    zLabel = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLabel" }] : /* istanbul ignore next */ []));
+    zLabelClass = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLabelClass" }] : /* istanbul ignore next */ []));
+    zPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : /* istanbul ignore next */ []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zLoadingOutline = input(false, { ...(ngDevMode ? { debugName: "zLoadingOutline" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zPrefix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zPrefix" }] : /* istanbul ignore next */ []));
+    zSuffix = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSuffix" }] : /* istanbul ignore next */ []));
+    zMin = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMin" }] : /* istanbul ignore next */ []));
+    zMax = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMax" }] : /* istanbul ignore next */ []));
+    zStep = input(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zStep" }] : /* istanbul ignore next */ []));
+    zShowArrows = input(true, { ...(ngDevMode ? { debugName: "zShowArrows" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zMask = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMask" }] : /* istanbul ignore next */ []));
+    zDecimalPlaces = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDecimalPlaces" }] : /* istanbul ignore next */ []));
+    zAllowNegative = input(false, { ...(ngDevMode ? { debugName: "zAllowNegative" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zThousandSeparator = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zThousandSeparator" }] : /* istanbul ignore next */ []));
+    zDecimalMarker = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDecimalMarker" }] : /* istanbul ignore next */ []));
+    zValidators = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zValidators" }] : /* istanbul ignore next */ []));
+    zAsyncValidators = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : /* istanbul ignore next */ []));
+    zAsyncDebounce = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : /* istanbul ignore next */ []));
+    zAsyncValidateOn = input('change', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : /* istanbul ignore next */ []));
+    zShowPasswordToggle = input(true, { ...(ngDevMode ? { debugName: "zShowPasswordToggle" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zSearch = input(false, { ...(ngDevMode ? { debugName: "zSearch" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zDebounce = input(300, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zDebounce" }] : /* istanbul ignore next */ []));
+    zAutofocus = input(false, { ...(ngDevMode ? { debugName: "zAutofocus" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zAutoComplete = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAutoComplete" }] : /* istanbul ignore next */ []));
+    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zAutoSizeContent = input(false, { ...(ngDevMode ? { debugName: "zAutoSizeContent" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zRows = input(3, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zRows" }] : /* istanbul ignore next */ []));
+    zResize = input(true, { ...(ngDevMode ? { debugName: "zResize" } : /* istanbul ignore next */ {}), transform: zTransform });
+    zMaxLength = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zMaxLength" }] : /* istanbul ignore next */ []));
+    zAutoSuggest = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zAutoSuggest" }] : /* istanbul ignore next */ []));
+    zColorConfig = input({}, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zColorConfig" }] : /* istanbul ignore next */ []));
+    _value = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_value" }] : /* istanbul ignore next */ []));
+    _disabled = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_disabled" }] : /* istanbul ignore next */ []));
+    _formControl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formControl" }] : /* istanbul ignore next */ []));
+    _formStateVersion = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : /* istanbul ignore next */ []));
+    _isNgModel = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isNgModel" }] : /* istanbul ignore next */ []));
+    _asyncErrors = signal(new Map(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : /* istanbul ignore next */ []));
+    _customError = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_customError" }] : /* istanbul ignore next */ []));
+    isLoading = computed(() => this.zLoading() || this.isValidating(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
     _blossomColor = signal({
         hue: 330,
         saturation: 70,
         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" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_blossomColor" }] : /* istanbul ignore next */ []));
+    _colorPickerHsv = signal({ hue: 258, saturation: 65, value: 85 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerHsv" }] : /* istanbul ignore next */ []));
+    _colorPickerRgb = signal({ red: 79, green: 70, blue: 229 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerRgb" }] : /* istanbul ignore next */ []));
+    _colorPickerHsl = signal({ hue: 243, saturation: 75, lightness: 59 }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerHsl" }] : /* istanbul ignore next */ []));
+    _colorPickerAlpha = signal(100, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerAlpha" }] : /* istanbul ignore next */ []));
+    _colorPickerFormat = signal('hex', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerFormat" }] : /* istanbul ignore next */ []));
+    _colorPickerSavedColors = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_colorPickerSavedColors" }] : /* istanbul ignore next */ []));
     inputId = zUuid('z-input');
-    suggestHistory = signal([], ...(ngDevMode ? [{ debugName: "suggestHistory" }] : []));
-    suggestActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : []));
-    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
+    suggestHistory = signal([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestHistory" }] : /* istanbul ignore next */ []));
+    suggestActiveIndex = signal(-1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : /* istanbul ignore next */ []));
+    isValidating = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isValidating" }] : /* istanbul ignore next */ []));
     uiState = signal({
         passwordVisible: false,
         isFocused: false,
@@ -162,7 +208,8 @@ class ZInputComponent {
         dirty: false,
         showSuggestPopover: false,
         colorCopied: false,
-    }, ...(ngDevMode ? [{ debugName: "uiState" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "uiState" }] : /* istanbul ignore next */ []));
     typeConfig = computed(() => {
         const type = this.zType();
         return {
@@ -171,7 +218,8 @@ class ZInputComponent {
             isTextarea: type === 'textarea',
             isNumber: type === 'number',
         };
-    }, ...(ngDevMode ? [{ debugName: "typeConfig" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "typeConfig" }] : /* istanbul ignore next */ []));
     slotConfig = computed(() => {
         const prefix = this.zPrefix();
         const suffix = this.zSuffix();
@@ -181,28 +229,35 @@ class ZInputComponent {
             hasPrefix: this.zSearch() || !!prefix,
             hasSuffix: !!suffix,
         };
-    }, ...(ngDevMode ? [{ debugName: "slotConfig" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "slotConfig" }] : /* istanbul ignore next */ []));
     maskConfig = computed(() => {
         const effectiveMask = this._getEffectiveMask();
         const effectiveType = this._getEffectiveType(effectiveMask);
         const effectiveThousandSeparator = this._getEffectiveThousandSeparator();
         const effectiveDecimalMarker = this._getEffectiveDecimalMarker();
         return { effectiveMask, effectiveType, effectiveThousandSeparator, effectiveDecimalMarker };
-    }, ...(ngDevMode ? [{ debugName: "maskConfig" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maskConfig" }] : /* istanbul ignore next */ []));
     displayValue = computed(() => {
         const val = this._value();
         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" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    normalizedColorValue = computed(() => this._normalizeHexColor(this._value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "normalizedColorValue" }] : /* istanbul ignore next */ []));
+    colorMode = computed(() => this.zColorConfig().mode ?? 'blossom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorMode" }] : /* istanbul ignore next */ []));
+    isBlossomColorMode = computed(() => this.colorMode() === 'blossom', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isBlossomColorMode" }] : /* istanbul ignore next */ []));
     blossomCoreBorderColor = computed(() => {
         const color = this.normalizedColorValue();
         if (color === '#FFFFFF' || color === '#000000') {
             return 'var(--border)';
         }
         return color;
-    }, ...(ngDevMode ? [{ debugName: "blossomCoreBorderColor" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blossomCoreBorderColor" }] : /* istanbul ignore next */ []));
     blossomColor = this._blossomColor.asReadonly();
     colorPickerHsv = this._colorPickerHsv.asReadonly();
     colorPickerRgbValue = this._colorPickerRgb.asReadonly();
@@ -215,17 +270,20 @@ class ZInputComponent {
         { label: 'HSL', value: 'hsl' },
         { label: 'HSV', value: 'hsv' },
     ];
-    colorPickerHueColor = computed(() => `hsl(${this.colorPickerHsv().hue} 100% 50%)`, ...(ngDevMode ? [{ debugName: "colorPickerHueColor" }] : []));
+    colorPickerHueColor = computed(() => `hsl(${this.colorPickerHsv().hue} 100% 50%)`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorPickerHueColor" }] : /* istanbul ignore next */ []));
     colorPickerSvStyle = computed(() => ({
         background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, ${this.colorPickerHueColor()})`,
-    }), ...(ngDevMode ? [{ debugName: "colorPickerSvStyle" }] : []));
+    }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorPickerSvStyle" }] : /* istanbul ignore next */ []));
     colorPickerCursorStyle = computed(() => {
         const hsv = this.colorPickerHsv();
         return {
             left: `${hsv.saturation}%`,
             top: `${100 - hsv.value}%`,
         };
-    }, ...(ngDevMode ? [{ debugName: "colorPickerCursorStyle" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorPickerCursorStyle" }] : /* istanbul ignore next */ []));
     defaultColorPickerSavedColors = computed(() => {
         const { savedColors } = this.zColorConfig();
         if (savedColors) {
@@ -249,16 +307,19 @@ class ZInputComponent {
             '#E11D48',
             '#22C55E',
         ]);
-    }, ...(ngDevMode ? [{ debugName: "defaultColorPickerSavedColors" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "defaultColorPickerSavedColors" }] : /* istanbul ignore next */ []));
     colorPickerSavedColors = computed(() => {
         const cachedColors = this._colorPickerSavedColors();
         const fallbackColors = this.defaultColorPickerSavedColors();
         return this._normalizeColorList([...cachedColors, ...fallbackColors]).slice(0, 8);
-    }, ...(ngDevMode ? [{ debugName: "colorPickerSavedColors" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorPickerSavedColors" }] : /* istanbul ignore next */ []));
     colorPickerSavedSwatches = computed(() => this.colorPickerSavedColors().map(color => ({
         color,
         isLight: this._isLightHexColor(color),
-    })), ...(ngDevMode ? [{ debugName: "colorPickerSavedSwatches" }] : []));
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "colorPickerSavedSwatches" }] : /* istanbul ignore next */ []));
     blossomCoreSize = computed(() => {
         const size = this.zSize();
         if (size === 'sm') {
@@ -268,7 +329,8 @@ class ZInputComponent {
             return 30;
         }
         return 26;
-    }, ...(ngDevMode ? [{ debugName: "blossomCoreSize" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blossomCoreSize" }] : /* istanbul ignore next */ []));
     blossomOptions = computed(() => {
         const config = this.zColorConfig();
         return {
@@ -283,7 +345,8 @@ class ZInputComponent {
             coreSize: config.coreSize ?? this.blossomCoreSize(),
             petalSize: config.petalSize ?? 32,
         };
-    }, ...(ngDevMode ? [{ debugName: "blossomOptions" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blossomOptions" }] : /* istanbul ignore next */ []));
     blossomColors = computed(() => {
         const customColors = this.zColorConfig().colors ?? [];
         if (customColors.length > 0) {
@@ -294,18 +357,24 @@ class ZInputComponent {
             return undefined;
         }
         return this._generateColorPalette(count);
-    }, ...(ngDevMode ? [{ debugName: "blossomColors" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "blossomColors" }] : /* istanbul ignore next */ []));
     hasValue = computed(() => {
         const value = this._value();
         return value !== null && value !== undefined && value !== '';
-    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
-    isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
-    showArrows = computed(() => this.typeConfig().isNumber && this.zShowArrows(), ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this._disabled() || this.zDisabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    showArrows = computed(() => this.typeConfig().isNumber && this.zShowArrows(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showArrows" }] : /* istanbul ignore next */ []));
     hasAutoSuggest = computed(() => {
         const key = this.zAutoSuggest();
         return key !== undefined && key.length > 0;
-    }, ...(ngDevMode ? [{ debugName: "hasAutoSuggest" }] : []));
-    showClearButton = computed(() => this.zAllowClear() && this.hasValue() && !this.isDisabled() && !this.zReadonly(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasAutoSuggest" }] : /* istanbul ignore next */ []));
+    showClearButton = computed(() => this.zAllowClear() && this.hasValue() && !this.isDisabled() && !this.zReadonly(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
     currentStatus = computed(() => {
         if (this.isDisabled()) {
             return 'disabled';
@@ -317,7 +386,8 @@ class ZInputComponent {
             return 'error';
         }
         return 'default';
-    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "currentStatus" }] : /* istanbul ignore next */ []));
     alignClass = computed(() => {
         const align = this.zAlign();
         return align === 'center'
@@ -325,10 +395,14 @@ class ZInputComponent {
             : align === 'right'
                 ? '[&_.z-input-native]:text-right'
                 : '';
-    }, ...(ngDevMode ? [{ debugName: "alignClass" }] : []));
-    inputClasses = computed(() => zMergeClasses(zInputVariants({ zSize: this.zSize(), zStatus: this.currentStatus() }), this.loadingOutlineClass(), this.alignClass(), this.class()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
-    textareaClasses = computed(() => zMergeClasses(zTextareaVariants({ zStatus: this.currentStatus() }), this.loadingOutlineClass(), this.alignClass(), this.class()), ...(ngDevMode ? [{ debugName: "textareaClasses" }] : []));
-    loadingOutlineClass = computed(() => this.zLoading() && this.zLoadingOutline() ? 'z-loading-outline-active !ring-ring/50 !ring-[3px]' : '', ...(ngDevMode ? [{ debugName: "loadingOutlineClass" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "alignClass" }] : /* istanbul ignore next */ []));
+    inputClasses = computed(() => zMergeClasses(zInputVariants({ zSize: this.zSize(), zStatus: this.currentStatus() }), this.loadingOutlineClass(), this.alignClass(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inputClasses" }] : /* istanbul ignore next */ []));
+    textareaClasses = computed(() => zMergeClasses(zTextareaVariants({ zStatus: this.currentStatus() }), this.loadingOutlineClass(), this.alignClass(), this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textareaClasses" }] : /* istanbul ignore next */ []));
+    loadingOutlineClass = computed(() => this.zLoading() && this.zLoadingOutline() ? 'z-loading-outline-active !ring-ring/50 !ring-[3px]' : '', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loadingOutlineClass" }] : /* istanbul ignore next */ []));
     filteredSuggestHistory = computed(() => {
         const history = this.suggestHistory();
         const currentValue = String(this._value() ?? '')
@@ -344,7 +418,8 @@ class ZInputComponent {
             target.push(item);
         }
         return [...matching, ...nonMatching];
-    }, ...(ngDevMode ? [{ debugName: "filteredSuggestHistory" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredSuggestHistory" }] : /* istanbul ignore next */ []));
     _shouldShowValidation = computed(() => {
         const control = this._formControl();
         this._formStateVersion();
@@ -355,7 +430,8 @@ class ZInputComponent {
             return control.dirty;
         }
         return this.uiState().dirty || this.uiState().touched;
-    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : /* istanbul ignore next */ []));
     hasError = computed(() => {
         if (this._customError()) {
             return true;
@@ -374,7 +450,8 @@ class ZInputComponent {
             return false;
         }
         return control.invalid && this._shouldShowValidation();
-    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     errorMessage = computed(() => {
         const customError = this._customError();
         if (customError) {
@@ -402,7 +479,8 @@ class ZInputComponent {
         this._zTranslate.currentLang();
         const errorInfo = getDefaultErrorInfo(errors);
         return this._zTranslate.instant(errorInfo.key, errorInfo.params);
-    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
     _translateValidationMessage(message) {
         this._zTranslate.currentLang();
         return this._zTranslate.instant(message);
@@ -1381,17 +1459,17 @@ class ZInputComponent {
         }
         return generated.slice(0, safeCount);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zAlign: { classPropertyName: "zAlign", publicName: "zAlign", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null }, zColorConfig: { classPropertyName: "zColorConfig", publicName: "zColorConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zOnKeydown: "zOnKeydown", zOnEnter: "zOnEnter", zOnColorCollapse: "zOnColorCollapse", zControl: "zControl", zEvent: "zEvent" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zAlign: { classPropertyName: "zAlign", publicName: "zAlign", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zLoadingOutline: { classPropertyName: "zLoadingOutline", publicName: "zLoadingOutline", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null }, zColorConfig: { classPropertyName: "zColorConfig", publicName: "zColorConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zOnKeydown: "zOnKeydown", zOnEnter: "zOnEnter", zOnColorCollapse: "zOnColorCollapse", zControl: "zControl", zEvent: "zEvent" }, providers: [
             provideNgxMask(),
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ZInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { 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\n        class=\"z-input-container flex w-full items-center\"\n        [class]=\"inputClasses()\"\n        z-tooltip\n        [zContent]=\"displayValue()\"\n        [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n        [zTriggerElement]=\"inputEl\">\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]=\"maskConfig().effectiveThousandSeparator\"\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        @if (isLoading()) {\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-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", "zLoading", "zLoadingOutline", "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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: i0.forwardRef(() => ZIconComponent), selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: i0.forwardRef(() => ZPopoverDirective), selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zClassSelect", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zAllowClear", "zShowCheck", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zDynamicSize", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSticky", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => ZTooltipDirective), selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "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 });
+        ], 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\n        class=\"z-input-container flex w-full items-center\"\n        [class]=\"inputClasses()\"\n        z-tooltip\n        [zContent]=\"displayValue()\"\n        [zTooltipDisabled]=\"typeConfig().isColor || uiState().isFocused || uiState().showSuggestPopover || !hasValue()\"\n        [zTriggerElement]=\"inputEl\">\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]=\"maskConfig().effectiveThousandSeparator\"\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        @if (isLoading()) {\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-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", "zLoading", "zLoadingOutline", "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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range]:not([ngNoCva])[formControlName],input[type=range]:not([ngNoCva])[formControl],input[type=range]:not([ngNoCva])[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", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "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", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: i0.forwardRef(() => ZIconComponent), selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: i0.forwardRef(() => ZPopoverDirective), selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zClassSelect", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zLoadingOutline", "zPrefix", "zAllowClear", "zShowCheck", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zDynamicSize", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zSticky", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => ZTooltipDirective), selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-input', imports: [
                         BlossomColorPickerComponent,