@sd-angular/core 19.0.0-beta.99 → 19.0.4

package/fesm2022/sd-angular-core-forms-inline-text.mjs

@@ -0,0 +1,167 @@
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { model, input, booleanAttribute, output, viewChild, signal, effect, afterNextRender, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+
+/**
+ * Borderless, content-hugging text input — the seamless primitive shared by
+ * `sd-input` / `sd-input-number` (`viewed='inline'`) and the query-bar / query-builder chips.
+ *
+ * why: a native `<input>` inside `mat-form-field` cannot hug its content, so inline-edit
+ * looked like a full-width input rather than text. This primitive renders a raw `<input>`
+ * sized via the native `size` attribute (clamped) so the click/hover target tracks the value.
+ *
+ * It is intentionally unopinionated about commit/parse/format: it forwards the raw DOM events
+ * (focus / blur / keydown / paste / composition / Enter / Escape) so each consumer keeps its own
+ * logic (e.g. sd-input-number's vi-VN formatting). Two binding modes:
+ *  - **uncontrolled** via `[(value)]` — used by the chips' signal drafts;
+ *  - **controlled** via `[control]` (an external `SdFormControl`) — used by the form controls.
+ */
+class SdInlineText {
+    /** Uncontrolled value (two-way). Ignored when `[control]` is provided. */
+    value = model('');
+    /** Optional external FormControl (controlled mode) — used by sd-input / sd-input-number. */
+    control = input(undefined);
+    placeholder = input('');
+    disabled = input(false, { transform: booleanAttribute });
+    /** Show a hover/value-gated clear-× (default `true`). */
+    clearable = input(true, { transform: booleanAttribute });
+    /** `'auto'` derives state from focus + value; pass an explicit value (e.g. `'error'`) to override. */
+    state = input('auto');
+    chrome = input('standalone');
+    autoId = input(undefined);
+    autofocus = input(false, { transform: booleanAttribute });
+    /** Lower bound (chars) so short/empty values keep a clickable target. */
+    minSize = input(2);
+    cleared = output();
+    keyupEnter = output();
+    keydownEscape = output();
+    sdFocus = output();
+    sdBlur = output();
+    sdKeydown = output();
+    sdPaste = output();
+    sdCompositionStart = output();
+    sdCompositionEnd = output();
+    inputRef = viewChild('inputEl');
+    /** Bumped on input/blur/composition + bound-control changes so size/state methods re-eval under OnPush. */
+    tick = signal(0);
+    focused = signal(false);
+    constructor() {
+        // why: a bound control's value can change programmatically (sd-input-number reformats
+        // on blur) without a DOM input event — subscribe so the size/state still refresh.
+        effect(onCleanup => {
+            const c = this.control();
+            if (!c)
+                return;
+            const sub = c.valueChanges.subscribe(() => this.tick.update(n => n + 1));
+            onCleanup(() => sub.unsubscribe());
+        });
+        afterNextRender(() => {
+            if (this.autofocus())
+                this.focus();
+        });
+    }
+    /**
+     * Current text — from the bound control in controlled mode, else the value model.
+     * why: `tick` is a tracked dependency so the computed re-runs when a bound control's
+     * value changes programmatically (control.value itself is not a signal).
+     */
+    currentText = computed(() => {
+        this.tick();
+        const c = this.control();
+        const raw = c ? c.value : this.value();
+        return raw == null ? '' : String(raw);
+    });
+    hasValue = computed(() => this.currentText().length > 0);
+    sizeOf = computed(() => {
+        const text = this.currentText();
+        const base = text.length > 0 ? text.length : this.placeholder().length;
+        return Math.max(this.minSize(), base);
+    });
+    showClear = computed(() => this.clearable() && this.hasValue() && !this.disabled());
+    effectiveState = computed(() => {
+        const s = this.state();
+        if (s !== 'auto')
+            return s;
+        if (this.focused())
+            return 'focus';
+        return this.hasValue() ? 'active' : 'pending';
+    });
+    // ── event handlers ─────────────────────────────────────────────────────────
+    onInput(ev) {
+        const el = ev.target;
+        // why: only the uncontrolled mode owns the value model; in controlled mode the bound
+        // FormControl carries the value natively (ReactiveForms), so we must not double-write.
+        if (!this.control())
+            this.value.set(el.value);
+        this.tick.update(n => n + 1);
+    }
+    onFocus(ev) {
+        this.focused.set(true);
+        this.sdFocus.emit(ev);
+    }
+    onBlur(ev) {
+        this.focused.set(false);
+        this.tick.update(n => n + 1);
+        this.sdBlur.emit(ev);
+    }
+    onKeyup(ev) {
+        if (ev.key === 'Enter')
+            this.keyupEnter.emit();
+    }
+    onKeydown(ev) {
+        if (ev.key === 'Escape')
+            this.keydownEscape.emit();
+        this.sdKeydown.emit(ev);
+    }
+    onPaste(ev) {
+        this.sdPaste.emit(ev);
+    }
+    onCompositionStart(ev) {
+        this.sdCompositionStart.emit(ev);
+    }
+    onCompositionEnd(ev) {
+        this.tick.update(n => n + 1);
+        this.sdCompositionEnd.emit(ev);
+    }
+    clear(ev) {
+        ev.stopPropagation();
+        const c = this.control();
+        if (c)
+            c.setValue('');
+        else
+            this.value.set('');
+        this.tick.update(n => n + 1);
+        this.cleared.emit();
+    }
+    // ── public API ───────────────────────────────────────────────────────────
+    /** Focus the native input. */
+    focus() {
+        this.inputRef()?.nativeElement.focus();
+    }
+    /** Blur the native input. */
+    blur() {
+        this.inputRef()?.nativeElement.blur();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInlineText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SdInlineText, isStandalone: true, selector: "sd-inline-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, chrome: { classPropertyName: "chrome", publicName: "chrome", isSignal: true, isRequired: false, transformFunction: null }, autoId: { classPropertyName: "autoId", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, minSize: { classPropertyName: "minSize", publicName: "minSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", cleared: "cleared", keyupEnter: "keyupEnter", keydownEscape: "keydownEscape", sdFocus: "sdFocus", sdBlur: "sdBlur", sdKeydown: "sdKeydown", sdPaste: "sdPaste", sdCompositionStart: "sdCompositionStart", sdCompositionEnd: "sdCompositionEnd" }, host: { properties: { "class.sd-inline-text--standalone": "chrome() === 'standalone'", "class.sd-inline-text--seamless": "chrome() === 'seamless'", "attr.data-state": "effectiveState()" }, classAttribute: "sd-inline-text" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "@let _autoId = autoId();\r\n@let _placeholder = placeholder();\r\n@let _size = sizeOf();\r\n@let _control = control();\r\n\r\n@if (_control) {\r\n  <input\r\n    #inputEl\r\n    class=\"sd-inline-text__input\"\r\n    type=\"text\"\r\n    [formControl]=\"_control\"\r\n    [placeholder]=\"_placeholder\"\r\n    [size]=\"_size\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    (input)=\"onInput($event)\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (keyup)=\"onKeyup($event)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (paste)=\"onPaste($event)\"\r\n    (compositionstart)=\"onCompositionStart($event)\"\r\n    (compositionend)=\"onCompositionEnd($event)\" />\r\n} @else {\r\n  <input\r\n    #inputEl\r\n    class=\"sd-inline-text__input\"\r\n    type=\"text\"\r\n    [value]=\"currentText()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"_placeholder\"\r\n    [size]=\"_size\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    (input)=\"onInput($event)\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (keyup)=\"onKeyup($event)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (paste)=\"onPaste($event)\"\r\n    (compositionstart)=\"onCompositionStart($event)\"\r\n    (compositionend)=\"onCompositionEnd($event)\" />\r\n}\r\n\r\n@if (showClear()) {\r\n  <button type=\"button\" class=\"sd-inline-text__clear\" (click)=\"clear($event)\" aria-label=\"Clear\" tabindex=\"-1\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;max-width:100%;font:inherit;color:inherit}.sd-inline-text__input{appearance:none;border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:0;min-width:0;max-width:240px}:host(.sd-inline-text--standalone){border-radius:4px;padding:1px 6px;background-color:#0000000a;transition:background-color .15s ease,box-shadow .15s ease}:host(.sd-inline-text--standalone):hover{background-color:#00000014}:host(.sd-inline-text--standalone)[data-state=focus]{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}:host(.sd-inline-text--standalone)[data-state=error]{box-shadow:inset 0 0 0 1px var(--sd-error, #b32626)}:host(.sd-inline-text--standalone) .sd-inline-text__clear{display:none}:host(.sd-inline-text--standalone):hover .sd-inline-text__clear,:host(.sd-inline-text--standalone)[data-state=focus] .sd-inline-text__clear{display:inline-flex}:host(.sd-inline-text--seamless) .sd-inline-text__input{font-weight:500}:host(.sd-inline-text--seamless) .sd-inline-text__input::placeholder{font-style:italic}:host(.sd-inline-text--seamless)[data-state=active] .sd-inline-text__input{color:var(--sd-primary, #1f6feb)}:host(.sd-inline-text--seamless)[data-state=error] .sd-inline-text__input{color:var(--sd-error, #b32626)}.sd-inline-text__clear{display:inline-flex;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-text__clear mat-icon{font-size:16px;width:16px;height:16px}.sd-inline-text__clear:hover{color:var(--sd-error, #b32626)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInlineText, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-inline-text', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, ReactiveFormsModule, MatIconModule], host: {
+                        class: 'sd-inline-text',
+                        '[class.sd-inline-text--standalone]': "chrome() === 'standalone'",
+                        '[class.sd-inline-text--seamless]': "chrome() === 'seamless'",
+                        '[attr.data-state]': 'effectiveState()',
+                    }, template: "@let _autoId = autoId();\r\n@let _placeholder = placeholder();\r\n@let _size = sizeOf();\r\n@let _control = control();\r\n\r\n@if (_control) {\r\n  <input\r\n    #inputEl\r\n    class=\"sd-inline-text__input\"\r\n    type=\"text\"\r\n    [formControl]=\"_control\"\r\n    [placeholder]=\"_placeholder\"\r\n    [size]=\"_size\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    (input)=\"onInput($event)\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (keyup)=\"onKeyup($event)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (paste)=\"onPaste($event)\"\r\n    (compositionstart)=\"onCompositionStart($event)\"\r\n    (compositionend)=\"onCompositionEnd($event)\" />\r\n} @else {\r\n  <input\r\n    #inputEl\r\n    class=\"sd-inline-text__input\"\r\n    type=\"text\"\r\n    [value]=\"currentText()\"\r\n    [disabled]=\"disabled()\"\r\n    [placeholder]=\"_placeholder\"\r\n    [size]=\"_size\"\r\n    [attr.data-autoId]=\"_autoId\"\r\n    (input)=\"onInput($event)\"\r\n    (focus)=\"onFocus($event)\"\r\n    (blur)=\"onBlur($event)\"\r\n    (keyup)=\"onKeyup($event)\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (paste)=\"onPaste($event)\"\r\n    (compositionstart)=\"onCompositionStart($event)\"\r\n    (compositionend)=\"onCompositionEnd($event)\" />\r\n}\r\n\r\n@if (showClear()) {\r\n  <button type=\"button\" class=\"sd-inline-text__clear\" (click)=\"clear($event)\" aria-label=\"Clear\" tabindex=\"-1\">\r\n    <mat-icon>close</mat-icon>\r\n  </button>\r\n}\r\n", styles: [":host{display:inline-flex;align-items:center;max-width:100%;font:inherit;color:inherit}.sd-inline-text__input{appearance:none;border:0;outline:0;background:transparent;font:inherit;color:inherit;padding:0;min-width:0;max-width:240px}:host(.sd-inline-text--standalone){border-radius:4px;padding:1px 6px;background-color:#0000000a;transition:background-color .15s ease,box-shadow .15s ease}:host(.sd-inline-text--standalone):hover{background-color:#00000014}:host(.sd-inline-text--standalone)[data-state=focus]{background-color:#0000000f;box-shadow:inset 0 0 0 1px var(--sd-primary, #1f6feb)}:host(.sd-inline-text--standalone)[data-state=error]{box-shadow:inset 0 0 0 1px var(--sd-error, #b32626)}:host(.sd-inline-text--standalone) .sd-inline-text__clear{display:none}:host(.sd-inline-text--standalone):hover .sd-inline-text__clear,:host(.sd-inline-text--standalone)[data-state=focus] .sd-inline-text__clear{display:inline-flex}:host(.sd-inline-text--seamless) .sd-inline-text__input{font-weight:500}:host(.sd-inline-text--seamless) .sd-inline-text__input::placeholder{font-style:italic}:host(.sd-inline-text--seamless)[data-state=active] .sd-inline-text__input{color:var(--sd-primary, #1f6feb)}:host(.sd-inline-text--seamless)[data-state=error] .sd-inline-text__input{color:var(--sd-error, #b32626)}.sd-inline-text__clear{display:inline-flex;align-items:center;margin-left:4px;padding:0;border:0;background:transparent;cursor:pointer;line-height:0;color:var(--sd-text-secondary, #6b7280);transition:color .15s ease}.sd-inline-text__clear mat-icon{font-size:16px;width:16px;height:16px}.sd-inline-text__clear:hover{color:var(--sd-error, #b32626)}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SdInlineText };
+//# sourceMappingURL=sd-angular-core-forms-inline-text.mjs.map

package/fesm2022/sd-angular-core-forms-inline-text.mjs.map

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

package/fesm2022/sd-angular-core-forms-input-color.mjs

@@ -0,0 +1,119 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, model, output, viewChild, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { SdInput } from '@sd-angular/core/forms/input';
+import { SdSuffixDefDirective } from '@sd-angular/core/forms/directives';
+import { sdViewedTransform } from '@sd-angular/core/forms/models';
+
+// why: matches #RGB, #RRGGBB, #RRGGBBAA. Capital + lowercase hex allowed.
+// Native <input type="color"> only emits #RRGGBB, so we canonicalize before
+// feeding the picker (expand 3-char, strip alpha) and let the swatch render
+// the raw model value when it's a valid hex.
+const SD_INPUT_COLOR_HEX_PATTERN = '^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$';
+class SdInputColor {
+    hexPattern = SD_INPUT_COLOR_HEX_PATTERN;
+    #hexRegex = new RegExp(SD_INPUT_COLOR_HEX_PATTERN);
+    // ==========================================
+    // Inputs (forwarded to <sd-input>)
+    // ==========================================
+    label = input();
+    helperText = input();
+    placeholder = input('#RRGGBB');
+    size = input('md');
+    appearance = input(undefined);
+    // why: type as `any` — the inner <sd-input> applies the FormGroup|NgForm transform.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    form = input(undefined);
+    name = input();
+    autoId = input();
+    required = input(false, { transform: booleanAttribute });
+    disabled = input(false, { transform: booleanAttribute });
+    readonly = input(false, { transform: booleanAttribute });
+    /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */
+    viewed = input(false, { transform: sdViewedTransform });
+    // Two-way model — same alias as <sd-input>
+    valueModel = model(undefined, { alias: 'model' });
+    // ==========================================
+    // Outputs
+    // ==========================================
+    sdChange = output();
+    // ==========================================
+    // ViewChild
+    // ==========================================
+    picker = viewChild('picker');
+    // ==========================================
+    // Derived state
+    // ==========================================
+    // why: <input type="color"> only accepts #RRGGBB. Expand 3-char hex; strip
+    // alpha from 8-char. Fallback to #000000 for empty/invalid so the OS picker
+    // always opens on something.
+    pickerSafeValue = computed(() => {
+        const v = this.valueModel();
+        if (!v)
+            return '#000000';
+        if (/^#[0-9A-Fa-f]{6}$/.test(v))
+            return v;
+        if (/^#[0-9A-Fa-f]{3}$/.test(v)) {
+            const r = v[1];
+            const g = v[2];
+            const b = v[3];
+            return `#${r}${r}${g}${g}${b}${b}`;
+        }
+        if (/^#[0-9A-Fa-f]{8}$/.test(v))
+            return v.slice(0, 7);
+        return '#000000';
+    });
+    // Swatch shows the raw model value when valid; otherwise transparent so the
+    // user gets visual feedback that the hex string is malformed.
+    swatchColor = computed(() => {
+        const v = this.valueModel();
+        if (!v)
+            return 'transparent';
+        return this.#hexRegex.test(v) ? v : 'transparent';
+    });
+    // ==========================================
+    // Handlers
+    // ==========================================
+    // why: <sd-input> built-in clear bắn null khi clear (thao tác chủ động) → coi
+    // như "không có màu". Chuỗi rỗng cũng quy về null. Set model = null (không phải
+    // undefined): undefined chỉ dành cho trạng thái pristine chưa từng thao tác.
+    onInputChange = (v) => {
+        const str = v == null || v === '' ? null : String(v);
+        this.valueModel.set(str);
+        this.sdChange.emit(str);
+    };
+    openPicker = () => {
+        if (this.disabled() || this.readonly() || this.viewed())
+            return;
+        this.picker()?.nativeElement.click();
+    };
+    onPickerChange = (ev) => {
+        const v = ev.target.value;
+        this.valueModel.set(v);
+        this.sdChange.emit(v);
+    };
+    // why: nút clear hiển thị giờ do <sd-input> render. Giữ method public này cho
+    // consumer gọi tay (programmatic). No-op khi không sửa được hoặc đã rỗng.
+    clear = (ev) => {
+        ev?.stopPropagation();
+        if (this.required() || this.disabled() || this.readonly() || this.viewed())
+            return;
+        const v = this.valueModel();
+        if (v == null || v === '')
+            return;
+        this.valueModel.set(null);
+        this.sdChange.emit(null);
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputColor, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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\r\n  [label]=\"label()\"\r\n  [helperText]=\"helperText()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [size]=\"size()\"\r\n  [appearance]=\"appearance() ?? undefined\"\r\n  [form]=\"form()\"\r\n  [name]=\"name() ?? ''\"\r\n  [autoId]=\"autoId()\"\r\n  [required]=\"required()\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  [viewed]=\"viewed()\"\r\n  [pattern]=\"hexPattern\"\r\n  patternErrorMessage=\"M\u00E3 m\u00E0u HEX kh\u00F4ng h\u1EE3p l\u1EC7 (vd #1565C0)\"\r\n  [model]=\"valueModel()\"\r\n  (sdChange)=\"onInputChange($event)\">\r\n\r\n  <ng-template sdSuffixDef>\r\n    <div class=\"sd-input-color__suffix\">\r\n      <!-- why: n\u00FAt clear do <sd-input> t\u1EF1 render (built-in, hover-gated). \u1EDE \u0111\u00E2y\r\n           ch\u1EC9 chi\u1EBFu swatch + native picker. onInputChange coerce '' \u2192 null n\u00EAn\r\n           clear c\u1EE7a sd-input v\u1EABn cho ra model r\u1ED7ng \u0111\u00FAng ngh\u0129a. -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"sd-input-color__swatch\"\r\n        [style.background]=\"swatchColor()\"\r\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\r\n        [disabled]=\"disabled() || readonly() || viewed() === true\"\r\n        (click)=\"openPicker()\"\r\n        title=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\"\r\n        aria-label=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\">\r\n      </button>\r\n      <input\r\n        #picker\r\n        type=\"color\"\r\n        class=\"sd-input-color__hidden-picker\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"pickerSafeValue()\"\r\n        (input)=\"onPickerChange($event)\" />\r\n    </div>\r\n  </ng-template>\r\n</sd-input>\r\n", styles: [":host{display:block;--sd-input-color-swatch-size: 22px;--sd-input-color-swatch-border: rgba(0, 0, 0, .12);--sd-input-color-swatch-checker: linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%)}.sd-input-color__suffix{position:relative;display:inline-flex;align-items:center;gap:4px}.sd-input-color__swatch{width:var(--sd-input-color-swatch-size);height:var(--sd-input-color-swatch-size);border-radius:4px;border:1px solid var(--sd-input-color-swatch-border);padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:transparent;transition:transform 80ms ease,box-shadow 80ms ease;position:relative;overflow:hidden}.sd-input-color__swatch:hover:not(:disabled){transform:scale(1.06);box-shadow:0 0 0 2px #1565c02e}.sd-input-color__swatch:disabled{cursor:not-allowed;opacity:.5}.sd-input-color__swatch.sd-input-color__swatch--empty{background-color:#fff;background-image:var(--sd-input-color-swatch-checker);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}.sd-input-color__hidden-picker{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none;right:0;top:50%}\n"], dependencies: [{ kind: "component", type: SdInput, selector: "sd-input", inputs: ["autoId", "name", "appearance", "floatLabel", "size", "form", "label", "helperText", "placeholder", "type", "hideInlineError", "blurOnEnter", "required", "readonly", "disabled", "viewed", "minlength", "maxlength", "pattern", "patternErrorMessage", "validator", "inlineError", "hyperlink", "model"], outputs: ["modelChange", "sdChange", "sdFocus", "sdBlur", "keyupEnter", "cleared", "sdFocusForceBlur"] }, { kind: "directive", type: SdSuffixDefDirective, selector: "[sdSuffixDef]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SdInputColor, decorators: [{
+            type: Component,
+            args: [{ selector: 'sd-input-color', standalone: true, imports: [SdInput, SdSuffixDefDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<sd-input\r\n  [label]=\"label()\"\r\n  [helperText]=\"helperText()\"\r\n  [placeholder]=\"placeholder()\"\r\n  [size]=\"size()\"\r\n  [appearance]=\"appearance() ?? undefined\"\r\n  [form]=\"form()\"\r\n  [name]=\"name() ?? ''\"\r\n  [autoId]=\"autoId()\"\r\n  [required]=\"required()\"\r\n  [disabled]=\"disabled()\"\r\n  [readonly]=\"readonly()\"\r\n  [viewed]=\"viewed()\"\r\n  [pattern]=\"hexPattern\"\r\n  patternErrorMessage=\"M\u00E3 m\u00E0u HEX kh\u00F4ng h\u1EE3p l\u1EC7 (vd #1565C0)\"\r\n  [model]=\"valueModel()\"\r\n  (sdChange)=\"onInputChange($event)\">\r\n\r\n  <ng-template sdSuffixDef>\r\n    <div class=\"sd-input-color__suffix\">\r\n      <!-- why: n\u00FAt clear do <sd-input> t\u1EF1 render (built-in, hover-gated). \u1EDE \u0111\u00E2y\r\n           ch\u1EC9 chi\u1EBFu swatch + native picker. onInputChange coerce '' \u2192 null n\u00EAn\r\n           clear c\u1EE7a sd-input v\u1EABn cho ra model r\u1ED7ng \u0111\u00FAng ngh\u0129a. -->\r\n      <button\r\n        type=\"button\"\r\n        class=\"sd-input-color__swatch\"\r\n        [style.background]=\"swatchColor()\"\r\n        [class.sd-input-color__swatch--empty]=\"swatchColor() === 'transparent'\"\r\n        [disabled]=\"disabled() || readonly() || viewed() === true\"\r\n        (click)=\"openPicker()\"\r\n        title=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\"\r\n        aria-label=\"M\u1EDF b\u1EA3ng ch\u1ECDn m\u00E0u\">\r\n      </button>\r\n      <input\r\n        #picker\r\n        type=\"color\"\r\n        class=\"sd-input-color__hidden-picker\"\r\n        tabindex=\"-1\"\r\n        aria-hidden=\"true\"\r\n        [value]=\"pickerSafeValue()\"\r\n        (input)=\"onPickerChange($event)\" />\r\n    </div>\r\n  </ng-template>\r\n</sd-input>\r\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"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SD_INPUT_COLOR_HEX_PATTERN, SdInputColor };
+//# sourceMappingURL=sd-angular-core-forms-input-color.mjs.map

package/fesm2022/sd-angular-core-forms-input-color.mjs.map

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