@shival99/z-ui 2.0.46 → 2.0.48

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

@@ -1371,7 +1371,7 @@ class ZInputComponent {
                 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]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ZInputComponent), selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: i0.forwardRef(() => BlossomColorPickerComponent), selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgxMaskDirective), selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i0.forwardRef(() => ZButtonComponent), selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "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", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => 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]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"], dependencies: [{ kind: "component", type: i0.forwardRef(() => ZInputComponent), selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "component", type: i0.forwardRef(() => BlossomColorPickerComponent), selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning", "circularBarWidth", "sliderWidth", "sliderOffset", "collapsible"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: i0.forwardRef(() => FormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.DefaultValueAccessor), selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.RangeValueAccessor), selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatus), selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i0.forwardRef(() => i1.NgModel), selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => NgxMaskDirective), selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: i0.forwardRef(() => ZButtonComponent), selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "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", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: i0.forwardRef(() => ZSelectComponent), selector: "z-select", inputs: ["class", "zMode", "zSize", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zLoading", "zPrefix", "zAllowClear", "zWrap", "zShowSearch", "zPlaceholderSearch", "zDebounce", "zNotFoundText", "zEmptyText", "zEmptyIcon", "zMaxTagCount", "zDropdownMaxHeight", "zOptionHeight", "zVirtualScroll", "zShowAction", "zOptions", "zConfig", "zTranslateLabels", "zKey", "zSearchServer", "zLoadingMore", "zEnableLoadMore", "zScrollDistance", "zMaxVisible", "zScrollClose", "zPosition", "zSelectedTemplate", "zOptionTemplate", "zActionTemplate", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zValidators"], outputs: ["zOnSearch", "zOnLoadMore", "zOnBlur", "zOnFocus", "zControl", "zEvent"], exportAs: ["zSelect"] }, { kind: "directive", type: i0.forwardRef(() => 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: [{
             type: Component,
@@ -1395,7 +1395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             useExisting: forwardRef(() => ZInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div\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]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border:1px solid var(--border);border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div\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]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <input\n            #nativeColorInputEl\n            type=\"color\"\n            class=\"z-input-native-color\"\n            [ngModel]=\"normalizedColorValue()\"\n            (ngModelChange)=\"onColorPickerHexChange($event)\"\n            tabindex=\"-1\"\n            aria-hidden=\"true\" />\n\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <ng-template #colorPickerPopover>\n    <div class=\"z-input-color-picker\" [style.--z-input-color-picker-current]=\"normalizedColorValue()\">\n      <div\n        class=\"z-input-color-picker-plane\"\n        [style]=\"colorPickerSvStyle()\"\n        (pointerdown)=\"onColorPickerSvPointerDown($event)\"\n        (pointermove)=\"onColorPickerSvPointerMove($event)\">\n        <span class=\"z-input-color-picker-cursor\" [style]=\"colorPickerCursorStyle()\"></span>\n      </div>\n\n      <div class=\"z-input-color-picker-controls\">\n        <button\n          type=\"button\"\n          z-button\n          zType=\"outline\"\n          zSize=\"sm\"\n          aria-label=\"Pick color\"\n          zTypeIcon=\"lucidePencil\"\n          (click)=\"openNativeColorPicker()\"></button>\n        <div class=\"z-input-color-picker-sliders\">\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"360\"\n            [ngModel]=\"colorPickerHsv().hue\"\n            class=\"z-input-color-picker-hue\"\n            (input)=\"onColorPickerHueInput($event)\" />\n          <input\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            [ngModel]=\"colorPickerAlpha()\"\n            class=\"z-input-color-picker-alpha\"\n            (input)=\"onColorPickerAlphaInput($event)\" />\n        </div>\n      </div>\n\n      <div class=\"flex flex-col gap-2\">\n        <div class=\"z-input-color-picker-fields\">\n          <z-select\n            zSize=\"sm\"\n            class=\"z-input-color-picker-format\"\n            [zOptions]=\"colorPickerFormatOptions\"\n            [zShowSearch]=\"false\"\n            [zTranslateLabels]=\"false\"\n            [ngModel]=\"colorPickerFormat()\"\n            (ngModelChange)=\"onColorPickerFormatChange($event)\" />\n          <div class=\"z-input-color-picker-value-group\">\n            @switch (colorPickerFormat()) {\n              @case ('rgb') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"R\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().red\"\n                    (ngModelChange)=\"onColorPickerRgbChange('red', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"G\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().green\"\n                    (ngModelChange)=\"onColorPickerRgbChange('green', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"B\"\n                    [zMin]=\"0\"\n                    [zMax]=\"255\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerRgbValue().blue\"\n                    (ngModelChange)=\"onColorPickerRgbChange('blue', $event)\" />\n                </div>\n              }\n              @case ('hsl') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().hue\"\n                    (ngModelChange)=\"onColorPickerHslChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().saturation\"\n                    (ngModelChange)=\"onColorPickerHslChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"L\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHslValue().lightness\"\n                    (ngModelChange)=\"onColorPickerHslChange('lightness', $event)\" />\n                </div>\n              }\n              @case ('hsv') {\n                <div class=\"z-input-color-picker-channel-group\">\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"H\"\n                    [zMin]=\"0\"\n                    [zMax]=\"360\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().hue\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('hue', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"S\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().saturation\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('saturation', $event)\" />\n                  <z-input\n                    zType=\"number\"\n                    zSize=\"sm\"\n                    zPlaceholder=\"V\"\n                    [zMin]=\"0\"\n                    [zMax]=\"100\"\n                    [zShowArrows]=\"false\"\n                    [ngModel]=\"colorPickerHsv().value\"\n                    (ngModelChange)=\"onColorPickerHsvValueChange('value', $event)\" />\n                </div>\n              }\n              @default {\n                <z-input\n                  zSize=\"sm\"\n                  class=\"z-input-color-picker-hex-input\"\n                  [ngModel]=\"normalizedColorValue()\"\n                  (ngModelChange)=\"onColorPickerHexChange($event)\" />\n              }\n            }\n            <z-input\n              zType=\"number\"\n              zSize=\"sm\"\n              class=\"z-input-color-picker-alpha-input\"\n              [zMin]=\"0\"\n              [zMax]=\"100\"\n              zSuffix=\"%\"\n              [zShowArrows]=\"false\"\n              [ngModel]=\"colorPickerAlpha()\"\n              (ngModelChange)=\"onColorPickerAlphaValueChange($event)\" />\n          </div>\n        </div>\n\n        <div class=\"z-input-color-picker-saved-head\">\n          <span>{{ 'i18n_z_ui_input_saved_colors' | translate }}</span>\n          <button type=\"button\" z-button zType=\"ghost\" zSize=\"sm\" (click)=\"addCurrentColorToSaved()\">\n            {{ 'i18n_z_ui_input_add_color' | translate }}\n          </button>\n        </div>\n        <div class=\"z-input-color-picker-swatches\">\n          @for (swatch of colorPickerSavedSwatches(); track swatch.color) {\n            <button\n              type=\"button\"\n              class=\"z-input-color-picker-swatch rounded-[3px]!\"\n              [class.z-input-color-picker-swatch-active]=\"swatch.color === normalizedColorValue()\"\n              [class.z-input-color-picker-swatch-light]=\"swatch.isLight\"\n              [style.--z-input-color-picker-swatch-color]=\"swatch.color\"\n              [attr.aria-label]=\"swatch.color\"\n              (click)=\"selectSavedColor(swatch.color)\"></button>\n          }\n        </div>\n      </div>\n    </div>\n  </ng-template>\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-xs, .125rem)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}.z-input-color-trigger{display:block;width:var(--z-bcp-core-size, 1.625rem);height:var(--z-bcp-core-size, 1.625rem);align-self:center;cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-xs, .125rem);box-shadow:none}.z-input-native-color{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.z-input-color-picker-popover{padding:.75rem;border-radius:.5rem}.z-input-color-picker{display:flex;flex-direction:column;width:18.75rem;gap:.875rem}.z-input-color-picker-plane{position:relative;height:11.5rem;cursor:crosshair;border-radius:.375rem;overflow:hidden}.z-input-color-picker-cursor{position:absolute;width:1.25rem;height:1.25rem;border:3px solid white;border-radius:999px;box-shadow:0 0 0 1px #0003;translate:-50% -50%;pointer-events:none}.z-input-color-picker-controls{display:grid;grid-template-columns:2.25rem minmax(0,1fr);align-items:center;gap:.5rem}.z-input-color-picker-sliders{display:flex;min-width:0;flex-direction:column;gap:.375rem}.z-input-color-picker-hue,.z-input-color-picker-alpha{width:100%;height:.625rem;cursor:pointer;appearance:none;border-radius:999px}.z-input-color-picker-hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.z-input-color-picker-alpha{background:linear-gradient(to right,transparent,var(--z-input-color-picker-current, var(--primary))),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-position:0 0,0 0;background-size:auto,.5rem .5rem}.z-input-color-picker-hue::-webkit-slider-thumb,.z-input-color-picker-alpha::-webkit-slider-thumb{width:1rem;height:1rem;appearance:none;border:3px solid white;border-radius:999px;background:var(--primary);box-shadow:0 1px 4px #0000004d}.z-input-color-picker-fields{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.5rem}.z-input-color-picker-format .z-select-trigger{min-height:2rem}.z-input-color-picker-value-group{display:grid;grid-template-columns:minmax(0,1fr) 3.85rem;min-width:0}.z-input-color-picker-value-group .z-input-wrapper{gap:0}.z-input-color-picker-value-group .z-input-container{min-height:2rem;border-radius:0}.z-input-color-picker-value-group>z-input:first-child .z-input-container,.z-input-color-picker-value-group>.z-input-color-picker-channel-group:first-child z-input:first-child .z-input-container{border-top-left-radius:var(--radius-sm, .25rem);border-bottom-left-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group>z-input:last-child .z-input-container{border-left-width:0;border-top-right-radius:var(--radius-sm, .25rem);border-bottom-right-radius:var(--radius-sm, .25rem)}.z-input-color-picker-value-group .z-input-container:focus-within{position:relative;z-index:1;border-left-width:1px}.z-input-color-picker-hex-input .z-input-native{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.z-input-color-picker-channel-group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:0}.z-input-color-picker-channel-group z-input:not(:first-child) .z-input-container{border-left-width:0}.z-input-color-picker-channel-group .z-input-native,.z-input-color-picker-alpha-input .z-input-native{text-align:center}.z-input-color-picker-saved-head{display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:400}.z-input-color-picker-saved-head .z-button{height:1.75rem;padding-inline:.25rem;font-weight:400}.z-input-color-picker-swatches{display:flex;justify-content:space-between;gap:.375rem}.z-input-color-picker-swatch{width:1.75rem;height:1.75rem;cursor:pointer;border:0;border-radius:var(--radius-sm);background:var(--z-input-color-picker-swatch-color)}.z-input-color-picker-swatch-light{background:linear-gradient(var(--z-input-color-picker-swatch-color),var(--z-input-color-picker-swatch-color)),conic-gradient(#d1d5db 25%,#fff 0 50%,#d1d5db 0 75%,#fff 0);background-size:auto,.5rem .5rem;box-shadow:inset 0 0 0 1px #00000029}.z-input-color-picker-swatch-active{box-shadow:0 0 0 2px var(--background),0 0 0 4px var(--primary)}.z-input-color-picker-swatch-light.z-input-color-picker-swatch-active{box-shadow:inset 0 0 0 1px #00000029,0 0 0 2px var(--background),0 0 0 4px var(--primary)}\n"] }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], nativeColorInputRef: [{ type: i0.ViewChild, args: ['nativeColorInputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnKeydown: [{ type: i0.Output, args: ["zOnKeydown"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnColorCollapse: [{ type: i0.Output, args: ["zOnColorCollapse"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlign", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }], zColorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColorConfig", required: false }] }] } });
 
 /**