@tilde-nlp/ngx-common 8.1.91 → 8.1.92
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.
|
@@ -4616,7 +4616,7 @@ class MultiFunctionalTableComponent {
|
|
|
4616
4616
|
i0.ɵɵadvance(2);
|
|
4617
4617
|
i0.ɵɵproperty("max", ctx.rangeSelectionRowCount)("ngModel", ctx.rangeSelectionTo);
|
|
4618
4618
|
i0.ɵɵadvance(3);
|
|
4619
|
-
i0.ɵɵproperty("ngIf", (fromField_r23.errors == null ? null : fromField_r23.errors["required"]) || (toField_r24.errors == null ? null : toField_r24.errors["required"]));
|
|
4619
|
+
i0.ɵɵproperty("ngIf", ((fromField_r23.errors == null ? null : fromField_r23.errors["required"]) || (toField_r24.errors == null ? null : toField_r24.errors["required"])) && fromField_r23.touched && toField_r24.touched);
|
|
4620
4620
|
i0.ɵɵadvance();
|
|
4621
4621
|
i0.ɵɵproperty("ngIf", (fromField_r23.errors == null ? null : fromField_r23.errors["min"]) || (fromField_r23.errors == null ? null : fromField_r23.errors["max"]) || (toField_r24.errors == null ? null : toField_r24.errors["min"]) || (toField_r24.errors == null ? null : toField_r24.errors["max"]));
|
|
4622
4622
|
i0.ɵɵadvance();
|
|
@@ -4627,7 +4627,7 @@ class MultiFunctionalTableComponent {
|
|
|
4627
4627
|
}
|
|
4628
4628
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiFunctionalTableComponent, [{
|
|
4629
4629
|
type: Component,
|
|
4630
|
-
args: [{ selector: 'tld-multi-functional-table', standalone: false, 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=\"accent\"\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=\"accent\"\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 [value]=\"config.filter?.settings?.searchValue ?? ''\"\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]=\"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 <div class=\"batch-header\">\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 <button\r\n *ngIf=\"config.batchConfig?.rangeSelection\"\r\n class=\"range-select-trigger\"\r\n mat-icon-button\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE' | translate\"\r\n [matMenuTriggerFor]=\"rangeSelectMenu\"\r\n >\r\n <mat-icon>arrow_drop_down</mat-icon>\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 >\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; let index = index; 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)=\"rowHovered(index,row)\"\r\n (mouseleave)=\"rowHoverLeave()\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(index, row)\"\r\n [class.highlight]=\"isElementHighlighted(index,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=\"accent\"\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\r\n @if(config.paginator?.enabled){\r\n @let paginatorConfig = config.paginator!;\r\n\r\n <mat-paginator \r\n [pageSize]=\"paginatorConfig.pageSize ?? 10\" \r\n [hidePageSize]=\"!paginatorConfig.showPageSize\" \r\n [showFirstLastButtons]=\"paginatorConfig.showFirstLastButtons\"\r\n [attr.aria-label]=\"'MULTI_FUNCTIONAL_TABLE.PAGINATOR_LABEL' | translate\" \r\n [pageSizeOptions]=\"paginatorConfig.pageSizeOptions ?? [10]\" \r\n (page)=\"paginatorChange($event)\">\r\n </mat-paginator>\r\n }\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=\"accent\"\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\r\n<mat-menu #rangeSelectMenu=\"matMenu\">\r\n <div\r\n class=\"range-select-menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"range-select-title\">\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE\" | translate }}\r\n </div>\r\n\r\n <div class=\"range-select-inputs\">\r\n <mat-form-field appearance=\"outline\" class=\"range-select-field\">\r\n <mat-label>{{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_FROM\" | translate }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n required\r\n min=\"1\"\r\n [max]=\"rangeSelectionRowCount\"\r\n [ngModel]=\"rangeSelectionFrom\"\r\n (ngModelChange)=\"onRangeSelectionFromChange($event)\"\r\n #fromField=\"ngModel\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"range-select-field\">\r\n <mat-label>{{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TO\" | translate }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n required\r\n min=\"1\"\r\n [max]=\"rangeSelectionRowCount\"\r\n [ngModel]=\"rangeSelectionTo\"\r\n (ngModelChange)=\"onRangeSelectionToChange($event)\"\r\n #toField=\"ngModel\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"range-select-errors\">\r\n <span *ngIf=\"fromField.errors?.['required'] || toField.errors?.['required']\">\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_REQUIRED\" | translate }}\r\n </span>\r\n <span\r\n *ngIf=\"\r\n fromField.errors?.['min'] ||\r\n fromField.errors?.['max'] ||\r\n toField.errors?.['min'] ||\r\n toField.errors?.['max']\r\n \"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_OUT_OF_RANGE\" | translate }}\r\n </span>\r\n <span *ngIf=\"rangeSelectionFromGreaterThanTo && !fromField.errors && !toField.errors\">\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_FROM_GREATER\" | translate }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"range-select-apply\">\r\n <button\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"applyRangeSelection()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_APPLY\" | 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 .mobile .row-actions,:host ::ng-deep .highlight .row-actions{opacity:1}:host ::ng-deep .mat-mdc-paginator-range-actions button{padding:8px}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}.batch-header{display:flex;align-items:center}.range-select-trigger.mat-mdc-icon-button{margin-left:-4px}.range-select-menu{padding:12px 16px;min-width:240px}.range-select-menu .range-select-title{font-size:1rem;font-weight:500;margin-bottom:12px}.range-select-menu .range-select-inputs{display:flex;gap:12px}.range-select-menu .range-select-field{width:100%}.range-select-menu .range-select-errors{display:flex;flex-direction:column;gap:4px;color:var(--mat-sys-error);font-size:.75rem;line-height:1.25rem;min-height:1.25rem;margin:4px 0 12px}.range-select-menu .range-select-apply button{width:100%}\n"] }]
|
|
4630
|
+
args: [{ selector: 'tld-multi-functional-table', standalone: false, 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=\"accent\"\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=\"accent\"\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 [value]=\"config.filter?.settings?.searchValue ?? ''\"\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]=\"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 <div class=\"batch-header\">\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 <button\r\n *ngIf=\"config.batchConfig?.rangeSelection\"\r\n class=\"range-select-trigger\"\r\n mat-icon-button\r\n [matTooltip]=\"'MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE' | translate\"\r\n [matMenuTriggerFor]=\"rangeSelectMenu\"\r\n >\r\n <mat-icon>arrow_drop_down</mat-icon>\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 >\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; let index = index; 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)=\"rowHovered(index,row)\"\r\n (mouseleave)=\"rowHoverLeave()\"\r\n [class.row-clickable]=\"\r\n config?.rowClickCallback && (!config.disableRowClick || !config?.disableRowClick(row))\r\n \"\r\n [class.highlight-error]=\"highlightErrorElement(index, row)\"\r\n [class.highlight]=\"isElementHighlighted(index,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=\"accent\"\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\r\n @if(config.paginator?.enabled){\r\n @let paginatorConfig = config.paginator!;\r\n\r\n <mat-paginator \r\n [pageSize]=\"paginatorConfig.pageSize ?? 10\" \r\n [hidePageSize]=\"!paginatorConfig.showPageSize\" \r\n [showFirstLastButtons]=\"paginatorConfig.showFirstLastButtons\"\r\n [attr.aria-label]=\"'MULTI_FUNCTIONAL_TABLE.PAGINATOR_LABEL' | translate\" \r\n [pageSizeOptions]=\"paginatorConfig.pageSizeOptions ?? [10]\" \r\n (page)=\"paginatorChange($event)\">\r\n </mat-paginator>\r\n }\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=\"accent\"\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\r\n<mat-menu #rangeSelectMenu=\"matMenu\">\r\n <div\r\n class=\"range-select-menu\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n >\r\n <div class=\"range-select-title\">\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE\" | translate }}\r\n </div>\r\n\r\n <div class=\"range-select-inputs\">\r\n <mat-form-field appearance=\"outline\" class=\"range-select-field\">\r\n <mat-label>{{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_FROM\" | translate }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n required\r\n min=\"1\"\r\n [max]=\"rangeSelectionRowCount\"\r\n [ngModel]=\"rangeSelectionFrom\"\r\n (ngModelChange)=\"onRangeSelectionFromChange($event)\"\r\n #fromField=\"ngModel\"\r\n />\r\n </mat-form-field>\r\n\r\n <mat-form-field appearance=\"outline\" class=\"range-select-field\">\r\n <mat-label>{{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TO\" | translate }}</mat-label>\r\n <input\r\n matInput\r\n type=\"number\"\r\n required\r\n min=\"1\"\r\n [max]=\"rangeSelectionRowCount\"\r\n [ngModel]=\"rangeSelectionTo\"\r\n (ngModelChange)=\"onRangeSelectionToChange($event)\"\r\n #toField=\"ngModel\"\r\n />\r\n </mat-form-field>\r\n </div>\r\n\r\n <div class=\"range-select-errors\">\r\n <span\r\n *ngIf=\"\r\n (fromField.errors?.['required'] || toField.errors?.['required']) &&\r\n fromField.touched &&\r\n toField.touched\r\n \"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_REQUIRED\" | translate }}\r\n </span>\r\n <span\r\n *ngIf=\"\r\n fromField.errors?.['min'] ||\r\n fromField.errors?.['max'] ||\r\n toField.errors?.['min'] ||\r\n toField.errors?.['max']\r\n \"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_OUT_OF_RANGE\" | translate }}\r\n </span>\r\n <span *ngIf=\"rangeSelectionFromGreaterThanTo && !fromField.errors && !toField.errors\">\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_FROM_GREATER\" | translate }}\r\n </span>\r\n </div>\r\n\r\n <div class=\"range-select-apply\">\r\n <button\r\n mat-flat-button\r\n color=\"accent\"\r\n (click)=\"applyRangeSelection()\"\r\n >\r\n {{ \"MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_APPLY\" | 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 .mobile .row-actions,:host ::ng-deep .highlight .row-actions{opacity:1}:host ::ng-deep .mat-mdc-paginator-range-actions button{padding:8px}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}.batch-header{display:flex;align-items:center}.range-select-trigger.mat-mdc-icon-button{margin-left:-4px}.range-select-menu{padding:12px 16px;min-width:240px}.range-select-menu .range-select-title{font-size:1rem;font-weight:500;margin-bottom:12px}.range-select-menu .range-select-inputs{display:flex;gap:12px}.range-select-menu .range-select-field{width:100%}.range-select-menu .range-select-errors{display:flex;flex-direction:column;gap:4px;color:var(--mat-sys-error);font-size:.75rem;line-height:1.25rem;min-height:1.25rem;margin:4px 0 12px}.range-select-menu .range-select-apply button{width:100%}\n"] }]
|
|
4631
4631
|
}], () => [{ type: DOMService }, { type: i1.TranslateService }], { config: [{
|
|
4632
4632
|
type: Input
|
|
4633
4633
|
}], highlightedElements: [{
|