@sd-angular/core 19.0.29 → 19.0.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/components/table/src/services/table-local/table-local-sort.util.d.ts +3 -0
  2. package/fesm2022/sd-angular-core-components-form-generic.mjs +11 -11
  3. package/fesm2022/sd-angular-core-components-form-generic.mjs.map +1 -1
  4. package/fesm2022/sd-angular-core-components-query-bar.mjs +2 -2
  5. package/fesm2022/sd-angular-core-components-query-bar.mjs.map +1 -1
  6. package/fesm2022/sd-angular-core-components-query-builder.mjs +1 -1
  7. package/fesm2022/sd-angular-core-components-query-builder.mjs.map +1 -1
  8. package/fesm2022/sd-angular-core-components-table.mjs +33 -26
  9. package/fesm2022/sd-angular-core-components-table.mjs.map +1 -1
  10. package/fesm2022/sd-angular-core-forms-input-color.mjs +4 -2
  11. package/fesm2022/sd-angular-core-forms-input-color.mjs.map +1 -1
  12. package/fesm2022/sd-angular-core-forms-input-number.mjs +63 -11
  13. package/fesm2022/sd-angular-core-forms-input-number.mjs.map +1 -1
  14. package/fesm2022/sd-angular-core-forms-input.mjs +7 -4
  15. package/fesm2022/sd-angular-core-forms-input.mjs.map +1 -1
  16. package/fesm2022/sd-angular-core-modules-layout.mjs +1 -1
  17. package/fesm2022/sd-angular-core-modules-layout.mjs.map +1 -1
  18. package/forms/input/src/input.component.d.ts +3 -1
  19. package/forms/input-color/src/input-color.component.d.ts +3 -1
  20. package/forms/input-number/src/input-number.component.d.ts +3 -1
  21. package/package.json +17 -17
package/fesm2022/sd-angular-core-forms-input-color.mjs CHANGED
@@ -26,6 +26,8 @@ class SdInputColor {
26
26
  name = input();
27
27
  autoId = input();
28
28
  required = input(false, { transform: booleanAttribute });
29
+ /** Show the inner `<sd-input>` clear button. Default `true` (opt-out). */
30
+ clearable = input(true, { transform: booleanAttribute });
29
31
  disabled = input(false, { transform: booleanAttribute });
30
32
  readonly = input(false, { transform: booleanAttribute });
31
33
  /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */
@@ -104,11 +106,11 @@ class SdInputColor {
104
106
  this.sdChange.emit(null);
105
107
  };
106
108
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
107
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", 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 });
109
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.21", 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", 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 [clearable]=\"clearable()\"\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", "clearable", "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 });
108
110
  }
109
111
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputColor, decorators: [{
110
112
  type: Component,
111
- 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"] }]
113
+ 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 [clearable]=\"clearable()\"\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"] }]
112
114
  }] });
113
115
 
114
116
  /**
package/fesm2022/sd-angular-core-forms-input-color.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sd-angular-core-forms-input-color.mjs","sources":["../../../projects/sd-angular/forms/input-color/src/input-color.component.ts","../../../projects/sd-angular/forms/input-color/src/input-color.component.html","../../../projects/sd-angular/forms/input-color/sd-angular-core-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 '@sd-angular/core/forms/input';\nimport { SdSuffixDefDirective } from '@sd-angular/core/forms/directives';\nimport { SdViewed, SdViewedInput, sdViewedTransform } from '@sd-angular/core/forms/models';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n selector: 'sd-input-color',\n standalone: true,\n imports: [SdInput, SdSuffixDefDirective],\n templateUrl: './input-color.component.html',\n styleUrl: './input-color.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n // ==========================================\n // Inputs (forwarded to <sd-input>)\n // ==========================================\n readonly label = input<string | undefined>();\n readonly helperText = input<string | undefined>();\n readonly placeholder = input<string>('#RRGGBB');\n readonly size = input<Size>('md');\n readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n // 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 /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */\n readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n // Two-way model — same alias as <sd-input>\n readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n // ==========================================\n // Outputs\n // ==========================================\n readonly sdChange = output<string | null | undefined>();\n\n // ==========================================\n // ViewChild\n // ==========================================\n readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n // ==========================================\n // Derived state\n // ==========================================\n // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n // always opens on something.\n readonly pickerSafeValue = computed<string>(() => {\n const v = this.valueModel();\n if (!v) return '#000000';\n if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n const r = v[1];\n const g = v[2];\n const b = v[3];\n return `#${r}${r}${g}${g}${b}${b}`;\n }\n if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n return '#000000';\n });\n\n // Swatch shows the raw model value when valid; otherwise transparent so the\n // user gets visual feedback that the hex string is malformed.\n readonly swatchColor = computed<string>(() => {\n const v = this.valueModel();\n if (!v) return 'transparent';\n return this.#hexRegex.test(v) ? v : 'transparent';\n });\n\n // ==========================================\n // Handlers\n // ==========================================\n // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n onInputChange = (v: unknown): void => {\n const str = v == null || v === '' ? null : String(v);\n this.valueModel.set(str);\n this.sdChange.emit(str);\n };\n\n openPicker = (): void => {\n if (this.disabled() || this.readonly() || this.viewed()) return;\n this.picker()?.nativeElement.click();\n };\n\n onPickerChange = (ev: Event): void => {\n const v = (ev.target as HTMLInputElement).value;\n this.valueModel.set(v);\n this.sdChange.emit(v);\n };\n\n // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n clear = (ev?: Event): void => {\n ev?.stopPropagation();\n if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n const v = this.valueModel();\n if (v == null || v === '') return;\n this.valueModel.set(null);\n this.sdChange.emit(null);\n };\n}\n","<sd-input\n [label]=\"label()\"\n [helperText]=\"helperText()\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n [appearance]=\"appearance() ?? undefined\"\n [form]=\"form()\"\n [name]=\"name() ?? ''\"\n [autoId]=\"autoId()\"\n [required]=\"required()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [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() === true\"\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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"}
1
+ {"version":3,"file":"sd-angular-core-forms-input-color.mjs","sources":["../../../projects/sd-angular/forms/input-color/src/input-color.component.ts","../../../projects/sd-angular/forms/input-color/src/input-color.component.html","../../../projects/sd-angular/forms/input-color/sd-angular-core-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 '@sd-angular/core/forms/input';\nimport { SdSuffixDefDirective } from '@sd-angular/core/forms/directives';\nimport { SdViewed, SdViewedInput, sdViewedTransform } from '@sd-angular/core/forms/models';\nimport { Size } from '@sdcorejs/utils/models';\n\n// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.\n// Native <input type=\"color\"> only emits #RRGGBB, so we canonicalize before\n// feeding the picker (expand 3-char, strip alpha) and let the swatch render\n// the raw model value when it's a valid hex.\nexport const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';\n\n@Component({\n selector: 'sd-input-color',\n standalone: true,\n imports: [SdInput, SdSuffixDefDirective],\n templateUrl: './input-color.component.html',\n styleUrl: './input-color.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SdInputColor {\n readonly hexPattern = SD_INPUT_COLOR_HEX_PATTERN;\n readonly #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);\n\n // ==========================================\n // Inputs (forwarded to <sd-input>)\n // ==========================================\n readonly label = input<string | undefined>();\n readonly helperText = input<string | undefined>();\n readonly placeholder = input<string>('#RRGGBB');\n readonly size = input<Size>('md');\n readonly appearance = input<MatFormFieldAppearance | undefined>(undefined);\n // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.\n // 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 /** Show the inner `<sd-input>` clear button. Default `true` (opt-out). */\n readonly clearable = input(true, { transform: booleanAttribute });\n readonly disabled = input(false, { transform: booleanAttribute });\n readonly readonly = input(false, { transform: booleanAttribute });\n /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */\n readonly viewed = input<SdViewed, SdViewedInput>(false, { transform: sdViewedTransform });\n\n // Two-way model — same alias as <sd-input>\n readonly valueModel = model<string | null | undefined>(undefined, { alias: 'model' });\n\n // ==========================================\n // Outputs\n // ==========================================\n readonly sdChange = output<string | null | undefined>();\n\n // ==========================================\n // ViewChild\n // ==========================================\n readonly picker = viewChild<ElementRef<HTMLInputElement>>('picker');\n\n // ==========================================\n // Derived state\n // ==========================================\n // why: <input type=\"color\"> only accepts #RRGGBB. Expand 3-char hex; strip\n // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker\n // always opens on something.\n readonly pickerSafeValue = computed<string>(() => {\n const v = this.valueModel();\n if (!v) return '#000000';\n if (/^#[0-9A-Fa-f]{6}$/.test(v)) return v;\n if (/^#[0-9A-Fa-f]{3}$/.test(v)) {\n const r = v[1];\n const g = v[2];\n const b = v[3];\n return `#${r}${r}${g}${g}${b}${b}`;\n }\n if (/^#[0-9A-Fa-f]{8}$/.test(v)) return v.slice(0, 7);\n return '#000000';\n });\n\n // Swatch shows the raw model value when valid; otherwise transparent so the\n // user gets visual feedback that the hex string is malformed.\n readonly swatchColor = computed<string>(() => {\n const v = this.valueModel();\n if (!v) return 'transparent';\n return this.#hexRegex.test(v) ? v : 'transparent';\n });\n\n // ==========================================\n // Handlers\n // ==========================================\n // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi\n // như \"không có màu\". Chuỗi rỗng cũng quy về null. Set model = null (không phải\n // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.\n onInputChange = (v: unknown): void => {\n const str = v == null || v === '' ? null : String(v);\n this.valueModel.set(str);\n this.sdChange.emit(str);\n };\n\n openPicker = (): void => {\n if (this.disabled() || this.readonly() || this.viewed()) return;\n this.picker()?.nativeElement.click();\n };\n\n onPickerChange = (ev: Event): void => {\n const v = (ev.target as HTMLInputElement).value;\n this.valueModel.set(v);\n this.sdChange.emit(v);\n };\n\n // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho\n // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.\n clear = (ev?: Event): void => {\n ev?.stopPropagation();\n if (this.required() || this.disabled() || this.readonly() || this.viewed()) return;\n const v = this.valueModel();\n if (v == null || v === '') return;\n this.valueModel.set(null);\n this.sdChange.emit(null);\n };\n}\n","<sd-input\n [label]=\"label()\"\n [helperText]=\"helperText()\"\n [placeholder]=\"placeholder()\"\n [size]=\"size()\"\n [appearance]=\"appearance() ?? undefined\"\n [form]=\"form()\"\n [name]=\"name() ?? ''\"\n [autoId]=\"autoId()\"\n [required]=\"required()\"\n [clearable]=\"clearable()\"\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() === true\"\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":";;;;;;AAiBA;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;;IAExD,SAAS,GAAG,KAAK,CAAC,IAAI,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;;IAExD,MAAM,GAAG,KAAK,CAA0B,KAAK,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;;IAGhF,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;wGAnGU,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,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,EC/BzB,6pDA6CA,EAAA,MAAA,EAAA,CAAA,8xCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDnBY,OAAO,8dAAE,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,6pDAAA,EAAA,MAAA,EAAA,CAAA,8xCAAA,CAAA,EAAA;;;AE7BjD;;AAEG;;;;"}
package/fesm2022/sd-angular-core-forms-input-number.mjs CHANGED
@@ -95,6 +95,8 @@ class SdInputNumber {
95
95
  placeholder = input();
96
96
  hideInlineError = input(false, { transform: booleanAttribute });
97
97
  blurOnEnter = input(false, { transform: booleanAttribute });
98
+ /** Whether to show the value-gated clear button in edit and inline modes. Default `true` (opt-out). */
99
+ clearable = input(true, { transform: booleanAttribute });
98
100
  required = input(false, { transform: booleanAttribute });
99
101
  readonly = input(false, { transform: booleanAttribute });
100
102
  disabled = input(false, { transform: booleanAttribute });
@@ -184,7 +186,7 @@ class SdInputNumber {
184
186
  const thousand = this.thousandsSeparator();
185
187
  const escDecimal = decimal === '.' ? '\\.' : decimal;
186
188
  const escThousand = thousand === '.' ? '\\.' : thousand;
187
- const integerPart = `(([0-9]+(${escThousand}[0-9])?)+)`;
189
+ const integerPart = `([0-9]+|[0-9]{1,3}(${escThousand}[0-9]{3})+)`;
188
190
  const decimalPart = this.precision() > 0 ? `(${escDecimal}[0-9]{0,${this.precision()}})?` : '';
189
191
  const baseReg = `${integerPart}${decimalPart}$`;
190
192
  if (this.type() === 'negative')
@@ -320,9 +322,9 @@ class SdInputNumber {
320
322
  this.formControl.setValue(value ?? null);
321
323
  };
322
324
  // why: method (không phải computed) để template re-eval mỗi change-detection.
323
- // Required không được clear; disabled/readonly ẩn nút.
325
+ // clearable là opt-out; required không được clear; disabled/readonly ẩn nút.
324
326
  showClear = () => {
325
- if (this.required() || this.disabled() || this.readonly())
327
+ if (!this.clearable() || this.required() || this.disabled() || this.readonly())
326
328
  return false;
327
329
  return !sdIsEmpty(this.valueModel());
328
330
  };
@@ -349,10 +351,8 @@ class SdInputNumber {
349
351
  }
350
352
  };
351
353
  onKeydown = (event) => {
352
- if (event.ctrlKey && event.key == 'v') {
353
- this.#checkValue(event, '');
354
+ if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v')
354
355
  return;
355
- }
356
356
  const key = event.keyCode || event.charCode;
357
357
  if (key == 8 || key == 46 || key == 37 || key == 39 || key == 35 || key == 36 || key == 9)
358
358
  return;
@@ -363,8 +363,56 @@ class SdInputNumber {
363
363
  this.#checkValue(event, event.key);
364
364
  };
365
365
  onPaste(event) {
366
- const nextKey = event?.clipboardData?.getData('text');
367
- this.#checkValue(event, nextKey);
366
+ event.preventDefault();
367
+ if (this.disabled() || this.readonly())
368
+ return;
369
+ const next = this.#normalizeClipboard(event.clipboardData?.getData('text') ?? '');
370
+ if (next === undefined)
371
+ return;
372
+ const target = event.target;
373
+ const start = target.selectionStart ?? target.value.length;
374
+ const end = target.selectionEnd ?? start;
375
+ const ungroup = (text) => text.split(this.thousandsSeparator()).join('');
376
+ const prefix = ungroup(target.value.slice(0, start));
377
+ const candidate = prefix + next + ungroup(target.value.slice(end));
378
+ const decimal = this.decimalSeparator();
379
+ const escapedDecimal = decimal === '.' ? '\\.' : decimal;
380
+ if (!new RegExp(`^-?[0-9]+(${escapedDecimal}[0-9]*)?$`).test(candidate))
381
+ return;
382
+ if (!Number.isFinite(this.#toNumber(candidate)))
383
+ return;
384
+ // why: cắt trên chuỗi để bỏ phần lẻ vượt precision, không phát sinh sai số làm tròn nhị phân.
385
+ const [integer, fraction = ''] = candidate.split(decimal);
386
+ const digits = fraction.slice(0, Math.max(0, this.precision()));
387
+ const value = integer + (digits ? decimal + digits : '');
388
+ if (!new RegExp(`^${this.regexPattern()}`).test(value))
389
+ return;
390
+ this.inputControl.markAsDirty();
391
+ // why: dùng cùng subscription với nhập tay để cập nhật model, sdChange và validator min/max.
392
+ this.inputControl.setValue(value);
393
+ const formatted = String(this.inputControl.value);
394
+ let remaining = Math.min(prefix.length + next.length, value.length);
395
+ let caret = 0;
396
+ while (caret < formatted.length && remaining > 0) {
397
+ if (formatted[caret] !== this.thousandsSeparator())
398
+ remaining--;
399
+ caret++;
400
+ }
401
+ target.setSelectionRange(caret, caret);
402
+ }
403
+ #normalizeClipboard(text) {
404
+ const compact = text.replace(/\s/g, '');
405
+ // why: số chỉ có một dấu phân cách có thể mơ hồ; ưu tiên format cấu hình rồi thử format còn lại.
406
+ for (const decimal of [this.decimalSeparator(), this.thousandsSeparator()]) {
407
+ const thousand = decimal === '.' ? ',' : '.';
408
+ const escDecimal = decimal === '.' ? '\\.' : decimal;
409
+ const escThousand = thousand === '.' ? '\\.' : thousand;
410
+ const pattern = new RegExp(`^-?(?:[0-9]+|[0-9]{1,3}(?:${escThousand}[0-9]{3})+)(?:${escDecimal}[0-9]+)?$`);
411
+ if (pattern.test(compact)) {
412
+ return compact.split(thousand).join('').replace(decimal, this.decimalSeparator());
413
+ }
414
+ }
415
+ return undefined;
368
416
  }
369
417
  onCompositionEnd(event) {
370
418
  const compositionValue = event.data;
@@ -381,7 +429,11 @@ class SdInputNumber {
381
429
  const current = event?.target?.value;
382
430
  const curval_arr = current.split('');
383
431
  curval_arr.splice(event.target.selectionStart, event.target.selectionEnd - event.target.selectionStart, nextKey || '');
384
- const newval = curval_arr.join('');
432
+ let newval = curval_arr.join('');
433
+ // why: dấu nhóm do control tự chèn phải được tính lại khi gõ thêm chữ số.
434
+ if (/^[0-9]$/.test(nextKey ?? '') && new RegExp(`^${this.regexPattern()}`).test(current)) {
435
+ newval = newval.split(this.thousandsSeparator()).join('');
436
+ }
385
437
  if (this.type() !== 'positive' && newval === '-')
386
438
  return;
387
439
  const regExp = new RegExp(`^${this.regexPattern()}`, 'g');
@@ -440,7 +492,7 @@ class SdInputNumber {
440
492
  }, 100);
441
493
  };
442
494
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputNumber, deps: [], target: i0.ɵɵFactoryTarget.Component });
443
- 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": "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: "pipe", type: SdFormatNumberPipe, name: "sdFormatNumber" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
495
+ 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, viewed: { classPropertyName: "viewed", publicName: "viewed", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, precision: { classPropertyName: "precision", publicName: "precision", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, validator: { classPropertyName: "validator", publicName: "validator", isSignal: true, isRequired: false, transformFunction: null }, inlineError: { classPropertyName: "inlineError", publicName: "inlineError", isSignal: true, isRequired: false, transformFunction: null }, hyperlink: { classPropertyName: "hyperlink", publicName: "hyperlink", isSignal: true, isRequired: false, transformFunction: null }, appearanceInput: { classPropertyName: "appearanceInput", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, floatLabel: { classPropertyName: "floatLabel", publicName: "floatLabel", isSignal: true, isRequired: false, transformFunction: null }, valueModel: { classPropertyName: "valueModel", publicName: "model", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueModel: "modelChange", sdChange: "sdChange", sdFocus: "sdFocus", sdBlur: "sdBlur", keyupEnter: "keyupEnter", cleared: "cleared", sdFocusForceBlur: "sdFocusForceBlur" }, host: { properties: { "class.sd-has-label": "!!label()", "class.sd-viewed": "isViewed() || isInline()" } }, queries: [{ propertyName: "sdLabelTemplate", first: true, predicate: ["sdLabel"], descendants: true, isSignal: true }, { propertyName: "sdValueTemplate", first: true, predicate: ["sdValue"], descendants: true, isSignal: true }, { propertyName: "sdViewDef", first: true, predicate: SdViewDefDirective, descendants: true, isSignal: true }, { propertyName: "sdSuffixDef", first: true, predicate: SdSuffixDefDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "control", first: true, predicate: ["control"], descendants: true, isSignal: true }, { propertyName: "inlineRef", first: true, predicate: SdInlineText, descendants: true, isSignal: true }], ngImport: i0, template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n <sd-view\n [label]=\"_label\"\n [labelTemplate]=\"sdLabelTemplate()\"\n [value]=\"formControl.value\"\n [display]=\"formControl.value | sdFormatNumber : undefined : _format\"\n [hyperlink]=\"hyperlink()\"\n [valueTemplate]=\"viewTemplate()\">\n </sd-view>\n} @else if (_isInline) {\n <sd-inline-text\n [control]=\"inputControl\"\n [placeholder]=\"placeholder() || _label || ''\"\n [clearable]=\"clearable() && !_required\"\n [autoId]=\"autoId()\"\n [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n (sdFocus)=\"onFocus()\"\n (sdBlur)=\"onBlur()\"\n (keyupEnter)=\"onKeyupEnter()\"\n (sdKeydown)=\"onKeydown($event)\"\n (sdPaste)=\"onPaste($event)\"\n (sdCompositionStart)=\"onCompositionStart($event)\"\n (sdCompositionEnd)=\"onCompositionEnd($event)\"\n (cleared)=\"cleared.emit()\">\n </sd-inline-text>\n} @else {\n @if (!_appearance) {\n <ng-content select=\"[sdLabel]\">\n @if (_label) {\n <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n }\n </ng-content>\n }\n\n <div\n class=\"d-flex align-items-center\"\n [class.c-focused]=\"isFocused\"\n [class.c-disabled]=\"formControl.disabled\"\n (click)=\"onClick()\"\n aria-hidden=\"true\">\n <mat-form-field\n [class.sd-md]=\"size() === 'md'\"\n [class.sd-sm]=\"size() === 'sm'\"\n [class.hide-inline-error]=\"_hideInlineError\"\n [appearance]=\"_appearance!\"\n [floatLabel]=\"floatLabel()\">\n @if (_appearance && _label) {\n <mat-label 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: "pipe", type: SdFormatNumberPipe, name: "sdFormatNumber" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
444
496
  }
445
497
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputNumber, decorators: [{
446
498
  type: Component,
@@ -457,7 +509,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
457
509
  SdFormatNumberPipe,
458
510
  SdView,
459
511
  SdInlineText,
460
- ], 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"] }]
512
+ ], template: "@let _label = label();\n@let _appearance = appearance();\n@let _hideInlineError = hideInlineError();\n@let _errorMessage = errorMessage();\n@let _helperText = helperText();\n@let _format = format();\n@let _required = required();\n@let _isInline = isInline();\n\n@if (isViewed()) {\n <sd-view\n [label]=\"_label\"\n [labelTemplate]=\"sdLabelTemplate()\"\n [value]=\"formControl.value\"\n [display]=\"formControl.value | sdFormatNumber : undefined : _format\"\n [hyperlink]=\"hyperlink()\"\n [valueTemplate]=\"viewTemplate()\">\n </sd-view>\n} @else if (_isInline) {\n <sd-inline-text\n [control]=\"inputControl\"\n [placeholder]=\"placeholder() || _label || ''\"\n [clearable]=\"clearable() && !_required\"\n [autoId]=\"autoId()\"\n [state]=\"formControl.invalid && formControl.touched ? 'error' : 'auto'\"\n (sdFocus)=\"onFocus()\"\n (sdBlur)=\"onBlur()\"\n (keyupEnter)=\"onKeyupEnter()\"\n (sdKeydown)=\"onKeydown($event)\"\n (sdPaste)=\"onPaste($event)\"\n (sdCompositionStart)=\"onCompositionStart($event)\"\n (sdCompositionEnd)=\"onCompositionEnd($event)\"\n (cleared)=\"cleared.emit()\">\n </sd-inline-text>\n} @else {\n @if (!_appearance) {\n <ng-content select=\"[sdLabel]\">\n @if (_label) {\n <sd-label [label]=\"_label\" [required]=\"_required\"></sd-label>\n }\n </ng-content>\n }\n\n <div\n class=\"d-flex align-items-center\"\n [class.c-focused]=\"isFocused\"\n [class.c-disabled]=\"formControl.disabled\"\n (click)=\"onClick()\"\n aria-hidden=\"true\">\n <mat-form-field\n [class.sd-md]=\"size() === 'md'\"\n [class.sd-sm]=\"size() === 'sm'\"\n [class.hide-inline-error]=\"_hideInlineError\"\n [appearance]=\"_appearance!\"\n [floatLabel]=\"floatLabel()\">\n @if (_appearance && _label) {\n <mat-label 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"] }]
461
513
  }], ctorParameters: () => [], propDecorators: { sdFocusForceBlur: [{
462
514
  type: Output
463
515
  }] } });