@sd-angular/core 19.0.0-beta.10 → 19.0.0-beta.101

package/components/query-bar/src/query-bar.component.d.ts

@@ -0,0 +1,180 @@
+import { MatMenuTrigger } from '@angular/material/menu';
+import { SdSearch } from '@sd-angular/core/forms/models';
+import { Filter, Operator } from '@sd-angular/core/utilities/models';
+import { SdQuery, SdQueryField, SdQueryLogic, sdQueryFieldIcon } from './query-bar.model';
+import * as i0 from "@angular/core";
+type Density = 'compact' | 'comfortable';
+interface BuildingChip {
+    field: SdQueryField;
+    operator?: Operator;
+    step: 'operator' | 'value';
+    value?: unknown;
+}
+export declare class SdQueryBar {
+    #private;
+    /** All chip menu triggers (one per chip button). Used to auto-open the popover after addFilter. */
+    readonly chipTriggers: import("@angular/core").Signal<readonly MatMenuTrigger[]>;
+    /** The build chip's operator dropdown — auto-opened when entering the operator step. */
+    private readonly buildOperator;
+    /** The build chip's value picker (bare sd-select / sd-date / sd-datetime) — auto-opened at the value step. */
+    private readonly buildPicker;
+    /** Prefix for auto-generated `data-autoid` on inner controls (chips, operator/value editors, buttons). */
+    readonly autoIdInput: import("@angular/core").InputSignalWithTransform<string | undefined, string | null | undefined>;
+    /** Available fields the user can filter by. Required for the field picker. */
+    readonly fields: import("@angular/core").InputSignalWithTransform<SdQueryField[], SdQueryField[] | null | undefined>;
+    /**
+     * Active filter chips. Two-way bindable via `[(filters)]`.
+     * Use this when you only need a flat `Filter[]` (no global logic / search box).
+     */
+    readonly filters: import("@angular/core").ModelSignal<Filter[]>;
+    /**
+     * Global connector between filters. Two-way bindable via `[(logic)]`.
+     * Only meaningful when `showLogicToggle=true` and there are ≥2 filters.
+     */
+    readonly logic: import("@angular/core").ModelSignal<SdQueryLogic>;
+    /** Free-text search string. Two-way bindable via `[(search)]`. Only shown when `showSearch=true`. */
+    readonly search: import("@angular/core").ModelSignal<string>;
+    /**
+     * Editing mode:
+     * - `'popover'` (default) → compact chips; click a chip to edit operator + value in a
+     *   mat-menu popover, commit with "Áp dụng".
+     * - `'inline'` → GitLab-style. Each filter's operator + value controls render directly
+     *   on the bar (no popup, no per-filter apply). Edits update `filters` live; the user
+     *   presses the search button (or Enter) once to fire `(apply)`.
+     */
+    readonly mode: import("@angular/core").InputSignalWithTransform<"popover" | "inline", "popover" | "inline" | null | undefined>;
+    /** Density preset — chip / control height. */
+    readonly density: import("@angular/core").InputSignalWithTransform<Density, Density | null | undefined>;
+    /** Show free-text search input on the left. */
+    readonly showSearch: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show saved-views dropdown on the right. */
+    readonly showSavedViews: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show AND/OR segmented toggle (renders only when there are ≥2 filters). */
+    readonly showLogicToggle: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Show "Clear all" button when at least one filter is active. */
+    readonly showClearAll: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Render the operator label on the chip face (default: hidden — operator only visible in popover). */
+    readonly showOperatorOnChip: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Composite payload — emitted whenever filters / logic / search change. */
+    readonly queryChange: import("@angular/core").OutputEmitterRef<SdQuery<any>>;
+    /** Fires when the user presses "Áp dụng" inside a chip popover — host should reload data. */
+    readonly apply: import("@angular/core").OutputEmitterRef<SdQuery<any>>;
+    /** Map of `field.key` → `SdQueryField` for fast lookup from filters[]. */
+    readonly fieldByKey: import("@angular/core").Signal<Record<string, SdQueryField>>;
+    /** Field keys already chained on a chip — the picker greys these out. */
+    readonly usedFieldKeys: import("@angular/core").Signal<Set<string>>;
+    /** Render the global AND/OR connector text between chips when `logic === 'OR'`. */
+    readonly showOrConnector: import("@angular/core").Signal<boolean>;
+    /** Search button is actionable only when there is something to apply. */
+    readonly canSearch: import("@angular/core").Signal<boolean>;
+    /** Index of the chip whose popover is open. Reset to null after Apply / close. */
+    readonly editingIndex: import("@angular/core").WritableSignal<number | null>;
+    /** Staged operator (uncommitted). */
+    readonly editingOperator: import("@angular/core").WritableSignal<Operator>;
+    /** Staged value (uncommitted) — type varies by kind. */
+    readonly editingValue: import("@angular/core").WritableSignal<unknown>;
+    /** Resolved option list for the currently editing values / lazy-values field. */
+    readonly editingOptions: import("@angular/core").WritableSignal<any[]>;
+    /** Loading state for async option fetch. */
+    readonly editingOptionsLoading: import("@angular/core").WritableSignal<boolean>;
+    readonly editingField: import("@angular/core").Signal<SdQueryField | null>;
+    readonly editingAllowedOperators: import("@angular/core").Signal<Operator[]>;
+    /** Show the operator dropdown only when the field exposes >1 operator (else simple mode). */
+    readonly editingShowOperatorSelector: import("@angular/core").Signal<boolean>;
+    /** Multi-select is derived from the operator (IN / NOT_IN), not a field flag. */
+    readonly editingIsMulti: import("@angular/core").Signal<boolean>;
+    /** Compose a deterministic autoId for an inner control inside a chip's editor. */
+    chipAutoId(role: string): string;
+    readonly iconFor: typeof sdQueryFieldIcon;
+    /** Chip is "active" when it has a non-empty value OR a no-data operator (NULL/NOT_NULL). */
+    isFilterActive(filter: Filter): boolean;
+    /** Rendered value text on a chip. */
+    chipValueText(filter: Filter): string;
+    isNoDataOperator(op: Operator | string): boolean;
+    isMultiOperator(op: Operator | string): boolean;
+    lazyItemsFor(field: SdQueryField): SdSearch;
+    readonly building: import("@angular/core").Signal<BuildingChip | null>;
+    readonly editingValueIndex: import("@angular/core").Signal<number | null>;
+    /** True when chip `i` is in inline value-edit mode. */
+    isEditingValue(i: number): boolean;
+    allowedOperatorsFor(field: SdQueryField): Operator[];
+    inlineAutoId(index: number, role: string): string;
+    /** Entry point from the field picker — start building a chip for `field`. */
+    beginBuild(field: SdQueryField): void;
+    /** Operator chosen during build — finish (no-data) or advance to the value step. */
+    pickBuildOperator(op: Operator): void;
+    /** Value committed during build — push the completed chip, clear building. No emit. */
+    commitBuildValue(value: unknown): void;
+    /**
+     * Commit from the seamless build chip (string / number). An empty value (blur with no
+     * input) cancels the build instead of pushing a blank chip.
+     */
+    onBuildSeamlessCommit(value: unknown): void;
+    /** Abandon the in-progress chip. */
+    cancelBuild(): void;
+    /** Live-commit an inline edit for a completed chip (bare control path). */
+    editValueFn(i: number): (v: unknown) => void;
+    /** Single-value commit from a completed chip in edit mode — write data + exit edit. */
+    onChipSingleCommit(i: number, v: unknown): void;
+    /**
+     * Multi-value chips exit edit when focus actually leaves the wrapper subtree.
+     * why: focusout fires on every internal blur (option click, search input, …) — only
+     * exit when the new focus target is NOT a descendant of the chip's value wrapper.
+     */
+    onChipValueFocusOut(i: number, ev: FocusEvent): void;
+    /**
+     * Cập nhật đầu `from` của BETWEEN cho 1 chip đã commit (inline edit).
+     * why: dual picker BETWEEN trên chip hoàn tất cần ghi từng đầu vào filter mà không reset đầu kia.
+     */
+    setFilterRangeFrom(i: number, v: unknown): void;
+    /**
+     * Cập nhật đầu `to` của BETWEEN cho 1 chip đã commit (inline edit).
+     */
+    setFilterRangeTo(i: number, v: unknown): void;
+    noop: () => void;
+    setEditDraftFn(): (v: unknown) => void;
+    commitEditDraftFn(i: number): () => void;
+    setBuildDraftFn(): (v: unknown) => void;
+    /** Update the `from` end of the build chip's BETWEEN range without committing. */
+    setBuildRangeFrom(v: unknown): void;
+    /**
+     * Update the `to` end of the build chip's BETWEEN range. Once both ends are set, commit
+     * the chip so the user does not need an extra blur / apply press.
+     */
+    setBuildRangeTo(v: unknown): void;
+    commitBuildDraftFn(): () => void;
+    /** Start inline value edit on a completed chip (operator + field stay locked). */
+    beginEditValue(i: number): void;
+    /** Commit an inline value edit — change only `data`, no emit. */
+    commitEditValue(i: number, value: unknown): void;
+    addFilter(field: SdQueryField): void;
+    /** Swap the field of an existing chip — reset operator + value to the new field's defaults. */
+    changeFilterField(index: number, field: SdQueryField): void;
+    updateFilter(index: number, patch: Partial<Filter>): void;
+    removeFilter(index: number): void;
+    clearAll(): void;
+    setLogic(value: SdQueryLogic): void;
+    setSearch(value: string): void;
+    triggerApply(): void;
+    /** Called when a chip is clicked — copy current operator + value into the staging signals. */
+    openChipPopover(index: number): void;
+    /** Called on operator <select> change in the popover. */
+    onEditingOperatorChange(next: Operator): void;
+    /** Two-way bind for primitive value control. */
+    onEditingValueInput(value: unknown): void;
+    /** BETWEEN range mutators. */
+    onEditingRangeFrom(value: string | number | null): void;
+    onEditingRangeTo(value: string | number | null): void;
+    /** Toggle a value inside the staged multi-select array. */
+    toggleEditingMultiValue(value: unknown): void;
+    isEditingMultiSelected(value: unknown): boolean;
+    /**
+     * Commit the staged operator + value into the chip when the popover closes.
+     * why: nút Áp dụng đã bị bỏ — đóng popover (out-focus) tự động áp dụng phần
+     * chỉnh sửa đang staging. Không emit: nút Search toàn cục vẫn là trigger query duy nhất.
+     */
+    commitChipEditOnClose(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdQueryBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQueryBar, "sd-query-bar", never, { "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; "fields": { "alias": "fields"; "required": false; "isSignal": true; }; "filters": { "alias": "filters"; "required": false; "isSignal": true; }; "logic": { "alias": "logic"; "required": false; "isSignal": true; }; "search": { "alias": "search"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "showSavedViews": { "alias": "showSavedViews"; "required": false; "isSignal": true; }; "showLogicToggle": { "alias": "showLogicToggle"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "showOperatorOnChip": { "alias": "showOperatorOnChip"; "required": false; "isSignal": true; }; }, { "filters": "filtersChange"; "logic": "logicChange"; "search": "searchChange"; "queryChange": "queryChange"; "apply": "apply"; }, never, never, true, never>;
+}
+export {};

package/components/query-bar/src/query-bar.model.d.ts

@@ -0,0 +1,121 @@
+import { Signal } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Filter, NestedKeyOf, Operator } from '@sd-angular/core/utilities/models';
+export type SdQueryFieldKind = 'string' | 'number' | 'boolean' | 'date' | 'datetime' | 'values' | 'lazy-values';
+interface SdQueryFieldBase<T = any> {
+    /** Dot-notation field path (matches `Filter.field`). */
+    key: NestedKeyOf<T>;
+    /** Human-readable label shown on chip + field picker. */
+    label: string;
+    /** Material icon name; falls back to `SD_QUERY_KIND_ICON[kind]` then `'tune'`. */
+    icon?: string;
+    /**
+     * Controls the operator selector in the chip popover:
+     * - omitted / `false` → **simple mode**: no operator dropdown; the chip always uses
+     *   `defaultOperator` (or the per-kind default). Use this for screens that don't need
+     *   operator choice.
+     * - `true` → show the full operator set for the field's `kind`
+     *   (`SD_QUERY_OPERATORS_BY_KIND[kind]`).
+     * - `Operator[]` → show exactly these operators.
+     */
+    operators?: boolean | Operator[];
+    /**
+     * Operator the chip starts with. Falls back to `SD_QUERY_DEFAULT_OPERATOR_BY_KIND[kind]`:
+     * string→CONTAIN, number→EQUAL, values/lazy-values→IN, boolean→EQUAL, date/datetime→BETWEEN.
+     */
+    defaultOperator?: Operator;
+    /** Field is offered in picker but not interactive (read-only badge in chip). */
+    disabled?: boolean;
+}
+export interface SdQueryFieldString<T = any> extends SdQueryFieldBase<T> {
+    kind: 'string';
+}
+export interface SdQueryFieldNumber<T = any> extends SdQueryFieldBase<T> {
+    kind: 'number';
+    /** Bounds for the input control inside the chip popover. */
+    min?: number;
+    max?: number;
+    /** Step for the number input. */
+    step?: number;
+}
+export interface SdQueryFieldBoolean<T = any> extends SdQueryFieldBase<T> {
+    kind: 'boolean';
+    /** Labels rendered for the true/false buttons. Default: "Có" / "Không". */
+    trueLabel?: string;
+    falseLabel?: string;
+}
+export interface SdQueryFieldDate<T = any> extends SdQueryFieldBase<T> {
+    kind: 'date' | 'datetime';
+    /** Restrict the picker calendar to this range. */
+    min?: Date | string;
+    max?: Date | string;
+}
+/**
+ * Statically-known options (sync array, signal, or one-shot promise).
+ * Mirrors `SdTableColumnValues.option`.
+ */
+export interface SdQueryFieldValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+    kind: 'values';
+    option: {
+        items: K[] | Signal<K[]> | (() => Promise<K[]>);
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+    };
+}
+/**
+ * Server-backed options — searchable, paginated. Mirrors `SdTableColumnLazyValues.option`.
+ * `search(req)` runs the live picker query; `views(values)` resolves chip-display labels for selected IDs.
+ */
+export interface SdQueryFieldLazyValues<T = any, K = Record<string, any>> extends SdQueryFieldBase<T> {
+    kind: 'lazy-values';
+    option: {
+        search: (req: {
+            search?: string;
+            size?: number;
+        }) => Observable<K[]> | Promise<K[]>;
+        views?: (values: any[]) => Promise<K[]>;
+        valueField: NestedKeyOf<K>;
+        displayField: NestedKeyOf<K>;
+    };
+}
+export type SdQueryField<T = any> = SdQueryFieldString<T> | SdQueryFieldNumber<T> | SdQueryFieldBoolean<T> | SdQueryFieldDate<T> | SdQueryFieldValues<T> | SdQueryFieldLazyValues<T>;
+export type SdQueryLogic = 'AND' | 'OR';
+export interface SdQuery<T = any> {
+    filters: Filter<T>[];
+    /** Global connector between filters. Defaults to `'AND'`. */
+    logic?: SdQueryLogic;
+    /** Free-text search box (only present when `showSearch=true`). */
+    search?: string;
+}
+/** Full operator set per field kind — used when `operators: true`. */
+export declare const SD_QUERY_OPERATORS_BY_KIND: Record<SdQueryFieldKind, Operator[]>;
+/** Default operator when a chip is created and `field.defaultOperator` is not set. */
+export declare const SD_QUERY_DEFAULT_OPERATOR_BY_KIND: Record<SdQueryFieldKind, Operator>;
+/** Vietnamese operator labels. Replace via i18n in the consuming template if needed. */
+export declare const SD_QUERY_OPERATOR_LABEL: Record<Operator, string>;
+/** Icon fallback per field kind when `SdQueryField.icon` is not set. */
+export declare const SD_QUERY_KIND_ICON: Record<SdQueryFieldKind, string>;
+/**
+ * Resolves the icon shown on chips and in the field picker.
+ * Priority: `field.icon` → `SD_QUERY_KIND_ICON[field.kind]` → `'tune'`.
+ */
+export declare function sdQueryFieldIcon(field: SdQueryField): string;
+/** Operators that carry no data — value section is hidden in chip popover. */
+export declare const SD_QUERY_NO_DATA_OPERATORS: Operator[];
+/** Operators that carry an array payload — UI offers multi-select. */
+export declare const SD_QUERY_MULTI_OPERATORS: Operator[];
+/** Picks the initial operator when a new chip is created for `field`. */
+export declare function sdQueryDefaultOperator(field: SdQueryField): Operator;
+/**
+ * Operators offered in the chip popover for `field`:
+ * - `operators === true` → full set for the kind
+ * - `operators` is an array → that array (deduped against the kind set is the caller's job)
+ * - otherwise (simple mode) → just the single default operator (no real choice)
+ */
+export declare function sdQueryAllowedOperators(field: SdQueryField): Operator[];
+/**
+ * Whether the operator selector should be visible. Simple mode (operators omitted/false,
+ * or an array with a single entry) hides the dropdown — the chip uses one fixed operator.
+ */
+export declare function sdQueryShowOperatorSelector(field: SdQueryField): boolean;
+export {};

package/components/quick-action/src/quick-action.component.d.ts

@@ -1,10 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class SdQuickAction {
-    isOpened: boolean;
-    set _isOpened(isOpened: '' | boolean | undefined | null);
-    constructor();
-    open: () => void;
-    close: () => void;
+    /**
+     * Toggle visibility of the floating toolbar. Bare attribute = true.
+     */
+    readonly opened: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdQuickAction, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "_isOpened": { "alias": "isOpened"; "required": false; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdQuickAction, "sd-quick-action", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; }, {}, never, ["[sdMessage]", "[sdAction]"], true, never>;
 }

package/components/section/index.d.ts

@@ -1 +1,2 @@
 export * from './src/section.component';
+export * from './src/section-item/section-item.component';

package/components/section/src/section-item/section-item.component.d.ts

@@ -0,0 +1,7 @@
+import * as i0 from "@angular/core";
+export declare class SdSectionItem {
+    label: import("@angular/core").InputSignal<string>;
+    labelWidth: import("@angular/core").InputSignalWithTransform<string, string | null | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSectionItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSectionItem, "sd-section-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/components/section/src/section.component.d.ts

@@ -1,18 +1,17 @@
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { SdColor } from '@sd-angular/core/utilities';
 import * as i0 from "@angular/core";
 export declare class SdSection extends SdBaseSecureComponent {
-    title?: string | null;
-    subTitle?: string;
-    icon?: string | null;
-    iconColor?: SdColor;
-    collapsed: boolean;
-    set _collapsed(val: boolean | '' | undefined | null);
-    collapsable: boolean;
-    set _collapsable(val: boolean | '' | undefined | null);
-    hideHeader: boolean;
-    set _hideHeader(val: boolean | '' | undefined | null);
+    #private;
+    title: import("@angular/core").InputSignal<string | null | undefined>;
+    subTitle: import("@angular/core").InputSignal<string | null | undefined>;
+    icon: import("@angular/core").InputSignal<string | null | undefined>;
+    iconColor: import("@angular/core").InputSignal<import("@sdcorejs/utils/models").Color>;
+    collapsed: import("@angular/core").ModelSignal<boolean>;
+    collapsable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    hideHeader: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    noPaddingBody: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    constructor();
     toggleCollapse: () => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSection, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": true; }; "subTitle": { "alias": "subTitle"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconColor": { "alias": "iconColor"; "required": false; }; "_collapsed": { "alias": "collapsed"; "required": false; }; "_collapsable": { "alias": "collapsable"; "required": false; }; "_hideHeader": { "alias": "hideHeader"; "required": false; }; }, {}, never, ["[sdHeaderRight]", "*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSection, "sd-section", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subTitle": { "alias": "subTitle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "collapsable": { "alias": "collapsable"; "required": false; "isSignal": true; }; "hideHeader": { "alias": "hideHeader"; "required": false; "isSignal": true; }; "noPaddingBody": { "alias": "noPaddingBody"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*"], true, never>;
 }

package/components/side-drawer/src/side-drawer.component.d.ts

@@ -1,39 +1,30 @@
 import { CdkPortal } from '@angular/cdk/portal';
-import { AfterViewInit, ApplicationRef, ChangeDetectorRef, EventEmitter, Injector, OnDestroy, ElementRef, ViewContainerRef } from '@angular/core';
 import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
-import { SdLoadingService } from '@sd-angular/core/services';
 import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class SdSideDrawer extends SdBaseSecureComponent implements AfterViewInit, OnDestroy {
+export declare class SdSideDrawer extends SdBaseSecureComponent {
     #private;
-    private viewContainerRef;
-    private ar;
-    private injector;
-    private ref;
-    private loadingService;
     id: string;
-    portal: CdkPortal;
-    drawerContainerRef: ElementRef;
-    title: string;
-    set _title(val: string | null | undefined);
-    width: string;
-    set _width(val: string | null | undefined);
-    hideClose: boolean;
-    set _hideClose(val: boolean | '' | null | undefined);
-    disableClose: boolean;
-    set _disableClose(val: boolean | '' | null | undefined);
-    sdClosed: EventEmitter<any>;
-    isOpened: boolean;
-    isLoading: boolean;
+    portal: import("@angular/core").Signal<CdkPortal>;
+    title: import("@angular/core").InputSignal<string>;
+    width: import("@angular/core").InputSignal<string>;
+    hideClose: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
+    disableBackdropClose: import("@angular/core").InputSignalWithTransform<boolean, boolean | "">;
+    drawerClass: import("@angular/core").InputSignal<any>;
+    readonly autoIdInput: import("@angular/core").InputSignal<string | null | undefined>;
+    readonly autoId: import("@angular/core").Signal<string | undefined>;
+    sdClosed: import("@angular/core").OutputEmitterRef<void>;
+    readonly isOpened: import("@angular/core").Signal<boolean>;
+    readonly isLoading: import("@angular/core").Signal<boolean>;
+    readonly dataOpened: import("@angular/core").Signal<"true" | "false">;
+    readonly dataLoading: import("@angular/core").Signal<"true" | "false">;
     isHovered$: Observable<boolean>;
-    constructor(viewContainerRef: ViewContainerRef, ar: ApplicationRef, injector: Injector, ref: ChangeDetectorRef, loadingService: SdLoadingService);
-    ngAfterViewInit(): void;
+    constructor();
     open: () => void;
     close: () => void;
     startLoading: () => void;
     stopLoading: () => void;
-    ngOnDestroy(): void;
-    getHoverStatusStream(): Observable<boolean>;
+    preventScroll: (event: Event) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdSideDrawer, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdSideDrawer, "sd-side-drawer", never, { "_title": { "alias": "title"; "required": false; }; "_width": { "alias": "width"; "required": false; }; "_hideClose": { "alias": "hideClose"; "required": false; }; "_disableClose": { "alias": "disableClose"; "required": false; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdTitle]", "[sdBody]", "[sdFooter]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSideDrawer, "sd-side-drawer", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "hideClose": { "alias": "hideClose"; "required": false; "isSignal": true; }; "disableBackdropClose": { "alias": "disableBackdropClose"; "required": false; "isSignal": true; }; "drawerClass": { "alias": "drawerClass"; "required": false; "isSignal": true; }; "autoIdInput": { "alias": "autoId"; "required": false; "isSignal": true; }; }, { "sdClosed": "sdClosed"; }, never, ["[sdHeaderLeft]", "[sdHeaderRight]", "*", "[sdFooter]"], true, never>;
 }

package/components/splitter/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/splitter.component';
+export * from './src/splitter-panel/splitter-panel.component';
+export type { SplitterOrientation, SplitterPanelUnit, SplitterPanelState, SplitterLayoutState } from './src/splitter.models';

package/components/splitter/src/splitter-handle/splitter-handle.component.d.ts

@@ -0,0 +1,24 @@
+import { ElementRef } from '@angular/core';
+import { SplitterOrientation } from '../splitter.models';
+import * as i0 from "@angular/core";
+export declare class SdSplitterHandleComponent {
+    #private;
+    readonly elementRef: ElementRef<HTMLElement>;
+    orientation: import("@angular/core").InputSignal<SplitterOrientation>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    keyboardStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    ariaValueMin: import("@angular/core").InputSignal<number | undefined>;
+    ariaValueMax: import("@angular/core").InputSignal<number | undefined>;
+    ariaValueNow: import("@angular/core").InputSignal<number | undefined>;
+    readonly dragStart: import("@angular/core").OutputEmitterRef<void>;
+    readonly dragMove: import("@angular/core").OutputEmitterRef<number>;
+    readonly dragEnd: import("@angular/core").OutputEmitterRef<void>;
+    readonly toggleRequest: import("@angular/core").OutputEmitterRef<void>;
+    onDblClick(): void;
+    onKeyDown(ev: KeyboardEvent): void;
+    onPointerDown(ev: PointerEvent): void;
+    onPointerMove(ev: PointerEvent): void;
+    onPointerUp(ev: PointerEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSplitterHandleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSplitterHandleComponent, "sd-splitter-handle", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; "ariaValueMin": { "alias": "ariaValueMin"; "required": false; "isSignal": true; }; "ariaValueMax": { "alias": "ariaValueMax"; "required": false; "isSignal": true; }; "ariaValueNow": { "alias": "ariaValueNow"; "required": false; "isSignal": true; }; }, { "dragStart": "dragStart"; "dragMove": "dragMove"; "dragEnd": "dragEnd"; "toggleRequest": "toggleRequest"; }, never, never, true, never>;
+}

package/components/splitter/src/splitter-panel/splitter-panel.component.d.ts

@@ -0,0 +1,16 @@
+import { ElementRef } from '@angular/core';
+import { SplitterPanelUnit } from '../splitter.models';
+import * as i0 from "@angular/core";
+export declare class SdSplitterPanelComponent {
+    readonly elementRef: ElementRef<HTMLElement>;
+    panelId: import("@angular/core").InputSignal<string | undefined>;
+    size: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    unit: import("@angular/core").InputSignal<SplitterPanelUnit>;
+    minSize: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    maxSize: import("@angular/core").InputSignalWithTransform<number | undefined, unknown>;
+    collapsible: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    collapsed: import("@angular/core").ModelSignal<boolean>;
+    resizable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSplitterPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSplitterPanelComponent, "sd-splitter-panel", never, { "panelId": { "alias": "panelId"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "minSize": { "alias": "minSize"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "resizable": { "alias": "resizable"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["*"], true, never>;
+}

package/components/splitter/src/splitter-state.service.d.ts

@@ -0,0 +1,26 @@
+import { ResolvedPanelMeta, SplitterLayoutState } from './splitter.models';
+import * as i0 from "@angular/core";
+export declare class SplitterStateService {
+    #private;
+    readonly liveSizes: import("@angular/core").WritableSignal<ReadonlyMap<string | number, number>>;
+    readonly collapsedMap: import("@angular/core").WritableSignal<ReadonlyMap<string | number, boolean>>;
+    readonly committedLayout: import("@angular/core").WritableSignal<SplitterLayoutState>;
+    setPanelMeta(metas: ResolvedPanelMeta[]): void;
+    getPanelMetas(): ReadonlyArray<Readonly<ResolvedPanelMeta>>;
+    setLiveSize(id: string | number, size: number): void;
+    setCollapsed(id: string | number, collapsed: boolean): void;
+    reconcile(metas: ResolvedPanelMeta[], stored: SplitterLayoutState | null | undefined): void;
+    /**
+     * Áp delta px lên 2 panel kề handleIndex (prev = handleIndex, next = handleIndex + 1).
+     * Khi snap collapsible panel: tự set collapsed + reset size = 0.
+     * Khi expand collapsible panel đang collapsed: nếu delta đủ lớn → expand.
+     * Trả về delta thực sự đã áp.
+     */
+    applyDelta(handleIndex: number, deltaPx: number, containerPx: number, snapThreshold?: number): number;
+    collapsePanel(id: string | number): void;
+    expandPanel(id: string | number): void;
+    togglePanel(id: string | number): void;
+    commit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SplitterStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SplitterStateService>;
+}

package/components/splitter/src/splitter.component.d.ts

@@ -0,0 +1,28 @@
+import { SdSplitterPanelComponent } from './splitter-panel/splitter-panel.component';
+import { SplitterLayoutState, SplitterOrientation } from './splitter.models';
+import * as i0 from "@angular/core";
+export declare class SdSplitterComponent {
+    #private;
+    orientation: import("@angular/core").InputSignal<SplitterOrientation>;
+    disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    storageKey: import("@angular/core").InputSignal<string | undefined>;
+    snapThreshold: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    keyboardStep: import("@angular/core").InputSignalWithTransform<number, unknown>;
+    readonly resizeEnd: import("@angular/core").OutputEmitterRef<SplitterLayoutState>;
+    readonly collapsedChange: import("@angular/core").OutputEmitterRef<{
+        panelId: string | number;
+        collapsed: boolean;
+    }>;
+    readonly layoutChange: import("@angular/core").OutputEmitterRef<SplitterLayoutState>;
+    readonly panels: import("@angular/core").Signal<readonly SdSplitterPanelComponent[]>;
+    constructor();
+    getLayout(): SplitterLayoutState;
+    setLayout(state: SplitterLayoutState): void;
+    resetLayout(): void;
+    collapse(target: number | string): void;
+    expand(target: number | string): void;
+    toggle(target: number | string): void;
+    resizePanel(target: number | string, size: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SdSplitterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdSplitterComponent, "sd-splitter", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "storageKey": { "alias": "storageKey"; "required": false; "isSignal": true; }; "snapThreshold": { "alias": "snapThreshold"; "required": false; "isSignal": true; }; "keyboardStep": { "alias": "keyboardStep"; "required": false; "isSignal": true; }; }, { "resizeEnd": "resizeEnd"; "collapsedChange": "collapsedChange"; "layoutChange": "layoutChange"; }, ["panels"], ["sd-splitter-panel"], true, never>;
+}

package/components/splitter/src/splitter.models.d.ts

@@ -0,0 +1,23 @@
+export type SplitterOrientation = 'horizontal' | 'vertical';
+export type SplitterPanelUnit = 'px' | 'flex';
+export interface SplitterPanelState {
+    id: string | number;
+    size: number;
+    unit: SplitterPanelUnit;
+    collapsed: boolean;
+}
+export interface SplitterLayoutState {
+    v: 1;
+    panels: SplitterPanelState[];
+}
+export interface ResolvedPanelMeta {
+    id: string | number;
+    index: number;
+    unit: SplitterPanelUnit;
+    minSize: number;
+    maxSize: number | undefined;
+    collapsible: boolean;
+    resizable: boolean;
+    declaredSize: number;
+    lastSize: number;
+}

package/components/tab-router/src/components/tab-router-item/tab-router-item.component.d.ts

@@ -1,16 +1,19 @@
 import { ChangeDetectorRef, OnDestroy, OnInit } from '@angular/core';
 import { SdTab, SdTabInfo } from '../../models';
 import { SdTabRouterService } from '../../services/tab-router.service';
+import { Router } from '@angular/router';
 import * as i0 from "@angular/core";
 export declare class SdTabRouterItemComponent implements OnInit, OnDestroy {
     #private;
     private cdRef;
     private tabRouterService;
+    private router;
     tab: SdTab;
     tabInfo?: SdTabInfo;
-    constructor(cdRef: ChangeDetectorRef, tabRouterService: SdTabRouterService);
+    constructor(cdRef: ChangeDetectorRef, tabRouterService: SdTabRouterService, router: Router);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    onTabClick: (event: Event) => void;
     close: (event: Event) => void;
     onMousedown: (event: MouseEvent) => void;
     onMouseup: (event: MouseEvent) => void;

package/components/tab-router/src/components/tab-router-nav/tab-router-nav.component.d.ts

@@ -3,15 +3,14 @@ import { ChangeDetectorRef, ElementRef } from '@angular/core';
 import { SdTab } from '../../models/tab-router.model';
 import * as i0 from "@angular/core";
 export declare class SdTabRouterNavComponent {
-    private cdRef;
-    elementRef: ElementRef<any>;
-    tabRouterNav?: ElementRef;
-    tabs: SdTab[];
+    tabRouterNav: import("@angular/core").Signal<ElementRef<any> | undefined>;
+    tabs: import("@angular/core").InputSignal<SdTab[]>;
     mode: 'default' | 'compact';
-    constructor(cdRef: ChangeDetectorRef, elementRef: ElementRef<any>);
+    cdRef: ChangeDetectorRef;
+    elementRef: ElementRef<any>;
     onResize(): void;
     checkUI: () => void;
     onDrop: (event: CdkDragDrop<SdTab[]>) => void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SdTabRouterNavComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SdTabRouterNavComponent, "sd-tab-router-nav", never, { "tabs": { "alias": "tabs"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SdTabRouterNavComponent, "sd-tab-router-nav", never, { "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }