@onecx/angular-accelerator 6.24.1 → 6.25.0

package/assets/i18n/de.json

@@ -108,6 +108,7 @@
   },
   "OCX_FILTER_VIEW": {
     "NO_FILTERS": "Keine Filter ausgewählt",
+    "SELECTED_FILTERS_COUNT": "{{results}} aktive Filters.",
     "RESET_FILTERS_BUTTON": {
       "ARIA_LABEL": "Angewandte Filter zurücksetzen",
       "DETAIL": "Angewandte Filter zurücksetzen"

package/assets/i18n/en.json

@@ -108,6 +108,7 @@
   },
   "OCX_FILTER_VIEW": {
     "NO_FILTERS": "No filters selected",
+    "SELECTED_FILTERS_COUNT": "{{results}} active filters.",
     "RESET_FILTERS_BUTTON": {
       "ARIA_LABEL": "Reset applied filters",
       "DETAIL": "Reset applied filters"

package/fesm2022/onecx-angular-accelerator.mjs

@@ -4516,6 +4516,8 @@ function limit(columnFilterData, amount, options) {
 
 class FilterViewComponent {
     constructor() {
+        this.translateService = inject(TranslateService);
+        this.liveAnnouncer = inject(LiveAnnouncer);
         this.ColumnType = ColumnType;
         this.FilterType = FilterType;
         this.filters$ = new BehaviorSubject([]);
@@ -4586,6 +4588,7 @@ class FilterViewComponent {
     }
     set filters(value) {
         this.filters$.next(value);
+        this.annouceFilterCount();
     }
     get columns() {
         return this.columns$.getValue();
@@ -4716,6 +4719,18 @@ class FilterViewComponent {
             [row['valueColumnId']]: row['value'],
         };
     }
+    annouceFilterCount() {
+        const currentCount = this.filters?.length ?? 0;
+        if (currentCount === 0) {
+            firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.NO_FILTERS')).then((translatedText) => {
+                this.liveAnnouncer.announce(translatedText);
+            });
+            return;
+        }
+        firstValueFrom(this.translateService.get('OCX_FILTER_VIEW.SELECTED_FILTERS_COUNT', { results: currentCount })).then((translatedText) => {
+            this.liveAnnouncer.announce(translatedText);
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: FilterViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: FilterViewComponent, isStandalone: false, 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: Popover, descendants: true }, { propertyName: "manageButton", first: true, predicate: ["manageButton"], descendants: true }, { propertyName: "defaultTemplates", predicate: PrimeTemplate, descendants: true }], ngImport: i0, template: "@if (columns$ | async; as columns) { @if (filters$ | async; as filters) {\n<div class=\"flex flex-wrap align-items-center gap-2\">\n  @if (displayMode === 'chips') {\n  <ng-container *ocxIfBreakpoint=\"'desktop'; elseTemplate: noChipsContent\">\n    @if (selectDisplayedChips(filters, columns); as selectedFilters) {\n    <p-button\n      #chipFilterResetButton\n      id=\"ocxFilterViewReset\"\n      (onClick)=\"onResetFilersClick()\"\n      icon=\"pi pi-eraser\"\n      ocxTooltip=\"{{ '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    @if (filters.length <= 0) { @if (_fitlerViewNoSelection) {\n    <ng-container [ngTemplateOutlet]=\"_fitlerViewNoSelection\"> </ng-container>\n    } @else {\n    <span id=\"ocxFilterViewNoFilters\">{{ 'OCX_FILTER_VIEW.NO_FILTERS' | translate }}</span>\n    } } @if ((chipTemplates$ | async) ?? {}; as templates) { @for (filter of selectedFilters; track filter) { @if\n    (getColumnForFilter(filter, columns); as column) {\n    <p-chip [removable]=\"true\" (onRemove)=\"onChipRemove(filter)\" [styleClass]=\"chipStyleClass\">\n      @if (_filterViewChipContent) {\n      <ng-container\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      } @else { @if (columns$ | async; as columns) {\n      <span style=\"white-space: nowrap\" class=\"p-chip-text flex flex-nowrap\"\n        >{{column?.nameKey ?? '' | translate }}:@if (filter.filterType === FilterType.EQUALS || !filter.filterType) {\n        <ng-container\n          [ngTemplateOutlet]=\"chipTemplate\"\n          [ngTemplateOutletContext]=\"{\n                        templates: templates,\n                        filter: filter,\n                        column: column\n                      }\"\n        ></ng-container>\n        } @if (filter.filterType === FilterType.IS_NOT_EMPTY) {\n        <ng-container\n          [ngTemplateOutlet]=\"truthyTemplate\"\n          [ngTemplateOutletContext]=\"{\n                      value: filter.value\n                    }\"\n        ></ng-container>\n        }\n      </span>\n      } }\n    </p-chip>\n    } } @if (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      @if (_filterViewShowMoreChip) {\n      <ng-container\n        [ngTemplateOutlet]=\"_filterViewShowMoreChip\"\n        [ngTemplateOutletContext]=\"{\n            $implicit: filters.length - selectedFilters.length\n          }\"\n      >\n      </ng-container>\n      } @else {\n      <span class=\"p-chip-text flex flex-nowrap\"> +{{filters.length - selectedFilters.length}} </span>\n      }\n      <ng-container [ngTemplateOutlet]=\"filterTablePanel\"></ng-container>\n    </p-chip>\n    } } }\n  </ng-container>\n  } @else {\n  <ng-container [ngTemplateOutlet]=\"noChipsContent\"></ng-container>\n  }\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      ocxTooltip=\"{{ '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  <ng-template #filterTablePanel>\n    @if (tableTemplates$ | async; as templates) {\n    <p-popover #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                ocxTooltip=\"{{ '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              @if (getColumn(rowObject['valueColumnId'], columns); as valueColumn) { @if (!valueColumn.filterType ||\n              valueColumn.filterType === FilterType.EQUALS) {\n              <ng-container\n                [ngTemplateOutlet]=\"templates[valueColumn.id]\"\n                [ngTemplateOutletContext]=\"{\n              rowObject: getRowForValueColumn(rowObject),\n              column: valueColumn\n            }\"\n              >\n              </ng-container>\n              } @if (valueColumn.filterType === FilterType.IS_NOT_EMPTY) {\n              <ng-container\n                [ngTemplateOutlet]=\"truthyTemplate\"\n                [ngTemplateOutletContext]=\"{\n        value: resolveFieldData(rowObject, column.id)\n      }\"\n              >\n              </ng-container>\n              } }\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-popover>\n    }\n  </ng-template>\n</div>\n} }\n\n<ng-template #chipTemplate let-templates=\"templates\" let-filter=\"filter\" let-column=\"column\">\n  @if (templates[column.id]; as template) {\n  <ng-container\n    [ngTemplateOutlet]=\"template\"\n    [ngTemplateOutletContext]=\"{\n            rowObject: getRowObjectFromFiterData(filter),\n            column: column\n          }\"\n  >\n  </ng-container>\n  }\n</ng-template>\n\n<ng-template #truthyTemplate let-value=\"value\">\n  @if (value) { {{'OCX_FILTER_VIEW.FILTER_YES' | translate}} } @if (!value) { {{'OCX_FILTER_VIEW.FILTER_NO' |\n  translate}} }\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i3$4.Chip, selector: "p-chip", inputs: ["label", "icon", "image", "alt", "style", "styleClass", "removable", "removeIcon", "chipProps"], outputs: ["onRemove", "onImageError"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: i5$3.Popover, selector: "p-popover", inputs: ["ariaLabel", "ariaLabelledBy", "dismissable", "style", "styleClass", "appendTo", "autoZIndex", "ariaCloseLabel", "baseZIndex", "focusOnShow", "showTransitionOptions", "hideTransitionOptions"], outputs: ["onShow", "onHide"] }, { kind: "directive", type: i6.FocusTrap, selector: "[pFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "directive", type: OcxTooltipDirective, selector: "[ocxTooltip]", inputs: ["ocxTooltip"] }, { 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", "dateCellTemplate", "relativeDateCellTemplate", "cellTemplate", "translationKeyCellTemplate", "stringFilterCellTemplate", "numberFilterCellTemplate", "dateFilterCellTemplate", "relativeDateFilterCellTemplate", "filterCellTemplate", "translationKeyFilterCellTemplate", "columnHeaderTemplate", "additionalActions", "frozenActionColumn", "actionColumnPosition", "expandedRows", "expandable", "frozenExpandColumn", "parentTemplates"], outputs: ["filtered", "sorted", "viewTableRow", "editTableRow", "deleteTableRow", "selectionChanged", "pageChanged", "pageSizeChanged", "componentStateChanged", "rowExpanded", "rowCollapsed"] }, { kind: "directive", type: IfBreakpointDirective, selector: "[ocxIfBreakpoint]", inputs: ["ocxIfBreakpoint", "ocxIfBreakpointElseTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }, { kind: "pipe", type: OcxTimeAgoPipe, name: "timeago" }] }); }
 }