@sdcorejs/angular 19.0.1 → 20.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"file":"sdcorejs-angular-forms-input-color.mjs","sources":["../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.ts","../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.html","../../../projects/sdcorejs-angular/forms/input-color/sdcorejs-angular-forms-input-color.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\nimport { SdInput } from '@sdcorejs/angular/forms/input';\nimport { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n  selector: 'sd-input-color',\n  standalone: true,\n  imports: [SdInput, SdSuffixDefDirective],\n  templateUrl: './input-color.component.html',\n  styleUrls: ['./input-color.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n  readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n  readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n  // ==========================================\n  // Inputs (forwarded to <sd-input>)\n  // ==========================================\n  readonly label = input<string | undefined>();\n  readonly helperText = input<string | undefined>();\n  readonly placeholder = input<string>('#RRGGBB');\n  readonly size = input<Size>('md');\n  readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n  // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  readonly form = input<any>(undefined);\n  readonly name = input<string | undefined>();\n  readonly autoId = input<string | undefined>();\n\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly viewed = input(false, { transform: booleanAttribute });\n\n  // Two-way model — same alias as <sd-input>\n  readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n  // ==========================================\n  // Outputs\n  // ==========================================\n  readonly sdChange = output<string | null | undefined>();\n\n  // ==========================================\n  // ViewChild\n  // ==========================================\n  readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n  // ==========================================\n  // Derived state\n  // ==========================================\n  // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n  // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n  // always opens on something.\n  readonly pickerSafeValue = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return '#000000';\n    if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n    if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n      const r = v[1];\n      const g = v[2];\n      const b = v[3];\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n    return '#000000';\n  });\n\n  // Swatch shows the raw model value when valid; otherwise transparent so the\n  // user gets visual feedback that the hex string is malformed.\n  readonly swatchColor = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return 'transparent';\n    return this.#hexRegex.test(v) ? v : 'transparent';\n  });\n\n  // ==========================================\n  // Handlers\n  // ==========================================\n  // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n  // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n  // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n  onInputChange = (v: unknown): void => {\n    const str = v == null || v === '' ? null : String(v);\n    this.valueModel.set(str);\n    this.sdChange.emit(str);\n  };\n\n  openPicker = (): void => {\n    if (this.disabled() || this.readonly() || this.viewed()) return;\n    this.picker()?.nativeElement.click();\n  };\n\n  onPickerChange = (ev: Event): void => {\n    const v = (ev.target as HTMLInputElement).value;\n    this.valueModel.set(v);\n    this.sdChange.emit(v);\n  };\n\n  // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n  // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n  clear = (ev?: Event): void => {\n    ev?.stopPropagation();\n    if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n    const v = this.valueModel();\n    if (v == null || v === '') return;\n    this.valueModel.set(null);\n    this.sdChange.emit(null);\n  };\n}\n","<sd-input\n  [label]=\"label()\"\n  [helperText]=\"helperText()\"\n  [placeholder]=\"placeholder()\"\n  [size]=\"size()\"\n  [appearance]=\"appearance() ?? undefined\"\n  [form]=\"form()\"\n  [name]=\"name() ?? ''\"\n  [autoId]=\"autoId()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"Mã màu HEX không hợp lệ (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: nút clear do <sd-input> tự render (built-in, hover-gated). Ở đây\n           chỉ chiếu swatch + native picker. onInputChange coerce '' → null nên\n           clear của sd-input vẫn cho ra model rỗng đúng nghĩa. -->\n      <button\n        type=\"button\"\n        class=\"sd-input-color__swatch\"\n        [style.background]=\"swatchColor()\"\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\n        [disabled]=\"disabled() || readonly() || viewed()\"\n        (click)=\"openPicker()\"\n        title=\"Mở bảng chọn màu\"\n        aria-label=\"Mở bảng chọn màu\">\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAgBA;AACA;AACA;AACA;AACO,MAAM,0BAA0B,GAAG;MAU7B,YAAY,CAAA;IACd,UAAU,GAAG,0BAA0B;AACvC,IAAA,SAAS,GAAG,IAAI,MAAM,CAAC,0BAA0B,CAAC;;;;IAKlD,KAAK,GAAG,KAAK,EAAsB;IACnC,UAAU,GAAG,KAAK,EAAsB;AACxC,IAAA,WAAW,GAAG,KAAK,CAAS,SAAS,CAAC;AACtC,IAAA,IAAI,GAAG,KAAK,CAAO,IAAI,CAAC;AACxB,IAAA,UAAU,GAAG,KAAK,CAAqC,SAAS,CAAC;;;AAGjE,IAAA,IAAI,GAAG,KAAK,CAAM,SAAS,CAAC;IAC5B,IAAI,GAAG,KAAK,EAAsB;IAClC,MAAM,GAAG,KAAK,EAAsB;IAEpC,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACxD,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACxD,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;IACxD,MAAM,GAAG,KAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;;IAGtD,UAAU,GAAG,KAAK,CAA4B,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC;;;;IAK5E,QAAQ,GAAG,MAAM,EAA6B;;;;AAK9C,IAAA,MAAM,GAAG,SAAS,CAA+B,QAAQ,CAAC;;;;;;;AAQ1D,IAAA,eAAe,GAAG,QAAQ,CAAS,MAAK;AAC/C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;AAC3B,QAAA,IAAI,CAAC,CAAC;AAAE,YAAA,OAAO,SAAS;AACxB,QAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;AAAE,YAAA,OAAO,CAAC;AACzC,QAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;AAC/B,YAAA,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACd,YAAA,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACd,YAAA,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;AACd,YAAA,OAAO,CAAA,CAAA,EAAI,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,CAAA,EAAG,CAAC,EAAE;QACpC;AACA,QAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;YAAE,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;AACrD,QAAA,OAAO,SAAS;AAClB,IAAA,CAAC,CAAC;;;AAIO,IAAA,WAAW,GAAG,QAAQ,CAAS,MAAK;AAC3C,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;AAC3B,QAAA,IAAI,CAAC,CAAC;AAAE,YAAA,OAAO,aAAa;AAC5B,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,aAAa;AACnD,IAAA,CAAC,CAAC;;;;;;;AAQF,IAAA,aAAa,GAAG,CAAC,CAAU,KAAU;QACnC,MAAM,GAAG,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,GAAG,MAAM,CAAC,CAAC,CAAC;AACpD,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC;AACxB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,CAAC;AACzB,IAAA,CAAC;IAED,UAAU,GAAG,MAAW;AACtB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE;YAAE;QACzD,IAAI,CAAC,MAAM,EAAE,EAAE,aAAa,CAAC,KAAK,EAAE;AACtC,IAAA,CAAC;AAED,IAAA,cAAc,GAAG,CAAC,EAAS,KAAU;AACnC,QAAA,MAAM,CAAC,GAAI,EAAE,CAAC,MAA2B,CAAC,KAAK;AAC/C,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC;AACtB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACvB,IAAA,CAAC;;;AAID,IAAA,KAAK,GAAG,CAAC,EAAU,KAAU;QAC3B,EAAE,EAAE,eAAe,EAAE;AACrB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,MAAM,EAAE;YAAE;AAC5E,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE;AAC3B,QAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE;YAAE;AAC3B,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;AAC1B,IAAA,CAAC;wGAhGU,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,YAAY,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9BzB,qnDA4CA,EAAA,MAAA,EAAA,CAAA,8xCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnBY,OAAO,idAAE,oBAAoB,EAAA,QAAA,EAAA,eAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAK5B,YAAY,EAAA,UAAA,EAAA,CAAA;kBARxB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,OAAO,EAAE,oBAAoB,CAAC,EAAA,eAAA,EAGvB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,qnDAAA,EAAA,MAAA,EAAA,CAAA,8xCAAA,CAAA,EAAA;;;AE5BjD;;AAEG;;;;"}
+{"version":3,"file":"sdcorejs-angular-forms-input-color.mjs","sources":["../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.ts","../../../projects/sdcorejs-angular/forms/input-color/src/input-color.component.html","../../../projects/sdcorejs-angular/forms/input-color/sdcorejs-angular-forms-input-color.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  ElementRef,\n  input,\n  model,\n  output,\n  viewChild,\n} from '@angular/core';\nimport { MatFormFieldAppearance } from '@angular/material/form-field';\nimport { SdInput } from '@sdcorejs/angular/forms/input';\nimport { SdSuffixDefDirective } from '@sdcorejs/angular/forms/directives';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n  selector: 'sd-input-color',\n  standalone: true,\n  imports: [SdInput, SdSuffixDefDirective],\n  templateUrl: './input-color.component.html',\n  styleUrls: ['./input-color.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n  readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n  readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n  // ==========================================\n  // Inputs (forwarded to <sd-input>)\n  // ==========================================\n  readonly label = input<string | undefined>();\n  readonly helperText = input<string | undefined>();\n  readonly placeholder = input<string>('#RRGGBB');\n  readonly size = input<Size>('md');\n  readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n  // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  readonly form = input<any>(undefined);\n  readonly name = input<string | undefined>();\n  readonly autoId = input<string | undefined>();\n\n  readonly required = input(false, { transform: booleanAttribute });\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly readonly = input(false, { transform: booleanAttribute });\n  readonly viewed = input(false, { transform: booleanAttribute });\n\n  // Two-way model — same alias as <sd-input>\n  readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n  // ==========================================\n  // Outputs\n  // ==========================================\n  readonly sdChange = output<string | null | undefined>();\n\n  // ==========================================\n  // ViewChild\n  // ==========================================\n  readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n  // ==========================================\n  // Derived state\n  // ==========================================\n  // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n  // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n  // always opens on something.\n  readonly pickerSafeValue = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return '#000000';\n    if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n    if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n      const r = v[1];\n      const g = v[2];\n      const b = v[3];\n      return `#${r}${r}${g}${g}${b}${b}`;\n    }\n    if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n    return '#000000';\n  });\n\n  // Swatch shows the raw model value when valid; otherwise transparent so the\n  // user gets visual feedback that the hex string is malformed.\n  readonly swatchColor = computed<string>(() => {\n    const v = this.valueModel();\n    if (!v) return 'transparent';\n    return this.#hexRegex.test(v) ? v : 'transparent';\n  });\n\n  // ==========================================\n  // Handlers\n  // ==========================================\n  // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n  // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n  // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n  onInputChange = (v: unknown): void => {\n    const str = v == null || v === '' ? null : String(v);\n    this.valueModel.set(str);\n    this.sdChange.emit(str);\n  };\n\n  openPicker = (): void => {\n    if (this.disabled() || this.readonly() || this.viewed()) return;\n    this.picker()?.nativeElement.click();\n  };\n\n  onPickerChange = (ev: Event): void => {\n    const v = (ev.target as HTMLInputElement).value;\n    this.valueModel.set(v);\n    this.sdChange.emit(v);\n  };\n\n  // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n  // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n  clear = (ev?: Event): void => {\n    ev?.stopPropagation();\n    if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n    const v = this.valueModel();\n    if (v == null || v === '') return;\n    this.valueModel.set(null);\n    this.sdChange.emit(null);\n  };\n}\n","<sd-input\n  [label]=\"label()\"\n  [helperText]=\"helperText()\"\n  [placeholder]=\"placeholder()\"\n  [size]=\"size()\"\n  [appearance]=\"appearance() ?? undefined\"\n  [form]=\"form()\"\n  [name]=\"name() ?? ''\"\n  [autoId]=\"autoId()\"\n  [required]=\"required()\"\n  [disabled]=\"disabled()\"\n  [readonly]=\"readonly()\"\n  [viewed]=\"viewed()\"\n  [pattern]=\"hexPattern\"\n  patternErrorMessage=\"Mã màu HEX không hợp lệ (vd #1565C0)\"\n  [model]=\"valueModel()\"\n  (sdChange)=\"onInputChange($event)\">\n\n  <ng-template sdSuffixDef>\n    <div class=\"sd-input-color__suffix\">\n      <!-- why: nút clear do <sd-input> tự render (built-in, hover-gated). Ở đây\n           chỉ chiếu swatch + native picker. onInputChange coerce '' → null nên\n           clear của sd-input vẫn cho ra model rỗng đúng nghĩa. -->\n      <button\n        type=\"button\"\n        class=\"sd-input-color__swatch\"\n        [style.background]=\"swatchColor()\"\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\n        [disabled]=\"disabled() || readonly() || viewed()\"\n        (click)=\"openPicker()\"\n        title=\"Mở bảng chọn màu\"\n        aria-label=\"Mở bảng chọn màu\">\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -40,11 +40,11 @@ class SdInputNumber {
     // ==========================================
     // 1. SIGNAL QUERIES
     // ==========================================
-    control = viewChild('control');
-    sdLabelTemplate = contentChild('sdLabel');
-    sdValueTemplate = contentChild('sdValue');
-    sdViewDef = contentChild(SdViewDefDirective);
-    sdSuffixDef = contentChild(SdSuffixDefDirective);
+    control = viewChild('control', ...(ngDevMode ? [{ debugName: "control" }] : []));
+    sdLabelTemplate = contentChild('sdLabel', ...(ngDevMode ? [{ debugName: "sdLabelTemplate" }] : []));
+    sdValueTemplate = contentChild('sdValue', ...(ngDevMode ? [{ debugName: "sdValueTemplate" }] : []));
+    sdViewDef = contentChild(SdViewDefDirective, ...(ngDevMode ? [{ debugName: "sdViewDef" }] : []));
+    sdSuffixDef = contentChild(SdSuffixDefDirective, ...(ngDevMode ? [{ debugName: "sdSuffixDef" }] : []));
     // ==========================================
     // 2. INJECTS
     // ==========================================
@@ -56,54 +56,67 @@ class SdInputNumber {
     // ==========================================
     // 3. SIGNAL INPUTS & MODEL
     // ==========================================
-    autoIdInput = input(undefined, { alias: 'autoId' });
-    autoId = computed(() => (this.autoIdInput() ? `forms-input-number-${this.autoIdInput()}` : undefined));
+    autoIdInput = input(undefined, ...(ngDevMode ? [{ debugName: "autoIdInput", alias: 'autoId' }] : [{ alias: 'autoId' }]));
+    autoId = computed(() => (this.autoIdInput() ? `forms-input-number-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : []));
     #state = sdFormControlState(computed(() => this.formControl));
-    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'));
-    dataInvalid = computed(() => (this.#state().invalid ? 'true' : 'false'));
-    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'));
-    dataValue = computed(() => sdSerializeDataValue(this.#state().value));
-    dataRequired = computed(() => (this.required() ? 'true' : 'false'));
+    dataDisabled = computed(() => (this.#state().disabled ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataDisabled" }] : []));
+    dataInvalid = computed(() => (this.#state().invalid ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataInvalid" }] : []));
+    dataEmpty = computed(() => (sdIsEmpty(this.#state().value) ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataEmpty" }] : []));
+    dataValue = computed(() => sdSerializeDataValue(this.#state().value), ...(ngDevMode ? [{ debugName: "dataValue" }] : []));
+    dataRequired = computed(() => (this.required() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataRequired" }] : []));
     dataErrorMessage = computed(() => {
         void this.#state();
         const msg = this.errorMessage();
         return msg && msg.length > 0 ? msg : null;
-    });
-    name = input(uuid.v4());
-    size = input('md');
+    }, ...(ngDevMode ? [{ debugName: "dataErrorMessage" }] : []));
+    name = input(uuid.v4(), ...(ngDevMode ? [{ debugName: "name" }] : []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
     // Ghi (TransformT): any (để không bị lỗi typing khi cha truyền vào)
-    form = input(undefined, {
-        transform: (val) => {
-            if (!val)
+    form = input(undefined, ...(ngDevMode ? [{ debugName: "form", transform: (val) => {
+                if (!val)
+                    return undefined;
+                // Nếu cha truyền vào NgForm (template-driven) -> Bóc lấy FormGroup bên trong
+                if (val instanceof NgForm)
+                    return val.form;
+                // Nếu cha truyền sẵn FormGroup (reactive) -> Lấy luôn
+                if (val instanceof FormGroup)
+                    return val;
+                // Fallback an toàn phòng trường hợp cha truyền 1 object chứa form
+                if (val?.form instanceof FormGroup)
+                    return val.form;
                 return undefined;
-            // Nếu cha truyền vào NgForm (template-driven) -> Bóc lấy FormGroup bên trong
-            if (val instanceof NgForm)
-                return val.form;
-            // Nếu cha truyền sẵn FormGroup (reactive) -> Lấy luôn
-            if (val instanceof FormGroup)
-                return val;
-            // Fallback an toàn phòng trường hợp cha truyền 1 object chứa form
-            if (val?.form instanceof FormGroup)
-                return val.form;
-            return undefined;
-        },
-    });
-    label = input();
-    helperText = input();
-    placeholder = input();
-    hideInlineError = input(false, { transform: booleanAttribute });
-    blurOnEnter = input(false, { transform: booleanAttribute });
-    required = input(false, { transform: booleanAttribute });
-    readonly = input(false, { transform: booleanAttribute });
-    disabled = input(false, { transform: booleanAttribute });
-    viewed = input(false, { transform: booleanAttribute });
-    type = input();
-    precision = input(3);
-    format = input(undefined);
-    min = input(undefined, { transform: v => (v == null ? undefined : Number(v)) });
-    max = input(undefined, { transform: v => (v == null ? undefined : Number(v)) });
-    validator = input();
-    inlineError = input();
+            } }] : [{
+            transform: (val) => {
+                if (!val)
+                    return undefined;
+                // Nếu cha truyền vào NgForm (template-driven) -> Bóc lấy FormGroup bên trong
+                if (val instanceof NgForm)
+                    return val.form;
+                // Nếu cha truyền sẵn FormGroup (reactive) -> Lấy luôn
+                if (val instanceof FormGroup)
+                    return val;
+                // Fallback an toàn phòng trường hợp cha truyền 1 object chứa form
+                if (val?.form instanceof FormGroup)
+                    return val.form;
+                return undefined;
+            },
+        }]));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    helperText = input(...(ngDevMode ? [undefined, { debugName: "helperText" }] : []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : []));
+    hideInlineError = input(false, ...(ngDevMode ? [{ debugName: "hideInlineError", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    blurOnEnter = input(false, ...(ngDevMode ? [{ debugName: "blurOnEnter", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    viewed = input(false, ...(ngDevMode ? [{ debugName: "viewed", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    type = input(...(ngDevMode ? [undefined, { debugName: "type" }] : []));
+    precision = input(3, ...(ngDevMode ? [{ debugName: "precision" }] : []));
+    format = input(undefined, ...(ngDevMode ? [{ debugName: "format" }] : []));
+    min = input(undefined, ...(ngDevMode ? [{ debugName: "min", transform: v => (v == null ? undefined : Number(v)) }] : [{ transform: v => (v == null ? undefined : Number(v)) }]));
+    max = input(undefined, ...(ngDevMode ? [{ debugName: "max", transform: v => (v == null ? undefined : Number(v)) }] : [{ transform: v => (v == null ? undefined : Number(v)) }]));
+    validator = input(...(ngDevMode ? [undefined, { debugName: "validator" }] : []));
+    inlineError = input(...(ngDevMode ? [undefined, { debugName: "inlineError" }] : []));
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
      */
@@ -123,12 +136,12 @@ class SdInputNumber {
         if (errors['inlineError'])
             return this.inlineError();
         return undefined;
-    });
-    hyperlink = input();
-    appearanceInput = input(undefined, { alias: 'appearance' });
-    appearance = computed(() => this.appearanceInput() ?? this.formConfig?.appearance ?? 'outline');
-    floatLabel = input('auto');
-    valueModel = model(undefined, { alias: 'model' });
+    }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    hyperlink = input(...(ngDevMode ? [undefined, { debugName: "hyperlink" }] : []));
+    appearanceInput = input(undefined, ...(ngDevMode ? [{ debugName: "appearanceInput", alias: 'appearance' }] : [{ alias: 'appearance' }]));
+    appearance = computed(() => this.appearanceInput() ?? this.formConfig?.appearance ?? 'outline', ...(ngDevMode ? [{ debugName: "appearance" }] : []));
+    floatLabel = input('auto', ...(ngDevMode ? [{ debugName: "floatLabel" }] : []));
+    valueModel = model(undefined, ...(ngDevMode ? [{ debugName: "valueModel", alias: 'model' }] : [{ alias: 'model' }]));
     // ==========================================
     // 4. SIGNAL OUTPUTS (Giữ lại sdFocusForceBlur)
     // ==========================================
@@ -153,11 +166,11 @@ class SdInputNumber {
     decimalSeparator = computed(() => {
         const fmt = this.format() ?? this.coreConfiguration?.format?.number;
         return fmt === '1.234.567,89' ? ',' : '.';
-    });
+    }, ...(ngDevMode ? [{ debugName: "decimalSeparator" }] : []));
     thousandsSeparator = computed(() => {
         const fmt = this.format() ?? this.coreConfiguration?.format?.number;
         return fmt === '1.234.567,89' ? '.' : ',';
-    });
+    }, ...(ngDevMode ? [{ debugName: "thousandsSeparator" }] : []));
     regexPattern = computed(() => {
         const decimal = this.decimalSeparator();
         const thousand = this.thousandsSeparator();
@@ -171,7 +184,7 @@ class SdInputNumber {
         if (!this.type())
             return `[-]?${baseReg}`;
         return baseReg;
-    });
+    }, ...(ngDevMode ? [{ debugName: "regexPattern" }] : []));
     constructor() {
         // EFFECT 1: Sync model thay đổi từ bên ngoài (Parent -> Component)
         effect(() => {
@@ -408,10 +421,10 @@ class SdInputNumber {
             this.control()?.nativeElement?.focus();
         }, 100);
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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": "viewed()" } }, 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 }], ngImport: i0, template: "@let lbl = label();\n@let app = appearance();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage();\n@let viewDef = sdViewDef();\n@let hText = helperText();\n@let fmt = format();\n\n@if (viewed()) {\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]=\"sdValueTemplate()\">\n  </sd-view>\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.sd-view]=\"!!viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"viewDef!.templateRef; context: { value: formControl.value }\"> </ng-container>\n    } @else {\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-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!hideErr && errMsg && formControl.touched) {\n          <mat-error>{{ errMsg }}</mat-error>\n        }\n\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 (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container [ngTemplateOutlet]=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n          <ng-content select=\"[sdSuffix]\"></ng-content>\n        </ng-container> -->\n      </mat-form-field>\n    }\n  </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-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.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: "pipe", type: SdFormatNumberPipe, name: "sdFormatNumber" }, { kind: "component", type: SdView, selector: "sd-view", inputs: ["label", "value", "display", "hyperlink", "labelTemplate", "valueTemplate", "selectedItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.23", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.23", 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": "viewed()" } }, 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 }], ngImport: i0, template: "@let lbl = label();\n@let app = appearance();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage();\n@let viewDef = sdViewDef();\n@let hText = helperText();\n@let fmt = format();\n\n@if (viewed()) {\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]=\"sdValueTemplate()\">\n  </sd-view>\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.sd-view]=\"!!viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"viewDef!.templateRef; context: { value: formControl.value }\"> </ng-container>\n    } @else {\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-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!hideErr && errMsg && formControl.touched) {\n          <mat-error>{{ errMsg }}</mat-error>\n        }\n\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 (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container [ngTemplateOutlet]=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n          <ng-content select=\"[sdSuffix]\"></ng-content>\n        </ng-container> -->\n      </mat-form-field>\n    }\n  </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-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.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: "pipe", type: SdFormatNumberPipe, name: "sdFormatNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputNumber, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.23", 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]': 'viewed()' }, imports: [
                         CommonModule,
@@ -426,7 +439,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         SdFormatNumberPipe,
                         SdView,
                     ], template: "@let lbl = label();\n@let app = appearance();\n@let hideErr = hideInlineError();\n@let errMsg = errorMessage();\n@let viewDef = sdViewDef();\n@let hText = helperText();\n@let fmt = format();\n\n@if (viewed()) {\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]=\"sdValueTemplate()\">\n  </sd-view>\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.sd-view]=\"!!viewDef?.templateRef\"\n    [class.c-focused]=\"isFocused\"\n    [class.c-disabled]=\"formControl.disabled\"\n    (click)=\"onClick()\"\n    aria-hidden=\"true\">\n    @if (viewDef?.templateRef && !isFocused) {\n      <ng-container *ngTemplateOutlet=\"viewDef!.templateRef; context: { value: formControl.value }\"> </ng-container>\n    } @else {\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-icon matSuffix class=\"sd-error-icon\" [matTooltip]=\"errMsg\" matTooltipPosition=\"above\"> error </mat-icon>\n        }\n\n        @if (!hideErr && errMsg && formControl.touched) {\n          <mat-error>{{ errMsg }}</mat-error>\n        }\n\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 (sdSuffixDef()?.templateRef; as suffixRef) {\n          <ng-container matSuffix>\n            <ng-container [ngTemplateOutlet]=\"suffixRef\"></ng-container>\n          </ng-container>\n        }\n        <!-- <ng-container matSuffix>\n          <ng-content select=\"[sdSuffix]\"></ng-content>\n        </ng-container> -->\n      </mat-form-field>\n    }\n  </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-view:not(.c-focused):not(.c-disabled):hover{background-color:#ebecf0}.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: { sdFocusForceBlur: [{
+        }], ctorParameters: () => [], propDecorators: { control: [{ type: i0.ViewChild, args: ['control', { 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
             }] } });