@sdcorejs/angular 20.1.2 → 20.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-forms-input-color.mjs","sources":["../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.ts","../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.html","../../../projects/sdcorejs-angular/forms/input-color/sdcorejs-angular-forms-input-color.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, ElementRef, input, model, output, viewChild } from '@angular/core';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\nimport { SdInput } from '@sdcorejs/angular/forms/input';\nimport { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';\nimport { SdViewed, SdViewedInput, sdViewedTransform } from '@sdcorejs/angular/forms/models';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n  selector: 'sd-input-color',\n  standalone: true,\n  imports: [SdInput, SdSuffixDefDirective],\n  templateUrl: './input-color.component.html',\n  styleUrl: './input-color.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n  readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n  readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n  // ==========================================\n  // Inputs (forwarded to <sd-input>)\n  // ==========================================\n  readonly label = input<string | undefined>();\n  readonly helperText = input<string | undefined>();\n  readonly placeholder = input<string>('#RRGGBB');\n  readonly size = input<Size>('md');\n  readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n  // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n\n  readonly form = input<any>(undefined);\n  readonly name = input<string | undefined>();\n  readonly autoId = input<string | undefined>();\n\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly hideInlineError = input(false, { transform: booleanAttribute });\n  /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */\n  readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n  // Two-way model — same alias as <sd-input>\n  readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n  // ==========================================\n  // Outputs\n  // ==========================================\n  readonly sdChange = output<string | null | undefined>();\n\n  // ==========================================\n  // ViewChild\n  // ==========================================\n  readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n  // ==========================================\n  // Derived state\n  // ==========================================\n  // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n  // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n  // always opens on something.\n  readonly pickerSafeValue = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return '#000000';\n    if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n    if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n      const r = v[1];\n      const g = v[2];\n      const b = v[3];\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n    return '#000000';\n  });\n\n  // Swatch shows the raw model value when valid; otherwise transparent so the\n  // user gets visual feedback that the hex string is malformed.\n  readonly swatchColor = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return 'transparent';\n    return this.#hexRegex.test(v) ? v : 'transparent';\n  });\n\n  // ==========================================\n  // Handlers\n  // ==========================================\n  // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n  // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n  // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n  onInputChange = (v: unknown): void => {\n    const str = v == null || v === '' ? null : String(v);\n    this.valueModel.set(str);\n    this.sdChange.emit(str);\n  };\n\n  openPicker = (): void => {\n    if (this.disabled() || this.readonly() || this.viewed()) return;\n    this.picker()?.nativeElement.click();\n  };\n\n  onPickerChange = (ev: Event): void => {\n    const v = (ev.target as HTMLInputElement).value;\n    this.valueModel.set(v);\n    this.sdChange.emit(v);\n  };\n\n  // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n  // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n  clear = (ev?: Event): void => {\n    ev?.stopPropagation();\n    if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n    const v = this.valueModel();\n    if (v == null || v === '') return;\n    this.valueModel.set(null);\n    this.sdChange.emit(null);\n  };\n}\n","<sd-input\n  [label]=\"label()\"\n  [helperText]=\"helperText()\"\n  [placeholder]=\"placeholder()\"\n  [size]=\"size()\"\n  [appearance]=\"appearance() ?? undefined\"\n  [form]=\"form()\"\n  [name]=\"name() ?? ''\"\n  [autoId]=\"autoId()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [hideInlineError]=\"hideInlineError()\"\n  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"Mã màu HEX không hợp lệ (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: nút clear do <sd-input> tự render (built-in, hover-gated). Ở đây\n           chỉ chiếu swatch + native picker. onInputChange coerce '' → null nên\n           clear của sd-input vẫn cho ra model rỗng đúng nghĩa. -->\n      <button\n        type=\"button\"\n        class=\"sd-input-color__swatch\"\n        [style.background]=\"swatchColor()\"\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\n        [disabled]=\"disabled() || readonly() || viewed() === true\"\n        (click)=\"openPicker()\"\n        title=\"Mở bảng chọn màu\"\n        aria-label=\"Mở bảng chọn màu\"></button>\n      <input\n        #picker\n        type=\"color\"\n        class=\"sd-input-color__hidden-picker\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"pickerSafeValue()\"\n        (input)=\"onPickerChange($event)\" />\n    </div>\n  </ng-template>\n</sd-input>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sdcorejs-angular-forms-input-color.mjs","sources":["../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.ts","../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.html","../../../projects/sdcorejs-angular/forms/input-color/sdcorejs-angular-forms-input-color.ts"],"sourcesContent":["import { booleanAttribute, ChangeDetectionStrategy, Component, computed, ElementRef, input, model, output, viewChild } from '@angular/core';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\nimport { SdInput } from '@sdcorejs/angular/forms/input';\nimport { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';\nimport { SdViewed, SdViewedInput, sdViewedTransform } from '@sdcorejs/angular/forms/models';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n  selector: 'sd-input-color',\n  standalone: true,\n  imports: [SdInput, SdSuffixDefDirective],\n  templateUrl: './input-color.component.html',\n  styleUrl: './input-color.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n  readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n  readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n  // ==========================================\n  // Inputs (forwarded to <sd-input>)\n  // ==========================================\n  readonly label = input<string | undefined>();\n  readonly helperText = input<string | undefined>();\n  readonly placeholder = input<string>('#RRGGBB');\n  readonly size = input<Size>('md');\n  readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n  // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n\n  readonly form = input<any>(undefined);\n  readonly name = input<string | undefined>();\n  readonly autoId = input<string | undefined>();\n\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  /** Whether the inner `<sd-input>` should render its clear button. */\n  readonly clearable = input(false, { transform: booleanAttribute });\n  readonly hideInlineError = input(false, { transform: booleanAttribute });\n  /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */\n  readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n  // Two-way model — same alias as <sd-input>\n  readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n  // ==========================================\n  // Outputs\n  // ==========================================\n  readonly sdChange = output<string | null | undefined>();\n\n  // ==========================================\n  // ViewChild\n  // ==========================================\n  readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n  // ==========================================\n  // Derived state\n  // ==========================================\n  // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n  // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n  // always opens on something.\n  readonly pickerSafeValue = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return '#000000';\n    if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n    if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n      const r = v[1];\n      const g = v[2];\n      const b = v[3];\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n    return '#000000';\n  });\n\n  // Swatch shows the raw model value when valid; otherwise transparent so the\n  // user gets visual feedback that the hex string is malformed.\n  readonly swatchColor = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return 'transparent';\n    return this.#hexRegex.test(v) ? v : 'transparent';\n  });\n\n  // ==========================================\n  // Handlers\n  // ==========================================\n  // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n  // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n  // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n  onInputChange = (v: unknown): void => {\n    const str = v == null || v === '' ? null : String(v);\n    this.valueModel.set(str);\n    this.sdChange.emit(str);\n  };\n\n  openPicker = (): void => {\n    if (this.disabled() || this.readonly() || this.viewed()) return;\n    this.picker()?.nativeElement.click();\n  };\n\n  onPickerChange = (ev: Event): void => {\n    const v = (ev.target as HTMLInputElement).value;\n    this.valueModel.set(v);\n    this.sdChange.emit(v);\n  };\n\n  // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n  // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n  clear = (ev?: Event): void => {\n    ev?.stopPropagation();\n    if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n    const v = this.valueModel();\n    if (v == null || v === '') return;\n    this.valueModel.set(null);\n    this.sdChange.emit(null);\n  };\n}\n","<sd-input\n  [label]=\"label()\"\n  [helperText]=\"helperText()\"\n  [placeholder]=\"placeholder()\"\n  [size]=\"size()\"\n  [appearance]=\"appearance() ?? undefined\"\n  [form]=\"form()\"\n  [name]=\"name() ?? ''\"\n  [autoId]=\"autoId()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [clearable]=\"clearable()\"\n  [hideInlineError]=\"hideInlineError()\"\n  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"Mã màu HEX không hợp lệ (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: nút clear do <sd-input> tự render (built-in, hover-gated). Ở đây\n           chỉ chiếu swatch + native picker. onInputChange coerce '' → null nên\n           clear của sd-input vẫn cho ra model rỗng đúng nghĩa. -->\n      <button\n        type=\"button\"\n        class=\"sd-input-color__swatch\"\n        [style.background]=\"swatchColor()\"\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\n        [disabled]=\"disabled() || readonly() || viewed() === true\"\n        (click)=\"openPicker()\"\n        title=\"Mở bảng chọn màu\"\n        aria-label=\"Mở bảng chọn màu\"></button>\n      <input\n        #picker\n        type=\"color\"\n        class=\"sd-input-color__hidden-picker\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        [value]=\"pickerSafeValue()\"\n        (input)=\"onPickerChange($event)\" />\n    </div>\n  </ng-template>\n</sd-input>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -18,7 +18,7 @@ import { SD_CORE_CONFIGURATION } from '@sdcorejs/angular/configurations';
 import { SdViewDefDirective, SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';
 import { SdLabel } from '@sdcorejs/angular/forms/label';
 import { I18nService } from '@sdcorejs/angular/i18n';
-import { SD_FORM_CONFIGURATION, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, HandleSdCustomValidator, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
+import { SD_FORM_CONFIGURATION, sdFormControlState, sdViewedTransform, sdViewedInline, SdFormControl, ɵsdFormControlConnector as _sdFormControlConnector, HandleSdCustomValidator, SdInlineErrorValidator } from '@sdcorejs/angular/forms/models';
 import { sdIsEmpty, sdSerializeDataValue } from '@sdcorejs/angular/utilities/data-state';
 import { SdFormatNumberPipe } from '@sdcorejs/angular/pipes';
 import { NumberUtilities } from '@sdcorejs/angular/utilities/extensions';
@@ -107,6 +107,8 @@ class SdInputNumber {
     placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
     hideInlineError = input(false, ...(ngDevMode ? [{ debugName: "hideInlineError", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     blurOnEnter = input(false, ...(ngDevMode ? [{ debugName: "blurOnEnter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    /** Whether to show the value-gated clear button in edit and inline modes. */
+    clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
@@ -172,12 +174,18 @@ class SdInputNumber {
     // why: same lý do như sd-input — sdChange fire per-keystroke. `cleared` là
     // intent dedicated cho X (clear button), consumer dùng để trigger reload ngay.
     cleared = output();
+    // why: focus handling reads EventEmitter.observed before emitting a forced blur event.
     sdFocusForceBlur = new EventEmitter();
     // ==========================================
     // 5. INTERNAL STATE & COMPUTED
     // ==========================================
     formControl = new SdFormControl();
     inputControl = new SdFormControl();
+    #formConnector = _sdFormControlConnector({
+        form: this.form,
+        name: this.name,
+        control: computed(() => this.formControl),
+    });
     #subscription = new Subscription();
     matcher = new SdInputNumberErrotStateMatcher(this.formControl);
     #preCompositionValue;
@@ -270,13 +278,9 @@ class SdInputNumber {
                 this.#onChange(value);
             }
         }));
-        const formGroup = this.form();
-        formGroup?.addControl(this.name(), this.formControl);
         this.ref.detectChanges();
     }
     ngOnDestroy() {
-        const formGroup = this.form();
-        formGroup?.removeControl(this.name());
         this.#subscription.unsubscribe();
     }
     #getValueWithFormat = (value) => {
@@ -332,9 +336,9 @@ class SdInputNumber {
         this.formControl.setValue(value ?? null);
     };
     // why: method (không phải computed) để template re-eval mỗi change-detection.
-    // Required không được clear; disabled/readonly ẩn nút.
+    // 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());
     };
@@ -452,11 +456,12 @@ class SdInputNumber {
         }, 100);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdInputNumber, isStandalone: true, selector: "sd-input-number", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", 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: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, 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 _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\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 | sdFormatNumber: undefined : _format\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\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    (sdKeydown)=\"onKeydown($event)\"\n    (sdPaste)=\"onPaste($event)\"\n    (sdCompositionStart)=\"onCompositionStart($event)\"\n    (sdCompositionEnd)=\"onCompositionEnd($event)\"\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\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\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]=\"inputControl\"\n        #control\n        matInput\n        [placeholder]=\"placeholder() || _label || ''\"\n        [errorStateMatcher]=\"matcher\"\n        (keyup.enter)=\"onKeyupEnter()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        (compositionstart)=\"onCompositionStart($event)\"\n        (compositionend)=\"onCompositionEnd($event)\"\n        [required]=\"_required\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"id\"\n        (paste)=\"onPaste($event)\"\n        autocorrect=\"off\"\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-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 -> 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  </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-md:hover .btn-copy{visibility:visible}.btn-copy{visibility:hidden;background:#e9e9e9!important;line-height:26px!important;margin-bottom:3px;font-size:12px}\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: SdFormatNumberPipe, name: "sdFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SdInputNumber, isStandalone: true, selector: "sd-input-number", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", 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 }, 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 }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", 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 }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", 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: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, 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 _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\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 | sdFormatNumber: undefined : _format\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"clearable() && !_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (sdKeydown)=\"onKeydown($event)\"\n    (sdPaste)=\"onPaste($event)\"\n    (sdCompositionStart)=\"onCompositionStart($event)\"\n    (sdCompositionEnd)=\"onCompositionEnd($event)\"\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\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\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]=\"inputControl\"\n        #control\n        matInput\n        [placeholder]=\"placeholder() || _label || ''\"\n        [errorStateMatcher]=\"matcher\"\n        (keyup.enter)=\"onKeyupEnter()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        (compositionstart)=\"onCompositionStart($event)\"\n        (compositionend)=\"onCompositionEnd($event)\"\n        [required]=\"_required\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"id\"\n        (paste)=\"onPaste($event)\"\n        autocorrect=\"off\"\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-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 -> 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  </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-md:hover .btn-copy{visibility:visible}.btn-copy{visibility:hidden;background:#e9e9e9!important;line-height:26px!important;margin-bottom:3px;font-size:12px}\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: SdFormatNumberPipe, name: "sdFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SdInputNumber, decorators: [{
             type: Component,
-            args: [{ selector: 'sd-input-number', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [SdIcon,
+            args: [{ selector: 'sd-input-number', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: { '[class.sd-has-label]': '!!label()', '[class.sd-viewed]': 'isViewed() || isInline()' }, imports: [
+                        SdIcon,
                         CommonModule,
                         FormsModule,
                         ReactiveFormsModule,
@@ -468,8 +473,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                         SdFormatNumberPipe,
                         SdView,
                         SdInlineText,
-                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\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 | sdFormatNumber: undefined : _format\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\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    (sdKeydown)=\"onKeydown($event)\"\n    (sdPaste)=\"onPaste($event)\"\n    (sdCompositionStart)=\"onCompositionStart($event)\"\n    (sdCompositionEnd)=\"onCompositionEnd($event)\"\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\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\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]=\"inputControl\"\n        #control\n        matInput\n        [placeholder]=\"placeholder() || _label || ''\"\n        [errorStateMatcher]=\"matcher\"\n        (keyup.enter)=\"onKeyupEnter()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        (compositionstart)=\"onCompositionStart($event)\"\n        (compositionend)=\"onCompositionEnd($event)\"\n        [required]=\"_required\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"id\"\n        (paste)=\"onPaste($event)\"\n        autocorrect=\"off\"\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-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 -> 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  </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-md:hover .btn-copy{visibility:visible}.btn-copy{visibility:hidden;background:#e9e9e9!important;line-height:26px!important;margin-bottom:3px;font-size:12px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], inlineRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdInlineText), { isSignal: true }] }], sdLabelTemplate: [{ type: i0.ContentChild, args: ['sdLabel', { isSignal: true }] }], sdValueTemplate: [{ type: i0.ContentChild, args: ['sdValue', { isSignal: true }] }], sdViewDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdViewDefDirective), { isSignal: true }] }], sdSuffixDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdSuffixDefDirective), { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], blurOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurOnEnter", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], inlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineError", required: false }] }], hyperlink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyperlink", required: false }] }], appearanceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], sdFocus: [{ type: i0.Output, args: ["sdFocus"] }], sdBlur: [{ type: i0.Output, args: ["sdBlur"] }], keyupEnter: [{ type: i0.Output, args: ["keyupEnter"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], sdFocusForceBlur: [{
+                    ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\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 | sdFormatNumber: undefined : _format\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\n    [placeholder]=\"placeholder() || _label || ''\"\n    [clearable]=\"clearable() && !_required\"\n    [autoId]=\"autoId()\"\n    [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n    (sdFocus)=\"onFocus()\"\n    (sdBlur)=\"onBlur()\"\n    (keyupEnter)=\"onKeyupEnter()\"\n    (sdKeydown)=\"onKeydown($event)\"\n    (sdPaste)=\"onPaste($event)\"\n    (sdCompositionStart)=\"onCompositionStart($event)\"\n    (sdCompositionEnd)=\"onCompositionEnd($event)\"\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\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\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]=\"inputControl\"\n        #control\n        matInput\n        [placeholder]=\"placeholder() || _label || ''\"\n        [errorStateMatcher]=\"matcher\"\n        (keyup.enter)=\"onKeyupEnter()\"\n        (focus)=\"onFocus()\"\n        (blur)=\"onBlur()\"\n        (keydown)=\"onKeydown($event)\"\n        (compositionstart)=\"onCompositionStart($event)\"\n        (compositionend)=\"onCompositionEnd($event)\"\n        [required]=\"_required\"\n        [readonly]=\"readonly()\"\n        [autocomplete]=\"id\"\n        (paste)=\"onPaste($event)\"\n        autocorrect=\"off\"\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-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 -> 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  </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-md:hover .btn-copy{visibility:visible}.btn-copy{visibility:hidden;background:#e9e9e9!important;line-height:26px!important;margin-bottom:3px;font-size:12px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { isSignal: true }] }], inlineRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SdInlineText), { isSignal: true }] }], sdLabelTemplate: [{ type: i0.ContentChild, args: ['sdLabel', { isSignal: true }] }], sdValueTemplate: [{ type: i0.ContentChild, args: ['sdValue', { isSignal: true }] }], sdViewDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdViewDefDirective), { isSignal: true }] }], sdSuffixDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => SdSuffixDefDirective), { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hideInlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideInlineError", required: false }] }], blurOnEnter: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurOnEnter", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], precision: [{ type: i0.Input, args: [{ isSignal: true, alias: "precision", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], validator: [{ type: i0.Input, args: [{ isSignal: true, alias: "validator", required: false }] }], inlineError: [{ type: i0.Input, args: [{ isSignal: true, alias: "inlineError", required: false }] }], hyperlink: [{ type: i0.Input, args: [{ isSignal: true, alias: "hyperlink", required: false }] }], appearanceInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], floatLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "floatLabel", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], sdFocus: [{ type: i0.Output, args: ["sdFocus"] }], sdBlur: [{ type: i0.Output, args: ["sdBlur"] }], keyupEnter: [{ type: i0.Output, args: ["keyupEnter"] }], cleared: [{ type: i0.Output, args: ["cleared"] }], sdFocusForceBlur: [{
                 type: Output
             }] } });