@tilde-nlp/ngx-common 2.0.5 → 2.0.6

package/esm2020/lib/multi-functional-table/multi-functional-table.component.mjs

@@ -155,10 +155,10 @@ export class MultiFunctionalTableComponent {
     }
 }
 MultiFunctionalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: i1.DOMService }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: ["table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings"], outputs: ["filterBarChange"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
+MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings"], outputs: ["filterBarChange"] }, { kind: "directive", type: i10.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i10.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i10.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: ["table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"] }]
+            args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.DOMService }, { type: i2.TranslateService }]; }, propDecorators: { config: [{
                 type: Input
             }], filterBarChange: [{

package/fesm2015/tilde-nlp-ngx-common.mjs

@@ -1418,10 +1418,10 @@ class MultiFunctionalTableComponent {
     }
 }
 MultiFunctionalTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, deps: [{ token: DOMService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: ["table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings"], outputs: ["filterBarChange"] }, { kind: "directive", type: i2$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+MultiFunctionalTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MultiFunctionalTableComponent, selector: "tld-multi-functional-table", inputs: { config: "config" }, outputs: { filterBarChange: "filterBarChange", exported: "exported" }, queries: [{ propertyName: "noDataRow", first: true, predicate: MatNoDataRow, descendants: true }, { propertyName: "headerRowDefs", predicate: MatHeaderRowDef }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "columnDefs", predicate: MatColumnDef }], viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "tableElementRef", first: true, predicate: MatTable, descendants: true, read: ElementRef }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: i4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i4.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "component", type: i1$3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i6$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i6$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i7$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FilterBarComponent, selector: "tld-filter-bar", inputs: ["settings"], outputs: ["filterBarChange"] }, { kind: "directive", type: i2$2.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i2$2.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i2$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "component", type: i11.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MultiFunctionalTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: ["table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"] }]
+            args: [{ selector: 'tld-multi-functional-table', template: "<div fxLayout=\"column\" fxLayoutGap=\"1rem\">\r\n\r\n  <div fxLayout=\"row\">\r\n    <div fxFlex fxLayoutGap=\"1rem\">\r\n      <button mat-button [matMenuTriggerFor]=\"columnMenu\" *ngIf=\"columnSelectActive\">\r\n        <span class=\"material-icons column-select-icon\">menu</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-button *ngIf=\"filterActive\" (click)=\"toggleFilterBar()\">\r\n        <span class=\"material-icons\">filter_list</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.FILTER_TOGGLE' | translate}}</span>\r\n      </button>\r\n\r\n      <button mat-stroked-button *ngIf=\"exportActive\" (click)=\"export()\">\r\n        <span class=\"material-icons-outlined\">cloud_download</span>\r\n        <span>{{'MULTI_FUNCTIONAL_TABLE.EXPORT' | translate}}</span>\r\n      </button>\r\n    </div>\r\n\r\n    <ng-content select=\"[additionalActions]\"></ng-content>\r\n  </div>\r\n\r\n  <mat-menu #columnMenu=\"matMenu\">\r\n    <div class=\"column-select-wrapper\" (click)=\"$event.stopPropagation()\">\r\n      <div *ngFor=\"let column of configurableColumns\">\r\n        <mat-checkbox [(ngModel)]=\"column.selected\" (change)=\"updateDisplayColumns()\">\r\n          {{column.displayName | translate}}\r\n        </mat-checkbox>\r\n      </div>\r\n    </div>\r\n  </mat-menu>\r\n\r\n  <tld-filter-bar *ngIf=\"filterBarVisible\" [settings]=\"filterSettings\" (filterBarChange)=\"filtersChanged($event)\">\r\n  </tld-filter-bar>\r\n  <table #table mat-table [dataSource]=\"config.dataSource\">\r\n    <ng-content></ng-content>\r\n\r\n    <tr mat-header-row *matHeaderRowDef=\"displayColumns\"></tr>\r\n    <tr mat-row *matRowDef=\"let row; columns: displayColumns\"></tr>\r\n\r\n    <ng-container *ngIf=\"noDataRowActive\">\r\n      <tr *matNoDataRow>\r\n        <!-- add random number to make sure it takes full width -->\r\n        <td colspan=\"99\">\r\n          <div class=\"no-engines-wrapper\">\r\n            <ng-container *ngIf=\"!noDataRowConfig.loading; else loading\">\r\n              <div>\r\n                <span class=\"material-icons-outlined\">\r\n                  {{noDataRowIcon}}\r\n                </span>\r\n              </div>\r\n              <div class=\"text-xl-semi-bold\" *ngIf=\"noDataRowConfig.title\"\r\n                [innerHtml]=\"noDataRowConfig.title | translate: noDataRowConfig.titleParams\">\r\n              </div>\r\n              <div class=\"text-l\" *ngIf=\"noDataRowConfig.description\"\r\n                [innerHtml]=\"noDataRowConfig.description | translate: noDataRowConfig.descriptionParams\"></div>\r\n            </ng-container>\r\n            <ng-template #loading>\r\n              <mat-spinner color=\"accent\"></mat-spinner>\r\n            </ng-template>\r\n          </div>\r\n        </td>\r\n      </tr>\r\n    </ng-container>\r\n\r\n  </table>\r\n\r\n</div>\r\n", styles: [":host ::ng-deep tr.mat-row:hover{background-color:var(--base-95)}table{width:100%}.column-select-icon{rotate:90deg}.column-select-wrapper{padding:1rem}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}.mat-no-data-row{text-align:center}.mat-no-data-row .no-engines-wrapper{margin-top:4rem}.mat-no-data-row .material-icons-outlined{font-size:4rem;color:var(--base-70)}mat-spinner{margin:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: DOMService }, { type: i1$2.TranslateService }]; }, propDecorators: { config: [{
                 type: Input
             }], filterBarChange: [{