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

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

@@ -1,10 +1,11 @@
 import { AfterViewInit, ElementRef, EventEmitter, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { FormControl, FormGroup, FormGroupDirective, NgForm, ValidatorFn } from '@angular/forms';
+import { FormControl, FormGroup, FormGroupDirective, NgForm } from '@angular/forms';
 import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdItemDefDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
-import { SdCustomValidator, SdFormControl, SdSearch, SdSelectionData } from '@sd-angular/core/forms/models';
+import { SdCustomValidator, SdFormControl, SdSearch, SdSelectionData, SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 declare class SdAutocompleteErrotStateMatcher implements ErrorStateMatcher {
     private formControl;
@@ -18,8 +19,8 @@ export declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, After
     autocompleteTrigger: import("@angular/core").Signal<MatAutocompleteTrigger | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
-    itemDef: import("@angular/core").Signal<SdItemDefDefDirective | undefined>;
-    sdViewDef: import("@angular/core").Signal<SdViewDefDirective | undefined>;
+    itemDef: import("@angular/core").Signal<SdItemDefDefDirective<any> | undefined>;
+    sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
     private ref;
     private formConfig;
     autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
@@ -29,8 +30,10 @@ export declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, After
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
     readonly dataLoading: import("@angular/core").Signal<"true" | "false">;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
     name: import("@angular/core").InputSignal<string>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
+    size: import("@angular/core").InputSignal<Size>;
     form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
     label: import("@angular/core").InputSignal<string | undefined>;
     helperText: import("@angular/core").InputSignal<string | undefined>;
@@ -46,14 +49,24 @@ export declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, After
     addable: 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 (autocomplete panel). */
+    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 autocomplete panel 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>;
     validator: import("@angular/core").InputSignal<SdCustomValidator | undefined>;
     inlineError: import("@angular/core").InputSignal<string | undefined>;
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
-     * Dùng getter (không phải computed) vì formControl.errors không phải Angular signal.
      */
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     appearanceInput: import("@angular/core").InputSignal<MatFormFieldAppearance | undefined>;
     appearance: import("@angular/core").Signal<MatFormFieldAppearance>;
     valueModel: import("@angular/core").ModelSignal<string | number | null | undefined>;
@@ -82,11 +95,12 @@ export declare class SdAutocomplete<T = any> implements OnInit, OnDestroy, After
     onClick: () => void;
     blur: () => void;
     focus: () => void;
+    /** Open the autocomplete panel programmatically (anchors to the field input). Used by inline mode. */
+    open: () => void;
     clear: ($event?: any) => void;
     onAdd: ($event: Event) => void;
     reValidate: () => void;
-    customInlineErrorValidator(): ValidatorFn;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdAutocomplete<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdAutocomplete<any>, "sd-autocomplete", 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": false; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "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; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; "sdAdd": "sdAdd"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdAutocomplete<any>, "sd-autocomplete", 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": false; "isSignal": true; }; "displayField": { "alias": "displayField"; "required": false; "isSignal": true; }; "disabledField": { "alias": "disabledField"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "cacheChecksum": { "alias": "cacheChecksum"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "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; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "appearanceInput": { "alias": "appearance"; "required": false; "isSignal": true; }; "valueModel": { "alias": "model"; "required": false; "isSignal": true; }; }, { "valueModel": "modelChange"; "sdChange": "sdChange"; "sdSelection": "sdSelection"; "sdAdd": "sdAdd"; }, ["sdLabelTemplate", "sdValueTemplate", "itemDef", "sdViewDef"], ["[sdLabel]"], true, never>;
 }
 export {};

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

@@ -1,31 +1,32 @@
-import { AfterViewInit, ChangeDetectorRef, EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, FormGroup, NgForm, ValidatorFn } from '@angular/forms';
+import { AfterViewInit, OnDestroy } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Color } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
-export declare class SdCheckbox implements OnDestroy, OnInit, AfterViewInit {
+export declare class SdCheckbox implements OnDestroy, AfterViewInit {
     #private;
-    private ref;
     id: string;
-    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    formControl: FormControl<any>;
+    readonly autoIdInput: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    readonly name: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    readonly form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
+    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>;
+    /** 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 inlineError: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
+    readonly model: import("@angular/core").ModelSignal<unknown>;
+    readonly sdChange: import("@angular/core").OutputEmitterRef<unknown>;
     readonly autoId: import("@angular/core").Signal<string | undefined>;
     readonly dataDisabled: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
-    set name(val: string);
-    set form(val: NgForm | FormGroup);
-    formControl: FormControl<any>;
-    label?: string;
-    color: 'primary' | 'warn';
-    set disabled(val: boolean | '' | undefined | null);
-    set model(value: any);
-    inlineError?: string;
-    set _inlineError(val: string);
-    modelChange: EventEmitter<any>;
-    sdChange: EventEmitter<any>;
-    constructor(ref: ChangeDetectorRef);
-    ngOnInit(): void;
+    constructor();
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
-    customInlineErrorValidator(): ValidatorFn;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdCheckbox, "sd-checkbox", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; }; "form": { "alias": "form"; "required": false; }; "label": { "alias": "label"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "model": { "alias": "model"; "required": false; }; "_inlineError": { "alias": "inlineError"; "required": false; }; }, { "modelChange": "modelChange"; "sdChange": "sdChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdCheckbox, "sd-checkbox", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "form": { "alias": "form"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "inlineError": { "alias": "inlineError"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "sdChange": "sdChange"; }, never, never, true, never>;
 }

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

@@ -5,7 +5,8 @@ import { MatChipInputEvent } from '@angular/material/chips';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdLabelDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
-import { SdFormControl } from '@sd-angular/core/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 declare class SdChipErrorStateMatcher implements ErrorStateMatcher {
     private formControl;
@@ -14,33 +15,37 @@ declare class SdChipErrorStateMatcher implements ErrorStateMatcher {
 }
 export declare class SdChip implements AfterViewInit {
     #private;
-    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    autoIdInput: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     autoId: import("@angular/core").Signal<string | undefined>;
     readonly dataDisabled: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
     readonly dataCount: import("@angular/core").Signal<string>;
-    name: import("@angular/core").InputSignal<string | undefined>;
-    appearance: import("@angular/core").InputSignal<MatFormFieldAppearance>;
-    floatLabel: import("@angular/core").InputSignal<FloatLabelType>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
-    form: import("@angular/core").InputSignal<NgForm | FormGroup<any> | undefined>;
-    label: import("@angular/core").InputSignal<string>;
-    placeholder: import("@angular/core").InputSignal<string | undefined>;
-    removable: import("@angular/core").InputSignal<boolean | ((item: any) => boolean)>;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
+    name: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    appearance: import("@angular/core").InputSignalWithTransform<MatFormFieldAppearance, MatFormFieldAppearance | null | undefined>;
+    floatLabel: import("@angular/core").InputSignalWithTransform<FloatLabelType, FloatLabelType | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<Size, Size | null | undefined>;
+    form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
+    label: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
+    placeholder: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    removable: import("@angular/core").InputSignalWithTransform<boolean | ((item: any) => boolean), boolean | ((item: any) => boolean) | null | undefined>;
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    model: import("@angular/core").InputSignal<(string | number)[] | undefined>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    min: import("@angular/core").InputSignal<number>;
-    max: import("@angular/core").InputSignal<number>;
+    min: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
+    max: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
     addable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
-    modelChange: import("@angular/core").OutputEmitterRef<any[]>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    hyperlink: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    model: import("@angular/core").ModelSignal<(string | number)[] | undefined>;
     sdChange: import("@angular/core").OutputEmitterRef<any[]>;
-    input: ElementRef<HTMLInputElement>;
-    sdViewDef: import("@angular/core").Signal<SdViewDefDirective | undefined>;
+    input: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+    sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
     sdLabelDef: import("@angular/core").Signal<SdLabelDefDirective | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
@@ -50,7 +55,7 @@ export declare class SdChip implements AfterViewInit {
     constructor();
     get formControl(): SdFormControl;
     get inputControl(): FormControl<any>;
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     get matcher(): SdChipErrorStateMatcher;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -64,6 +69,6 @@ export declare class SdChip implements AfterViewInit {
     focus: () => void;
     onClear: ($event?: any) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdChip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdChip, "sd-chip", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; }, { "modelChange": "modelChange"; "sdChange": "sdChange"; }, ["sdViewDef", "sdLabelDef", "sdLabelTemplate", "sdValueTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdChip, "sd-chip", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "addable": { "alias": "addable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "sdChange": "sdChange"; }, ["sdViewDef", "sdLabelDef", "sdLabelTemplate", "sdValueTemplate"], never, true, never>;
 }
 export {};

package/forms/chip-calendar/src/chip-calendar.component.d.ts

@@ -6,7 +6,8 @@ import { MatCalendar } from '@angular/material/datepicker';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { SdLabelDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
-import { SdFormControl } from '@sd-angular/core/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 declare class SdChipCalendarErrorStateMatcher implements ErrorStateMatcher {
     private formControl;
@@ -15,34 +16,38 @@ declare class SdChipCalendarErrorStateMatcher implements ErrorStateMatcher {
 }
 export declare class SdChipCalendar implements AfterViewInit {
     #private;
-    menuTrigger: MatMenuTrigger;
-    calendar: MatCalendar<Date>;
-    autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    menuTrigger: import("@angular/core").Signal<MatMenuTrigger | undefined>;
+    calendar: import("@angular/core").Signal<MatCalendar<Date> | undefined>;
+    autoIdInput: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
     autoId: import("@angular/core").Signal<string | undefined>;
     readonly dataDisabled: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
     readonly dataCount: import("@angular/core").Signal<string>;
-    name: import("@angular/core").InputSignal<string | undefined>;
-    appearance: import("@angular/core").InputSignal<MatFormFieldAppearance>;
-    floatLabel: import("@angular/core").InputSignal<FloatLabelType>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
-    form: import("@angular/core").InputSignal<NgForm | FormGroup<any> | undefined>;
-    label: import("@angular/core").InputSignal<string>;
-    placeholder: import("@angular/core").InputSignal<string | undefined>;
-    removable: import("@angular/core").InputSignal<boolean | ((item: any) => boolean)>;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
+    name: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    appearance: import("@angular/core").InputSignalWithTransform<MatFormFieldAppearance, MatFormFieldAppearance | null | undefined>;
+    floatLabel: import("@angular/core").InputSignalWithTransform<FloatLabelType, FloatLabelType | null | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<Size, Size | null | undefined>;
+    form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
+    label: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
+    placeholder: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    removable: import("@angular/core").InputSignalWithTransform<boolean | ((item: any) => boolean), boolean | ((item: any) => boolean) | null | undefined>;
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    model: import("@angular/core").InputSignal<(string | number)[] | undefined>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    min: import("@angular/core").InputSignal<number>;
-    max: import("@angular/core").InputSignal<number>;
+    min: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
+    max: import("@angular/core").InputSignalWithTransform<number, number | null | undefined>;
     disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    viewed: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
-    modelChange: import("@angular/core").OutputEmitterRef<any[]>;
+    /** Display mode: `false` edit · `true` static view · `'inline'` interactive (disabled `'inline'` → static). */
+    viewed: import("@angular/core").InputSignalWithTransform<SdViewed, SdViewedInput>;
+    /** `true` when the static view should render (`viewed===true`, or disabled `'inline'`). */
+    readonly isViewed: import("@angular/core").Signal<boolean>;
+    hyperlink: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    model: import("@angular/core").ModelSignal<(string | number)[] | undefined>;
     sdChange: import("@angular/core").OutputEmitterRef<any[]>;
-    input: ElementRef<HTMLInputElement>;
-    sdViewDef: import("@angular/core").Signal<SdViewDefDirective | undefined>;
+    input: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
+    sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
     sdLabelDef: import("@angular/core").Signal<SdLabelDefDirective | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
@@ -51,7 +56,7 @@ export declare class SdChipCalendar implements AfterViewInit {
     constructor();
     get formControl(): SdFormControl;
     get inputControl(): FormControl<any>;
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     get matcher(): SdChipCalendarErrorStateMatcher;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
@@ -64,6 +69,6 @@ export declare class SdChipCalendar implements AfterViewInit {
     onCloseCalendar: () => void;
     dateClass: (cellDate: Date) => "" | "sd-chip-calendar-selected-date";
     static ɵfac: i0.ɵɵFactoryDeclaration<SdChipCalendar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdChipCalendar, "sd-chip-calendar", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; }, { "modelChange": "modelChange"; "sdChange": "sdChange"; }, ["sdViewDef", "sdLabelDef", "sdLabelTemplate", "sdValueTemplate"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdChipCalendar, "sd-chip-calendar", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "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; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "hideInlineError": { "alias": "hideInlineError"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "viewed": { "alias": "viewed"; "required": false; "isSignal": true; }; "hyperlink": { "alias": "hyperlink"; "required": false; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "sdChange": "sdChange"; }, ["sdViewDef", "sdLabelDef", "sdLabelTemplate", "sdValueTemplate"], never, true, never>;
 }
 export {};

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

@@ -1,9 +1,10 @@
 import { ElementRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { FormGroup, ValidatorFn } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdLabelDefDirective, SdViewDefDirective } from '@sd-angular/core/forms/directives';
-import { SdFormControl } from '@sd-angular/core/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdDate implements OnDestroy, OnInit {
     #private;
@@ -12,7 +13,7 @@ export declare class SdDate implements OnDestroy, OnInit {
     datePicker: import("@angular/core").Signal<MatDatepicker<Date> | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
-    sdViewDef: import("@angular/core").Signal<SdViewDefDirective | undefined>;
+    sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
     sdLabelDef: import("@angular/core").Signal<SdLabelDefDirective | undefined>;
     private ref;
     private formConfig;
@@ -22,8 +23,10 @@ export declare class SdDate implements OnDestroy, OnInit {
     readonly dataInvalid: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
     name: import("@angular/core").InputSignal<string>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
+    size: import("@angular/core").InputSignal<Size>;
     form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
     label: import("@angular/core").InputSignal<string | undefined>;
     helperText: import("@angular/core").InputSignal<string | undefined>;
@@ -31,13 +34,23 @@ export declare class SdDate 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 (calendar). */
+    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 calendar 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.
-     * Dùng getter (không phải computed) vì formControl.errors không phải Angular signal.
      */
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
     appearanceInput: import("@angular/core").InputSignal<MatFormFieldAppearance | undefined>;
     appearance: import("@angular/core").Signal<MatFormFieldAppearance>;
@@ -58,17 +71,18 @@ export declare class SdDate implements OnDestroy, OnInit {
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
-    customInlineErrorValidator(): ValidatorFn;
     onFocus: () => void;
     onBlur: () => void;
     onClick: () => void;
     blur: () => void;
     focus: () => void;
+    /** Open the datepicker calendar programmatically (anchors to the field input). */
+    open: () => void;
     focusInputElement(): void;
     onKeyDown: (event: KeyboardEvent) => boolean;
     onKeyup: (event: any) => void;
     onChange: (event: MatDatepickerInputEvent<Date>) => void;
     clear: ($event: any) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdDate, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdDate, "sd-date", 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; }; "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", "sdLabelDef"], ["[sdLabel]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdDate, "sd-date", 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; }; "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", "sdLabelDef"], ["[sdLabel]"], true, never>;
 }

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

@@ -1,8 +1,10 @@
-import { OnDestroy, OnInit } from '@angular/core';
+import { OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDatepickerInputEvent, MatDateRangePicker } from '@angular/material/datepicker';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdLabelDefDirective } from '@sd-angular/core/forms/directives';
+import { SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 interface Daterange {
     from?: string | null;
@@ -22,19 +24,40 @@ export declare class SdDateRange implements OnDestroy, OnInit {
     readonly dataInvalid: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
     name: import("@angular/core").InputSignal<string>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
+    size: import("@angular/core").InputSignal<Size>;
     form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
     label: import("@angular/core").InputSignal<string | undefined>;
     helperText: import("@angular/core").InputSignal<string | undefined>;
     hideInlineError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**
      * Tổng hợp error message để hiển thị trong tooltip khi hideInlineError = true.
-     * Dùng getter (không phải computed) vì formControl.errors không phải Angular signal.
      */
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     disabled: 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>;
+    /**
+     * Formatted "dd/MM/yyyy → dd/MM/yyyy" string for the viewed-mode display.
+     * why: viewed mode chỉ hiển thị text — cần format gọn cho cả 2 đầu range,
+     * Returns empty when both ends are blank, "from →" when only from is set, and so on.
+     */
+    formatted: import("@angular/core").Signal<string>;
+    /** Open the range picker panel programmatically (for query-bar chip auto-open). */
+    open: () => void;
     appearanceInput: import("@angular/core").InputSignal<MatFormFieldAppearance | undefined>;
     appearance: import("@angular/core").Signal<MatFormFieldAppearance>;
     floatLabel: import("@angular/core").InputSignal<FloatLabelType>;
@@ -60,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; }; "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"], 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

@@ -1,8 +1,9 @@
 import { ElementRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
-import { FormGroup, ValidatorFn } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
 import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
 import { SdViewDefDirective } from '@sd-angular/core/forms/directives';
-import { SdFormControl } from '@sd-angular/core/forms/models';
+import { SdFormControl, SdViewed, SdViewedInput } from '@sd-angular/core/forms/models';
+import { Size } from '@sdcorejs/utils/models';
 import * as i0 from "@angular/core";
 export declare class SdDatetime implements OnDestroy, OnInit {
     #private;
@@ -10,7 +11,7 @@ export declare class SdDatetime implements OnDestroy, OnInit {
     inputRef: import("@angular/core").Signal<ElementRef<HTMLInputElement> | undefined>;
     sdLabelTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
     sdValueTemplate: import("@angular/core").Signal<TemplateRef<any> | undefined>;
-    sdViewDef: import("@angular/core").Signal<SdViewDefDirective | undefined>;
+    sdViewDef: import("@angular/core").Signal<SdViewDefDirective<any, any> | undefined>;
     private ref;
     private overlay;
     private elementRef;
@@ -22,8 +23,10 @@ export declare class SdDatetime implements OnDestroy, OnInit {
     readonly dataInvalid: import("@angular/core").Signal<"true" | "false">;
     readonly dataEmpty: import("@angular/core").Signal<"true" | "false">;
     readonly dataValue: import("@angular/core").Signal<string>;
+    readonly dataRequired: import("@angular/core").Signal<"true" | "false">;
+    readonly dataErrorMessage: import("@angular/core").Signal<string | null>;
     name: import("@angular/core").InputSignal<string>;
-    size: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Size>;
+    size: import("@angular/core").InputSignal<Size>;
     form: import("@angular/core").InputSignalWithTransform<FormGroup<any> | undefined, any>;
     label: import("@angular/core").InputSignal<string | undefined>;
     helperText: import("@angular/core").InputSignal<string | undefined>;
@@ -31,14 +34,25 @@ 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>;
+    /** 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.
      */
-    get errorTooltipMessage(): string | undefined;
+    readonly errorMessage: import("@angular/core").Signal<string | undefined>;
     hyperlink: import("@angular/core").InputSignal<string | null | undefined>;
     appearanceInput: import("@angular/core").InputSignal<MatFormFieldAppearance | undefined>;
     appearance: import("@angular/core").Signal<MatFormFieldAppearance>;
@@ -66,7 +80,6 @@ export declare class SdDatetime implements OnDestroy, OnInit {
     open(): void;
     /** Đóng popup (public — gọi từ template nếu cần). */
     close(): void;
-    customInlineErrorValidator(): ValidatorFn;
     onFocus: () => void;
     onBlur: () => void;
     onClick: () => void;
@@ -81,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; }; "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>;
 }