@sdcorejs/angular 19.1.2 → 19.1.4

package/fesm2022/sdcorejs-angular-forms-input.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { viewChild, contentChild, input, computed, inject, ChangeDetectorRef, booleanAttribute, model, output, EventEmitter, effect, untracked, Output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { viewChild, contentChild, input, computed, inject, ChangeDetectorRef, booleanAttribute, model, output, EventEmitter, signal, effect, untracked, Output, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Utilities } from '@sdcorejs/utils/fns';
 import * as i2 from '@angular/forms';
 import { NgForm, FormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -16,13 +16,157 @@ import { SdView } from '@sdcorejs/angular/components/view';
 import { SdInlineText } from '@sdcorejs/angular/forms/inline-text';
 import { SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
-import { sdFormControlState, SD_FORM_CONFIGURATION, sdViewedTransform, sdViewedInline, SdFormControl, SdInlineErrorValidator, HandleSdCustomValidator } from '@sdcorejs/angular/forms/models';
+import { sdFormControlState, SD_FORM_CONFIGURATION, sdViewedTransform, SdFormControl, SdInlineErrorValidator, HandleSdCustomValidator, ɵsdFormControlConnector as _sdFormControlConnector, sdViewedInline } from '@sdcorejs/angular/forms/models';
 import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
 import { I18nService, TranslatePipe } from '@sdcorejs/angular/i18n';
 import { VALIDATION_PATTERNS } from '@sdcorejs/utils/constants';
 import { Subscription } from 'rxjs';
 import { SdIcon } from '@sdcorejs/angular/modules/icon';
 
+const DEFAULT_TOKENS = {
+    '#': { pattern: /[0-9]/ },
+    '9': { pattern: /[0-9]/, optional: true },
+    A: { pattern: /[A-Za-z]/ },
+    a: { pattern: /[A-Za-z]/, optional: true },
+    '*': { pattern: /[A-Za-z0-9]/ },
+    '?': { pattern: /[A-Za-z0-9]/, optional: true },
+};
+function tokenAccepts(token, value) {
+    token.pattern.lastIndex = 0;
+    const accepted = token.pattern.test(value);
+    token.pattern.lastIndex = 0;
+    return accepted;
+}
+/**
+ * Creates a dependency-free slot mask.
+ *
+ * Default tokens: `#` required digit, `9` optional digit, `A`/`a` required/optional
+ * letter, and `*`/`?` required/optional alphanumeric. Every other character is a
+ * display literal and never leaks into the raw model.
+ */
+function sdCreateInputMask(pattern, options = {}) {
+    if (!pattern)
+        throw new Error('Input mask pattern must not be empty.');
+    const tokens = { ...DEFAULT_TOKENS, ...options.tokens };
+    const slots = [];
+    const literals = [];
+    const units = Array.from(pattern, (value, unitIndex) => {
+        const token = tokens[value];
+        if (token) {
+            const slot = { unitIndex, slotIndex: slots.length, token };
+            slots.push(slot);
+            return slot;
+        }
+        const literal = { unitIndex, value };
+        literals.push(literal);
+        return literal;
+    });
+    if (slots.length === 0)
+        throw new Error('Input mask pattern must contain at least one token.');
+    const literalValues = new Set(literals.map(item => item.value));
+    const convert = (source, sourceSelectionStart, sourceSelectionEnd, sourceIsDisplay) => {
+        const assigned = [];
+        let unitCursor = 0;
+        let invalid = false;
+        for (let sourceIndex = 0; sourceIndex < source.length; sourceIndex += 1) {
+            const value = source[sourceIndex];
+            let consumed = false;
+            // why: literals are consumed at the pattern cursor, not filtered globally;
+            // a global filter would corrupt raw digits in masks with prefixes such as `+84`.
+            while (unitCursor < units.length) {
+                const unit = units[unitCursor];
+                if ('value' in unit) {
+                    unitCursor += 1;
+                    if (sourceIsDisplay && value === unit.value) {
+                        consumed = true;
+                        break;
+                    }
+                    continue;
+                }
+                if (tokenAccepts(unit.token, value)) {
+                    assigned.push({
+                        slotIndex: unit.slotIndex,
+                        unitIndex: unit.unitIndex,
+                        value: unit.token.transform?.(value) ?? value,
+                        sourceIndex,
+                    });
+                    unitCursor += 1;
+                    consumed = true;
+                    break;
+                }
+                if (sourceIsDisplay && literalValues.has(value)) {
+                    consumed = true;
+                    break;
+                }
+                if (unit.token.optional) {
+                    unitCursor += 1;
+                    continue;
+                }
+                invalid = true;
+                consumed = true;
+                break;
+            }
+            if (!consumed)
+                invalid = true;
+        }
+        const assignedByUnit = new Map(assigned.map(item => [item.unitIndex, item]));
+        const lastFilledUnit = assigned.at(-1)?.unitIndex ?? -1;
+        let display = '';
+        let acceptedCount = 0;
+        const displayPositionByAcceptedCount = new Map([[0, 0]]);
+        for (const unit of units) {
+            if ('token' in unit) {
+                const item = assignedByUnit.get(unit.unitIndex);
+                if (!item)
+                    continue;
+                display += item.value;
+                acceptedCount += 1;
+                displayPositionByAcceptedCount.set(acceptedCount, display.length);
+            }
+            else if (unit.unitIndex < lastFilledUnit) {
+                display += unit.value;
+            }
+        }
+        const raw = assigned.map(item => item.value).join('');
+        const hasEveryRequiredSlot = slots.every((slot, index) => slot.token.optional || assigned.some(item => item.slotIndex === index));
+        const status = invalid ? 'invalid' : raw.length === 0 ? 'empty' : hasEveryRequiredSlot ? 'valid' : 'incomplete';
+        const acceptedBefore = (position) => assigned.filter(item => item.sourceIndex < Math.max(0, position)).length;
+        const mapSelection = (position) => {
+            const count = acceptedBefore(position);
+            return displayPositionByAcceptedCount.get(count) ?? display.length;
+        };
+        return {
+            raw,
+            display,
+            status,
+            selectionStart: mapSelection(sourceSelectionStart),
+            selectionEnd: mapSelection(sourceSelectionEnd),
+        };
+    };
+    return {
+        inputMode: options.inputMode ?? (slots.every(slot => tokenAccepts(slot.token, '0')) ? 'numeric' : 'text'),
+        maxDisplayLength: pattern.length,
+        format: raw => {
+            const source = raw == null ? '' : String(raw);
+            return convert(source, source.length, source.length, false);
+        },
+        parse: (display, selectionStart = display.length, selectionEnd = selectionStart) => convert(display, selectionStart ?? display.length, selectionEnd ?? selectionStart ?? display.length, true),
+    };
+}
+/** Common business masks. Models remain raw strings; separators are display-only. */
+const SD_INPUT_MASKS = {
+    VN_PHONE: sdCreateInputMask('#### ### ###', { inputMode: 'tel' }),
+    VN_ID: sdCreateInputMask('#### #### ####', { inputMode: 'numeric' }),
+    VN_TAX_CODE: sdCreateInputMask('##########-999', { inputMode: 'numeric' }),
+    BANK_ACCOUNT: sdCreateInputMask('######99999999999999', { inputMode: 'numeric' }),
+    BUSINESS_CODE: sdCreateInputMask('****-????????????', { inputMode: 'text' }),
+};
+function sdResolveInputMask(mask) {
+    if (!mask)
+        return undefined;
+    return typeof mask === 'string' ? SD_INPUT_MASKS[mask] : mask;
+}
+
 // Back-compat: SdPatternType cũ → ValidationPatternType mới.
 // 3 key đã đổi tên trong @sdcorejs/utils v1.x.
 const LEGACY_PATTERN_ALIAS = {
@@ -106,16 +250,20 @@ class SdInput {
     helperText = input();
     placeholder = input();
     type = input('text');
+    mask = input();
+    maskAdapter = computed(() => sdResolveInputMask(this.mask()));
+    effectiveType = computed(() => (this.maskAdapter() ? 'text' : this.type()));
+    inputMode = computed(() => this.maskAdapter()?.inputMode);
+    maxDisplayLength = computed(() => this.maskAdapter()?.maxDisplayLength);
     hideInlineError = input(false, { transform: booleanAttribute });
     blurOnEnter = input(false, { transform: booleanAttribute });
+    /** Whether to show the value-gated clear button in edit and inline modes. */
+    clearable = input(false, { transform: booleanAttribute });
     required = input(false, { transform: booleanAttribute });
     readonly = input(false, { transform: booleanAttribute });
     disabled = input(false, { transform: booleanAttribute });
     /** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (no panel — the input IS the face). */
     viewed = input(false, { transform: sdViewedTransform });
-    // Tri-state `viewed` — shared primitive. Input has NO panel; in `'inline'` the input is rendered
-    // borderless/transparent (looks like text), always editable — clicking/focusing it edits directly.
-    #viewedState = sdViewedInline(this.viewed, () => this.#focusActiveInput(), this.disabled);
     /** Focus whichever input is live: the inline primitive in `'inline'` mode, else the mat input. */
     #focusActiveInput = () => {
         const inline = this.inlineRef();
@@ -124,12 +272,6 @@ class SdInput {
         else
             this.control()?.nativeElement?.focus();
     };
-    /** `true` when `viewed === 'inline'`. */
-    isInline = this.#viewedState.isInline;
-    /** `true` when `viewed === true` (static view, no input). */
-    isViewed = this.#viewedState.isViewed;
-    /** Focus the inline input. No-op unless `viewed='inline'`. */
-    enterInlineEdit = () => this.#viewedState.enterInlineEdit();
     /** View display template: `sdViewDef` overrides the projected `#sdValue` for the static view (unified). */
     viewTemplate = computed(() => this.sdViewDef()?.templateRef ?? this.sdValueTemplate());
     minlength = input(undefined, { transform: v => (v == null ? undefined : Number(v)) });
@@ -173,6 +315,10 @@ class SdInput {
             return this.#i18n.t('core.form.input.required');
         if (errors['maxlength'])
             return this.#i18n.t('core.form.input.maxlength', { max: this.maxlength() ?? '' });
+        if (errors['maskIncomplete'])
+            return this.#i18n.t('core.form.input.mask-incomplete');
+        if (errors['maskInvalid'])
+            return this.#i18n.t('core.form.input.mask-invalid');
         if (errors['pattern'])
             return this.resolvedPatternErrorMsg() || this.#i18n.t('core.form.input.invalid-pattern');
         if (errors['customValidator'])
@@ -196,37 +342,105 @@ class SdInput {
     // "commit filter" (sẽ over-reload). `cleared` là intent rõ ràng cho action
     // X (clear button) — consumer như column-filter dùng để fire reload ngay.
     cleared = output();
-    // 🚨 GIỮ LẠI EVENT_EMITTER DUY NHẤT VÌ CẦN CHECK OBSERVERED
+    // why: focus handling reads EventEmitter.observed before emitting a forced blur event.
     sdFocusForceBlur = new EventEmitter();
     formControl = new SdFormControl();
+    /** Display-only control used by the input element while a mask is active. */
+    displayControl = new SdFormControl();
+    activeControl = computed(() => (this.maskAdapter() ? this.displayControl : this.formControl));
+    maskStatus = signal('empty');
+    displayValue = computed(() => {
+        const adapter = this.maskAdapter();
+        return adapter ? adapter.format(this.formControl.value == null ? '' : String(this.formControl.value)).display : this.formControl.value;
+    });
     #subscription = new Subscription();
+    #isComposing = false;
+    #pendingMaskResult;
     isFocused = false;
+    #validators = computed(() => {
+        const validators = [];
+        const min = this.minlength();
+        const max = this.maxlength();
+        const pattern = this.resolvedPattern();
+        if (min && min > 0)
+            validators.push(Validators.minLength(min));
+        if (max && max > 0)
+            validators.push(Validators.maxLength(max));
+        if (pattern)
+            validators.push(Validators.pattern(pattern));
+        if (this.maskAdapter()) {
+            const maskStatus = this.maskStatus();
+            validators.push(() => {
+                if (maskStatus === 'invalid')
+                    return { maskInvalid: true };
+                if (maskStatus === 'incomplete')
+                    return { maskIncomplete: true };
+                return null;
+            });
+        }
+        if (this.inlineError())
+            validators.push(SdInlineErrorValidator);
+        return validators;
+    });
+    #asyncValidators = computed(() => {
+        const validator = this.validator();
+        return validator ? [HandleSdCustomValidator(validator)] : [];
+    });
+    #formConnector = _sdFormControlConnector({
+        form: this.form,
+        name: this.name,
+        control: computed(() => this.formControl),
+        validators: this.#validators,
+        asyncValidators: this.#asyncValidators,
+        required: this.required,
+        disabled: this.disabled,
+        readonly: this.readonly,
+        viewed: this.viewed,
+        validationError: computed(() => this.errorMessage()),
+    });
+    /** Shared reactive form policy consumed by template-facing state below. */
+    connectorState = this.#formConnector.state;
+    isReadonly = computed(() => this.connectorState().readonly);
+    visibleErrorMessage = computed(() => this.connectorState().validationError);
+    // Tri-state `viewed` — shared primitive. Input has NO panel; in `'inline'` the input is rendered
+    // borderless/transparent (looks like text), always editable — clicking/focusing it edits directly.
+    #viewedState = sdViewedInline(computed(() => this.connectorState().viewed), () => this.#focusActiveInput(), this.disabled);
+    /** `true` when `viewed === 'inline'`. */
+    isInline = this.#viewedState.isInline;
+    /** `true` when `viewed === true` (static view, no input). */
+    isViewed = this.#viewedState.isViewed;
+    /** Focus the inline input. No-op unless `viewed='inline'`. */
+    enterInlineEdit = () => this.#viewedState.enterInlineEdit();
     constructor() {
         effect(() => {
             const val = this.valueModel();
+            const adapter = this.maskAdapter();
             untracked(() => {
                 if (this.formControl.value !== val) {
                     this.formControl.setValue(val, { emitEvent: false });
                 }
+                if (adapter) {
+                    const rawValue = val == null ? '' : String(val);
+                    const result = this.#pendingMaskResult?.raw === rawValue ? this.#pendingMaskResult : adapter.format(rawValue);
+                    this.#pendingMaskResult = undefined;
+                    this.maskStatus.set(result.status);
+                    if (this.displayControl.value !== result.display) {
+                        this.displayControl.setValue(result.display, { emitEvent: false });
+                    }
+                }
+                else {
+                    this.maskStatus.set('empty');
+                }
             });
         });
         effect(() => {
-            if (this.disabled()) {
-                this.formControl.disable({ emitEvent: false });
-            }
-            else {
-                this.formControl.enable({ emitEvent: false });
-            }
-        });
-        effect(() => {
-            const req = this.required();
-            const min = this.minlength();
-            const max = this.maxlength();
-            const pat = this.resolvedPattern();
-            const inl = this.inlineError();
-            const val = this.validator();
+            const masked = !!this.maskAdapter();
+            const disabled = this.disabled();
             untracked(() => {
-                this.#updateValidator(req, min, max, pat, inl, val);
+                if (masked && disabled)
+                    this.displayControl.disable({ emitEvent: false });
+                else
+                    this.displayControl.enable({ emitEvent: false });
             });
         });
     }
@@ -237,37 +451,15 @@ class SdInput {
     }
     ngAfterViewInit() {
         this.#subscription.add(this.formControl.valueChanges.subscribe(this.#onChange));
-        const formGroup = this.form();
-        formGroup?.addControl(this.name(), this.formControl);
+        this.#subscription.add(this.displayControl.valueChanges.subscribe(value => this.#onMaskedDisplayChange(value)));
         this.#ref.detectChanges();
     }
     ngOnDestroy() {
-        const formGroup = this.form();
-        formGroup?.removeControl(this.name());
         this.#subscription.unsubscribe();
     }
     reValidate = () => {
         this.formControl.updateValueAndValidity();
     };
-    #updateValidator = (req, min, max, pat, inl, val) => {
-        const validators = [];
-        const asyncValidators = [];
-        if (req)
-            validators.push(Validators.required);
-        if (min && min > 0)
-            validators.push(Validators.minLength(min));
-        if (max && max > 0)
-            validators.push(Validators.maxLength(max));
-        if (pat)
-            validators.push(Validators.pattern(pat));
-        if (inl)
-            validators.push(SdInlineErrorValidator);
-        if (val)
-            asyncValidators.push(HandleSdCustomValidator(val));
-        this.formControl.setValidators(validators.length ? validators : null);
-        this.formControl.setAsyncValidators(asyncValidators.length ? asyncValidators : null);
-        this.formControl.updateValueAndValidity({ emitEvent: false });
-    };
     getCurrentLength = () => {
         return (this.formControl.value ?? '').toString().length;
     };
@@ -280,12 +472,55 @@ class SdInput {
         this.valueModel.set(value);
         this.sdChange.emit(value);
     };
+    #onMaskedDisplayChange(value) {
+        const adapter = this.maskAdapter();
+        if (!adapter || this.#isComposing)
+            return;
+        const nativeInput = this.control()?.nativeElement;
+        const display = value == null ? '' : String(value);
+        const result = adapter.parse(display, nativeInput?.selectionStart, nativeInput?.selectionEnd);
+        this.#applyMaskResult(result);
+    }
+    #applyMaskResult(result) {
+        this.maskStatus.set(result.status);
+        if (this.displayControl.value !== result.display) {
+            this.displayControl.setValue(result.display, { emitEvent: false });
+        }
+        if (this.formControl.value !== result.raw) {
+            this.#pendingMaskResult = this.valueModel() === result.raw ? undefined : result;
+            this.formControl.setValue(result.raw);
+        }
+        else {
+            this.#pendingMaskResult = undefined;
+            this.formControl.updateValueAndValidity({ emitEvent: false });
+        }
+        queueMicrotask(() => {
+            const nativeInput = this.control()?.nativeElement;
+            if (nativeInput) {
+                nativeInput.setSelectionRange(result.selectionStart, result.selectionEnd);
+            }
+        });
+    }
+    onCompositionStart() {
+        if (this.maskAdapter())
+            this.#isComposing = true;
+    }
+    onCompositionEnd(event) {
+        const adapter = this.maskAdapter();
+        if (!adapter)
+            return;
+        this.#isComposing = false;
+        const target = event.target;
+        const display = target?.value ?? String(this.displayControl.value ?? '');
+        this.#applyMaskResult(adapter.parse(display, target?.selectionStart, target?.selectionEnd));
+    }
     // why: dựa trên valueModel() (signal model-input) thay vì formControl.value —
     // khi bị wrap (vd <sd-input-color>) effect set formControl chạy SAU lúc template
     // eval nên formControl.value chưa kịp có; valueModel() thì có ngay. Method (không
-    // computed) để re-eval mỗi CD. Required không được clear; disabled/readonly ẩn nút.
+    // computed) để re-eval mỗi CD. clearable là opt-in; required không được clear;
+    // disabled/readonly ẩn nút.
     showClear = () => {
-        if (this.required() || this.disabled() || this.readonly())
+        if (!this.clearable() || this.required() || this.disabled() || this.readonly())
             return false;
         return !sdIsEmpty(this.valueModel());
     };
@@ -296,13 +531,15 @@ class SdInput {
         // why: clear là thao tác chủ động → model về null (không phải '' hay undefined).
         // undefined chỉ dành cho trạng thái pristine chưa từng nhập.
         this.formControl.setValue(null, { emitEvent: false });
+        this.displayControl.setValue('', { emitEvent: false });
+        this.maskStatus.set('empty');
         this.valueModel.set(null);
         this.sdChange.emit(null);
         this.cleared.emit();
     };
     onKeyupEnter = () => {
         const val = (this.formControl.value ?? '').toString();
-        if (val.length > val.trim().length) {
+        if (!this.maskAdapter() && val.length > val.trim().length) {
             this.formControl.setValue(val.trim());
         }
         this.keyupEnter.emit(this.formControl.value);
@@ -321,7 +558,7 @@ class SdInput {
     onBlur = () => {
         this.isFocused = false;
         const val = (this.formControl.value ?? '').toString();
-        if (val.length > val.trim().length) {
+        if (!this.maskAdapter() && val.length > val.trim().length) {
             this.formControl.setValue(val.trim());
         }
         this.sdBlur.emit(this.formControl.value);
@@ -349,11 +586,12 @@ class SdInput {
         }, 100);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdInput, isStandalone: true, selector: "sd-input", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, blurOnEnter: { classPropertyName: "blurOnEnter", publicName: "blurOnEnter", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, patternErrorMessage: { classPropertyName: "patternErrorMessage", publicName: "patternErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdFocus: "sdFocus", sdBlur: "sdBlur", keyupEnter: "keyupEnter", cleared: "cleared", sdFocusForceBlur: "sdFocusForceBlur" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed() || isInline()" } }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "inlineRef", first: true, predicate: SdInlineText, descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _helperText = helperText();\n@let _maxLength = maxlength();\n@let _errorMessage = errorMessage();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"formControl\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"!_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (cleared)=\"cleared.emit()\">\n  </sd-inline-text>\n} @else {\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-input-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-input-field-wrap\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"formControl\"\n          [type]=\"type()\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          (keyup.enter)=\"onKeyupEnter()\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [required]=\"_required\"\n          [readonly]=\"readonly()\"\n          [autocomplete]=\"id\"\n          autocorrect=\"off\"\n          [step]=\"1\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-minlength]=\"dataMinLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\" />\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        <!-- why: n\u00FAt clear render TR\u01AF\u1EDAC error icon. Clear hover-gated (visibility:hidden) v\u1EABn\n               chi\u1EBFm ch\u1ED7 trong layout \u2192 n\u1EBFu \u0111\u1EE9ng sau s\u1EBD \u0111\u1EA9y error icon \"t\u1EE5t v\u00E0o trong\". \u0110\u1EE9ng tr\u01B0\u1EDBc\n               th\u00EC error icon n\u1EB1m s\u00E1t m\u00E9p ph\u1EA3i, clear gi\u1EEF slot v\u00F4 h\u00ECnh b\u00EAn tr\u00E1i. -->\n        @if (showClear()) {\n          <button type=\"button\" class=\"sd-clear-btn sd-hover\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.input.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-input-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-input-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-input-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-input-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}.sd-md:hover .btn-copy{visibility:visible}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "component", type: SdInlineText, selector: "sd-inline-text", inputs: ["value", "control", "placeholder", "disabled", "clearable", "state", "chrome", "autoId", "autofocus", "minSize"], outputs: ["valueChange", "cleared", "keyupEnter", "keydownEscape", "sdFocus", "sdBlur", "sdKeydown", "sdPaste", "sdCompositionStart", "sdCompositionEnd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdInput, isStandalone: true, selector: "sd-input", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, hideInlineError: { classPropertyName: "hideInlineError", publicName: "hideInlineError", isSignal: true, isRequired: false, transformFunction: null }, blurOnEnter: { classPropertyName: "blurOnEnter", publicName: "blurOnEnter", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, patternErrorMessage: { classPropertyName: "patternErrorMessage", publicName: "patternErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdFocus: "sdFocus", sdBlur: "sdBlur", keyupEnter: "keyupEnter", cleared: "cleared", sdFocusForceBlur: "sdFocusForceBlur" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed() || isInline()" } }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "inlineRef", first: true, predicate: SdInlineText, descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _helperText = helperText();\n@let _maxLength = maxlength();\n@let _errorMessage = visibleErrorMessage();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"displayValue()\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"activeControl()\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"clearable() && !_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"connectorState().invalid ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (cleared)=\"cleared.emit()\">\n  </sd-inline-text>\n} @else {\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-input-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-input-field-wrap\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"activeControl()\"\n          [type]=\"effectiveType()\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          (keyup.enter)=\"onKeyupEnter()\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [required]=\"_required\"\n          [readonly]=\"isReadonly()\"\n          [autocomplete]=\"id\"\n          autocorrect=\"off\"\n          [step]=\"1\"\n          [attr.inputmode]=\"inputMode()\"\n          [attr.maxlength]=\"maxDisplayLength()\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-minlength]=\"dataMinLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          (compositionstart)=\"onCompositionStart()\"\n          (compositionend)=\"onCompositionEnd($event)\" />\n\n        @if (!_hideInlineError && _errorMessage) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        <!-- why: n\u00FAt clear render TR\u01AF\u1EDAC error icon. Clear hover-gated (visibility:hidden) v\u1EABn\n               chi\u1EBFm ch\u1ED7 trong layout \u2192 n\u1EBFu \u0111\u1EE9ng sau s\u1EBD \u0111\u1EA9y error icon \"t\u1EE5t v\u00E0o trong\". \u0110\u1EE9ng tr\u01B0\u1EDBc\n               th\u00EC error icon n\u1EB1m s\u00E1t m\u00E9p ph\u1EA3i, clear gi\u1EEF slot v\u00F4 h\u00ECnh b\u00EAn tr\u00E1i. -->\n        @if (showClear()) {\n          <button type=\"button\" class=\"sd-clear-btn sd-hover\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.input.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-input-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-input-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-input-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-input-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}.sd-md:hover .btn-copy{visibility:visible}\n"], dependencies: [{ kind: "component", type: SdIcon, selector: "sd-icon", inputs: ["name", "fontIcon", "color", "set", "fontSet", "size", "strokeWidth", "absoluteStrokeWidth", "ariaLabel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: SdLabel, selector: "sd-label", inputs: ["label", "description", "required", "helperText"] }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }, { kind: "component", type: SdInlineText, selector: "sd-inline-text", inputs: ["value", "control", "placeholder", "disabled", "clearable", "state", "chrome", "autoId", "autofocus", "minSize"], outputs: ["valueChange", "cleared", "keyupEnter", "keydownEscape", "sdFocus", "sdBlur", "sdKeydown", "sdPaste", "sdCompositionStart", "sdCompositionEnd"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInput, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [SdIcon,
+            args: [{ selector: 'sd-input', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [
+                        SdIcon,
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -365,7 +603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdView,
                         SdInlineText,
                         TranslatePipe,
-                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _helperText = helperText();\n@let _maxLength = maxlength();\n@let _errorMessage = errorMessage();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"formControl\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"!_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (cleared)=\"cleared.emit()\">\n  </sd-inline-text>\n} @else {\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-input-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-input-field-wrap\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"formControl\"\n          [type]=\"type()\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          (keyup.enter)=\"onKeyupEnter()\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [required]=\"_required\"\n          [readonly]=\"readonly()\"\n          [autocomplete]=\"id\"\n          autocorrect=\"off\"\n          [step]=\"1\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-minlength]=\"dataMinLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\" />\n\n        @if (!_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        <!-- why: n\u00FAt clear render TR\u01AF\u1EDAC error icon. Clear hover-gated (visibility:hidden) v\u1EABn\n               chi\u1EBFm ch\u1ED7 trong layout \u2192 n\u1EBFu \u0111\u1EE9ng sau s\u1EBD \u0111\u1EA9y error icon \"t\u1EE5t v\u00E0o trong\". \u0110\u1EE9ng tr\u01B0\u1EDBc\n               th\u00EC error icon n\u1EB1m s\u00E1t m\u00E9p ph\u1EA3i, clear gi\u1EEF slot v\u00F4 h\u00ECnh b\u00EAn tr\u00E1i. -->\n        @if (showClear()) {\n          <button type=\"button\" class=\"sd-clear-btn sd-hover\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.input.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-input-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-input-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-input-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-input-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}.sd-md:hover .btn-copy{visibility:visible}\n"] }]
+                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _helperText = helperText();\n@let _maxLength = maxlength();\n@let _errorMessage = visibleErrorMessage();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"_label\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"displayValue()\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"activeControl()\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"clearable() && !_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"connectorState().invalid ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (cleared)=\"cleared.emit()\">\n  </sd-inline-text>\n} @else {\n  @if (!_appearance) {\n    <ng-content select=\"[sdLabel]\">\n      @if (_label) {\n        <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n      }\n    </ng-content>\n  }\n\n  <div\n    class=\"d-flex align-items-center sd-input-container\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    <div class=\"sd-input-field-wrap\">\n      <mat-form-field\n        [class.sd-md]=\"size() === 'md'\"\n        [class.sd-sm]=\"size() === 'sm'\"\n        [class.hide-inline-error]=\"_hideInlineError\"\n        [appearance]=\"_appearance!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (_appearance && _label) {\n          <mat-label class=\"sd-form-field-label\">\n            <span>{{ _label }}</span>\n            @if (_helperText) {\n              <sd-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\" name=\"info\"></sd-icon>\n            }\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"activeControl()\"\n          [type]=\"effectiveType()\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || _label || ''\"\n          (keyup.enter)=\"onKeyupEnter()\"\n          (focus)=\"onFocus()\"\n          (blur)=\"onBlur()\"\n          [required]=\"_required\"\n          [readonly]=\"isReadonly()\"\n          [autocomplete]=\"id\"\n          autocorrect=\"off\"\n          [step]=\"1\"\n          [attr.inputmode]=\"inputMode()\"\n          [attr.maxlength]=\"maxDisplayLength()\"\n          [attr.data-autoId]=\"autoId()\"\n          [attr.data-disabled]=\"dataDisabled()\"\n          [attr.data-invalid]=\"dataInvalid()\"\n          [attr.data-empty]=\"dataEmpty()\"\n          [attr.data-value]=\"dataValue()\"\n          [attr.data-required]=\"dataRequired()\"\n          [attr.data-maxlength]=\"dataMaxLength()\"\n          [attr.data-minlength]=\"dataMinLength()\"\n          [attr.data-pattern]=\"dataPattern()\"\n          [attr.data-error-message]=\"dataErrorMessage()\"\n          (compositionstart)=\"onCompositionStart()\"\n          (compositionend)=\"onCompositionEnd($event)\" />\n\n        @if (!_hideInlineError && _errorMessage) {\n          <mat-error>{{ _errorMessage }}</mat-error>\n        }\n\n        <!-- why: n\u00FAt clear render TR\u01AF\u1EDAC error icon. Clear hover-gated (visibility:hidden) v\u1EABn\n               chi\u1EBFm ch\u1ED7 trong layout \u2192 n\u1EBFu \u0111\u1EE9ng sau s\u1EBD \u0111\u1EA9y error icon \"t\u1EE5t v\u00E0o trong\". \u0110\u1EE9ng tr\u01B0\u1EDBc\n               th\u00EC error icon n\u1EB1m s\u00E1t m\u00E9p ph\u1EA3i, clear gi\u1EEF slot v\u00F4 h\u00ECnh b\u00EAn tr\u00E1i. -->\n        @if (showClear()) {\n          <button type=\"button\" class=\"sd-clear-btn sd-hover\" matSuffix (click)=\"clear($event)\" title=\"X\u00F3a\" aria-label=\"X\u00F3a\">\n            <sd-icon name=\"close\"></sd-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage) {\n          <sd-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\" name=\"error\"></sd-icon>\n        }\n\n        @if (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container *ngTemplateOutlet=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n            <ng-content select=\"[sdSuffix]\"></ng-content>\n          </ng-container> -->\n      </mat-form-field>\n\n      @if (_maxLength && !_hideInlineError && !formControl.disabled) {\n        <div\n          class=\"sd-maxlength-counter\"\n          [class.sd-maxlength-counter--visible]=\"isFocused\"\n          [class.sd-maxlength-counter--exceeded]=\"isMaxlengthExceeded()\"\n          [attr.title]=\"isMaxlengthExceeded() ? ('core.form.input.exceeded' | translate) : null\">\n          {{ getCurrentLength() }}/{{ _maxLength }}\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-primary-contrast{color:var(--sd-primary-contrast)!important}.bg-primary-contrast{background:var(--sd-primary-contrast)!important}.border-primary-contrast{border-color:var(--sd-primary-contrast)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-secondary-contrast{color:var(--sd-secondary-contrast)!important}.bg-secondary-contrast{background:var(--sd-secondary-contrast)!important}.border-secondary-contrast{border-color:var(--sd-secondary-contrast)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-info-contrast{color:var(--sd-info-contrast)!important}.bg-info-contrast{background:var(--sd-info-contrast)!important}.border-info-contrast{border-color:var(--sd-info-contrast)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-success-contrast{color:var(--sd-success-contrast)!important}.bg-success-contrast{background:var(--sd-success-contrast)!important}.border-success-contrast{border-color:var(--sd-success-contrast)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-warning-contrast{color:var(--sd-warning-contrast)!important}.bg-warning-contrast{background:var(--sd-warning-contrast)!important}.border-warning-contrast{border-color:var(--sd-warning-contrast)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-error-contrast{color:var(--sd-error-contrast)!important}.bg-error-contrast{background:var(--sd-error-contrast)!important}.border-error-contrast{border-color:var(--sd-error-contrast)!important}.text-surface{color:var(--sd-surface)!important}.bg-surface{background:var(--sd-surface)!important}.border-surface{border-color:var(--sd-surface)!important}.text-surface-muted{color:var(--sd-surface-muted)!important}.bg-surface-muted{background:var(--sd-surface-muted)!important}.border-surface-muted{border-color:var(--sd-surface-muted)!important}.text-text{color:var(--sd-text)!important}.bg-text{background:var(--sd-text)!important}.border-text{border-color:var(--sd-text)!important}.text-text-secondary{color:var(--sd-text-secondary)!important}.bg-text-secondary{background:var(--sd-text-secondary)!important}.border-text-secondary{border-color:var(--sd-text-secondary)!important}.text-text-muted{color:var(--sd-text-muted)!important}.bg-text-muted{background:var(--sd-text-muted)!important}.border-text-muted{border-color:var(--sd-text-muted)!important}.text-border{color:var(--sd-border)!important}.bg-border{background:var(--sd-border)!important}.border-border{border-color:var(--sd-border)!important}.text-border-strong{color:var(--sd-border-strong)!important}.bg-border-strong{background:var(--sd-border-strong)!important}.border-border-strong{border-color:var(--sd-border-strong)!important}.text-disabled-bg{color:var(--sd-disabled-bg)!important}.bg-disabled-bg{background:var(--sd-disabled-bg)!important}.border-disabled-bg{border-color:var(--sd-disabled-bg)!important}.text-disabled-text{color:var(--sd-disabled-text)!important}.bg-disabled-text{background:var(--sd-disabled-text)!important}.border-disabled-text{border-color:var(--sd-disabled-text)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.text-secondary{color:var(--sd-text-secondary)!important}.text-muted{color:var(--sd-text-muted)!important}.text-body{color:var(--sd-text)!important}.bg-muted{background:var(--sd-surface-muted)!important}:host{display:block}:host(.sd-has-label){padding-top:4px}:host(.sd-viewed){padding-top:0}:host ::ng-deep .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mat-mdc-text-field-wrapper{background:var(--sd-disabled-bg)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-disabled-text)!important}:host ::ng-deep .mat-mdc-form-field .mat-mdc-placeholder-required{color:var(--sd-error)}.sd-input-field-wrap{position:relative;flex:1;min-width:0}.sd-maxlength-counter{position:absolute;right:4px;top:calc(100% - 16px);opacity:0;font-size:10px;line-height:1.1;color:#00000061;pointer-events:none;transition:opacity .12s ease;z-index:1}.sd-maxlength-counter--exceeded{color:var(--sd-error);font-weight:600}:host ::ng-deep .sd-input-container.c-focused .sd-maxlength-counter,:host ::ng-deep .sd-input-container:hover .sd-maxlength-counter,:host ::ng-deep .sd-input-container .sd-maxlength-counter.sd-maxlength-counter--visible{opacity:1}.sd-md:hover .btn-copy{visibility:visible}\n"] }]
         }], ctorParameters: () => [], propDecorators: { sdFocusForceBlur: [{
                 type: Output
             }] } });
@@ -374,5 +612,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { SdInput };
+export { SD_INPUT_MASKS, SdInput, sdCreateInputMask, sdResolveInputMask };
 //# sourceMappingURL=sdcorejs-angular-forms-input.mjs.map