ngx-pk-ui 1.0.1 → 1.0.3

package/README.md

@@ -4,6 +4,8 @@ Angular 21 UI component library and CSS utilities.
 
 License: MIT
 
+npm: https://www.npmjs.com/package/ngx-pk-ui
+
 Repository: https://github.com/superpck/ngx-pk-ui
 
 Demo & Usage: https://superpck.github.io/ngx-pk-ui/

package/fesm2022/ngx-pk-ui.mjs

@@ -265,6 +265,10 @@ const PK_ICONS = {
     'plus': `<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>`,
     'list': `<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>`,
     'reload': `<polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4-4.64 4.36A9 9 0 0 1 3.51 15"/>`,
+    'chevron-right': `<polyline points="9 18 15 12 9 6"/>`,
+    'chevron-left': `<polyline points="15 18 9 12 15 6"/>`,
+    'chevron-up': `<polyline points="18 15 12 9 6 15"/>`,
+    'chevron-down': `<polyline points="6 9 12 15 18 9"/>`,
     // ── Users & Auth ─────────────────────────────────────────────────────────
     'user': `<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`,
     'users': `<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>`,
@@ -416,10 +420,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
   `, styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:1}:host span{display:inline-flex;align-items:center;justify-content:center}:host span svg{display:block}.pk-material-symbol{line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr}\n"] }]
         }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], iconSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSet", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], fillColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillColor", required: false }] }], viewBox: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewBox", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], grade: [{ type: i0.Input, args: [{ isSignal: true, alias: "grade", required: false }] }], opticalSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "opticalSize", required: false }] }] } });
 
-class PkDgColumnComponent {
+class PkDgHeaderComponent {
     el;
-    pkDgField;
-    pkDgFilterKey;
+    pkDgSort;
+    pkDgFilter;
     widthPx;
     width;
     headerText = '';
@@ -427,11 +431,8 @@ class PkDgColumnComponent {
         this.el = el;
     }
     ngAfterViewInit() {
-        // Extract text content for header
         const nativeElement = this.el.nativeElement;
         this.headerText = nativeElement.textContent?.trim() || '';
-        // @Input('style.width.px') is bypassed by Angular's style binding pipeline —
-        // read from the host element's actual inline style as the reliable source
         if (!this.widthPx) {
             const styleWidth = nativeElement.style.width;
             if (styleWidth && styleWidth.endsWith('px')) {
@@ -439,22 +440,22 @@ class PkDgColumnComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgColumnComponent, isStandalone: false, selector: "pk-dg-column", inputs: { pkDgField: "pkDgField", pkDgFilterKey: "pkDgFilterKey", widthPx: ["style.width.px", "widthPx"] }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgHeaderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgHeaderComponent, isStandalone: false, selector: "pk-dg-header", inputs: { pkDgSort: "pkDgSort", pkDgFilter: "pkDgFilter", widthPx: ["style.width.px", "widthPx"] }, host: { styleAttribute: "display: none" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgHeaderComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'pk-dg-column',
+                    selector: 'pk-dg-header',
                     template: '<ng-content></ng-content>',
                     standalone: false,
                     host: {
                         'style': 'display: none'
                     }
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { pkDgField: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { pkDgSort: [{
                 type: Input
-            }], pkDgFilterKey: [{
+            }], pkDgFilter: [{
                 type: Input
             }], widthPx: [{
                 type: Input,
@@ -463,7 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 
 class PkDgPageSizeComponent {
     cdr;
-    pkPageSizeOptions = [10, 20, 50, 100];
+    pkPageSizeList = [10, 20, 50, 100];
     pagination = null;
     constructor(cdr) {
         this.cdr = cdr;
@@ -473,26 +474,26 @@ class PkDgPageSizeComponent {
         this.cdr.detectChanges();
     }
     get currentSize() {
-        return this.pagination?.pkDgPageSize ?? this.pkPageSizeOptions[0];
+        return this.pagination?.pkDgPageSize ?? this.pkPageSizeList[0];
     }
     onChange(event) {
         const value = +event.target.value;
         this.pagination?.onPageSizeChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPageSizeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPageSizeComponent, isStandalone: false, selector: "pk-dg-page-size", inputs: { pkPageSizeOptions: "pkPageSizeOptions" }, ngImport: i0, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeOptions; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPageSizeComponent, isStandalone: false, selector: "pk-dg-page-size", inputs: { pkPageSizeList: "pkPageSizeList" }, ngImport: i0, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeList; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"], dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPageSizeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-dg-page-size', standalone: false, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeOptions; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { pkPageSizeOptions: [{
+            args: [{ selector: 'pk-dg-page-size', standalone: false, template: "<span class=\"pk-dg-page-size\">\n  <ng-content></ng-content>\n  <select (change)=\"onChange($event)\">\n    @for (opt of pkPageSizeList; track opt) {\n      <option [value]=\"opt\" [selected]=\"opt === currentSize\">{{ opt }}</option>\n    }\n  </select>\n</span>\n", styles: [".pk-dg-page-size{display:inline-flex;align-items:center;gap:6px;margin-right:16px;font-size:13px;color:#555}.pk-dg-page-size select{padding:2px 6px;border:1px solid #ccc;border-radius:3px;font-size:13px;background:#fff;cursor:pointer}.pk-dg-page-size select:focus{outline:none;border-color:#0072a3}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { pkPageSizeList: [{
                 type: Input
             }] } });
 
 class PkDgPaginationComponent {
     pageSize;
     pkDgPageSize = 10;
-    totalItems = 0;
+    rowCount = 0;
     pkDgPageChange = new EventEmitter();
     pkDgPageSizeChange = new EventEmitter();
     currentPage = 1;
@@ -511,10 +512,10 @@ class PkDgPaginationComponent {
     }
     updatePagination() {
         this.firstItem = (this.currentPage - 1) * this.pkDgPageSize;
-        this.lastItem = Math.min(this.firstItem + this.pkDgPageSize, this.totalItems);
+        this.lastItem = Math.min(this.firstItem + this.pkDgPageSize, this.rowCount);
     }
     get totalPages() {
-        return Math.ceil(this.totalItems / this.pkDgPageSize);
+        return Math.ceil(this.rowCount / this.pkDgPageSize);
     }
     goToPage(page) {
         if (page >= 1 && page <= this.totalPages) {
@@ -543,7 +544,7 @@ class PkDgPaginationComponent {
         return pages;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPaginationComponent, isStandalone: false, selector: "pk-dg-pagination", inputs: { pkDgPageSize: "pkDgPageSize", totalItems: "totalItems" }, outputs: { pkDgPageChange: "pkDgPageChange", pkDgPageSizeChange: "pkDgPageSizeChange" }, queries: [{ propertyName: "pageSize", first: true, predicate: PkDgPageSizeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-dg-pagination\">\n  <div class=\"pagination-info\">\n    <ng-content></ng-content>\n  </div>\n  \n  <div class=\"pagination-controls\">\n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPage(currentPage - 1)\">\n      \u2039\n    </button>\n    \n    @for (page of pages; track page) {\n      <button \n        class=\"btn btn-sm\"\n        [class.btn-primary]=\"page === currentPage\"\n        [class.btn-link]=\"page !== currentPage\"\n        (click)=\"goToPage(page)\">\n        {{ page }}\n      </button>\n    }\n    \n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToPage(currentPage + 1)\">\n      \u203A\n    </button>\n  </div>\n</div>\n", styles: [".pk-dg-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid #e0e0e0;background:#fafafa}.pk-dg-pagination .pagination-info{color:#565656;font-size:14px}.pk-dg-pagination .pagination-controls{display:flex;gap:4px}.pk-dg-pagination .pagination-controls .btn{min-width:32px;padding:4px 8px}.pk-dg-pagination .pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgPaginationComponent, isStandalone: false, selector: "pk-dg-pagination", inputs: { pkDgPageSize: "pkDgPageSize", rowCount: "rowCount" }, outputs: { pkDgPageChange: "pkDgPageChange", pkDgPageSizeChange: "pkDgPageSizeChange" }, queries: [{ propertyName: "pageSize", first: true, predicate: PkDgPageSizeComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-dg-pagination\">\n  <div class=\"pagination-info\">\n    <ng-content></ng-content>\n  </div>\n  \n  <div class=\"pagination-controls\">\n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === 1\"\n      (click)=\"goToPage(currentPage - 1)\">\n      \u2039\n    </button>\n    \n    @for (page of pages; track page) {\n      <button \n        class=\"btn btn-sm\"\n        [class.btn-primary]=\"page === currentPage\"\n        [class.btn-link]=\"page !== currentPage\"\n        (click)=\"goToPage(page)\">\n        {{ page }}\n      </button>\n    }\n    \n    <button \n      class=\"btn btn-sm btn-link\"\n      [disabled]=\"currentPage === totalPages\"\n      (click)=\"goToPage(currentPage + 1)\">\n      \u203A\n    </button>\n  </div>\n</div>\n", styles: [".pk-dg-pagination{display:flex;align-items:center;justify-content:space-between;padding:12px;border-top:1px solid #e0e0e0;background:#fafafa}.pk-dg-pagination .pagination-info{color:#565656;font-size:14px}.pk-dg-pagination .pagination-controls{display:flex;gap:4px}.pk-dg-pagination .pagination-controls .btn{min-width:32px;padding:4px 8px}.pk-dg-pagination .pagination-controls .btn:disabled{opacity:.5;cursor:not-allowed}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgPaginationComponent, decorators: [{
             type: Component,
@@ -553,7 +554,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [PkDgPageSizeComponent]
             }], pkDgPageSize: [{
                 type: Input
-            }], totalItems: [{
+            }], rowCount: [{
                 type: Input
             }], pkDgPageChange: [{
                 type: Output
@@ -562,26 +563,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class PkDgRowComponent {
-    pkDgItem;
+    pkDgRow;
     detailTemplate;
     isExpanded = false;
     hasDetail = false;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgRowComponent, isStandalone: false, selector: "pk-dg-row", inputs: { pkDgItem: "pkDgItem" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true }], ngImport: i0, template: "<tr class=\"pk-dg-row\">\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon\n          iconSet=\"material-symbols\"\n          [name]=\"isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\"\n          [size]=\"16\"\n          color=\"currentColor\"\n        ></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-detail\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-detail\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgRowComponent, isStandalone: false, selector: "pk-dg-rows", inputs: { pkDgRow: "pkDgRow" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true }], ngImport: i0, template: "<tr class=\"pk-dg-row\">\n  <ng-content select=\"pk-dg-action\"></ng-content>\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" [size]=\"16\" color=\"currentColor\"></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-expand\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-expand\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-dg-row', standalone: false, host: {
+            args: [{ selector: 'pk-dg-rows', standalone: false, host: {
                         'style': 'display: contents'
-                    }, template: "<tr class=\"pk-dg-row\">\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon\n          iconSet=\"material-symbols\"\n          [name]=\"isExpanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'\"\n          [size]=\"16\"\n          color=\"currentColor\"\n        ></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-detail\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-detail\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"] }]
-        }], propDecorators: { pkDgItem: [{
+                    }, template: "<tr class=\"pk-dg-row\">\n  <ng-content select=\"pk-dg-action\"></ng-content>\n  @if (hasDetail) {\n    <td class=\"pk-dg-expand-btn-cell\">\n      <button class=\"pk-dg-expand-btn\" [class.expanded]=\"isExpanded\" (click)=\"isExpanded=!isExpanded; $event.stopPropagation()\" title=\"\u0E02\u0E22\u0E32\u0E22/\u0E22\u0E48\u0E2D\">\n        <pk-icon [name]=\"isExpanded ? 'chevron-down' : 'chevron-right'\" [size]=\"16\" color=\"currentColor\"></pk-icon>\n      </button>\n    </td>\n  } @else {\n    <td class=\"pk-dg-expand-btn-cell pk-dg-no-detail\"></td>\n  }\n  <ng-content></ng-content>\n</tr>\n@if (isExpanded) {\n  <tr class=\"pk-dg-row-expand\">\n    <td [attr.colspan]=\"999\">\n      <ng-content select=\"pk-dg-row-expand\"></ng-content>\n    </td>\n  </tr>\n}\n", styles: [":host{display:contents}.pk-dg-expand-btn-cell{width:28px;min-width:28px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-expand-btn-cell.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-dg-expand-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:22px;height:22px;margin:auto}.pk-dg-expand-btn:hover{background:#e8f4ff;color:#0072a3}.pk-dg-expand-btn.expanded{color:#0072a3}.pk-dg-chevron{width:14px;height:14px;transition:transform .2s ease;transform:rotate(-90deg)}.pk-dg-expand-btn.expanded .pk-dg-chevron{transform:rotate(0)}\n"] }]
+        }], propDecorators: { pkDgRow: [{
                 type: Input
             }], detailTemplate: [{
                 type: ContentChild,
                 args: ['detail']
             }] } });
 
-class PkDgRowDetailComponent {
+class PkDgRowExpandComponent {
     row;
     constructor(row) {
         this.row = row;
@@ -591,13 +592,13 @@ class PkDgRowDetailComponent {
             this.row.hasDetail = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowDetailComponent, deps: [{ token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgRowDetailComponent, isStandalone: false, selector: "pk-dg-row-detail", host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowExpandComponent, deps: [{ token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgRowExpandComponent, isStandalone: false, selector: "pk-dg-row-expand", host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowExpandComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'pk-dg-row-detail',
+                    selector: 'pk-dg-row-expand',
                     template: '<ng-content></ng-content>',
                     standalone: false,
                     host: {
@@ -610,7 +611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     type: Optional
                 }] }] });
 
-class PkDgItemsDirective {
+class PkDgRowsDirective {
     templateRef;
     viewContainer;
     datagrid;
@@ -631,13 +632,13 @@ class PkDgItemsDirective {
             }
         }
     }
-    set pkDgItemsOf(items) {
+    set pkDgRowsOf(items) {
         this._items = items || [];
         // Push items to parent datagrid so it can handle pagination/sorting
         if (this.datagrid) {
             this.datagrid.items = this._items;
             if (this.datagrid.pagination) {
-                this.datagrid.pagination.totalItems = this._items.length;
+                this.datagrid.pagination.rowCount = this._items.length;
                 this.datagrid.pagination.updatePagination();
             }
             this.datagrid.updateDisplayedItems();
@@ -656,13 +657,13 @@ class PkDgItemsDirective {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgItemsDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: forwardRef(() => PkDatagridComponent), optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkDgItemsDirective, isStandalone: false, selector: "[pkDgItems]", inputs: { pkDgItemsOf: "pkDgItemsOf" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowsDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: forwardRef(() => PkDatagridComponent), optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkDgRowsDirective, isStandalone: false, selector: "[pkDgRows]", inputs: { pkDgRowsOf: "pkDgRowsOf" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgItemsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowsDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[pkDgItems]',
+                    selector: '[pkDgRows]',
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PkDatagridComponent, decorators: [{
@@ -670,10 +671,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }, {
                     type: Inject,
                     args: [forwardRef(() => PkDatagridComponent)]
-                }] }], propDecorators: { pkDgItemsOf: [{
+                }] }], propDecorators: { pkDgRowsOf: [{
                 type: Input
             }] } });
-class PkIfExpandedDirective {
+class PkDgRowIsExpandDirective {
     templateRef;
     viewContainer;
     row;
@@ -702,13 +703,13 @@ class PkIfExpandedDirective {
             this.viewContainer.clear();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIfExpandedDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkIfExpandedDirective, isStandalone: false, selector: "[pkIfExpanded]", ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowIsExpandDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: PkDgRowComponent, host: true, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: PkDgRowIsExpandDirective, isStandalone: false, selector: "[pkDgRowIsExpand]", ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkIfExpandedDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowIsExpandDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[pkIfExpanded]',
+                    selector: '[pkDgRowIsExpand]',
                     standalone: false
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: PkDgRowComponent, decorators: [{
@@ -732,12 +733,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+class PkDgActionComponent {
+    isOpen = false;
+    menuPos = { top: 0, left: 0 };
+    toggle(event) {
+        event.stopPropagation();
+        const btn = event.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        this.menuPos = { top: rect.bottom + 4, left: rect.left };
+        this.isOpen = !this.isOpen;
+    }
+    onDocumentClick() {
+        this.isOpen = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDgActionComponent, isStandalone: false, selector: "pk-dg-action", host: { listeners: { "document:click": "onDocumentClick()" }, styleAttribute: "display: contents" }, ngImport: i0, template: "<td class=\"pk-dg-action-cell\">\n  <button class=\"pk-dg-action-btn\" [class.active]=\"isOpen\" (click)=\"toggle($event)\" title=\"Actions\">\n    <pk-icon name=\"menu\" [size]=\"16\" color=\"currentColor\"></pk-icon>\n  </button>\n  @if (isOpen) {\n    <div class=\"pk-dg-action-menu\"\n      [style.top.px]=\"menuPos.top\"\n      [style.left.px]=\"menuPos.left\"\n      (click)=\"isOpen = false; $event.stopPropagation()\">\n      <ng-content></ng-content>\n    </div>\n  }\n</td>\n", styles: [":host{display:contents}.pk-dg-action-cell{width:32px;min-width:32px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-action-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:28px;height:28px;margin:auto}.pk-dg-action-btn:hover,.pk-dg-action-btn.active{background:#e8f4ff;color:#0072a3}.pk-dg-action-menu{position:fixed;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 8px 24px #00000026;z-index:9999;min-width:160px;padding:4px 0;overflow:hidden}.pk-dg-action-menu ::ng-deep .action-item{display:flex;align-items:center;gap:6px;width:100%;padding:8px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:13px;color:#333;box-sizing:border-box;transition:background .1s;white-space:nowrap}.pk-dg-action-menu ::ng-deep .action-item:hover:not([disabled]){background:#f0f6ff;color:#0072a3}.pk-dg-action-menu ::ng-deep .action-item[disabled]{color:#bbb;cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgActionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pk-dg-action', standalone: false, host: {
+                        'style': 'display: contents'
+                    }, template: "<td class=\"pk-dg-action-cell\">\n  <button class=\"pk-dg-action-btn\" [class.active]=\"isOpen\" (click)=\"toggle($event)\" title=\"Actions\">\n    <pk-icon name=\"menu\" [size]=\"16\" color=\"currentColor\"></pk-icon>\n  </button>\n  @if (isOpen) {\n    <div class=\"pk-dg-action-menu\"\n      [style.top.px]=\"menuPos.top\"\n      [style.left.px]=\"menuPos.left\"\n      (click)=\"isOpen = false; $event.stopPropagation()\">\n      <ng-content></ng-content>\n    </div>\n  }\n</td>\n", styles: [":host{display:contents}.pk-dg-action-cell{width:32px;min-width:32px;padding:0 2px;text-align:center;border:1px solid #e8e8e8;vertical-align:middle}.pk-dg-action-btn{background:none;border:none;cursor:pointer;padding:2px;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:color .15s,background .15s;width:28px;height:28px;margin:auto}.pk-dg-action-btn:hover,.pk-dg-action-btn.active{background:#e8f4ff;color:#0072a3}.pk-dg-action-menu{position:fixed;background:#fff;border:1px solid #d0d7de;border-radius:6px;box-shadow:0 8px 24px #00000026;z-index:9999;min-width:160px;padding:4px 0;overflow:hidden}.pk-dg-action-menu ::ng-deep .action-item{display:flex;align-items:center;gap:6px;width:100%;padding:8px 14px;text-align:left;background:none;border:none;cursor:pointer;font-size:13px;color:#333;box-sizing:border-box;transition:background .1s;white-space:nowrap}.pk-dg-action-menu ::ng-deep .action-item:hover:not([disabled]){background:#f0f6ff;color:#0072a3}.pk-dg-action-menu ::ng-deep .action-item[disabled]{color:#bbb;cursor:not-allowed}\n"] }]
+        }], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click']
+            }] } });
+
 class PkDatagridComponent {
     cdr;
     columns;
     pagination;
     rowDetails;
     expandDirectives;
+    actionComponents;
+    get hasActionCol() {
+        return this.actionComponents ? this.actionComponents.length > 0 : false;
+    }
     get hasExpandCol() {
         if (this.expandDirectives && this.expandDirectives.length > 0)
             return true;
@@ -765,7 +796,7 @@ class PkDatagridComponent {
     _resizeEndRef = () => this._onResizeEnd();
     get totalWidth() {
         const sum = this.columnWidths.reduce((acc, w) => acc + w, 0);
-        return sum + (this.hasExpandCol ? 32 : 0);
+        return sum + (this.hasExpandCol ? 32 : 0) + (this.hasActionCol ? 32 : 0);
     }
     _initColumnWidths() {
         const cols = this.columns ? this.columns.toArray() : [];
@@ -799,7 +830,7 @@ class PkDatagridComponent {
         // Also re-update displayed items to ensure pagination is initialized
         setTimeout(() => {
             if (this.pagination) {
-                this.pagination.totalItems = this.items.length;
+                this.pagination.rowCount = this.items.length;
                 this.pagination.updatePagination();
             }
             this._initColumnWidths();
@@ -831,7 +862,7 @@ class PkDatagridComponent {
         }
         // Keep pagination counts in sync with filtered result
         if (this.pagination) {
-            this.pagination.totalItems = result.length;
+            this.pagination.rowCount = result.length;
             if (this.pagination.currentPage > this.pagination.totalPages && this.pagination.totalPages > 0) {
                 this.pagination.currentPage = this.pagination.totalPages;
             }
@@ -963,23 +994,26 @@ class PkDatagridComponent {
         this._onResizeEnd();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatagridComponent, isStandalone: false, selector: "pk-datagrid", inputs: { pkDgLoading: "pkDgLoading", items: "items", filterValues: "filterValues" }, outputs: { pkDgRefresh: "pkDgRefresh", filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, queries: [{ propertyName: "pagination", first: true, predicate: PkDgPaginationComponent, descendants: true }, { propertyName: "columns", predicate: PkDgColumnComponent }, { propertyName: "rowDetails", predicate: PkDgRowDetailComponent, descendants: true }, { propertyName: "expandDirectives", predicate: PkIfExpandedDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgField; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgField) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgField\"\n                    (click)=\"onSort(column.pkDgField)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      iconSet=\"material-symbols\"\n                      [name]=\"sortColumn === column.pkDgField ? (sortDirection === 'asc' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : 'unfold_more'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilterKey) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilterKey]\"\n                    (click)=\"openFilter(column.pkDgFilterKey, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilterKey && activeFilterCol === column.pkDgFilterKey) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilterKey] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilterKey, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-row\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-detail,.pk-datagrid tbody tr.pk-dg-row-detail:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-detail td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: PkDatagridComponent, isStandalone: false, selector: "pk-datagrid", inputs: { pkDgLoading: "pkDgLoading", items: "items", filterValues: "filterValues" }, outputs: { pkDgRefresh: "pkDgRefresh", filterChange: "filterChange" }, host: { listeners: { "document:click": "onDocumentClick()" } }, queries: [{ propertyName: "pagination", first: true, predicate: PkDgPaginationComponent, descendants: true }, { propertyName: "columns", predicate: PkDgHeaderComponent }, { propertyName: "rowDetails", predicate: PkDgRowExpandComponent, descendants: true }, { propertyName: "expandDirectives", predicate: PkDgRowIsExpandDirective, descendants: true }, { propertyName: "actionComponents", predicate: PkDgActionComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasActionCol) {\n          <th class=\"pk-dg-action-th\"></th>\n        }\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgSort; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgSort) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgSort\"\n                    (click)=\"onSort(column.pkDgSort)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      [name]=\"sortColumn === column.pkDgSort ? (sortDirection === 'asc' ? 'chevron-up' : 'chevron-down') : 'sort'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilter) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilter]\"\n                    (click)=\"openFilter(column.pkDgFilter, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilter && activeFilterCol === column.pkDgFilter) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilter] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilter, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-rows\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-expand,.pk-datagrid tbody tr.pk-dg-row-expand:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-expand td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-datagrid .pk-dg-action-th{width:32px;min-width:32px;padding:0}\n"], dependencies: [{ kind: "component", type: PkIcon, selector: "pk-icon", inputs: ["name", "iconSet", "size", "color", "fillColor", "viewBox", "strokeWidth", "variant", "fill", "weight", "grade", "opticalSize"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-datagrid', standalone: false, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgField; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgField) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgField\"\n                    (click)=\"onSort(column.pkDgField)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      iconSet=\"material-symbols\"\n                      [name]=\"sortColumn === column.pkDgField ? (sortDirection === 'asc' ? 'keyboard_arrow_up' : 'keyboard_arrow_down') : 'unfold_more'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilterKey) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilterKey]\"\n                    (click)=\"openFilter(column.pkDgFilterKey, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilterKey && activeFilterCol === column.pkDgFilterKey) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilterKey] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilterKey, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-row\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-detail,.pk-datagrid tbody tr.pk-dg-row-detail:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-detail td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}\n"] }]
+            args: [{ selector: 'pk-datagrid', standalone: false, template: "<div class=\"pk-datagrid-container\">\n  @if (pkDgLoading) {\n    <div class=\"pk-datagrid-spinner\">\n      <div class=\"spinner\"></div>\n      <span>Loading...</span>\n    </div>\n  }\n  \n  <table class=\"pk-datagrid\" style=\"table-layout: fixed\" [style.min-width.px]=\"totalWidth\">\n    <thead>\n      <tr>\n        @if (hasActionCol) {\n          <th class=\"pk-dg-action-th\"></th>\n        }\n        @if (hasExpandCol) {\n          <th class=\"pk-dg-expand-th\"></th>\n        } @else {\n          <th class=\"pk-dg-expand-th pk-dg-no-detail\"></th>\n        }\n        @for (column of columns; track column.pkDgSort; let i = $index) {\n          <th [style.width.px]=\"columnWidths[i]\">\n            <div class=\"th-content\">\n              <span>{{ column.headerText }}</span>\n              <div class=\"th-actions\">\n                @if (column.pkDgSort) {\n                  <button class=\"sort-icon-btn\"\n                    [class.active]=\"sortColumn === column.pkDgSort\"\n                    (click)=\"onSort(column.pkDgSort)\"\n                    title=\"\u0E40\u0E23\u0E35\u0E22\u0E07\u0E25\u0E33\u0E14\u0E31\u0E1A\">\n                    <pk-icon\n                      [name]=\"sortColumn === column.pkDgSort ? (sortDirection === 'asc' ? 'chevron-up' : 'chevron-down') : 'sort'\"\n                      [size]=\"12\" color=\"currentColor\">\n                    </pk-icon>\n                  </button>\n                }\n                @if (column.pkDgFilter) {\n                  <button class=\"filter-icon-btn\"\n                    [class.active]=\"filterValues[column.pkDgFilter]\"\n                    (click)=\"openFilter(column.pkDgFilter, $event, column.headerText)\"\n                    title=\"\u0E01\u0E23\u0E2D\u0E07\">\n                    <pk-icon name=\"search\" [size]=\"12\" color=\"currentColor\"></pk-icon>\n                  </button>\n                }\n              </div>\n            </div>\n            @if (column.pkDgFilter && activeFilterCol === column.pkDgFilter) {\n              <div class=\"filter-popup\"\n                [style.top.px]=\"filterPopupPos.top\"\n                [style.left.px]=\"filterPopupPos.left\"\n                (click)=\"$event.stopPropagation()\">\n                <input type=\"text\"\n                  [value]=\"filterValues[column.pkDgFilter] || ''\"\n                  (input)=\"onFilterInput(column.pkDgFilter, $event)\"\n                  [placeholder]=\"'\u0E04\u0E49\u0E19\u0E2B\u0E32 ' + activeFilterHeader\"\n                  autofocus>\n              </div>\n            }\n            <div class=\"resize-handle\" (mousedown)=\"startResize(i, $event)\"></div>\n          </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <ng-content select=\"pk-dg-rows\"></ng-content>\n    </tbody>\n  </table>\n  \n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%;overflow:auto}.pk-datagrid-spinner{position:absolute;inset:0;background:#fffc;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000}.pk-datagrid-spinner .spinner{border:4px solid #f3f3f3;border-top:4px solid #0072a3;border-radius:50%;width:40px;height:40px;animation:spin 1s linear infinite}.pk-datagrid-spinner span{margin-top:10px;color:#0072a3}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pk-datagrid{width:100%;border-collapse:collapse;background:#fff;border:1px solid #cccccc}.pk-datagrid thead{background:#f8f8f8}.pk-datagrid thead th{padding:10px 8px;text-align:left;font-weight:600;color:#333;border:1px solid #cccccc;white-space:nowrap;position:sticky;top:0;background:#f8f8f8;z-index:10;overflow:hidden;box-sizing:border-box}.pk-datagrid thead th .th-content{display:flex;align-items:center;justify-content:space-between;gap:4px}.pk-datagrid thead th .th-content .th-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.pk-datagrid thead th .th-content .sort-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#ccc;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .sort-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .sort-icon-btn.active{color:#0072a3}.pk-datagrid thead th .th-content .filter-icon-btn{background:none;border:none;padding:1px 2px;cursor:pointer;color:#bbb;border-radius:2px;display:flex;align-items:center;line-height:1}.pk-datagrid thead th .th-content .filter-icon-btn:hover{color:#0072a3;background:#0072a31a}.pk-datagrid thead th .th-content .filter-icon-btn.active{color:#0072a3}.pk-datagrid thead th .filter-popup{position:fixed;background:#fff;border:1px solid #0072a3;border-radius:5px;padding:8px;box-shadow:0 4px 14px #00000026;z-index:9999;min-width:180px}.pk-datagrid thead th .filter-popup input{width:100%;box-sizing:border-box;padding:5px 8px;border:1px solid #b8cfe0;border-radius:3px;outline:none}.pk-datagrid thead th .filter-popup input:focus{border-color:#0072a3;box-shadow:0 0 0 2px #0072a32e}.pk-datagrid thead th .resize-handle{position:absolute;top:0;right:0;width:5px;height:100%;cursor:col-resize;z-index:20}.pk-datagrid thead th .resize-handle:after{content:\"\";position:absolute;top:15%;right:2px;width:2px;height:70%;background:transparent;border-radius:1px;transition:background .15s}.pk-datagrid thead th .resize-handle:hover:after{background:#0072a3}.pk-datagrid tbody tr.pk-dg-row{border:1px solid #cccccc;transition:background-color .15s}.pk-datagrid tbody tr.pk-dg-row:hover{background:#f0f9ff;cursor:pointer}.pk-datagrid tbody tr.pk-dg-row-expand,.pk-datagrid tbody tr.pk-dg-row-expand:hover{background:#fafafa}.pk-datagrid tbody tr.pk-dg-row-expand td{padding:15px;border:1px solid #cccccc}.pk-datagrid .pk-dg-expand-th{width:32px;min-width:32px;padding:0}.pk-datagrid .pk-dg-expand-th.pk-dg-no-detail{width:0;min-width:0;max-width:0;padding:0;border:none;overflow:hidden}.pk-datagrid .pk-dg-action-th{width:32px;min-width:32px;padding:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
                 type: ContentChildren,
-                args: [PkDgColumnComponent]
+                args: [PkDgHeaderComponent]
             }], pagination: [{
                 type: ContentChild,
                 args: [PkDgPaginationComponent]
             }], rowDetails: [{
                 type: ContentChildren,
-                args: [PkDgRowDetailComponent, { descendants: true }]
+                args: [PkDgRowExpandComponent, { descendants: true }]
             }], expandDirectives: [{
                 type: ContentChildren,
-                args: [PkIfExpandedDirective, { descendants: true }]
+                args: [PkDgRowIsExpandDirective, { descendants: true }]
+            }], actionComponents: [{
+                type: ContentChildren,
+                args: [PkDgActionComponent, { descendants: true }]
             }], pkDgLoading: [{
                 type: Input
             }], items: [{
@@ -995,19 +1029,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: ['document:click']
             }] } });
 
-class PkDgCellComponent {
+class PkDgColumnComponent {
     set nowrap(value) {
         this._nowrap = value;
     }
     get nowrap() { return this._nowrap; }
     _nowrap = true;
     tdStyle = null;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgCellComponent, isStandalone: false, selector: "pk-dg-cell", inputs: { nowrap: "nowrap", tdStyle: "tdStyle" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', isInline: true, styles: [":host{display:contents}:host td{padding:8px;color:#333;border:1px solid #e8e8e8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host td.wrap{white-space:normal;overflow:visible;text-overflow:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgColumnComponent, isStandalone: false, selector: "pk-dg-column", inputs: { nowrap: "nowrap", tdStyle: "tdStyle" }, host: { styleAttribute: "display: contents" }, ngImport: i0, template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', isInline: true, styles: [":host{display:contents}:host td{padding:8px;color:#333;border:1px solid #e8e8e8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host td.wrap{white-space:normal;overflow:visible;text-overflow:unset}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pk-dg-cell', template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', standalone: false, host: {
+            args: [{ selector: 'pk-dg-column', template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', standalone: false, host: {
                         'style': 'display: contents'
                     }, styles: [":host{display:contents}:host td{padding:8px;color:#333;border:1px solid #e8e8e8;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host td.wrap{white-space:normal;overflow:visible;text-overflow:unset}\n"] }]
         }], propDecorators: { nowrap: [{
@@ -1028,27 +1062,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 class PkDatagridModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, declarations: [PkDatagridComponent,
-            PkDgColumnComponent,
+            PkDgHeaderComponent,
             PkDgRowComponent,
-            PkDgCellComponent,
+            PkDgColumnComponent,
             PkDgFooterComponent,
             PkDgPaginationComponent,
             PkDgPageSizeComponent,
-            PkDgRowDetailComponent,
-            PkDgItemsDirective,
-            PkIfExpandedDirective,
+            PkDgRowExpandComponent,
+            PkDgActionComponent,
+            PkDgRowsDirective,
+            PkDgRowIsExpandDirective,
             NowrapDirective], imports: [CommonModule,
             FormsModule,
             PkIcon], exports: [PkDatagridComponent,
-            PkDgColumnComponent,
+            PkDgHeaderComponent,
             PkDgRowComponent,
-            PkDgCellComponent,
+            PkDgColumnComponent,
             PkDgFooterComponent,
             PkDgPaginationComponent,
             PkDgPageSizeComponent,
-            PkDgRowDetailComponent,
-            PkDgItemsDirective,
-            PkIfExpandedDirective,
+            PkDgRowExpandComponent,
+            PkDgActionComponent,
+            PkDgRowsDirective,
+            PkDgRowIsExpandDirective,
             NowrapDirective,
             PkIcon] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, imports: [CommonModule,
@@ -1059,15 +1095,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     declarations: [
                         PkDatagridComponent,
-                        PkDgColumnComponent,
+                        PkDgHeaderComponent,
                         PkDgRowComponent,
-                        PkDgCellComponent,
+                        PkDgColumnComponent,
                         PkDgFooterComponent,
                         PkDgPaginationComponent,
                         PkDgPageSizeComponent,
-                        PkDgRowDetailComponent,
-                        PkDgItemsDirective,
-                        PkIfExpandedDirective,
+                        PkDgRowExpandComponent,
+                        PkDgActionComponent,
+                        PkDgRowsDirective,
+                        PkDgRowIsExpandDirective,
                         NowrapDirective
                     ],
                     imports: [
@@ -1077,15 +1114,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     exports: [
                         PkDatagridComponent,
-                        PkDgColumnComponent,
+                        PkDgHeaderComponent,
                         PkDgRowComponent,
-                        PkDgCellComponent,
+                        PkDgColumnComponent,
                         PkDgFooterComponent,
                         PkDgPaginationComponent,
                         PkDgPageSizeComponent,
-                        PkDgRowDetailComponent,
-                        PkDgItemsDirective,
-                        PkIfExpandedDirective,
+                        PkDgRowExpandComponent,
+                        PkDgActionComponent,
+                        PkDgRowsDirective,
+                        PkDgRowIsExpandDirective,
                         NowrapDirective,
                         PkIcon
                     ]
@@ -3122,5 +3160,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgCellComponent, PkDgColumnComponent, PkDgFooterComponent, PkDgItemsDirective, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowDetailComponent, PkIcon, PkIfExpandedDirective, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
+export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent, PkDgColumnComponent, PkDgFooterComponent, PkDgHeaderComponent, PkDgPageSizeComponent, PkDgPaginationComponent, PkDgRowComponent, PkDgRowExpandComponent, PkDgRowIsExpandDirective, PkDgRowsDirective, PkIcon, PkModal, PkModalBody, PkModalFooter, PkModalHeader, PkProgressComponent, PkSelectComponent, PkTab, PkTabs, PkToastr, PkToastrService, PkTreeviewComponent, PkTreeviewModule, PkTreeviewNodeComponent, PkTypeaheadComponent };
 //# sourceMappingURL=ngx-pk-ui.mjs.map