@fuentis/phoenix-ui 0.0.9-alpha.431 → 0.0.9-alpha.433
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.
|
@@ -1375,6 +1375,7 @@ var tableActionType;
|
|
|
1375
1375
|
tableActionType["DOWNLOAD"] = "download";
|
|
1376
1376
|
tableActionType["ATTACH"] = "attach";
|
|
1377
1377
|
tableActionType["IMPORT"] = "import";
|
|
1378
|
+
tableActionType["ROW_DELETE"] = "row_delete";
|
|
1378
1379
|
///multiple options
|
|
1379
1380
|
tableActionType["ASSIGN_FROM_CATALOG"] = "ASSIGN_FROM_CATALOG";
|
|
1380
1381
|
tableActionType["ASSIGN_FROM_ITEM"] = "ASSIGN_FROM_ITEM";
|
|
@@ -1452,6 +1453,7 @@ var ico;
|
|
|
1452
1453
|
ico["download"] = "pi pi-download";
|
|
1453
1454
|
ico["attach"] = "pi pi-paperclip";
|
|
1454
1455
|
ico["details"] = "pi pi-info-circle";
|
|
1456
|
+
ico["row_delete"] = "pi pi-trash";
|
|
1455
1457
|
})(ico || (ico = {}));
|
|
1456
1458
|
/// two disble opt
|
|
1457
1459
|
/// Read only: Default scope/enity or any other reason | referenced type etc...
|
|
@@ -1528,7 +1530,7 @@ class PhoenixDataTableActionComponent {
|
|
|
1528
1530
|
this.actionClick.emit({ action, rowData: this.rowData });
|
|
1529
1531
|
}
|
|
1530
1532
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoenixDataTableActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1531
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li
|
|
1533
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: PhoenixDataTableActionComponent, isStandalone: true, selector: "phoenix-data-table-action", inputs: { actionConfig: "actionConfig", rowData: "rowData" }, outputs: { actionClick: "actionClick" }, usesOnChanges: true, ngImport: i0, template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li\n class=\"cursor-pointer block\"\n [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n (click)=\"onActionClick(item)\"\n >\n <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n </li>\n </ng-container>\n </ul>\n</p-popover>\n\n<p-button\n [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n [label]=\"btnConfig.label | translate\"\n [text]=\"btnConfig.text\"\n [icon]=\"icon\"\n [disabled]=\"disabled\"\n [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n (click)=\"\n btnConfig.type === 'multiselect'\n ? op.toggle($event)\n : onActionClick(actionConfig)\n \"\n [outlined]=\"btnConfig.outlined\"\n [pTooltip]=\"actionConfig.label | translate\"\n tooltipPosition=\"bottom\"\n [class]=\"btnConfig.class\"\n [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\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: "ngmodule", type: ButtonModule }, { 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: "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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }] });
|
|
1532
1534
|
}
|
|
1533
1535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PhoenixDataTableActionComponent, decorators: [{
|
|
1534
1536
|
type: Component,
|
|
@@ -1538,7 +1540,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
1538
1540
|
TooltipModule,
|
|
1539
1541
|
TranslateModule,
|
|
1540
1542
|
PopoverModule,
|
|
1541
|
-
], template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li
|
|
1543
|
+
], template: "<p-popover #op>\n <ul class=\"list-none p-0 m-0\" [attr.data-cy]=\"'table-button-popover'\">\n <ng-container *ngFor=\"let item of btnConfig.items; let last = last\">\n <li\n class=\"cursor-pointer block\"\n [ngClass]=\"{ 'mb-3': !last, disabledAction: item.disabled }\"\n (click)=\"onActionClick(item)\"\n >\n <i class=\"mr-2\" [class]=\"item.icon\"></i> {{ item.label | translate }}\n </li>\n </ng-container>\n </ul>\n</p-popover>\n\n<p-button\n [attr.data-cy]=\"'table-button-' + actionConfig.type\"\n [label]=\"btnConfig.label | translate\"\n [text]=\"btnConfig.text\"\n [icon]=\"icon\"\n [disabled]=\"disabled\"\n [iconPos]=\"btnConfig.type === 'multiselect' ? 'right' : 'left'\"\n (click)=\"\n btnConfig.type === 'multiselect'\n ? op.toggle($event)\n : onActionClick(actionConfig)\n \"\n [outlined]=\"btnConfig.outlined\"\n [pTooltip]=\"actionConfig.label | translate\"\n tooltipPosition=\"bottom\"\n [class]=\"btnConfig.class\"\n [severity]=\"btnConfig.severity\"\n>\n</p-button>\n", styles: ["::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar{padding-top:0!important}::ng-deep .p-column-filter-overlay-menu .p-column-filter-buttonbar button{scale:.9!important}.disabledAction{pointer-events:none;opacity:.4}\n"] }]
|
|
1542
1544
|
}], propDecorators: { actionConfig: [{
|
|
1543
1545
|
type: Input,
|
|
1544
1546
|
args: [{ required: true }]
|
|
@@ -1605,15 +1607,13 @@ class PhoenixDataTableTabsComponent {
|
|
|
1605
1607
|
const pathSegments = fullPath.split('/').filter(Boolean);
|
|
1606
1608
|
const lastSegment = pathSegments[pathSegments.length - 1];
|
|
1607
1609
|
if (this.actions && this.actions.length > 0) {
|
|
1608
|
-
const found = this.actions.find(ac => ac.key === lastSegment);
|
|
1610
|
+
const found = this.actions.find((ac) => ac.key === lastSegment);
|
|
1609
1611
|
return (found?.key || this.actions[0].key);
|
|
1610
1612
|
}
|
|
1611
1613
|
return '';
|
|
1612
1614
|
}
|
|
1613
1615
|
ngOnInit() {
|
|
1614
|
-
this.router.events
|
|
1615
|
-
.pipe(takeUntilDestroyed(this.dr))
|
|
1616
|
-
.subscribe((event) => {
|
|
1616
|
+
this.router.events.pipe(takeUntilDestroyed(this.dr)).subscribe((event) => {
|
|
1617
1617
|
if (event instanceof NavigationEnd) {
|
|
1618
1618
|
this.value = this.resolveTabFromRoute();
|
|
1619
1619
|
}
|
|
@@ -2293,7 +2293,6 @@ class TableCaptionComponent {
|
|
|
2293
2293
|
if (!this.tableConfiguration || !this.columns)
|
|
2294
2294
|
return;
|
|
2295
2295
|
this.FILTER_KEY = `filters_${this.tableConfiguration.key}`;
|
|
2296
|
-
console.log('Table key:', this.tableConfiguration.key, 'Filter key:', this.FILTER_KEY);
|
|
2297
2296
|
this.initializeSelectedColumns();
|
|
2298
2297
|
if (this.tableConfiguration.hasColumns) {
|
|
2299
2298
|
this.COLUMN_KEY = `columns_${this.tableConfiguration.key}`;
|
|
@@ -2319,7 +2318,9 @@ class TableCaptionComponent {
|
|
|
2319
2318
|
let defaultValue;
|
|
2320
2319
|
if (filter.type === 'multiselect') {
|
|
2321
2320
|
defaultValue = hasSelected
|
|
2322
|
-
?
|
|
2321
|
+
? Array.isArray(filter.selected)
|
|
2322
|
+
? filter.selected
|
|
2323
|
+
: [filter.selected]
|
|
2323
2324
|
: [];
|
|
2324
2325
|
}
|
|
2325
2326
|
else {
|
|
@@ -2478,7 +2479,9 @@ class TableCaptionComponent {
|
|
|
2478
2479
|
/** Thin wrapper to persist a JSON-serializable state in localStorage */
|
|
2479
2480
|
storeTableState(state, key) {
|
|
2480
2481
|
const isEmpty = (v) => v == null ||
|
|
2481
|
-
(typeof v === 'object' &&
|
|
2482
|
+
(typeof v === 'object' &&
|
|
2483
|
+
!Array.isArray(v) &&
|
|
2484
|
+
Object.keys(v).length === 0) ||
|
|
2482
2485
|
(Array.isArray(v) && v.length === 0);
|
|
2483
2486
|
if (isEmpty(state)) {
|
|
2484
2487
|
localStorage.removeItem(key);
|
|
@@ -2507,7 +2510,7 @@ class TableCaptionComponent {
|
|
|
2507
2510
|
this.actionClick.emit({ action, selectedItems: this.selectedItems });
|
|
2508
2511
|
}
|
|
2509
2512
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableCaptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2510
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\" (actionClick)=\"actionClick.emit($event)\">\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action [actionConfig]=\"action\" (actionClick)=\"actionClick.emit($event)\">\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"filtersPopover.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"filtersPopover.toggle($event)\">\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span pRipple class=\"cursor-pointer\" (click)=\"columnsPopover.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span pRipple class=\"cursor-pointer p-2\" (click)=\"columnsPopover.toggle($event)\">\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input type=\"text\" (input)=\"emitSearch($any($event.target).value)\" pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\" />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\" \n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button icon=\"pi pi-refresh\n \" [text]=\"true\" label=\"{{ 'ACTION.CLEAR' | translate }}\" class=\"mr-2\" (click)=\"resetFilters()\" />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key ){ @switch(control.type) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox binary=\"true\" type=\"checkbox\" [formControlName]=\"control.key\" />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select class=\"w-full\" [options]=\"control.options\" optionLabel=\"label\" [formControlName]=\"control.key\"\n [showClear]=\"true\" (onClear)=\"clearSelectFilter(control.key)\" />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect class=\"w-full\" [options]=\"control.options\" optionLabel=\"label\" optionValue=\"key\"\n [formControlName]=\"control.key\" [showClear]=\"true\" (onClear)=\"clearSelectFilter(control.key)\" />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect [options]=\"control.options\" optionLabel=\"label\" [formControlName]=\"control.key\" class=\"w-full\"\n [showClear]=\"true\">\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar [label]=\"selectedOption.label.charAt(0).toUpperCase()\" class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\" shape=\"circle\"></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar [label]=\"person.label.charAt(0).toUpperCase()\" class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\" shape=\"circle\"></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n }} }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button icon=\"pi pi-eye\" [text]=\"true\" label=\"{{ 'ACTION.SHOW_ALL' | translate }}\" class=\"mr-2\"\n (click)=\"resetColumns()\" />\n </div>\n </div>\n\n <p-listbox [options]=\"columns\" [ngModel]=\"_selectedColumns\" (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\" [metaKeySelection]=\"false\" [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\">\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i *ngIf=\"!(item | isSelected : selectedColumns)\" class=\"pi pi-eye-slash\"></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { 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: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2513
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: TableCaptionComponent, isStandalone: true, selector: "table-caption", inputs: { tableConfiguration: "tableConfiguration", columns: "columns", searchQuery: "searchQuery", selectedItems: "selectedItems", filters: "filters" }, outputs: { applyFiltersEvent: "applyFiltersEvent", applyColumnsEvent: "applyColumnsEvent", searchChange: "searchChange", actionClick: "actionClick" }, viewQueries: [{ propertyName: "columnsPopover", first: true, predicate: ["columnsPopover"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key ){ @switch(control.type) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n }} }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: PopoverModule }, { kind: "component", type: i5.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ButtonModule }, { 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: "ngmodule", type: SelectModule }, { kind: "component", type: i12.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "size", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "fluid", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3$3.InputText, selector: "[pInputText]", inputs: ["variant", "fluid", "pSize"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: InputIconModule }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["styleClass"] }, { kind: "ngmodule", type: IconFieldModule }, { kind: "component", type: i7$2.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["iconPosition", "styleClass"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i10.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "fluid", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "size", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: PhoenixDataTableActionComponent, selector: "phoenix-data-table-action", inputs: ["actionConfig", "rowData"], outputs: ["actionClick"] }, { kind: "component", type: PhoenixDataTableTabsComponent, selector: "phoenix-data-table-tabs", inputs: ["actions"], outputs: ["actionClick"] }, { kind: "ngmodule", type: ListboxModule }, { kind: "component", type: i17.Listbox, selector: "p-listbox, p-listBox, p-list-box", inputs: ["id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "ariaLabel", "selectOnFocus", "searchLocale", "focusOnHover", "filterMessage", "filterFields", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "scrollHeight", "tabindex", "multiple", "style", "styleClass", "listStyle", "listStyleClass", "readonly", "disabled", "checkbox", "filter", "filterBy", "filterMatchMode", "filterLocale", "metaKeySelection", "dataKey", "showToggleAll", "optionLabel", "optionValue", "optionGroupChildren", "optionGroupLabel", "optionDisabled", "ariaFilterLabel", "filterPlaceHolder", "emptyFilterMessage", "emptyMessage", "group", "options", "filterValue", "selectAll", "striped", "highlightOnSelect", "checkmark", "dragdrop"], outputs: ["onChange", "onClick", "onDblClick", "onFilter", "onFocus", "onBlur", "onSelectAllChange", "onLazyLoad", "onDrop"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "ngmodule", type: AvatarModule }, { kind: "component", type: i6$2.Avatar, selector: "p-avatar", inputs: ["label", "icon", "image", "size", "shape", "style", "styleClass", "ariaLabel", "ariaLabelledBy"], outputs: ["onImageError"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "ngmodule", type: OverlayBadgeModule }, { kind: "component", type: i14.OverlayBadge, selector: "p-overlayBadge, p-overlay-badge, p-overlaybadge", inputs: ["styleClass", "style", "badgeSize", "severity", "value", "badgeDisabled", "size"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i15.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: FloatLabelModule }, { kind: "component", type: i16.FloatLabel, selector: "p-floatlabel, p-floatLabel, p-float-label", inputs: ["variant"] }] });
|
|
2511
2514
|
}
|
|
2512
2515
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableCaptionComponent, decorators: [{
|
|
2513
2516
|
type: Component,
|
|
@@ -2532,7 +2535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
2532
2535
|
OverlayBadgeModule,
|
|
2533
2536
|
RippleModule,
|
|
2534
2537
|
FloatLabelModule,
|
|
2535
|
-
], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs
|
|
2538
|
+
], template: "<div class=\"flex justify-content-between border-bottom-1 border-300 p-2\">\n <!-- Global Actions & Tabs -->\n <div class=\"flex align-items-center gap-2\">\n <phoenix-data-table-tabs\n [attr.data-cy]=\"'table-select-button-' + tableConfiguration.tabs?.key\"\n [actions]=\"tableConfiguration.tabs\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-tabs>\n <ng-container *ngFor=\"let action of tableConfiguration.globalActions\">\n <phoenix-data-table-action\n [actionConfig]=\"action\"\n (actionClick)=\"actionClick.emit($event)\"\n >\n </phoenix-data-table-action>\n </ng-container>\n </div>\n\n <div class=\"flex align-items-center gap-2\">\n <!-- Filter, Columns, Search, More -->\n @if(tableConfiguration.hasFilter){ @if( hasFormValues() ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"filtersPopover.toggle($event)\"\n >\n <i class=\"pi pi-filter\"></i>\n </span>\n } } @if(tableConfiguration.hasColumns){ @if( columns.length !=\n _selectedColumns.length ){\n <p-overlaybadge class=\"p-2\" severity=\"danger\">\n <span\n pRipple\n class=\"cursor-pointer\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n </p-overlaybadge>\n } @else {\n <span\n pRipple\n class=\"cursor-pointer p-2\"\n (click)=\"columnsPopover.toggle($event)\"\n >\n <i class=\"pi pi-sliders-v\"></i>\n </span>\n\n } }\n\n <div class=\"flex\">\n @if(tableConfiguration.hasSearch){\n <p-iconfield>\n <p-inputicon styleClass=\"pi pi-search\" />\n <input\n type=\"text\"\n (input)=\"emitSearch($any($event.target).value)\"\n pInputText\n placeholder=\"{{ 'SEARCH_KEYWORD' | translate }}\"\n />\n </p-iconfield>\n } @if(tableConfiguration.hasMore){\n <phoenix-data-table-action\n *ngIf=\"tableConfiguration?.hasMore && tableConfiguration?.moreActions\"\n [actionConfig]=\"tableConfiguration.moreActions\"\n (actionClick)=\"actionClick.emit($event)\"\n ></phoenix-data-table-action>\n }\n </div>\n </div>\n</div>\n\n<!-- Popover Filters -->\n<p-popover #filtersPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.FILTERS\" | translate }}</div>\n <div>\n <!-- <p-button\n icon=\"pi pi-save\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SAVE' | translate }}\"\n class=\"mr-2\"\n (click)=\"applyFilters()\"\n /> -->\n\n <p-button\n icon=\"pi pi-refresh\n \"\n [text]=\"true\"\n label=\"{{ 'ACTION.CLEAR' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetFilters()\"\n />\n </div>\n </div>\n\n <form [formGroup]=\"filtersForm\">\n @for(control of filters; track control.key ){ @switch(control.type) {\n @case ('checkbox') {\n <div class=\"mb-2\">\n <p-checkbox\n binary=\"true\"\n type=\"checkbox\"\n [formControlName]=\"control.key\"\n />\n <label class=\"ml-2\">{{ control.label | translate }}</label>\n </div>\n } @case ('dropdown') {\n <div class=\"mb-2\">\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-select\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n </div>\n } @case ('multiselect') {\n <div class=\"mb-2\">\n <p-floatlabel variant=\"on\">\n <p-multiselect\n class=\"w-full\"\n [options]=\"control.options\"\n optionLabel=\"label\"\n optionValue=\"key\"\n [formControlName]=\"control.key\"\n [showClear]=\"true\"\n (onClear)=\"clearSelectFilter(control.key)\"\n />\n <label for=\"username\">{{ control.label | translate }}</label>\n </p-floatlabel>\n <!-- <label class=\"mb-2 block\">{{ control.label }}</label> -->\n </div>\n } @case ('person-dropdown'){\n <label class=\"mb-2 block\">{{ control.label | translate }}</label>\n <p-multiselect\n [options]=\"control.options\"\n optionLabel=\"label\"\n [formControlName]=\"control.key\"\n class=\"w-full\"\n [showClear]=\"true\"\n >\n <ng-template #selectedItem let-selectedOption>\n <div class=\"flex items-center gap-2\" *ngIf=\"selectedOption\">\n <p-avatar\n [label]=\"selectedOption.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ selectedOption.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template let-person #item>\n <div class=\"flex align-items-center gap-2\">\n <p-avatar\n [label]=\"person.label.charAt(0).toUpperCase()\"\n class=\"mr-1\"\n [style]=\"{ 'background-color': '#9c27b0', color: '#ffffff' }\"\n shape=\"circle\"\n ></p-avatar>\n <div>{{ person.label | translate }}</div>\n </div>\n </ng-template>\n <ng-template #dropdownicon>\n <i class=\"pi pi-user\"></i>\n </ng-template>\n <!-- <ng-template #header>\n <div class=\"font-medium p-3\">Available Countries</div>\n </ng-template> -->\n <!-- <ng-template #footer>\n <div class=\"p-3\">\n <p-button label=\"Add New\" fluid severity=\"secondary\" text size=\"small\" icon=\"pi pi-plus\" />\n </div>\n </ng-template> -->\n </p-multiselect>\n } @default{\n <div>{{ control.type }}</div>\n }} }\n </form>\n </div>\n</p-popover>\n\n<!-- Popover Columns -->\n<p-popover #columnsPopover>\n <div class=\"flex flex-column gap-3 w-25rem\">\n <div class=\"flex justify-content-between align-items-center\">\n <div class=\"text-lg font-bold\">{{ \"LABELS.COLUMNS\" | translate }}</div>\n <div>\n <p-button\n icon=\"pi pi-eye\"\n [text]=\"true\"\n label=\"{{ 'ACTION.SHOW_ALL' | translate }}\"\n class=\"mr-2\"\n (click)=\"resetColumns()\"\n />\n </div>\n </div>\n\n <p-listbox\n [options]=\"columns\"\n [ngModel]=\"_selectedColumns\"\n (ngModelChange)=\"onColumnSelectionChange($event)\"\n [multiple]=\"true\"\n [metaKeySelection]=\"false\"\n [listStyle]=\"{ 'max-height': '420px' }\"\n [attr.data-cy]=\"'table-list-box'\"\n >\n <ng-template let-item pTemplate=\"item\">\n <i *ngIf=\"item | isSelected : selectedColumns\" class=\"pi pi-eye\"></i>\n <i\n *ngIf=\"!(item | isSelected : selectedColumns)\"\n class=\"pi pi-eye-slash\"\n ></i>\n <span class=\"ml-2\"> {{ item.header | translate }}</span>\n </ng-template>\n </p-listbox>\n </div>\n</p-popover>\n" }]
|
|
2536
2539
|
}], propDecorators: { columnsPopover: [{
|
|
2537
2540
|
type: ViewChild,
|
|
2538
2541
|
args: ['columnsPopover']
|