@fuentis/phoenix-ui 0.0.9-alpha.589 → 0.0.9-alpha.591
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/fuentis-phoenix-ui.mjs +64 -30
- package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
- package/index.d.ts +10 -10
- package/package.json +1 -1
|
@@ -610,7 +610,7 @@ class CardComponent {
|
|
|
610
610
|
return title && title.length > 40;
|
|
611
611
|
}
|
|
612
612
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()[
|
|
613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: true, selector: "phoenix-card", inputs: { card: { classPropertyName: "card", publicName: "card", isSignal: true, isRequired: true, transformFunction: null }, cardActions: { classPropertyName: "cardActions", publicName: "cardActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardEventEmmiter: "cardEventEmmiter" }, viewQueries: [{ propertyName: "descEl", first: true, predicate: ["descEl"], descendants: true }], ngImport: i0, template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\" style=\"height: 30px\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for (item of card()[\"footerData\"]; track item.key; let i = $index) {\n @if (item?.value) {\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />\n } @else {\n <span>--</span>\n }\n }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i2$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "component", type: ActionsComponent, selector: "pho-actions", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i8.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }] });
|
|
614
614
|
}
|
|
615
615
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
616
616
|
type: Component,
|
|
@@ -624,7 +624,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
624
624
|
TagModule,
|
|
625
625
|
DividerModule,
|
|
626
626
|
TooltipModule,
|
|
627
|
-
], template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for(item of card()[
|
|
627
|
+
], template: "<p-card\n styleClass=\"cursor-pointer pho-card hover:surface-100\"\n [style]=\"{ width: '25rem', overflow: 'hidden' }\"\n (click)=\"onCardClick(card(), 'NAVIGATE')\"\n [attr.data-cy]=\"'card-navigate-click'\"\n>\n <ng-template #header> </ng-template>\n <ng-template #title>\n <div class=\"flex justify-content-between\" style=\"height: 30px\">\n <span\n class=\"font-semibold text-base card-title\"\n [pTooltip]=\"shouldShowTitleTooltip() ? card()['title'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n >\n {{ card()[\"title\"] }}</span\n >\n\n <pho-actions\n (actionClick)=\"onCardClick($event)\"\n [actions]=\"cardActions()\"\n ></pho-actions>\n </div>\n </ng-template>\n <ng-template #subtitle> </ng-template>\n <p\n #descEl\n class=\"text-500 text-sm\"\n [style]=\"{ height: '5rem', overflow: 'hidden' }\"\n [innerHTML]=\"card()['description'] || '--'\"\n [pTooltip]=\"showTooltip ? card()['description'] : undefined\"\n tooltipStyleClass=\"phoenix-card-tooltip\"\n ></p>\n <ng-content select=\"[custom]\"></ng-content>\n <ng-template #footer>\n <p-divider />\n <ng-content select=\"[footer]\"></ng-content>\n <div class=\"flex flex-wrap gap-1 justify-content-between\">\n @for (item of card()[\"footerData\"]; track item.key; let i = $index) {\n @if (item?.value) {\n <p-tag\n [icon]=\"item?.icon\"\n [severity]=\"item?.severity || 'info'\"\n [value]=\"item.value\"\n />\n } @else {\n <span>--</span>\n }\n }\n </div>\n </ng-template>\n</p-card>\n", styles: ["::ng-deep .phoenix-card-tooltip{max-width:500px!important;white-space:normal!important;word-wrap:break-word!important}.card-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}\n"] }]
|
|
628
628
|
}], propDecorators: { card: [{ type: i0.Input, args: [{ isSignal: true, alias: "card", required: true }] }], cardEventEmmiter: [{ type: i0.Output, args: ["cardEventEmmiter"] }], cardActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardActions", required: false }] }], descEl: [{
|
|
629
629
|
type: ViewChild,
|
|
630
630
|
args: ['descEl']
|
|
@@ -2900,7 +2900,11 @@ const DEFAULT_MORE_ACTIONS = {
|
|
|
2900
2900
|
label: '',
|
|
2901
2901
|
items: [
|
|
2902
2902
|
{ key: 'EXPORT_PDF', label: 'ACTION.EXPORT_PDF', icon: 'pi pi-file-pdf' },
|
|
2903
|
-
{
|
|
2903
|
+
{
|
|
2904
|
+
key: 'EXPORT_EXCEL',
|
|
2905
|
+
label: 'ACTION.EXPORT_EXCEL',
|
|
2906
|
+
icon: 'pi pi-file-excel',
|
|
2907
|
+
},
|
|
2904
2908
|
],
|
|
2905
2909
|
};
|
|
2906
2910
|
class TableComponent {
|
|
@@ -3154,7 +3158,9 @@ class TableComponent {
|
|
|
3154
3158
|
this.columnTypeMap = {};
|
|
3155
3159
|
for (const col of this.columns)
|
|
3156
3160
|
this.columnTypeMap[col.field] = col.columnType;
|
|
3157
|
-
const nextSelected = this.selectedColumnsInput?.length
|
|
3161
|
+
const nextSelected = this.selectedColumnsInput?.length
|
|
3162
|
+
? this.selectedColumnsInput
|
|
3163
|
+
: this.columns;
|
|
3158
3164
|
// microtask to avoid change detection timing issues
|
|
3159
3165
|
Promise.resolve().then(() => {
|
|
3160
3166
|
this.selectedColumns = [...nextSelected];
|
|
@@ -3255,29 +3261,31 @@ class TableComponent {
|
|
|
3255
3261
|
const s = cfg?.initialSort;
|
|
3256
3262
|
// NEW style
|
|
3257
3263
|
if (Array.isArray(s))
|
|
3258
|
-
return s.filter(x => !!x?.field);
|
|
3264
|
+
return s.filter((x) => !!x?.field);
|
|
3259
3265
|
if (s && typeof s === 'object' && s.field)
|
|
3260
3266
|
return [s];
|
|
3261
3267
|
// LEGACY fallback
|
|
3262
3268
|
if (cfg?.initialSortField) {
|
|
3263
|
-
return [
|
|
3269
|
+
return [
|
|
3270
|
+
{
|
|
3264
3271
|
field: cfg.initialSortField,
|
|
3265
3272
|
order: (cfg.initialSortOrder ?? 1),
|
|
3266
|
-
}
|
|
3273
|
+
},
|
|
3274
|
+
];
|
|
3267
3275
|
}
|
|
3268
3276
|
return [];
|
|
3269
3277
|
}
|
|
3270
3278
|
/**
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3279
|
+
* Applies initial sort once:
|
|
3280
|
+
* - Uses tableConfiguration.initialSortField if provided
|
|
3281
|
+
* - Otherwise uses the first available column field
|
|
3282
|
+
* - Always ASC (order = 1)
|
|
3283
|
+
*
|
|
3284
|
+
* Runs only when:
|
|
3285
|
+
* - we have data
|
|
3286
|
+
* - we have columns/selectedColumns
|
|
3287
|
+
* - it hasn't been applied yet for current dataset
|
|
3288
|
+
*/
|
|
3281
3289
|
applyInitialSortIfNeeded() {
|
|
3282
3290
|
if (this.initialSortApplied)
|
|
3283
3291
|
return;
|
|
@@ -3288,18 +3296,20 @@ class TableComponent {
|
|
|
3288
3296
|
this.initialSortApplied = true;
|
|
3289
3297
|
return;
|
|
3290
3298
|
}
|
|
3291
|
-
const cols = (this.selectedColumns?.length ? this.selectedColumns : this.columns) ??
|
|
3299
|
+
const cols = (this.selectedColumns?.length ? this.selectedColumns : this.columns) ??
|
|
3300
|
+
[];
|
|
3292
3301
|
if (!cols.length)
|
|
3293
3302
|
return;
|
|
3294
3303
|
// 1) normalize config
|
|
3295
3304
|
const cfgMeta = this.normalizeInitialSort(this.tableConfiguration);
|
|
3296
3305
|
// 2) if nothing configured -> fallback first column ASC
|
|
3297
3306
|
const fallbackField = cols[0]?.field;
|
|
3298
|
-
const wantedMeta = (cfgMeta.length ? cfgMeta : [{ field: fallbackField, order: 1 }])
|
|
3299
|
-
.filter(m => !!m?.field);
|
|
3307
|
+
const wantedMeta = (cfgMeta.length ? cfgMeta : [{ field: fallbackField, order: 1 }]).filter((m) => !!m?.field);
|
|
3300
3308
|
// 3) keep only fields that exist in columns
|
|
3301
|
-
const validMeta = wantedMeta.filter(m => cols.some((c) => c?.field === m.field));
|
|
3302
|
-
const finalMeta = validMeta.length
|
|
3309
|
+
const validMeta = wantedMeta.filter((m) => cols.some((c) => c?.field === m.field));
|
|
3310
|
+
const finalMeta = validMeta.length
|
|
3311
|
+
? validMeta
|
|
3312
|
+
: [{ field: fallbackField, order: 1 }];
|
|
3303
3313
|
if (!finalMeta[0]?.field) {
|
|
3304
3314
|
this.tableData = this.allData;
|
|
3305
3315
|
this.totalRecords = this.tableData.length;
|
|
@@ -3327,7 +3337,9 @@ class TableComponent {
|
|
|
3327
3337
|
onSearch(query) {
|
|
3328
3338
|
const trimmed = (query ?? '').trim().toLowerCase();
|
|
3329
3339
|
this.searchQuery = trimmed;
|
|
3330
|
-
const baseData = Object.keys(this.currentFilters).length > 0
|
|
3340
|
+
const baseData = Object.keys(this.currentFilters).length > 0
|
|
3341
|
+
? this.getFilteredData()
|
|
3342
|
+
: this.originalData;
|
|
3331
3343
|
const searchableFields = (this.columns ?? [])
|
|
3332
3344
|
.map((c) => (c?.field ?? '').trim())
|
|
3333
3345
|
.filter((f) => !!f);
|
|
@@ -3373,7 +3385,9 @@ class TableComponent {
|
|
|
3373
3385
|
return undefined;
|
|
3374
3386
|
if (!path.includes('.'))
|
|
3375
3387
|
return obj[path];
|
|
3376
|
-
return path
|
|
3388
|
+
return path
|
|
3389
|
+
.split('.')
|
|
3390
|
+
.reduce((acc, key) => (acc == null ? undefined : acc[key]), obj);
|
|
3377
3391
|
}
|
|
3378
3392
|
matchesQuery(value, query) {
|
|
3379
3393
|
if (value === null || value === undefined)
|
|
@@ -3400,18 +3414,31 @@ class TableComponent {
|
|
|
3400
3414
|
return this.originalData.filter((item) => {
|
|
3401
3415
|
return Object.keys(this.currentFilters).every((key) => {
|
|
3402
3416
|
const filterValue = this.currentFilters[key];
|
|
3403
|
-
if (!filterValue ||
|
|
3417
|
+
if (!filterValue ||
|
|
3418
|
+
(Array.isArray(filterValue) && filterValue.length === 0))
|
|
3404
3419
|
return true;
|
|
3405
3420
|
const itemValue = this.getNestedValue(item, key);
|
|
3421
|
+
// Ako je itemValue niz (kao u scopes)
|
|
3422
|
+
if (Array.isArray(itemValue)) {
|
|
3423
|
+
return filterValue.some((option) => {
|
|
3424
|
+
const optionKey = option?.key || option;
|
|
3425
|
+
return itemValue.some((val) => val?.name?.toString().toLowerCase() ===
|
|
3426
|
+
optionKey?.toString().toLowerCase());
|
|
3427
|
+
});
|
|
3428
|
+
}
|
|
3429
|
+
// Ako je filterValue niz
|
|
3406
3430
|
if (Array.isArray(filterValue)) {
|
|
3407
3431
|
return filterValue.some((option) => {
|
|
3408
3432
|
const optionKey = option?.key || option;
|
|
3409
|
-
return itemValue?.toString().toLowerCase() ===
|
|
3433
|
+
return (itemValue?.toString().toLowerCase() ===
|
|
3434
|
+
optionKey?.toString().toLowerCase());
|
|
3410
3435
|
});
|
|
3411
3436
|
}
|
|
3437
|
+
// Single filter
|
|
3412
3438
|
const singleFilterValue = filterValue?.key || filterValue;
|
|
3413
3439
|
return singleFilterValue
|
|
3414
|
-
? itemValue?.toString().toLowerCase() ===
|
|
3440
|
+
? itemValue?.toString().toLowerCase() ===
|
|
3441
|
+
singleFilterValue.toString().toLowerCase()
|
|
3415
3442
|
: true;
|
|
3416
3443
|
});
|
|
3417
3444
|
});
|
|
@@ -3478,7 +3505,10 @@ class TableComponent {
|
|
|
3478
3505
|
return '';
|
|
3479
3506
|
}
|
|
3480
3507
|
compareStringsNatural(a, b) {
|
|
3481
|
-
return a.localeCompare(b, undefined, {
|
|
3508
|
+
return a.localeCompare(b, undefined, {
|
|
3509
|
+
numeric: true,
|
|
3510
|
+
sensitivity: 'base',
|
|
3511
|
+
});
|
|
3482
3512
|
}
|
|
3483
3513
|
// ============================================================
|
|
3484
3514
|
// SELECTION / UI ACTIONS
|
|
@@ -3522,7 +3552,9 @@ class TableComponent {
|
|
|
3522
3552
|
* Used by checkbox template to disable selection on specific rows.
|
|
3523
3553
|
*/
|
|
3524
3554
|
isRowSelectable(event) {
|
|
3525
|
-
return typeof event.data?.canSelect === 'boolean'
|
|
3555
|
+
return typeof event.data?.canSelect === 'boolean'
|
|
3556
|
+
? event.data.canSelect
|
|
3557
|
+
: true;
|
|
3526
3558
|
}
|
|
3527
3559
|
/**
|
|
3528
3560
|
* Some tables allow click on first N columns to open details.
|
|
@@ -3545,7 +3577,9 @@ class TableComponent {
|
|
|
3545
3577
|
getNested(obj, path) {
|
|
3546
3578
|
if (!obj || !path)
|
|
3547
3579
|
return null;
|
|
3548
|
-
return path
|
|
3580
|
+
return path
|
|
3581
|
+
.split('.')
|
|
3582
|
+
.reduce((o, k) => (o != null ? o[k] : null), obj);
|
|
3549
3583
|
}
|
|
3550
3584
|
/**
|
|
3551
3585
|
* Applies column selection coming from table-caption (array of field names).
|