@sdcorejs/angular 19.0.1 → 19.0.4

package/forms/date-range/src/date-range.component.d.ts

@@ -3,6 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatDatepickerInputEvent, MatDateRangePicker } from '@angular/material/datepicker';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdLabelDefDirective } from '@sdcorejs/angular/forms/directives';
+import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 interface Daterange {
@@ -37,10 +38,16 @@ export declare class SdDateRange implements OnDestroy, OnInit {
     readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    /** Bare mode — strip the form-field shell to fit inline in a chip / token. */
-    bare: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    /** Viewed mode — render a read-only <sd-view> instead of the editable form-field. */
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (range picker). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: import("@angular/core").Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    /** Open the range picker from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     /** Optional <ng-template #sdValue> projected by consumer to override the viewed text. */
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<unknown> | undefined>;
     /**
@@ -76,6 +83,6 @@ export declare class SdDateRange implements OnDestroy, OnInit {
     onClosePicker: () => void;
     onOpenPicker: (event: MouseEvent) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDateRange, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; }, ["sdLabelDef", "sdValueTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDateRange, "sd-date-range", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; }, ["sdLabelDef", "sdValueTemplate"], never, true, never>;
 }
 export {};

package/forms/datetime/src/datetime.component.d.ts

@@ -2,7 +2,7 @@ import { ElementRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdDatetime implements OnDestroy, OnInit {
@@ -34,11 +34,20 @@ export declare class SdDatetime implements OnDestroy, OnInit {
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (datetime overlay). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
     /** Hiển thị thêm cột giây trong picker. Mặc định: chỉ HH:MM. */
     showSeconds: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
-    bare: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** In `viewed='inline'`, show a hover clear-× on the text face. Set `false` when the host owns removal (chips). */
+    clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: import("@angular/core").Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    /** Open the datetime overlay from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` (unified). */
+    readonly viewTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     inlineError: import("@angular/core").InputSignal<string | undefined>;
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
@@ -85,5 +94,5 @@ export declare class SdDatetime implements OnDestroy, OnInit {
     onConfirmInput: (event: any) => void;
     clear: ($event: any) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDatetime, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDatetime, "sd-datetime", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "minInput": { "alias": "min"; "required": false; "isSignal": true; }; "minDateInput": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxInput": { "alias": "max"; "required": false; "isSignal": true; }; "maxDateInput": { "alias": "maxDate"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdFocus": "sdFocus"; }, ["sdLabelTemplate", "sdValueTemplate", "sdViewDef"], ["[sdLabel]"], true, never>;
 }

package/forms/inline-text/index.d.ts

@@ -0,0 +1 @@
+export * from './src/inline-text.component';

package/forms/inline-text/src/inline-text.component.d.ts

@@ -0,0 +1,76 @@
+import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import * as i0 from "@angular/core";
+/** Visual / `data-state` of the inline input. `'auto'` derives from focus + value. */
+export type SdInlineTextState = 'auto' | 'pending' | 'active' | 'focus' | 'error';
+/** `'standalone'` draws its own affordance (hover bg + focus ring); `'seamless'` defers all chrome to the host. */
+export type SdInlineTextChrome = 'standalone' | 'seamless';
+/**
+ * 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.
+ */
+export declare class SdInlineText {
+    /** Uncontrolled value (two-way). Ignored when `[control]` is provided. */
+    readonly value: import("@angular/core").ModelSignal<string>;
+    /** Optional external FormControl (controlled mode) — used by sd-input / sd-input-number. */
+    readonly control: import("@angular/core").InputSignal<SdFormControl | undefined>;
+    readonly placeholder: import("@angular/core").InputSignal<string>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show a hover/value-gated clear-× (default `true`). */
+    readonly clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `'auto'` derives state from focus + value; pass an explicit value (e.g. `'error'`) to override. */
+    readonly state: import("@angular/core").InputSignal<SdInlineTextState>;
+    readonly chrome: import("@angular/core").InputSignal<SdInlineTextChrome>;
+    readonly autoId: import("@angular/core").InputSignal<string | undefined>;
+    readonly autofocus: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Lower bound (chars) so short/empty values keep a clickable target. */
+    readonly minSize: import("@angular/core").InputSignal<number>;
+    readonly cleared: import("@angular/core").OutputEmitterRef<void>;
+    readonly keyupEnter: import("@angular/core").OutputEmitterRef<void>;
+    readonly keydownEscape: import("@angular/core").OutputEmitterRef<void>;
+    readonly sdFocus: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    readonly sdBlur: import("@angular/core").OutputEmitterRef<FocusEvent>;
+    readonly sdKeydown: import("@angular/core").OutputEmitterRef<KeyboardEvent>;
+    readonly sdPaste: import("@angular/core").OutputEmitterRef<ClipboardEvent>;
+    readonly sdCompositionStart: import("@angular/core").OutputEmitterRef<CompositionEvent>;
+    readonly sdCompositionEnd: import("@angular/core").OutputEmitterRef<CompositionEvent>;
+    private readonly inputRef;
+    /** Bumped on input/blur/composition + bound-control changes so size/state methods re-eval under OnPush. */
+    protected readonly tick: import("@angular/core").WritableSignal<number>;
+    protected readonly focused: import("@angular/core").WritableSignal<boolean>;
+    constructor();
+    /**
+     * 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).
+     */
+    protected readonly currentText: import("@angular/core").Signal<string>;
+    protected readonly hasValue: import("@angular/core").Signal<boolean>;
+    protected readonly sizeOf: import("@angular/core").Signal<number>;
+    protected readonly showClear: import("@angular/core").Signal<boolean>;
+    protected readonly effectiveState: import("@angular/core").Signal<SdInlineTextState>;
+    protected onInput(ev: Event): void;
+    protected onFocus(ev: FocusEvent): void;
+    protected onBlur(ev: FocusEvent): void;
+    protected onKeyup(ev: KeyboardEvent): void;
+    protected onKeydown(ev: KeyboardEvent): void;
+    protected onPaste(ev: ClipboardEvent): void;
+    protected onCompositionStart(ev: CompositionEvent): void;
+    protected onCompositionEnd(ev: CompositionEvent): void;
+    protected clear(ev: Event): void;
+    /** Focus the native input. */
+    focus(): void;
+    /** Blur the native input. */
+    blur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdInlineText, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdInlineText, "sd-inline-text", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "chrome": { "alias": "chrome"; "required": false; "isSignal": true; }; "autoId": { "alias": "autoId"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "cleared": "cleared"; "keyupEnter": "keyupEnter"; "keydownEscape": "keydownEscape"; "sdFocus": "sdFocus"; "sdBlur": "sdBlur"; "sdKeydown": "sdKeydown"; "sdPaste": "sdPaste"; "sdCompositionStart": "sdCompositionStart"; "sdCompositionEnd": "sdCompositionEnd"; }, never, never, true, never>;
+}

package/forms/input/src/input.component.d.ts

@@ -1,14 +1,17 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
+import { SdInlineText } from '@sdcorejs/angular/forms/inline-text';
 import { SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdCustomValidator, SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdInput implements OnDestroy, OnInit, AfterViewInit {
     #private;
     id: string;
     control: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** The inline primitive — only present when `viewed='inline'`; drives focus/blur in that mode. */
+    inlineRef: import("@angular/core").Signal<SdInlineText | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdSuffixDef: import("@angular/core").Signal<SdSuffixDefDirective | undefined>;
@@ -39,7 +42,16 @@ export declare class SdInput implements OnDestroy, OnInit, AfterViewInit {
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (no panel — the input IS the face). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: import("@angular/core").Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no input). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    /** Focus the inline input. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` for the static view (unified). */
+    readonly viewTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     minlength: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     maxlength: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
     pattern: import("@angular/core").InputSignal<string | null | undefined>;

package/forms/input-color/src/input-color.component.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
+import { SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare const SD_INPUT_COLOR_HEX_PATTERN = "^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$";
@@ -17,7 +18,8 @@ export declare class SdInputColor {
     readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode — forwarded to the inner `<sd-input>`. `'inline'` = borderless inline-edit; disabled `'inline'` → static. */
+    readonly viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
     readonly valueModel: import("@angular/core").ModelSignal<string | null | undefined>;
     readonly sdChange: import("@angular/core").OutputEmitterRef<string | null | undefined>;
     readonly picker: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;

package/forms/input-number/src/input-number.component.d.ts

@@ -2,8 +2,9 @@ import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef
 import { FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
+import { SdInlineText } from '@sdcorejs/angular/forms/inline-text';
 import { SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdCustomValidator, SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 declare class SdInputNumberErrotStateMatcher implements ErrorStateMatcher {
@@ -15,6 +16,8 @@ export declare class SdInputNumber implements OnDestroy, OnInit, AfterViewInit {
     #private;
     id: string;
     control: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** The inline primitive — only present when `viewed='inline'`; drives focus/blur in that mode. */
+    inlineRef: import("@angular/core").Signal<SdInlineText | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
@@ -42,7 +45,16 @@ export declare class SdInputNumber implements OnDestroy, OnInit, AfterViewInit {
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (input IS the face). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: import("@angular/core").Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no input). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    /** Focus the inline input. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
+    /** View display template: `sdViewDef` overrides the projected `#sdValue` for the static view (unified). */
+    readonly viewTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     type: import("@angular/core").InputSignal<"negative" | "positive" | undefined>;
     precision: import("@angular/core").InputSignal<number>;
     format: import("@angular/core").InputSignal<"1,234,567.89" | "1.234.567,89" | undefined>;

package/forms/models/index.d.ts

@@ -4,3 +4,4 @@ export * from './src/sd-custom-validator.model';
 export * from './src/sd-selection-data.model';
 export * from './src/sd-search.model';
 export * from './src/form-control-state';
+export * from './src/sd-viewed';

package/forms/models/src/sd-viewed.d.ts

@@ -0,0 +1,38 @@
+import { Signal } from '@angular/core';
+/**
+ * Three display states shared by sd-form-controls:
+ * - `false`  → full edit chrome (input / dropdown).
+ * - `true`   → static read-only view (`<sd-view>` text), no editor.
+ * - `'inline'` → the editor is STILL rendered (so its panel works), but its chrome is
+ *   hidden; the `<sd-view>` text is the visible face / trigger. Click the text to open
+ *   the picker's panel. The text is retained while the panel is open — it only changes
+ *   when a new value is committed (JIRA-style click-to-edit).
+ */
+export type SdViewed = boolean | 'inline';
+export type SdViewedInput = SdViewed | '' | null | undefined;
+/**
+ * `viewed` input transform. Keeps `booleanAttribute` coercion so a bare attribute
+ * (`<sd-select viewed>`) still resolves to `true`, but intercepts the literal
+ * `'inline'` first — `booleanAttribute('inline')` would otherwise coerce it to `true`.
+ */
+export declare function sdViewedTransform(v: SdViewedInput): SdViewed;
+export interface SdViewedInlineApi {
+    /** `viewed() === 'inline'` — editor rendered but chrome hidden; sd-view text is the trigger face. */
+    readonly isInline: Signal<boolean>;
+    /** `viewed() === true` — static read-only view (no editor rendered). */
+    readonly isViewed: Signal<boolean>;
+    /** Open the picker from the inline text face. No-op unless `'inline'`. */
+    enterInlineEdit(): void;
+}
+/**
+ * Compose the tri-state `viewed` semantics into a control. `open` opens the control's
+ * native picker (mat-select panel / mat-calendar / overlay). In `'inline'` mode the editor
+ * is always rendered (chrome hidden via CSS), so `open()` can fire immediately on click —
+ * no render-swap, the view text never disappears.
+ *
+ * @param viewed   the control's `viewed` input signal.
+ * @param open     opens the control's picker; called by `enterInlineEdit`.
+ * @param disabled the control's disabled state. why: a disabled `'inline'` field must behave
+ *   like `viewed=true` (static, NOT click-to-edit) — you can't edit a disabled control.
+ */
+export declare function sdViewedInline(viewed: Signal<SdViewed>, open?: () => void, disabled?: Signal<boolean>): SdViewedInlineApi;

package/forms/radio/src/radio.component.d.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { SdLabelDefDirective, SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
@@ -20,7 +20,10 @@ export declare class SdRadio implements OnInit, AfterViewInit, OnDestroy {
     readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly inlineError: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    readonly viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static read-only view should render. */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
     readonly color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
     readonly hyperlink: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly model: import("@angular/core").ModelSignal<string | number | boolean | null | undefined>;

package/forms/select/src/select.component.d.ts

@@ -5,7 +5,7 @@ import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-f
 import { MatInput } from '@angular/material/input';
 import { MatSelect, MatSelectChange } from '@angular/material/select';
 import { SdItemDefDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdFormControl, SdSearch, SdSelectionData } from '@sdcorejs/angular/forms/models';
+import { SdCustomValidator, SdFormControl, SdSearch, SdSelectionData, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdSelect<T extends object | string | number = Record<string, unknown>> implements OnInit {
@@ -17,6 +17,13 @@ export declare class SdSelect<T extends object | string | number = Record<string
     sdValueTemplate: Signal<TemplateRef<any> | undefined>;
     itemDef: Signal<SdItemDefDefDirective<any> | undefined>;
     sdViewDef: Signal<SdViewDefDirective<any, any> | undefined>;
+    /**
+     * View display template. `sdViewDef` is now just a custom override of the view rendering —
+     * it replaces the projected `#sdValue` template when present (fed into `<sd-view>`'s
+     * `valueTemplate`), so there is ONE rendering path. No more `.sd-view` class / focus-swap;
+     * click-to-edit is governed by `viewed='inline'`.
+     */
+    readonly viewTemplate: Signal<TemplateRef<any> | undefined>;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
     autoId: Signal<string | undefined>;
     readonly dataDisabled: Signal<"true" | "false">;
@@ -42,10 +49,21 @@ export declare class SdSelect<T extends object | string | number = Record<string
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` view + click-to-edit (bare editor). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
     multiple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    /** Flatten the field chrome to a chip-friendly trigger (value + caret only). */
-    bare: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the `viewed='inline'` text face shows a hover clear-× to empty the value.
+     * Default `true`. Set `false` where the HOST owns removal (e.g. `<sd-query-bar>` chips,
+     * whose own `×` removes the whole filter) so the chip isn't cluttered with two ×.
+     */
+    clearable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'` — editor mounted but chrome hidden; sd-view text is the trigger face. */
+    readonly isInline: Signal<boolean>;
+    /** `true` when `viewed === true` — static read-only view, no editor mounted. */
+    readonly isViewed: Signal<boolean>;
+    /** Open the picker from the inline text face. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     validator: import("@angular/core").InputSignal<SdCustomValidator | undefined>;
     inlineError: import("@angular/core").InputSignal<string | undefined>;
     /**
@@ -89,5 +107,5 @@ export declare class SdSelect<T extends object | string | number = Record<string
     open: () => void;
     onOpenedChange: (isOpened: boolean) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSelect<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "bare": { "alias": "bare"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSelect<any>, "sd-select", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "valueField": { "alias": "valueField"; "required": true; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": true; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "minWidthPanel": { "alias": "minWidthPanel"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
 }

package/forms/switch/src/switch.component.d.ts

@@ -1,6 +1,6 @@
 import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
@@ -13,7 +13,10 @@ export declare class SdSwitch implements OnInit, AfterViewInit, OnDestroy {
     readonly label: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     readonly color: import("@angular/core").InputSignalWithTransform<Color, Color | null | undefined>;
     readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    readonly viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    readonly viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static read-only view should render. */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
     readonly hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     readonly model: import("@angular/core").ModelSignal<boolean | null | undefined>;

package/forms/textarea/src/textarea.component.d.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdLabelDefDirective, SdSuffixDefDirective, SdViewDefDirective } from '@sdcorejs/angular/forms/directives';
-import { SdCustomValidator, SdFormControl } from '@sdcorejs/angular/forms/models';
+import { SdCustomValidator, SdFormControl, SdViewed, SdViewedInput } from '@sdcorejs/angular/forms/models';
 import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
@@ -32,8 +32,15 @@ export declare class SdTextarea implements OnInit, AfterViewInit, OnDestroy {
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` borderless inline-edit (textarea reads like text). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
     autoHeight: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `true` when `viewed === 'inline'`. */
+    readonly isInline: import("@angular/core").Signal<boolean>;
+    /** `true` when `viewed === true` (static view, no editor). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    /** Focus the inline textarea. No-op unless `viewed='inline'`. */
+    enterInlineEdit: () => void;
     maxlength: import("@angular/core").InputSignalWithTransform<number | null, unknown>;
     pattern: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     validator: import("@angular/core").InputSignal<SdCustomValidator | undefined>;

package/i18n/src/en.d.ts

@@ -62,7 +62,9 @@ export declare const EN_MESSAGES: {
     readonly 'core.operator.contain.display': "Contains";
     readonly 'core.operator.not-contain.display': "Does not contain";
     readonly 'core.operator.start-with.display': "Starts with";
+    readonly 'core.operator.not-start-with.display': "Does not start with";
     readonly 'core.operator.end-with.display': "Ends with";
+    readonly 'core.operator.not-end-with.display': "Does not end with";
     readonly 'core.operator.in.display': "In";
     readonly 'core.operator.not-in.display': "Not in";
     readonly 'core.operator.between.display': "Between";
@@ -262,6 +264,8 @@ export declare const EN_MESSAGES: {
     readonly 'core.component.form-builder.empty-hint': "Build your form by dragging fields from the left panel, or press";
     readonly 'core.component.form-builder.conditional': "Conditional";
     readonly 'core.component.form-builder.group-drop-here': "Drop a field here to add it to this group";
+    readonly 'core.component.form-builder.edit-group': "Edit group";
+    readonly 'core.component.form-builder.group-empty-hint': "Click Details to add fields to this group";
     readonly 'core.component.form-builder.hidden': "Hidden";
     readonly 'core.component.form-builder.read-only': "Read only";
     readonly 'core.component.form-builder.untitled': "Untitled";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdcorejs/angular",
-  "version": "19.0.1",
+  "version": "19.0.4",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^19.0.0 || ^20.0.0 || ^21.0.0",
@@ -149,6 +149,10 @@
       "types": "./components/modal/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-components-modal.mjs"
     },
+    "./components/modal-resizable": {
+      "types": "./components/modal-resizable/index.d.ts",
+      "default": "./fesm2022/sdcorejs-angular-components-modal-resizable.mjs"
+    },
     "./components/operator": {
       "types": "./components/operator/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-components-operator.mjs"
@@ -237,6 +241,10 @@
       "types": "./forms/directives/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-forms-directives.mjs"
     },
+    "./forms/inline-text": {
+      "types": "./forms/inline-text/index.d.ts",
+      "default": "./fesm2022/sdcorejs-angular-forms-inline-text.mjs"
+    },
     "./forms/input": {
       "types": "./forms/input/index.d.ts",
       "default": "./fesm2022/sdcorejs-angular-forms-input.mjs"

package/services/notify/src/components/toast/toast.component.d.ts

@@ -1,16 +1,27 @@
 import { OnInit, OnDestroy } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 import { ToastData } from '../../notify.model';
 import { SdNotifyService } from '../../notify.service';
 import * as i0 from "@angular/core";
 export declare class ToastComponent implements OnInit, OnDestroy {
     private notifyService;
+    private sanitizer;
     data: ToastData;
     isExpanded: import("@angular/core").WritableSignal<boolean>;
     readonly MAX_SHOW = 2;
     private timer;
     private start;
     private remaining;
-    constructor(notifyService: SdNotifyService);
+    constructor(notifyService: SdNotifyService, sanitizer: DomSanitizer);
+    /**
+     * Sanitize HTML tường minh trước khi render qua `[innerHTML]` — strip
+     * `<script>`, event handler (`on*`), `javascript:` URL. Chỉ chạy ở nhánh
+     * `data.html === true`; nhánh mặc định render text (auto-escape) nên không
+     * có sink này. // why: phơi rõ việc sanitize cho review/scanner bảo mật.
+     */
+    sanitizeHtml(value: string): string;
+    /** Message ở dạng chuỗi đơn (chỉ dùng khi !isMultiMessage). */
+    get singleMessage(): string;
     ngOnInit(): void;
     ngOnDestroy(): void;
     pauseTimer(): void;
@@ -23,6 +34,10 @@ export declare class ToastComponent implements OnInit, OnDestroy {
     get displayMessages(): string[];
     get restCount(): number;
     get hasMore(): boolean;
+    /** autoid theo loại toast để E2E chọn trực tiếp, vd `services-notify-toast-success`. */
+    get autoId(): string;
+    /** Gộp message (mảng nối ' | ') để phơi ra data-message cho E2E. */
+    get dataMessage(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "toast", never, { "data": { "alias": "data"; "required": true; }; }, {}, never, never, true, never>;
 }

package/services/notify/src/notify.model.d.ts

@@ -7,10 +7,27 @@ export interface ToastData {
     duration: number;
     actionLabel?: string;
     onAction?: () => void;
+    /**
+     * Render `message` dưới dạng HTML thay vì text.
+     * - `false` (mặc định): message render dạng TEXT (auto-escape) — an toàn tuyệt đối.
+     * - `true`: message render dạng HTML, đã được `DomSanitizer.sanitize(HTML)`
+     *   (strip `<script>`, event handler, `javascript:` URL). CHỈ dùng cho markup
+     *   TIN CẬY (do dev tự viết); KHÔNG truyền data người dùng vào đây.
+     */
+    html?: boolean;
 }
 export interface NotifyOption {
     duration?: number;
     title?: string;
     actionLabel?: string;
+    /**
+     * Callback khi bấm nút action — do APP tự cung cấp (không phải input không tin cậy).
+     * Chỉ được gọi khi user bấm `actionLabel`.
+     */
     onAction?: () => void;
+    /**
+     * Render message dạng HTML đã sanitize (mặc định `false` = text an toàn).
+     * Chỉ dùng cho markup tin cậy. Xem `ToastData.html`.
+     */
+    html?: boolean;
 }