@shival99/z-ui 1.9.7 → 1.9.9

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

@@ -26,7 +26,7 @@ const ERROR_HANDLERS = [
 const getDefaultErrorInfo = (errors) => ERROR_HANDLERS.find(([key]) => errors[key])?.[1](errors) ?? { key: 'i18n_z_ui_input_pattern' };
 
 const zInputVariants = cva([
-    'flex w-full rounded-[0.375rem] border border-input bg-white shadow-xs',
+    'flex w-full rounded-sm border border-input bg-white shadow-xs',
     'transition-[border-color,box-shadow,background-color,color,opacity] duration-200',
     'dark:bg-input/30 dark:border-input',
     'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
@@ -52,7 +52,7 @@ const zInputVariants = cva([
     },
 });
 const zTextareaVariants = cva([
-    'w-full rounded-[0.375rem] border border-input bg-white shadow-xs transition-colors duration-200',
+    'w-full rounded-sm border border-input bg-white shadow-xs transition-colors duration-200',
     'dark:bg-input/30 dark:border-input',
     'outline-none',
     'text-sm',
@@ -925,7 +925,7 @@ class ZInputComponent {
                 useExisting: forwardRef(() => ZInputComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (typeConfig().isColor) {\n          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (slotConfig().isPrefixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded 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 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 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 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-[0.375rem] 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-[0.25rem] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - .125rem)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - .125rem)}.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:.1875rem!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"], dependencies: [{ kind: "component", type: BlossomColorPickerComponent, selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (typeConfig().isColor) {\n          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (slotConfig().isPrefixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"], dependencies: [{ kind: "component", type: BlossomColorPickerComponent, selector: "blossom-color-picker", inputs: ["value", "defaultValue", "colors", "disabled", "openOnHover", "initialExpanded", "animationDuration", "showAlphaSlider", "coreSize", "petalSize", "showCoreColor", "sliderPosition", "adaptivePositioning"], outputs: ["colorChange", "colorCollapse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZInputComponent, decorators: [{
             type: Component,
@@ -944,7 +944,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                             useExisting: forwardRef(() => ZInputComponent),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (typeConfig().isColor) {\n          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (slotConfig().isPrefixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded 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 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 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 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-[0.375rem] 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-[0.25rem] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - .125rem)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - .125rem)}.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:.1875rem!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, exportAs: 'zInput', template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() | translate }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (typeConfig().isTextarea) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder() | translate\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur($event)\"\n        (focus)=\"onFocus($event)\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (typeConfig().isColor) {\n          <div class=\"z-[10] shrink-0\">\n            <blossom-color-picker\n              class=\"z-input-blossom flex items-center justify-center [&>div:first-child]:flex\"\n              [style.--z-bcp-core-size.px]=\"blossomOptions().coreSize\"\n              [style.--z-bcp-core-border-color]=\"blossomCoreBorderColor()\"\n              [value]=\"blossomColor()\"\n              [defaultValue]=\"blossomOptions().defaultValue\"\n              [colors]=\"blossomColors()\"\n              [disabled]=\"isDisabled() || zReadonly()\"\n              [openOnHover]=\"blossomOptions().openOnHover\"\n              [initialExpanded]=\"blossomOptions().initialExpanded\"\n              [animationDuration]=\"blossomOptions().animationDuration\"\n              [showAlphaSlider]=\"blossomOptions().showAlphaSlider\"\n              [coreSize]=\"blossomOptions().coreSize\"\n              [petalSize]=\"blossomOptions().petalSize\"\n              [showCoreColor]=\"blossomOptions().showCoreColor\"\n              [sliderPosition]=\"blossomOptions().sliderPosition\"\n              [adaptivePositioning]=\"blossomOptions().adaptivePositioning\"\n              (colorChange)=\"onBlossomColorChange($event)\"\n              (colorCollapse)=\"onBlossomColorCollapse($event)\" />\n          </div>\n        }\n\n        @if (slotConfig().hasPrefix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (slotConfig().isPrefixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"typeConfig().isColor ? 'text' : maskConfig().effectiveType\"\n          [placeholder]=\"zPlaceholder() | translate\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-transparent text-sm outline-none\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"typeConfig().isColor ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"typeConfig().isColor ? normalizedColorValue() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur($event)\"\n          (focus)=\"onFocus($event)\"\n          (keydown)=\"onKeydown($event); onSuggestKeydown($event)\"\n          [mask]=\"maskConfig().effectiveMask\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"maskConfig().effectiveDecimalMarker\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\" />\n\n        @if (slotConfig().hasSuffix && !typeConfig().isColor) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (slotConfig().isSuffixTemplate) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (typeConfig().isColor) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"uiState().colorCopied ? 'scale-0 rotate-90 opacity-0' : 'scale-100 rotate-0 opacity-100'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n              <z-icon\n                zType=\"lucideCheck\"\n                [class]=\"\n                  uiState().colorCopied ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\n                \"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-0.25rem)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'up')\">\n              <z-icon zType=\"lucideChevronUp\" zSize=\"12\" />\n            </button>\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded-sm transition-all\"\n              (mousedown)=\"$event.preventDefault()\"\n              (click)=\"onArrowClick($event, 'down')\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (typeConfig().isPassword && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-sm transition-all\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (uiState().passwordVisible) {\n              <z-icon zType=\"lucideEyeOff\" zSize=\"16\" />\n            } @else {\n              <z-icon zType=\"lucideEye\" zSize=\"16\" />\n            }\n          </button>\n        }\n      </div>\n\n      @if (hasAutoSuggest() && uiState().showSuggestPopover && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[0.1875rem] rounded-sm border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (hasError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native{text-overflow:ellipsis;overflow:hidden}.z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=number].z-input-native::-webkit-inner-spin-button,input[type=number].z-input-native::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number].z-input-native{-moz-appearance:textfield;appearance:textfield}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}input[type=color]::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.z-input-container{position:relative;overflow:visible}.z-input-container:has(.z-input-blossom .bcp-core[aria-expanded=true]){z-index:40}.z-input-blossom,.z-input-blossom .bcp-root{position:relative;z-index:41;overflow:visible}.z-input-blossom .bcp-container{z-index:42!important}.z-input-blossom .bcp-core{width:var(--z-bcp-core-size, 1.125rem)!important;height:var(--z-bcp-core-size, 1.125rem)!important;min-width:var(--z-bcp-core-size, 1.125rem)!important;min-height:var(--z-bcp-core-size, 1.125rem)!important;border-radius:var(--radius-sm)!important;border:1px solid var(--z-bcp-core-border-color, rgba(0, 0, 0, .14))!important;box-shadow:none!important;transition:border-radius .18s cubic-bezier(.22,1,.36,1),border-color .16s ease,transform .18s cubic-bezier(.22,1,.36,1)!important}.z-input-blossom .bcp-core[aria-expanded=true]{border-radius:624.9375rem!important;border-color:transparent!important;box-shadow:0 3px 10px #00000029!important;transform:scale(1.03)!important}.z-input-blossom .bcp-core[aria-expanded=false]{transform:scale(1)!important}\n"] }]
         }], propDecorators: { inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zOnKeydown: [{ type: i0.Output, args: ["zOnKeydown"] }], zOnEnter: [{ type: i0.Output, args: ["zOnEnter"] }], zOnColorCollapse: [{ type: i0.Output, args: ["zOnColorCollapse"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAlign", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }], zColorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColorConfig", required: false }] }] } });
 
 /**