@sdcorejs/angular 21.0.6 → 21.0.8

package/fesm2022/sdcorejs-angular-forms-inline-text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-forms-inline-text.mjs","sources":["../../../projects/sdcorejs-angular/forms/inline-text/src/inline-text.component.ts","../../../projects/sdcorejs-angular/forms/inline-text/src/inline-text.component.html","../../../projects/sdcorejs-angular/forms/inline-text/sdcorejs-angular-forms-inline-text.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdFormControl } from '@sdcorejs/angular/forms/models';\n\n/** Visual / `data-state` of the inline input. `'auto'` derives from focus + value. */\nexport type SdInlineTextState = 'auto' | 'pending' | 'active' | 'focus' | 'error';\n/** `'standalone'` draws its own affordance (hover bg + focus ring); `'seamless'` defers all chrome to the host. */\nexport type SdInlineTextChrome = 'standalone' | 'seamless';\n\n/**\n * Borderless, content-hugging text input — the seamless primitive shared by\n * `sd-input` / `sd-input-number` (`viewed='inline'`) and the query-bar / query-builder chips.\n *\n * why: a native `<input>` inside `mat-form-field` cannot hug its content, so inline-edit\n * looked like a full-width input rather than text. This primitive renders a raw `<input>`\n * sized via the native `size` attribute (clamped) so the click/hover target tracks the value.\n *\n * It is intentionally unopinionated about commit/parse/format: it forwards the raw DOM events\n * (focus / blur / keydown / paste / composition / Enter / Escape) so each consumer keeps its own\n * logic (e.g. sd-input-number's vi-VN formatting). Two binding modes:\n *  - **uncontrolled** via `[(value)]` — used by the chips' signal drafts;\n *  - **controlled** via `[control]` (an external `SdFormControl`) — used by the form controls.\n */\n@Component({\n  selector: 'sd-inline-text',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, ReactiveFormsModule, MatIconModule],\n  templateUrl: './inline-text.component.html',\n  styleUrl: './inline-text.component.scss',\n  host: {\n    class: 'sd-inline-text',\n    '[class.sd-inline-text--standalone]': \"chrome() === 'standalone'\",\n    '[class.sd-inline-text--seamless]': \"chrome() === 'seamless'\",\n    '[attr.data-state]': 'effectiveState()',\n  },\n})\nexport class SdInlineText {\n  /** Uncontrolled value (two-way). Ignored when `[control]` is provided. */\n  readonly value = model<string>('');\n  /** Optional external FormControl (controlled mode) — used by sd-input / sd-input-number. */\n  readonly control = input<SdFormControl | undefined>(undefined);\n  readonly placeholder = input<string>('');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Show a hover/value-gated clear-× (default `true`). */\n  readonly clearable = input(true, { transform: booleanAttribute });\n  /** `'auto'` derives state from focus + value; pass an explicit value (e.g. `'error'`) to override. */\n  readonly state = input<SdInlineTextState>('auto');\n  readonly chrome = input<SdInlineTextChrome>('standalone');\n  readonly autoId = input<string | undefined>(undefined);\n  readonly autofocus = input(false, { transform: booleanAttribute });\n  /** Lower bound (chars) so short/empty values keep a clickable target. */\n  readonly minSize = input(2);\n\n  readonly cleared = output<void>();\n  readonly keyupEnter = output<void>();\n  readonly keydownEscape = output<void>();\n  readonly sdFocus = output<FocusEvent>();\n  readonly sdBlur = output<FocusEvent>();\n  readonly sdKeydown = output<KeyboardEvent>();\n  readonly sdPaste = output<ClipboardEvent>();\n  readonly sdCompositionStart = output<CompositionEvent>();\n  readonly sdCompositionEnd = output<CompositionEvent>();\n\n  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n  /** Bumped on input/blur/composition + bound-control changes so size/state methods re-eval under OnPush. */\n  protected readonly tick = signal(0);\n  protected readonly focused = signal(false);\n\n  constructor() {\n    // why: a bound control's value can change programmatically (sd-input-number reformats\n    // on blur) without a DOM input event — subscribe so the size/state still refresh.\n    effect(onCleanup => {\n      const c = this.control();\n      if (!c) return;\n      const sub = c.valueChanges.subscribe(() => this.tick.update(n => n + 1));\n      onCleanup(() => sub.unsubscribe());\n    });\n\n    afterNextRender(() => {\n      if (this.autofocus()) this.focus();\n    });\n  }\n\n  /**\n   * Current text — from the bound control in controlled mode, else the value model.\n   * why: `tick` is a tracked dependency so the computed re-runs when a bound control's\n   * value changes programmatically (control.value itself is not a signal).\n   */\n  protected readonly currentText = computed<string>(() => {\n    this.tick();\n    const c = this.control();\n    const raw = c ? c.value : this.value();\n    return raw == null ? '' : String(raw);\n  });\n\n  protected readonly hasValue = computed(() => this.currentText().length > 0);\n\n  protected readonly sizeOf = computed(() => {\n    const text = this.currentText();\n    const base = text.length > 0 ? text.length : this.placeholder().length;\n    return Math.max(this.minSize(), base);\n  });\n\n  protected readonly showClear = computed(() => this.clearable() && this.hasValue() && !this.disabled());\n\n  protected readonly effectiveState = computed<SdInlineTextState>(() => {\n    const s = this.state();\n    if (s !== 'auto') return s;\n    if (this.focused()) return 'focus';\n    return this.hasValue() ? 'active' : 'pending';\n  });\n\n  // ── event handlers ─────────────────────────────────────────────────────────\n  protected onInput(ev: Event): void {\n    const el = ev.target as HTMLInputElement;\n    // why: only the uncontrolled mode owns the value model; in controlled mode the bound\n    // FormControl carries the value natively (ReactiveForms), so we must not double-write.\n    if (!this.control()) this.value.set(el.value);\n    this.tick.update(n => n + 1);\n  }\n\n  protected onFocus(ev: FocusEvent): void {\n    this.focused.set(true);\n    this.sdFocus.emit(ev);\n  }\n\n  protected onBlur(ev: FocusEvent): void {\n    this.focused.set(false);\n    this.tick.update(n => n + 1);\n    this.sdBlur.emit(ev);\n  }\n\n  protected onKeyup(ev: KeyboardEvent): void {\n    if (ev.key === 'Enter') this.keyupEnter.emit();\n  }\n\n  protected onKeydown(ev: KeyboardEvent): void {\n    if (ev.key === 'Escape') this.keydownEscape.emit();\n    this.sdKeydown.emit(ev);\n  }\n\n  protected onPaste(ev: ClipboardEvent): void {\n    this.sdPaste.emit(ev);\n  }\n\n  protected onCompositionStart(ev: CompositionEvent): void {\n    this.sdCompositionStart.emit(ev);\n  }\n\n  protected onCompositionEnd(ev: CompositionEvent): void {\n    this.tick.update(n => n + 1);\n    this.sdCompositionEnd.emit(ev);\n  }\n\n  protected clear(ev: Event): void {\n    ev.stopPropagation();\n    const c = this.control();\n    if (c) c.setValue('');\n    else this.value.set('');\n    this.tick.update(n => n + 1);\n    this.cleared.emit();\n  }\n\n  // ── public API ───────────────────────────────────────────────────────────\n  /** Focus the native input. */\n  focus(): void {\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  /** Blur the native input. */\n  blur(): void {\n    this.inputRef()?.nativeElement.blur();\n  }\n}\n","@let _autoId = autoId();\n@let _placeholder = placeholder();\n@let _size = sizeOf();\n@let _control = control();\n\n@if (_control) {\n  <input\n    #inputEl\n    class=\"sd-inline-text__input\"\n    type=\"text\"\n    [formControl]=\"_control\"\n    [placeholder]=\"_placeholder\"\n    [size]=\"_size\"\n    [attr.data-autoId]=\"_autoId\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (keyup)=\"onKeyup($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (compositionstart)=\"onCompositionStart($event)\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n} @else {\n  <input\n    #inputEl\n    class=\"sd-inline-text__input\"\n    type=\"text\"\n    [value]=\"currentText()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"_placeholder\"\n    [size]=\"_size\"\n    [attr.data-autoId]=\"_autoId\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (keyup)=\"onKeyup($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (compositionstart)=\"onCompositionStart($event)\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n}\n\n@if (showClear()) {\n  <button type=\"button\" class=\"sd-inline-text__clear\" (click)=\"clear($event)\" aria-label=\"Clear\" tabindex=\"-1\">\n    <mat-icon>close</mat-icon>\n  </button>\n}\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-inline-text.mjs","sources":["../../../projects/sdcorejs-angular/forms/inline-text/src/inline-text.component.ts","../../../projects/sdcorejs-angular/forms/inline-text/src/inline-text.component.html","../../../projects/sdcorejs-angular/forms/inline-text/sdcorejs-angular-forms-inline-text.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport {\n  afterNextRender,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  ElementRef,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { SdFormControl } from '@sdcorejs/angular/forms/models';\n\n/** Visual / `data-state` of the inline input. `'auto'` derives from focus + value. */\nexport type SdInlineTextState = 'auto' | 'pending' | 'active' | 'focus' | 'error';\n/** `'standalone'` draws its own affordance (hover bg + focus ring); `'seamless'` defers all chrome to the host. */\nexport type SdInlineTextChrome = 'standalone' | 'seamless';\n\n/**\n * Borderless, content-hugging text input — the seamless primitive shared by\n * `sd-input` / `sd-input-number` (`viewed='inline'`) and the query-bar / query-builder chips.\n *\n * why: a native `<input>` inside `mat-form-field` cannot hug its content, so inline-edit\n * looked like a full-width input rather than text. This primitive renders a raw `<input>`\n * sized via the native `size` attribute (clamped) so the click/hover target tracks the value.\n *\n * It is intentionally unopinionated about commit/parse/format: it forwards the raw DOM events\n * (focus / blur / keydown / paste / composition / Enter / Escape) so each consumer keeps its own\n * logic (e.g. sd-input-number's vi-VN formatting). Two binding modes:\n *  - **uncontrolled** via `[(value)]` — used by the chips' signal drafts;\n *  - **controlled** via `[control]` (an external `SdFormControl`) — used by the form controls.\n */\n@Component({\n  selector: 'sd-inline-text',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, ReactiveFormsModule, MatIconModule],\n  templateUrl: './inline-text.component.html',\n  styleUrl: './inline-text.component.scss',\n  host: {\n    class: 'sd-inline-text',\n    '[class.sd-inline-text--standalone]': \"chrome() === 'standalone'\",\n    '[class.sd-inline-text--seamless]': \"chrome() === 'seamless'\",\n    '[attr.data-state]': 'effectiveState()',\n  },\n})\nexport class SdInlineText {\n  /** Uncontrolled value (two-way). Ignored when `[control]` is provided. */\n  readonly value = model<string>('');\n  /** Optional external FormControl (controlled mode) — used by sd-input / sd-input-number. */\n  readonly control = input<SdFormControl | undefined>(undefined);\n  readonly placeholder = input<string>('');\n  readonly disabled = input(false, { transform: booleanAttribute });\n  /** Show a hover/value-gated clear-× (default `true`). */\n  readonly clearable = input(true, { transform: booleanAttribute });\n  /** `'auto'` derives state from focus + value; pass an explicit value (e.g. `'error'`) to override. */\n  readonly state = input<SdInlineTextState>('auto');\n  readonly chrome = input<SdInlineTextChrome>('standalone');\n  readonly autoId = input<string | undefined>(undefined);\n  readonly autofocus = input(false, { transform: booleanAttribute });\n  /** Lower bound (chars) so short/empty values keep a clickable target. */\n  readonly minSize = input(2);\n\n  readonly cleared = output<void>();\n  readonly keyupEnter = output<void>();\n  readonly keydownEscape = output<void>();\n  readonly sdFocus = output<FocusEvent>();\n  readonly sdBlur = output<FocusEvent>();\n  readonly sdKeydown = output<KeyboardEvent>();\n  readonly sdPaste = output<ClipboardEvent>();\n  readonly sdCompositionStart = output<CompositionEvent>();\n  readonly sdCompositionEnd = output<CompositionEvent>();\n\n  private readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('inputEl');\n\n  /** Bumped on input/blur/composition + bound-control changes so size/state methods re-eval under OnPush. */\n  protected readonly tick = signal(0);\n  protected readonly focused = signal(false);\n\n  constructor() {\n    // why: a bound control's value can change programmatically (sd-input-number reformats\n    // on blur) without a DOM input event — subscribe so the size/state still refresh.\n    effect(onCleanup => {\n      const c = this.control();\n      if (!c) return;\n      const sub = c.valueChanges.subscribe(() => this.tick.update(n => n + 1));\n      onCleanup(() => sub.unsubscribe());\n    });\n\n    afterNextRender(() => {\n      if (this.autofocus()) this.focus();\n    });\n  }\n\n  /**\n   * Current text — from the bound control in controlled mode, else the value model.\n   * why: `tick` is a tracked dependency so the computed re-runs when a bound control's\n   * value changes programmatically (control.value itself is not a signal).\n   */\n  protected readonly currentText = computed<string>(() => {\n    this.tick();\n    const c = this.control();\n    const raw = c ? c.value : this.value();\n    return raw == null ? '' : String(raw);\n  });\n\n  protected readonly hasValue = computed(() => this.currentText().length > 0);\n\n  protected readonly sizeOf = computed(() => {\n    const text = this.currentText();\n    const base = text.length > 0 ? text.length : this.placeholder().length;\n    return Math.max(this.minSize(), base);\n  });\n\n  protected readonly showClear = computed(() => this.clearable() && this.hasValue() && !this.disabled());\n\n  protected readonly effectiveState = computed<SdInlineTextState>(() => {\n    const s = this.state();\n    if (s !== 'auto') return s;\n    if (this.focused()) return 'focus';\n    return this.hasValue() ? 'active' : 'pending';\n  });\n\n  // ── event handlers ─────────────────────────────────────────────────────────\n  protected onInput(ev: Event): void {\n    const el = ev.target as HTMLInputElement;\n    // why: only the uncontrolled mode owns the value model; in controlled mode the bound\n    // FormControl carries the value natively (ReactiveForms), so we must not double-write.\n    if (!this.control()) this.value.set(el.value);\n    this.tick.update(n => n + 1);\n  }\n\n  protected onFocus(ev: FocusEvent): void {\n    this.focused.set(true);\n    this.sdFocus.emit(ev);\n  }\n\n  protected onBlur(ev: FocusEvent): void {\n    this.focused.set(false);\n    this.tick.update(n => n + 1);\n    this.sdBlur.emit(ev);\n  }\n\n  protected onKeyup(ev: KeyboardEvent): void {\n    if (ev.key === 'Enter') this.keyupEnter.emit();\n  }\n\n  protected onKeydown(ev: KeyboardEvent): void {\n    if (ev.key === 'Escape') this.keydownEscape.emit();\n    this.sdKeydown.emit(ev);\n  }\n\n  protected onPaste(ev: ClipboardEvent): void {\n    this.sdPaste.emit(ev);\n  }\n\n  protected onCompositionStart(ev: CompositionEvent): void {\n    this.sdCompositionStart.emit(ev);\n  }\n\n  protected onCompositionEnd(ev: CompositionEvent): void {\n    this.tick.update(n => n + 1);\n    this.sdCompositionEnd.emit(ev);\n  }\n\n  protected clear(ev: Event): void {\n    ev.stopPropagation();\n    const c = this.control();\n    if (c) c.setValue('');\n    else this.value.set('');\n    this.tick.update(n => n + 1);\n    this.cleared.emit();\n  }\n\n  // ── public API ───────────────────────────────────────────────────────────\n  /** Focus the native input. */\n  focus(): void {\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  /** Blur the native input. */\n  blur(): void {\n    this.inputRef()?.nativeElement.blur();\n  }\n}\n","@let _autoId = autoId();\n@let _placeholder = placeholder();\n@let _sizeOf = sizeOf();\n@let _control = control();\n\n@if (_control) {\n  <input\n    #inputEl\n    class=\"sd-inline-text__input\"\n    type=\"text\"\n    [formControl]=\"_control\"\n    [placeholder]=\"_placeholder\"\n    [size]=\"_sizeOf\"\n    [attr.data-autoId]=\"_autoId\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (keyup)=\"onKeyup($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (compositionstart)=\"onCompositionStart($event)\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n} @else {\n  <input\n    #inputEl\n    class=\"sd-inline-text__input\"\n    type=\"text\"\n    [value]=\"currentText()\"\n    [disabled]=\"disabled()\"\n    [placeholder]=\"_placeholder\"\n    [size]=\"_sizeOf\"\n    [attr.data-autoId]=\"_autoId\"\n    (input)=\"onInput($event)\"\n    (focus)=\"onFocus($event)\"\n    (blur)=\"onBlur($event)\"\n    (keyup)=\"onKeyup($event)\"\n    (keydown)=\"onKeydown($event)\"\n    (paste)=\"onPaste($event)\"\n    (compositionstart)=\"onCompositionStart($event)\"\n    (compositionend)=\"onCompositionEnd($event)\" />\n}\n\n@if (showClear()) {\n  <button type=\"button\" class=\"sd-inline-text__clear\" (click)=\"clear($event)\" aria-label=\"Clear\" tabindex=\"-1\">\n    <mat-icon>close</mat-icon>\n  </button>\n}\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-color.mjs

@@ -103,10 +103,10 @@ class SdInputColor {
         this.valueModel.set(null);
         this.sdChange.emit(null);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdInputColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.16", type: SdInputColor, isStandalone: true, selector: "sd-input-color", inputs: { 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<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  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"M\u00E3 m\u00E0u HEX kh\u00F4ng h\u1EE3p l\u1EC7 (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: n\u00FAt clear do <sd-input> t\u1EF1 render (built-in, hover-gated). \u1EDE \u0111\u00E2y\n           ch\u1EC9 chi\u1EBFu swatch + native picker. onInputChange coerce '' \u2192 null n\u00EAn\n           clear c\u1EE7a sd-input v\u1EABn cho ra model r\u1ED7ng \u0111\u00FAng ngh\u0129a. -->\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\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\"\n        aria-label=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\">\n      </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", styles: [":host{display:block;--sd-input-color-swatch-size: 22px;--sd-input-color-swatch-border: rgba(0, 0, 0, .12);--sd-input-color-swatch-checker: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%)}.sd-input-color__suffix{position:relative;display:inline-flex;align-items:center;gap:4px}.sd-input-color__swatch{width:var(--sd-input-color-swatch-size);height:var(--sd-input-color-swatch-size);border-radius:4px;border:1px solid var(--sd-input-color-swatch-border);padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;transition:transform 80ms ease,box-shadow 80ms ease;position:relative;overflow:hidden}.sd-input-color__swatch:hover:not(:disabled){transform:scale(1.06);box-shadow:0 0 0 2px #1565c02e}.sd-input-color__swatch:disabled{cursor:not-allowed;opacity:.5}.sd-input-color__swatch.sd-input-color__swatch--empty{background-color:#fff;background-image:var(--sd-input-color-swatch-checker);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sd-input-color__hidden-picker{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;right:0;top:50%}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdInputColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: SdInputColor, isStandalone: true, selector: "sd-input-color", inputs: { 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange" }, viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true, isSignal: true }], ngImport: i0, template: "<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  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"M\u00E3 m\u00E0u HEX kh\u00F4ng h\u1EE3p l\u1EC7 (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: n\u00FAt clear do <sd-input> t\u1EF1 render (built-in, hover-gated). \u1EDE \u0111\u00E2y\n           ch\u1EC9 chi\u1EBFu swatch + native picker. onInputChange coerce '' \u2192 null n\u00EAn\n           clear c\u1EE7a sd-input v\u1EABn cho ra model r\u1ED7ng \u0111\u00FAng ngh\u0129a. -->\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\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\"\n        aria-label=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\">\n      </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", styles: [":host{display:block;--sd-input-color-swatch-size: 22px;--sd-input-color-swatch-border: rgba(0, 0, 0, .12);--sd-input-color-swatch-checker: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%)}.sd-input-color__suffix{position:relative;display:inline-flex;align-items:center;gap:4px}.sd-input-color__swatch{width:var(--sd-input-color-swatch-size);height:var(--sd-input-color-swatch-size);border-radius:4px;border:1px solid var(--sd-input-color-swatch-border);padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;transition:transform 80ms ease,box-shadow 80ms ease;position:relative;overflow:hidden}.sd-input-color__swatch:hover:not(:disabled){transform:scale(1.06);box-shadow:0 0 0 2px #1565c02e}.sd-input-color__swatch:disabled{cursor:not-allowed;opacity:.5}.sd-input-color__swatch.sd-input-color__swatch--empty{background-color:#fff;background-image:var(--sd-input-color-swatch-checker);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sd-input-color__hidden-picker{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;right:0;top:50%}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdInputColor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdInputColor, decorators: [{
             type: Component,
             args: [{ selector: 'sd-input-color', standalone: true, imports: [SdInput, SdSuffixDefDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<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  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"M\u00E3 m\u00E0u HEX kh\u00F4ng h\u1EE3p l\u1EC7 (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: n\u00FAt clear do <sd-input> t\u1EF1 render (built-in, hover-gated). \u1EDE \u0111\u00E2y\n           ch\u1EC9 chi\u1EBFu swatch + native picker. onInputChange coerce '' \u2192 null n\u00EAn\n           clear c\u1EE7a sd-input v\u1EABn cho ra model r\u1ED7ng \u0111\u00FAng ngh\u0129a. -->\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\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\"\n        aria-label=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\">\n      </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", styles: [":host{display:block;--sd-input-color-swatch-size: 22px;--sd-input-color-swatch-border: rgba(0, 0, 0, .12);--sd-input-color-swatch-checker: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%)}.sd-input-color__suffix{position:relative;display:inline-flex;align-items:center;gap:4px}.sd-input-color__swatch{width:var(--sd-input-color-swatch-size);height:var(--sd-input-color-swatch-size);border-radius:4px;border:1px solid var(--sd-input-color-swatch-border);padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;transition:transform 80ms ease,box-shadow 80ms ease;position:relative;overflow:hidden}.sd-input-color__swatch:hover:not(:disabled){transform:scale(1.06);box-shadow:0 0 0 2px #1565c02e}.sd-input-color__swatch:disabled{cursor:not-allowed;opacity:.5}.sd-input-color__swatch.sd-input-color__swatch--empty{background-color:#fff;background-image:var(--sd-input-color-swatch-checker);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sd-input-color__hidden-picker{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;right:0;top:50%}\n"] }]
         }], propDecorators: { 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], autoId: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], viewed: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewed", required: false }] }], valueModel: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }, { type: i0.Output, args: ["modelChange"] }], sdChange: [{ type: i0.Output, args: ["sdChange"] }], picker: [{ type: i0.ViewChild, args: ['picker', { isSignal: true }] }] } });

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

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import { viewChild, contentChild, inject, ChangeDetectorRef, input, computed, booleanAttribute, model, output, EventEmitter, 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';
-import * as uuid from 'uuid';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
@@ -37,7 +37,7 @@ class SdInputNumberErrotStateMatcher {
     }
 }
 class SdInputNumber {
-    id = `I${uuid.v4()}`;
+    id = `I${Utilities.generateUuid()}`;
     // ==========================================
     // 1. SIGNAL QUERIES
     // ==========================================
@@ -53,7 +53,6 @@ class SdInputNumber {
     // ==========================================
     ref = inject(ChangeDetectorRef);
     coreConfiguration = inject(SD_CORE_CONFIGURATION, { optional: true });
-    formatNumberPipe = inject(SdFormatNumberPipe);
     formConfig = inject(SD_FORM_CONFIGURATION, { optional: true });
     #i18n = inject(I18nService);
     // ==========================================
@@ -72,7 +71,7 @@ class SdInputNumber {
         const msg = this.errorMessage();
         return msg && msg.length > 0 ? msg : null;
     }, ...(ngDevMode ? [{ debugName: "dataErrorMessage" }] : /* istanbul ignore next */ []));
-    name = input(uuid.v4(), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    name = input(Utilities.generateUuid(), ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     // Ghi (TransformT): any (để không bị lỗi typing khi cha truyền vào)
     form = input(undefined, { ...(ngDevMode ? { debugName: "form" } : /* istanbul ignore next */ {}), transform: (val) => {
@@ -438,10 +437,10 @@ class SdInputNumber {
             this.#focusActiveInput();
         }, 100);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", 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 lbl = label();\n@let app = appearance();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage();\n@let hText = helperText();\n@let fmt = format();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"lbl\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value | sdFormatNumber : undefined : fmt\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\n    [placeholder]=\"placeholder() || lbl || ''\"\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 (!app) {\n    <ng-content select=\"[sdLabel]\">\n      @if (lbl) {\n        <sd-label [label]=\"lbl\" [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]=\"hideErr\"\n        [appearance]=\"app!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (app && lbl) {\n          <mat-label style=\"display: inline-block\">\n            <div style=\"display: flex; align-items: center; gap: 4px\">\n              <span>{{ lbl }}</span>\n              @if (hText) {\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\n              }\n            </div>\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"inputControl\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || lbl || ''\"\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 (!hideErr && errMsg && formControl.touched) {\n          <mat-error>{{ errMsg }}</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            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (hideErr && errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-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-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-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-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-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-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-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!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}: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-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!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: "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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 style=\"display: inline-block\">\n            <div style=\"display: flex; align-items: center; gap: 4px\">\n              <span>{{ _label }}</span>\n              @if (_helperText) {\n                <mat-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\n              }\n            </div>\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            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\"> error </mat-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-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-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-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-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-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-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!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}: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-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!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: "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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.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: "21.2.16", ngImport: i0, type: SdInputNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", 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: [
                         CommonModule,
@@ -456,7 +455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImpo
                         SdFormatNumberPipe,
                         SdView,
                         SdInlineText,
-                    ], template: "@let lbl = label();\n@let app = appearance();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage();\n@let hText = helperText();\n@let fmt = format();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n  <sd-view\n    [label]=\"lbl\"\n    [labelTemplate]=\"sdLabelTemplate()\"\n    [value]=\"formControl.value\"\n    [display]=\"formControl.value | sdFormatNumber : undefined : fmt\"\n    [hyperlink]=\"hyperlink()\"\n    [valueTemplate]=\"viewTemplate()\">\n  </sd-view>\n} @else if (_isInline) {\n  <sd-inline-text\n    [control]=\"inputControl\"\n    [placeholder]=\"placeholder() || lbl || ''\"\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 (!app) {\n    <ng-content select=\"[sdLabel]\">\n      @if (lbl) {\n        <sd-label [label]=\"lbl\" [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]=\"hideErr\"\n        [appearance]=\"app!\"\n        [floatLabel]=\"floatLabel()\">\n        @if (app && lbl) {\n          <mat-label style=\"display: inline-block\">\n            <div style=\"display: flex; align-items: center; gap: 4px\">\n              <span>{{ lbl }}</span>\n              @if (hText) {\n                <mat-icon [matTooltip]=\"hText\" matTooltipPosition=\"below\">info_outline</mat-icon>\n              }\n            </div>\n          </mat-label>\n        }\n\n        <input\n          aria-hidden=\"true\"\n          [id]=\"id\"\n          [formControl]=\"inputControl\"\n          #control\n          matInput\n          [placeholder]=\"placeholder() || lbl || ''\"\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 (!hideErr && errMsg && formControl.touched) {\n          <mat-error>{{ errMsg }}</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            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (hideErr && errMsg && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-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-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-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-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-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-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-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!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}: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-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!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"] }]
+                    ], 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 style=\"display: inline-block\">\n            <div style=\"display: flex; align-items: center; gap: 4px\">\n              <span>{{ _label }}</span>\n              @if (_helperText) {\n                <mat-icon [matTooltip]=\"_helperText\" matTooltipPosition=\"below\">info_outline</mat-icon>\n              }\n            </div>\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            <mat-icon>close</mat-icon>\n          </button>\n        }\n\n        @if (_hideInlineError && _errorMessage && formControl.touched) {\n          <mat-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"_errorMessage\" matTooltipPosition=\"above\"> error </mat-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-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-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-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-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-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-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!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}: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-black100)}:host ::ng-deep .mat-mdc-form-field input.mat-mdc-input-element:disabled{color:var(--sd-black400)!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: [{
                 type: Output
             }] } });