@porscheinformatik/material-addons 22.0.11 → 22.0.12

package/fesm2022/porscheinformatik-material-addons.mjs

@@ -8,7 +8,7 @@ import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1$9 from '@angular/router';
 import { RouterLink, RouterModule, NavigationEnd } from '@angular/router';
-import * as i2$5 from '@angular/common';
+import * as i2$6 from '@angular/common';
 import { CommonModule, NgStyle, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
@@ -51,6 +51,8 @@ import * as i16 from '@angular/material/radio';
 import { MatRadioModule } from '@angular/material/radio';
 import * as i3$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i2$5 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkStepHeader, CdkStep, STEP_STATE, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import * as i1$6 from '@angular/cdk/a11y';
 import * as i1$7 from '@angular/cdk/bidi';
@@ -63,7 +65,7 @@ import * as i1$a from '@angular/cdk/layout';
 import { Breakpoints } from '@angular/cdk/layout';
 import * as i4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i2$6 from '@angular/platform-browser';
+import * as i2$7 from '@angular/platform-browser';
 import * as i3$2 from '@angular/material/chips';
 import { MatChipsModule } from '@angular/material/chips';
 
@@ -2051,11 +2053,11 @@ class DataTableFilterDialogComponent {
         this._subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableFilterDialogComponent, isStandalone: true, selector: "mad-data-table-filter-dialog", inputs: { filterOptions: "filterOptions", filterValue: "filterValue" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"filter-dialog-box\">\n  @if (!filterOptions?.length) {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  } @else {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <mat-select [formControl]=\"control\">\n        <mat-option></mat-option>\n        @for (entry of filterOptions; track entry) {\n          <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;margin-top:22px;background-color:var(--mat-sys-surface);box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableFilterDialogComponent, isStandalone: true, selector: "mad-data-table-filter-dialog", inputs: { filterOptions: "filterOptions", filterValue: "filterValue" }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"filter-dialog-box\">\n  @if (!filterOptions?.length) {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  } @else {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <mat-select [formControl]=\"control\">\n        <mat-option></mat-option>\n        @for (entry of filterOptions; track entry) {\n          <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;background-color:var(--mat-sys-surface);box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-data-table-filter-dialog', imports: [MatFormFieldModule, MatInputModule, MatSelectModule, FormsModule, ReactiveFormsModule, TranslateModule], template: "<div class=\"filter-dialog-box\">\n  @if (!filterOptions?.length) {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  } @else {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <mat-select [formControl]=\"control\">\n        <mat-option></mat-option>\n        @for (entry of filterOptions; track entry) {\n          <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;margin-top:22px;background-color:var(--mat-sys-surface);box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"] }]
+            args: [{ selector: 'mad-data-table-filter-dialog', imports: [MatFormFieldModule, MatInputModule, MatSelectModule, FormsModule, ReactiveFormsModule, TranslateModule], template: "<div class=\"filter-dialog-box\">\n  @if (!filterOptions?.length) {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <input matInput type=\"text\" required=\"false\" [formControl]=\"control\" />\n    </mat-form-field>\n  } @else {\n    <mat-form-field class=\"filter-dialog-input\">\n      <mat-label>{{ 'common.filter.term' | translate }}</mat-label>\n      <mat-select [formControl]=\"control\">\n        <mat-option></mat-option>\n        @for (entry of filterOptions; track entry) {\n          <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  }\n</div>\n", styles: [".container{position:relative;width:12px;height:12px;margin:5px 0 5px 5px}.overlay{position:absolute;width:12px;height:12px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog-box{display:flex;align-items:center;width:auto;height:80px;padding:12px 12px 0;background-color:var(--mat-sys-surface);box-shadow:0 1px 3px #0000000d}.filter-dialog-input{width:auto;max-width:180px;margin:auto}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filterOptions: [{
                 type: Input
             }], filterValue: [{
@@ -2065,38 +2067,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             }] } });
 
 class FilterComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor() {
         this.filterValueChange = new EventEmitter();
     }
-    toggleFilter(event) {
-        event.preventDefault();
-        this.showFilterDialog = !this.showFilterDialog;
+    toggleFilter(showFilterDialog) {
+        this.showFilterDialog = showFilterDialog;
     }
     onFilterChanged(filterValue) {
         this.isActive = !!filterValue;
         this.filterValue = filterValue;
         this.filterValueChange.emit(this.filterValue);
     }
-    onClick(event) {
-        if (!this.elementRef.nativeElement.contains(event.target)) {
-            this.showFilterDialog = false;
-        }
-    }
     get opacity() {
         return this.isActive ? '1' : this.isHovered || this.showFilterDialog ? '0.54' : '0';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FilterComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: FilterComponent, isStandalone: true, selector: "mad-data-table-filter", outputs: { filterValueChange: "filterValueChange" }, host: { listeners: { "document:click": "onClick($event)" } }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon class=\"colored-icon\" fontSet=\"material-icons-outlined\" (click)=\"toggleFilter($event)\">filter_alt</mat-icon>\n  </div>\n  <mad-data-table-filter-dialog\n    class=\"filter-dialog\"\n    [filterOptions]=\"filterOptions\"\n    [hidden]=\"!showFilterDialog\"\n    [filterValue]=\"filterValue\"\n    (filterChanged)=\"onFilterChanged($event)\"\n  />\n</div>\n", styles: [".container{position:relative;width:16px;height:16px}.overlay{position:absolute;width:16px;height:16px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog{position:absolute;margin-top:12px}.colored-icon{font-size:1.3em}.colored-icon:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataTableFilterDialogComponent, selector: "mad-data-table-filter-dialog", inputs: ["filterOptions", "filterValue"], outputs: ["filterChanged"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: FilterComponent, isStandalone: true, selector: "mad-data-table-filter", outputs: { filterValueChange: "filterValueChange" }, ngImport: i0, template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon\n      #filterTrigger=\"cdkOverlayOrigin\"\n      cdkOverlayOrigin\n      class=\"colored-icon\"\n      fontSet=\"material-icons-outlined\"\n      (click)=\"toggleFilter(!this.showFilterDialog)\"\n    >\n      filter_alt\n    </mat-icon>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n  [cdkConnectedOverlayOpen]=\"showFilterDialog\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleFilter(false)\"\n  (detach)=\"toggleFilter(false)\"\n>\n  <mad-data-table-filter-dialog [filterOptions]=\"filterOptions\" [filterValue]=\"filterValue\" (filterChanged)=\"onFilterChanged($event)\" />\n</ng-template>\n", styles: [".container{position:relative;width:16px;height:16px}.overlay{position:absolute;width:16px;height:16px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog{border:1px solid var(--mat-sys-outline)}.colored-icon{font-size:1.3em}.colored-icon:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: DataTableFilterDialogComponent, selector: "mad-data-table-filter-dialog", inputs: ["filterOptions", "filterValue"], outputs: ["filterChanged"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$5.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$5.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mad-data-table-filter', imports: [MatIconModule, DataTableFilterDialogComponent], template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon class=\"colored-icon\" fontSet=\"material-icons-outlined\" (click)=\"toggleFilter($event)\">filter_alt</mat-icon>\n  </div>\n  <mad-data-table-filter-dialog\n    class=\"filter-dialog\"\n    [filterOptions]=\"filterOptions\"\n    [hidden]=\"!showFilterDialog\"\n    [filterValue]=\"filterValue\"\n    (filterChanged)=\"onFilterChanged($event)\"\n  />\n</div>\n", styles: [".container{position:relative;width:16px;height:16px}.overlay{position:absolute;width:16px;height:16px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog{position:absolute;margin-top:12px}.colored-icon{font-size:1.3em}.colored-icon:hover{color:var(--main-primary);cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { filterValueChange: [{
+            args: [{ selector: 'mad-data-table-filter', imports: [MatIconModule, DataTableFilterDialogComponent, OverlayModule], template: "<div class=\"container\">\n  <div class=\"overlay\" [style.opacity]=\"opacity\">\n    <mat-icon\n      #filterTrigger=\"cdkOverlayOrigin\"\n      cdkOverlayOrigin\n      class=\"colored-icon\"\n      fontSet=\"material-icons-outlined\"\n      (click)=\"toggleFilter(!this.showFilterDialog)\"\n    >\n      filter_alt\n    </mat-icon>\n  </div>\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"filterTrigger\"\n  [cdkConnectedOverlayOpen]=\"showFilterDialog\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"toggleFilter(false)\"\n  (detach)=\"toggleFilter(false)\"\n>\n  <mad-data-table-filter-dialog [filterOptions]=\"filterOptions\" [filterValue]=\"filterValue\" (filterChanged)=\"onFilterChanged($event)\" />\n</ng-template>\n", styles: [".container{position:relative;width:16px;height:16px}.overlay{position:absolute;width:16px;height:16px;background-color:var(--mat-sys-surface);display:flex;align-items:center}.mat-icon{position:relative;display:flex;align-items:center;font-size:1em;color:var(--mat-sys-on-surface-variant)}.filter-dialog{border:1px solid var(--mat-sys-outline)}.colored-icon{font-size:1.3em}.colored-icon:hover{color:var(--main-primary);cursor:pointer}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { filterValueChange: [{
                 type: Output
-            }], onClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class DataTableFilterHeader {
@@ -2142,7 +2134,7 @@ class DataTableFilterHeader {
         return this._filterValue;
     }
     set filterValue(filterValue) {
-        this._filterComponent.instance.filterValue = filterValue;
+        this._filterComponent.instance.onFilterChanged(filterValue);
         this._filterComponent.changeDetectorRef.detectChanges();
     }
     onMouseenter() {
@@ -2844,7 +2836,7 @@ class DataTableComponent {
         return this.filter?.getActiveFilterCount() === 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$5.MatDialog }, { token: MAD_DATA_TABLE_PERSISTENCE_SERVICE }, { token: MAD_DATA_TABLE_GLOBAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", rowExpandable: "rowExpandable", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track $index) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: "id", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", showEmptyTable: "showEmptyTable", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", translateLabels: "translateLabels", useAsync: "useAsync", stateful: "stateful", persistenceConfig: "persistenceConfig", loading: "loading", tableData: "tableData", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", defaultSort: "defaultSort", externalFilter: "externalFilter", paginationEnabled: "paginationEnabled", page: "page", pageSizeOptions: "pageSizeOptions", actions: "actions", selectionEmitType: "selectionEmitType", showDeleteFilterAction: "showDeleteFilterAction", disableRowClick: "disableRowClick", deleteDefinitionAllowed: "deleteDefinitionAllowed", rowExpandable: "rowExpandable", selection: "selection", filterEnabled: "filterEnabled", filterMode: "filterMode", filterValue: "filterValue", externalPaginator: "externalPaginator", defaultPageSize: "defaultPageSize", selectionEmitMode: "selectionEmitMode", forceMode: "forceMode", forceSelectionMode: "forceSelectionMode", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", columnDefinitions: "columnDefinitions", allColumns: "allColumns" }, outputs: { actionEvent: "actionEvent", selectionEvent: "selectionEvent", sortEvent: "sortEvent", filterEvent: "filterEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], queries: [{ propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true }, { propertyName: "columnDefs", predicate: DataTableTemplateColumnDefinition }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track $index) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;margin-top:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i7.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i5.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i5.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i10.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i10.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i10.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i10.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i10.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i10.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i10.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i10.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i10.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i10.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i10.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "component", type: MadButtonGroupComponent, selector: "mad-button-group" }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i15.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "component", type: i16.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: DataTableFilterHeader, selector: "th[mad-filter-header]", inputs: ["mad-filter-header", "madFilterColumnRightAligned", "madFilterOptions"] }, { kind: "directive", type: DataTableFilter, selector: "[madFilter]", outputs: ["madFilterChange"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }], animations: [
             trigger('detailExpand', [
                 state('collapsed,void', style({ height: '0px', minHeight: '0' })),
                 state('expanded', style({ height: '*' })),
@@ -2881,7 +2873,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         DataTableFilterHeader,
                         DataTableFilter,
                         MatTooltip,
-                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track $index) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"] }]
+                    ], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  @if (tableActions?.length || (filterMode === 'COLUMN_BASED' && showDeleteFilterAction)) {\n    <div>\n      @for (actionGroup of tableActions; track actionGroup) {\n        <mad-button-group class=\"table-action-group\">\n          @for (tableAction of actionGroup; track $index) {\n            <mad-outline-button [hidden]=\"isHidden(tableAction)\" [disabled]=\"isDisabled(tableAction)\" (click)=\"onActionEvent(tableAction)\">\n              {{ translateLabels ? (tableAction.label | translate) : tableAction.label }}\n              {{ getSelectedCount(tableAction.type) }}\n            </mad-outline-button>\n          }\n        </mad-button-group>\n      }\n      @if (filterMode === 'COLUMN_BASED' && showDeleteFilterAction) {\n        <mad-button-group class=\"table-action-group\">\n          <button\n            mat-icon-button\n            [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n            [disabled]=\"disableDeleteFilterButton()\"\n            class=\"delete-filter-action mat-primary\"\n            (click)=\"onDeleteFilter()\"\n          >\n            <mat-icon fontSet=\"material-icons-outlined\" matBadgeColor=\"warn\" [matBadge]=\"getFilterBadgeContent()\">\n              filter_alt_off\n            </mat-icon>\n          </button>\n        </mad-button-group>\n      }\n    </div>\n  }\n  @if (filterMode === 'TABLE_BASED') {\n    <mat-form-field data-cy=\"filter-input\">\n      <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n      <input matInput autocomplete=\"off\" (keyup)=\"onTableBasedFilterEvent($event)\" placeholder=\"{{ filterPlaceholder }}\" />\n    </mat-form-field>\n  }\n</div>\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    @for (rowAction of rowActions; track rowAction) {\n      @if (!isHidden(rowAction)) {\n        <button\n          data-cy=\"row-action-menu-button\"\n          mat-menu-item\n          class=\"row-action\"\n          (click)=\"onRowEvent($event, element, rowAction)\"\n          [disabled]=\"isDisabled(rowAction)\"\n        >\n          {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n        </button>\n      }\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of editableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onColumnSettings(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n  <ng-template matMenuContent>\n    @for (definition of viewableColumnDefinitions; track definition) {\n      <button\n        mat-menu-item\n        class=\"row-action\"\n        (click)=\"onViewDefinition(definition)\"\n        [ngClass]=\"{ 'active-column-definition': isCurrentDefinition(definition) }\"\n      >\n        {{ translateLabels ? (definition.label | translate) : definition.label }}\n      </button>\n    }\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n@if (filterMode === 'COLUMN_BASED' || showEmptyTable || !!dataSource.filteredData?.length) {\n  <div class=\"datatable\" [class]=\"tableClass\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    <table\n      [id]=\"id\"\n      mat-table\n      [dataSource]=\"dataSource\"\n      matSort\n      (matSortChange)=\"onSortingEvent($event)\"\n      madFilter\n      (madFilterChange)=\"onColumnBasedFilterEvent($event)\"\n      [multiTemplateDataRows]=\"!!expandableDef\"\n    >\n      <!-- Row actions column-->\n      <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: master checkbox -->\n          @if (selectionEmitMode !== 'NONE' && selectionMode === 'BATCH') {\n            <div class=\"mad-datatable-checkbox-container\">\n              <mat-checkbox (change)=\"onToggleSelectAll()\" [checked]=\"allSelected\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE / NONE: nothing in header row -->\n        </th>\n        <td mat-cell *matCellDef=\"let element\" [ngClass]=\"showActionColumn ? 'row-action-cell' : 'no-action-cell'\">\n          <!-- BATCH: row checkbox -->\n          @if (showCheckbox(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-checkbox class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-checkbox>\n            </div>\n          }\n          <!-- SINGLE: row action menu icon -->\n          @if (showRowActionIcon(element) && hasVisibleRowActions(element)) {\n            <mad-icon-button\n              data-cy=\"row-action-button\"\n              [matMenuTriggerData]=\"{ element: element }\"\n              [matMenuTriggerFor]=\"rowActionMenu\"\n              (click)=\"onSelectionEvent(element.rowId)\"\n            >\n              <mat-icon>more_vert</mat-icon>\n            </mad-icon-button>\n          }\n          <!-- SINGLE: row radio button -->\n          @if (showRadioButton(element)) {\n            <div class=\"mad-datatable-checkbox-container\" (click)=\"onRowEvent($event, element)\">\n              <mat-radio-button class=\"no-pointer-events\" [checked]=\"isSelected(element.rowId)\"></mat-radio-button>\n            </div>\n          }\n          <!-- EXPANDABLE: row is expandable/collapsable -->\n          @if (showExpandableButton(element)) {\n            <mad-icon-button (click)=\"onExpand($event, element)\">\n              @if (expandedElement !== element) {\n                <mat-icon>keyboard_arrow_down</mat-icon>\n              } @else {\n                <mat-icon>keyboard_arrow_up</mat-icon>\n              }\n            </mad-icon-button>\n          }\n          <!-- NONE: nothing -->\n        </td>\n      </ng-container>\n      <!-- Cell definitions and rows with injected cells -->\n      @for (column of columns; track column.id) {\n        <ng-container [matColumnDef]=\"column.id\">\n          <!-- header cell to be injected -->\n          @switch (getDataTableHeaderType(column)) {\n            @case ('SORT') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @case ('SORT_AND_FILTER') {\n              <th\n                scope=\"col\"\n                mat-header-cell\n                *matHeaderCellDef\n                [class.text-right]=\"column.isRightAligned\"\n                mat-sort-header=\"{{ column.orderByName ? column.orderByName : column.dataPropertyName }}\"\n                [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n                mad-filter-header=\"{{ column.dataPropertyName }}\"\n                [madFilterColumnRightAligned]=\"column.isRightAligned\"\n                [madFilterOptions]=\"column.filterParams?.filterOptions\"\n              >\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n            @default {\n              <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n                {{ translateLabels ? (column.label | translate) : column.label }}\n              </th>\n            }\n          }\n\n          <!-- data cell to be injected -->\n          <td\n            mat-cell\n            *matCellDef=\"let element\"\n            [class.text-right]=\"column.isRightAligned\"\n            [class.mad-dt-child-cell]=\"element.parentId\"\n            (click)=\"!disableRowClick && onRowEvent($event, element)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                getCustomCellTemplate(column.id) || defaultCellTemplate;\n                context: { column: column, element: element, $implicit: element }\n              \"\n            ></ng-container>\n          </td>\n        </ng-container>\n      }\n\n      <!-- Expanded Content Column - The row is made up of this one column that spans across all columns -->\n      @if (!!expandableDef) {\n        <ng-container [matColumnDef]=\"expandableColumnDef\">\n          <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columns.length + 1\">\n            <div class=\"mad-data-table-expandable-area\" [@detailExpand]=\"element === expandedElement ? 'expanded' : 'collapsed'\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  getCustomExpandableTemplate() || defaultCellTemplate;\n                  context: { column: element, element: element, $implicit: element }\n                \"\n              ></ng-container>\n            </div>\n          </td>\n        </ng-container>\n      }\n\n      <!-- header row where cells will be injected -->\n      <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n      <!-- data row where cells will be injected -->\n      <tr\n        mat-row\n        [class.clickable-table-row]=\"!row.parentId && selectionEmitMode !== 'NONE'\"\n        *matRowDef=\"let row; columns: columnIds\"\n        (click)=\"!!expandableColumnDef && onExpand($event, row)\"\n      ></tr>\n      @if (!!expandableDef) {\n        <tr mat-row *matRowDef=\"let element; columns: [expandableColumnDef]\" class=\"mad-data-table-expandable-row\"></tr>\n      }\n      <tr class=\"mat-row\" *matNoDataRow>\n        <td class=\"mat-cell noDataText columnBasedFilter\" [attr.colspan]=\"columnIds.length\">\n          {{ translateLabels ? (noDataText | translate) : noDataText }}\n        </td>\n      </tr>\n    </table>\n  </div>\n} @else {\n  <!-- No data alert -->\n  <div data-cy=\"no-data-block\" class=\"noDataText\">\n    @if (loading) {\n      <div class=\"mad-datatable-spinner-wrapper\">\n        <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n      </div>\n    }\n    {{ translateLabels ? (noDataText | translate) : noDataText }}\n  </div>\n}\n<div data-cy=\"table-bottom-area\" class=\"mad-data-table-bottom-area\">\n  <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area\">\n    <!-- column settings: 1 definition -->\n    @if (editableColumnDefinitions?.length === 1) {\n      <mad-icon-button (click)=\"onColumnSettings()\">\n        <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column settings: multiple definitions -->\n    @if ((editableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"editableDefinitionMenu\">\n        <mat-icon>view_column</mat-icon>\n      </mad-icon-button>\n    }\n    <!-- column view: multiple definitions -->\n    @if ((viewableColumnDefinitions?.length || 0) > 0) {\n      <mad-icon-button [matMenuTriggerFor]=\"viewableDefinitionMenu\">\n        <mat-icon>preview</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"paginationEnabled ? 'block' : 'none'\"\n    [length]=\"pageLength\"\n    [pageIndex]=\"pageIndex\"\n    [pageSize]=\"pageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPageEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- default cell template -->\n<ng-template #defaultCellTemplate let-element=\"element\" let-column=\"column\">\n  <span>\n    {{ element[column.dataPropertyName] }}\n  </span>\n</ng-template>\n\n<!-- custom cell templates injected from parent -->\n<ng-content></ng-content>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:var(--datatable-background)}.datatable-vertical-stretch-to-parent{flex:1;max-height:100%;width:100%;display:flex;flex-direction:column}.datatable-max-height-500{max-height:500px}.datatable-max-height-300{max-height:300px}.datatable-max-height,.datatable-max-height-500,.datatable-max-height-300{flex:1;width:100%;display:flex;flex-direction:column}.datatable{overflow:auto;flex:1 1 auto;height:100%;position:relative;width:100%}.datatable table{width:100%;max-height:100%}.datatable table th,.datatable table td{width:auto;text-overflow:ellipsis;white-space:nowrap}.datatable table th{overflow:visible}.datatable table td{overflow:hidden}.layout-fixed table{table-layout:fixed}.layout-fixed table th{font-weight:700}.layout-fixed table td{white-space:normal;word-wrap:break-word}.text-right{text-align:right!important;padding-right:24px!important}.table-action-group{display:inline-flex;vertical-align:middle;margin-right:.5em;margin-bottom:.5em;margin-top:.5em}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.noDataText{width:100%;text-align:center;position:relative}.noDataText.columnBasedFilter{padding-top:10px}.mad-datatable-action-bar{display:flex;justify-content:space-between;align-items:baseline}.mad-datatable-checkbox-container{margin-right:8px;margin-left:8px}.mad-datatable-spinner-wrapper{background-color:var(--datatable-background);opacity:.8;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;z-index:99999;pointer-events:unset}.mad-data-table-expandable-row{height:0;display:contents;padding:0}.mad-data-table-expandable-row td{border-top-color:transparent;border-bottom-color:transparent}.mad-data-table-expandable-area{overflow:hidden;display:flex;width:100%}.mad-data-table-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-mdc-header-row th{position:sticky;top:0;background-color:var(--datatable-background);z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:var(--mat-sys-on-surface);background-color:var(--datatable-hover)}.mad-dt-child-cell{color:var(--mat-sys-on-surface-variant)}.delete-filter-action{vertical-align:middle}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$5.MatDialog }, { type: DataTablePersistenceService, decorators: [{
                     type: Inject,
                     args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
@@ -3781,13 +3773,13 @@ class SidebarLayoutComponent {
     goToPreviousPage() {
         this.location.back();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$9.Router }, { token: i2$5.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", titleTemplate: "titleTemplate", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    @if (headerContentPortal) {\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    } @else {\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          @if (hasBackButton) {\n            <button class=\"back-button\">\n              <mat-icon (click)=\"goToPreviousPage()\" class=\"mat-primary\"> arrow_back</mat-icon>\n            </button>\n          }\n          @if (titleTemplate) {\n            <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n          } @else {\n            <h2 class=\"title\">{{ title }}</h2>\n          }\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    }\n  </mad-content-header>\n  <mad-content-panel-container>\n    @if (sideBarItemsPortal) {\n      <mad-content-panel-container-sidebar>\n        <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n      </mad-content-panel-container-sidebar>\n    }\n    @if (contentPortal) {\n      <mad-content-panel-container-content>\n        <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n      </mad-content-panel-container-content>\n    }\n    @if (footerPortal) {\n      <mad-content-panel-container-footer>\n        <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n      </mad-content-panel-container-footer>\n    }\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarLayoutComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$9.Router }, { token: i2$6.Location }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SidebarLayoutComponent, isStandalone: true, selector: "mad-sidebar-layout", inputs: { title: "title", hasBackButton: "hasBackButton", titleTemplate: "titleTemplate", sideBarItems: "sideBarItems", headerContent: "headerContent", actionGroup: "actionGroup", content: "content", footer: "footer" }, ngImport: i0, template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    @if (headerContentPortal) {\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    } @else {\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          @if (hasBackButton) {\n            <button class=\"back-button\">\n              <mat-icon (click)=\"goToPreviousPage()\" class=\"mat-primary\"> arrow_back</mat-icon>\n            </button>\n          }\n          @if (titleTemplate) {\n            <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n          } @else {\n            <h2 class=\"title\">{{ title }}</h2>\n          }\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    }\n  </mad-content-header>\n  <mad-content-panel-container>\n    @if (sideBarItemsPortal) {\n      <mad-content-panel-container-sidebar>\n        <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n      </mad-content-panel-container-sidebar>\n    }\n    @if (contentPortal) {\n      <mad-content-panel-container-content>\n        <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n      </mad-content-panel-container-content>\n    }\n    @if (footerPortal) {\n      <mad-content-panel-container-footer>\n        <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n      </mad-content-panel-container-footer>\n    }\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ContentPanelModule }, { kind: "component", type: ContentHeaderComponent, selector: "mad-content-header" }, { kind: "component", type: ContentPanelContainerComponent, selector: "mad-content-panel-container" }, { kind: "component", type: ContentPanelContainerContentComponent, selector: "mad-content-panel-container-content" }, { kind: "component", type: ContentPanelContainerFooterComponent, selector: "mad-content-panel-container-footer" }, { kind: "component", type: ContentPanelContainerSidebarComponent, selector: "mad-content-panel-container-sidebar" }, { kind: "component", type: MainContainerComponent, selector: "mad-main-container" }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i9.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mad-sidebar-layout', imports: [CommonModule, ContentPanelModule, PortalModule, MatIconModule, RouterModule], template: "<mad-main-container class=\"w-full\">\n  <mad-content-header>\n    @if (headerContentPortal) {\n      <ng-template [cdkPortalOutlet]=\"headerContentPortal\"></ng-template>\n    } @else {\n      <div class=\"sidebar-wrapper default-header-wrapper\">\n        <div class=\"back-and-title\">\n          @if (hasBackButton) {\n            <button class=\"back-button\">\n              <mat-icon (click)=\"goToPreviousPage()\" class=\"mat-primary\"> arrow_back</mat-icon>\n            </button>\n          }\n          @if (titleTemplate) {\n            <ng-container *ngTemplateOutlet=\"titleTemplate\"></ng-container>\n          } @else {\n            <h2 class=\"title\">{{ title }}</h2>\n          }\n        </div>\n        <ng-template [cdkPortalOutlet]=\"actionGroupPortal\"></ng-template>\n      </div>\n    }\n  </mad-content-header>\n  <mad-content-panel-container>\n    @if (sideBarItemsPortal) {\n      <mad-content-panel-container-sidebar>\n        <ng-template [cdkPortalOutlet]=\"sideBarItemsPortal\"></ng-template>\n      </mad-content-panel-container-sidebar>\n    }\n    @if (contentPortal) {\n      <mad-content-panel-container-content>\n        <ng-template [cdkPortalOutlet]=\"contentPortal\"></ng-template>\n      </mad-content-panel-container-content>\n    }\n    @if (footerPortal) {\n      <mad-content-panel-container-footer>\n        <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n      </mad-content-panel-container-footer>\n    }\n  </mad-content-panel-container>\n</mad-main-container>\n", styles: [".w-full{width:100%}.back-button{background-color:transparent;border:0;cursor:pointer}.back-button:hover{background-color:var(--background-color)}.sidebar-wrapper{height:64px;background-color:var(--background-color)}.default-header-wrapper{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;white-space:nowrap}.back-and-title{display:flex;align-items:center;gap:1em;overflow:hidden}.back-and-title .title{margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:inherit}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$9.Router }, { type: i2$5.Location }], propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$9.Router }, { type: i2$6.Location }], propDecorators: { title: [{
                 type: Input
             }], hasBackButton: [{
                 type: Input
@@ -3988,7 +3980,7 @@ class ToolbarComponent {
     hasImportantToolbarActions() {
         return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$6.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$7.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: ToolbarComponent, isStandalone: true, selector: "mad-toolbar", host: { classAttribute: "mad-toolbar" }, ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n  @if (isRouterLink(getBackAction())) {\n    <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" [queryParams]=\"getBackAction().queryParams\">\n      <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n  @if (isAbsoluteLink(getBackAction())) {\n    <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\">\n      <button [id]=\"'go-back'\" class=\"go-back-button mat-primary\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n  @if (isAction(getBackAction())) {\n    <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\">\n      <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  @for (mainAction of getMainActions(); track mainAction; let i = $index) {\n    @if (hasPermission(mainAction) | async) {\n      @if (!(isHandset$ | async)) {\n        <div>\n          @if (isRouterLink(mainAction)) {\n            <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\">\n              <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n                <div class=\"action-button-content-container\">\n                  <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n                  {{ mainAction.actionName }}\n                </div>\n              </mad-primary-button>\n            </a>\n          }\n          @if (isAction(mainAction)) {\n            <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\">\n              <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n                <div class=\"action-button-content-container\">\n                  <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n                  {{ mainAction.actionName }}\n                </div>\n              </mad-primary-button>\n            </a>\n          }\n        </div>\n      }\n      @if (isHandset$ | async) {\n        <div>\n          @if (isRouterLink(getBackAction())) {\n            <mad-material-action-button\n              data-cy=\"material-main-link-button\"\n              [actionName]=\"mainAction.actionName\"\n              [icon]=\"mainAction.matIcon\"\n              [liftHigher]=\"mainAction.liftHigherOnMobile\"\n              [liftHigher2]=\"i > 0\"\n              [routerLink]=\"mainAction.routerLink\"\n              [id]=\"mainAction.matIcon\"\n            />\n          }\n          @if (isAction(getBackAction())) {\n            <mad-material-action-button\n              data-cy=\"material-main-action-button\"\n              [actionName]=\"mainAction.actionName\"\n              [icon]=\"mainAction.matIcon\"\n              [liftHigher]=\"mainAction.liftHigherOnMobile\"\n              [liftHigher2]=\"i > 0\"\n              (click)=\"mainAction.action()\"\n              [id]=\"mainAction.matIcon\"\n            />\n          }\n        </div>\n      }\n    }\n  }\n\n  <div class=\"right-aligned no-print\">\n    @for (action of getToolbarActions(); track action; let i = $index) {\n      @if (hasPermission(action) | async) {\n        @if (\n          (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n          i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n          !!action.importantAction\n        ) {\n          <mad-icon-button\n            data-cy=\"action-icon-button\"\n            (click)=\"action.action()\"\n            [id]=\"action.matIcon\"\n            [matTooltip]=\"action.actionName\"\n            type=\"button\"\n          >\n            <mat-icon\n              [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n              matBadgePosition=\"below after\"\n              [matBadge]=\"action.badge ? action.badge.value : null\"\n              >{{ action.matIcon }}</mat-icon\n            >\n          </mad-icon-button>\n        }\n      }\n    }\n\n    @if ((isHandset$ | async) || getToolbarActionsAlwaysAsMenu()) {\n      @if (getToolbarActions().length > 2) {\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          @for (action of getToolbarActions(); track action; let i = $index) {\n            @if (!action.importantAction) {\n              @if (hasPermission(action) | async) {\n                @if (i >= (hasImportantToolbarActions() ? 0 : 1)) {\n                  <button data-cy=\"burger-menu-button\" mat-menu-item (click)=\"action.action()\" [title]=\"action.actionName\">\n                    <mat-icon\n                      class=\"mat-primary\"\n                      [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                      [matBadge]=\"action.badge ? action.badge.value : null\"\n                      matBadgePosition=\"below after\"\n                      >{{ action.matIcon }}</mat-icon\n                    >\n                    {{ action.actionName }}\n                  </button>\n                }\n              }\n            }\n          }\n        </mat-menu>\n      }\n    }\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:var(--toolbar-background)}.content-toolbar{height:57px;border-bottom:1px solid var(--mat-sys-outline-variant)}.right-aligned{overflow:visible;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i17.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
@@ -4008,7 +4000,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
                         MatMenuModule,
                         AsyncPipe,
                     ], template: "<mat-toolbar class=\"content-toolbar\">\n  @if (isRouterLink(getBackAction())) {\n    <a data-cy=\"back-link-button\" [routerLink]=\"getBackAction().routerLink\" [queryParams]=\"getBackAction().queryParams\">\n      <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n  @if (isAbsoluteLink(getBackAction())) {\n    <a data-cy=\"back-href-button\" [href]=\"getBackAction().href\">\n      <button [id]=\"'go-back'\" class=\"go-back-button mat-primary\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n  @if (isAction(getBackAction())) {\n    <a data-cy=\"back-action-button\" (click)=\"getBackAction().action()\">\n      <button [id]=\"'go-back'\" class=\"mat-primary go-back-button\" mat-icon-button>\n        <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n      </button>\n    </a>\n  }\n\n  <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n  @for (mainAction of getMainActions(); track mainAction; let i = $index) {\n    @if (hasPermission(mainAction) | async) {\n      @if (!(isHandset$ | async)) {\n        <div>\n          @if (isRouterLink(mainAction)) {\n            <a data-cy=\"main-action-link-button\" [routerLink]=\"mainAction.routerLink\">\n              <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n                <div class=\"action-button-content-container\">\n                  <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n                  {{ mainAction.actionName }}\n                </div>\n              </mad-primary-button>\n            </a>\n          }\n          @if (isAction(mainAction)) {\n            <a data-cy=\"main-action-button\" (click)=\"mainAction.action()\">\n              <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\" [matTooltip]=\"mainAction.tooltip\">\n                <div class=\"action-button-content-container\">\n                  <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n                  {{ mainAction.actionName }}\n                </div>\n              </mad-primary-button>\n            </a>\n          }\n        </div>\n      }\n      @if (isHandset$ | async) {\n        <div>\n          @if (isRouterLink(getBackAction())) {\n            <mad-material-action-button\n              data-cy=\"material-main-link-button\"\n              [actionName]=\"mainAction.actionName\"\n              [icon]=\"mainAction.matIcon\"\n              [liftHigher]=\"mainAction.liftHigherOnMobile\"\n              [liftHigher2]=\"i > 0\"\n              [routerLink]=\"mainAction.routerLink\"\n              [id]=\"mainAction.matIcon\"\n            />\n          }\n          @if (isAction(getBackAction())) {\n            <mad-material-action-button\n              data-cy=\"material-main-action-button\"\n              [actionName]=\"mainAction.actionName\"\n              [icon]=\"mainAction.matIcon\"\n              [liftHigher]=\"mainAction.liftHigherOnMobile\"\n              [liftHigher2]=\"i > 0\"\n              (click)=\"mainAction.action()\"\n              [id]=\"mainAction.matIcon\"\n            />\n          }\n        </div>\n      }\n    }\n  }\n\n  <div class=\"right-aligned no-print\">\n    @for (action of getToolbarActions(); track action; let i = $index) {\n      @if (hasPermission(action) | async) {\n        @if (\n          (!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) ||\n          i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0 : 1) : 2) ||\n          !!action.importantAction\n        ) {\n          <mad-icon-button\n            data-cy=\"action-icon-button\"\n            (click)=\"action.action()\"\n            [id]=\"action.matIcon\"\n            [matTooltip]=\"action.actionName\"\n            type=\"button\"\n          >\n            <mat-icon\n              [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n              matBadgePosition=\"below after\"\n              [matBadge]=\"action.badge ? action.badge.value : null\"\n              >{{ action.matIcon }}</mat-icon\n            >\n          </mad-icon-button>\n        }\n      }\n    }\n\n    @if ((isHandset$ | async) || getToolbarActionsAlwaysAsMenu()) {\n      @if (getToolbarActions().length > 2) {\n        <mad-icon-button data-cy=\"burger-button\" type=\"button\" [matMenuTriggerFor]=\"burgerMenu\" [matTooltip]=\"getToolbarActionsMenuTitle()\">\n          <mat-icon\n            matBadgeColor=\"warn\"\n            [matBadge]=\"showBadgeForMenu() ? '&#8288;' : null\"\n            matBadgeSize=\"small\"\n            matBadgePosition=\"above after\"\n            >more_vert\n          </mat-icon>\n        </mad-icon-button>\n        <mat-menu #burgerMenu=\"matMenu\" class=\"no-print toolbar-menu\">\n          @for (action of getToolbarActions(); track action; let i = $index) {\n            @if (!action.importantAction) {\n              @if (hasPermission(action) | async) {\n                @if (i >= (hasImportantToolbarActions() ? 0 : 1)) {\n                  <button data-cy=\"burger-menu-button\" mat-menu-item (click)=\"action.action()\" [title]=\"action.actionName\">\n                    <mat-icon\n                      class=\"mat-primary\"\n                      [matBadgeColor]=\"action.badge ? action.badge.color : 'primary'\"\n                      [matBadge]=\"action.badge ? action.badge.value : null\"\n                      matBadgePosition=\"below after\"\n                      >{{ action.matIcon }}</mat-icon\n                    >\n                    {{ action.actionName }}\n                  </button>\n                }\n              }\n            }\n          }\n        </mat-menu>\n      }\n    }\n  </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:var(--toolbar-background)}.content-toolbar{height:57px;border-bottom:1px solid var(--mat-sys-outline-variant)}.right-aligned{overflow:visible;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}.action-button-content-container{display:flex;align-items:center;gap:5px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$6.Title }, { type: ToolbarService }] });
+        }], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$7.Title }, { type: ToolbarService }] });
 
 class ToolbarModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -4269,7 +4261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
             args: [{ selector: 'mad-breadcrumb', imports: [RouterLink, IconButtonComponent, MatIcon, MatTooltip], template: "@if (breadcrumbs().length) {\n  <div class=\"breadcrumb\">\n    <nav data-cy=\"breadcrumb-nav\" class=\"breadcrumb__nav\">\n      @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\n        @if (crumb.route?.length) {\n          <a data-cy=\"breadcrumb-link\" [routerLink]=\"crumb.route\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else if (crumb.href?.length) {\n          <a data-cy=\"breadcrumb-link\" [href]=\"crumb.href\" target=\"_blank\" class=\"breadcrumb__link\">{{ crumb.label }}</a>\n        } @else {\n          <span data-cy=\"breadcrumb-current\" class=\"breadcrumb__current\">{{ crumb.label }}</span>\n        }\n        @if (!last) {\n          <span data-cy=\"breadcrumb-separator\" class=\"breadcrumb__separator\">/</span>\n        }\n      }\n    </nav>\n    @if (showCopy()) {\n      <mad-icon-button\n        data-cy=\"breadcrumb-copy\"\n        class=\"breadcrumb__copy\"\n        (click)=\"copy.emit()\"\n        [matTooltip]=\"title()\"\n        matTooltipPosition=\"above\"\n      >\n        <mat-icon>content_copy</mat-icon>\n      </mad-icon-button>\n    }\n  </div>\n}\n", styles: [".breadcrumb{display:flex;align-items:center;gap:.5rem}.breadcrumb__nav{display:flex;align-items:center;gap:.625rem;min-height:3.5rem;padding-block:.25rem;font-size:.875rem;line-height:1.25rem}.breadcrumb__link{color:var(--main-primary);text-decoration:none}.breadcrumb__link:hover{text-decoration:underline}.breadcrumb__current,.breadcrumb__separator{color:var(--breadcrumb-separator-color)}.breadcrumb__copy{flex-shrink:0}\n"] }]
         }], propDecorators: { breadcrumbs: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumbs", required: true }] }], showCopy: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCopy", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], copy: [{ type: i0.Output, args: ["copy"] }] } });
 
-const VERSION = '22.0.10';
+const VERSION = '22.0.12';
 
 const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
     providedIn: 'root',