@shival99/z-ui 1.0.1 → 1.0.2

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

@@ -0,0 +1,804 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, inject, Injector, DestroyRef, TemplateRef, forwardRef, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { NgControl, NgModel, PristineChangeEvent, TouchedChangeEvent, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
+import { Subject, merge, filter, debounceTime, isObservable, takeUntil, catchError, of, firstValueFrom } from 'rxjs';
+import { cva } from 'class-variance-authority';
+import { ZCacheService } from '@shival99/z-ui/services';
+import { zTransform, zGenerateId, zMergeClasses } from '@shival99/z-ui/utils';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZToastService } from '@shival99/z-ui/components/z-toast';
+
+const ERROR_HANDLERS = [
+    ['required', () => 'Trường này là bắt buộc'],
+    ['min', e => `Giá trị tối thiểu là ${e['min'].min}`],
+    ['max', e => `Giá trị tối đa là ${e['max'].max}`],
+    ['minlength', e => `Tối thiểu ${e['minlength'].requiredLength} ký tự`],
+    ['maxlength', e => `Tối đa ${e['maxlength'].requiredLength} ký tự`],
+    ['email', () => 'Email không hợp lệ'],
+    ['pattern', () => 'Định dạng không hợp lệ'],
+];
+const getDefaultErrorMessage = (errors) => ERROR_HANDLERS.find(([key]) => errors[key])?.[1](errors) ?? 'Giá trị không hợp lệ';
+
+const zInputVariants = cva([
+    'flex w-full rounded-[6px] 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',
+    'outline-none',
+    'text-sm',
+], {
+    variants: {
+        zSize: {
+            sm: 'h-8 px-2 gap-2 text-xs',
+            default: 'h-9 px-2 gap-2 text-sm',
+            lg: 'h-10 px-2 gap-2.5 text-sm',
+        },
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
+            disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
+            readonly: 'bg-muted/50! text-muted-foreground cursor-default',
+        },
+    },
+    defaultVariants: {
+        zSize: 'default',
+        zStatus: 'default',
+    },
+});
+const zTextareaVariants = cva([
+    'w-full rounded-[6px] border border-input bg-white shadow-xs transition-colors duration-200',
+    'dark:bg-input/30 dark:border-input',
+    'outline-none',
+    'text-sm',
+], {
+    variants: {
+        zStatus: {
+            default: 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]',
+            error: 'border-destructive! ring-destructive/20 ring-[3px] focus-within:border-destructive! focus-within:ring-destructive/30',
+            disabled: 'opacity-50 cursor-not-allowed bg-muted! text-muted-foreground',
+            readonly: 'bg-muted/50! text-muted-foreground cursor-default',
+        },
+    },
+    defaultVariants: {
+        zStatus: 'default',
+    },
+});
+
+class ZInputComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zType = input('text', ...(ngDevMode ? [{ debugName: "zType" }] : []));
+    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
+    zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
+    zLabelClass = input('', ...(ngDevMode ? [{ debugName: "zLabelClass" }] : []));
+    zPlaceholder = input('', ...(ngDevMode ? [{ debugName: "zPlaceholder" }] : []));
+    zRequired = input(false, { ...(ngDevMode ? { debugName: "zRequired" } : {}), transform: zTransform });
+    zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
+    zReadonly = input(false, { ...(ngDevMode ? { debugName: "zReadonly" } : {}), transform: zTransform });
+    zPrefix = input('', ...(ngDevMode ? [{ debugName: "zPrefix" }] : []));
+    zSuffix = input('', ...(ngDevMode ? [{ debugName: "zSuffix" }] : []));
+    zMin = input(undefined, ...(ngDevMode ? [{ debugName: "zMin" }] : []));
+    zMax = input(undefined, ...(ngDevMode ? [{ debugName: "zMax" }] : []));
+    zStep = input(1, ...(ngDevMode ? [{ debugName: "zStep" }] : []));
+    zShowArrows = input(true, { ...(ngDevMode ? { debugName: "zShowArrows" } : {}), transform: zTransform });
+    zMask = input('', ...(ngDevMode ? [{ debugName: "zMask" }] : []));
+    zDecimalPlaces = input(undefined, ...(ngDevMode ? [{ debugName: "zDecimalPlaces" }] : []));
+    zAllowNegative = input(false, { ...(ngDevMode ? { debugName: "zAllowNegative" } : {}), transform: zTransform });
+    zThousandSeparator = input(' ', ...(ngDevMode ? [{ debugName: "zThousandSeparator" }] : []));
+    zDecimalMarker = input('.', ...(ngDevMode ? [{ debugName: "zDecimalMarker" }] : []));
+    zValidators = input([], ...(ngDevMode ? [{ debugName: "zValidators" }] : []));
+    zAsyncValidators = input([], ...(ngDevMode ? [{ debugName: "zAsyncValidators" }] : []));
+    zAsyncDebounce = input(300, ...(ngDevMode ? [{ debugName: "zAsyncDebounce" }] : []));
+    zAsyncValidateOn = input('change', ...(ngDevMode ? [{ debugName: "zAsyncValidateOn" }] : []));
+    zShowPasswordToggle = input(true, { ...(ngDevMode ? { debugName: "zShowPasswordToggle" } : {}), transform: zTransform });
+    zSearch = input(false, { ...(ngDevMode ? { debugName: "zSearch" } : {}), transform: zTransform });
+    zDebounce = input(300, ...(ngDevMode ? [{ debugName: "zDebounce" }] : []));
+    zAutofocus = input(false, { ...(ngDevMode ? { debugName: "zAutofocus" } : {}), transform: zTransform });
+    zAutoComplete = input('off', ...(ngDevMode ? [{ debugName: "zAutoComplete" }] : []));
+    zAllowClear = input(false, { ...(ngDevMode ? { debugName: "zAllowClear" } : {}), transform: zTransform });
+    zAutoSizeContent = input(false, { ...(ngDevMode ? { debugName: "zAutoSizeContent" } : {}), transform: zTransform });
+    zRows = input(3, ...(ngDevMode ? [{ debugName: "zRows" }] : []));
+    zResize = input(true, { ...(ngDevMode ? { debugName: "zResize" } : {}), transform: zTransform });
+    zMaxLength = input(undefined, ...(ngDevMode ? [{ debugName: "zMaxLength" }] : []));
+    zAutoSuggest = input(undefined, ...(ngDevMode ? [{ debugName: "zAutoSuggest" }] : []));
+    zOnSearch = output();
+    zOnChange = output();
+    zControl = output();
+    inputRef = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputRef" }] : []));
+    inputId = zGenerateId('z-input');
+    passwordVisible = signal(false, ...(ngDevMode ? [{ debugName: "passwordVisible" }] : []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
+    suggestHistory = signal([], ...(ngDevMode ? [{ debugName: "suggestHistory" }] : []));
+    suggestActiveIndex = signal(-1, ...(ngDevMode ? [{ debugName: "suggestActiveIndex" }] : []));
+    showSuggestPopover = signal(false, ...(ngDevMode ? [{ debugName: "showSuggestPopover" }] : []));
+    filteredSuggestHistory = computed(() => {
+        const history = this.suggestHistory();
+        const currentValue = String(this._value() ?? '')
+            .toLowerCase()
+            .trim();
+        if (!currentValue) {
+            return history;
+        }
+        const matching = [];
+        const nonMatching = [];
+        for (const item of history) {
+            const target = item.toLowerCase().includes(currentValue) ? matching : nonMatching;
+            target.push(item);
+        }
+        return [...matching, ...nonMatching];
+    }, ...(ngDevMode ? [{ debugName: "filteredSuggestHistory" }] : []));
+    _value = signal(null, ...(ngDevMode ? [{ debugName: "_value" }] : []));
+    _touched = signal(false, ...(ngDevMode ? [{ debugName: "_touched" }] : []));
+    _disabled = signal(false, ...(ngDevMode ? [{ debugName: "_disabled" }] : []));
+    _dirty = signal(false, ...(ngDevMode ? [{ debugName: "_dirty" }] : []));
+    _formControl = signal(null, ...(ngDevMode ? [{ debugName: "_formControl" }] : []));
+    _formStateVersion = signal(0, ...(ngDevMode ? [{ debugName: "_formStateVersion" }] : []));
+    _isNgModel = signal(false, ...(ngDevMode ? [{ debugName: "_isNgModel" }] : []));
+    _injector = inject(Injector);
+    _destroyRef = inject(DestroyRef);
+    _toastService = inject(ZToastService);
+    _searchSubject = new Subject();
+    _changeSubject = new Subject();
+    _asyncValidationSubject = new Subject();
+    isValidating = signal(false, ...(ngDevMode ? [{ debugName: "isValidating" }] : []));
+    _asyncErrors = signal(new Map(), ...(ngDevMode ? [{ debugName: "_asyncErrors" }] : []));
+    _asyncCancelSubject = new Subject();
+    _asyncValidationAbortController = null;
+    _onChange = () => void 0;
+    _onTouched = () => void 0;
+    _ngControl = null;
+    _arrowInterval = null;
+    isDisabled = computed(() => this._disabled() || this.zDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    isPasswordType = computed(() => this.zType() === 'password', ...(ngDevMode ? [{ debugName: "isPasswordType" }] : []));
+    isColorType = computed(() => this.zType() === 'color', ...(ngDevMode ? [{ debugName: "isColorType" }] : []));
+    colorCopied = signal(false, ...(ngDevMode ? [{ debugName: "colorCopied" }] : []));
+    isPrefixTemplate = computed(() => this.zPrefix() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isPrefixTemplate" }] : []));
+    isSuffixTemplate = computed(() => this.zSuffix() instanceof TemplateRef, ...(ngDevMode ? [{ debugName: "isSuffixTemplate" }] : []));
+    isTextarea = computed(() => this.zType() === 'textarea', ...(ngDevMode ? [{ debugName: "isTextarea" }] : []));
+    effectiveType = computed(() => {
+        if (this.zType() === 'password' && this.passwordVisible()) {
+            return 'text';
+        }
+        if (this.zType() === 'number' && this.effectiveMask()) {
+            return 'text';
+        }
+        return this.zType();
+    }, ...(ngDevMode ? [{ debugName: "effectiveType" }] : []));
+    showArrows = computed(() => this.zType() === 'number' && this.zShowArrows(), ...(ngDevMode ? [{ debugName: "showArrows" }] : []));
+    effectiveMask = computed(() => {
+        if (this.zMask()) {
+            return this.zMask();
+        }
+        if (this.zType() === 'number') {
+            const decimalPlaces = this.zDecimalPlaces();
+            if (decimalPlaces !== undefined) {
+                return `separator.${decimalPlaces}`;
+            }
+            return 'separator.0';
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "effectiveMask" }] : []));
+    effectiveDecimalMarker = computed(() => {
+        const thousandSep = this.zThousandSeparator();
+        const decimalMark = this.zDecimalMarker();
+        if (thousandSep === '.') {
+            return ',';
+        }
+        if (thousandSep === ',') {
+            return '.';
+        }
+        return decimalMark;
+    }, ...(ngDevMode ? [{ debugName: "effectiveDecimalMarker" }] : []));
+    displayValue = computed(() => {
+        const val = this._value();
+        if (val === null || val === undefined) {
+            return '';
+        }
+        return String(val);
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    _shouldShowValidation = computed(() => {
+        const control = this._formControl();
+        this._formStateVersion();
+        if (this._isNgModel()) {
+            return this._dirty() || this._touched();
+        }
+        if (control) {
+            return control.dirty;
+        }
+        return this._dirty() || this._touched();
+    }, ...(ngDevMode ? [{ debugName: "_shouldShowValidation" }] : []));
+    hasError = computed(() => {
+        const asyncErrors = this._asyncErrors();
+        if (asyncErrors.size > 0 && this._shouldShowValidation()) {
+            return true;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return true;
+        }
+        const control = this._formControl();
+        this._formStateVersion();
+        if (!control) {
+            return false;
+        }
+        return control.invalid && this._shouldShowValidation();
+    }, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+    showError = computed(() => this.hasError(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    errorMessage = computed(() => {
+        const asyncErrors = this._asyncErrors();
+        if (asyncErrors.size > 0) {
+            return asyncErrors.values().next().value;
+        }
+        const customErrors = this._getValidationErrors();
+        if (customErrors.length > 0) {
+            return customErrors[0];
+        }
+        const control = this._formControl();
+        const errors = control?.errors;
+        if (!errors) {
+            return '';
+        }
+        const validators = this.zValidators();
+        for (const validator of validators) {
+            if (errors[validator.error]) {
+                return validator.message;
+            }
+        }
+        return getDefaultErrorMessage(errors);
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    hasPrefix = computed(() => this.zSearch() || !!this.zPrefix(), ...(ngDevMode ? [{ debugName: "hasPrefix" }] : []));
+    hasSuffix = computed(() => !!this.zSuffix(), ...(ngDevMode ? [{ debugName: "hasSuffix" }] : []));
+    isTextPrefix = computed(() => {
+        const prefix = this.zPrefix();
+        return typeof prefix === 'string' && prefix.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isTextPrefix" }] : []));
+    isTextSuffix = computed(() => {
+        const suffix = this.zSuffix();
+        return typeof suffix === 'string' && suffix.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "isTextSuffix" }] : []));
+    currentStatus = computed(() => {
+        if (this.isDisabled()) {
+            return 'disabled';
+        }
+        if (this.zReadonly()) {
+            return 'readonly';
+        }
+        if (this.hasError()) {
+            return 'error';
+        }
+        return 'default';
+    }, ...(ngDevMode ? [{ debugName: "currentStatus" }] : []));
+    inputClasses = computed(() => zMergeClasses(zInputVariants({
+        zSize: this.zSize(),
+        zStatus: this.currentStatus(),
+    }), this.class()), ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
+    textareaClasses = computed(() => zMergeClasses(zTextareaVariants({
+        zStatus: this.currentStatus(),
+    }), this.class()), ...(ngDevMode ? [{ debugName: "textareaClasses" }] : []));
+    hasAutoSuggest = computed(() => {
+        const key = this.zAutoSuggest();
+        return key !== undefined && key.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasAutoSuggest" }] : []));
+    hasValue = computed(() => {
+        const value = this._value();
+        return value !== null && value !== undefined && value !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    showClearButton = computed(() => this.zAllowClear() && this.hasValue() && !this.isDisabled() && !this.zReadonly(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
+    ngOnInit() {
+        void Promise.resolve().then(() => {
+            try {
+                this._ngControl = this._injector.get(NgControl, null);
+                this._isNgModel.set(this._ngControl instanceof NgModel);
+                if (this._ngControl?.control) {
+                    const { control } = this._ngControl;
+                    this._formControl.set(control);
+                    merge(control.statusChanges, control.valueChanges, control.events.pipe(filter(event => event instanceof PristineChangeEvent || event instanceof TouchedChangeEvent)))
+                        .pipe(takeUntilDestroyed(this._destroyRef))
+                        .subscribe(() => {
+                        this._formStateVersion.update(v => v + 1);
+                    });
+                }
+            }
+            catch {
+                this._ngControl = null;
+            }
+        });
+        this._searchSubject.pipe(debounceTime(this.zDebounce()), takeUntilDestroyed(this._destroyRef)).subscribe(value => {
+            this.zOnSearch.emit(value);
+        });
+        this._changeSubject.pipe(debounceTime(this.zDebounce()), takeUntilDestroyed(this._destroyRef)).subscribe(value => {
+            this.zOnChange.emit(value);
+        });
+        const asyncValidators = this.zAsyncValidators();
+        if (asyncValidators.length > 0) {
+            const debounceMs = this.zAsyncDebounce() || 300;
+            this._asyncValidationSubject
+                .pipe(debounceTime(debounceMs), takeUntilDestroyed(this._destroyRef))
+                .subscribe(value => {
+                void this._runAsyncValidation(value);
+            });
+        }
+        setTimeout(() => this._emitControl());
+        if (this.zAutofocus()) {
+            setTimeout(() => {
+                this.focus();
+            }, 20);
+        }
+    }
+    async _runAsyncValidation(value) {
+        const asyncValidators = this.zAsyncValidators();
+        if (asyncValidators.length === 0) {
+            return;
+        }
+        if ((value === null || value === undefined || value === '') && !this.zRequired()) {
+            this._asyncErrors.set(new Map());
+            this.isValidating.set(false);
+            return;
+        }
+        this._cancelAsyncValidation();
+        this._asyncValidationAbortController = new AbortController();
+        const { signal } = this._asyncValidationAbortController;
+        this.isValidating.set(true);
+        const errors = new Map();
+        try {
+            const validationPromises = asyncValidators.map(async (validator) => {
+                if (signal.aborted) {
+                    return null;
+                }
+                try {
+                    const result = validator.validate(value);
+                    if (!isObservable(result)) {
+                        const isValid = await result;
+                        if (signal.aborted) {
+                            return null;
+                        }
+                        return { validator, isValid };
+                    }
+                    const safeResult$ = result.pipe(takeUntil(this._asyncCancelSubject), catchError(err => {
+                        console.error(`Async validation error for ${validator.error}:`, err);
+                        return of(false);
+                    }));
+                    const isValid = await firstValueFrom(safeResult$);
+                    if (signal.aborted) {
+                        return null;
+                    }
+                    return { validator, isValid };
+                }
+                catch (error) {
+                    if (!signal.aborted) {
+                        console.error(`Async validation error for ${validator.error}:`, error);
+                        return {
+                            validator,
+                            isValid: false,
+                            error: true,
+                        };
+                    }
+                    return null;
+                }
+            });
+            const results = await Promise.all(validationPromises);
+            if (signal.aborted) {
+                return;
+            }
+            for (const result of results) {
+                if (result && !result.isValid) {
+                    errors.set(result.validator.error, result.validator.message);
+                }
+            }
+            this._asyncErrors.set(errors);
+        }
+        catch (error) {
+            if (!signal.aborted) {
+                console.error('Async validation error:', error);
+            }
+        }
+        finally {
+            if (!signal.aborted) {
+                this.isValidating.set(false);
+            }
+        }
+    }
+    _cancelAsyncValidation() {
+        if (this._asyncValidationAbortController) {
+            this._asyncValidationAbortController.abort();
+            this._asyncValidationAbortController = null;
+        }
+        this._asyncCancelSubject.next();
+    }
+    writeValue(value) {
+        this._value.set(value);
+    }
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this._disabled.set(isDisabled);
+    }
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    blur() {
+        this.inputRef()?.nativeElement.blur();
+    }
+    markAsTouched() {
+        this._touched.set(true);
+        this._onTouched();
+    }
+    markAsUntouched() {
+        this._touched.set(false);
+    }
+    markAsDirty() {
+        this._dirty.set(true);
+    }
+    markAsPristine() {
+        this._dirty.set(false);
+    }
+    validate() {
+        this._touched.set(true);
+        this._dirty.set(true);
+        this._onTouched();
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsDirty();
+            this._ngControl.control.markAsTouched();
+        }
+    }
+    reset() {
+        this._cancelAsyncValidation();
+        this.isValidating.set(false);
+        this._asyncErrors.set(new Map());
+        this._value.set(null);
+        this._touched.set(false);
+        this._dirty.set(false);
+        this._onChange(null);
+        if (this._ngControl?.control) {
+            this._ngControl.control.markAsPristine();
+            this._ngControl.control.markAsUntouched();
+        }
+    }
+    setValue(value) {
+        this._value.set(value);
+        this._onChange(value);
+    }
+    getValue() {
+        return this._value();
+    }
+    clearValue(event) {
+        event.stopPropagation();
+        this._value.set(null);
+        this._dirty.set(true);
+        this._onChange(null);
+        this._changeSubject.next(null);
+        if (this.zSearch()) {
+            this._searchSubject.next(null);
+        }
+        this.focus();
+    }
+    _emitControl() {
+        this.zControl.emit({
+            validate: () => this.validate(),
+            reset: () => this.reset(),
+            focus: () => this.focus(),
+            blur: () => this.blur(),
+            markAsTouched: () => this.markAsTouched(),
+            markAsUntouched: () => this.markAsUntouched(),
+            markAsDirty: () => this.markAsDirty(),
+            markAsPristine: () => this.markAsPristine(),
+            setValue: (value) => this.setValue(value),
+            hasError: this.hasError,
+            isValidating: this.isValidating,
+            value: this._value.asReadonly(),
+            errorMessage: this.errorMessage,
+        });
+    }
+    onInput(event) {
+        const { value: rawValue } = event.target;
+        let value = rawValue;
+        if (this.zType() === 'number') {
+            const cleanValue = this._cleanNumberValue(value);
+            value = cleanValue === '' ? null : parseFloat(cleanValue);
+            if (value !== null && isNaN(value)) {
+                value = null;
+            }
+        }
+        this._value.set(value);
+        this._dirty.set(true);
+        this._onChange(value);
+        if (this.zSearch()) {
+            this._searchSubject.next(value);
+        }
+    }
+    onModelChange(rawValue) {
+        let value = rawValue;
+        if (this.zType() === 'number' && typeof rawValue === 'string') {
+            const cleanValue = this._cleanNumberValue(rawValue);
+            value = cleanValue === '' ? null : parseFloat(cleanValue);
+            if (value !== null && isNaN(value)) {
+                value = null;
+            }
+        }
+        this._value.set(value);
+        this._dirty.set(true);
+        this._onChange(value);
+        // Emit debounced change event
+        this._changeSubject.next(value);
+        if (this.zSearch()) {
+            this._searchSubject.next(value);
+        }
+        if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'change') {
+            this._asyncValidationSubject.next(value);
+        }
+        if (this.hasAutoSuggest() && this.isFocused()) {
+            this._loadSuggestHistory();
+            if (this.suggestHistory().length > 0) {
+                this._showSuggestPopover();
+                this.suggestActiveIndex.set(-1);
+            }
+        }
+    }
+    onBlur() {
+        if (this._dirty()) {
+            this._touched.set(true);
+        }
+        this._onTouched();
+        this.isFocused.set(false);
+        if (this.zAsyncValidators().length > 0 && this.zAsyncValidateOn() === 'blur') {
+            this._asyncValidationSubject.next(this._value());
+        }
+        const el = this.inputRef()?.nativeElement;
+        if (el) {
+            if (el.value && !el.classList.contains('z-input-auto-fill')) {
+                el.classList.add('z-input-auto-fill');
+                const currentValue = el.value;
+                el.value = '';
+                el.value = currentValue;
+            }
+        }
+    }
+    onFocus() {
+        this.isFocused.set(true);
+        this._loadSuggestHistory();
+        if (this.hasAutoSuggest() && this.suggestHistory().length > 0) {
+            this._showSuggestPopover();
+        }
+    }
+    onKeydown(event) {
+        if (this.zType() !== 'number') {
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this._incrementValue(1);
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this._incrementValue(-1);
+        }
+    }
+    onSuggestKeydown(event) {
+        if (event.key === 'Enter' && this.hasAutoSuggest()) {
+            const activeIndex = this.suggestActiveIndex();
+            const history = this.filteredSuggestHistory();
+            if (this.showSuggestPopover() && activeIndex >= 0 && activeIndex < history.length) {
+                event.preventDefault();
+                this.selectSuggestItem(history[activeIndex]);
+                return;
+            }
+            const currentValue = String(this._value() ?? '').trim();
+            if (currentValue) {
+                this.saveToSuggestHistory(currentValue);
+                this._hideSuggestPopover();
+                this.suggestActiveIndex.set(-1);
+                if (this.zSearch()) {
+                    this.zOnSearch.emit(currentValue);
+                }
+            }
+            return;
+        }
+        if (!this.hasAutoSuggest() || !this.showSuggestPopover()) {
+            return;
+        }
+        const history = this.filteredSuggestHistory();
+        if (history.length === 0) {
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            const currentIndex = this.suggestActiveIndex();
+            const newIndex = currentIndex < history.length - 1 ? currentIndex + 1 : 0;
+            this.suggestActiveIndex.set(newIndex);
+            return;
+        }
+        if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            const currentIndex = this.suggestActiveIndex();
+            const newIndex = currentIndex > 0 ? currentIndex - 1 : history.length - 1;
+            this.suggestActiveIndex.set(newIndex);
+            return;
+        }
+        if (event.key === 'Escape') {
+            this._hideSuggestPopover();
+            this.suggestActiveIndex.set(-1);
+        }
+    }
+    selectSuggestItem(item) {
+        this._value.set(item);
+        this._dirty.set(true);
+        this._onChange(item);
+        this._hideSuggestPopover();
+        this.suggestActiveIndex.set(-1);
+        this.saveToSuggestHistory(item);
+        if (this.zSearch()) {
+            this._searchSubject.next(item);
+        }
+    }
+    closeSuggestPopover() {
+        setTimeout(() => {
+            this._hideSuggestPopover();
+            this.suggestActiveIndex.set(-1);
+        }, 150);
+    }
+    _showSuggestPopover() {
+        this.showSuggestPopover.set(true);
+    }
+    _hideSuggestPopover() {
+        this.showSuggestPopover.set(false);
+    }
+    saveToSuggestHistory(value) {
+        const key = this.zAutoSuggest();
+        if (!key || !value || value.trim() === '') {
+            return;
+        }
+        const cacheKey = `autosuggest-${key}`;
+        let history = ZCacheService.get(cacheKey, []) ?? [];
+        const trimmedValue = value.trim();
+        history = history.filter(item => item !== trimmedValue);
+        history.unshift(trimmedValue);
+        if (history.length > 5) {
+            history = history.slice(0, 5);
+        }
+        ZCacheService.set(cacheKey, history);
+        this.suggestHistory.set(history);
+    }
+    _loadSuggestHistory() {
+        const key = this.zAutoSuggest();
+        if (!key) {
+            this.suggestHistory.set([]);
+            return;
+        }
+        const cacheKey = `autosuggest-${key}`;
+        const history = ZCacheService.get(cacheKey, []) ?? [];
+        this.suggestHistory.set(history);
+    }
+    onArrowMouseDown(event, direction) {
+        event.preventDefault();
+        const multiplier = direction === 'up' ? 1 : -1;
+        this._incrementValue(multiplier);
+        this._arrowInterval = setInterval(() => {
+            this._incrementValue(multiplier);
+        }, 100);
+    }
+    onArrowMouseUp() {
+        if (this._arrowInterval) {
+            clearInterval(this._arrowInterval);
+            this._arrowInterval = null;
+        }
+    }
+    togglePasswordVisibility() {
+        this.passwordVisible.update(v => !v);
+    }
+    copyColorToClipboard() {
+        const colorValue = String(this._value() || '#000000').toUpperCase();
+        void navigator.clipboard.writeText(colorValue).then(() => {
+            this.colorCopied.set(true);
+            this._toastService.success(`Copied ${colorValue}`);
+            setTimeout(() => {
+                this.colorCopied.set(false);
+            }, 1500);
+        });
+    }
+    _incrementValue(multiplier) {
+        const currentValue = this._value();
+        const numValue = typeof currentValue === 'number' ? currentValue : parseFloat(String(currentValue)) || 0;
+        const step = this.zStep();
+        let newValue = numValue + step * multiplier;
+        const min = this.zMin();
+        const max = this.zMax();
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        if (max !== undefined && newValue > max) {
+            newValue = max;
+        }
+        if (!this.zAllowNegative() && newValue < 0) {
+            newValue = 0;
+        }
+        this._value.set(newValue);
+        this._onChange(newValue);
+    }
+    _cleanNumberValue(value) {
+        const thousandSep = this.zThousandSeparator();
+        let cleaned = value.replace(new RegExp(`\\${thousandSep}`, 'g'), '');
+        const decimalMarker = this.zDecimalMarker();
+        if (typeof decimalMarker === 'string' && decimalMarker !== '.') {
+            cleaned = cleaned.replace(decimalMarker, '.');
+        }
+        return cleaned;
+    }
+    _getValidationErrors() {
+        const errors = [];
+        const value = this._value();
+        const validators = this.zValidators();
+        if (!this._shouldShowValidation()) {
+            return errors;
+        }
+        for (const validator of validators) {
+            if (validator.validate && !validator.validate(value)) {
+                errors.push(validator.message);
+                continue;
+            }
+            if (validator.error === 'required' && this.zRequired()) {
+                if (value === null || value === undefined || value === '') {
+                    errors.push(validator.message);
+                }
+            }
+            if (validator.error === 'number' && value !== null && value !== '') {
+                const numValue = typeof value === 'number' ? value : parseFloat(String(value));
+                if (isNaN(numValue)) {
+                    errors.push(validator.message);
+                }
+            }
+            if (validator.error === 'min' && validator.min !== undefined && value !== null && value !== '') {
+                const numValue = typeof value === 'number' ? value : parseFloat(String(value));
+                if (!isNaN(numValue) && numValue < validator.min) {
+                    errors.push(validator.message);
+                }
+            }
+            if (validator.error === 'max' && validator.max !== undefined && value !== null && value !== '') {
+                const numValue = typeof value === 'number' ? value : parseFloat(String(value));
+                if (!isNaN(numValue) && numValue > validator.max) {
+                    errors.push(validator.message);
+                }
+            }
+            if (validator.error === 'pattern' && validator.pattern && value !== null && value !== '') {
+                if (!validator.pattern.test(String(value))) {
+                    errors.push(validator.message);
+                }
+            }
+        }
+        return errors;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZInputComponent, isStandalone: true, selector: "z-input", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zLabelClass: { classPropertyName: "zLabelClass", publicName: "zLabelClass", isSignal: true, isRequired: false, transformFunction: null }, zPlaceholder: { classPropertyName: "zPlaceholder", publicName: "zPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zRequired: { classPropertyName: "zRequired", publicName: "zRequired", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zReadonly: { classPropertyName: "zReadonly", publicName: "zReadonly", isSignal: true, isRequired: false, transformFunction: null }, zPrefix: { classPropertyName: "zPrefix", publicName: "zPrefix", isSignal: true, isRequired: false, transformFunction: null }, zSuffix: { classPropertyName: "zSuffix", publicName: "zSuffix", isSignal: true, isRequired: false, transformFunction: null }, zMin: { classPropertyName: "zMin", publicName: "zMin", isSignal: true, isRequired: false, transformFunction: null }, zMax: { classPropertyName: "zMax", publicName: "zMax", isSignal: true, isRequired: false, transformFunction: null }, zStep: { classPropertyName: "zStep", publicName: "zStep", isSignal: true, isRequired: false, transformFunction: null }, zShowArrows: { classPropertyName: "zShowArrows", publicName: "zShowArrows", isSignal: true, isRequired: false, transformFunction: null }, zMask: { classPropertyName: "zMask", publicName: "zMask", isSignal: true, isRequired: false, transformFunction: null }, zDecimalPlaces: { classPropertyName: "zDecimalPlaces", publicName: "zDecimalPlaces", isSignal: true, isRequired: false, transformFunction: null }, zAllowNegative: { classPropertyName: "zAllowNegative", publicName: "zAllowNegative", isSignal: true, isRequired: false, transformFunction: null }, zThousandSeparator: { classPropertyName: "zThousandSeparator", publicName: "zThousandSeparator", isSignal: true, isRequired: false, transformFunction: null }, zDecimalMarker: { classPropertyName: "zDecimalMarker", publicName: "zDecimalMarker", isSignal: true, isRequired: false, transformFunction: null }, zValidators: { classPropertyName: "zValidators", publicName: "zValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidators: { classPropertyName: "zAsyncValidators", publicName: "zAsyncValidators", isSignal: true, isRequired: false, transformFunction: null }, zAsyncDebounce: { classPropertyName: "zAsyncDebounce", publicName: "zAsyncDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAsyncValidateOn: { classPropertyName: "zAsyncValidateOn", publicName: "zAsyncValidateOn", isSignal: true, isRequired: false, transformFunction: null }, zShowPasswordToggle: { classPropertyName: "zShowPasswordToggle", publicName: "zShowPasswordToggle", isSignal: true, isRequired: false, transformFunction: null }, zSearch: { classPropertyName: "zSearch", publicName: "zSearch", isSignal: true, isRequired: false, transformFunction: null }, zDebounce: { classPropertyName: "zDebounce", publicName: "zDebounce", isSignal: true, isRequired: false, transformFunction: null }, zAutofocus: { classPropertyName: "zAutofocus", publicName: "zAutofocus", isSignal: true, isRequired: false, transformFunction: null }, zAutoComplete: { classPropertyName: "zAutoComplete", publicName: "zAutoComplete", isSignal: true, isRequired: false, transformFunction: null }, zAllowClear: { classPropertyName: "zAllowClear", publicName: "zAllowClear", isSignal: true, isRequired: false, transformFunction: null }, zAutoSizeContent: { classPropertyName: "zAutoSizeContent", publicName: "zAutoSizeContent", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zResize: { classPropertyName: "zResize", publicName: "zResize", isSignal: true, isRequired: false, transformFunction: null }, zMaxLength: { classPropertyName: "zMaxLength", publicName: "zMaxLength", isSignal: true, isRequired: false, transformFunction: null }, zAutoSuggest: { classPropertyName: "zAutoSuggest", publicName: "zAutoSuggest", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnSearch: "zOnSearch", zOnChange: "zOnChange", zControl: "zControl" }, providers: [
+            provideNgxMask(),
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ZInputComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], exportAs: ["zInput"], ngImport: i0, template: "<div class=\"z-input-wrapper flex w-full flex-col gap-2\">\n  @if (zLabel()) {\n    <label [for]=\"inputId\" class=\"text-xs leading-none font-medium\" [class]=\"zLabelClass()\">\n      {{ zLabel() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder()\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder()\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-white text-sm outline-none dark:bg-transparent\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"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]=\"colorCopied() ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (mousedown)=\"onArrowMouseDown($event, 'up')\"\n              (mouseup)=\"onArrowMouseUp()\"\n              (mouseleave)=\"onArrowMouseUp()\">\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)=\"onArrowMouseDown($event, 'down')\"\n              (mouseup)=\"onArrowMouseUp()\"\n              (mouseleave)=\"onArrowMouseUp()\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (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() && showSuggestPopover() && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], 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,
+            args: [{ selector: 'z-input', imports: [FormsModule, ReactiveFormsModule, NgxMaskDirective, ZIconComponent, NgTemplateOutlet], standalone: true, providers: [
+                        provideNgxMask(),
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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() }}\n      @if (zRequired()) {\n        <span class=\"text-destructive! ml-0.5\">*</span>\n      }\n    </label>\n  }\n\n  @if (isTextarea()) {\n    <div class=\"relative w-full\" [class]=\"textareaClasses()\" [class.overflow-auto]=\"zAutoSizeContent()\">\n      <textarea\n        #inputEl\n        [id]=\"inputId\"\n        [placeholder]=\"zPlaceholder()\"\n        class=\"z-input-native placeholder:text-muted-foreground m-0 block min-h-14 w-full resize-none bg-transparent p-2 text-sm outline-none\"\n        [class.resize-y]=\"zResize() && !isDisabled() && !zReadonly()\"\n        [class.field-sizing-content]=\"zAutoSizeContent()\"\n        [disabled]=\"isDisabled()\"\n        [readonly]=\"zReadonly()\"\n        [autocomplete]=\"zAutoComplete()\"\n        [rows]=\"zRows()\"\n        [attr.maxlength]=\"zMaxLength()\"\n        [ngModel]=\"displayValue()\"\n        (ngModelChange)=\"onModelChange($event)\"\n        (blur)=\"onBlur()\"\n        (focus)=\"onFocus()\"\n        (keydown)=\"onKeydown($event)\"></textarea>\n      @if (zMaxLength()) {\n        <div class=\"flex justify-end pr-1 pb-1\">\n          <span class=\"text-muted-foreground text-xs\">{{ displayValue().length }} / {{ zMaxLength() }}</span>\n        </div>\n      }\n      @if (zResize() && !isDisabled() && !zReadonly() && !zMaxLength()) {\n        <svg\n          class=\"text-muted-foreground pointer-events-none absolute right-0.5 bottom-0.5 opacity-40\"\n          width=\"12\"\n          height=\"12\"\n          viewBox=\"0 0 12 12\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\">\n          <path d=\"M10 2L2 10\" />\n          <path d=\"M10 6L6 10\" />\n        </svg>\n      }\n    </div>\n  } @else {\n    <div class=\"relative w-full\">\n      <div class=\"z-input-container flex w-full items-center\" [class]=\"inputClasses()\">\n        <!-- Color picker square (prefix for color type) -->\n        @if (isColorType()) {\n          <label\n            [for]=\"inputId\"\n            class=\"border-input relative z-10 size-6 shrink-0 cursor-pointer overflow-hidden rounded border\">\n            <input\n              type=\"color\"\n              [id]=\"inputId + '-picker'\"\n              class=\"absolute -top-2 -left-2 size-12 cursor-pointer border-none bg-transparent p-0\"\n              [disabled]=\"isDisabled()\"\n              [ngModel]=\"displayValue() || '#000000'\"\n              (ngModelChange)=\"onModelChange($event)\"\n              (blur)=\"onBlur()\"\n              (focus)=\"onFocus()\" />\n          </label>\n        }\n\n        @if (hasPrefix() && !isColorType()) {\n          <div class=\"text-muted-foreground left-3 flex items-center justify-center\">\n            @if (zSearch()) {\n              <z-icon zType=\"lucideSearch\" zSize=\"16\" />\n            } @else if (isPrefixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zPrefix())\" />\n            } @else {\n              {{ zPrefix() }}\n            }\n          </div>\n        }\n\n        <input\n          #inputEl\n          [id]=\"inputId\"\n          [type]=\"isColorType() ? 'text' : effectiveType()\"\n          [placeholder]=\"zPlaceholder()\"\n          class=\"z-input-native placeholder:text-muted-foreground h-full min-w-0 flex-1 bg-white text-sm outline-none dark:bg-transparent\"\n          [disabled]=\"isDisabled()\"\n          [readonly]=\"isColorType() ? true : zReadonly()\"\n          [attr.min]=\"zMin()\"\n          [attr.max]=\"zMax()\"\n          [attr.step]=\"zStep()\"\n          [autocomplete]=\"zAutoComplete()\"\n          [ngModel]=\"isColorType() ? (displayValue() || '#000000').toUpperCase() : displayValue()\"\n          (ngModelChange)=\"onModelChange($event)\"\n          (blur)=\"onBlur()\"\n          (focus)=\"onFocus()\"\n          (keydown)=\"onKeydown($event)\"\n          [mask]=\"effectiveMask()\"\n          [thousandSeparator]=\"zThousandSeparator()\"\n          [decimalMarker]=\"effectiveDecimalMarker()\"\n          [allowNegativeNumbers]=\"zAllowNegative()\"\n          [dropSpecialCharacters]=\"false\"\n          (keydown)=\"onSuggestKeydown($event)\"\n          (blur)=\"closeSuggestPopover()\" />\n\n        @if (hasSuffix() && !isColorType()) {\n          <div class=\"text-muted-foreground flex items-center justify-center text-sm\">\n            @if (isSuffixTemplate()) {\n              <ng-container *ngTemplateOutlet=\"$any(zSuffix())\" />\n            } @else {\n              {{ zSuffix() }}\n            }\n          </div>\n        }\n\n        <!-- Async validation loading indicator -->\n        @if (isValidating()) {\n          <div class=\"text-muted-foreground flex items-center justify-center\">\n            <z-icon zType=\"lucideLoader2\" zSize=\"16\" class=\"animate-spin\" />\n          </div>\n        }\n\n        <!-- Clear button -->\n        @if (showClearButton()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-5 shrink-0 cursor-pointer items-center justify-center rounded transition-colors\"\n            (click)=\"clearValue($event)\">\n            <z-icon zType=\"lucideX\" zSize=\"14\" />\n          </button>\n        }\n\n        <!-- Copy button for color type -->\n        @if (isColorType()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-accent flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"copyColorToClipboard()\">\n            <span class=\"relative flex size-4 items-center justify-center\">\n              <z-icon\n                zType=\"lucideCopy\"\n                [class]=\"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]=\"colorCopied() ? 'text-success scale-100 rotate-0 opacity-100' : 'scale-0 -rotate-90 opacity-0'\"\n                class=\"absolute transition-all duration-200 ease-out\"\n                zSize=\"14\" />\n            </span>\n          </button>\n        }\n\n        @if (showArrows() && !isDisabled()) {\n          <div class=\"-mr-1 flex h-[calc(100%-4px)] shrink-0 flex-col\">\n            <button\n              type=\"button\"\n              tabindex=\"-1\"\n              class=\"text-muted-foreground hover:bg-accent hover:text-foreground flex w-5 flex-1 cursor-pointer items-center justify-center rounded transition-all\"\n              (mousedown)=\"onArrowMouseDown($event, 'up')\"\n              (mouseup)=\"onArrowMouseUp()\"\n              (mouseleave)=\"onArrowMouseUp()\">\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)=\"onArrowMouseDown($event, 'down')\"\n              (mouseup)=\"onArrowMouseUp()\"\n              (mouseleave)=\"onArrowMouseUp()\">\n              <z-icon zType=\"lucideChevronDown\" zSize=\"12\" />\n            </button>\n          </div>\n        }\n\n        @if (isPasswordType() && zShowPasswordToggle()) {\n          <button\n            type=\"button\"\n            tabindex=\"-1\"\n            class=\"text-muted-foreground hover:text-foreground flex size-6 shrink-0 cursor-pointer items-center justify-center rounded transition-all\"\n            (click)=\"togglePasswordVisibility()\">\n            @if (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() && showSuggestPopover() && suggestHistory().length > 0) {\n        <div\n          class=\"bg-popover text-popover-foreground border-border z-animate-in z-fade-in z-duration-200 z-slide-in-from-top-4 absolute top-full left-0 z-50 mt-1 flex w-full flex-col gap-[3px] rounded-[6px] border p-1 shadow-md\">\n          @for (item of filteredSuggestHistory(); track item; let i = $index) {\n            <button\n              type=\"button\"\n              class=\"hover:bg-primary/10 hover:text-foreground flex w-full cursor-pointer items-center gap-2 rounded-[4px] px-2 py-1.5 text-left text-sm transition-colors\"\n              [class.bg-primary/15]=\"suggestActiveIndex() === i\"\n              [class.text-primary]=\"suggestActiveIndex() === i\"\n              (mousedown)=\"selectSuggestItem(item)\">\n              <z-icon zType=\"lucideClock\" zSize=\"14\" class=\"text-muted-foreground shrink-0\" />\n              <span class=\"truncate\">{{ item }}</span>\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  @if (showError()) {\n    <p class=\"text-destructive animate-in fade-in slide-in-from-top-1 m-0 text-xs duration-200\">\n      {{ errorMessage() }}\n    </p>\n  }\n</div>\n", styles: [".z-input-native:-webkit-autofill,.z-input-native:-webkit-autofill:hover,.z-input-native:-webkit-autofill:focus,.z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px white inset!important;-webkit-text-fill-color:var(--color-foreground)!important;transition:background-color 9999s ease-in-out 0s!important;caret-color:var(--color-foreground)}:is(.dark,.dark *) .z-input-native:-webkit-autofill,:is(.dark,.dark *) .z-input-native:-webkit-autofill:hover,:is(.dark,.dark *) .z-input-native:-webkit-autofill:focus,:is(.dark,.dark *) .z-input-native:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px var(--input-autofill) inset!important;transition:background-color 9999s ease-in-out 0s!important}textarea.z-input-native::-webkit-resizer{display:none}input[type=color]{cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}input[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--radius) - 2px)}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zLabelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabelClass", required: false }] }], zPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPlaceholder", required: false }] }], zRequired: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRequired", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReadonly", required: false }] }], zPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPrefix", required: false }] }], zSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSuffix", required: false }] }], zMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMin", required: false }] }], zMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMax", required: false }] }], zStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStep", required: false }] }], zShowArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowArrows", required: false }] }], zMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMask", required: false }] }], zDecimalPlaces: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalPlaces", required: false }] }], zAllowNegative: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowNegative", required: false }] }], zThousandSeparator: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThousandSeparator", required: false }] }], zDecimalMarker: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDecimalMarker", required: false }] }], zValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zValidators", required: false }] }], zAsyncValidators: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidators", required: false }] }], zAsyncDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncDebounce", required: false }] }], zAsyncValidateOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAsyncValidateOn", required: false }] }], zShowPasswordToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPasswordToggle", required: false }] }], zSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearch", required: false }] }], zDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDebounce", required: false }] }], zAutofocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutofocus", required: false }] }], zAutoComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoComplete", required: false }] }], zAllowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAllowClear", required: false }] }], zAutoSizeContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSizeContent", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zResize", required: false }] }], zMaxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxLength", required: false }] }], zAutoSuggest: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAutoSuggest", required: false }] }], zOnSearch: [{ type: i0.Output, args: ["zOnSearch"] }], zOnChange: [{ type: i0.Output, args: ["zOnChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], inputRef: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZInputComponent, zInputVariants, zTextareaVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-input.mjs.map