ngx-pk-ui 1.0.2 → 1.0.4

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"/>`,
@@ -288,6 +292,7 @@ const PK_ICONS = {
     'chart-bar': `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/><line x1="2" y1="20" x2="22" y2="20"/>`,
     'dashboard': `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/>`,
     'venn': `<circle cx="9" cy="12" r="7"/><circle cx="15" cy="12" r="7"/>`,
+    'venn3': `<circle cx="12" cy="7.5" r="6.5"/><circle cx="8" cy="15.5" r="6.5"/><circle cx="16" cy="15.5" r="6.5"/>`,
     // ── System & Infrastructure ──────────────────────────────────────────────
     'database': `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>`,
     'cog': `<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>`,
@@ -297,11 +302,15 @@ const PK_ICONS = {
     // ── Communication ────────────────────────────────────────────────────────
     'email': `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>`,
     'phone': `<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>`,
+    'phone-ring': `<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.91 9a16 16 0 0 0 6 6l.92-.92a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/><path d="M15.05 5A5 5 0 0 1 19 8.95"/><path d="M15.07 1A9 9 0 0 1 23 8.93"/>`,
     // ── Transfer ─────────────────────────────────────────────────────────────
     'upload': `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>`,
     'download': `<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>`,
     'export': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="12" x2="15" y2="12"/><polyline points="12.5 9.5 15 12 12.5 14.5"/>`,
     'import': `<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="15" y1="12" x2="9" y2="12"/><polyline points="11.5 9.5 9 12 11.5 14.5"/>`,
+    // ── Labels ──────────────────────────────────────────────────────────────
+    'tag': `<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>`,
+    'tags': `<path d="M9 5H2v7l6.29 6.29c.94.94 2.48.94 3.42 0l3.58-3.58c.94-.94.94-2.48 0-3.42L9 5z"/><line x1="6" y1="9" x2="6.01" y2="9"/><path d="m15 5 6.3 6.3a2.4 2.4 0 0 1 0 3.4L17 19"/>`,
     // ── Links ────────────────────────────────────────────────────────────────
     'link': `<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`,
     'unlink': `<path d="M18.84 12.25l1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.004 5.004 0 0 0-7.07.12l-1.72 1.71"/><path d="M5.17 11.75l-1.72 1.71a5.004 5.004 0 0 0 .12 7.07 5.004 5.004 0 0 0 7.07-.12l1.71-1.71"/><line x1="8" y1="2" x2="8" y2="5"/><line x1="2" y1="8" x2="5" y2="8"/><line x1="16" y1="19" x2="16" y2="22"/><line x1="19" y1="16" x2="22" y2="16"/>`,
@@ -318,7 +327,9 @@ const PK_ICONS = {
     'success': `<circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/>`,
     'warning': `<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
     'error': `<circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>`,
-    'question': `<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    'question': `<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    'question-circle': `<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>`,
+    'info': `<circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>`,
     // ── Time ─────────────────────────────────────────────────────────────────
     'clock': `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
     'calendar': `<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>`,
@@ -327,10 +338,14 @@ const PK_ICONS = {
     // ── Medical & Transport ──────────────────────────────────────────────────
     'ambulance': `<rect x="2" y="7" width="14" height="10" rx="1"/><path d="M16 10l5 1v5h-5"/><circle cx="6" cy="17" r="2"/><circle cx="17" cy="17" r="2"/><path d="M6 10h4M8 8v4"/>`,
     'car': `<rect x="2" y="10" width="20" height="7" rx="2"/><path d="M6 10l2-4h8l2 4"/><circle cx="6.5" cy="17" r="1.5"/><circle cx="17.5" cy="17" r="1.5"/>`,
-    'car-crash': `<rect x="2" y="10" width="14" height="7" rx="2"/><path d="M5 10l2-4h6l2 4"/><circle cx="5.5" cy="17" r="1.5"/><circle cx="12.5" cy="17" r="1.5"/><line x1="19" y1="4" x2="23" y2="8"/><line x1="23" y1="4" x2="19" y2="8"/>`,
+    'car-crash2': `<rect x="2" y="10" width="14" height="7" rx="2"/><path d="M5 10l2-4h6l2 4"/><circle cx="5.5" cy="17" r="1.5"/><circle cx="12.5" cy="17" r="1.5"/><line x1="19" y1="4" x2="23" y2="8"/><line x1="23" y1="4" x2="19" y2="8"/>`,
+    'car-crash': `<path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/><polygon points="19,6.5 20,10.6 23.6,8.4 21.4,12 25.5,13 21.4,14 23.6,17.6 20,15.4 19,19.5 18,15.4 14.4,17.6 16.6,14 12.5,13 16.6,12 14.4,8.4 18,10.6"/>`,
     'bed': `<path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v4H2"/><path d="M2 17h20"/><circle cx="6" cy="8" r="2"/>`,
     'xray': `<rect x="3" y="2" width="18" height="20" rx="2"/><line x1="12" y1="6" x2="12" y2="18"/><path d="M9 8c0 0 3 2 3 4s-3 4-3 4"/><path d="M15 8c0 0-3 2-3 4s3 4 3 4"/>`,
     'lab': `<path d="M9 3h6"/><path d="M9 3v7l-5 9a1 1 0 0 0 .9 1.5h12.2a1 1 0 0 0 .9-1.5L15 10V3"/><circle cx="11" cy="16" r="1"/>`,
+    'patient': `<circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><line x1="12" y1="14" x2="12" y2="18"/><line x1="10" y1="16" x2="14" y2="16"/>`,
+    'bed-patient': `<rect x="2" y="12" width="20" height="9" rx="2"/><path d="M2 16h20"/><circle cx="7" cy="14" r="1.5"/><path d="M9 14h9"/>`,
+    'wheelchair': `<circle cx="12" cy="4" r="2"/><path d="M10 7l-2 6h7l1.5 4.5"/><circle cx="8" cy="19.5" r="2.5"/><circle cx="17" cy="19.5" r="2.5"/><line x1="8" y1="13" x2="8" y2="17"/>`,
     // ── Social ───────────────────────────────────────────────────────────────
     'youtube': `<path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.95C18.88 4 12 4 12 4s-6.88 0-8.59.47a2.78 2.78 0 0 0-1.95 1.95A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.41 19.1C5.12 19.56 12 19.56 12 19.56s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.48z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/>`,
     'facebook': `<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>`,
@@ -338,6 +353,19 @@ const PK_ICONS = {
     'telegram': `<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>`,
     'wechat': `<path d="M9 3C5.1 3 2 5.9 2 9.5c0 2 1 3.8 2.6 5l-.6 2 2.4-1.1c.8.3 1.7.5 2.6.5 4.4 0 7-2.9 7-6.4C16 5.9 12.9 3 9 3z"/><path d="M16 9.2c.5-.1 1-.1 1.5-.1C21.1 9.1 24 11.6 24 14.7c0 1.5-.7 2.9-1.9 3.9l.5 1.8-2-1c-.6.2-1.3.3-2 .3-3 0-5.5-2-5.5-4.5 0-.4.1-.8.2-1.2"/>`,
     'linkedin': `<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/>`,
+    // ── Person & Expressions ────────────────────────────────────────────────
+    'person-smile': `<circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><path d="M10 8.5a2 2 0 0 0 4 0"/>`,
+    'person-sad': `<circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><path d="M10 7.5a2 2 0 0 1 4 0"/>`,
+    'person-cry': `<circle cx="12" cy="7" r="4"/><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><path d="M10 8.5a2 2 0 0 0 4 0"/><path d="M10 9l-1.5 2.5"/><path d="M14 9l1.5 2.5"/>`,
+    'person-sneez': `<circle cx="9" cy="5" r="3"/><path d="M5 21v-3a4 4 0 0 1 4-4h3"/><path d="M14 8l2-1 2-1"/><path d="M13 11h3h3"/><path d="M14 14l2 1 2 1"/>`,
+    'face-smile': `<circle cx="12" cy="12" r="10"/><path d="M8 13s1.5 3 4 3 4-3 4-3"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>`,
+    'face-sad': `<circle cx="12" cy="12" r="10"/><path d="M8 15s1.5-3 4-3 4 3 4 3"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>`,
+    'face-cry': `<circle cx="12" cy="12" r="10"/><path d="M8 15s1.5-3 4-3 4 3 4 3"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/><path d="M9 10l-1 3"/><path d="M15 10l1 3"/>`,
+    'face-sneez': `<circle cx="12" cy="12" r="10"/><path d="M8 14h.01"/><path d="M12 14h.01"/><path d="M16 14h.01"/><path d="M9 9l6 0"/><path d="M10 12c1-2 3-2 4 0"/>`,
+    // ── Code ─────────────────────────────────────────────────────────────────
+    'qr-code': `<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="5" y="5" width="3" height="3"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="16" y="5" width="3" height="3"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="5" y="16" width="3" height="3"/><line x1="14" y1="14" x2="14" y2="14.01"/><line x1="18" y1="14" x2="18" y2="14.01"/><line x1="21" y1="14" x2="21" y2="16"/><line x1="14" y1="17" x2="16" y2="17"/><line x1="18" y1="17" x2="18" y2="21"/><line x1="14" y1="20" x2="14" y2="21"/><line x1="21" y1="19" x2="21" y2="21"/>`,
+    'barcode': `<path d="M3 5v14"/><path d="M7 5v14"/><path d="M11 5v14"/><path d="M13 5v14"/><path d="M17 5v14"/><path d="M19 5v14"/><rect x="1" y="4" width="22" height="16" rx="2" fill="none"/>`,
+    'barcode-reader': `<path d="M3 5v14"/><path d="M7 5v14"/><path d="M11 5v14"/><path d="M13 5v14"/><path d="M17 5v14"/><path d="M19 5v14"/><path d="M1 4h4"/><path d="M1 20h4"/><path d="M19 4h4"/><path d="M19 20h4"/><line x1="1" y1="12" x2="23" y2="12" stroke-width="2"/>`,
 };
 
 class PkIcon {
@@ -416,10 +444,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 +455,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 +464,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 +488,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 +498,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 +536,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 +568,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 +578,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 +587,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             }] } });
 
 class PkDgRowComponent {
-    pkDgItem;
+    pkDgRow;
+    rowClass = '';
     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", rowClass: "rowClass" }, host: { styleAttribute: "display: contents" }, queries: [{ propertyName: "detailTemplate", first: true, predicate: ["detail"], descendants: true }], ngImport: i0, template: "<tr class=\"pk-dg-row\" [class]=\"rowClass\">\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\" 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\" [class]=\"rowClass\">\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\" 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
+            }], rowClass: [{
                 type: Input
             }], detailTemplate: [{
                 type: ContentChild,
                 args: ['detail']
             }] } });
 
-class PkDgRowDetailComponent {
+class PkDgRowExpandComponent {
     row;
     constructor(row) {
         this.row = row;
@@ -591,13 +619,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 +638,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     type: Optional
                 }] }] });
 
-class PkDgItemsDirective {
+class PkDgRowsDirective {
     templateRef;
     viewContainer;
     datagrid;
@@ -631,17 +659,22 @@ 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();
+            this._lastVersion = this.datagrid.displayedItemsVersion;
+            // Render immediately on first bind; do not wait for a user event.
+            this.renderItems();
+            return;
         }
+        this.renderItems();
     }
     renderItems() {
         this.viewContainer.clear();
@@ -656,13 +689,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 +703,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 +735,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 +765,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 }]
         }] });
 
+class PkDgActionComponent {
+    isOpen = false;
+    menuPos = { top: 0, left: 0 };
+    skipNextClose = false;
+    toggle(event) {
+        const btn = event.currentTarget;
+        const rect = btn.getBoundingClientRect();
+        this.menuPos = { top: rect.bottom + 4, left: rect.left };
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.skipNextClose = true;
+        }
+    }
+    onDocumentClick() {
+        if (this.skipNextClose) {
+            this.skipNextClose = false;
+            return;
+        }
+        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 +835,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,11 +869,14 @@ 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();
             this.updateDisplayedItems();
+            // In zoneless mode, async callbacks do not automatically trigger a render pass.
+            // Run one explicit change detection so initial pagination is reflected immediately.
+            this.cdr.detectChanges();
         }, 0);
     }
     updateDisplayedItems() {
@@ -831,7 +904,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 +1036,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  <div class=\"pk-datagrid-scroll-area\">\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  </div>\n\n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%}.pk-datagrid-scroll-area{overflow-x:auto;overflow-y:auto;width:100%;scrollbar-gutter:stable}.pk-datagrid-scroll-area::-webkit-scrollbar{height:8px}.pk-datagrid-scroll-area::-webkit-scrollbar-track{background:#f1f1f1}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb:hover{background:#999}.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  <div class=\"pk-datagrid-scroll-area\">\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  </div>\n\n  <ng-content select=\"pk-dg-footer\"></ng-content>\n</div>\n", styles: [".pk-datagrid-container{position:relative;width:100%}.pk-datagrid-scroll-area{overflow-x:auto;overflow-y:auto;width:100%;scrollbar-gutter:stable}.pk-datagrid-scroll-area::-webkit-scrollbar{height:8px}.pk-datagrid-scroll-area::-webkit-scrollbar-track{background:#f1f1f1}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.pk-datagrid-scroll-area::-webkit-scrollbar-thumb:hover{background:#999}.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]
+                args: [PkDgPaginationComponent, { descendants: true }]
             }], 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: [{
@@ -1003,11 +1079,11 @@ class PkDgCellComponent {
     _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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PkDgCellComponent, 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: [{
             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 +1104,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,
             PkDgFooterComponent,
             PkDgPaginationComponent,
             PkDgPageSizeComponent,
-            PkDgRowDetailComponent,
-            PkDgItemsDirective,
-            PkIfExpandedDirective,
+            PkDgRowExpandComponent,
+            PkDgActionComponent,
+            PkDgRowsDirective,
+            PkDgRowIsExpandDirective,
             NowrapDirective], imports: [CommonModule,
             FormsModule,
             PkIcon], exports: [PkDatagridComponent,
-            PkDgColumnComponent,
+            PkDgHeaderComponent,
             PkDgRowComponent,
             PkDgCellComponent,
             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 +1137,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{
                     declarations: [
                         PkDatagridComponent,
-                        PkDgColumnComponent,
+                        PkDgHeaderComponent,
                         PkDgRowComponent,
                         PkDgCellComponent,
                         PkDgFooterComponent,
                         PkDgPaginationComponent,
                         PkDgPageSizeComponent,
-                        PkDgRowDetailComponent,
-                        PkDgItemsDirective,
-                        PkIfExpandedDirective,
+                        PkDgRowExpandComponent,
+                        PkDgActionComponent,
+                        PkDgRowsDirective,
+                        PkDgRowIsExpandDirective,
                         NowrapDirective
                     ],
                     imports: [
@@ -1077,15 +1156,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ],
                     exports: [
                         PkDatagridComponent,
-                        PkDgColumnComponent,
+                        PkDgHeaderComponent,
                         PkDgRowComponent,
                         PkDgCellComponent,
                         PkDgFooterComponent,
                         PkDgPaginationComponent,
                         PkDgPageSizeComponent,
-                        PkDgRowDetailComponent,
-                        PkDgItemsDirective,
-                        PkIfExpandedDirective,
+                        PkDgRowExpandComponent,
+                        PkDgActionComponent,
+                        PkDgRowsDirective,
+                        PkDgRowIsExpandDirective,
                         NowrapDirective,
                         PkIcon
                     ]
@@ -3122,5 +3202,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, PkDgCellComponent, 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