@porscheinformatik/material-addons 14.1.3 → 14.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -918,10 +918,10 @@ class ToolbarComponent {
918
918
  }
919
919
  }
920
920
  ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$3.BreakpointObserver }, { token: i2$2.Title }, { token: ToolbarService }], target: i0.ɵɵFactoryTarget.Component });
921
- ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-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 </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\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 </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-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\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\">\n <mat-icon\n color=\"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 </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
921
+ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: ToolbarComponent, selector: "mad-toolbar", ngImport: i0, template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-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 </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\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 </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-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 <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\"\n [matTooltip]=\"action.actionName\"\n [matTooltipShowDelay]=\"500\"\n >\n <mat-icon\n color=\"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 </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i1$2.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MaterialActionButtonComponent, selector: "mad-material-action-button", inputs: ["actionName", "id", "icon", "routerLink", "liftHigher", "liftHigher2"] }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "directive", type: i14.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] });
922
922
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: ToolbarComponent, decorators: [{
923
923
  type: Component,
924
- args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-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 </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\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 </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-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\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\">\n <mat-icon\n color=\"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 </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"] }]
924
+ args: [{ selector: 'mad-toolbar', template: "<mat-toolbar class=\"content-toolbar\">\n <a [routerLink]=\"getBackAction().routerLink\" *ngIf=\"isRouterLink()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a [href]=\"getBackAction().href\" *ngIf=\"isAbsoluteLink()\">\n <button [id]=\"'go-back'\" class=\"go-back-button\" color=\"primary\" mat-icon-button>\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n <a (click)=\"getBackAction().action()\" *ngIf=\"isAction()\">\n <button [id]=\"'go-back'\" color=\"primary\" mat-icon-button class=\"go-back-button\">\n <mat-icon>{{ getBackAction().matIcon }}</mat-icon>\n </button>\n </a>\n\n <span class=\"toolbar-title\">{{ getTitle() }}</span>\n\n <ng-container *ngFor=\"let mainAction of getMainActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(mainAction) | async\">\n <div *ngIf=\"!(isHandset$ | async)\">\n <a [routerLink]=\"mainAction.routerLink\">\n <mad-primary-button [id]=\"mainAction.matIcon\" style=\"margin-left: 56px\">\n <mat-icon>{{ mainAction.matIcon }}</mat-icon>\n {{ mainAction.actionName }}\n </mad-primary-button>\n </a>\n </div>\n <div *ngIf=\"isHandset$ | async\">\n <mad-material-action-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 </mad-material-action-button>\n </div>\n </ng-container>\n </ng-container>\n\n <div class=\"right-aligned no-print\">\n <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <mad-icon-button\n (click)=\"action.action()\"\n *ngIf=\"(!(isHandset$ | async) && !getToolbarActionsAlwaysAsMenu()) || i < (getToolbarActions().length > 2 ? (hasImportantToolbarActions() ? 0:1) : 2) || !!action.importantAction\"\n [id]=\"action.matIcon\"\n [matTooltip]=\"action.actionName\"\n type=\"button\">\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 </mad-icon-button>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"(isHandset$ | async) || getToolbarActionsAlwaysAsMenu()\">\n <ng-container *ngIf=\"getToolbarActions().length > 2\">\n <mad-icon-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 <ng-container *ngFor=\"let action of getToolbarActions(); let i = index\">\n <ng-container *ngIf=\"!action.importantAction\">\n <ng-container *ngIf=\"hasPermission(action) | async\">\n <button\n *ngIf=\"i >= (hasImportantToolbarActions() ? 0:1)\" mat-menu-item (click)=\"action.action()\"\n [matTooltip]=\"action.actionName\"\n [matTooltipShowDelay]=\"500\"\n >\n <mat-icon\n color=\"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 </ng-container>\n </ng-container>\n </ng-container>\n </mat-menu>\n </ng-container>\n </ng-container>\n </div>\n</mat-toolbar>\n", styles: ["mat-toolbar{background:white}.content-toolbar{height:57px;border-bottom:1px solid #dcdcdc}.right-aligned{overflow:hidden;margin-left:auto;margin-right:0}.go-back-button{padding-left:0;padding-right:0}.toolbar-title{margin-right:72px}::ng-deep .mat-badge-content{bottom:-7px!important;right:-7px!important}\n"] }]
925
925
  }], ctorParameters: function () { return [{ type: i1$3.BreakpointObserver }, { type: i2$2.Title }, { type: ToolbarService }]; } });
926
926
 
927
927
  class ToolbarModule {
@@ -1884,8 +1884,7 @@ class DataTableComponent {
1884
1884
  this.rowActions = [];
1885
1885
  this.columns = [];
1886
1886
  this.allSelected = false;
1887
- this.displayedDataMap = new Map();
1888
- this.actualDataMap = new Map();
1887
+ this.rowMap = new Map();
1889
1888
  this.selectionModel = new SelectionModel(true);
1890
1889
  this.allColumnDefinitions = [];
1891
1890
  this.isFilterEnabled = false;
@@ -2086,7 +2085,9 @@ class DataTableComponent {
2086
2085
  if (this.allSelected) {
2087
2086
  // select all rows of the current page
2088
2087
  this.getAllDataSourceRowsOfCurrentPage().forEach((row) => {
2089
- this.selectionModel.select('' + row.rowId);
2088
+ if (!row.parentId) {
2089
+ this.selectionModel.select('' + row.rowId);
2090
+ }
2090
2091
  });
2091
2092
  }
2092
2093
  }
@@ -2097,6 +2098,9 @@ class DataTableComponent {
2097
2098
  this.dataSource.filter = value?.trim().toLowerCase();
2098
2099
  }
2099
2100
  onRowEvent(event, row, action = this.defaultAction) {
2101
+ if (row?.parentId) {
2102
+ return;
2103
+ }
2100
2104
  switch (this.mode) {
2101
2105
  case this.BATCH:
2102
2106
  this.selectionModel.toggle(row.rowId);
@@ -2106,7 +2110,7 @@ class DataTableComponent {
2106
2110
  if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
2107
2111
  const selected = [];
2108
2112
  // if ID-generator is provided, return the ID, else return the ACTUAL data
2109
- selected.push(this.idGenerator ? row.rowId : this.actualDataMap.get(row.rowId));
2113
+ selected.push(this.idGenerator ? row.rowId : this.rowMap.get(row.rowId)?.actualData);
2110
2114
  this.emitTableAction(action, selected);
2111
2115
  }
2112
2116
  break;
@@ -2132,7 +2136,7 @@ class DataTableComponent {
2132
2136
  if (!!tableAction) {
2133
2137
  const selection = [];
2134
2138
  for (const selected of this.selectionModel.selected) {
2135
- selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
2139
+ selection.push(this.idGenerator ? selected : this.rowMap.get(selected)?.actualData);
2136
2140
  }
2137
2141
  tableAction.selected = selection;
2138
2142
  this.actionEvent.emit(tableAction);
@@ -2145,9 +2149,10 @@ class DataTableComponent {
2145
2149
  }
2146
2150
  this.actionEvent.emit(emitAction);
2147
2151
  }
2148
- generateDisplayedDataElement(rowId, actualDataElement) {
2152
+ generateDisplayedDataElement(rowId, parentId, actualDataElement) {
2149
2153
  const displayedDataElement = {};
2150
2154
  displayedDataElement.rowId = rowId;
2155
+ displayedDataElement.parentId = parentId;
2151
2156
  for (const column of this.columns) {
2152
2157
  const actualValue = actualDataElement[column.dataPropertyName];
2153
2158
  displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
@@ -2185,14 +2190,19 @@ class DataTableComponent {
2185
2190
  }
2186
2191
  createDataMapsAndSetDisplayedDataSourceData(data) {
2187
2192
  const displayedDataList = [];
2188
- this.actualDataMap.clear();
2189
- this.displayedDataMap.clear();
2193
+ this.rowMap.clear();
2190
2194
  if (data?.length > 0) {
2191
2195
  for (const dataEntry of data) {
2192
2196
  const rowId = this.idGenerator ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
2193
- this.actualDataMap.set(rowId, dataEntry);
2194
- const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
2195
- this.displayedDataMap.set(rowId, displayedDataElement);
2197
+ const parentId = this.parentIdGenerator ? this.parentIdGenerator(dataEntry) : undefined;
2198
+ const displayedDataElement = this.generateDisplayedDataElement(rowId, parentId, dataEntry);
2199
+ const dataRow = {
2200
+ id: rowId,
2201
+ parentId: parentId,
2202
+ actualData: dataEntry,
2203
+ displayedData: displayedDataElement,
2204
+ };
2205
+ this.rowMap.set(rowId, dataRow);
2196
2206
  displayedDataList.push(displayedDataElement);
2197
2207
  }
2198
2208
  }
@@ -2251,10 +2261,10 @@ class DataTableComponent {
2251
2261
  }
2252
2262
  }
2253
2263
  DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: DataTableComponent, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
2254
- DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-event-checkbox\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"mode === SINGLE\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{max-width:24px!important;padding-left:8px!important}.noDataText{width:100%;text-align:center;position:relative}.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:#fff;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-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-event-checkbox{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
2264
+ DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.2", type: DataTableComponent, selector: "mad-data-table", inputs: { filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", filterColumnsLabel: "filterColumnsLabel", filterColumnsPlaceHolder: "filterColumnsPlaceHolder", noDataText: "noDataText", columnSettingsModalTitleLabel: "columnSettingsModalTitleLabel", selectedLabel: "selectedLabel", availableLabel: "availableLabel", saveLabel: "saveLabel", deleteLabel: "deleteLabel", cancelLabel: "cancelLabel", infoTextLabel: "infoTextLabel", tableClass: "tableClass", pageSizeOptions: "pageSizeOptions", externalFilter: "externalFilter", actions: "actions", idGenerator: "idGenerator", parentIdGenerator: "parentIdGenerator", deleteDefinitionAllowed: "deleteDefinitionAllowed", useAsync: "useAsync", translateLabels: "translateLabels", filterValue: "filterValue", displayedColumns: "displayedColumns", displayedColumnDefinition: "displayedColumnDefinition", tableData: "tableData", page: "page", columnDefinitions: "columnDefinitions", loading: "loading", defaultPageSize: "defaultPageSize", externalPaginator: "externalPaginator", paginationEnabled: "paginationEnabled", allColumns: "allColumns", filterEnabled: "filterEnabled", forceMode: "forceMode" }, outputs: { sortEvent: "sortEvent", actionEvent: "actionEvent", pageEvent: "pageEvent", allColumnsEvent: "allColumnsEvent", columnDefinitionChangeEvent: "columnDefinitionChangeEvent", viewDefinitionChangeEvent: "viewDefinitionChangeEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"!element.parentId && (mode === BATCH)\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-events\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"!element.parentId && (mode === SINGLE)\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <!-- data cell to be injected -->\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [class.mad-dt-child-cell]=\"element.parentId\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\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 && isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{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}.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:#fff;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-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i6.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "component", type: i6$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i8$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i8$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i8$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i8$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i8$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i8$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i8$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i8$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i8$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i8$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i10$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: IconButtonComponent, selector: "mad-icon-button", inputs: ["type", "disabled", "title"] }, { kind: "component", type: i13.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] });
2255
2265
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImport: i0, type: DataTableComponent, decorators: [{
2256
2266
  type: Component,
2257
- args: [{ selector: 'mad-data-table', template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-event-checkbox\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"mode === SINGLE\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Columns with data -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnIds\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{max-width:24px!important;padding-left:8px!important}.noDataText{width:100%;text-align:center;position:relative}.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:#fff;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-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-event-checkbox{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}\n"] }]
2267
+ args: [{ selector: 'mad-data-table', template: "<div class=\"mad-datatable-action-bar\">\n <!-- Table actions: displayed before the table -->\n <div *ngIf=\"tableActions?.length\">\n <mad-outline-button\n [disabled]=\"isDisabled(tableAction.type)\"\n class=\"table-action\"\n *ngFor=\"let tableAction of tableActions\"\n (click)=\"onTableAction(tableAction)\">\n {{ translateLabels ? (tableAction.label | translate) : tableAction.label }} {{ getSelectedCount(tableAction.type) }}\n </mad-outline-button>\n </div>\n <!-- Table filter -->\n <mat-form-field *ngIf=\"isFilterEnabled\">\n <mat-label>{{ translateLabels ? (filterLabel | translate) : filterLabel }}</mat-label>\n <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n (click)=\"onRowEvent($event, element, rowAction)\">\n {{ translateLabels ? (rowAction.label | translate) : rowAction.label }}\n </button>\n </ng-template>\n</mat-menu>\n\n<!-- editable definition menu -->\n<mat-menu #editableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of editableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- viewable definition menu -->\n<mat-menu #viewableDefinitionMenu=\"matMenu\">\n <ng-template matMenuContent>\n <button *ngFor=\"let definition of viewableColumnDefinitions\"\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 </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"datatable\" [class]=\"tableClass\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column-->\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: master checkbox -->\n <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n (change)=\"onToggleSelectAll()\"\n [checked]=\"allSelected\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE / NONE: nothing in header row -->\n </th>\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"mode === NONE ? 'no-action-cell' : 'row-action-cell'\">\n <!-- BATCH: row checkbox -->\n <div *ngIf=\"!element.parentId && (mode === BATCH)\" class=\"mad-datatable-checkbox-container\">\n <mat-checkbox\n class=\"no-pointer-events\"\n [checked]=\"isSelected(element.rowId)\"\n >\n </mat-checkbox>\n </div>\n <!-- SINGLE: row action menu icon -->\n <mad-icon-button\n *ngIf=\"!element.parentId && (mode === SINGLE)\"\n [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n >\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n <!-- NONE: nothing -->\n </td>\n </ng-container>\n <!-- Cell definitions and rows with injected cells -->\n <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.id\">\n <!-- header cell to be injected -->\n <ng-container *ngIf=\"column.isSortable; else noSort\">\n <th\n scope=\"col\"\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.orderByName? column.orderByName : column.dataPropertyName }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-container>\n <ng-template #noSort>\n <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ translateLabels ? (column.label | translate) : column.label }}\n </th>\n </ng-template>\n <!-- data cell to be injected -->\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [class.mad-dt-child-cell]=\"element.parentId\" [ngSwitch]=\"column.transformer\">\n <span>\n {{ element[column.dataPropertyName] }}\n </span>\n </td>\n </ng-container>\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 && isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnIds\"\n ></tr>\n </table>\n</div>\n<div class=\"mad-data-table-bottom-area\">\n <div class=\"mad-data-table-bottom-info-area\">\n <!-- column settings: 1 definition -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length == 1\"\n (click)=\"onColumnSettings()\"\n >\n <mat-icon class=\"material-icons-outlined\">view_column</mat-icon>\n </mad-icon-button>\n <!-- column settings: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.editableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"editableDefinitionMenu\"\n >\n <mat-icon>view_column</mat-icon>\n </mad-icon-button>\n <!-- column view: multiple definitions -->\n <mad-icon-button\n *ngIf=\"this.viewableColumnDefinitions?.length > 0\" [matMenuTriggerFor]=\"viewableDefinitionMenu\"\n >\n <mat-icon>preview</mat-icon>\n </mad-icon-button>\n </div>\n\n <!-- Pagination -->\n <mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [length]=\"paginatorLength\"\n [pageIndex]=\"paginatorPageIndex\"\n [pageSize]=\"paginatorPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n (page)=\"onPageEvent($event)\"\n showFirstLastButtons\n >\n </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n <div class=\"noDataText\">\n <div class=\"mad-datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n </div>\n {{ noDataText }}\n </div>\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;min-height:112px;flex:1 1 auto;background-color:#fff}.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{max-height:100%;width:100%}.datatable th,.datatable td{overflow:hidden;width:auto;text-overflow:ellipsis;white-space:nowrap}.text-right{text-align:right!important;padding-right:24px!important}.table-action{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}.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:#fff;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-bottom-area{display:flex;flex-direction:row}.mad-data-table-bottom-area .mad-data-table-bottom-info-area{display:flex;flex:1}.mat-header-row th{position:sticky;top:0;background-color:#fff;z-index:1}.no-pointer-events{pointer-events:none}.active-column-definition{color:#000;background-color:#f5f5f5}.mad-dt-child-cell{color:#0009}\n"] }]
2258
2268
  }], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; }, propDecorators: { filterLabel: [{
2259
2269
  type: Input
2260
2270
  }], filterPlaceholder: [{
@@ -2289,6 +2299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.2", ngImpor
2289
2299
  type: Input
2290
2300
  }], idGenerator: [{
2291
2301
  type: Input
2302
+ }], parentIdGenerator: [{
2303
+ type: Input
2292
2304
  }], deleteDefinitionAllowed: [{
2293
2305
  type: Input
2294
2306
  }], useAsync: [{