@onecx/angular-accelerator 5.23.3 → 5.23.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3899,13 +3899,12 @@ class FilterViewComponent {
|
|
|
3899
3899
|
id: `${f.columnId}-${f.value}`,
|
|
3900
3900
|
column: filterColumn.nameKey,
|
|
3901
3901
|
value: f.value,
|
|
3902
|
-
|
|
3903
|
-
columnFilterType: filterColumn.filterType,
|
|
3902
|
+
valueColumnId: filterColumn.id,
|
|
3904
3903
|
};
|
|
3905
3904
|
})
|
|
3906
3905
|
.filter((v) => v !== undefined)
|
|
3907
3906
|
.slice()
|
|
3908
|
-
.sort((a, b) => columnIds.indexOf(a.
|
|
3907
|
+
.sort((a, b) => columnIds.indexOf(a.valueColumnId) - columnIds.indexOf(b.valueColumnId));
|
|
3909
3908
|
}));
|
|
3910
3909
|
}
|
|
3911
3910
|
get _fitlerViewNoSelection() {
|
|
@@ -3965,7 +3964,7 @@ class FilterViewComponent {
|
|
|
3965
3964
|
});
|
|
3966
3965
|
}
|
|
3967
3966
|
onFilterDelete(row) {
|
|
3968
|
-
const filters = this.filters.filter((f) => !(f.columnId === row['
|
|
3967
|
+
const filters = this.filters.filter((f) => !(f.columnId === row['valueColumnId'] && f.value === row['value']));
|
|
3969
3968
|
this.filters = filters;
|
|
3970
3969
|
this.filtered.emit(filters);
|
|
3971
3970
|
this.componentStateChanged.emit({
|
|
@@ -3987,6 +3986,9 @@ class FilterViewComponent {
|
|
|
3987
3986
|
getColumnForFilter(filter, columns) {
|
|
3988
3987
|
return columns.find((c) => c.id === filter.columnId);
|
|
3989
3988
|
}
|
|
3989
|
+
getColumn(colId, columns) {
|
|
3990
|
+
return columns.find((c) => c.id === colId);
|
|
3991
|
+
}
|
|
3990
3992
|
resolveFieldData(object, key) {
|
|
3991
3993
|
return ObjectUtils.resolveFieldData(object, key);
|
|
3992
3994
|
}
|
|
@@ -3995,12 +3997,18 @@ class FilterViewComponent {
|
|
|
3995
3997
|
[filter.columnId]: filter.value,
|
|
3996
3998
|
};
|
|
3997
3999
|
}
|
|
4000
|
+
getRowForValueColumn(row) {
|
|
4001
|
+
return {
|
|
4002
|
+
id: row.id,
|
|
4003
|
+
[row['valueColumnId']]: row['value'],
|
|
4004
|
+
};
|
|
4005
|
+
}
|
|
3998
4006
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3999
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: FilterViewComponent, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: OverlayPanel, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as columns\">\n <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container *ngIf=\"filters.length <= 0\">\n <ng-container\n *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n >\n </ng-container>\n <ng-template #defaultNoFilters>\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n <ng-container *ngFor=\"let filter of selectedFilters\">\n <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n <ng-container\n *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n [ngTemplateOutlet]=\"_filterViewChipContent\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n <ng-template #chipContentTemplate>\n <span\n *ngIf=\"columns$ | async as columns\"\n style=\"white-space: nowrap\"\n class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:<ng-container\n *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n </ng-container>\n </span>\n </ng-template>\n </p-chip>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n <ng-container\n *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n <ng-template #showMoreChipTemplate>\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #noChipsContent>\n <p-button\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n\n <ng-template #filterTablePanel>\n <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n [columns]=\"columnFilterTableColumns\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"tableValueTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"tableValueTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-template>\n </div>\n</ng-container>\n\n<ng-template #tableValueTemplate let-templates=\"templates\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"column.id !== 'value'\"\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n <ng-container *ngIf=\"column.id === 'value'\">\n <ng-container\n *ngIf=\"!rowObject['columnFilterType'] || rowObject['columnFilterType'] === FilterType.EQUAL\"\n [ngTemplateOutlet]=\"templates[rowObject['columnId']]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n <ng-container\n *ngIf=\"rowObject['columnFilterType'] === FilterType.TRUTHY\"\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n <ng-container\n *ngIf=\"templates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i7$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
4007
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.6", type: FilterViewComponent, selector: "ocx-filter-view", inputs: { filters: "filters", columns: "columns", displayMode: "displayMode", selectDisplayedChips: "selectDisplayedChips", chipStyleClass: "chipStyleClass", tableStyle: "tableStyle", panelStyle: "panelStyle", templates: "templates" }, outputs: { filtered: "filtered", componentStateChanged: "componentStateChanged" }, viewQueries: [{ propertyName: "panel", first: true, predicate: OverlayPanel, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"columns$ | async as columns\">\n <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container *ngIf=\"filters.length <= 0\">\n <ng-container\n *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n >\n </ng-container>\n <ng-template #defaultNoFilters>\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n <ng-container *ngFor=\"let filter of selectedFilters\">\n <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n <ng-container\n *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n [ngTemplateOutlet]=\"_filterViewChipContent\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n <ng-template #chipContentTemplate>\n <span\n *ngIf=\"columns$ | async as columns\"\n style=\"white-space: nowrap\"\n class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:<ng-container\n *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n </ng-container>\n </span>\n </ng-template>\n </p-chip>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n <ng-container\n *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n <ng-template #showMoreChipTemplate>\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #noChipsContent>\n <p-button\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n\n <ng-template #filterTablePanel>\n <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n [columns]=\"columnFilterTableColumns\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container *ngIf=\"getColumn(rowObject['valueColumnId'], columns) as valueColumn\">\n <ng-container\n *ngIf=\"!valueColumn.filterType || valueColumn.filterType === FilterType.EQUAL\"\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n <ng-container\n *ngIf=\"valueColumn.filterType === FilterType.TRUTHY\"\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-template>\n </div>\n</ng-container>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n <ng-container\n *ngIf=\"templates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i7.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "component", type: i7.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i6$3.OverlayPanel, selector: "p-overlayPanel", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "showCloseIcon", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i7$3.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "component", type: DataTableComponent, selector: "ocx-data-table", inputs: ["rows", "selectedRows", "filters", "sortDirection", "sortColumn", "columns", "clientSideFiltering", "clientSideSorting", "sortStates", "pageSizes", "pageSize", "emptyResultsMessage", "name", "deletePermission", "viewPermission", "editPermission", "deleteActionVisibleField", "deleteActionEnabledField", "viewActionVisibleField", "viewActionEnabledField", "editActionVisibleField", "editActionEnabledField", "selectionEnabledField", "allowSelectAll", "paginator", "page", "tableStyle", "totalRecordsOnServer", "currentPageShowingKey", "currentPageShowingWithTotalOnServerKey", "stringCellTemplate", "numberCellTemplate", "customCellTemplate", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "customFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.DecimalPipe, name: "number" }, { kind: "pipe", type: i4.DatePipe, name: "date" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
|
|
4000
4008
|
}
|
|
4001
4009
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImport: i0, type: FilterViewComponent, decorators: [{
|
|
4002
4010
|
type: Component,
|
|
4003
|
-
args: [{ selector: 'ocx-filter-view', template: "<ng-container *ngIf=\"columns$ | async as columns\">\n <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container *ngIf=\"filters.length <= 0\">\n <ng-container\n *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n >\n </ng-container>\n <ng-template #defaultNoFilters>\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n <ng-container *ngFor=\"let filter of selectedFilters\">\n <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n <ng-container\n *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n [ngTemplateOutlet]=\"_filterViewChipContent\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n <ng-template #chipContentTemplate>\n <span\n *ngIf=\"columns$ | async as columns\"\n style=\"white-space: nowrap\"\n class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:<ng-container\n *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n </ng-container>\n </span>\n </ng-template>\n </p-chip>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n <ng-container\n *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n <ng-template #showMoreChipTemplate>\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #noChipsContent>\n <p-button\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n\n <ng-template #filterTablePanel>\n <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n [columns]=\"columnFilterTableColumns\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"tableValueTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"tableValueTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-template>\n </div>\n</ng-container>\n\n<ng-template #tableValueTemplate let-templates=\"templates\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n *ngIf=\"column.id !== 'value'\"\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n <ng-container *ngIf=\"column.id === 'value'\">\n <ng-container\n *ngIf=\"!rowObject['columnFilterType'] || rowObject['columnFilterType'] === FilterType.EQUAL\"\n [ngTemplateOutlet]=\"templates[rowObject['columnId']]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column\n }\"\n >\n </ng-container>\n <ng-container\n *ngIf=\"rowObject['columnFilterType'] === FilterType.TRUTHY\"\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n <ng-container\n *ngIf=\"templates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"] }]
|
|
4011
|
+
args: [{ selector: 'ocx-filter-view', template: "<ng-container *ngIf=\"columns$ | async as columns\">\n <div *ngIf=\"filters$ | async as filters\" class=\"flex flex-wrap align-items-center gap-2\">\n <ng-container *ngIf=\"displayMode === 'chips'; else noChipsContent\">\n <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n <ng-container *ngIf=\"selectDisplayedChips(filters, columns) as selectedFilters\">\n <p-button\n #chipFilterResetButton\n id=\"ocxFilterViewReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container *ngIf=\"filters.length <= 0\">\n <ng-container\n *ngIf=\"_fitlerViewNoSelection; else defaultNoFilters\"\n [ngTemplateOutlet]=\"_fitlerViewNoSelection\"\n >\n </ng-container>\n <ng-template #defaultNoFilters>\n <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n </ng-template>\n </ng-container>\n <ng-container *ngIf=\"(chipTemplates$ | async) ?? {} as templates\">\n <ng-container *ngFor=\"let filter of selectedFilters\">\n <ng-container *ngIf=\"getColumnForFilter(filter, columns) as column\">\n <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n <ng-container\n *ngIf=\"_filterViewChipContent; else chipContentTemplate\"\n [ngTemplateOutlet]=\"_filterViewChipContent\"\n [ngTemplateOutletContext]=\"{\n filter: filter,\n column: column,\n filterValueTemplates: templates,\n truthyTemplate: truthyTemplate,\n filterValueTemplate: chipTemplate\n }\"\n >\n </ng-container>\n <ng-template #chipContentTemplate>\n <span\n *ngIf=\"columns$ | async as columns\"\n style=\"white-space: nowrap\"\n class=\"p-chip-text flex flex-nowrap\"\n >{{column?.nameKey ?? '' | translate }}:<ng-container\n *ngIf=\"filter.filterType === FilterType.EQUAL || !filter.filterType\"\n [ngTemplateOutlet]=\"chipTemplate\"\n [ngTemplateOutletContext]=\"{\n templates: templates,\n filter: filter,\n column: column\n }\"\n ></ng-container>\n <ng-container *ngIf=\"filter.filterType === FilterType.TRUTHY\">\n <ng-container\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: filter.value\n }\"\n ></ng-container>\n </ng-container>\n </span>\n </ng-template>\n </p-chip>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"selectedFilters.length < filters.length\">\n <p-chip\n #showMoreChip\n id=\"ocxFilterViewShowMore\"\n tabindex=\"0\"\n role=\"button\"\n (click)=\"showPanel($event)\"\n class=\"cursor-pointer filter-view-focusable\"\n (keydown.enter)=\"showPanel($event)\"\n (keydown.space)=\"showPanel($event)\"\n >\n <ng-container\n *ngIf=\"_filterViewShowMoreChip; else showMoreChipTemplate\"\n [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n [ngTemplateOutletContext]=\"{\n $implicit: filters.length - selectedFilters.length\n }\"\n >\n </ng-container>\n <ng-template #showMoreChipTemplate>\n <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n </ng-template>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </p-chip>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #noChipsContent>\n <p-button\n #manageButton\n id=\"ocxFilterViewManage\"\n (onClick)=\"showPanel($event)\"\n icon=\"pi pi-sliders-h\"\n label=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.LABEL' | translate }}\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [badge]=\"filters.length.toString()\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.MANAGE_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n </ng-template>\n\n <ng-template #filterTablePanel>\n <p-overlayPanel *ngIf=\"tableTemplates$ | async as templates\" #op [style]=\"panelStyle\" (onHide)=\"focusTrigger()\">\n <ng-template pTemplate=\"content\">\n <div pFocusTrap>\n <div class=\"flex justify-content-between align-items-center mb-2\">\n <span class=\"text-2xl font-medium\">{{'OCX_FILTER_VIEW.PANEL_TITLE' | translate}}</span>\n <div>\n <p-button\n pAutoFocus\n [autofocus]=\"true\"\n id=\"ocxFilterViewOverlayReset\"\n (onClick)=\"onResetFilersClick()\"\n icon=\"pi pi-eraser\"\n pTooltip=\"{{ 'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.DETAIL' | translate }}\"\n tooltipPosition=\"top\"\n tooltipEvent=\"hover\"\n [ariaLabel]=\"'OCX_FILTER_VIEW.RESET_FILTERS_BUTTON.ARIA_LABEL' | translate\"\n ></p-button>\n </div>\n </div>\n <ocx-data-table\n id=\"ocxFilterViewDataTable\"\n [rows]=\"(columnFilterDataRows$ | async) ?? []\"\n [columns]=\"columnFilterTableColumns\"\n [emptyResultsMessage]=\"'OCX_FILTER_VIEW.NO_FILTERS' | translate\"\n [paginator]=\"false\"\n [tableStyle]=\"tableStyle\"\n >\n <ng-template pTemplate=\"columnIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container\n [ngTemplateOutlet]=\"templates[column.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: rowObject,\n column: column,\n }\"\n >\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"valueIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container *ngIf=\"getColumn(rowObject['valueColumnId'], columns) as valueColumn\">\n <ng-container\n *ngIf=\"!valueColumn.filterType || valueColumn.filterType === FilterType.EQUAL\"\n [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowForValueColumn(rowObject),\n column: valueColumn\n }\"\n >\n </ng-container>\n <ng-container\n *ngIf=\"valueColumn.filterType === FilterType.TRUTHY\"\n [ngTemplateOutlet]=\"truthyTemplate\"\n [ngTemplateOutletContext]=\"{\n value: resolveFieldData(rowObject, column.id)\n }\"\n >\n </ng-container>\n </ng-container>\n </ng-template>\n <ng-template pTemplate=\"actionsIdCell\" let-rowObject=\"rowObject\" let-column=\"column\">\n <div>\n <button\n pButton\n class=\"p-button-rounded p-button-danger p-button-text\"\n title=\"{{ 'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_TITLE' | translate }}\"\n [attr.aria-label]=\"'OCX_FILTER_VIEW.TABLE.REMOVE_FILTER_ARIA_LABEL' | translate\"\n icon=\"pi pi-trash\"\n (click)=\"onFilterDelete(rowObject)\"\n ></button>\n </div>\n </ng-template>\n </ocx-data-table>\n </div>\n </ng-template>\n </p-overlayPanel>\n </ng-template>\n </div>\n</ng-container>\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n <ng-container\n *ngIf=\"templates[column.id] as template\"\n [ngTemplateOutlet]=\"template\"\n [ngTemplateOutletContext]=\"{\n rowObject: getRowObjectFromFiterData(filter),\n column: column\n }\"\n >\n </ng-container>\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n <ng-container *ngIf=\"value\"> {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} </ng-container>\n <ng-container *ngIf=\"!value\"> {{'OCX_FILTER_VIEW.FILTER_NO' | translate}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultStringValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id)}} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultNumberValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | number }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultCustomValue\" let-rowObject=\"rowObject\" let-column=\"column\"> </ng-template>\n\n<ng-template pTemplate=\"defaultDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | date: column.dateFormat ?? 'medium' }} </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultRelativeDateValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container>\n {{ 'OCX_DATA_TABLE.EDITED' | translate }} {{ resolveFieldData(rowObject, column.id) | timeago }}\n </ng-container>\n</ng-template>\n\n<ng-template pTemplate=\"defaultTranslationKeyValue\" let-rowObject=\"rowObject\" let-column=\"column\">\n <ng-container> {{ resolveFieldData(rowObject, column.id) | translate }}</ng-container>\n</ng-template>\n", styles: [".filter-view-focusable:focus{outline:1px solid var(--primary-color);outline-offset:2px;box-shadow:none;border-radius:var(--chip-border-radius)}\n"] }]
|
|
4004
4012
|
}], propDecorators: { filters: [{
|
|
4005
4013
|
type: Input
|
|
4006
4014
|
}], columns: [{
|