ngx-pk-ui 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/ngx-pk-ui.mjs +59 -17
- package/fesm2022/ngx-pk-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/pk-breadcrumb.css +136 -0
- package/styles/pk-ui.css +1 -0
- package/types/ngx-pk-ui.d.ts +9 -7
package/fesm2022/ngx-pk-ui.mjs
CHANGED
|
@@ -292,6 +292,7 @@ const PK_ICONS = {
|
|
|
292
292
|
'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"/>`,
|
|
293
293
|
'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"/>`,
|
|
294
294
|
'venn': `<circle cx="9" cy="12" r="7"/><circle cx="15" cy="12" r="7"/>`,
|
|
295
|
+
'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"/>`,
|
|
295
296
|
// ── System & Infrastructure ──────────────────────────────────────────────
|
|
296
297
|
'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"/>`,
|
|
297
298
|
'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"/>`,
|
|
@@ -301,11 +302,15 @@ const PK_ICONS = {
|
|
|
301
302
|
// ── Communication ────────────────────────────────────────────────────────
|
|
302
303
|
'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"/>`,
|
|
303
304
|
'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"/>`,
|
|
305
|
+
'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"/>`,
|
|
304
306
|
// ── Transfer ─────────────────────────────────────────────────────────────
|
|
305
307
|
'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"/>`,
|
|
306
308
|
'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"/>`,
|
|
307
309
|
'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"/>`,
|
|
308
310
|
'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"/>`,
|
|
311
|
+
// ── Labels ──────────────────────────────────────────────────────────────
|
|
312
|
+
'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"/>`,
|
|
313
|
+
'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"/>`,
|
|
309
314
|
// ── Links ────────────────────────────────────────────────────────────────
|
|
310
315
|
'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"/>`,
|
|
311
316
|
'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"/>`,
|
|
@@ -322,7 +327,9 @@ const PK_ICONS = {
|
|
|
322
327
|
'success': `<circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/>`,
|
|
323
328
|
'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"/>`,
|
|
324
329
|
'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"/>`,
|
|
325
|
-
'question': `<
|
|
330
|
+
'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"/>`,
|
|
331
|
+
'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"/>`,
|
|
332
|
+
'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"/>`,
|
|
326
333
|
// ── Time ─────────────────────────────────────────────────────────────────
|
|
327
334
|
'clock': `<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>`,
|
|
328
335
|
'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"/>`,
|
|
@@ -331,10 +338,14 @@ const PK_ICONS = {
|
|
|
331
338
|
// ── Medical & Transport ──────────────────────────────────────────────────
|
|
332
339
|
'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"/>`,
|
|
333
340
|
'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"/>`,
|
|
334
|
-
'car-
|
|
341
|
+
'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"/>`,
|
|
342
|
+
'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"/>`,
|
|
335
343
|
'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"/>`,
|
|
336
344
|
'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"/>`,
|
|
337
345
|
'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"/>`,
|
|
346
|
+
'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"/>`,
|
|
347
|
+
'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"/>`,
|
|
348
|
+
'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"/>`,
|
|
338
349
|
// ── Social ───────────────────────────────────────────────────────────────
|
|
339
350
|
'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"/>`,
|
|
340
351
|
'facebook': `<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>`,
|
|
@@ -342,6 +353,19 @@ const PK_ICONS = {
|
|
|
342
353
|
'telegram': `<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>`,
|
|
343
354
|
'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"/>`,
|
|
344
355
|
'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"/>`,
|
|
356
|
+
// ── Person & Expressions ────────────────────────────────────────────────
|
|
357
|
+
'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"/>`,
|
|
358
|
+
'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"/>`,
|
|
359
|
+
'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"/>`,
|
|
360
|
+
'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"/>`,
|
|
361
|
+
'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"/>`,
|
|
362
|
+
'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"/>`,
|
|
363
|
+
'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"/>`,
|
|
364
|
+
'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"/>`,
|
|
365
|
+
// ── Code ─────────────────────────────────────────────────────────────────
|
|
366
|
+
'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"/>`,
|
|
367
|
+
'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"/>`,
|
|
368
|
+
'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"/>`,
|
|
345
369
|
};
|
|
346
370
|
|
|
347
371
|
class PkIcon {
|
|
@@ -564,19 +588,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
564
588
|
|
|
565
589
|
class PkDgRowComponent {
|
|
566
590
|
pkDgRow;
|
|
591
|
+
rowClass = '';
|
|
567
592
|
detailTemplate;
|
|
568
593
|
isExpanded = false;
|
|
569
594
|
hasDetail = false;
|
|
570
595
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
571
|
-
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
|
|
596
|
+
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"] }] });
|
|
572
597
|
}
|
|
573
598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgRowComponent, decorators: [{
|
|
574
599
|
type: Component,
|
|
575
600
|
args: [{ selector: 'pk-dg-rows', standalone: false, host: {
|
|
576
601
|
'style': 'display: contents'
|
|
577
|
-
}, 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
|
|
602
|
+
}, 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"] }]
|
|
578
603
|
}], propDecorators: { pkDgRow: [{
|
|
579
604
|
type: Input
|
|
605
|
+
}], rowClass: [{
|
|
606
|
+
type: Input
|
|
580
607
|
}], detailTemplate: [{
|
|
581
608
|
type: ContentChild,
|
|
582
609
|
args: ['detail']
|
|
@@ -642,7 +669,12 @@ class PkDgRowsDirective {
|
|
|
642
669
|
this.datagrid.pagination.updatePagination();
|
|
643
670
|
}
|
|
644
671
|
this.datagrid.updateDisplayedItems();
|
|
672
|
+
this._lastVersion = this.datagrid.displayedItemsVersion;
|
|
673
|
+
// Render immediately on first bind; do not wait for a user event.
|
|
674
|
+
this.renderItems();
|
|
675
|
+
return;
|
|
645
676
|
}
|
|
677
|
+
this.renderItems();
|
|
646
678
|
}
|
|
647
679
|
renderItems() {
|
|
648
680
|
this.viewContainer.clear();
|
|
@@ -736,14 +768,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
736
768
|
class PkDgActionComponent {
|
|
737
769
|
isOpen = false;
|
|
738
770
|
menuPos = { top: 0, left: 0 };
|
|
771
|
+
skipNextClose = false;
|
|
739
772
|
toggle(event) {
|
|
740
|
-
event.stopPropagation();
|
|
741
773
|
const btn = event.currentTarget;
|
|
742
774
|
const rect = btn.getBoundingClientRect();
|
|
743
775
|
this.menuPos = { top: rect.bottom + 4, left: rect.left };
|
|
744
776
|
this.isOpen = !this.isOpen;
|
|
777
|
+
if (this.isOpen) {
|
|
778
|
+
this.skipNextClose = true;
|
|
779
|
+
}
|
|
745
780
|
}
|
|
746
781
|
onDocumentClick() {
|
|
782
|
+
if (this.skipNextClose) {
|
|
783
|
+
this.skipNextClose = false;
|
|
784
|
+
return;
|
|
785
|
+
}
|
|
747
786
|
this.isOpen = false;
|
|
748
787
|
}
|
|
749
788
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -835,6 +874,9 @@ class PkDatagridComponent {
|
|
|
835
874
|
}
|
|
836
875
|
this._initColumnWidths();
|
|
837
876
|
this.updateDisplayedItems();
|
|
877
|
+
// In zoneless mode, async callbacks do not automatically trigger a render pass.
|
|
878
|
+
// Run one explicit change detection so initial pagination is reflected immediately.
|
|
879
|
+
this.cdr.detectChanges();
|
|
838
880
|
}, 0);
|
|
839
881
|
}
|
|
840
882
|
updateDisplayedItems() {
|
|
@@ -994,17 +1036,17 @@ class PkDatagridComponent {
|
|
|
994
1036
|
this._onResizeEnd();
|
|
995
1037
|
}
|
|
996
1038
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
997
|
-
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
|
|
1039
|
+
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 i; 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"] }] });
|
|
998
1040
|
}
|
|
999
1041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridComponent, decorators: [{
|
|
1000
1042
|
type: Component,
|
|
1001
|
-
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
|
|
1043
|
+
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 i; 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"] }]
|
|
1002
1044
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { columns: [{
|
|
1003
1045
|
type: ContentChildren,
|
|
1004
1046
|
args: [PkDgHeaderComponent]
|
|
1005
1047
|
}], pagination: [{
|
|
1006
1048
|
type: ContentChild,
|
|
1007
|
-
args: [PkDgPaginationComponent]
|
|
1049
|
+
args: [PkDgPaginationComponent, { descendants: true }]
|
|
1008
1050
|
}], rowDetails: [{
|
|
1009
1051
|
type: ContentChildren,
|
|
1010
1052
|
args: [PkDgRowExpandComponent, { descendants: true }]
|
|
@@ -1029,17 +1071,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1029
1071
|
args: ['document:click']
|
|
1030
1072
|
}] } });
|
|
1031
1073
|
|
|
1032
|
-
class
|
|
1074
|
+
class PkDgCellComponent {
|
|
1033
1075
|
set nowrap(value) {
|
|
1034
1076
|
this._nowrap = value;
|
|
1035
1077
|
}
|
|
1036
1078
|
get nowrap() { return this._nowrap; }
|
|
1037
1079
|
_nowrap = true;
|
|
1038
1080
|
tdStyle = null;
|
|
1039
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type:
|
|
1040
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type:
|
|
1081
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1082
|
+
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"] }] });
|
|
1041
1083
|
}
|
|
1042
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type:
|
|
1084
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PkDgCellComponent, decorators: [{
|
|
1043
1085
|
type: Component,
|
|
1044
1086
|
args: [{ selector: 'pk-dg-column', template: '<td [class.wrap]="!_nowrap" [ngStyle]="tdStyle"><ng-content></ng-content></td>', standalone: false, host: {
|
|
1045
1087
|
'style': 'display: contents'
|
|
@@ -1064,7 +1106,7 @@ class PkDatagridModule {
|
|
|
1064
1106
|
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: PkDatagridModule, declarations: [PkDatagridComponent,
|
|
1065
1107
|
PkDgHeaderComponent,
|
|
1066
1108
|
PkDgRowComponent,
|
|
1067
|
-
|
|
1109
|
+
PkDgCellComponent,
|
|
1068
1110
|
PkDgFooterComponent,
|
|
1069
1111
|
PkDgPaginationComponent,
|
|
1070
1112
|
PkDgPageSizeComponent,
|
|
@@ -1077,7 +1119,7 @@ class PkDatagridModule {
|
|
|
1077
1119
|
PkIcon], exports: [PkDatagridComponent,
|
|
1078
1120
|
PkDgHeaderComponent,
|
|
1079
1121
|
PkDgRowComponent,
|
|
1080
|
-
|
|
1122
|
+
PkDgCellComponent,
|
|
1081
1123
|
PkDgFooterComponent,
|
|
1082
1124
|
PkDgPaginationComponent,
|
|
1083
1125
|
PkDgPageSizeComponent,
|
|
@@ -1097,7 +1139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1097
1139
|
PkDatagridComponent,
|
|
1098
1140
|
PkDgHeaderComponent,
|
|
1099
1141
|
PkDgRowComponent,
|
|
1100
|
-
|
|
1142
|
+
PkDgCellComponent,
|
|
1101
1143
|
PkDgFooterComponent,
|
|
1102
1144
|
PkDgPaginationComponent,
|
|
1103
1145
|
PkDgPageSizeComponent,
|
|
@@ -1116,7 +1158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1116
1158
|
PkDatagridComponent,
|
|
1117
1159
|
PkDgHeaderComponent,
|
|
1118
1160
|
PkDgRowComponent,
|
|
1119
|
-
|
|
1161
|
+
PkDgCellComponent,
|
|
1120
1162
|
PkDgFooterComponent,
|
|
1121
1163
|
PkDgPaginationComponent,
|
|
1122
1164
|
PkDgPageSizeComponent,
|
|
@@ -3160,5 +3202,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3160
3202
|
* Generated bundle index. Do not edit.
|
|
3161
3203
|
*/
|
|
3162
3204
|
|
|
3163
|
-
export { DatepickerService, HolidayService, NowrapDirective, PK_ICONS, PkAlert, PkAlertService, PkAutocompleteComponent, PkDatagridComponent, PkDatagridModule, PkDatepickerComponent, PkDgActionComponent,
|
|
3205
|
+
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 };
|
|
3164
3206
|
//# sourceMappingURL=ngx-pk-ui.mjs.map
|