@porscheinformatik/material-addons 22.0.12 → 22.1.1-beta.1
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.
- package/fesm2022/porscheinformatik-material-addons.mjs +551 -577
- package/fesm2022/porscheinformatik-material-addons.mjs.map +1 -1
- package/package.json +1 -1
- package/themes/common/components/_material-overrides.scss +2 -0
- package/types/porscheinformatik-material-addons.d.ts +417 -401
- package/types/porscheinformatik-material-addons.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component, NgModule, booleanAttribute, Directive, ChangeDetectionStrategy, effect, Optional, HostBinding, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, computed, signal, EventEmitter, Output, Input, ViewChild, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf,
|
|
2
|
+
import { input, Component, NgModule, booleanAttribute, Directive, ChangeDetectionStrategy, effect, Optional, HostBinding, LOCALE_ID, Inject, Injectable, output, InjectionToken, inject, viewChild, computed, signal, EventEmitter, Output, Input, ViewChild, forwardRef, HostListener, model, TemplateRef, ViewChildren, ContentChild, SkipSelf, ElementRef, ViewContainerRef, Renderer2, inputBinding, outputBinding, contentChildren, contentChild, ChangeDetectorRef, untracked, ViewEncapsulation, QueryList, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i2$1 from '@angular/material/icon';
|
|
4
4
|
import { MatIconModule, MatIcon } from '@angular/material/icon';
|
|
5
5
|
import * as i2 from '@angular/material/tooltip';
|
|
@@ -8,7 +8,7 @@ import * as i1 from '@angular/material/button';
|
|
|
8
8
|
import { MatButtonModule } from '@angular/material/button';
|
|
9
9
|
import * as i1$9 from '@angular/router';
|
|
10
10
|
import { RouterLink, RouterModule, NavigationEnd } from '@angular/router';
|
|
11
|
-
import * as i2$
|
|
11
|
+
import * as i2$5 from '@angular/common';
|
|
12
12
|
import { CommonModule, NgStyle, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
13
13
|
import * as i1$2 from '@angular/forms';
|
|
14
14
|
import { FormsModule, FormGroupDirective, ControlContainer, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormControl } from '@angular/forms';
|
|
@@ -23,7 +23,7 @@ import { Subject, Subscription, of } from 'rxjs';
|
|
|
23
23
|
import { throttleTime, switchMap, map, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
|
|
24
24
|
import * as i1$3 from '@angular/material/card';
|
|
25
25
|
import { MatCardModule } from '@angular/material/card';
|
|
26
|
-
import * as
|
|
26
|
+
import * as i9 from '@angular/material/table';
|
|
27
27
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
28
28
|
import * as i7 from '@angular/material/paginator';
|
|
29
29
|
import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
|
|
@@ -32,40 +32,40 @@ import { MatSortModule, MatSort } from '@angular/material/sort';
|
|
|
32
32
|
import * as i1$4 from '@angular/material/menu';
|
|
33
33
|
import { MatMenuModule } from '@angular/material/menu';
|
|
34
34
|
import * as i1$5 from '@angular/material/dialog';
|
|
35
|
-
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
35
|
+
import { MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
|
|
36
36
|
import * as i2$3 from '@angular/cdk/drag-drop';
|
|
37
37
|
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
|
|
38
38
|
import * as i2$4 from '@ngx-translate/core';
|
|
39
39
|
import { TranslateModule } from '@ngx-translate/core';
|
|
40
|
-
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
41
40
|
import { SelectionModel } from '@angular/cdk/collections';
|
|
42
41
|
import { DateTime } from 'luxon';
|
|
43
42
|
import { v4 } from 'uuid';
|
|
44
|
-
import * as
|
|
43
|
+
import * as i10 from '@angular/material/progress-spinner';
|
|
45
44
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
46
|
-
import * as
|
|
45
|
+
import * as i16 from '@angular/material/badge';
|
|
47
46
|
import { MatBadgeModule } from '@angular/material/badge';
|
|
48
|
-
import * as
|
|
47
|
+
import * as i14 from '@angular/material/checkbox';
|
|
49
48
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
50
|
-
import * as
|
|
49
|
+
import * as i15 from '@angular/material/radio';
|
|
51
50
|
import { MatRadioModule } from '@angular/material/radio';
|
|
51
|
+
import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
52
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
52
53
|
import * as i3$1 from '@angular/material/select';
|
|
53
54
|
import { MatSelectModule } from '@angular/material/select';
|
|
54
|
-
import * as i2$5 from '@angular/cdk/overlay';
|
|
55
|
-
import { OverlayModule } from '@angular/cdk/overlay';
|
|
56
55
|
import { CdkStepHeader, CdkStep, STEP_STATE, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
|
|
57
56
|
import * as i1$6 from '@angular/cdk/a11y';
|
|
57
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
58
58
|
import * as i1$7 from '@angular/cdk/bidi';
|
|
59
59
|
import * as i1$8 from '@angular/material/stepper';
|
|
60
60
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
61
61
|
import EmblaCarousel from 'embla-carousel';
|
|
62
|
-
import * as i9 from '@angular/cdk/portal';
|
|
62
|
+
import * as i9$1 from '@angular/cdk/portal';
|
|
63
63
|
import { TemplatePortal, PortalModule } from '@angular/cdk/portal';
|
|
64
64
|
import * as i1$a from '@angular/cdk/layout';
|
|
65
65
|
import { Breakpoints } from '@angular/cdk/layout';
|
|
66
66
|
import * as i4 from '@angular/material/toolbar';
|
|
67
67
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
68
|
-
import * as i2$
|
|
68
|
+
import * as i2$6 from '@angular/platform-browser';
|
|
69
69
|
import * as i3$2 from '@angular/material/chips';
|
|
70
70
|
import { MatChipsModule } from '@angular/material/chips';
|
|
71
71
|
|
|
@@ -1538,7 +1538,7 @@ class TableComponent {
|
|
|
1538
1538
|
return event?.target?.classList.contains('mat-icon');
|
|
1539
1539
|
}
|
|
1540
1540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n@if (tableActions?.length) {\n <div>\n @for (tableAction of tableActions; track tableAction) {\n <mad-primary-button class=\"table-action\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n }\n </div>\n}\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n <button mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n@if (isFilterEnabled) {\n <mat-form-field>\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n}\n\n<!-- Table -->\n@if (dataSource?.data?.length > 0) {\n <div class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n @if (rowActions?.length) {\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n }\n <!-- Columns with data -->\n @for (column of columns; track column) {\n <ng-container [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n @if (column.isSortable) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n </div>\n} @else {\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n}\n<!-- Pagination -->\n<mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { 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: 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: MatTableModule }, { kind: "component", type:
|
|
1541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: TableComponent, isStandalone: true, selector: "mad-table", inputs: { columns: "columns", filterLabel: "filterLabel", filterPlaceholder: "filterPlaceholder", noDataText: "noDataText", pageSizeOptions: "pageSizeOptions", defaultPageSize: "defaultPageSize", rowActions: "rowActions", tableActions: "tableActions", displayedData: "displayedData", paginationEnabled: "paginationEnabled", filterEnabled: "filterEnabled" }, outputs: { tableAction: "tableAction", rowAction: "rowAction", sortEvent: "sortEvent" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<!-- Table actions -->\n@if (tableActions?.length) {\n <div>\n @for (tableAction of tableActions; track tableAction) {\n <mad-primary-button class=\"table-action\" (click)=\"onTableAction(tableAction)\">\n {{ tableAction.label }}\n </mad-primary-button>\n }\n </div>\n}\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n <ng-template matMenuContent let-element=\"element\">\n @for (rowAction of rowActions; track rowAction) {\n <button mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n {{ rowAction.label }}\n </button>\n }\n </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n@if (isFilterEnabled) {\n <mat-form-field>\n <mat-label>{{ filterLabel }}</mat-label>\n <input matInput (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n </mat-form-field>\n}\n\n<!-- Table -->\n@if (dataSource?.data?.length > 0) {\n <div class=\"mad-table\">\n <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n <!-- Row actions column -->\n @if (rowActions?.length) {\n <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" sticky>\n <th mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n <mat-icon>more_vert</mat-icon>\n </mad-icon-button>\n </td>\n </ng-container>\n }\n <!-- Columns with data -->\n @for (column of columns; track column) {\n <ng-container [matColumnDef]=\"column.label\" [sticky]=\"column.isSticky\">\n @if (column.isSortable) {\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"{{ column.label }}\"\n [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n [class.text-right]=\"column.isRightAligned\"\n >\n {{ column.label }}\n </th>\n } @else {\n <th mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n {{ column.label }}\n </th>\n }\n <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n {{ element[column.dataPropertyName] }}\n </td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n <tr\n mat-row\n [class.clickable-table-row]=\"isRowClickable\"\n (click)=\"onRowEvent($event, row)\"\n *matRowDef=\"let row; columns: columnNames\"\n ></tr>\n </table>\n </div>\n} @else {\n <div class=\"noDataText\">\n {{ noDataText }}\n </div>\n}\n<!-- Pagination -->\n<mat-paginator\n [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n showFirstLastButtons\n>\n</mat-paginator>\n\n<!-- No data alert -->\n", styles: [".text-right{text-align:right!important}.table-action{margin-right:.5em;margin-bottom:.5em}.row-action-button{width:10px}.noDataText{width:100%;text-align:center}.mad-table{width:100%;overflow-x:auto}\n"], dependencies: [{ kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { 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: 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: MatTableModule }, { kind: "component", type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: "component", type: IconButtonComponent, selector: "mad-icon-button" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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"] }] }); }
|
|
1542
1542
|
}
|
|
1543
1543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: TableComponent, decorators: [{
|
|
1544
1544
|
type: Component,
|
|
@@ -1711,11 +1711,23 @@ class DataTableColumnsModalComponent {
|
|
|
1711
1711
|
this.filteredAvailableColumns = [...this.availableColumns];
|
|
1712
1712
|
}
|
|
1713
1713
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableColumnsModalComponent, deps: [{ token: i1$5.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1714
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableColumnsModalComponent, isStandalone: true, selector: "mad-data-table-columns-modal
|
|
1714
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableColumnsModalComponent, isStandalone: true, selector: "mad-data-table-columns-modal", ngImport: i0, template: "<h2 mat-dialog-title>{{ data.titleLabel | translate }}</h2>\n<mat-dialog-content>\n <div\n class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 w-full max-w-full box-border pt-2 pb-4 mb-4 border-b border-(--mat-sys-outline-variant)\"\n >\n <div class=\"w-full max-w-full min-w-0 block text-sm\">\n <div class=\"w-full min-h-14 mb-4 text-sm text-(--mat-sys-on-surface-variant) flex justify-end items-stretch flex-col\">\n {{ data.infoTextLabel | translate }}\n </div>\n <div class=\"font-bold mb-1\">{{ data.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list border border-(--mat-sys-outline-variant) h-[200px] box-border bg-(--mat-sys-surface) rounded overflow-auto block\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (selectedColumn of selectedColumns; track selectedColumn; let i = $index) {\n <div\n class=\"column-drag-box py-3 px-2.5 border-b border-(--mat-sys-outline-variant) text-(--mat-sys-on-surface) flex flex-row items-center justify-between box-border h-10 cursor-move bg-(--mat-sys-surface) text-sm\"\n cdkDrag\n [id]=\"selectedColumn.id\"\n >\n {{ i + 1 }}. {{ selectedColumn.label | translate }}\n </div>\n }\n </div>\n </div>\n\n <div class=\"w-full max-w-full min-w-0 block text-sm\">\n <div class=\"w-full min-h-14 mb-4 text-sm text-(--mat-sys-on-surface-variant) flex justify-end items-stretch flex-col\">\n <!-- Table filter -->\n <mat-form-field class=\"w-full\">\n <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n <input\n matInput\n autocomplete=\"off\"\n (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n [(ngModel)]=\"searchFilter\"\n />\n @if (searchFilter) {\n <button matSuffix matIconButton aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n <div class=\"font-bold mb-1\">{{ data.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list border border-(--mat-sys-outline-variant) h-[200px] box-border bg-(--mat-sys-surface) rounded overflow-auto block\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (availableColumn of filteredAvailableColumns; track availableColumn) {\n <div\n class=\"column-drag-box py-3 px-2.5 border-b border-(--mat-sys-outline-variant) text-(--mat-sys-on-surface) flex flex-row items-center justify-between box-border h-10 cursor-move bg-(--mat-sys-surface) text-sm\"\n cdkDrag\n [id]=\"availableColumn.id\"\n >\n {{ availableColumn.label }}\n </div>\n }\n </div>\n </div>\n </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data.cancelLabel | translate }}\n </mad-outline-button>\n @if (data.deleteDefinitionAllowed) {\n <mad-danger-button (click)=\"onDelete()\">\n {{ data.deleteLabel | translate }}\n </mad-danger-button>\n }\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n {{ data.saveLabel | translate }}\n </mad-primary-button>\n</mat-dialog-actions>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border-bottom:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { 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: "directive", type: i1$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: 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: 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: PrimaryButtonComponent, selector: "mad-primary-button" }, { kind: "component", type: OutlineButtonComponent, selector: "mad-outline-button", inputs: ["color"] }, { kind: "component", type: DangerButtonComponent, selector: "mad-danger-button" }, { kind: "ngmodule", type: TranslateModule }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "pipe", type: i2$4.TranslatePipe, name: "translate" }] }); }
|
|
1715
1715
|
}
|
|
1716
1716
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableColumnsModalComponent, decorators: [{
|
|
1717
1717
|
type: Component,
|
|
1718
|
-
args: [{ selector: 'mad-data-table-columns-modal
|
|
1718
|
+
args: [{ selector: 'mad-data-table-columns-modal', imports: [
|
|
1719
|
+
DragDropModule,
|
|
1720
|
+
MatFormFieldModule,
|
|
1721
|
+
MatInputModule,
|
|
1722
|
+
MatButtonModule,
|
|
1723
|
+
MatIconModule,
|
|
1724
|
+
FormsModule,
|
|
1725
|
+
ButtonModule,
|
|
1726
|
+
TranslateModule,
|
|
1727
|
+
MatDialogTitle,
|
|
1728
|
+
MatDialogContent,
|
|
1729
|
+
MatDialogActions,
|
|
1730
|
+
], template: "<h2 mat-dialog-title>{{ data.titleLabel | translate }}</h2>\n<mat-dialog-content>\n <div\n class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 w-full max-w-full box-border pt-2 pb-4 mb-4 border-b border-(--mat-sys-outline-variant)\"\n >\n <div class=\"w-full max-w-full min-w-0 block text-sm\">\n <div class=\"w-full min-h-14 mb-4 text-sm text-(--mat-sys-on-surface-variant) flex justify-end items-stretch flex-col\">\n {{ data.infoTextLabel | translate }}\n </div>\n <div class=\"font-bold mb-1\">{{ data.selectedLabel | translate }}</div>\n <div\n cdkDropList\n #selectedList=\"cdkDropList\"\n [cdkDropListData]=\"selectedColumns\"\n [cdkDropListConnectedTo]=\"[availableList]\"\n class=\"column-drag-list selected-drag-list border border-(--mat-sys-outline-variant) h-[200px] box-border bg-(--mat-sys-surface) rounded overflow-auto block\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (selectedColumn of selectedColumns; track selectedColumn; let i = $index) {\n <div\n class=\"column-drag-box py-3 px-2.5 border-b border-(--mat-sys-outline-variant) text-(--mat-sys-on-surface) flex flex-row items-center justify-between box-border h-10 cursor-move bg-(--mat-sys-surface) text-sm\"\n cdkDrag\n [id]=\"selectedColumn.id\"\n >\n {{ i + 1 }}. {{ selectedColumn.label | translate }}\n </div>\n }\n </div>\n </div>\n\n <div class=\"w-full max-w-full min-w-0 block text-sm\">\n <div class=\"w-full min-h-14 mb-4 text-sm text-(--mat-sys-on-surface-variant) flex justify-end items-stretch flex-col\">\n <!-- Table filter -->\n <mat-form-field class=\"w-full\">\n <mat-label>{{ data.filterColumnsLabel | translate }}</mat-label>\n <input\n matInput\n autocomplete=\"off\"\n (keyup)=\"updateFilterValue()\"\n placeholder=\"{{ data.filterColumnsPlaceHolder | translate }}\"\n [(ngModel)]=\"searchFilter\"\n />\n @if (searchFilter) {\n <button matSuffix matIconButton aria-label=\"Clear\" (click)=\"clearFilterValue()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n </mat-form-field>\n </div>\n <div class=\"font-bold mb-1\">{{ data.availableLabel | translate }}</div>\n <div\n cdkDropList\n cdkDropListSortingDisabled\n #availableList=\"cdkDropList\"\n [cdkDropListData]=\"availableColumns\"\n [cdkDropListConnectedTo]=\"[selectedList]\"\n class=\"column-drag-list border border-(--mat-sys-outline-variant) h-[200px] box-border bg-(--mat-sys-surface) rounded overflow-auto block\"\n (cdkDropListDropped)=\"onDrop($event)\"\n >\n @for (availableColumn of filteredAvailableColumns; track availableColumn) {\n <div\n class=\"column-drag-box py-3 px-2.5 border-b border-(--mat-sys-outline-variant) text-(--mat-sys-on-surface) flex flex-row items-center justify-between box-border h-10 cursor-move bg-(--mat-sys-surface) text-sm\"\n cdkDrag\n [id]=\"availableColumn.id\"\n >\n {{ availableColumn.label }}\n </div>\n }\n </div>\n </div>\n </div>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n <mad-outline-button (click)=\"onCancel()\">\n {{ data.cancelLabel | translate }}\n </mad-outline-button>\n @if (data.deleteDefinitionAllowed) {\n <mad-danger-button (click)=\"onDelete()\">\n {{ data.deleteLabel | translate }}\n </mad-danger-button>\n }\n <mad-primary-button (click)=\"onSave()\" [disabled]=\"!((this.selectedColumns.length || 0) > 0)\">\n {{ data.saveLabel | translate }}\n </mad-primary-button>\n</mat-dialog-actions>\n", styles: [".cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.column-drag-box:last-child{border-bottom:none}.column-drag-list.cdk-drop-list-dragging .column-drag-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
1719
1731
|
}], ctorParameters: () => [{ type: i1$5.MatDialogRef }, { type: undefined, decorators: [{
|
|
1720
1732
|
type: Inject,
|
|
1721
1733
|
args: [MAT_DIALOG_DATA]
|
|
@@ -1729,7 +1741,7 @@ class DataTableActionType {
|
|
|
1729
1741
|
|
|
1730
1742
|
class DataTableFilter {
|
|
1731
1743
|
constructor() {
|
|
1732
|
-
this.filterChange =
|
|
1744
|
+
this.filterChange = output({ alias: 'madFilterChange' });
|
|
1733
1745
|
this.filterables = new Map();
|
|
1734
1746
|
}
|
|
1735
1747
|
register(filterable) {
|
|
@@ -1769,10 +1781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
1769
1781
|
selector: '[madFilter]',
|
|
1770
1782
|
standalone: true,
|
|
1771
1783
|
}]
|
|
1772
|
-
}], propDecorators: { filterChange: [{
|
|
1773
|
-
type: Output,
|
|
1774
|
-
args: ['madFilterChange']
|
|
1775
|
-
}] } });
|
|
1784
|
+
}], propDecorators: { filterChange: [{ type: i0.Output, args: ["madFilterChange"] }] } });
|
|
1776
1785
|
|
|
1777
1786
|
class DataTableSortUtil {
|
|
1778
1787
|
static sortData(dateTimeFormat, numberFormat) {
|
|
@@ -2040,180 +2049,169 @@ const MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER = {
|
|
|
2040
2049
|
};
|
|
2041
2050
|
|
|
2042
2051
|
class DataTableFilterDialogComponent {
|
|
2043
|
-
set filterValue(value) {
|
|
2044
|
-
this.control.setValue(value);
|
|
2045
|
-
}
|
|
2046
2052
|
constructor() {
|
|
2047
|
-
this.
|
|
2053
|
+
this.filterOptions = input([], ...(ngDevMode ? [{ debugName: "filterOptions" }] : []));
|
|
2054
|
+
this.filterValue = input(null, ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
|
|
2055
|
+
this.filterChanged = output();
|
|
2048
2056
|
this.control = new FormControl(null);
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
this._subscription.unsubscribe();
|
|
2057
|
+
effect(() => {
|
|
2058
|
+
this.control.setValue(this.filterValue());
|
|
2059
|
+
});
|
|
2060
|
+
this.control.valueChanges.pipe(takeUntilDestroyed()).subscribe((value) => this.filterChanged.emit(value));
|
|
2054
2061
|
}
|
|
2055
2062
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2056
|
-
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
|
|
2063
|
+
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: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChanged: "filterChanged" }, ngImport: i0, template: "<div class=\"filter-dialog-box flex items-center w-auto h-20 px-3 py-3 bg-(--mat-sys-surface) [box-shadow:0_1px_3px_0_rgb(0_0_0_/_0.05)]\">\n @if (!filterOptions().length) {\n <mat-form-field class=\"filter-dialog-input w-auto max-w-[180px] m-auto\">\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 w-auto max-w-[180px] m-auto\">\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.key) {\n <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n</div>\n", styles: [".filter-dialog-input.mat-form-field-appearance-outline{margin-top:0}\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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2057
2064
|
}
|
|
2058
2065
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterDialogComponent, decorators: [{
|
|
2059
2066
|
type: Component,
|
|
2060
|
-
args: [{ selector: 'mad-data-table-filter-dialog', imports: [MatFormFieldModule, MatInputModule, MatSelectModule, FormsModule, ReactiveFormsModule, TranslateModule], template: "<div class=\"filter-dialog-box\">\n @if (!filterOptions
|
|
2061
|
-
}], ctorParameters: () => [], propDecorators: { filterOptions: [{
|
|
2062
|
-
type: Input
|
|
2063
|
-
}], filterValue: [{
|
|
2064
|
-
type: Input
|
|
2065
|
-
}], filterChanged: [{
|
|
2066
|
-
type: Output
|
|
2067
|
-
}] } });
|
|
2067
|
+
args: [{ selector: 'mad-data-table-filter-dialog', imports: [MatFormFieldModule, MatInputModule, MatSelectModule, FormsModule, ReactiveFormsModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"filter-dialog-box flex items-center w-auto h-20 px-3 py-3 bg-(--mat-sys-surface) [box-shadow:0_1px_3px_0_rgb(0_0_0_/_0.05)]\">\n @if (!filterOptions().length) {\n <mat-form-field class=\"filter-dialog-input w-auto max-w-[180px] m-auto\">\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 w-auto max-w-[180px] m-auto\">\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.key) {\n <mat-option [value]=\"entry.key\">{{ entry.label }}</mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n</div>\n", styles: [".filter-dialog-input.mat-form-field-appearance-outline{margin-top:0}\n"] }]
|
|
2068
|
+
}], ctorParameters: () => [], propDecorators: { filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], filterChanged: [{ type: i0.Output, args: ["filterChanged"] }] } });
|
|
2068
2069
|
|
|
2069
2070
|
class FilterComponent {
|
|
2070
2071
|
constructor() {
|
|
2071
|
-
this.
|
|
2072
|
+
this.filterOptions = input([], ...(ngDevMode ? [{ debugName: "filterOptions" }] : []));
|
|
2073
|
+
this.filterValue = model(null, ...(ngDevMode ? [{ debugName: "filterValue" }] : []));
|
|
2074
|
+
this.isHovered = input(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
|
|
2075
|
+
this.showFilterDialog = signal(false, ...(ngDevMode ? [{ debugName: "showFilterDialog" }] : []));
|
|
2076
|
+
this.isActive = computed(() => !!this.filterValue(), ...(ngDevMode ? [{ debugName: "isActive" }] : []));
|
|
2077
|
+
this.opacity = computed(() => (this.isActive() ? '1' : this.isHovered() || this.showFilterDialog() ? '0.54' : '0'), ...(ngDevMode ? [{ debugName: "opacity" }] : []));
|
|
2078
|
+
}
|
|
2079
|
+
toggleFilter(event) {
|
|
2080
|
+
event.preventDefault();
|
|
2081
|
+
event.stopPropagation();
|
|
2082
|
+
this.showFilterDialog.update((showFilterDialog) => !showFilterDialog);
|
|
2072
2083
|
}
|
|
2073
|
-
|
|
2074
|
-
this.showFilterDialog
|
|
2084
|
+
closeFilterDialog() {
|
|
2085
|
+
this.showFilterDialog.set(false);
|
|
2075
2086
|
}
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
this.filterValue = filterValue;
|
|
2079
|
-
this.filterValueChange.emit(this.filterValue);
|
|
2087
|
+
stopHeaderSort(event) {
|
|
2088
|
+
event.stopPropagation();
|
|
2080
2089
|
}
|
|
2081
|
-
|
|
2082
|
-
|
|
2090
|
+
onFilterChanged(filterValue) {
|
|
2091
|
+
this.filterValue.set(filterValue);
|
|
2083
2092
|
}
|
|
2084
2093
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
2094
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.1", type: FilterComponent, isStandalone: true, selector: "mad-data-table-filter", inputs: { filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, isHovered: { classPropertyName: "isHovered", publicName: "isHovered", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterValue: "filterValueChange" }, host: { listeners: { "click": "stopHeaderSort($event)", "keydown": "stopHeaderSort($event)" } }, ngImport: i0, template: "<div class=\"container relative size-4\">\n <div class=\"overlay absolute size-4 bg-(--mat-sys-surface) flex items-center justify-center\" [style.opacity]=\"opacity()\">\n <mat-icon\n #filterTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"colored-icon relative flex items-center justify-center\"\n fontSet=\"material-icons-outlined\"\n (click)=\"toggleFilter($event)\"\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)=\"closeFilterDialog()\"\n (detach)=\"closeFilterDialog()\"\n>\n <mad-data-table-filter-dialog [filterOptions]=\"filterOptions()\" [filterValue]=\"filterValue()\" (filterChanged)=\"onFilterChanged($event)\" />\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host .colored-icon.mat-icon{width:18px;height:18px;color:var(--mat-sys-on-surface-variant);font-size:18px;line-height:18px;cursor:pointer}:host(:hover) .colored-icon.mat-icon{color:var(--main-primary)}\n"], dependencies: [{ kind: "directive", type: 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: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2086
2095
|
}
|
|
2087
2096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: FilterComponent, decorators: [{
|
|
2088
2097
|
type: Component,
|
|
2089
|
-
args: [{ selector: 'mad-data-table-filter', imports: [MatIconModule, DataTableFilterDialogComponent
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2098
|
+
args: [{ selector: 'mad-data-table-filter', imports: [CdkConnectedOverlay, CdkOverlayOrigin, MatIconModule, DataTableFilterDialogComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
2099
|
+
'(click)': 'stopHeaderSort($event)',
|
|
2100
|
+
'(keydown)': 'stopHeaderSort($event)',
|
|
2101
|
+
}, template: "<div class=\"container relative size-4\">\n <div class=\"overlay absolute size-4 bg-(--mat-sys-surface) flex items-center justify-center\" [style.opacity]=\"opacity()\">\n <mat-icon\n #filterTrigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n class=\"colored-icon relative flex items-center justify-center\"\n fontSet=\"material-icons-outlined\"\n (click)=\"toggleFilter($event)\"\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)=\"closeFilterDialog()\"\n (detach)=\"closeFilterDialog()\"\n>\n <mad-data-table-filter-dialog [filterOptions]=\"filterOptions()\" [filterValue]=\"filterValue()\" (filterChanged)=\"onFilterChanged($event)\" />\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center}:host .colored-icon.mat-icon{width:18px;height:18px;color:var(--mat-sys-on-surface-variant);font-size:18px;line-height:18px;cursor:pointer}:host(:hover) .colored-icon.mat-icon{color:var(--main-primary)}\n"] }]
|
|
2102
|
+
}], propDecorators: { filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }, { type: i0.Output, args: ["filterValueChange"] }], isHovered: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHovered", required: false }] }] } });
|
|
2093
2103
|
|
|
2094
2104
|
class DataTableFilterHeader {
|
|
2095
|
-
|
|
2096
|
-
this.
|
|
2105
|
+
constructor() {
|
|
2106
|
+
this.madFilterHeaderId = input.required({ ...(ngDevMode ? { debugName: "madFilterHeaderId" } : {}), alias: 'mad-filter-header' });
|
|
2107
|
+
this.madFilterColumnRightAligned = input(false, ...(ngDevMode ? [{ debugName: "madFilterColumnRightAligned" }] : []));
|
|
2108
|
+
this.madFilterOptions = input([], { ...(ngDevMode ? { debugName: "madFilterOptions" } : {}), transform: (filterOptions) => filterOptions ?? [] });
|
|
2109
|
+
this.element = inject(ElementRef);
|
|
2110
|
+
this.viewContainerRef = inject(ViewContainerRef);
|
|
2111
|
+
this.renderer = inject(Renderer2);
|
|
2112
|
+
this.madFilter = inject(DataTableFilter, { optional: true });
|
|
2113
|
+
this._filterValue = signal(null, ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
|
|
2114
|
+
this._isHovered = signal(false, ...(ngDevMode ? [{ debugName: "_isHovered" }] : []));
|
|
2115
|
+
}
|
|
2116
|
+
get id() {
|
|
2117
|
+
return this.madFilterHeaderId();
|
|
2097
2118
|
}
|
|
2098
|
-
|
|
2099
|
-
this.
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
this.
|
|
2103
|
-
this.
|
|
2104
|
-
|
|
2119
|
+
get filterValue() {
|
|
2120
|
+
return this._filterValue();
|
|
2121
|
+
}
|
|
2122
|
+
set filterValue(filterValue) {
|
|
2123
|
+
this._filterValue.set(filterValue);
|
|
2124
|
+
this._filterComponent?.changeDetectorRef.detectChanges();
|
|
2125
|
+
}
|
|
2126
|
+
onMouseenter() {
|
|
2127
|
+
this._isHovered.set(true);
|
|
2128
|
+
}
|
|
2129
|
+
onMouseleave() {
|
|
2130
|
+
this._isHovered.set(false);
|
|
2105
2131
|
}
|
|
2106
2132
|
ngOnInit() {
|
|
2107
|
-
this._filterComponent = this.viewContainerRef.createComponent(FilterComponent
|
|
2108
|
-
|
|
2133
|
+
this._filterComponent = this.viewContainerRef.createComponent(FilterComponent, {
|
|
2134
|
+
bindings: [
|
|
2135
|
+
inputBinding('filterOptions', this.madFilterOptions),
|
|
2136
|
+
inputBinding('filterValue', this._filterValue),
|
|
2137
|
+
inputBinding('isHovered', this._isHovered),
|
|
2138
|
+
outputBinding('filterValueChange', (value) => this.onFilterValueChange(value)),
|
|
2139
|
+
],
|
|
2140
|
+
});
|
|
2109
2141
|
this._filterComponent.changeDetectorRef.detectChanges();
|
|
2110
2142
|
this.insertFilterComponent();
|
|
2111
|
-
this.
|
|
2143
|
+
this.madFilter?.register(this);
|
|
2112
2144
|
}
|
|
2113
2145
|
ngAfterViewInit() {
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2117
|
-
this.
|
|
2118
|
-
}
|
|
2119
|
-
if (!!this.madFilter) {
|
|
2120
|
-
this.madFilter.register(this);
|
|
2146
|
+
const componentNativeElement = this._filterComponent.location.nativeElement;
|
|
2147
|
+
const wrapper = componentNativeElement.parentElement;
|
|
2148
|
+
if (wrapper && !wrapper.classList.contains('mat-sort-header-container')) {
|
|
2149
|
+
this.insertFilterComponentIntoSortHeader(wrapper, componentNativeElement);
|
|
2121
2150
|
}
|
|
2122
2151
|
}
|
|
2123
2152
|
ngOnDestroy() {
|
|
2124
|
-
this.
|
|
2125
|
-
this.madFilter.unregister(this);
|
|
2153
|
+
this.madFilter?.unregister(this);
|
|
2126
2154
|
}
|
|
2127
|
-
|
|
2128
|
-
this.
|
|
2129
|
-
|
|
2130
|
-
this.madFilter.changeFilter();
|
|
2131
|
-
}));
|
|
2132
|
-
}
|
|
2133
|
-
get filterValue() {
|
|
2134
|
-
return this._filterValue;
|
|
2135
|
-
}
|
|
2136
|
-
set filterValue(filterValue) {
|
|
2137
|
-
this._filterComponent.instance.onFilterChanged(filterValue);
|
|
2138
|
-
this._filterComponent.changeDetectorRef.detectChanges();
|
|
2139
|
-
}
|
|
2140
|
-
onMouseenter() {
|
|
2141
|
-
this._filterComponent.instance.isHovered = true;
|
|
2142
|
-
}
|
|
2143
|
-
onMouseleave() {
|
|
2144
|
-
this._filterComponent.instance.isHovered = false;
|
|
2155
|
+
onFilterValueChange(value) {
|
|
2156
|
+
this._filterValue.set(value);
|
|
2157
|
+
this.madFilter?.changeFilter();
|
|
2145
2158
|
}
|
|
2146
2159
|
insertFilterComponent() {
|
|
2147
2160
|
const componentNativeElement = this._filterComponent.location.nativeElement;
|
|
2148
2161
|
const div = this.getWrappedHeader();
|
|
2149
|
-
if (
|
|
2150
|
-
|
|
2151
|
-
this.renderer.insertBefore(sortHeader, componentNativeElement, sortHeader.firstChild.nextSibling);
|
|
2162
|
+
if (this.insertFilterComponentIntoSortHeader(div, componentNativeElement)) {
|
|
2163
|
+
return;
|
|
2152
2164
|
}
|
|
2153
|
-
|
|
2154
|
-
|
|
2165
|
+
this.renderer.appendChild(div, componentNativeElement);
|
|
2166
|
+
}
|
|
2167
|
+
insertFilterComponentIntoSortHeader(wrapper, componentNativeElement) {
|
|
2168
|
+
const sortHeaderContainer = wrapper.querySelector('.mat-sort-header-container');
|
|
2169
|
+
const sortArrow = sortHeaderContainer?.querySelector('.mat-sort-header-arrow');
|
|
2170
|
+
if (sortHeaderContainer && sortArrow) {
|
|
2171
|
+
this.renderer.insertBefore(sortHeaderContainer, componentNativeElement, sortArrow);
|
|
2172
|
+
return true;
|
|
2155
2173
|
}
|
|
2174
|
+
return false;
|
|
2156
2175
|
}
|
|
2157
2176
|
getWrappedHeader() {
|
|
2158
2177
|
const headerContent = this.element.nativeElement.firstChild;
|
|
2159
|
-
|
|
2178
|
+
if (headerContent) {
|
|
2179
|
+
this.renderer.removeChild(this.element.nativeElement, headerContent);
|
|
2180
|
+
}
|
|
2160
2181
|
const div = this.renderer.createElement('div');
|
|
2161
2182
|
this.renderer.setStyle(div, 'display', 'flex');
|
|
2162
2183
|
this.renderer.setStyle(div, 'align-items', 'center');
|
|
2163
|
-
if (this.madFilterColumnRightAligned) {
|
|
2184
|
+
if (this.madFilterColumnRightAligned()) {
|
|
2164
2185
|
this.renderer.setStyle(div, 'justify-content', 'flex-end');
|
|
2165
|
-
if (
|
|
2186
|
+
if (headerContent?.firstChild) {
|
|
2166
2187
|
this.renderer.setStyle(headerContent.firstChild, 'justify-content', 'flex-end');
|
|
2167
2188
|
}
|
|
2168
2189
|
}
|
|
2169
|
-
|
|
2190
|
+
if (headerContent) {
|
|
2191
|
+
this.renderer.appendChild(div, headerContent);
|
|
2192
|
+
}
|
|
2170
2193
|
this.renderer.appendChild(this.element.nativeElement, div);
|
|
2171
2194
|
return div;
|
|
2172
2195
|
}
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
}
|
|
2176
|
-
findArrowInList(nativeElements) {
|
|
2177
|
-
for (let nativeElement of Array.from(nativeElements)) {
|
|
2178
|
-
const foundElement = this.findArrow(nativeElement);
|
|
2179
|
-
if (!!foundElement) {
|
|
2180
|
-
return foundElement;
|
|
2181
|
-
}
|
|
2182
|
-
}
|
|
2183
|
-
return null;
|
|
2184
|
-
}
|
|
2185
|
-
isArrowElement(nativeElement) {
|
|
2186
|
-
return nativeElement.classList.contains('mat-sort-header-arrow');
|
|
2187
|
-
}
|
|
2188
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterHeader, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.Renderer2 }, { token: DataTableFilter, optional: true }, { token: i5.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2189
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.1", type: DataTableFilterHeader, isStandalone: true, selector: "th[mad-filter-header]", inputs: { id: ["mad-filter-header", "id"], madFilterColumnRightAligned: "madFilterColumnRightAligned", madFilterOptions: "madFilterOptions" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, ngImport: i0 }); }
|
|
2196
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2197
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataTableFilterHeader, isStandalone: true, selector: "th[mad-filter-header]", inputs: { madFilterHeaderId: { classPropertyName: "madFilterHeaderId", publicName: "mad-filter-header", isSignal: true, isRequired: true, transformFunction: null }, madFilterColumnRightAligned: { classPropertyName: "madFilterColumnRightAligned", publicName: "madFilterColumnRightAligned", isSignal: true, isRequired: false, transformFunction: null }, madFilterOptions: { classPropertyName: "madFilterOptions", publicName: "madFilterOptions", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" } }, ngImport: i0 }); }
|
|
2190
2198
|
}
|
|
2191
2199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableFilterHeader, decorators: [{
|
|
2192
2200
|
type: Directive,
|
|
2193
2201
|
args: [{
|
|
2194
2202
|
selector: 'th[mad-filter-header]',
|
|
2195
2203
|
standalone: true,
|
|
2204
|
+
host: {
|
|
2205
|
+
'(mouseenter)': 'onMouseenter()',
|
|
2206
|
+
'(mouseleave)': 'onMouseleave()',
|
|
2207
|
+
},
|
|
2196
2208
|
}]
|
|
2197
|
-
}],
|
|
2198
|
-
type: Optional
|
|
2199
|
-
}] }, { type: i5.MatSortHeader, decorators: [{
|
|
2200
|
-
type: Optional
|
|
2201
|
-
}] }], propDecorators: { id: [{
|
|
2202
|
-
type: Input,
|
|
2203
|
-
args: ['mad-filter-header']
|
|
2204
|
-
}], madFilterColumnRightAligned: [{
|
|
2205
|
-
type: Input
|
|
2206
|
-
}], madFilterOptions: [{
|
|
2207
|
-
type: Input
|
|
2208
|
-
}], onMouseenter: [{
|
|
2209
|
-
type: HostListener,
|
|
2210
|
-
args: ['mouseenter']
|
|
2211
|
-
}], onMouseleave: [{
|
|
2212
|
-
type: HostListener,
|
|
2213
|
-
args: ['mouseleave']
|
|
2214
|
-
}] } });
|
|
2209
|
+
}], propDecorators: { madFilterHeaderId: [{ type: i0.Input, args: [{ isSignal: true, alias: "mad-filter-header", required: true }] }], madFilterColumnRightAligned: [{ type: i0.Input, args: [{ isSignal: true, alias: "madFilterColumnRightAligned", required: false }] }], madFilterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "madFilterOptions", required: false }] }] } });
|
|
2215
2210
|
|
|
2216
2211
|
class DataTableTemplateColumnDefinition {
|
|
2212
|
+
constructor() {
|
|
2213
|
+
this.madColumnDef = input.required(...(ngDevMode ? [{ debugName: "madColumnDef" }] : []));
|
|
2214
|
+
}
|
|
2217
2215
|
register(cellDef) {
|
|
2218
2216
|
this.cellDef = cellDef;
|
|
2219
2217
|
}
|
|
@@ -2221,7 +2219,7 @@ class DataTableTemplateColumnDefinition {
|
|
|
2221
2219
|
this.cellDef = null;
|
|
2222
2220
|
}
|
|
2223
2221
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableTemplateColumnDefinition, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2224
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2222
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataTableTemplateColumnDefinition, isStandalone: true, selector: "[madColumnDef]", inputs: { madColumnDef: { classPropertyName: "madColumnDef", publicName: "madColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2225
2223
|
}
|
|
2226
2224
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableTemplateColumnDefinition, decorators: [{
|
|
2227
2225
|
type: Directive,
|
|
@@ -2229,11 +2227,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2229
2227
|
selector: '[madColumnDef]',
|
|
2230
2228
|
standalone: true,
|
|
2231
2229
|
}]
|
|
2232
|
-
}], propDecorators: { madColumnDef: [{
|
|
2233
|
-
type: Input
|
|
2234
|
-
}] } });
|
|
2230
|
+
}], propDecorators: { madColumnDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "madColumnDef", required: true }] }] } });
|
|
2235
2231
|
|
|
2236
2232
|
class DataTableTemplateExpandableColumnDefinition {
|
|
2233
|
+
constructor() {
|
|
2234
|
+
this.madExpandableColumnDef = input.required(...(ngDevMode ? [{ debugName: "madExpandableColumnDef" }] : []));
|
|
2235
|
+
}
|
|
2237
2236
|
register(cellDef) {
|
|
2238
2237
|
this.cellDef = cellDef;
|
|
2239
2238
|
}
|
|
@@ -2241,7 +2240,7 @@ class DataTableTemplateExpandableColumnDefinition {
|
|
|
2241
2240
|
this.cellDef = null;
|
|
2242
2241
|
}
|
|
2243
2242
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableTemplateExpandableColumnDefinition, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
2244
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "
|
|
2243
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.1", type: DataTableTemplateExpandableColumnDefinition, isStandalone: true, selector: "[madExpandableColumnDef]", inputs: { madExpandableColumnDef: { classPropertyName: "madExpandableColumnDef", publicName: "madExpandableColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
|
|
2245
2244
|
}
|
|
2246
2245
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableTemplateExpandableColumnDefinition, decorators: [{
|
|
2247
2246
|
type: Directive,
|
|
@@ -2249,9 +2248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2249
2248
|
selector: '[madExpandableColumnDef]',
|
|
2250
2249
|
standalone: true,
|
|
2251
2250
|
}]
|
|
2252
|
-
}], propDecorators: { madExpandableColumnDef: [{
|
|
2253
|
-
type: Input
|
|
2254
|
-
}] } });
|
|
2251
|
+
}], propDecorators: { madExpandableColumnDef: [{ type: i0.Input, args: [{ isSignal: true, alias: "madExpandableColumnDef", required: true }] }] } });
|
|
2255
2252
|
|
|
2256
2253
|
class DataTableTemplateExpandableCellDefinition {
|
|
2257
2254
|
constructor(templateRef, columnDef) {
|
|
@@ -2278,207 +2275,327 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2278
2275
|
}]
|
|
2279
2276
|
}], ctorParameters: () => [{ type: i0.TemplateRef }, { type: DataTableTemplateExpandableColumnDefinition }] });
|
|
2280
2277
|
|
|
2278
|
+
const DEFAULT_PAGE = { pageIndex: 0, pageSize: 50, length: 0 };
|
|
2279
|
+
const DEFAULT_PERSISTENCE_CONFIG = {
|
|
2280
|
+
persistSort: false,
|
|
2281
|
+
persistFilter: false,
|
|
2282
|
+
persistPageSize: false,
|
|
2283
|
+
};
|
|
2284
|
+
function arrayOrEmpty(value) {
|
|
2285
|
+
return value ?? [];
|
|
2286
|
+
}
|
|
2287
|
+
function pageOrDefault(value) {
|
|
2288
|
+
return value ?? DEFAULT_PAGE;
|
|
2289
|
+
}
|
|
2290
|
+
function persistenceConfigOrUndefined(value) {
|
|
2291
|
+
return value ?? undefined;
|
|
2292
|
+
}
|
|
2293
|
+
function isDeprecatedForceSelectionMode(value) {
|
|
2294
|
+
return value === 'SINGLE' || value === 'BATCH';
|
|
2295
|
+
}
|
|
2296
|
+
|
|
2281
2297
|
class DataTableComponent {
|
|
2282
|
-
|
|
2283
|
-
this.
|
|
2284
|
-
this.applySortData();
|
|
2285
|
-
}
|
|
2286
|
-
/**
|
|
2287
|
-
* @deprecated
|
|
2288
|
-
* Please use the more specific persistenceConfig instead
|
|
2289
|
-
*/
|
|
2290
|
-
set stateful(stateful) {
|
|
2291
|
-
this.persistenceConfig = {
|
|
2292
|
-
persistSort: stateful,
|
|
2293
|
-
persistFilter: stateful,
|
|
2294
|
-
persistPageSize: stateful,
|
|
2295
|
-
};
|
|
2298
|
+
get filterMode() {
|
|
2299
|
+
return this.filterModeState();
|
|
2296
2300
|
}
|
|
2297
|
-
|
|
2298
|
-
this.
|
|
2299
|
-
this.updateSelectionModel(selection);
|
|
2301
|
+
get selectionMode() {
|
|
2302
|
+
return this.selectionModeState();
|
|
2300
2303
|
}
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
* Please use "filterMode" instead
|
|
2304
|
-
*/
|
|
2305
|
-
set filterEnabled(isFilterEnabled) {
|
|
2306
|
-
this._filterMode = isFilterEnabled ? 'TABLE_BASED' : 'NONE';
|
|
2307
|
-
this.applyFilterPredicate();
|
|
2304
|
+
get selectionEmitMode() {
|
|
2305
|
+
return this.selectionEmitModeState();
|
|
2308
2306
|
}
|
|
2309
|
-
|
|
2310
|
-
this.
|
|
2311
|
-
this.applyFilterPredicate();
|
|
2307
|
+
get columns() {
|
|
2308
|
+
return this.columnsState();
|
|
2312
2309
|
}
|
|
2313
|
-
|
|
2314
|
-
this.
|
|
2315
|
-
this.applyFilterValue(this._filterValue);
|
|
2310
|
+
get columnIds() {
|
|
2311
|
+
return this.columnIdsState();
|
|
2316
2312
|
}
|
|
2317
|
-
|
|
2318
|
-
this.
|
|
2313
|
+
get rowActions() {
|
|
2314
|
+
return this.rowActionsState();
|
|
2319
2315
|
}
|
|
2320
|
-
|
|
2321
|
-
this.
|
|
2322
|
-
...this.page,
|
|
2323
|
-
pageSize: defaultSize,
|
|
2324
|
-
};
|
|
2316
|
+
get tableActions() {
|
|
2317
|
+
return this.tableActionsState();
|
|
2325
2318
|
}
|
|
2326
|
-
|
|
2327
|
-
this.
|
|
2319
|
+
get editableColumnDefinitions() {
|
|
2320
|
+
return this.editableColumnDefinitionsState();
|
|
2328
2321
|
}
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
* This function mixes up 2 responsibilities:
|
|
2332
|
-
* - determining if actions should be displayed / handled
|
|
2333
|
-
* - determining whether actions are row based (single) or table based (batch)
|
|
2334
|
-
* Please use a combination of "selectionEmitMode" and "selectionMode" instead:
|
|
2335
|
-
* - selectionEmitMode determines how selected items are handled (as part of actions, as selections or not at all)
|
|
2336
|
-
* - selectionMode determines if selected items are treated separately (single) or together (batch)
|
|
2337
|
-
*/
|
|
2338
|
-
set forceMode(selectionMode) {
|
|
2339
|
-
if (selectionMode === 'SINGLE' || selectionMode === 'BATCH') {
|
|
2340
|
-
this._selectionEmitMode = 'ON_ACTION';
|
|
2341
|
-
this._forceSelectionMode = selectionMode;
|
|
2342
|
-
this._selectionModel.clear();
|
|
2343
|
-
}
|
|
2322
|
+
get viewableColumnDefinitions() {
|
|
2323
|
+
return this.viewableColumnDefinitionsState();
|
|
2344
2324
|
}
|
|
2345
|
-
|
|
2346
|
-
this.
|
|
2347
|
-
this._selectionModel.clear();
|
|
2348
|
-
}
|
|
2349
|
-
set displayedColumns(cols) {
|
|
2350
|
-
if (!this.displayedColumnDefinition) {
|
|
2351
|
-
this.columns = cols ? [...cols] : [];
|
|
2352
|
-
this.columnIds = this.columns.map((column) => column.id);
|
|
2353
|
-
this.columnIds.unshift(this.ACTION_COLUMN_NAME);
|
|
2354
|
-
}
|
|
2355
|
-
}
|
|
2356
|
-
set displayedColumnDefinition(def) {
|
|
2357
|
-
this.columns = def.displayedColumns;
|
|
2358
|
-
this.columnIds = this.columns.map((column) => column.id);
|
|
2359
|
-
this.columnIds.unshift(this.ACTION_COLUMN_NAME);
|
|
2360
|
-
this._selectedColumnDefinition = def;
|
|
2361
|
-
}
|
|
2362
|
-
set columnDefinitions(definitions) {
|
|
2363
|
-
this.editableColumnDefinitions = [];
|
|
2364
|
-
this.viewableColumnDefinitions = [];
|
|
2365
|
-
this._allColumnDefinitions = [...definitions];
|
|
2366
|
-
for (const definition of definitions) {
|
|
2367
|
-
if (definition.editable) {
|
|
2368
|
-
this.editableColumnDefinitions.push(definition);
|
|
2369
|
-
}
|
|
2370
|
-
if (definition.displayedColumns?.length > 0) {
|
|
2371
|
-
this.viewableColumnDefinitions.push(definition);
|
|
2372
|
-
}
|
|
2373
|
-
}
|
|
2374
|
-
}
|
|
2375
|
-
set allColumns(allColumns) {
|
|
2376
|
-
this._allAvailableColumns = allColumns;
|
|
2377
|
-
if (allColumns && this._showColumnModal) {
|
|
2378
|
-
this.openColumnModal();
|
|
2379
|
-
}
|
|
2380
|
-
}
|
|
2381
|
-
// we need to have this as a setter due to the *ngIf it is in
|
|
2382
|
-
set matSort(matSort) {
|
|
2383
|
-
this._sort = matSort;
|
|
2384
|
-
this.dataSource.sort = this._sort;
|
|
2385
|
-
}
|
|
2386
|
-
set columnDefs(columnDefs) {
|
|
2387
|
-
this._columnDefs = columnDefs;
|
|
2388
|
-
this.changeDetectorRef.detectChanges();
|
|
2389
|
-
}
|
|
2390
|
-
get columnDefs() {
|
|
2391
|
-
return this._columnDefs;
|
|
2325
|
+
get pageIndex() {
|
|
2326
|
+
return this.pageIndexState();
|
|
2392
2327
|
}
|
|
2393
|
-
|
|
2394
|
-
this.
|
|
2395
|
-
this.changeDetectorRef.detectChanges();
|
|
2328
|
+
get pageSize() {
|
|
2329
|
+
return this.pageSizeState();
|
|
2396
2330
|
}
|
|
2397
|
-
get
|
|
2398
|
-
return this.
|
|
2331
|
+
get pageLength() {
|
|
2332
|
+
return this.pageLengthState();
|
|
2399
2333
|
}
|
|
2400
|
-
constructor(
|
|
2401
|
-
this.
|
|
2402
|
-
this.matDialog = matDialog;
|
|
2403
|
-
this.persistenceService = persistenceService;
|
|
2404
|
-
this.dataTableGlobalConfig = dataTableGlobalConfig;
|
|
2334
|
+
constructor() {
|
|
2335
|
+
this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
|
|
2405
2336
|
// Translations
|
|
2406
|
-
this.filterLabel = 'common.filter';
|
|
2407
|
-
this.filterPlaceholder = '';
|
|
2408
|
-
this.filterColumnsLabel = 'Filter';
|
|
2409
|
-
this.filterColumnsPlaceHolder = 'Filter available columns';
|
|
2410
|
-
this.showEmptyTable = false;
|
|
2411
|
-
this.noDataText = 'No matching data found';
|
|
2412
|
-
this.columnSettingsModalTitleLabel = 'Column settings';
|
|
2413
|
-
this.selectedLabel = 'Selected columns';
|
|
2414
|
-
this.availableLabel = 'Available columns';
|
|
2415
|
-
this.saveLabel = 'Save';
|
|
2416
|
-
this.deleteLabel = 'Delete';
|
|
2417
|
-
this.cancelLabel = 'Cancel';
|
|
2418
|
-
this.infoTextLabel = 'Drag and drop a column to select or reorder it.';
|
|
2419
|
-
this.
|
|
2420
|
-
this.
|
|
2421
|
-
|
|
2422
|
-
|
|
2423
|
-
|
|
2424
|
-
|
|
2425
|
-
|
|
2426
|
-
this.
|
|
2427
|
-
this.
|
|
2428
|
-
this.
|
|
2429
|
-
this.
|
|
2430
|
-
this.
|
|
2431
|
-
this.
|
|
2432
|
-
this.
|
|
2433
|
-
this.
|
|
2434
|
-
this.
|
|
2435
|
-
this.
|
|
2436
|
-
this.
|
|
2437
|
-
this.
|
|
2438
|
-
this.
|
|
2439
|
-
this.
|
|
2440
|
-
this.
|
|
2441
|
-
this.
|
|
2442
|
-
this.
|
|
2337
|
+
this.filterLabel = input('common.filter', ...(ngDevMode ? [{ debugName: "filterLabel" }] : []));
|
|
2338
|
+
this.filterPlaceholder = input('', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
|
|
2339
|
+
this.filterColumnsLabel = input('Filter', ...(ngDevMode ? [{ debugName: "filterColumnsLabel" }] : []));
|
|
2340
|
+
this.filterColumnsPlaceHolder = input('Filter available columns', ...(ngDevMode ? [{ debugName: "filterColumnsPlaceHolder" }] : []));
|
|
2341
|
+
this.showEmptyTable = input(false, ...(ngDevMode ? [{ debugName: "showEmptyTable" }] : []));
|
|
2342
|
+
this.noDataText = input('No matching data found', ...(ngDevMode ? [{ debugName: "noDataText" }] : []));
|
|
2343
|
+
this.columnSettingsModalTitleLabel = input('Column settings', ...(ngDevMode ? [{ debugName: "columnSettingsModalTitleLabel" }] : []));
|
|
2344
|
+
this.selectedLabel = input('Selected columns', ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
2345
|
+
this.availableLabel = input('Available columns', ...(ngDevMode ? [{ debugName: "availableLabel" }] : []));
|
|
2346
|
+
this.saveLabel = input('Save', ...(ngDevMode ? [{ debugName: "saveLabel" }] : []));
|
|
2347
|
+
this.deleteLabel = input('Delete', ...(ngDevMode ? [{ debugName: "deleteLabel" }] : []));
|
|
2348
|
+
this.cancelLabel = input('Cancel', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : []));
|
|
2349
|
+
this.infoTextLabel = input('Drag and drop a column to select or reorder it.', ...(ngDevMode ? [{ debugName: "infoTextLabel" }] : []));
|
|
2350
|
+
this.tableClass = input(...(ngDevMode ? [undefined, { debugName: "tableClass" }] : []));
|
|
2351
|
+
this.translateLabels = input(true, ...(ngDevMode ? [{ debugName: "translateLabels" }] : []));
|
|
2352
|
+
this.useAsync = input(false, ...(ngDevMode ? [{ debugName: "useAsync" }] : []));
|
|
2353
|
+
/**
|
|
2354
|
+
* @deprecated
|
|
2355
|
+
* Please use the more specific persistenceConfig instead
|
|
2356
|
+
*/
|
|
2357
|
+
this.stateful = input(undefined, ...(ngDevMode ? [{ debugName: "stateful" }] : []));
|
|
2358
|
+
this.persistenceConfig = input(undefined, { ...(ngDevMode ? { debugName: "persistenceConfig" } : {}), transform: persistenceConfigOrUndefined });
|
|
2359
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
2360
|
+
this.tableData = input(...(ngDevMode ? [undefined, { debugName: "tableData" }] : []));
|
|
2361
|
+
this.idGenerator = input(...(ngDevMode ? [undefined, { debugName: "idGenerator" }] : []));
|
|
2362
|
+
this.parentIdGenerator = input(...(ngDevMode ? [undefined, { debugName: "parentIdGenerator" }] : []));
|
|
2363
|
+
this.defaultSort = input(...(ngDevMode ? [undefined, { debugName: "defaultSort" }] : []));
|
|
2364
|
+
this.externalFilter = input(...(ngDevMode ? [undefined, { debugName: "externalFilter" }] : []));
|
|
2365
|
+
this.paginationEnabled = input(false, ...(ngDevMode ? [{ debugName: "paginationEnabled" }] : []));
|
|
2366
|
+
this.page = input(DEFAULT_PAGE, { ...(ngDevMode ? { debugName: "page" } : {}), transform: pageOrDefault });
|
|
2367
|
+
this.pageSizeOptions = input([5, 10, 15], { ...(ngDevMode ? { debugName: "pageSizeOptions" } : {}), transform: arrayOrEmpty });
|
|
2368
|
+
this.actions = input([], { ...(ngDevMode ? { debugName: "actions" } : {}), transform: arrayOrEmpty });
|
|
2369
|
+
this.selectionEmitType = input('ID', ...(ngDevMode ? [{ debugName: "selectionEmitType" }] : []));
|
|
2370
|
+
this.showDeleteFilterAction = input(true, ...(ngDevMode ? [{ debugName: "showDeleteFilterAction" }] : []));
|
|
2371
|
+
this.disableRowClick = input(false, ...(ngDevMode ? [{ debugName: "disableRowClick" }] : []));
|
|
2372
|
+
this.deleteDefinitionAllowed = input(false, ...(ngDevMode ? [{ debugName: "deleteDefinitionAllowed" }] : []));
|
|
2373
|
+
this.rowExpandable = input(() => true, ...(ngDevMode ? [{ debugName: "rowExpandable" }] : []));
|
|
2374
|
+
this.selection = input(...(ngDevMode ? [undefined, { debugName: "selection" }] : []));
|
|
2375
|
+
/**
|
|
2376
|
+
* @deprecated
|
|
2377
|
+
* Please use "filterMode" instead
|
|
2378
|
+
*/
|
|
2379
|
+
this.filterEnabled = input(undefined, ...(ngDevMode ? [{ debugName: "filterEnabled" }] : []));
|
|
2380
|
+
this.filterModeInput = input(undefined, { ...(ngDevMode ? { debugName: "filterModeInput" } : {}), alias: 'filterMode' });
|
|
2381
|
+
this.filterValueInput = input(undefined, { ...(ngDevMode ? { debugName: "filterValueInput" } : {}), alias: 'filterValue' });
|
|
2382
|
+
this.externalPaginator = input(...(ngDevMode ? [undefined, { debugName: "externalPaginator" }] : []));
|
|
2383
|
+
this.defaultPageSize = input(...(ngDevMode ? [undefined, { debugName: "defaultPageSize" }] : []));
|
|
2384
|
+
this.selectionEmitModeInput = input(undefined, { ...(ngDevMode ? { debugName: "selectionEmitModeInput" } : {}), alias: 'selectionEmitMode' });
|
|
2385
|
+
/**
|
|
2386
|
+
* @deprecated
|
|
2387
|
+
* This function mixes up 2 responsibilities:
|
|
2388
|
+
* - determining if actions should be displayed / handled
|
|
2389
|
+
* - determining whether actions are row based (single) or table based (batch)
|
|
2390
|
+
* Please use a combination of "selectionEmitMode" and "selectionMode" instead:
|
|
2391
|
+
* - selectionEmitMode determines how selected items are handled (as part of actions, as selections or not at all)
|
|
2392
|
+
* - selectionMode determines if selected items are treated separately (single) or together (batch)
|
|
2393
|
+
*/
|
|
2394
|
+
this.forceMode = input(...(ngDevMode ? [undefined, { debugName: "forceMode" }] : []));
|
|
2395
|
+
this.forceSelectionMode = input(...(ngDevMode ? [undefined, { debugName: "forceSelectionMode" }] : []));
|
|
2396
|
+
this.displayedColumnsInput = input(undefined, { ...(ngDevMode ? { debugName: "displayedColumnsInput" } : {}), alias: 'displayedColumns' });
|
|
2397
|
+
this.displayedColumnDefinition = input(...(ngDevMode ? [undefined, { debugName: "displayedColumnDefinition" }] : []));
|
|
2398
|
+
this.columnDefinitions = input([], { ...(ngDevMode ? { debugName: "columnDefinitions" } : {}), transform: arrayOrEmpty });
|
|
2399
|
+
this.allColumns = input(...(ngDevMode ? [undefined, { debugName: "allColumns" }] : []));
|
|
2400
|
+
this.actionEvent = output();
|
|
2401
|
+
this.selectionEvent = output();
|
|
2402
|
+
this.sortEvent = output();
|
|
2403
|
+
this.filterEvent = output();
|
|
2404
|
+
this.pageEvent = output();
|
|
2405
|
+
this.allColumnsEvent = output();
|
|
2406
|
+
this.columnDefinitionChangeEvent = output();
|
|
2407
|
+
this.viewDefinitionChangeEvent = output();
|
|
2408
|
+
this.paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
|
|
2409
|
+
this.matSort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "matSort" }] : []));
|
|
2410
|
+
this.filter = viewChild(DataTableFilter, ...(ngDevMode ? [{ debugName: "filter" }] : []));
|
|
2411
|
+
this.columnDefs = contentChildren(DataTableTemplateColumnDefinition, ...(ngDevMode ? [{ debugName: "columnDefs" }] : []));
|
|
2412
|
+
this.expandableDef = contentChild(DataTableTemplateExpandableCellDefinition, ...(ngDevMode ? [{ debugName: "expandableDef" }] : []));
|
|
2413
|
+
this.dataSource = new MatTableDataSource();
|
|
2443
2414
|
this.allSelected = false;
|
|
2444
2415
|
this.ACTION_COLUMN_NAME = '__action__';
|
|
2445
|
-
this.
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2416
|
+
this.effectivePersistenceConfig = computed(() => {
|
|
2417
|
+
const persistenceConfig = this.persistenceConfig();
|
|
2418
|
+
const stateful = this.stateful();
|
|
2419
|
+
if (persistenceConfig) {
|
|
2420
|
+
return persistenceConfig;
|
|
2421
|
+
}
|
|
2422
|
+
if (stateful !== undefined) {
|
|
2423
|
+
return {
|
|
2424
|
+
persistSort: stateful,
|
|
2425
|
+
persistFilter: stateful,
|
|
2426
|
+
persistPageSize: stateful,
|
|
2427
|
+
};
|
|
2428
|
+
}
|
|
2429
|
+
return DEFAULT_PERSISTENCE_CONFIG;
|
|
2430
|
+
}, ...(ngDevMode ? [{ debugName: "effectivePersistenceConfig" }] : []));
|
|
2431
|
+
this.filterModeState = computed(() => {
|
|
2432
|
+
const configuredFilterMode = this.filterModeInput();
|
|
2433
|
+
const filterEnabled = this.filterEnabled();
|
|
2434
|
+
const baseFilterMode = configuredFilterMode ?? (filterEnabled === undefined ? 'NONE' : filterEnabled ? 'TABLE_BASED' : 'NONE');
|
|
2435
|
+
return this.useAsync() && baseFilterMode === 'TABLE_BASED' ? 'NONE' : baseFilterMode;
|
|
2436
|
+
}, ...(ngDevMode ? [{ debugName: "filterModeState" }] : []));
|
|
2437
|
+
this.deprecatedForceSelectionMode = computed(() => {
|
|
2438
|
+
const forceMode = this.forceMode();
|
|
2439
|
+
return isDeprecatedForceSelectionMode(forceMode) ? forceMode : undefined;
|
|
2440
|
+
}, ...(ngDevMode ? [{ debugName: "deprecatedForceSelectionMode" }] : []));
|
|
2441
|
+
this.effectiveForceSelectionMode = computed(() => this.forceSelectionMode() ?? this.deprecatedForceSelectionMode(), ...(ngDevMode ? [{ debugName: "effectiveForceSelectionMode" }] : []));
|
|
2442
|
+
this.selectionModeState = computed(() => {
|
|
2443
|
+
const forcedMode = this.effectiveForceSelectionMode();
|
|
2444
|
+
if (forcedMode) {
|
|
2445
|
+
return forcedMode;
|
|
2446
|
+
}
|
|
2447
|
+
return this.actions().find((it) => it.type === 'BATCH') ? 'BATCH' : 'SINGLE';
|
|
2448
|
+
}, ...(ngDevMode ? [{ debugName: "selectionModeState" }] : []));
|
|
2449
|
+
this.selectionEmitModeState = computed(() => {
|
|
2450
|
+
const useDeprecatedForceModeEmitMode = !this.forceSelectionMode() && this.deprecatedForceSelectionMode();
|
|
2451
|
+
const configuredMode = this.selectionEmitModeInput() ?? (useDeprecatedForceModeEmitMode ? 'ON_ACTION' : 'NONE');
|
|
2452
|
+
return configuredMode === 'NONE' && this.actions().length ? 'ON_ACTION' : configuredMode;
|
|
2453
|
+
}, ...(ngDevMode ? [{ debugName: "selectionEmitModeState" }] : []));
|
|
2454
|
+
this.columnsState = computed(() => this.displayedColumnDefinition()?.displayedColumns ?? this.displayedColumnsInput() ?? [], ...(ngDevMode ? [{ debugName: "columnsState" }] : []));
|
|
2455
|
+
this.columnIdsState = computed(() => [this.ACTION_COLUMN_NAME, ...this.columnsState().map((column) => column.id)], ...(ngDevMode ? [{ debugName: "columnIdsState" }] : []));
|
|
2456
|
+
this.displayActions = computed(() => DataTableActionUtil.getDisplayActions(this.actions(), this.selectionModeState()), ...(ngDevMode ? [{ debugName: "displayActions" }] : []));
|
|
2457
|
+
this.rowActionsState = computed(() => this.displayActions().rowActions, ...(ngDevMode ? [{ debugName: "rowActionsState" }] : []));
|
|
2458
|
+
this.tableActionsState = computed(() => this.displayActions().groupedTableActions, ...(ngDevMode ? [{ debugName: "tableActionsState" }] : []));
|
|
2459
|
+
this.editableColumnDefinitionsState = computed(() => this.columnDefinitions().filter((definition) => definition.editable), ...(ngDevMode ? [{ debugName: "editableColumnDefinitionsState" }] : []));
|
|
2460
|
+
this.viewableColumnDefinitionsState = computed(() => this.columnDefinitions().filter((definition) => definition.displayedColumns?.length > 0), ...(ngDevMode ? [{ debugName: "viewableColumnDefinitionsState" }] : []));
|
|
2461
|
+
this.showAll = computed(() => !this.useAsync() && !this.paginationEnabled(), ...(ngDevMode ? [{ debugName: "showAll" }] : []));
|
|
2462
|
+
this.pageIndexState = computed(() => (this.showAll() ? 0 : this.pageState().pageIndex), ...(ngDevMode ? [{ debugName: "pageIndexState" }] : []));
|
|
2463
|
+
this.pageSizeState = computed(() => (this.showAll() ? this.dataLength() : this.pageState().pageSize), ...(ngDevMode ? [{ debugName: "pageSizeState" }] : []));
|
|
2464
|
+
this.pageLengthState = computed(() => (this.showAll() ? this.dataLength() : this.pageState().length), ...(ngDevMode ? [{ debugName: "pageLengthState" }] : []));
|
|
2449
2465
|
this._rowMap = new Map();
|
|
2450
2466
|
this._selectionModel = new SelectionModel(true);
|
|
2451
|
-
this.
|
|
2452
|
-
this.
|
|
2453
|
-
this.
|
|
2467
|
+
this._sort = null;
|
|
2468
|
+
this._pendingSort = null;
|
|
2469
|
+
this.pageState = signal(DEFAULT_PAGE, ...(ngDevMode ? [{ debugName: "pageState" }] : []));
|
|
2470
|
+
this.dataLength = signal(0, ...(ngDevMode ? [{ debugName: "dataLength" }] : []));
|
|
2471
|
+
this._filterValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_filterValue" }] : []));
|
|
2472
|
+
this.selectedColumnDefinition = signal(undefined, ...(ngDevMode ? [{ debugName: "selectedColumnDefinition" }] : []));
|
|
2454
2473
|
this._showColumnModal = false;
|
|
2455
|
-
this.
|
|
2474
|
+
this.changeDetectorRef = inject(ChangeDetectorRef);
|
|
2475
|
+
this.matDialog = inject(MatDialog);
|
|
2476
|
+
this.persistenceService = inject(MAD_DATA_TABLE_PERSISTENCE_SERVICE);
|
|
2477
|
+
this.dataTableGlobalConfig = inject(MAD_DATA_TABLE_GLOBAL_CONFIGURATION);
|
|
2478
|
+
this.registerSignalEffects();
|
|
2456
2479
|
}
|
|
2457
2480
|
ngAfterViewInit() {
|
|
2458
|
-
if (!this.
|
|
2459
|
-
this.dataSource.paginator = this.paginator;
|
|
2460
|
-
this.dataSource.sort = this._sort;
|
|
2481
|
+
if (!this.useAsync()) {
|
|
2482
|
+
this.dataSource.paginator = this.paginator() ?? null;
|
|
2483
|
+
this.dataSource.sort = this._sort ?? null;
|
|
2461
2484
|
}
|
|
2462
2485
|
this.applySortData();
|
|
2463
2486
|
this.initState();
|
|
2464
2487
|
}
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2488
|
+
registerSignalEffects() {
|
|
2489
|
+
this.registerMatSortEffect();
|
|
2490
|
+
this.registerUseAsyncEffect();
|
|
2491
|
+
this.registerExternalPaginatorEffect();
|
|
2492
|
+
this.registerPageInputEffect();
|
|
2493
|
+
this.registerFilterModeEffect();
|
|
2494
|
+
this.registerFilterValueEffect();
|
|
2495
|
+
this.registerDataInputEffect();
|
|
2496
|
+
this.registerSelectionInputEffect();
|
|
2497
|
+
this.registerDisplayedColumnDefinitionEffect();
|
|
2498
|
+
this.registerForceSelectionModeEffect();
|
|
2499
|
+
this.registerAllColumnsEffect();
|
|
2500
|
+
}
|
|
2501
|
+
registerMatSortEffect() {
|
|
2502
|
+
effect(() => {
|
|
2503
|
+
const matSort = this.matSort();
|
|
2504
|
+
if (!matSort) {
|
|
2505
|
+
return;
|
|
2471
2506
|
}
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
this.
|
|
2475
|
-
}
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
this.
|
|
2480
|
-
|
|
2481
|
-
}
|
|
2507
|
+
this._sort = matSort;
|
|
2508
|
+
this.dataSource.sort = matSort;
|
|
2509
|
+
untracked(() => this.applyPendingSort());
|
|
2510
|
+
});
|
|
2511
|
+
}
|
|
2512
|
+
registerUseAsyncEffect() {
|
|
2513
|
+
effect(() => {
|
|
2514
|
+
this.useAsync();
|
|
2515
|
+
untracked(() => this.applySortData());
|
|
2516
|
+
});
|
|
2517
|
+
}
|
|
2518
|
+
registerExternalPaginatorEffect() {
|
|
2519
|
+
effect(() => {
|
|
2520
|
+
this.extPaginator = this.externalPaginator();
|
|
2521
|
+
});
|
|
2522
|
+
}
|
|
2523
|
+
registerPageInputEffect() {
|
|
2524
|
+
effect(() => {
|
|
2525
|
+
const page = this.page();
|
|
2526
|
+
const defaultPageSize = this.defaultPageSize();
|
|
2527
|
+
this.pageState.set({
|
|
2528
|
+
...page,
|
|
2529
|
+
pageSize: defaultPageSize ?? page.pageSize,
|
|
2530
|
+
});
|
|
2531
|
+
});
|
|
2532
|
+
}
|
|
2533
|
+
registerFilterModeEffect() {
|
|
2534
|
+
effect(() => {
|
|
2535
|
+
this.filterModeState();
|
|
2536
|
+
untracked(() => this.applyFilterPredicate());
|
|
2537
|
+
});
|
|
2538
|
+
}
|
|
2539
|
+
registerFilterValueEffect() {
|
|
2540
|
+
effect(() => {
|
|
2541
|
+
const filterValue = this.filterValueInput();
|
|
2542
|
+
this._filterValue.set(filterValue);
|
|
2543
|
+
untracked(() => this.applyFilterValue(filterValue));
|
|
2544
|
+
});
|
|
2545
|
+
}
|
|
2546
|
+
registerDataInputEffect() {
|
|
2547
|
+
effect(() => {
|
|
2548
|
+
const tableData = this.tableData();
|
|
2549
|
+
const columns = this.columnsState();
|
|
2550
|
+
const idGenerator = this.idGenerator();
|
|
2551
|
+
const parentIdGenerator = this.parentIdGenerator();
|
|
2552
|
+
const showAll = this.showAll();
|
|
2553
|
+
untracked(() => {
|
|
2554
|
+
this.updateDataTableData(tableData, columns, idGenerator, parentIdGenerator);
|
|
2555
|
+
const selection = this.selection();
|
|
2556
|
+
this.updateSelectionModel(this.getSelection('ID').length ? this.getSelection('ID') : selection);
|
|
2557
|
+
if (showAll) {
|
|
2558
|
+
this.updatePaginator();
|
|
2559
|
+
}
|
|
2560
|
+
});
|
|
2561
|
+
});
|
|
2562
|
+
}
|
|
2563
|
+
registerSelectionInputEffect() {
|
|
2564
|
+
effect(() => {
|
|
2565
|
+
const selection = this.selection();
|
|
2566
|
+
untracked(() => this.updateSelectionModel(selection));
|
|
2567
|
+
});
|
|
2568
|
+
}
|
|
2569
|
+
registerDisplayedColumnDefinitionEffect() {
|
|
2570
|
+
effect(() => {
|
|
2571
|
+
const displayedColumnDefinition = this.displayedColumnDefinition();
|
|
2572
|
+
if (displayedColumnDefinition) {
|
|
2573
|
+
this.selectedColumnDefinition.set(displayedColumnDefinition);
|
|
2574
|
+
}
|
|
2575
|
+
});
|
|
2576
|
+
}
|
|
2577
|
+
registerForceSelectionModeEffect() {
|
|
2578
|
+
effect(() => {
|
|
2579
|
+
const nextMode = this.effectiveForceSelectionMode();
|
|
2580
|
+
if (this.previousForceSelectionMode !== nextMode) {
|
|
2581
|
+
this.previousForceSelectionMode = nextMode;
|
|
2582
|
+
untracked(() => {
|
|
2583
|
+
this._selectionModel.clear();
|
|
2584
|
+
const selection = this.selection();
|
|
2585
|
+
if (selection !== undefined) {
|
|
2586
|
+
this.updateSelectionModel(selection);
|
|
2587
|
+
}
|
|
2588
|
+
});
|
|
2589
|
+
}
|
|
2590
|
+
});
|
|
2591
|
+
}
|
|
2592
|
+
registerAllColumnsEffect() {
|
|
2593
|
+
effect(() => {
|
|
2594
|
+
const allColumns = this.allColumns();
|
|
2595
|
+
if (allColumns && this._showColumnModal) {
|
|
2596
|
+
untracked(() => this.openColumnModal());
|
|
2597
|
+
}
|
|
2598
|
+
});
|
|
2482
2599
|
}
|
|
2483
2600
|
/** TABLE DISPLAY HANDLING */
|
|
2484
2601
|
getDataTableHeaderType(column) {
|
|
@@ -2494,24 +2611,24 @@ class DataTableComponent {
|
|
|
2494
2611
|
return 'PLAIN';
|
|
2495
2612
|
}
|
|
2496
2613
|
getCustomCellTemplate(columnId) {
|
|
2497
|
-
const columnDef = this.
|
|
2614
|
+
const columnDef = this.columnDefs().find((it) => it.madColumnDef() === columnId);
|
|
2498
2615
|
return columnDef && columnDef.cellDef ? columnDef.cellDef.getCellTemplate() : null;
|
|
2499
2616
|
}
|
|
2500
2617
|
getCustomExpandableTemplate() {
|
|
2501
|
-
return this.
|
|
2618
|
+
return this.expandableDef()?.getCellTemplate() || null;
|
|
2502
2619
|
}
|
|
2503
2620
|
get expandableColumnDef() {
|
|
2504
|
-
return this.
|
|
2621
|
+
return this.expandableDef()?.columnDef.madExpandableColumnDef() || '';
|
|
2505
2622
|
}
|
|
2506
2623
|
onExpand(event, element) {
|
|
2507
|
-
if (this.rowExpandable(element)) {
|
|
2624
|
+
if (this.rowExpandable()(element)) {
|
|
2508
2625
|
this.expandedElement = this.expandedElement === element ? null : element;
|
|
2509
2626
|
}
|
|
2510
2627
|
event.stopPropagation();
|
|
2511
2628
|
}
|
|
2512
2629
|
/** ACTION BUTTON DISPLAY HANDLING */
|
|
2513
2630
|
hasVisibleRowActions(displayedData) {
|
|
2514
|
-
return !this.
|
|
2631
|
+
return !this.rowActionsState().every((action) => this.isHiddenForData(action, [this._rowMap.get(displayedData.rowId)?.actualData]));
|
|
2515
2632
|
}
|
|
2516
2633
|
isHidden(action) {
|
|
2517
2634
|
return this.isHiddenForData(action, this.getSelection('DATA'));
|
|
@@ -2543,10 +2660,11 @@ class DataTableComponent {
|
|
|
2543
2660
|
return this._selectionModel?.selected ? this._selectionModel.selected.length : 0;
|
|
2544
2661
|
}
|
|
2545
2662
|
/** TABLE DATA CHANGE HANDLING */
|
|
2546
|
-
updateDataTableData() {
|
|
2663
|
+
updateDataTableData(tableData = this.tableData(), columns = this.columnsState(), idGenerator = this.idGenerator(), parentIdGenerator = this.parentIdGenerator()) {
|
|
2547
2664
|
// do not make this function immutable - we desparately need the reference of rowMap to stay the same
|
|
2548
|
-
DataTableDataUtil.updateRowMap(this._rowMap,
|
|
2665
|
+
DataTableDataUtil.updateRowMap(this._rowMap, tableData, columns, idGenerator, parentIdGenerator);
|
|
2549
2666
|
this.dataSource.data = Array.from(this._rowMap.values()).map((it) => it.displayedData);
|
|
2667
|
+
this.dataLength.set(this.dataSource.data?.length || 0);
|
|
2550
2668
|
}
|
|
2551
2669
|
updateSelectionModel(selection) {
|
|
2552
2670
|
this._selectionModel.clear();
|
|
@@ -2559,30 +2677,27 @@ class DataTableComponent {
|
|
|
2559
2677
|
this.emitSelection();
|
|
2560
2678
|
}
|
|
2561
2679
|
/** ACTION & SELECTION HANDLING */
|
|
2562
|
-
get selectionEmitMode() {
|
|
2563
|
-
return this._selectionEmitMode === 'NONE' && !!this.actions.length ? 'ON_ACTION' : this._selectionEmitMode;
|
|
2564
|
-
}
|
|
2565
|
-
get selectionMode() {
|
|
2566
|
-
return !!this._forceSelectionMode ? this._forceSelectionMode : this.actions.find((it) => it.type === 'BATCH') ? 'BATCH' : 'SINGLE';
|
|
2567
|
-
}
|
|
2568
2680
|
// get filtered & sorted data of the current page
|
|
2569
2681
|
get displayedData() {
|
|
2570
2682
|
return this.dataSource?._pageData(this.dataSource?.sortData(this.dataSource.filteredData, this.dataSource.sort));
|
|
2571
2683
|
}
|
|
2572
2684
|
get showActionColumn() {
|
|
2573
|
-
return !(this.
|
|
2685
|
+
return !(this.selectionEmitModeState() === 'NONE' || this.hideActionColumn) || !!this.expandableDef();
|
|
2574
2686
|
}
|
|
2575
2687
|
showCheckbox(displayedData) {
|
|
2576
|
-
return !displayedData.parentId && this.
|
|
2688
|
+
return !displayedData.parentId && this.selectionModeState() === 'BATCH' && !this.hideActionColumn;
|
|
2577
2689
|
}
|
|
2578
2690
|
showRowActionIcon(displayedData) {
|
|
2579
|
-
return !displayedData.parentId &&
|
|
2691
|
+
return (!displayedData.parentId &&
|
|
2692
|
+
this.selectionEmitModeState() === 'ON_ACTION' &&
|
|
2693
|
+
this.selectionModeState() === 'SINGLE' &&
|
|
2694
|
+
!this.hideActionColumn);
|
|
2580
2695
|
}
|
|
2581
2696
|
showRadioButton(displayedData) {
|
|
2582
|
-
return !displayedData.parentId && this.
|
|
2697
|
+
return !displayedData.parentId && this.selectionEmitModeState() === 'ON_SELECTION' && this.selectionModeState() === 'SINGLE';
|
|
2583
2698
|
}
|
|
2584
2699
|
showExpandableButton(displayedData) {
|
|
2585
|
-
return !displayedData.parentId && !!this.
|
|
2700
|
+
return !displayedData.parentId && !!this.expandableDef() && this.rowExpandable()(displayedData);
|
|
2586
2701
|
}
|
|
2587
2702
|
isSelected(rowId) {
|
|
2588
2703
|
return this._selectionModel.isSelected(rowId);
|
|
@@ -2604,13 +2719,13 @@ class DataTableComponent {
|
|
|
2604
2719
|
}
|
|
2605
2720
|
onActionEvent(action) {
|
|
2606
2721
|
const emitAction = { ...action };
|
|
2607
|
-
if (!!emitAction && this.
|
|
2608
|
-
emitAction.selected = this.getSelection(this.selectionEmitType);
|
|
2722
|
+
if (!!emitAction && this.selectionEmitModeState() !== 'NONE') {
|
|
2723
|
+
emitAction.selected = this.getSelection(this.selectionEmitType());
|
|
2609
2724
|
this.actionEvent.emit(emitAction);
|
|
2610
2725
|
}
|
|
2611
2726
|
}
|
|
2612
2727
|
onSelectionEvent(id) {
|
|
2613
|
-
switch (this.
|
|
2728
|
+
switch (this.selectionModeState()) {
|
|
2614
2729
|
case 'BATCH':
|
|
2615
2730
|
this._selectionModel.toggle(id);
|
|
2616
2731
|
break;
|
|
@@ -2621,21 +2736,21 @@ class DataTableComponent {
|
|
|
2621
2736
|
}
|
|
2622
2737
|
}
|
|
2623
2738
|
onRowEvent(event, row, action = this.defaultAction) {
|
|
2624
|
-
if (this.
|
|
2739
|
+
if (this.selectionEmitModeState() === 'NONE' || row?.parentId) {
|
|
2625
2740
|
return;
|
|
2626
2741
|
}
|
|
2627
2742
|
this.onSelectionEvent(row.rowId);
|
|
2628
2743
|
this.processSelection(event, action);
|
|
2629
2744
|
}
|
|
2630
2745
|
get defaultAction() {
|
|
2631
|
-
return this.
|
|
2746
|
+
return this.selectionEmitModeState() !== 'NONE' ? this.rowActionsState()[0] : undefined;
|
|
2632
2747
|
}
|
|
2633
2748
|
get hideActionColumn() {
|
|
2634
|
-
return this.
|
|
2749
|
+
return this.selectionEmitModeState() === 'ON_ACTION' && this.actions().every((it) => it.type === 'NONE');
|
|
2635
2750
|
}
|
|
2636
2751
|
processSelection(event, action) {
|
|
2637
|
-
if (this.
|
|
2638
|
-
this.
|
|
2752
|
+
if (this.selectionEmitModeState() === 'ON_ACTION' &&
|
|
2753
|
+
this.selectionModeState() === 'SINGLE' &&
|
|
2639
2754
|
!!action &&
|
|
2640
2755
|
!DataTableComponent.isClickOnRowMenuIcon(event)) {
|
|
2641
2756
|
this.onActionEvent(action);
|
|
@@ -2643,15 +2758,15 @@ class DataTableComponent {
|
|
|
2643
2758
|
this.emitSelection();
|
|
2644
2759
|
}
|
|
2645
2760
|
emitSelection() {
|
|
2646
|
-
if (this.
|
|
2647
|
-
this.selectionEvent.emit(this.getSelection(this.selectionEmitType));
|
|
2761
|
+
if (this.selectionEmitModeState() === 'ON_SELECTION') {
|
|
2762
|
+
this.selectionEvent.emit(this.getSelection(this.selectionEmitType()));
|
|
2648
2763
|
}
|
|
2649
2764
|
}
|
|
2650
2765
|
getSelection(selectionEmitType) {
|
|
2651
2766
|
const selection = [];
|
|
2652
2767
|
this._selectionModel.selected.forEach((it) =>
|
|
2653
2768
|
// if ID-generator is provided, return the ID, else return the ACTUAL data
|
|
2654
|
-
selection.push(this.idGenerator && selectionEmitType === 'ID' ? it : this._rowMap.get(it)?.actualData));
|
|
2769
|
+
selection.push(this.idGenerator() && selectionEmitType === 'ID' ? it : this._rowMap.get(it)?.actualData));
|
|
2655
2770
|
return selection;
|
|
2656
2771
|
}
|
|
2657
2772
|
static isClickOnRowMenuIcon(event) {
|
|
@@ -2659,22 +2774,19 @@ class DataTableComponent {
|
|
|
2659
2774
|
}
|
|
2660
2775
|
/** SORT HANDLING */
|
|
2661
2776
|
onSortingEvent(sort) {
|
|
2662
|
-
if (this.
|
|
2777
|
+
if (this.useAsync()) {
|
|
2663
2778
|
this.sortEvent.emit(sort);
|
|
2664
2779
|
}
|
|
2665
|
-
if (this.
|
|
2666
|
-
this.persistenceService.saveSort(this.id, sort);
|
|
2780
|
+
if (this.effectivePersistenceConfig().persistSort) {
|
|
2781
|
+
this.persistenceService.saveSort(this.id(), sort);
|
|
2667
2782
|
}
|
|
2668
2783
|
}
|
|
2669
2784
|
applySortData() {
|
|
2670
|
-
this.dataSource.sortData = this.
|
|
2785
|
+
this.dataSource.sortData = this.useAsync()
|
|
2671
2786
|
? DataTableSortUtil.sortNothing()
|
|
2672
2787
|
: DataTableSortUtil.sortData([...this.dataTableGlobalConfig.dateTimeFormat], this.dataTableGlobalConfig.numberFormat);
|
|
2673
2788
|
}
|
|
2674
2789
|
/** FILTER HANDLING */
|
|
2675
|
-
get filterMode() {
|
|
2676
|
-
return this._useAsync && this._filterMode === 'TABLE_BASED' ? 'NONE' : this._filterMode;
|
|
2677
|
-
}
|
|
2678
2790
|
onTableBasedFilterEvent(event) {
|
|
2679
2791
|
this.onFilteringEvent(event.target.value);
|
|
2680
2792
|
}
|
|
@@ -2683,10 +2795,10 @@ class DataTableComponent {
|
|
|
2683
2795
|
}
|
|
2684
2796
|
onDeleteFilter() {
|
|
2685
2797
|
this.onFilteringEvent(undefined);
|
|
2686
|
-
this.filter
|
|
2798
|
+
this.filter()?.updateFilterables(undefined);
|
|
2687
2799
|
}
|
|
2688
2800
|
onFilteringEvent(filter) {
|
|
2689
|
-
if (this.
|
|
2801
|
+
if (this.useAsync()) {
|
|
2690
2802
|
this.filterEvent.emit(filter);
|
|
2691
2803
|
}
|
|
2692
2804
|
else {
|
|
@@ -2694,103 +2806,104 @@ class DataTableComponent {
|
|
|
2694
2806
|
this._selectionModel.clear();
|
|
2695
2807
|
this.applyFilterValue(filter);
|
|
2696
2808
|
}
|
|
2697
|
-
if (this.
|
|
2698
|
-
this.persistenceService.saveFilter(this.id, filter);
|
|
2809
|
+
if (this.effectivePersistenceConfig().persistFilter) {
|
|
2810
|
+
this.persistenceService.saveFilter(this.id(), filter);
|
|
2699
2811
|
}
|
|
2700
2812
|
}
|
|
2701
2813
|
applyFilterPredicate() {
|
|
2702
2814
|
this.dataSource.filterPredicate =
|
|
2703
|
-
this.
|
|
2815
|
+
this.filterModeState() === 'COLUMN_BASED'
|
|
2704
2816
|
? DataTableFilterUtil.columnBasedFilterPredicate(this._rowMap)
|
|
2705
2817
|
: DataTableFilterUtil.tableBasedFilterPredicate();
|
|
2706
|
-
this.applyFilterValue(this._filterValue);
|
|
2818
|
+
this.applyFilterValue(this._filterValue());
|
|
2707
2819
|
}
|
|
2708
2820
|
applyFilterValue(value) {
|
|
2709
|
-
const isString = typeof
|
|
2821
|
+
const isString = typeof value === 'string';
|
|
2710
2822
|
this.dataSource.filter = !!value ? (isString ? value.trim().toLowerCase() : JSON.stringify(value)) : '';
|
|
2711
2823
|
}
|
|
2712
2824
|
/** PAGINATION HANDLING */
|
|
2713
2825
|
onPageEvent(event) {
|
|
2714
|
-
if (this.
|
|
2826
|
+
if (this.useAsync()) {
|
|
2715
2827
|
this.pageEvent.emit(event);
|
|
2716
2828
|
}
|
|
2717
|
-
if (this.
|
|
2718
|
-
this.persistenceService.savePageSize(this.id, event.pageSize);
|
|
2829
|
+
if (this.effectivePersistenceConfig().persistPageSize) {
|
|
2830
|
+
this.persistenceService.savePageSize(this.id(), event.pageSize);
|
|
2719
2831
|
}
|
|
2720
2832
|
}
|
|
2721
|
-
get pageIndex() {
|
|
2722
|
-
return this.showAll ? 0 : this.page.pageIndex;
|
|
2723
|
-
}
|
|
2724
|
-
get pageSize() {
|
|
2725
|
-
return this.showAll ? this.dataLength : this.page.pageSize;
|
|
2726
|
-
}
|
|
2727
|
-
get pageLength() {
|
|
2728
|
-
return this.showAll ? this.dataLength : this.page.length;
|
|
2729
|
-
}
|
|
2730
2833
|
updatePaginator() {
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2834
|
+
const paginator = this.paginator();
|
|
2835
|
+
if (paginator) {
|
|
2836
|
+
paginator.pageSize = this.pageSizeState();
|
|
2837
|
+
paginator.page.emit(this.pageState());
|
|
2734
2838
|
}
|
|
2735
2839
|
}
|
|
2736
|
-
get dataLength() {
|
|
2737
|
-
return this.dataSource.data?.length || 0;
|
|
2738
|
-
}
|
|
2739
|
-
get showAll() {
|
|
2740
|
-
return !this._useAsync && !this.paginationEnabled;
|
|
2741
|
-
}
|
|
2742
2840
|
/** INIT STATE */
|
|
2743
2841
|
initState() {
|
|
2842
|
+
const defaultSort = this.defaultSort();
|
|
2843
|
+
const persistenceConfig = this.effectivePersistenceConfig();
|
|
2744
2844
|
// only set default sort if there is no other sort persisted
|
|
2745
|
-
if (!!
|
|
2746
|
-
this.setSort(
|
|
2845
|
+
if (!!defaultSort && !this.persistenceService.loadSort(this.id())?.direction) {
|
|
2846
|
+
this.setSort(defaultSort);
|
|
2747
2847
|
}
|
|
2748
|
-
if (
|
|
2848
|
+
if (persistenceConfig.persistSort) {
|
|
2749
2849
|
this.initSortState();
|
|
2750
2850
|
}
|
|
2751
|
-
if (
|
|
2851
|
+
if (persistenceConfig.persistFilter) {
|
|
2752
2852
|
this.initFilterState();
|
|
2753
2853
|
}
|
|
2754
|
-
if (!!this._filterValue && typeof this._filterValue !== 'string') {
|
|
2755
|
-
this.filter
|
|
2854
|
+
if (!!this._filterValue() && typeof this._filterValue() !== 'string') {
|
|
2855
|
+
this.filter()?.updateFilterables(this._filterValue());
|
|
2756
2856
|
}
|
|
2757
|
-
if (
|
|
2857
|
+
if (persistenceConfig.persistPageSize) {
|
|
2758
2858
|
this.initPaginatorState();
|
|
2759
2859
|
}
|
|
2760
2860
|
this.changeDetectorRef.detectChanges();
|
|
2761
2861
|
}
|
|
2762
2862
|
initSortState() {
|
|
2763
|
-
const sort = this.persistenceService.loadSort(this.id);
|
|
2863
|
+
const sort = this.persistenceService.loadSort(this.id());
|
|
2764
2864
|
if (!!sort) {
|
|
2765
2865
|
this.setSort(sort);
|
|
2766
2866
|
}
|
|
2767
2867
|
}
|
|
2768
2868
|
setSort(sort) {
|
|
2869
|
+
if (!this._sort) {
|
|
2870
|
+
this._pendingSort = sort;
|
|
2871
|
+
return;
|
|
2872
|
+
}
|
|
2873
|
+
this._pendingSort = null;
|
|
2769
2874
|
this._sort.active = sort.active;
|
|
2770
2875
|
this._sort.direction = sort.direction;
|
|
2771
2876
|
this._sort.sortChange.emit(sort);
|
|
2772
2877
|
}
|
|
2878
|
+
applyPendingSort() {
|
|
2879
|
+
const pendingSort = this._pendingSort;
|
|
2880
|
+
if (pendingSort) {
|
|
2881
|
+
this.setSort(pendingSort);
|
|
2882
|
+
}
|
|
2883
|
+
}
|
|
2773
2884
|
initFilterState() {
|
|
2774
|
-
const filter = this.persistenceService.loadFilter(this.id);
|
|
2775
|
-
this.filter
|
|
2885
|
+
const filter = this.persistenceService.loadFilter(this.id());
|
|
2886
|
+
this.filter()?.updateFilterables(filter);
|
|
2887
|
+
this._filterValue.set(filter);
|
|
2888
|
+
this.applyFilterValue(filter);
|
|
2776
2889
|
}
|
|
2777
2890
|
initPaginatorState() {
|
|
2778
|
-
this.
|
|
2891
|
+
this.pageState.set({
|
|
2779
2892
|
pageIndex: 0,
|
|
2780
|
-
pageSize: this.persistenceService.loadPageSize(this.id) || this.
|
|
2893
|
+
pageSize: this.persistenceService.loadPageSize(this.id()) || this.pageSizeState(),
|
|
2781
2894
|
length: 0,
|
|
2782
|
-
};
|
|
2895
|
+
});
|
|
2783
2896
|
this.updatePaginator();
|
|
2784
2897
|
}
|
|
2785
2898
|
/** COLUMN HANDLING */
|
|
2786
2899
|
onViewDefinition(definition) {
|
|
2787
|
-
this.
|
|
2900
|
+
this.selectedColumnDefinition.set(definition);
|
|
2788
2901
|
this.viewDefinitionChangeEvent.emit(definition);
|
|
2789
2902
|
}
|
|
2790
2903
|
onColumnSettings(definition) {
|
|
2791
2904
|
this._showColumnModal = true;
|
|
2792
|
-
this.
|
|
2793
|
-
if (this.
|
|
2905
|
+
this.selectedColumnDefinition.set(definition ? definition : this.columnDefinitions()[0]);
|
|
2906
|
+
if (this.allColumns()) {
|
|
2794
2907
|
this.openColumnModal();
|
|
2795
2908
|
}
|
|
2796
2909
|
else {
|
|
@@ -2799,25 +2912,29 @@ class DataTableComponent {
|
|
|
2799
2912
|
}
|
|
2800
2913
|
}
|
|
2801
2914
|
isCurrentDefinition(definition) {
|
|
2802
|
-
return this.
|
|
2915
|
+
return this.selectedColumnDefinition()?.id === definition.id;
|
|
2803
2916
|
}
|
|
2804
2917
|
openColumnModal() {
|
|
2805
2918
|
const dialogData = {
|
|
2806
|
-
allColumns: this.
|
|
2807
|
-
definition: this.
|
|
2808
|
-
deleteDefinitionAllowed: this.deleteDefinitionAllowed,
|
|
2809
|
-
filterColumnsLabel: this.filterColumnsLabel,
|
|
2810
|
-
filterColumnsPlaceHolder: this.filterColumnsPlaceHolder,
|
|
2811
|
-
noDataText: this.noDataText,
|
|
2812
|
-
titleLabel: this.columnSettingsModalTitleLabel,
|
|
2813
|
-
selectedLabel: this.selectedLabel,
|
|
2814
|
-
availableLabel: this.availableLabel,
|
|
2815
|
-
saveLabel: this.saveLabel,
|
|
2816
|
-
deleteLabel: this.deleteLabel,
|
|
2817
|
-
cancelLabel: this.cancelLabel,
|
|
2818
|
-
infoTextLabel: this.infoTextLabel,
|
|
2919
|
+
allColumns: this.allColumns() ?? [],
|
|
2920
|
+
definition: this.selectedColumnDefinition(),
|
|
2921
|
+
deleteDefinitionAllowed: this.deleteDefinitionAllowed(),
|
|
2922
|
+
filterColumnsLabel: this.filterColumnsLabel(),
|
|
2923
|
+
filterColumnsPlaceHolder: this.filterColumnsPlaceHolder(),
|
|
2924
|
+
noDataText: this.noDataText(),
|
|
2925
|
+
titleLabel: this.columnSettingsModalTitleLabel(),
|
|
2926
|
+
selectedLabel: this.selectedLabel(),
|
|
2927
|
+
availableLabel: this.availableLabel(),
|
|
2928
|
+
saveLabel: this.saveLabel(),
|
|
2929
|
+
deleteLabel: this.deleteLabel(),
|
|
2930
|
+
cancelLabel: this.cancelLabel(),
|
|
2931
|
+
infoTextLabel: this.infoTextLabel(),
|
|
2819
2932
|
};
|
|
2820
|
-
const dialog = this.matDialog.open(DataTableColumnsModalComponent, {
|
|
2933
|
+
const dialog = this.matDialog.open(DataTableColumnsModalComponent, {
|
|
2934
|
+
data: dialogData,
|
|
2935
|
+
width: '720px',
|
|
2936
|
+
maxWidth: 'calc(100vw - 32px)',
|
|
2937
|
+
});
|
|
2821
2938
|
dialog.afterClosed().subscribe((result) => {
|
|
2822
2939
|
// no event on CANCEL
|
|
2823
2940
|
if (result) {
|
|
@@ -2826,33 +2943,21 @@ class DataTableComponent {
|
|
|
2826
2943
|
});
|
|
2827
2944
|
}
|
|
2828
2945
|
getFilterBadgeContent() {
|
|
2829
|
-
if (this.
|
|
2830
|
-
const count = this.filter?.getActiveFilterCount();
|
|
2946
|
+
if (this.filterModeState() === 'COLUMN_BASED') {
|
|
2947
|
+
const count = this.filter()?.getActiveFilterCount();
|
|
2831
2948
|
return count > 0 ? count.toString() : undefined;
|
|
2832
2949
|
}
|
|
2833
2950
|
return undefined;
|
|
2834
2951
|
}
|
|
2835
2952
|
disableDeleteFilterButton() {
|
|
2836
|
-
return this.filter?.getActiveFilterCount() === 0;
|
|
2837
|
-
}
|
|
2838
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, deps: [
|
|
2839
|
-
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: [
|
|
2840
|
-
trigger('detailExpand', [
|
|
2841
|
-
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
2842
|
-
state('expanded', style({ height: '*' })),
|
|
2843
|
-
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
2844
|
-
]),
|
|
2845
|
-
] }); }
|
|
2953
|
+
return this.filter()?.getActiveFilterCount() === 0;
|
|
2954
|
+
}
|
|
2955
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: DataTableComponent, isStandalone: true, selector: "mad-data-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, filterColumnsLabel: { classPropertyName: "filterColumnsLabel", publicName: "filterColumnsLabel", isSignal: true, isRequired: false, transformFunction: null }, filterColumnsPlaceHolder: { classPropertyName: "filterColumnsPlaceHolder", publicName: "filterColumnsPlaceHolder", isSignal: true, isRequired: false, transformFunction: null }, showEmptyTable: { classPropertyName: "showEmptyTable", publicName: "showEmptyTable", isSignal: true, isRequired: false, transformFunction: null }, noDataText: { classPropertyName: "noDataText", publicName: "noDataText", isSignal: true, isRequired: false, transformFunction: null }, columnSettingsModalTitleLabel: { classPropertyName: "columnSettingsModalTitleLabel", publicName: "columnSettingsModalTitleLabel", isSignal: true, isRequired: false, transformFunction: null }, selectedLabel: { classPropertyName: "selectedLabel", publicName: "selectedLabel", isSignal: true, isRequired: false, transformFunction: null }, availableLabel: { classPropertyName: "availableLabel", publicName: "availableLabel", isSignal: true, isRequired: false, transformFunction: null }, saveLabel: { classPropertyName: "saveLabel", publicName: "saveLabel", isSignal: true, isRequired: false, transformFunction: null }, deleteLabel: { classPropertyName: "deleteLabel", publicName: "deleteLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, infoTextLabel: { classPropertyName: "infoTextLabel", publicName: "infoTextLabel", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, translateLabels: { classPropertyName: "translateLabels", publicName: "translateLabels", isSignal: true, isRequired: false, transformFunction: null }, useAsync: { classPropertyName: "useAsync", publicName: "useAsync", isSignal: true, isRequired: false, transformFunction: null }, stateful: { classPropertyName: "stateful", publicName: "stateful", isSignal: true, isRequired: false, transformFunction: null }, persistenceConfig: { classPropertyName: "persistenceConfig", publicName: "persistenceConfig", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, tableData: { classPropertyName: "tableData", publicName: "tableData", isSignal: true, isRequired: false, transformFunction: null }, idGenerator: { classPropertyName: "idGenerator", publicName: "idGenerator", isSignal: true, isRequired: false, transformFunction: null }, parentIdGenerator: { classPropertyName: "parentIdGenerator", publicName: "parentIdGenerator", isSignal: true, isRequired: false, transformFunction: null }, defaultSort: { classPropertyName: "defaultSort", publicName: "defaultSort", isSignal: true, isRequired: false, transformFunction: null }, externalFilter: { classPropertyName: "externalFilter", publicName: "externalFilter", isSignal: true, isRequired: false, transformFunction: null }, paginationEnabled: { classPropertyName: "paginationEnabled", publicName: "paginationEnabled", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, selectionEmitType: { classPropertyName: "selectionEmitType", publicName: "selectionEmitType", isSignal: true, isRequired: false, transformFunction: null }, showDeleteFilterAction: { classPropertyName: "showDeleteFilterAction", publicName: "showDeleteFilterAction", isSignal: true, isRequired: false, transformFunction: null }, disableRowClick: { classPropertyName: "disableRowClick", publicName: "disableRowClick", isSignal: true, isRequired: false, transformFunction: null }, deleteDefinitionAllowed: { classPropertyName: "deleteDefinitionAllowed", publicName: "deleteDefinitionAllowed", isSignal: true, isRequired: false, transformFunction: null }, rowExpandable: { classPropertyName: "rowExpandable", publicName: "rowExpandable", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, filterEnabled: { classPropertyName: "filterEnabled", publicName: "filterEnabled", isSignal: true, isRequired: false, transformFunction: null }, filterModeInput: { classPropertyName: "filterModeInput", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, filterValueInput: { classPropertyName: "filterValueInput", publicName: "filterValue", isSignal: true, isRequired: false, transformFunction: null }, externalPaginator: { classPropertyName: "externalPaginator", publicName: "externalPaginator", isSignal: true, isRequired: false, transformFunction: null }, defaultPageSize: { classPropertyName: "defaultPageSize", publicName: "defaultPageSize", isSignal: true, isRequired: false, transformFunction: null }, selectionEmitModeInput: { classPropertyName: "selectionEmitModeInput", publicName: "selectionEmitMode", isSignal: true, isRequired: false, transformFunction: null }, forceMode: { classPropertyName: "forceMode", publicName: "forceMode", isSignal: true, isRequired: false, transformFunction: null }, forceSelectionMode: { classPropertyName: "forceSelectionMode", publicName: "forceSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnsInput: { classPropertyName: "displayedColumnsInput", publicName: "displayedColumns", isSignal: true, isRequired: false, transformFunction: null }, displayedColumnDefinition: { classPropertyName: "displayedColumnDefinition", publicName: "displayedColumnDefinition", isSignal: true, isRequired: false, transformFunction: null }, columnDefinitions: { classPropertyName: "columnDefinitions", publicName: "columnDefinitions", isSignal: true, isRequired: false, transformFunction: null }, allColumns: { classPropertyName: "allColumns", publicName: "allColumns", isSignal: true, isRequired: false, transformFunction: null } }, 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: "columnDefs", predicate: DataTableTemplateColumnDefinition, isSignal: true }, { propertyName: "expandableDef", first: true, predicate: DataTableTemplateExpandableCellDefinition, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }, { propertyName: "matSort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "filter", first: true, predicate: DataTableFilter, descendants: true, isSignal: true }], ngImport: i0, template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar flex justify-between items-baseline\">\n <!-- Table actions: displayed before the table -->\n @if (tableActionsState().length || (filterModeState() === 'COLUMN_BASED' && showDeleteFilterAction())) {\n <div>\n @for (actionGroup of tableActionsState(); track actionGroup) {\n <mad-button-group class=\"table-action-group inline-flex align-middle mr-[0.5em] mb-[0.5em] mt-[0.5em]\">\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 (filterModeState() === 'COLUMN_BASED' && showDeleteFilterAction()) {\n <mad-button-group class=\"table-action-group inline-flex align-middle mr-[0.5em] mb-[0.5em] mt-[0.5em]\">\n <button\n matIconButton\n [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n [attr.aria-label]=\"'common.filter.delete.tooltip' | translate\"\n matBadgeColor=\"warn\"\n [matBadge]=\"getFilterBadgeContent()\"\n [disabled]=\"disableDeleteFilterButton()\"\n class=\"delete-filter-action mat-primary align-middle\"\n (click)=\"onDeleteFilter()\"\n >\n <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\"> filter_alt_off </mat-icon>\n </button>\n </mad-button-group>\n }\n </div>\n }\n @if (filterModeState() === '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 rowActionsState(); 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 editableColumnDefinitionsState(); 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 viewableColumnDefinitionsState(); 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 (filterModeState() === 'COLUMN_BASED' || showEmptyTable() || !!dataSource.filteredData?.length) {\n <div class=\"datatable overflow-auto flex-auto h-full relative w-full\" [class]=\"tableClass()\">\n @if (loading()) {\n <div\n class=\"mad-datatable-spinner-wrapper bg-(--datatable-background) opacity-80 absolute inset-0 w-full h-full flex justify-center items-center z-[99999] [pointer-events:unset]\"\n >\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 (selectionEmitModeState() !== 'NONE' && selectionModeState() === 'BATCH') {\n <div class=\"mad-datatable-checkbox-container mx-2\">\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 mx-2\" (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 mx-2\" (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 columnsState(); 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]=\"columnsState().length + 1\">\n <div class=\"mad-data-table-expandable-area\" [class.mad-data-table-expandable-area-expanded]=\"element === expandedElement\">\n <div class=\"mad-data-table-expandable-content\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <!-- header row where cells will be injected -->\n <tr mat-header-row *matHeaderRowDef=\"columnIdsState()\"></tr>\n <!-- data row where cells will be injected -->\n <tr\n mat-row\n [class.clickable-table-row]=\"!row.parentId && selectionEmitModeState() !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIdsState()\"\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 w-full text-center relative pt-2.5\" [attr.colspan]=\"columnIdsState().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 w-full text-center relative\">\n @if (loading()) {\n <div\n class=\"mad-datatable-spinner-wrapper bg-(--datatable-background) opacity-80 absolute inset-0 w-full h-full flex justify-center items-center z-[99999] [pointer-events:unset]\"\n >\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 flex flex-row\">\n <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area flex flex-1\">\n <!-- column settings: 1 definition -->\n @if (editableColumnDefinitionsState().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 (editableColumnDefinitionsState().length > 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 (viewableColumnDefinitionsState().length > 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]=\"pageLengthState()\"\n [pageIndex]=\"pageIndexState()\"\n [pageSize]=\"pageSizeState()\"\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 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}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.text-right{text-align:right!important;padding-right:24px!important}.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:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);width:100%}.mad-data-table-expandable-area.mad-data-table-expandable-area-expanded{grid-template-rows:1fr}.mad-data-table-expandable-content{min-height:0;min-width:0;overflow:hidden;visibility:hidden;width:100%;transition:visibility 225ms cubic-bezier(.4,0,.2,1)}.mad-data-table-expandable-area-expanded>.mad-data-table-expandable-content{visibility:visible}@media(prefers-reduced-motion:reduce){.mad-data-table-expandable-area,.mad-data-table-expandable-content{transition:none}}.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)}::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: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i9.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i9.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i10.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: i14.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: i15.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: i16.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" }] }); }
|
|
2846
2957
|
}
|
|
2847
2958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: DataTableComponent, decorators: [{
|
|
2848
2959
|
type: Component,
|
|
2849
|
-
args: [{ selector: 'mad-data-table',
|
|
2850
|
-
trigger('detailExpand', [
|
|
2851
|
-
state('collapsed,void', style({ height: '0px', minHeight: '0' })),
|
|
2852
|
-
state('expanded', style({ height: '*' })),
|
|
2853
|
-
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
2854
|
-
]),
|
|
2855
|
-
], imports: [
|
|
2960
|
+
args: [{ selector: 'mad-data-table', imports: [
|
|
2856
2961
|
CommonModule,
|
|
2857
2962
|
MatButtonModule,
|
|
2858
2963
|
MatIconModule,
|
|
@@ -2873,139 +2978,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
2873
2978
|
DataTableFilterHeader,
|
|
2874
2979
|
DataTableFilter,
|
|
2875
2980
|
MatTooltip,
|
|
2876
|
-
], 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"] }]
|
|
2877
|
-
}], ctorParameters: () => [{ type: i0.
|
|
2878
|
-
type: Inject,
|
|
2879
|
-
args: [MAD_DATA_TABLE_PERSISTENCE_SERVICE]
|
|
2880
|
-
}] }, { type: undefined, decorators: [{
|
|
2881
|
-
type: Inject,
|
|
2882
|
-
args: [MAD_DATA_TABLE_GLOBAL_CONFIGURATION]
|
|
2883
|
-
}] }], propDecorators: { id: [{
|
|
2884
|
-
type: Input
|
|
2885
|
-
}], filterLabel: [{
|
|
2886
|
-
type: Input
|
|
2887
|
-
}], filterPlaceholder: [{
|
|
2888
|
-
type: Input
|
|
2889
|
-
}], filterColumnsLabel: [{
|
|
2890
|
-
type: Input
|
|
2891
|
-
}], filterColumnsPlaceHolder: [{
|
|
2892
|
-
type: Input
|
|
2893
|
-
}], showEmptyTable: [{
|
|
2894
|
-
type: Input
|
|
2895
|
-
}], noDataText: [{
|
|
2896
|
-
type: Input
|
|
2897
|
-
}], columnSettingsModalTitleLabel: [{
|
|
2898
|
-
type: Input
|
|
2899
|
-
}], selectedLabel: [{
|
|
2900
|
-
type: Input
|
|
2901
|
-
}], availableLabel: [{
|
|
2902
|
-
type: Input
|
|
2903
|
-
}], saveLabel: [{
|
|
2904
|
-
type: Input
|
|
2905
|
-
}], deleteLabel: [{
|
|
2906
|
-
type: Input
|
|
2907
|
-
}], cancelLabel: [{
|
|
2908
|
-
type: Input
|
|
2909
|
-
}], infoTextLabel: [{
|
|
2910
|
-
type: Input
|
|
2911
|
-
}], tableClass: [{
|
|
2912
|
-
type: Input
|
|
2913
|
-
}], translateLabels: [{
|
|
2914
|
-
type: Input
|
|
2915
|
-
}], useAsync: [{
|
|
2916
|
-
type: Input
|
|
2917
|
-
}], stateful: [{
|
|
2918
|
-
type: Input
|
|
2919
|
-
}], persistenceConfig: [{
|
|
2920
|
-
type: Input
|
|
2921
|
-
}], loading: [{
|
|
2922
|
-
type: Input
|
|
2923
|
-
}], tableData: [{
|
|
2924
|
-
type: Input
|
|
2925
|
-
}], idGenerator: [{
|
|
2926
|
-
type: Input
|
|
2927
|
-
}], parentIdGenerator: [{
|
|
2928
|
-
type: Input
|
|
2929
|
-
}], defaultSort: [{
|
|
2930
|
-
type: Input
|
|
2931
|
-
}], externalFilter: [{
|
|
2932
|
-
type: Input
|
|
2933
|
-
}], paginationEnabled: [{
|
|
2934
|
-
type: Input
|
|
2935
|
-
}], page: [{
|
|
2936
|
-
type: Input
|
|
2937
|
-
}], pageSizeOptions: [{
|
|
2938
|
-
type: Input
|
|
2939
|
-
}], actions: [{
|
|
2940
|
-
type: Input
|
|
2941
|
-
}], selectionEmitType: [{
|
|
2942
|
-
type: Input
|
|
2943
|
-
}], showDeleteFilterAction: [{
|
|
2944
|
-
type: Input
|
|
2945
|
-
}], disableRowClick: [{
|
|
2946
|
-
type: Input
|
|
2947
|
-
}], deleteDefinitionAllowed: [{
|
|
2948
|
-
type: Input
|
|
2949
|
-
}], rowExpandable: [{
|
|
2950
|
-
type: Input
|
|
2951
|
-
}], selection: [{
|
|
2952
|
-
type: Input
|
|
2953
|
-
}], filterEnabled: [{
|
|
2954
|
-
type: Input
|
|
2955
|
-
}], filterMode: [{
|
|
2956
|
-
type: Input
|
|
2957
|
-
}], filterValue: [{
|
|
2958
|
-
type: Input
|
|
2959
|
-
}], externalPaginator: [{
|
|
2960
|
-
type: Input
|
|
2961
|
-
}], defaultPageSize: [{
|
|
2962
|
-
type: Input
|
|
2963
|
-
}], selectionEmitMode: [{
|
|
2964
|
-
type: Input
|
|
2965
|
-
}], forceMode: [{
|
|
2966
|
-
type: Input
|
|
2967
|
-
}], forceSelectionMode: [{
|
|
2968
|
-
type: Input
|
|
2969
|
-
}], displayedColumns: [{
|
|
2970
|
-
type: Input
|
|
2971
|
-
}], displayedColumnDefinition: [{
|
|
2972
|
-
type: Input
|
|
2973
|
-
}], columnDefinitions: [{
|
|
2974
|
-
type: Input
|
|
2975
|
-
}], allColumns: [{
|
|
2976
|
-
type: Input
|
|
2977
|
-
}], actionEvent: [{
|
|
2978
|
-
type: Output
|
|
2979
|
-
}], selectionEvent: [{
|
|
2980
|
-
type: Output
|
|
2981
|
-
}], sortEvent: [{
|
|
2982
|
-
type: Output
|
|
2983
|
-
}], filterEvent: [{
|
|
2984
|
-
type: Output
|
|
2985
|
-
}], pageEvent: [{
|
|
2986
|
-
type: Output
|
|
2987
|
-
}], allColumnsEvent: [{
|
|
2988
|
-
type: Output
|
|
2989
|
-
}], columnDefinitionChangeEvent: [{
|
|
2990
|
-
type: Output
|
|
2991
|
-
}], viewDefinitionChangeEvent: [{
|
|
2992
|
-
type: Output
|
|
2993
|
-
}], paginator: [{
|
|
2994
|
-
type: ViewChild,
|
|
2995
|
-
args: [MatPaginator]
|
|
2996
|
-
}], matSort: [{
|
|
2997
|
-
type: ViewChild,
|
|
2998
|
-
args: [MatSort]
|
|
2999
|
-
}], filter: [{
|
|
3000
|
-
type: ViewChild,
|
|
3001
|
-
args: [DataTableFilter]
|
|
3002
|
-
}], columnDefs: [{
|
|
3003
|
-
type: ContentChildren,
|
|
3004
|
-
args: [DataTableTemplateColumnDefinition]
|
|
3005
|
-
}], expandableDef: [{
|
|
3006
|
-
type: ContentChild,
|
|
3007
|
-
args: [DataTableTemplateExpandableCellDefinition]
|
|
3008
|
-
}] } });
|
|
2981
|
+
], providers: [DATA_TABLE_PERSISTENCE_SERVICE_PROVIDER, MAD_DATA_TABL_GLOBAL_CONFIGURATION_PROVIDER], template: "<div data-cy=\"table-action-bar\" class=\"mad-datatable-action-bar flex justify-between items-baseline\">\n <!-- Table actions: displayed before the table -->\n @if (tableActionsState().length || (filterModeState() === 'COLUMN_BASED' && showDeleteFilterAction())) {\n <div>\n @for (actionGroup of tableActionsState(); track actionGroup) {\n <mad-button-group class=\"table-action-group inline-flex align-middle mr-[0.5em] mb-[0.5em] mt-[0.5em]\">\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 (filterModeState() === 'COLUMN_BASED' && showDeleteFilterAction()) {\n <mad-button-group class=\"table-action-group inline-flex align-middle mr-[0.5em] mb-[0.5em] mt-[0.5em]\">\n <button\n matIconButton\n [matTooltip]=\"'common.filter.delete.tooltip' | translate\"\n [attr.aria-label]=\"'common.filter.delete.tooltip' | translate\"\n matBadgeColor=\"warn\"\n [matBadge]=\"getFilterBadgeContent()\"\n [disabled]=\"disableDeleteFilterButton()\"\n class=\"delete-filter-action mat-primary align-middle\"\n (click)=\"onDeleteFilter()\"\n >\n <mat-icon fontSet=\"material-icons-outlined\" aria-hidden=\"true\"> filter_alt_off </mat-icon>\n </button>\n </mad-button-group>\n }\n </div>\n }\n @if (filterModeState() === '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 rowActionsState(); 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 editableColumnDefinitionsState(); 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 viewableColumnDefinitionsState(); 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 (filterModeState() === 'COLUMN_BASED' || showEmptyTable() || !!dataSource.filteredData?.length) {\n <div class=\"datatable overflow-auto flex-auto h-full relative w-full\" [class]=\"tableClass()\">\n @if (loading()) {\n <div\n class=\"mad-datatable-spinner-wrapper bg-(--datatable-background) opacity-80 absolute inset-0 w-full h-full flex justify-center items-center z-[99999] [pointer-events:unset]\"\n >\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 (selectionEmitModeState() !== 'NONE' && selectionModeState() === 'BATCH') {\n <div class=\"mad-datatable-checkbox-container mx-2\">\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 mx-2\" (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 mx-2\" (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 columnsState(); 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]=\"columnsState().length + 1\">\n <div class=\"mad-data-table-expandable-area\" [class.mad-data-table-expandable-area-expanded]=\"element === expandedElement\">\n <div class=\"mad-data-table-expandable-content\">\n <ng-container\n *ngTemplateOutlet=\"\n getCustomExpandableTemplate() || defaultCellTemplate;\n context: { column: element, element: element, $implicit: element }\n \"\n ></ng-container>\n </div>\n </div>\n </td>\n </ng-container>\n }\n\n <!-- header row where cells will be injected -->\n <tr mat-header-row *matHeaderRowDef=\"columnIdsState()\"></tr>\n <!-- data row where cells will be injected -->\n <tr\n mat-row\n [class.clickable-table-row]=\"!row.parentId && selectionEmitModeState() !== 'NONE'\"\n *matRowDef=\"let row; columns: columnIdsState()\"\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 w-full text-center relative pt-2.5\" [attr.colspan]=\"columnIdsState().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 w-full text-center relative\">\n @if (loading()) {\n <div\n class=\"mad-datatable-spinner-wrapper bg-(--datatable-background) opacity-80 absolute inset-0 w-full h-full flex justify-center items-center z-[99999] [pointer-events:unset]\"\n >\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 flex flex-row\">\n <div data-cy=\"definition-button-block\" class=\"mad-data-table-bottom-info-area flex flex-1\">\n <!-- column settings: 1 definition -->\n @if (editableColumnDefinitionsState().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 (editableColumnDefinitionsState().length > 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 (viewableColumnDefinitionsState().length > 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]=\"pageLengthState()\"\n [pageIndex]=\"pageIndexState()\"\n [pageSize]=\"pageSizeState()\"\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 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}.row-action-cell{width:48px!important;padding-left:8px!important}.no-action-cell{width:8px!important;padding:0}.text-right{text-align:right!important;padding-right:24px!important}.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:grid;grid-template-rows:0fr;transition:grid-template-rows 225ms cubic-bezier(.4,0,.2,1);width:100%}.mad-data-table-expandable-area.mad-data-table-expandable-area-expanded{grid-template-rows:1fr}.mad-data-table-expandable-content{min-height:0;min-width:0;overflow:hidden;visibility:hidden;width:100%;transition:visibility 225ms cubic-bezier(.4,0,.2,1)}.mad-data-table-expandable-area-expanded>.mad-data-table-expandable-content{visibility:visible}@media(prefers-reduced-motion:reduce){.mad-data-table-expandable-area,.mad-data-table-expandable-content{transition:none}}.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)}::ng-deep .mat-sort-header .mat-sort-header-arrow:hover{color:var(--main-primary);cursor:pointer}\n"] }]
|
|
2982
|
+
}], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], filterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterLabel", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], filterColumnsLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnsLabel", required: false }] }], filterColumnsPlaceHolder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterColumnsPlaceHolder", required: false }] }], showEmptyTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEmptyTable", required: false }] }], noDataText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noDataText", required: false }] }], columnSettingsModalTitleLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnSettingsModalTitleLabel", required: false }] }], selectedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedLabel", required: false }] }], availableLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableLabel", required: false }] }], saveLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "saveLabel", required: false }] }], deleteLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], infoTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoTextLabel", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], translateLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "translateLabels", required: false }] }], useAsync: [{ type: i0.Input, args: [{ isSignal: true, alias: "useAsync", required: false }] }], stateful: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateful", required: false }] }], persistenceConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "persistenceConfig", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], tableData: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableData", required: false }] }], idGenerator: [{ type: i0.Input, args: [{ isSignal: true, alias: "idGenerator", required: false }] }], parentIdGenerator: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentIdGenerator", required: false }] }], defaultSort: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultSort", required: false }] }], externalFilter: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalFilter", required: false }] }], paginationEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationEnabled", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], selectionEmitType: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEmitType", required: false }] }], showDeleteFilterAction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDeleteFilterAction", required: false }] }], disableRowClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableRowClick", required: false }] }], deleteDefinitionAllowed: [{ type: i0.Input, args: [{ isSignal: true, alias: "deleteDefinitionAllowed", required: false }] }], rowExpandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowExpandable", required: false }] }], selection: [{ type: i0.Input, args: [{ isSignal: true, alias: "selection", required: false }] }], filterEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterEnabled", required: false }] }], filterModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], filterValueInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterValue", required: false }] }], externalPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalPaginator", required: false }] }], defaultPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPageSize", required: false }] }], selectionEmitModeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionEmitMode", required: false }] }], forceMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceMode", required: false }] }], forceSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "forceSelectionMode", required: false }] }], displayedColumnsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumns", required: false }] }], displayedColumnDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayedColumnDefinition", required: false }] }], columnDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDefinitions", required: false }] }], allColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "allColumns", required: false }] }], actionEvent: [{ type: i0.Output, args: ["actionEvent"] }], selectionEvent: [{ type: i0.Output, args: ["selectionEvent"] }], sortEvent: [{ type: i0.Output, args: ["sortEvent"] }], filterEvent: [{ type: i0.Output, args: ["filterEvent"] }], pageEvent: [{ type: i0.Output, args: ["pageEvent"] }], allColumnsEvent: [{ type: i0.Output, args: ["allColumnsEvent"] }], columnDefinitionChangeEvent: [{ type: i0.Output, args: ["columnDefinitionChangeEvent"] }], viewDefinitionChangeEvent: [{ type: i0.Output, args: ["viewDefinitionChangeEvent"] }], paginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], matSort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], filter: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DataTableFilter), { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => DataTableTemplateColumnDefinition), { isSignal: true }] }], expandableDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DataTableTemplateExpandableCellDefinition), { isSignal: true }] }] } });
|
|
3009
2983
|
|
|
3010
2984
|
class DataTableTemplateCellDefinition {
|
|
3011
2985
|
constructor(templateRef, columnDef) {
|
|
@@ -3308,20 +3282,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
3308
3282
|
|
|
3309
3283
|
class ContentPanelContainerComponent {
|
|
3310
3284
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContentPanelContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ContentPanelContainerComponent, isStandalone: true, selector: "mad-content-panel-container", ngImport: i0, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column;text-overflow:ellipsis}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }); }
|
|
3285
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ContentPanelContainerComponent, isStandalone: true, selector: "mad-content-panel-container", ngImport: i0, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-width:0;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;text-overflow:ellipsis}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;min-width:0;flex-direction:row}\n"] }); }
|
|
3312
3286
|
}
|
|
3313
3287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContentPanelContainerComponent, decorators: [{
|
|
3314
3288
|
type: Component,
|
|
3315
|
-
args: [{ selector: 'mad-content-panel-container', standalone: true, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;flex-direction:column;text-overflow:ellipsis}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;flex-direction:row}\n"] }]
|
|
3289
|
+
args: [{ selector: 'mad-content-panel-container', standalone: true, template: "<div class=\"content-panel-sidebar-wrapper\">\n <ng-content select=\"mad-content-panel-container-sidebar\"></ng-content>\n <div class=\"content-panel-outer-wrapper\">\n <ng-content select=\"mad-content-panel-container-content\"></ng-content>\n <ng-content select=\"mad-content-panel-container-footer\"></ng-content>\n </div>\n</div>\n", styles: [":host{position:relative;overflow:hidden;display:flex;flex:1 1 auto;min-width:0;min-height:.05rem;background-color:var(--background-color)}.content-panel-outer-wrapper{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;text-overflow:ellipsis}.content-panel-sidebar-wrapper{width:100%;display:flex;flex:1 1 auto;min-width:0;flex-direction:row}\n"] }]
|
|
3316
3290
|
}] });
|
|
3317
3291
|
|
|
3318
3292
|
class ContentPanelContainerContentComponent {
|
|
3319
3293
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContentPanelContainerContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ContentPanelContainerContentComponent, isStandalone: true, selector: "mad-content-panel-container-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem}\n"] }); }
|
|
3294
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.1", type: ContentPanelContainerContentComponent, isStandalone: true, selector: "mad-content-panel-container-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;min-width:0;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem}\n"] }); }
|
|
3321
3295
|
}
|
|
3322
3296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ContentPanelContainerContentComponent, decorators: [{
|
|
3323
3297
|
type: Component,
|
|
3324
|
-
args: [{ selector: 'mad-content-panel-container-content', standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem}\n"] }]
|
|
3298
|
+
args: [{ selector: 'mad-content-panel-container-content', standalone: true, template: "<ng-content></ng-content>\n", styles: [":host{flex:1 1 auto;min-width:0;overflow-y:auto;border-top:.05rem solid #cccccc;padding:1rem}\n"] }]
|
|
3325
3299
|
}] });
|
|
3326
3300
|
|
|
3327
3301
|
class ContentPanelContainerFooterComponent {
|
|
@@ -3773,13 +3747,13 @@ class SidebarLayoutComponent {
|
|
|
3773
3747
|
goToPreviousPage() {
|
|
3774
3748
|
this.location.back();
|
|
3775
3749
|
}
|
|
3776
|
-
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$
|
|
3777
|
-
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$
|
|
3750
|
+
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 }); }
|
|
3751
|
+
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$1.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 }] }); }
|
|
3778
3752
|
}
|
|
3779
3753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SidebarLayoutComponent, decorators: [{
|
|
3780
3754
|
type: Component,
|
|
3781
3755
|
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"] }]
|
|
3782
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$9.Router }, { type: i2$
|
|
3756
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$9.Router }, { type: i2$5.Location }], propDecorators: { title: [{
|
|
3783
3757
|
type: Input
|
|
3784
3758
|
}], hasBackButton: [{
|
|
3785
3759
|
type: Input
|
|
@@ -3980,8 +3954,8 @@ class ToolbarComponent {
|
|
|
3980
3954
|
hasImportantToolbarActions() {
|
|
3981
3955
|
return this.getToolbarActions().filter((value) => !!value.importantAction).length > 0;
|
|
3982
3956
|
}
|
|
3983
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$a.BreakpointObserver }, { token: i2$
|
|
3984
|
-
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() ? '⁠' : 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:
|
|
3957
|
+
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 }); }
|
|
3958
|
+
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() ? '⁠' : 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: i16.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" }] }); }
|
|
3985
3959
|
}
|
|
3986
3960
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
3987
3961
|
type: Component,
|
|
@@ -4000,7 +3974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4000
3974
|
MatMenuModule,
|
|
4001
3975
|
AsyncPipe,
|
|
4002
3976
|
], 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() ? '⁠' : 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"] }]
|
|
4003
|
-
}], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$
|
|
3977
|
+
}], ctorParameters: () => [{ type: i1$a.BreakpointObserver }, { type: i2$6.Title }, { type: ToolbarService }] });
|
|
4004
3978
|
|
|
4005
3979
|
class ToolbarModule {
|
|
4006
3980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
@@ -4261,7 +4235,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
4261
4235
|
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"] }]
|
|
4262
4236
|
}], 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"] }] } });
|
|
4263
4237
|
|
|
4264
|
-
const VERSION = '22.0
|
|
4238
|
+
const VERSION = '22.1.0';
|
|
4265
4239
|
|
|
4266
4240
|
const MAD_ALERT_DEFAULT_CONFIGURATION = new InjectionToken('mad-alert-configuration', {
|
|
4267
4241
|
providedIn: 'root',
|