@sd-angular/core 19.0.0-beta.18 → 19.0.0-beta.19

package/components/table/src/directives/sticky-shadow.directive.d.ts

@@ -1,4 +1,14 @@
 import * as i0 from "@angular/core";
+/**
+ * Directive thêm hiệu ứng đổ bóng (elevation-2) vào cột sticky cuối cùng bên trái
+ * và cột sticky đầu tiên bên phải, tạo ngăn cách trực quan với phần được scroll.
+ *
+ * Chỉ dùng nội bộ trong sd-table, không chìa ra ngoài.
+ *
+ * Gắn vào scroll container của table:
+ * @example
+ * <div class="c-table" stickyShadow>...</div>
+ */
 export declare class StickyShadowDirective {
     #private;
     constructor();

package/components/table/src/models/table-column.model.d.ts

@@ -1,7 +1,7 @@
 import { TemplateRef } from '@angular/core';
 import { SdBadge } from '@sd-angular/core/components/badge';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdColor, SdOperator } from '@sd-angular/core/utilities';
+import { SdColor, SdNestedKeyOf, SdOperator } from '@sd-angular/core/utilities';
 export type SdTableColumn<T = any> = SdTableColumnText<T> | SdTableColumnNumber<T> | SdTableColumnBool<T> | SdTableColumnDate<T> | SdTableColumnValues<T> | SdTableColumnLazyValues<T> | SdTableColumnChildren<T>;
 export type SdTableColumnTransformFunc<T = any> = (value: any, rowData: T, args?: {
     isExport?: boolean;
@@ -45,14 +45,14 @@ interface SdTableColumnBase<T = any> {
     copiable?: boolean;
 }
 interface SdTableColumnText<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'string';
     badge?: (value: any, rowData: T) => SdColor;
     badgeIcon?: (value: any, rowData: T) => string;
     badgeType?: SdBadge['type'];
 }
 interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'number';
     badge?: (value: any, rowData: T) => SdColor;
     badgeIcon?: (value: any, rowData: T) => string;
@@ -62,7 +62,7 @@ interface SdTableColumnNumber<T = any> extends SdTableColumnBase<T> {
     };
 }
 interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'boolean';
     option?: {
         displayOnTrue?: string;
@@ -70,14 +70,14 @@ interface SdTableColumnBool<T = any> extends SdTableColumnBase<T> {
     };
 }
 interface SdTableColumnDate<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'date' | 'datetime' | 'time';
     filter?: SdTableColumnBase['filter'] & {
         type?: 'daterange' | 'date' | 'split-date';
     };
 }
 export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'values';
     badge?: (value: any, rowData: T) => SdColor;
     badgeIcon?: (value: any, rowData: T) => string;
@@ -90,7 +90,7 @@ export interface SdTableColumnValues<T = any> extends SdTableColumnBase<T> {
     };
 }
 export interface SdTableColumnLazyValues<T = any> extends SdTableColumnBase<T> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     type: 'lazy-values';
     option: {
         valueField: string;

package/components/table/src/models/table-option-export.model.d.ts

@@ -1,3 +1,4 @@
+import { SdNestedKeyOf } from '@sd-angular/core/utilities';
 import { SdTableFilterRequest } from '../services/table-filter/table-filter.model';
 export type SdTableOptionExport<T = any> = SdTableOptionExportDefault<T> | SdTableOptionExportCustom;
 export interface SdTableOptionExportDefault<T = any> {
@@ -22,7 +23,7 @@ export interface SdTableOptionExportCustom {
     onExport: (filterRequest: SdTableFilterRequest) => Promise<void>;
 }
 export interface SdTableOptionExportColumn<T = any> {
-    field: Extract<keyof T, string>;
+    field: SdNestedKeyOf<T>;
     title: string;
     description?: string;
     width?: string;
@@ -35,7 +36,7 @@ export interface SdTableOptionExportSheet<T = any> {
     name: string;
     items: T[] | (() => T[] | Promise<T[]>);
     headers: {
-        value: Extract<keyof T, string>;
+        value: SdNestedKeyOf<T>;
         display: string;
     }[];
 }

package/components/table/src/services/table-filter/table-filter.model.d.ts

@@ -2,7 +2,7 @@ import { Observable } from 'rxjs';
 import { SdTableColumn } from '../../models/table-column.model';
 import { TemplateRef } from '@angular/core';
 import { SdSearch } from '@sd-angular/core/forms';
-import { SdOperator, SdOrder, SdPagingReq } from '@sd-angular/core/utilities';
+import { SdNestedKeyOf, SdOperator, SdOrder, SdPagingReq } from '@sd-angular/core/utilities';
 export interface SdTableQuickFilter {
     code: string;
     columnFilter: Record<string, any>;
@@ -20,7 +20,7 @@ export interface TableFilterValue {
 }
 export interface SdTableFilterRequest<T = any> {
     columnOperator: Record<string, SdOperator>;
-    rawColumnFilter: Record<keyof T, any>;
+    rawColumnFilter: Record<SdNestedKeyOf<T>, any>;
     rawExternalFilter: Record<string, any>;
     pageNumber: number;
     pageSize: number;

package/fesm2022/sd-angular-core-components-table.mjs

@@ -1866,31 +1866,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             }] } });
 
 // sticky-shadow.directive.ts
+/**
+ * Directive thêm hiệu ứng đổ bóng (elevation-2) vào cột sticky cuối cùng bên trái
+ * và cột sticky đầu tiên bên phải, tạo ngăn cách trực quan với phần được scroll.
+ *
+ * Chỉ dùng nội bộ trong sd-table, không chìa ra ngoài.
+ *
+ * Gắn vào scroll container của table:
+ * @example
+ * <div class="c-table" stickyShadow>...</div>
+ */
 class StickyShadowDirective {
     #el = inject((ElementRef));
     #destroyRef = inject(DestroyRef);
     constructor() {
         afterNextRender(() => {
             const container = this.#el.nativeElement;
-            this.#updateShadow(container);
+            // Dùng MutationObserver để detect khi CDK render rows mới vào table
+            // (data load async, phân trang, ...) — lúc này td mới có đủ sticky classes
+            const mutationObserver = new MutationObserver(() => {
+                this.#updateShadow(container);
+            });
+            mutationObserver.observe(container, {
+                childList: true, // Theo dõi thêm/bớt các node con
+                subtree: true, // Bao gồm tất cả các cấp con cháu
+            });
+            // Cập nhật shadow mỗi khi user scroll ngang
             fromEvent(container, 'scroll')
                 .pipe(debounceTime(10), takeUntilDestroyed(this.#destroyRef))
                 .subscribe(() => this.#updateShadow(container));
+            // Disconnect MutationObserver khi directive bị destroy
+            this.#destroyRef.onDestroy(() => mutationObserver.disconnect());
         });
     }
+    /**
+     * Toggle class shadow lên tất cả th và td của một cột.
+     * Dùng cdk-column-{field} để xác định cột vì Angular CDK
+     * add class này đồng nhất lên cả th lẫn td.
+     */
     #setShadow(container, colClass, shadowClass, add) {
-        container.querySelectorAll(`th.${colClass}, td.${colClass}`)
-            .forEach(el => el.classList.toggle(shadowClass, add));
+        container.querySelectorAll(`th.${colClass}, td.${colClass}`).forEach(el => el.classList.toggle(shadowClass, add));
     }
+    /**
+     * Tính toán và cập nhật shadow dựa trên vị trí scroll hiện tại.
+     *
+     * Angular Material đánh dấu sticky left bằng class `mat-mdc-table-sticky-border-elem-left`
+     * và sticky right bằng `mat-mdc-table-sticky-border-elem-right` — dùng các class này
+     * để detect thay vì getComputedStyle vì reliable hơn.
+     *
+     * Chỉ apply shadow cho:
+     * - Cột cuối cùng trong nhóm sticky-left (sát phần scroll)
+     * - Cột đầu tiên trong nhóm sticky-right (sát phần scroll)
+     */
     #updateShadow(container) {
         const scrollLeft = container.scrollLeft;
         const scrollRight = container.scrollWidth - container.clientWidth - scrollLeft;
+        // Query trên header row đầu tiên để xác định các cột sticky
+        // td sẽ được xử lý thông qua #setShadow theo cdk-column class
         const headerRow = container.querySelector('tr.c-first-header');
         if (!headerRow)
             return;
-        const allStickyLeft = Array.from(headerRow.querySelectorAll('th.mat-mdc-table-sticky:not(.mat-mdc-table-sticky-border-elem-right)'));
+        const allStickyLeft = Array.from(headerRow.querySelectorAll('th.mat-mdc-table-sticky-border-elem-left'));
         const allStickyRight = Array.from(headerRow.querySelectorAll('th.mat-mdc-table-sticky-border-elem-right'));
-        // Reset tất cả trước
+        // Reset shadow toàn bộ các cột sticky trước khi tính lại
         allStickyLeft.forEach(th => {
             const colClass = [...th.classList].find(c => c.startsWith('cdk-column-'));
             if (colClass)
@@ -1901,14 +1939,14 @@ class StickyShadowDirective {
             if (colClass)
                 this.#setShadow(container, colClass, 'sticky-shadow-left', false);
         });
-        // Chỉ cột cuối sticky-left mới có shadow
+        // Chỉ cột cuối cùng sticky-left có shadow khi đang scroll sang phải
         const lastStickyLeft = allStickyLeft.at(-1);
         if (lastStickyLeft && scrollLeft > 0) {
             const colClass = [...lastStickyLeft.classList].find(c => c.startsWith('cdk-column-'));
             if (colClass)
                 this.#setShadow(container, colClass, 'sticky-shadow-right', true);
         }
-        // Chỉ cột đầu sticky-right mới có shadow
+        // Chỉ cột đầu tiên sticky-right có shadow khi chưa scroll hết sang phải
         const firstStickyRight = allStickyRight.at(0);
         if (firstStickyRight && scrollRight > 0) {
             const colClass = [...firstStickyRight.classList].find(c => c.startsWith('cdk-column-'));