@fuentis/phoenix-ui 0.0.9-alpha.291 → 0.0.9-alpha.293
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 +36 -26
- package/fesm2022/fuentis-phoenix-ui.mjs.map +1 -1
- package/lib/components/shell/shell.component.d.ts +2 -1
- package/lib/components/sidebar/sidebar.component.d.ts +2 -7
- package/lib/components/sidebar-item/sidebar-item.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component,
|
|
2
|
+
import { Input, Component, EventEmitter, Output, ViewEncapsulation, signal, Injectable, inject, input, output, ViewChild, ChangeDetectionStrategy, Pipe, DestroyRef, CUSTOM_ELEMENTS_SCHEMA, Directive, forwardRef, computed } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, LowerCasePipe } from '@angular/common';
|
|
5
5
|
import * as i3 from 'primeng/tooltip';
|
|
@@ -120,23 +120,29 @@ class SidebarItemComponent {
|
|
|
120
120
|
router;
|
|
121
121
|
item;
|
|
122
122
|
classname = '';
|
|
123
|
+
sliderClick = new EventEmitter();
|
|
124
|
+
onSliderClick($event) {
|
|
125
|
+
this.sliderClick.emit($event);
|
|
126
|
+
$event.stopPropagation();
|
|
127
|
+
$event.preventDefault();
|
|
128
|
+
}
|
|
123
129
|
constructor(router) {
|
|
124
130
|
this.router = router;
|
|
125
131
|
}
|
|
126
132
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarItemComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
|
|
127
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SidebarItemComponent, isStandalone: true, selector: "pho-sidebar-item", inputs: { item: "item", classname: "classname" }, ngImport: i0, template: `
|
|
133
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SidebarItemComponent, isStandalone: true, selector: "pho-sidebar-item", inputs: { item: "item", classname: "classname" }, outputs: { sliderClick: "sliderClick" }, ngImport: i0, template: `
|
|
128
134
|
@if(item.path === '/dashboard'){
|
|
129
135
|
<li class="list-none flex align-items-center border-bottom-1 border-200">
|
|
130
136
|
<a
|
|
131
137
|
class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
|
|
132
138
|
[attr.data-cy]="'navigation-side-navigation-item-' + item.label"
|
|
133
|
-
[routerLink]="item
|
|
139
|
+
[routerLink]="item?.disabled ? null : item.path"
|
|
134
140
|
routerLinkActive="active-link"
|
|
135
141
|
[ngClass]="[
|
|
136
142
|
classname,
|
|
137
|
-
item
|
|
143
|
+
item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
|
|
138
144
|
]"
|
|
139
|
-
[style.pointer-events]="item
|
|
145
|
+
[style.pointer-events]="item?.disabled ? 'none' : 'auto'"
|
|
140
146
|
>
|
|
141
147
|
<div class="flex align-items-center ">
|
|
142
148
|
<img class="mr-2" width="26" [src]="item.icon" alt="" />
|
|
@@ -151,6 +157,7 @@ class SidebarItemComponent {
|
|
|
151
157
|
size="small"
|
|
152
158
|
[rounded]="true"
|
|
153
159
|
[text]="true"
|
|
160
|
+
(onClick)="onSliderClick($event)"
|
|
154
161
|
/>
|
|
155
162
|
</a>
|
|
156
163
|
</li>
|
|
@@ -158,14 +165,14 @@ class SidebarItemComponent {
|
|
|
158
165
|
<li class="list-none flex align-items-center ">
|
|
159
166
|
<a
|
|
160
167
|
[attr.data-cy]="'navigation-side-navigation-item-' + item.label"
|
|
161
|
-
[routerLink]="item
|
|
168
|
+
[routerLink]="item?.disabled ? null : item.path"
|
|
162
169
|
routerLinkActive="active-link"
|
|
163
170
|
[ngClass]="[
|
|
164
171
|
classname,
|
|
165
|
-
item
|
|
172
|
+
item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
|
|
166
173
|
]"
|
|
167
174
|
class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
|
|
168
|
-
[style.pointer-events]="item
|
|
175
|
+
[style.pointer-events]="item?.disabled ? 'none' : 'auto'"
|
|
169
176
|
>
|
|
170
177
|
<div
|
|
171
178
|
class="flex justify-content-between w-full "
|
|
@@ -210,13 +217,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
210
217
|
<a
|
|
211
218
|
class="p-button no-underline w-full justify-content-between surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
|
|
212
219
|
[attr.data-cy]="'navigation-side-navigation-item-' + item.label"
|
|
213
|
-
[routerLink]="item
|
|
220
|
+
[routerLink]="item?.disabled ? null : item.path"
|
|
214
221
|
routerLinkActive="active-link"
|
|
215
222
|
[ngClass]="[
|
|
216
223
|
classname,
|
|
217
|
-
item
|
|
224
|
+
item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
|
|
218
225
|
]"
|
|
219
|
-
[style.pointer-events]="item
|
|
226
|
+
[style.pointer-events]="item?.disabled ? 'none' : 'auto'"
|
|
220
227
|
>
|
|
221
228
|
<div class="flex align-items-center ">
|
|
222
229
|
<img class="mr-2" width="26" [src]="item.icon" alt="" />
|
|
@@ -231,6 +238,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
231
238
|
size="small"
|
|
232
239
|
[rounded]="true"
|
|
233
240
|
[text]="true"
|
|
241
|
+
(onClick)="onSliderClick($event)"
|
|
234
242
|
/>
|
|
235
243
|
</a>
|
|
236
244
|
</li>
|
|
@@ -238,14 +246,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
238
246
|
<li class="list-none flex align-items-center ">
|
|
239
247
|
<a
|
|
240
248
|
[attr.data-cy]="'navigation-side-navigation-item-' + item.label"
|
|
241
|
-
[routerLink]="item
|
|
249
|
+
[routerLink]="item?.disabled ? null : item.path"
|
|
242
250
|
routerLinkActive="active-link"
|
|
243
251
|
[ngClass]="[
|
|
244
252
|
classname,
|
|
245
|
-
item
|
|
253
|
+
item?.disabled ? 'opacity-50 cursor-not-allowed' : ''
|
|
246
254
|
]"
|
|
247
255
|
class="p-button no-underline w-full justify-content-start surface-0 hover:surface-100 border-none overflow-hidden bg-transparent sidebaritem"
|
|
248
|
-
[style.pointer-events]="item
|
|
256
|
+
[style.pointer-events]="item?.disabled ? 'none' : 'auto'"
|
|
249
257
|
>
|
|
250
258
|
<div
|
|
251
259
|
class="flex justify-content-between w-full "
|
|
@@ -277,19 +285,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
277
285
|
type: Input
|
|
278
286
|
}], classname: [{
|
|
279
287
|
type: Input
|
|
288
|
+
}], sliderClick: [{
|
|
289
|
+
type: Output
|
|
280
290
|
}] } });
|
|
281
291
|
|
|
282
292
|
class SidebarComponent {
|
|
283
293
|
toggleSidebar = new EventEmitter();
|
|
294
|
+
sliderClick = new EventEmitter();
|
|
284
295
|
classname = '';
|
|
285
296
|
mainItems;
|
|
286
297
|
footerItem;
|
|
287
|
-
dashboard = {
|
|
288
|
-
label: 'Dashboard',
|
|
289
|
-
icon: '/assets/dashboard.svg',
|
|
290
|
-
path: '/dashboard',
|
|
291
|
-
disabled: false,
|
|
292
|
-
};
|
|
293
298
|
isHovered = false;
|
|
294
299
|
isSlim = false;
|
|
295
300
|
get hoverState() {
|
|
@@ -306,7 +311,7 @@ class SidebarComponent {
|
|
|
306
311
|
this.toggleSidebar.emit(this.isSlim);
|
|
307
312
|
}
|
|
308
313
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
309
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar" }, ngImport: i0, template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item
|
|
314
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: SidebarComponent, isStandalone: true, selector: "pho-sidebar", inputs: { classname: "classname", mainItems: "mainItems", footerItem: "footerItem" }, outputs: { toggleSidebar: "toggleSidebar", sliderClick: "sliderClick" }, ngImport: i0, template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{ itemGroup.module }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{ itemGroup.module }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <a\n [routerLink]=\"footerItem.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n </a>\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"13\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}\n", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: SidebarItemComponent, selector: "pho-sidebar-item", inputs: ["item", "classname"], outputs: ["sliderClick"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: AccordionModule }, { kind: "component", type: i4.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "style", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "activeIndex", "headerAriaLevel"], outputs: ["valueChange", "activeIndexChange", "onClose", "onOpen"] }, { kind: "component", type: i4.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i4.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i4.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }], animations: [
|
|
310
315
|
trigger('hoverState', [
|
|
311
316
|
state('default', style({
|
|
312
317
|
width: '50px',
|
|
@@ -336,9 +341,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
336
341
|
})),
|
|
337
342
|
transition('default <=> hovered', animate('200ms ease-in-out')),
|
|
338
343
|
]),
|
|
339
|
-
], template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item
|
|
344
|
+
], template: "@if(isSlim){\n<div\n [@hoverState]=\"hoverState\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n class=\"relative shadow-3 h-full sidebar overflow-hidden relative\"\n>\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n (sliderClick)=\"sliderClick.emit($event)\"\n [item]=\"mainItems[0].items[0]\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{ itemGroup.module }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) { } @else { }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @if(isHovered){ @for (item of itemGroup.items.slice(1); track $index)\n {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n } }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n\n <div\n *ngIf=\"footerItem.length\"\n class=\"absolute bottom-0 left-0 flex flex-column w-full\"\n >\n <ul class=\"flex flex-column gap-3 mb-2 p-0 m-0\">\n @for (item of footerItem; track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n }\n </ul>\n </div>\n </div>\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <p-button\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"!isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n />\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [style.transform]=\"isSlim ? 'rotate(180deg)' : ''\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"12\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}@else {\n<div class=\"relative shadow-3 h-full sidebar overflow-hidden relative pr-1\">\n <div class=\"flex flex-column h-full\" style=\"scroll-padding-bottom: 5rem\">\n <div class=\"ml-1 mr-1\">\n <pho-sidebar-item\n [item]=\"mainItems[0].items[0]\"\n (sliderClick)=\"sliderClick.emit($event)\"\n />\n </div>\n\n <p-accordion [value]=\"[0, 1, 2, 3]\" [multiple]=\"true\">\n @for (itemGroup of mainItems; track $index) {\n <p-accordion-panel [value]=\"$index\">\n <p-accordion-header>\n <div class=\"flex align-items-center\">\n <img class=\"mr-2\" width=\"28\" [src]=\"itemGroup.icon\" alt=\"\" />\n <span class=\"text-primary font-bold\">{{ itemGroup.module }}</span>\n </div>\n\n <ng-template #toggleicon let-active=\"active\">\n @if (active) {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-up-fill opacity-70\"\n ></i>\n } @else {\n <i\n style=\"font-size: 0.7rem; padding-right: 12px\"\n class=\"pi pi-sort-down-fill opacity-70\"\n ></i>\n }\n </ng-template>\n </p-accordion-header>\n\n <p-accordion-content>\n @for (item of itemGroup.items.slice(1); track $index) {\n <pho-sidebar-item [item]=\"item\" class=\"group-item\" />\n\n }\n </p-accordion-content>\n </p-accordion-panel>\n }\n </p-accordion>\n </div>\n\n <div class=\"absolute bottom-0 left-0 flex justify-content-between w-full p-1\">\n <a\n [routerLink]=\"footerItem.path\"\n pButton\n icon=\"pi pi-cog\"\n [text]=\"true\"\n size=\"large\"\n class=\"m-1 no-underline\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n </a>\n\n <p-button\n (onClick)=\"onToggleSidebar()\"\n [text]=\"true\"\n [styleClass]=\"'m-1'\"\n [attr.data-cy]=\"'navigation-togg-button'\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 17 15\"\n fill=\"none\"\n class=\"opacity-70\"\n [style.marginTop.px]=\"2\"\n [style.width.px]=\"14\"\n [style.height.px]=\"13\"\n >\n <path\n d=\"M7.071 0L8.485 1.414L3.828 6.071H13V8.071H3.828L8.485 12.728L7.071 14.142L0 7.071L7.071 0ZM15.001 14.071V0.0710001H17.001V14.071H15.001Z\"\n fill=\"black\"\n />\n </svg>\n </p-button>\n </div>\n</div>\n}\n", styles: [":host::ng-deep .p-accordionheader{padding:.5rem 1rem!important}:host::ng-deep .p-accordioncontent-content{padding-bottom:0!important}:host::ng-deep .p-accordionpanel{border:none}\n"] }]
|
|
340
345
|
}], propDecorators: { toggleSidebar: [{
|
|
341
346
|
type: Output
|
|
347
|
+
}], sliderClick: [{
|
|
348
|
+
type: Output
|
|
342
349
|
}], classname: [{
|
|
343
350
|
type: Input
|
|
344
351
|
}], mainItems: [{
|
|
@@ -1158,6 +1165,7 @@ class ShellComponent {
|
|
|
1158
1165
|
onDarkModeSelect = new EventEmitter();
|
|
1159
1166
|
onIsSlimSelect = new EventEmitter();
|
|
1160
1167
|
onUserAction = new EventEmitter();
|
|
1168
|
+
sliderClick = new EventEmitter();
|
|
1161
1169
|
isSlim;
|
|
1162
1170
|
toggleSidebar(isSlim) {
|
|
1163
1171
|
this.isSlim = isSlim;
|
|
@@ -1167,11 +1175,11 @@ class ShellComponent {
|
|
|
1167
1175
|
this.onDarkModeSelect.emit(this.darkModeSelector);
|
|
1168
1176
|
}
|
|
1169
1177
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1170
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-rows': '3.5rem 1fr',\n 'grid-template-columns': 'auto 1fr'\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n ></pho-sidebar>\n </div>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ShellComponent, isStandalone: true, selector: "pho-shell", inputs: { config: "config", darkModeSelector: "darkModeSelector" }, outputs: { onDarkModeSelect: "onDarkModeSelect", onIsSlimSelect: "onIsSlimSelect", onUserAction: "onUserAction", sliderClick: "sliderClick" }, ngImport: i0, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-rows': '3.5rem 1fr',\n 'grid-template-columns': 'auto 1fr'\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content> </ng-content>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "pho-sidebar", inputs: ["classname", "mainItems", "footerItem"], outputs: ["toggleSidebar", "sliderClick"] }, { kind: "component", type: TopbarComponent, selector: "pho-topbar", inputs: ["homeUrl", "user", "shortModuleName", "topbarModulesMenu", "darkModeSelector", "footerConfig", "searchConfig"], outputs: ["onDarkModeSelect", "onUserPopoverAction"] }, { kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1171
1179
|
}
|
|
1172
1180
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ShellComponent, decorators: [{
|
|
1173
1181
|
type: Component,
|
|
1174
|
-
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-rows': '3.5rem 1fr',\n 'grid-template-columns': 'auto 1fr'\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n ></pho-sidebar>\n </div>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
1182
|
+
args: [{ selector: 'pho-shell', imports: [SidebarComponent, TopbarComponent, CommonModule], encapsulation: ViewEncapsulation.None, template: "<!-- Sidebar Layout -->\n<div\n [style]=\"{\n 'grid-template-rows': '3.5rem 1fr',\n 'grid-template-columns': 'auto 1fr'\n }\"\n class=\"pho-grid w-full h-screen overflow-hidden m-0 p-0\"\n>\n <!-- Top header -->\n <pho-topbar\n class=\"pho-col-span-2 z-1\"\n [user]=\"config.user\"\n [shortModuleName]=\"config.shortModuleName\"\n [searchConfig]=\"config.searchConfig\"\n [topbarModulesMenu]=\"config.topbarModulesMenu\"\n [darkModeSelector]=\"darkModeSelector\"\n (onDarkModeSelect)=\"selectDarkMode()\"\n (onUserPopoverAction)=\"onUserAction.emit($event)\"\n >\n </pho-topbar>\n <!-- Sidebar -->\n <div class=\"w-max\">\n <pho-sidebar\n [mainItems]=\"config.mainItems\"\n [footerItem]=\"config.footerItem\"\n (toggleSidebar)=\"toggleSidebar($event)\"\n (sliderClick)=\"sliderClick.emit($event)\"\n ></pho-sidebar>\n </div>\n <!-- Main content -->\n <div class=\"overflow-auto surface-50 wrap w-full\">\n <ng-content> </ng-content>\n </div>\n</div>\n" }]
|
|
1175
1183
|
}], propDecorators: { config: [{
|
|
1176
1184
|
type: Input
|
|
1177
1185
|
}], darkModeSelector: [{
|
|
@@ -1182,6 +1190,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
1182
1190
|
type: Output
|
|
1183
1191
|
}], onUserAction: [{
|
|
1184
1192
|
type: Output
|
|
1193
|
+
}], sliderClick: [{
|
|
1194
|
+
type: Output
|
|
1185
1195
|
}] } });
|
|
1186
1196
|
|
|
1187
1197
|
var tableActionType;
|
|
@@ -2532,7 +2542,7 @@ class TableComponent {
|
|
|
2532
2542
|
this.bulkMode = false;
|
|
2533
2543
|
}
|
|
2534
2544
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2535
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <i\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <span>{{ rowData[\"category.name\"] }}</span>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
|
|
2545
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: TableComponent, isStandalone: true, selector: "phoenix-table", inputs: { data: "data", columns: "columns", selectedColumnsInput: "selectedColumnsInput", tableConfiguration: "tableConfiguration", filters: "filters" }, outputs: { actionClick: "actionClick", rowSelection: "rowSelection", checkBoxSelection: "checkBoxSelection", saveColumns: "saveColumns" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <i\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <span>{{ rowData[\"category.name\"] }}</span>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: i2$4.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "virtualRowHeight", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2$4.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "directive", type: i2$4.ResizableColumn, selector: "[pResizableColumn]", inputs: ["pResizableColumnDisabled"] }, { kind: "component", type: i2$4.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i2$4.TableRadioButton, selector: "p-tableRadioButton", inputs: ["value", "disabled", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableCheckbox, selector: "p-tableCheckbox", inputs: ["value", "disabled", "required", "index", "inputId", "name", "ariaLabel"] }, { kind: "component", type: i2$4.TableHeaderCheckbox, selector: "p-tableHeaderCheckbox", inputs: ["disabled", "inputId", "name", "ariaLabel"] }, { kind: "component", type: TableCaptionComponent, selector: "table-caption", inputs: ["tableConfiguration", "columns", "searchQuery", "selectedItems", "filters"], outputs: ["applyFiltersEvent", "applyColumnsEvent", "searchChange", "actionClick"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i5.Tag, selector: "p-tag", inputs: ["style", "styleClass", "severity", "value", "icon", "rounded"] }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$1.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "pipe", type: TableCellPipe, name: "cell" }, { kind: "ngmodule", type: SkeletonModule }, { kind: "component", type: i9.Skeleton, selector: "p-skeleton", inputs: ["styleClass", "style", "shape", "animation", "borderRadius", "size", "width", "height"] }, { kind: "ngmodule", type: PanelModule }, { kind: "ngmodule", type: OverlayPanelModule }, { kind: "component", type: i9$1.OverlayPanel, selector: "p-overlayPanel, p-overlaypanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "ngmodule", type: ChipModule }, { kind: "component", type: i10$1.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "pipe", type: InitialsPipe, name: "initials" }, { kind: "pipe", type: TimePeriodPipe, name: "timePeriod" }] });
|
|
2536
2546
|
}
|
|
2537
2547
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableComponent, decorators: [{
|
|
2538
2548
|
type: Component,
|
|
@@ -2552,7 +2562,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
2552
2562
|
ChipModule,
|
|
2553
2563
|
InitialsPipe,
|
|
2554
2564
|
TimePeriodPipe,
|
|
2555
|
-
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <i\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <span>{{ rowData[\"category.name\"] }}</span>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
|
|
2565
|
+
], template: "<div class=\"border-1 border-round-sm border-300 border-round-md m-2\">\n <ng-container *ngIf=\"selectedItems().length === 0; else selectionActions\">\n <table-caption\n [columns]=\"columns\"\n [tableConfiguration]=\"tableConfiguration\"\n [filters]=\"filters\"\n [selectedItems]=\"selectedItems()\"\n (applyFiltersEvent)=\"applyFilters($event)\"\n (applyColumnsEvent)=\"applyColumns($event)\"\n (searchChange)=\"onSearch($event)\"\n (actionClick)=\"handleActionClick($event)\"\n >\n </table-caption>\n </ng-container>\n\n <ng-template #selectionActions>\n <div\n style=\"min-height: 40px; padding: 8px\"\n class=\"flex justify-content-between align-items-center border-bottom-1 border-300 pl-5 pr-5 text-sm text-500\"\n >\n <div>\n @if(tableConfiguration.selectionType === selectionTypeEnum.CHECKBOX){\n <span>{{ selectedItems().length }} items selected</span>}\n </div>\n\n <div>\n <ng-container *ngFor=\"let action of tableConfiguration.bulkActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"\n handleActionClick({\n action: action,\n selectedItems: selectedItems()\n });\n clearSelection()\n \"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n\n <button\n [attr.data-cy]=\"'clear-selection-button'\"\n class=\"p-button p-button-text p-button-plain\"\n (click)=\"clearSelection()\"\n aria-label=\"Clear Selection\"\n >\n <i class=\"pi pi-times\"></i>\n </button>\n </div>\n </div>\n </ng-template>\n\n <p-table\n [columns]=\"selectedColumns\"\n [value]=\"tableData\"\n [size]=\"'small'\"\n scrollable=\"true\"\n [scrollHeight]=\"tableConfiguration.scrollHeight\"\n [virtualScroll]=\"true\"\n [virtualScrollItemSize]=\"50\"\n [rows]=\"100\"\n [lazy]=\"true\"\n [rowSelectable]=\"isRowSelectable\"\n [totalRecords]=\"totalRecords\"\n (onLazyLoad)=\"loadLazyData($event)\"\n [selection]=\"selectedItems()\"\n (selectionChange)=\"onSelectionChange($event)\"\n [sortMode]=\"'multiple'\"\n [resizableColumns]=\"true\"\n columnResizeMode=\"expand\"\n >\n <ng-template #header let-columns>\n <tr style=\"height: 40px\" class=\"dt-header\">\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <th class=\"custom-th\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableHeaderCheckbox\n [attr.data-cy]=\"'table-header-checkbox'\"\n ></p-tableHeaderCheckbox>\n </th>\n <th\n class=\"custom-th\"\n *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\"\n ></th>\n </ng-container>\n\n <th\n pResizableColumn\n class=\"custom-th text-primary font-bold\"\n *ngFor=\"let col of columns\"\n [pSortableColumn]=\"col.field\"\n >\n {{ col.header | translate }}\n <p-sortIcon\n [field]=\"col.field\"\n [attr.data-cy]=\"'sort-button-' + col.header\"\n ></p-sortIcon>\n </th>\n <th class=\"custom-th\"></th>\n </tr>\n </ng-template>\n\n <ng-template\n #body\n let-rowData\n let-columns=\"columns\"\n let-rowIndex=\"rowIndex\"\n >\n <tr>\n <ng-container [ngSwitch]=\"tableConfiguration.selectionType\">\n <td class=\"w-2rem\" *ngSwitchCase=\"selectionTypeEnum.CHECKBOX\">\n <p-tableCheckbox\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.CHECKBOX + '-' + rowIndex\n \"\n [disabled]=\"\n rowData?.canSelect !== undefined ? !rowData.canSelect : false\n \"\n [value]=\"rowData\"\n ></p-tableCheckbox>\n </td>\n <td *ngSwitchCase=\"selectionTypeEnum.RADIO_BTN\">\n <p-tableRadioButton\n [value]=\"rowData\"\n [attr.data-cy]=\"\n 'table-row-' + selectionTypeEnum.RADIO_BTN + '-' + rowIndex\n \"\n ></p-tableRadioButton>\n </td>\n </ng-container>\n\n <td\n *ngFor=\"let col of columns; let i = index\"\n (click)=\"\n i < 2 && tableConfiguration.hasCellClick\n ? onRowClick($event, rowData)\n : null\n \"\n [ngClass]=\"{\n 'text-blue-500 underline cursor-pointer':\n i < 2 && tableConfiguration.hasCellClick\n }\"\n >\n <ng-container [ngSwitch]=\"col.columnType\">\n <ng-container *ngSwitchCase=\"columnTypeEnum.TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field + 'Color'] || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"\n rowData[col.field]?.name || rowData[col.field] | translate\n \"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.OBJ_TAG\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-tag\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.OBJ_TAG +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [style]=\"{\n 'background-color': rowData[col.field].color || '#ccc',\n 'font-size': '0.9rem!important'\n }\"\n [value]=\"rowData[col.field]?.value | translate\"\n ></p-tag>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.PERSON\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <p-avatar\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.PERSON +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [label]=\"rowData[col.field]?.name | initials\"\n class=\"cursor-pointer\"\n [style]=\"{\n 'background-color': '#9c27b0',\n color: '#ffffff',\n 'font-size': '0.8rem!important'\n }\"\n shape=\"circle\"\n (click)=\"opp.toggle($event)\"\n ></p-avatar>\n <p-overlayPanel #opp>\n <div>\n <span class=\"text-lg\">{{ rowData[col.field].name }} </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-envelope mr-1 text-500\"></i>\n\n {{ rowData[col.field].email ?? \" --\" }}\n </span>\n <span class=\"block text-sm\">\n <i class=\"pi pi-phone text-500\"></i\n >{{ rowData[col.field].phone ?? \" --\" }}\n </span>\n </div>\n </p-overlayPanel>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.LIST\">\n <ng-container\n *ngIf=\"rowData[col.field]?.length; else emptyCellBlock\"\n >\n @if(rowData[col.field].length > 1){\n <div\n class=\"cursor-pointer\"\n (click)=\"op.toggle($event)\"\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.LIST +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n >\n <span class=\"mr-1\">{{ rowData[col.field][0].name }} </span>\n <p-chip\n class=\"text-sm font-semibold p-1 m-0\"\n [label]=\"'+' + (rowData[col.field].length - 1)\"\n />\n </div>\n\n } @else {\n <span>{{ rowData[col.field][0].name }}</span>\n }\n </ng-container>\n <p-overlayPanel #op>\n @for(item of rowData[col.field] ; track item.name; let isFirst =\n $first ){\n <ul class=\"list-none m-0 p-0\">\n @if(!isFirst) {\n <li>{{ item.name }}</li>\n }\n </ul>\n }\n </p-overlayPanel>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.BOOLEAN\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <i\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.BOOLEAN +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.BOOLEAN | lowercase)\n \"\n class=\"pi\"\n [ngClass]=\"{\n 'text-green-500 pi-check-circle': rowData[col.field],\n }\"\n ></i>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TEXT_AREA\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT_AREA +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"width: 200px\"\n [attr.data-cy]=\"\n 'table-cell-' + (columnTypeEnum.TEXT_AREA | lowercase)\n \"\n >\n {{\n rowData[col.field].length > 50\n ? (rowData[col.field] | slice : 0 : 50) + \"...\"\n : rowData[col.field]\n }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchCase=\"columnTypeEnum.TIMEPERIOD\">\n <ng-container *ngIf=\"rowData[col.field]; else emptyCellBlock\">\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TIMEPERIOD +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field] | timePeriod\"\n style=\"max-width: 200px\"\n >\n {{ rowData[col.field] | timePeriod }}\n </div>\n </ng-container>\n </ng-container>\n\n <ng-container *ngSwitchDefault>\n <span>{{ rowData[\"category.name\"] }}</span>\n <div\n [attr.data-cy]=\"\n 'table-row-' +\n columnTypeEnum.TEXT +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n \"\n [pTooltip]=\"rowData[col.field]\"\n style=\"max-width: 200px\"\n [innerHTML]=\"rowData | cell : col : dateFormat\"\n ></div>\n </ng-container>\n <ng-template #emptyCellBlock>\n <ng-container\n [ngTemplateOutlet]=\"emptyCell\"\n [ngTemplateOutletContext]=\"{\n dataCy:\n 'table-row-' +\n col.columnType +\n '-row-index-' +\n rowIndex +\n '-col-index-' +\n i\n }\"\n >\n </ng-container>\n </ng-template>\n </ng-container>\n </td>\n\n <td class=\"p-0\">\n <ng-container *ngFor=\"let action of tableConfiguration.rowActions\">\n <phoenix-phoenix-data-table-action\n [actionConfig]=\"action\"\n [rowData]=\"rowData\"\n (actionClick)=\"handleActionClick($event)\"\n ></phoenix-phoenix-data-table-action>\n </ng-container>\n </td>\n </tr>\n </ng-template>\n\n <ng-template #emptyCell let-dataCy=\"dataCy\">\n <span [attr.data-cy]=\"dataCy\">--</span>\n </ng-template>\n\n <ng-template pTemplate=\"loadingbody\" let-columns>\n <tr style=\"height: 46px\">\n <td *ngFor=\"let col of columns\">\n <p-skeleton [ngStyle]=\"{ width: '60%' }\"></p-skeleton>\n </td>\n <td>\n <p-skeleton [ngStyle]=\"{ width: '20%' }\"></p-skeleton>\n </td>\n </tr>\n </ng-template>\n\n <ng-template pTemplate=\"emptymessage\">\n <td class=\"p-2\" colspan=\"100\">\n <div class=\"flex align-items-center\">\n <i class=\"pi pi-info-circle mr-2\"></i>\n {{ \"NO_RESULTS_FOUND\" | translate }}\n </div>\n </td>\n </ng-template>\n </p-table>\n\n <div class=\"border-top-1 border-300 pl-2 p-1 text-sm text-500\">\n Total records: {{ totalRecords }}\n </div>\n</div>\n", styles: [":is() .p-avatar{border-radius:50%!important}::ng-deep .p-paginator button{scale:.7}::ng-deep .p-paginator-rpp-options{scale:.7}::ng-deep .p-datatable .p-datatable-header{border-radius:10px 10px 0 0}:host::ng-deep .p-tag{font-weight:400!important;font-size:.875rem!important}\n"] }]
|
|
2556
2566
|
}], propDecorators: { data: [{
|
|
2557
2567
|
type: Input
|
|
2558
2568
|
}], columns: [{
|