@tilde-nlp/ngx-common 6.1.21 → 6.1.22

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.
Files changed (4) hide show
  1. package/esm2022/lib/multi-functional-table/multi-functional-table.component.mjs +2 -2
  2. package/fesm2022/tilde-nlp-ngx-common.mjs +2 -2
  3. package/fesm2022/tilde-nlp-ngx-common.mjs.map +1 -1
  4. package/package.json +1 -1
package/esm2022/lib/multi-functional-table/multi-functional-table.component.mjs CHANGED
@@ -551,11 +551,11 @@ export class MultiFunctionalTableComponent {
551
551
  i0.ɵɵproperty("ngForOf", ctx.configurableColumns);
552
552
  i0.ɵɵadvance(3);
553
553
  i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 19, "MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE"), " ");
554
- } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatTable, i4.MatHeaderCellDef, i4.MatHeaderRowDef, i4.MatColumnDef, i4.MatCellDef, i4.MatRowDef, i4.MatHeaderCell, i4.MatCell, i4.MatHeaderRow, i4.MatRow, i4.MatNoDataRow, i5.MatButton, i5.MatIconButton, i6.MatMenu, i6.MatMenuTrigger, i7.MatCheckbox, i8.NgControlStatus, i8.NgModel, i9.FilterBarComponent, i10.DefaultLayoutDirective, i10.DefaultLayoutGapDirective, i10.DefaultLayoutAlignDirective, i10.DefaultFlexDirective, i11.DefaultClassDirective, i12.MatTooltip, i13.StatusDisplayComponent, i14.MatIcon, i2.TranslatePipe], styles: ["[_nghost-%COMP%] th, [_nghost-%COMP%] tr{white-space:nowrap}[_nghost-%COMP%] td:not(:first-of-type){padding-right:10px!important}[_nghost-%COMP%] tr.mat-mdc-row:hover, [_nghost-%COMP%] tr.mat-mdc-row.highlight{background-color:var(--base-95)}[_nghost-%COMP%] tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}[_nghost-%COMP%] .export-data .mdc-button__label{display:flex;align-items:center}[_nghost-%COMP%] .mat-mdc-cell, [_nghost-%COMP%] .mat-mdc-header-cell, [_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}[_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}[_nghost-%COMP%] .mdc-data-table__cell:nth-child(2), [_nghost-%COMP%] .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}[_nghost-%COMP%] td+.cdk-column-columnSelect{display:none}[_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button, [_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}[_nghost-%COMP%] .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}[_nghost-%COMP%] .filter-active{background-color:var(--neutral-95)}table[_ngcontent-%COMP%]{width:100%}.wild-search-wrapper[_ngcontent-%COMP%]{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:30px}.wild-search-wrapper[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{color:var(--base-40)}.wild-search-wrapper[_ngcontent-%COMP%] .wild-search-clear-btn[_ngcontent-%COMP%]{position:absolute;right:3px}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .mat-mdc-button-touch-target[_ngcontent-%COMP%]{height:33px!important;width:33px!important}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons-outlined[_ngcontent-%COMP%]{top:5px!important;left:5px!important}.mobile[_ngcontent-%COMP%] .wild-search-wrapper[_ngcontent-%COMP%]{margin:0}.column-selector-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:end}.column-select-menu[_ngcontent-%COMP%]{padding:8px 18px 8px 8px}.column-select-save[_ngcontent-%COMP%]{padding-left:8px;padding-top:8px}.column-select-save[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:100%}.row-clickable[_ngcontent-%COMP%]{cursor:pointer}.row-clickable[_ngcontent-%COMP%]:active{background-color:var(--base-70)!important}.material-icons[_ngcontent-%COMP%], .material-icons-outlined[_ngcontent-%COMP%]{margin-right:.5rem}.table-action-button[_ngcontent-%COMP%]{margin-bottom:1rem}th.mat-mdc-header-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-footer-cell[_ngcontent-%COMP%]:first-of-type{padding:0 0 0 10px}.row-select[_ngcontent-%COMP%]{width:0}.table-overflow[_ngcontent-%COMP%]{overflow-x:auto}.table-dragable[_ngcontent-%COMP%]{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable[_ngcontent-%COMP%]:active{cursor:grabbing}.table-sticky-header[_ngcontent-%COMP%]{max-height:70vh}"] }); }
554
+ } }, dependencies: [i3.NgForOf, i3.NgIf, i4.MatTable, i4.MatHeaderCellDef, i4.MatHeaderRowDef, i4.MatColumnDef, i4.MatCellDef, i4.MatRowDef, i4.MatHeaderCell, i4.MatCell, i4.MatHeaderRow, i4.MatRow, i4.MatNoDataRow, i5.MatButton, i5.MatIconButton, i6.MatMenu, i6.MatMenuTrigger, i7.MatCheckbox, i8.NgControlStatus, i8.NgModel, i9.FilterBarComponent, i10.DefaultLayoutDirective, i10.DefaultLayoutGapDirective, i10.DefaultLayoutAlignDirective, i10.DefaultFlexDirective, i11.DefaultClassDirective, i12.MatTooltip, i13.StatusDisplayComponent, i14.MatIcon, i2.TranslatePipe], styles: ["[_nghost-%COMP%] th, [_nghost-%COMP%] tr{white-space:nowrap}[_nghost-%COMP%] td:not(:first-of-type){padding-right:10px!important}[_nghost-%COMP%] tr.mat-mdc-row:hover, [_nghost-%COMP%] tr.mat-mdc-row.highlight{background-color:var(--base-95)}[_nghost-%COMP%] tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}[_nghost-%COMP%] .export-data .mdc-button__label{display:flex;align-items:center}[_nghost-%COMP%] .mat-mdc-cell, [_nghost-%COMP%] .mat-mdc-header-cell, [_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}[_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}[_nghost-%COMP%] .mdc-data-table__cell:nth-child(2), [_nghost-%COMP%] .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}[_nghost-%COMP%] td+.cdk-column-columnSelect{display:none}[_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button, [_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}[_nghost-%COMP%] .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}[_nghost-%COMP%] .filter-active{background-color:var(--neutral-95)}[_nghost-%COMP%] .row-actions{opacity:0}[_nghost-%COMP%] .highlight .row-actions{opacity:1}table[_ngcontent-%COMP%]{width:100%}.wild-search-wrapper[_ngcontent-%COMP%]{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:30px}.wild-search-wrapper[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{color:var(--base-40)}.wild-search-wrapper[_ngcontent-%COMP%] .wild-search-clear-btn[_ngcontent-%COMP%]{position:absolute;right:3px}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .mat-mdc-button-touch-target[_ngcontent-%COMP%]{height:33px!important;width:33px!important}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons-outlined[_ngcontent-%COMP%]{top:5px!important;left:5px!important}.mobile[_ngcontent-%COMP%] .wild-search-wrapper[_ngcontent-%COMP%]{margin:0}.column-selector-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:end}.column-select-menu[_ngcontent-%COMP%]{padding:8px 18px 8px 8px}.column-select-save[_ngcontent-%COMP%]{padding-left:8px;padding-top:8px}.column-select-save[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:100%}.row-clickable[_ngcontent-%COMP%]{cursor:pointer}.row-clickable[_ngcontent-%COMP%]:active{background-color:var(--base-70)!important}.material-icons[_ngcontent-%COMP%], .material-icons-outlined[_ngcontent-%COMP%]{margin-right:.5rem}.table-action-button[_ngcontent-%COMP%]{margin-bottom:1rem}th.mat-mdc-header-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-footer-cell[_ngcontent-%COMP%]:first-of-type{padding:0 0 0 10px}.row-select[_ngcontent-%COMP%]{width:0}.table-overflow[_ngcontent-%COMP%]{overflow-x:auto}.table-dragable[_ngcontent-%COMP%]{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable[_ngcontent-%COMP%]:active{cursor:grabbing}.table-sticky-header[_ngcontent-%COMP%]{max-height:70vh}"] }); }
555
555
  }
556
556
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiFunctionalTableComponent, [{
557
557
  type: Component,
558
- args: [{ selector: 'tld-multi-functional-table', template: "<div [ngClass.lt-md]=\"'mobile'\" fxLayout=\"column\" fxLayoutGap=\"0.75rem\">\r\n <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"0.75rem\">\r\n <div\r\n fxFlex\r\n fxLayout.lt-md=\"column\"\r\n fxLayoutGap=\"0.75rem\"\r\n fxLayoutAlign=\"start center\"\r\n fxLayoutAlign.lt-md=\"start start\"\r\n class=\"action-row\"\r\n >\r\n <button\r\n class=\"export-data\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n *ngIf=\"exportActive\"\r\n (click)=\"export()\"\r\n >\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{ \"MULTI_FUNCTIONAL_TABLE.EXPORT\" | translate }}</span>\r\n </button>\r\n\r\n <div\r\n *ngIf=\"filterActive && showFilterToggle\"\r\n fxFlex\r\n fxLayoutGap=\"0.5rem\"\r\n fxLayoutAlign=\"start center\"\r\n >\r\n <button\r\n [class.filter-active]=\"filterBarVisible\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"toggleFilterBar()\"\r\n >\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 <div *ngIf=\"showFilterReset\" class=\"clear-filters-wrapper\">\r\n <button mat-icon-button (click)=\"clearFilters()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"showSearch\"\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"start center\"\r\n class=\"wild-search-wrapper\"\r\n >\r\n <mat-icon\r\n class=\"search-icon\"\r\n [matTooltip]=\"hideSearchTooltip ? '' : (searchTooltip | translate)\"\r\n >search</mat-icon\r\n >\r\n <input\r\n #wildSearch\r\n type=\"text\"\r\n [placeholder]=\"searchTitle | translate\"\r\n (keyup)=\"search($event)\"\r\n />\r\n <button\r\n *ngIf=\"showSearchClearButton && wildSearch.value\"\r\n mat-icon-button\r\n class=\"wild-search-clear-btn\"\r\n (click)=\"wildSearch.value = ''; search({ target: { value: '' } })\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <tld-filter-bar\r\n *ngIf=\"config.filter && config.filter.enabled\"\r\n #filterBar\r\n [filterRowVisible]=\"filterBarVisible\"\r\n [settings]=\"config.filter.settings\"\r\n (filterBarChange)=\"filtersChanged($event)\"\r\n >\r\n </tld-filter-bar>\r\n\r\n <ng-content select=\"[batchActions]\"></ng-content>\r\n\r\n <div\r\n #tableContainer\r\n class=\"table-overflow\"\r\n [class.table-sticky-header]=\"config?.stickyHeader\"\r\n [class.table-dragable]=\"tableOverflow && !config?.disableMouseDragging\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mouseup)=\"onMouseUp()\"\r\n (mouseleave)=\"onMouseUp()\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"config.dataSource\"\r\n [trackBy]=\"trackByFn\"\r\n >\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT_ALL' | translate\"\r\n [disabled]=\"config.batchConfig!.checkBoxesDisabled\"\r\n (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n >\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT' | translate\"\r\n *ngIf=\"\r\n isRowCheckboxAlwaysVisible ||\r\n hoveredRow === element ||\r\n matSelection.isSelected(element)\r\n \"\r\n [disabled]=\"\r\n config.batchConfig!.checkBoxesDisabled ||\r\n (preselectedItems.includes(element) && disablePreselectedItems)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"matSelection.isSelected(element)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayColumns; sticky: config?.stickyHeader ?? false\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayColumns\"\r\n (click)=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n ? config?.rowClickCallback(row)\r\n : null\r\n \"\r\n (mouseover)=\"hoveredRow = row\"\r\n (mouseleave)=\"hoveredRow = null\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(row)\"\r\n [class.highlight]=\"row === hoveredRow || highlightElement(row)\"\r\n ></tr>\r\n\r\n <ng-container [matColumnDef]=\"columnSelectColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <div class=\"column-selector-wrapper\">\r\n <button\r\n class=\"column-selector\"\r\n mat-icon-button\r\n color=\"primary-accent-darker\"\r\n [matMenuTriggerFor]=\"columnMenu\"\r\n >\r\n <span class=\"material-icons\">more_vert</span>\r\n </button>\r\n </div>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n ></td>\r\n </ng-container>\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 <lib-status-display [config]=\"noDataRowConfig\"></lib-status-display>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-menu\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\">\r\n {{ column.displayName | translate }}\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class=\"column-select-save\">\r\n <button\r\n mat-flat-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"updateDisplayColumns()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td:not(:first-of-type){padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}:host ::ng-deep tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}:host ::ng-deep .export-data .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .mat-mdc-cell,:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}:host ::ng-deep .mdc-data-table__cell:nth-child(2),:host ::ng-deep .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}:host ::ng-deep td+.cdk-column-columnSelect{display:none}:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button,:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}:host ::ng-deep .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}:host ::ng-deep .filter-active{background-color:var(--neutral-95)}table{width:100%}.wild-search-wrapper{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper input{margin-right:30px}.wild-search-wrapper .search-icon{color:var(--base-40)}.wild-search-wrapper .wild-search-clear-btn{position:absolute;right:3px}.wild-search-wrapper .mat-mdc-icon-button,.wild-search-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:33px!important;width:33px!important}.wild-search-wrapper .mat-mdc-icon-button mat-icon,.wild-search-wrapper .mat-mdc-icon-button .material-icons,.wild-search-wrapper .mat-mdc-icon-button .material-icons-outlined{top:5px!important;left:5px!important}.mobile .wild-search-wrapper{margin:0}.column-selector-wrapper{display:flex;justify-content:end}.column-select-menu{padding:8px 18px 8px 8px}.column-select-save{padding-left:8px;padding-top:8px}.column-select-save button{width:100%}.row-clickable{cursor:pointer}.row-clickable:active{background-color:var(--base-70)!important}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 0 0 10px}.row-select{width:0}.table-overflow{overflow-x:auto}.table-dragable{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable:active{cursor:grabbing}.table-sticky-header{max-height:70vh}\n"] }]
558
+ args: [{ selector: 'tld-multi-functional-table', template: "<div [ngClass.lt-md]=\"'mobile'\" fxLayout=\"column\" fxLayoutGap=\"0.75rem\">\r\n <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"0.75rem\">\r\n <div\r\n fxFlex\r\n fxLayout.lt-md=\"column\"\r\n fxLayoutGap=\"0.75rem\"\r\n fxLayoutAlign=\"start center\"\r\n fxLayoutAlign.lt-md=\"start start\"\r\n class=\"action-row\"\r\n >\r\n <button\r\n class=\"export-data\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n *ngIf=\"exportActive\"\r\n (click)=\"export()\"\r\n >\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{ \"MULTI_FUNCTIONAL_TABLE.EXPORT\" | translate }}</span>\r\n </button>\r\n\r\n <div\r\n *ngIf=\"filterActive && showFilterToggle\"\r\n fxFlex\r\n fxLayoutGap=\"0.5rem\"\r\n fxLayoutAlign=\"start center\"\r\n >\r\n <button\r\n [class.filter-active]=\"filterBarVisible\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"toggleFilterBar()\"\r\n >\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 <div *ngIf=\"showFilterReset\" class=\"clear-filters-wrapper\">\r\n <button mat-icon-button (click)=\"clearFilters()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"showSearch\"\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"start center\"\r\n class=\"wild-search-wrapper\"\r\n >\r\n <mat-icon\r\n class=\"search-icon\"\r\n [matTooltip]=\"hideSearchTooltip ? '' : (searchTooltip | translate)\"\r\n >search</mat-icon\r\n >\r\n <input\r\n #wildSearch\r\n type=\"text\"\r\n [placeholder]=\"searchTitle | translate\"\r\n (keyup)=\"search($event)\"\r\n />\r\n <button\r\n *ngIf=\"showSearchClearButton && wildSearch.value\"\r\n mat-icon-button\r\n class=\"wild-search-clear-btn\"\r\n (click)=\"wildSearch.value = ''; search({ target: { value: '' } })\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <tld-filter-bar\r\n *ngIf=\"config.filter && config.filter.enabled\"\r\n #filterBar\r\n [filterRowVisible]=\"filterBarVisible\"\r\n [settings]=\"config.filter.settings\"\r\n (filterBarChange)=\"filtersChanged($event)\"\r\n >\r\n </tld-filter-bar>\r\n\r\n <ng-content select=\"[batchActions]\"></ng-content>\r\n\r\n <div\r\n #tableContainer\r\n class=\"table-overflow\"\r\n [class.table-sticky-header]=\"config?.stickyHeader\"\r\n [class.table-dragable]=\"tableOverflow && !config?.disableMouseDragging\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mouseup)=\"onMouseUp()\"\r\n (mouseleave)=\"onMouseUp()\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"config.dataSource\"\r\n [trackBy]=\"trackByFn\"\r\n >\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT_ALL' | translate\"\r\n [disabled]=\"config.batchConfig!.checkBoxesDisabled\"\r\n (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n >\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT' | translate\"\r\n *ngIf=\"\r\n isRowCheckboxAlwaysVisible ||\r\n hoveredRow === element ||\r\n matSelection.isSelected(element)\r\n \"\r\n [disabled]=\"\r\n config.batchConfig!.checkBoxesDisabled ||\r\n (preselectedItems.includes(element) && disablePreselectedItems)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"matSelection.isSelected(element)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayColumns; sticky: config?.stickyHeader ?? false\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayColumns\"\r\n (click)=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n ? config?.rowClickCallback(row)\r\n : null\r\n \"\r\n (mouseover)=\"hoveredRow = row\"\r\n (mouseleave)=\"hoveredRow = null\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(row)\"\r\n [class.highlight]=\"row === hoveredRow || highlightElement(row)\"\r\n ></tr>\r\n\r\n <ng-container [matColumnDef]=\"columnSelectColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <div class=\"column-selector-wrapper\">\r\n <button\r\n class=\"column-selector\"\r\n mat-icon-button\r\n color=\"primary-accent-darker\"\r\n [matMenuTriggerFor]=\"columnMenu\"\r\n >\r\n <span class=\"material-icons\">more_vert</span>\r\n </button>\r\n </div>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n ></td>\r\n </ng-container>\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 <lib-status-display [config]=\"noDataRowConfig\"></lib-status-display>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-menu\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\">\r\n {{ column.displayName | translate }}\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class=\"column-select-save\">\r\n <button\r\n mat-flat-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"updateDisplayColumns()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td:not(:first-of-type){padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}:host ::ng-deep tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}:host ::ng-deep .export-data .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .mat-mdc-cell,:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}:host ::ng-deep .mdc-data-table__cell:nth-child(2),:host ::ng-deep .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}:host ::ng-deep td+.cdk-column-columnSelect{display:none}:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button,:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}:host ::ng-deep .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}:host ::ng-deep .filter-active{background-color:var(--neutral-95)}:host ::ng-deep .row-actions{opacity:0}:host ::ng-deep .highlight .row-actions{opacity:1}table{width:100%}.wild-search-wrapper{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper input{margin-right:30px}.wild-search-wrapper .search-icon{color:var(--base-40)}.wild-search-wrapper .wild-search-clear-btn{position:absolute;right:3px}.wild-search-wrapper .mat-mdc-icon-button,.wild-search-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:33px!important;width:33px!important}.wild-search-wrapper .mat-mdc-icon-button mat-icon,.wild-search-wrapper .mat-mdc-icon-button .material-icons,.wild-search-wrapper .mat-mdc-icon-button .material-icons-outlined{top:5px!important;left:5px!important}.mobile .wild-search-wrapper{margin:0}.column-selector-wrapper{display:flex;justify-content:end}.column-select-menu{padding:8px 18px 8px 8px}.column-select-save{padding-left:8px;padding-top:8px}.column-select-save button{width:100%}.row-clickable{cursor:pointer}.row-clickable:active{background-color:var(--base-70)!important}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 0 0 10px}.row-select{width:0}.table-overflow{overflow-x:auto}.table-dragable{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable:active{cursor:grabbing}.table-sticky-header{max-height:70vh}\n"] }]
559
559
  }], () => [{ type: i1.DOMService }, { type: i2.TranslateService }], { config: [{
560
560
  type: Input
561
561
  }], highlightedElements: [{
package/fesm2022/tilde-nlp-ngx-common.mjs CHANGED
@@ -4158,11 +4158,11 @@ class MultiFunctionalTableComponent {
4158
4158
  i0.ɵɵproperty("ngForOf", ctx.configurableColumns);
4159
4159
  i0.ɵɵadvance(3);
4160
4160
  i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(30, 19, "MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE"), " ");
4161
- } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i4$2.MatTable, i4$2.MatHeaderCellDef, i4$2.MatHeaderRowDef, i4$2.MatColumnDef, i4$2.MatCellDef, i4$2.MatRowDef, i4$2.MatHeaderCell, i4$2.MatCell, i4$2.MatHeaderRow, i4$2.MatRow, i4$2.MatNoDataRow, i2$1.MatButton, i2$1.MatIconButton, i5$1.MatMenu, i5$1.MatMenuTrigger, i7.MatCheckbox, i4$1.NgControlStatus, i4$1.NgModel, FilterBarComponent, i2$3.DefaultLayoutDirective, i2$3.DefaultLayoutGapDirective, i2$3.DefaultLayoutAlignDirective, i2$3.DefaultFlexDirective, i3.DefaultClassDirective, i2$2.MatTooltip, StatusDisplayComponent, i1.MatIcon, i1$1.TranslatePipe], styles: ["[_nghost-%COMP%] th, [_nghost-%COMP%] tr{white-space:nowrap}[_nghost-%COMP%] td:not(:first-of-type){padding-right:10px!important}[_nghost-%COMP%] tr.mat-mdc-row:hover, [_nghost-%COMP%] tr.mat-mdc-row.highlight{background-color:var(--base-95)}[_nghost-%COMP%] tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}[_nghost-%COMP%] .export-data .mdc-button__label{display:flex;align-items:center}[_nghost-%COMP%] .mat-mdc-cell, [_nghost-%COMP%] .mat-mdc-header-cell, [_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}[_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}[_nghost-%COMP%] .mdc-data-table__cell:nth-child(2), [_nghost-%COMP%] .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}[_nghost-%COMP%] td+.cdk-column-columnSelect{display:none}[_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button, [_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}[_nghost-%COMP%] .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}[_nghost-%COMP%] .filter-active{background-color:var(--neutral-95)}table[_ngcontent-%COMP%]{width:100%}.wild-search-wrapper[_ngcontent-%COMP%]{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:30px}.wild-search-wrapper[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{color:var(--base-40)}.wild-search-wrapper[_ngcontent-%COMP%] .wild-search-clear-btn[_ngcontent-%COMP%]{position:absolute;right:3px}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .mat-mdc-button-touch-target[_ngcontent-%COMP%]{height:33px!important;width:33px!important}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons-outlined[_ngcontent-%COMP%]{top:5px!important;left:5px!important}.mobile[_ngcontent-%COMP%] .wild-search-wrapper[_ngcontent-%COMP%]{margin:0}.column-selector-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:end}.column-select-menu[_ngcontent-%COMP%]{padding:8px 18px 8px 8px}.column-select-save[_ngcontent-%COMP%]{padding-left:8px;padding-top:8px}.column-select-save[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:100%}.row-clickable[_ngcontent-%COMP%]{cursor:pointer}.row-clickable[_ngcontent-%COMP%]:active{background-color:var(--base-70)!important}.material-icons[_ngcontent-%COMP%], .material-icons-outlined[_ngcontent-%COMP%]{margin-right:.5rem}.table-action-button[_ngcontent-%COMP%]{margin-bottom:1rem}th.mat-mdc-header-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-footer-cell[_ngcontent-%COMP%]:first-of-type{padding:0 0 0 10px}.row-select[_ngcontent-%COMP%]{width:0}.table-overflow[_ngcontent-%COMP%]{overflow-x:auto}.table-dragable[_ngcontent-%COMP%]{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable[_ngcontent-%COMP%]:active{cursor:grabbing}.table-sticky-header[_ngcontent-%COMP%]{max-height:70vh}"] }); }
4161
+ } }, dependencies: [i1$2.NgForOf, i1$2.NgIf, i4$2.MatTable, i4$2.MatHeaderCellDef, i4$2.MatHeaderRowDef, i4$2.MatColumnDef, i4$2.MatCellDef, i4$2.MatRowDef, i4$2.MatHeaderCell, i4$2.MatCell, i4$2.MatHeaderRow, i4$2.MatRow, i4$2.MatNoDataRow, i2$1.MatButton, i2$1.MatIconButton, i5$1.MatMenu, i5$1.MatMenuTrigger, i7.MatCheckbox, i4$1.NgControlStatus, i4$1.NgModel, FilterBarComponent, i2$3.DefaultLayoutDirective, i2$3.DefaultLayoutGapDirective, i2$3.DefaultLayoutAlignDirective, i2$3.DefaultFlexDirective, i3.DefaultClassDirective, i2$2.MatTooltip, StatusDisplayComponent, i1.MatIcon, i1$1.TranslatePipe], styles: ["[_nghost-%COMP%] th, [_nghost-%COMP%] tr{white-space:nowrap}[_nghost-%COMP%] td:not(:first-of-type){padding-right:10px!important}[_nghost-%COMP%] tr.mat-mdc-row:hover, [_nghost-%COMP%] tr.mat-mdc-row.highlight{background-color:var(--base-95)}[_nghost-%COMP%] tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}[_nghost-%COMP%] .export-data .mdc-button__label{display:flex;align-items:center}[_nghost-%COMP%] .mat-mdc-cell, [_nghost-%COMP%] .mat-mdc-header-cell, [_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}[_nghost-%COMP%] .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}[_nghost-%COMP%] .mdc-data-table__cell:nth-child(2), [_nghost-%COMP%] .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}[_nghost-%COMP%] td+.cdk-column-columnSelect{display:none}[_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button, [_nghost-%COMP%] .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}[_nghost-%COMP%] .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}[_nghost-%COMP%] .filter-active{background-color:var(--neutral-95)}[_nghost-%COMP%] .row-actions{opacity:0}[_nghost-%COMP%] .highlight .row-actions{opacity:1}table[_ngcontent-%COMP%]{width:100%}.wild-search-wrapper[_ngcontent-%COMP%]{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper[_ngcontent-%COMP%] input[_ngcontent-%COMP%]{margin-right:30px}.wild-search-wrapper[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%]{color:var(--base-40)}.wild-search-wrapper[_ngcontent-%COMP%] .wild-search-clear-btn[_ngcontent-%COMP%]{position:absolute;right:3px}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .mat-mdc-button-touch-target[_ngcontent-%COMP%]{height:33px!important;width:33px!important}.wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] mat-icon[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons[_ngcontent-%COMP%], .wild-search-wrapper[_ngcontent-%COMP%] .mat-mdc-icon-button[_ngcontent-%COMP%] .material-icons-outlined[_ngcontent-%COMP%]{top:5px!important;left:5px!important}.mobile[_ngcontent-%COMP%] .wild-search-wrapper[_ngcontent-%COMP%]{margin:0}.column-selector-wrapper[_ngcontent-%COMP%]{display:flex;justify-content:end}.column-select-menu[_ngcontent-%COMP%]{padding:8px 18px 8px 8px}.column-select-save[_ngcontent-%COMP%]{padding-left:8px;padding-top:8px}.column-select-save[_ngcontent-%COMP%] button[_ngcontent-%COMP%]{width:100%}.row-clickable[_ngcontent-%COMP%]{cursor:pointer}.row-clickable[_ngcontent-%COMP%]:active{background-color:var(--base-70)!important}.material-icons[_ngcontent-%COMP%], .material-icons-outlined[_ngcontent-%COMP%]{margin-right:.5rem}.table-action-button[_ngcontent-%COMP%]{margin-bottom:1rem}th.mat-mdc-header-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-cell[_ngcontent-%COMP%]:first-of-type, td.mat-mdc-footer-cell[_ngcontent-%COMP%]:first-of-type{padding:0 0 0 10px}.row-select[_ngcontent-%COMP%]{width:0}.table-overflow[_ngcontent-%COMP%]{overflow-x:auto}.table-dragable[_ngcontent-%COMP%]{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable[_ngcontent-%COMP%]:active{cursor:grabbing}.table-sticky-header[_ngcontent-%COMP%]{max-height:70vh}"] }); }
4162
4162
  }
4163
4163
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiFunctionalTableComponent, [{
4164
4164
  type: Component,
4165
- args: [{ selector: 'tld-multi-functional-table', template: "<div [ngClass.lt-md]=\"'mobile'\" fxLayout=\"column\" fxLayoutGap=\"0.75rem\">\r\n <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"0.75rem\">\r\n <div\r\n fxFlex\r\n fxLayout.lt-md=\"column\"\r\n fxLayoutGap=\"0.75rem\"\r\n fxLayoutAlign=\"start center\"\r\n fxLayoutAlign.lt-md=\"start start\"\r\n class=\"action-row\"\r\n >\r\n <button\r\n class=\"export-data\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n *ngIf=\"exportActive\"\r\n (click)=\"export()\"\r\n >\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{ \"MULTI_FUNCTIONAL_TABLE.EXPORT\" | translate }}</span>\r\n </button>\r\n\r\n <div\r\n *ngIf=\"filterActive && showFilterToggle\"\r\n fxFlex\r\n fxLayoutGap=\"0.5rem\"\r\n fxLayoutAlign=\"start center\"\r\n >\r\n <button\r\n [class.filter-active]=\"filterBarVisible\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"toggleFilterBar()\"\r\n >\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 <div *ngIf=\"showFilterReset\" class=\"clear-filters-wrapper\">\r\n <button mat-icon-button (click)=\"clearFilters()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"showSearch\"\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"start center\"\r\n class=\"wild-search-wrapper\"\r\n >\r\n <mat-icon\r\n class=\"search-icon\"\r\n [matTooltip]=\"hideSearchTooltip ? '' : (searchTooltip | translate)\"\r\n >search</mat-icon\r\n >\r\n <input\r\n #wildSearch\r\n type=\"text\"\r\n [placeholder]=\"searchTitle | translate\"\r\n (keyup)=\"search($event)\"\r\n />\r\n <button\r\n *ngIf=\"showSearchClearButton && wildSearch.value\"\r\n mat-icon-button\r\n class=\"wild-search-clear-btn\"\r\n (click)=\"wildSearch.value = ''; search({ target: { value: '' } })\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <tld-filter-bar\r\n *ngIf=\"config.filter && config.filter.enabled\"\r\n #filterBar\r\n [filterRowVisible]=\"filterBarVisible\"\r\n [settings]=\"config.filter.settings\"\r\n (filterBarChange)=\"filtersChanged($event)\"\r\n >\r\n </tld-filter-bar>\r\n\r\n <ng-content select=\"[batchActions]\"></ng-content>\r\n\r\n <div\r\n #tableContainer\r\n class=\"table-overflow\"\r\n [class.table-sticky-header]=\"config?.stickyHeader\"\r\n [class.table-dragable]=\"tableOverflow && !config?.disableMouseDragging\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mouseup)=\"onMouseUp()\"\r\n (mouseleave)=\"onMouseUp()\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"config.dataSource\"\r\n [trackBy]=\"trackByFn\"\r\n >\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT_ALL' | translate\"\r\n [disabled]=\"config.batchConfig!.checkBoxesDisabled\"\r\n (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n >\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT' | translate\"\r\n *ngIf=\"\r\n isRowCheckboxAlwaysVisible ||\r\n hoveredRow === element ||\r\n matSelection.isSelected(element)\r\n \"\r\n [disabled]=\"\r\n config.batchConfig!.checkBoxesDisabled ||\r\n (preselectedItems.includes(element) && disablePreselectedItems)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"matSelection.isSelected(element)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayColumns; sticky: config?.stickyHeader ?? false\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayColumns\"\r\n (click)=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n ? config?.rowClickCallback(row)\r\n : null\r\n \"\r\n (mouseover)=\"hoveredRow = row\"\r\n (mouseleave)=\"hoveredRow = null\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(row)\"\r\n [class.highlight]=\"row === hoveredRow || highlightElement(row)\"\r\n ></tr>\r\n\r\n <ng-container [matColumnDef]=\"columnSelectColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <div class=\"column-selector-wrapper\">\r\n <button\r\n class=\"column-selector\"\r\n mat-icon-button\r\n color=\"primary-accent-darker\"\r\n [matMenuTriggerFor]=\"columnMenu\"\r\n >\r\n <span class=\"material-icons\">more_vert</span>\r\n </button>\r\n </div>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n ></td>\r\n </ng-container>\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 <lib-status-display [config]=\"noDataRowConfig\"></lib-status-display>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-menu\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\">\r\n {{ column.displayName | translate }}\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class=\"column-select-save\">\r\n <button\r\n mat-flat-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"updateDisplayColumns()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td:not(:first-of-type){padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}:host ::ng-deep tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}:host ::ng-deep .export-data .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .mat-mdc-cell,:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}:host ::ng-deep .mdc-data-table__cell:nth-child(2),:host ::ng-deep .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}:host ::ng-deep td+.cdk-column-columnSelect{display:none}:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button,:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}:host ::ng-deep .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}:host ::ng-deep .filter-active{background-color:var(--neutral-95)}table{width:100%}.wild-search-wrapper{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper input{margin-right:30px}.wild-search-wrapper .search-icon{color:var(--base-40)}.wild-search-wrapper .wild-search-clear-btn{position:absolute;right:3px}.wild-search-wrapper .mat-mdc-icon-button,.wild-search-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:33px!important;width:33px!important}.wild-search-wrapper .mat-mdc-icon-button mat-icon,.wild-search-wrapper .mat-mdc-icon-button .material-icons,.wild-search-wrapper .mat-mdc-icon-button .material-icons-outlined{top:5px!important;left:5px!important}.mobile .wild-search-wrapper{margin:0}.column-selector-wrapper{display:flex;justify-content:end}.column-select-menu{padding:8px 18px 8px 8px}.column-select-save{padding-left:8px;padding-top:8px}.column-select-save button{width:100%}.row-clickable{cursor:pointer}.row-clickable:active{background-color:var(--base-70)!important}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 0 0 10px}.row-select{width:0}.table-overflow{overflow-x:auto}.table-dragable{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable:active{cursor:grabbing}.table-sticky-header{max-height:70vh}\n"] }]
4165
+ args: [{ selector: 'tld-multi-functional-table', template: "<div [ngClass.lt-md]=\"'mobile'\" fxLayout=\"column\" fxLayoutGap=\"0.75rem\">\r\n <div fxLayout=\"row\" fxLayout.lt-md=\"column\" fxLayoutGap.lt-md=\"0.75rem\">\r\n <div\r\n fxFlex\r\n fxLayout.lt-md=\"column\"\r\n fxLayoutGap=\"0.75rem\"\r\n fxLayoutAlign=\"start center\"\r\n fxLayoutAlign.lt-md=\"start start\"\r\n class=\"action-row\"\r\n >\r\n <button\r\n class=\"export-data\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n *ngIf=\"exportActive\"\r\n (click)=\"export()\"\r\n >\r\n <span class=\"material-icons-outlined\">cloud_download</span>\r\n <span>{{ \"MULTI_FUNCTIONAL_TABLE.EXPORT\" | translate }}</span>\r\n </button>\r\n\r\n <div\r\n *ngIf=\"filterActive && showFilterToggle\"\r\n fxFlex\r\n fxLayoutGap=\"0.5rem\"\r\n fxLayoutAlign=\"start center\"\r\n >\r\n <button\r\n [class.filter-active]=\"filterBarVisible\"\r\n mat-stroked-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"toggleFilterBar()\"\r\n >\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 <div *ngIf=\"showFilterReset\" class=\"clear-filters-wrapper\">\r\n <button mat-icon-button (click)=\"clearFilters()\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"showSearch\"\r\n fxLayout=\"row\"\r\n fxLayoutAlign=\"start center\"\r\n class=\"wild-search-wrapper\"\r\n >\r\n <mat-icon\r\n class=\"search-icon\"\r\n [matTooltip]=\"hideSearchTooltip ? '' : (searchTooltip | translate)\"\r\n >search</mat-icon\r\n >\r\n <input\r\n #wildSearch\r\n type=\"text\"\r\n [placeholder]=\"searchTitle | translate\"\r\n (keyup)=\"search($event)\"\r\n />\r\n <button\r\n *ngIf=\"showSearchClearButton && wildSearch.value\"\r\n mat-icon-button\r\n class=\"wild-search-clear-btn\"\r\n (click)=\"wildSearch.value = ''; search({ target: { value: '' } })\"\r\n >\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n\r\n <ng-content select=\"[additionalActions]\"></ng-content>\r\n </div>\r\n\r\n <tld-filter-bar\r\n *ngIf=\"config.filter && config.filter.enabled\"\r\n #filterBar\r\n [filterRowVisible]=\"filterBarVisible\"\r\n [settings]=\"config.filter.settings\"\r\n (filterBarChange)=\"filtersChanged($event)\"\r\n >\r\n </tld-filter-bar>\r\n\r\n <ng-content select=\"[batchActions]\"></ng-content>\r\n\r\n <div\r\n #tableContainer\r\n class=\"table-overflow\"\r\n [class.table-sticky-header]=\"config?.stickyHeader\"\r\n [class.table-dragable]=\"tableOverflow && !config?.disableMouseDragging\"\r\n (mousedown)=\"onMouseDown($event)\"\r\n (mouseup)=\"onMouseUp()\"\r\n (mouseleave)=\"onMouseUp()\"\r\n (mousemove)=\"onMouseMove($event)\"\r\n >\r\n <table\r\n #table\r\n mat-table\r\n [dataSource]=\"config.dataSource\"\r\n [trackBy]=\"trackByFn\"\r\n >\r\n <ng-content></ng-content>\r\n <ng-container [matColumnDef]=\"batchColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT_ALL' | translate\"\r\n [disabled]=\"config.batchConfig!.checkBoxesDisabled\"\r\n (change)=\"toggleAllRowSelection()\"\r\n [checked]=\"matSelection.hasValue() && isAllSelected()\"\r\n [indeterminate]=\"matSelection.hasValue() && !isAllSelected()\"\r\n >\r\n </mat-checkbox>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n >\r\n <mat-checkbox\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.SELECT' | translate\"\r\n *ngIf=\"\r\n isRowCheckboxAlwaysVisible ||\r\n hoveredRow === element ||\r\n matSelection.isSelected(element)\r\n \"\r\n [disabled]=\"\r\n config.batchConfig!.checkBoxesDisabled ||\r\n (preselectedItems.includes(element) && disablePreselectedItems)\r\n \"\r\n (click)=\"$event.stopPropagation()\"\r\n (change)=\"toggleElementSelection(element)\"\r\n [checked]=\"matSelection.isSelected(element)\"\r\n >\r\n </mat-checkbox>\r\n </td>\r\n </ng-container>\r\n <tr\r\n mat-header-row\r\n *matHeaderRowDef=\"displayColumns; sticky: config?.stickyHeader ?? false\"\r\n ></tr>\r\n <tr\r\n mat-row\r\n *matRowDef=\"let row; columns: displayColumns\"\r\n (click)=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n ? config?.rowClickCallback(row)\r\n : null\r\n \"\r\n (mouseover)=\"hoveredRow = row\"\r\n (mouseleave)=\"hoveredRow = null\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(row)\"\r\n [class.highlight]=\"row === hoveredRow || highlightElement(row)\"\r\n ></tr>\r\n\r\n <ng-container [matColumnDef]=\"columnSelectColumnName\">\r\n <th class=\"row-select\" mat-header-cell *matHeaderCellDef disable-export>\r\n <div class=\"column-selector-wrapper\">\r\n <button\r\n class=\"column-selector\"\r\n mat-icon-button\r\n color=\"primary-accent-darker\"\r\n [matMenuTriggerFor]=\"columnMenu\"\r\n >\r\n <span class=\"material-icons\">more_vert</span>\r\n </button>\r\n </div>\r\n </th>\r\n <td\r\n class=\"row-select\"\r\n mat-cell\r\n *matCellDef=\"let element\"\r\n disable-export\r\n ></td>\r\n </ng-container>\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 <lib-status-display [config]=\"noDataRowConfig\"></lib-status-display>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </table>\r\n </div>\r\n</div>\r\n\r\n<mat-menu #columnMenu=\"matMenu\">\r\n <div class=\"column-select-menu\" (click)=\"$event.stopPropagation()\">\r\n <div *ngFor=\"let column of configurableColumns\">\r\n <mat-checkbox [(ngModel)]=\"column.selected\">\r\n {{ column.displayName | translate }}\r\n </mat-checkbox>\r\n </div>\r\n\r\n <div class=\"column-select-save\">\r\n <button\r\n mat-flat-button\r\n color=\"primary-accent-darker\"\r\n (click)=\"updateDisplayColumns()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE\" | translate }}\r\n </button>\r\n </div>\r\n </div>\r\n</mat-menu>\r\n", styles: [":host ::ng-deep th,:host ::ng-deep tr{white-space:nowrap}:host ::ng-deep td:not(:first-of-type){padding-right:10px!important}:host ::ng-deep tr.mat-mdc-row:hover,:host ::ng-deep tr.mat-mdc-row.highlight{background-color:var(--base-95)}:host ::ng-deep tr.mat-mdc-row.highlight-error{background-color:var(--warning-light)}:host ::ng-deep .export-data .mdc-button__label{display:flex;align-items:center}:host ::ng-deep .mat-mdc-cell,:host ::ng-deep .mat-mdc-header-cell,:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-color:var(--base-70)}:host ::ng-deep .mdc-data-table__row:last-child{border-bottom-width:1px;border-bottom-style:solid}:host ::ng-deep .mdc-data-table__cell:nth-child(2),:host ::ng-deep .mdc-data-table__header-cell:nth-child(2){padding:0 16px 0 10px}:host ::ng-deep td+.cdk-column-columnSelect{display:none}:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button,:host ::ng-deep .clear-filters-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:36px!important;width:36px!important}:host ::ng-deep .clear-filters-wrapper mat-icon{margin-top:-2px;margin-left:-2px}:host ::ng-deep .filter-active{background-color:var(--neutral-95)}:host ::ng-deep .row-actions{opacity:0}:host ::ng-deep .highlight .row-actions{opacity:1}table{width:100%}.wild-search-wrapper{position:relative;padding:5px 10px;border-radius:4px;border:1px solid var(--neutral-50);margin:0 8px}.wild-search-wrapper input{margin-right:30px}.wild-search-wrapper .search-icon{color:var(--base-40)}.wild-search-wrapper .wild-search-clear-btn{position:absolute;right:3px}.wild-search-wrapper .mat-mdc-icon-button,.wild-search-wrapper .mat-mdc-icon-button .mat-mdc-button-touch-target{height:33px!important;width:33px!important}.wild-search-wrapper .mat-mdc-icon-button mat-icon,.wild-search-wrapper .mat-mdc-icon-button .material-icons,.wild-search-wrapper .mat-mdc-icon-button .material-icons-outlined{top:5px!important;left:5px!important}.mobile .wild-search-wrapper{margin:0}.column-selector-wrapper{display:flex;justify-content:end}.column-select-menu{padding:8px 18px 8px 8px}.column-select-save{padding-left:8px;padding-top:8px}.column-select-save button{width:100%}.row-clickable{cursor:pointer}.row-clickable:active{background-color:var(--base-70)!important}.material-icons,.material-icons-outlined{margin-right:.5rem}.table-action-button{margin-bottom:1rem}th.mat-mdc-header-cell:first-of-type,td.mat-mdc-cell:first-of-type,td.mat-mdc-footer-cell:first-of-type{padding:0 0 0 10px}.row-select{width:0}.table-overflow{overflow-x:auto}.table-dragable{cursor:grab;-webkit-user-select:none;user-select:none}.table-dragable:active{cursor:grabbing}.table-sticky-header{max-height:70vh}\n"] }]
4166
4166
  }], () => [{ type: DOMService }, { type: i1$1.TranslateService }], { config: [{
4167
4167
  type: Input
4168
4168
  }], highlightedElements: [{