@tilde-nlp/ngx-common 8.1.89 → 8.1.91

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

@@ -3809,6 +3809,15 @@ var ExportFormat;
     ExportFormat["CSV"] = "csv";
 })(ExportFormat || (ExportFormat = {}));
 
+var RangeSelectionErrorCode;
+(function (RangeSelectionErrorCode) {
+    RangeSelectionErrorCode["FromRequired"] = "FROM_REQUIRED";
+    RangeSelectionErrorCode["ToRequired"] = "TO_REQUIRED";
+    RangeSelectionErrorCode["FromOutOfRange"] = "FROM_OUT_OF_RANGE";
+    RangeSelectionErrorCode["ToOutOfRange"] = "TO_OUT_OF_RANGE";
+    RangeSelectionErrorCode["FromGreaterThanTo"] = "FROM_GREATER_THAN_TO";
+})(RangeSelectionErrorCode || (RangeSelectionErrorCode = {}));
+
 const _c0$a = ["*"];
 function StatusDisplayComponent_ng_container_1_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "div", 7);
@@ -3882,9 +3891,9 @@ const _c3 = ["[additionalActions]", "[batchActions]", "*"];
 const _c4 = () => [10];
 function MultiFunctionalTableComponent_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵelementStart(0, "button", 35);
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.export()); });
-    i0.ɵɵelementStart(1, "span", 33);
+    i0.ɵɵelementStart(1, "span", 36);
     i0.ɵɵtext(2, "cloud_download");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "span");
@@ -3897,7 +3906,7 @@ function MultiFunctionalTableComponent_button_3_Template(rf, ctx) { if (rf & 1)
 } }
 function MultiFunctionalTableComponent_div_4_div_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "button", 39);
+    i0.ɵɵelementStart(0, "div", 41)(1, "button", 42);
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_div_4_div_7_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
     i0.ɵɵelementStart(2, "mat-icon");
     i0.ɵɵtext(3, "close");
@@ -3905,16 +3914,16 @@ function MultiFunctionalTableComponent_div_4_div_7_Template(rf, ctx) { if (rf &
 } }
 function MultiFunctionalTableComponent_div_4_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "button", 35);
+    i0.ɵɵelementStart(0, "div", 37)(1, "button", 38);
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_div_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleFilterBar()); });
-    i0.ɵɵelementStart(2, "span", 36);
+    i0.ɵɵelementStart(2, "span", 39);
     i0.ɵɵtext(3, "filter_list");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "span");
     i0.ɵɵtext(5);
     i0.ɵɵpipe(6, "translate");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(7, MultiFunctionalTableComponent_div_4_div_7_Template, 4, 0, "div", 37);
+    i0.ɵɵtemplate(7, MultiFunctionalTableComponent_div_4_div_7_Template, 4, 0, "div", 40);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -3927,7 +3936,7 @@ function MultiFunctionalTableComponent_div_4_Template(rf, ctx) { if (rf & 1) {
 } }
 function MultiFunctionalTableComponent_div_5_button_7_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵelementStart(0, "button", 47);
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_div_5_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); i0.ɵɵnextContext(); const wildSearch_r8 = i0.ɵɵreference(5); const ctx_r2 = i0.ɵɵnextContext(); wildSearch_r8.value = ""; return i0.ɵɵresetView(ctx_r2.search({ target: { value: "" } })); });
     i0.ɵɵelementStart(1, "mat-icon");
     i0.ɵɵtext(2, "close");
@@ -3935,15 +3944,15 @@ function MultiFunctionalTableComponent_div_5_button_7_Template(rf, ctx) { if (rf
 } }
 function MultiFunctionalTableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40)(1, "mat-icon", 41);
+    i0.ɵɵelementStart(0, "div", 43)(1, "mat-icon", 44);
     i0.ɵɵpipe(2, "translate");
     i0.ɵɵtext(3, "search");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "input", 42, 4);
+    i0.ɵɵelementStart(4, "input", 45, 6);
     i0.ɵɵpipe(6, "translate");
     i0.ɵɵlistener("keyup", function MultiFunctionalTableComponent_div_5_Template_input_keyup_4_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.search($event)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, MultiFunctionalTableComponent_div_5_button_7_Template, 3, 0, "button", 43);
+    i0.ɵɵtemplate(7, MultiFunctionalTableComponent_div_5_button_7_Template, 3, 0, "button", 46);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const wildSearch_r8 = i0.ɵɵreference(5);
@@ -3957,7 +3966,7 @@ function MultiFunctionalTableComponent_div_5_Template(rf, ctx) { if (rf & 1) {
 } }
 function MultiFunctionalTableComponent_tld_filter_bar_7_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tld-filter-bar", 45, 5);
+    i0.ɵɵelementStart(0, "tld-filter-bar", 48, 7);
     i0.ɵɵlistener("filterBarChange", function MultiFunctionalTableComponent_tld_filter_bar_7_Template_tld_filter_bar_filterBarChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.filtersChanged($event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -3965,7 +3974,7 @@ function MultiFunctionalTableComponent_tld_filter_bar_7_Template(rf, ctx) { if (
     i0.ɵɵproperty("filterRowVisible", ctx_r2.filterBarVisible)("settings", ctx_r2.config.filter.settings);
 } }
 function MultiFunctionalTableComponent_th_15_button_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵelementStart(0, "button", 53);
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵelementStart(2, "mat-icon");
     i0.ɵɵtext(3, "arrow_drop_down");
@@ -3977,11 +3986,11 @@ function MultiFunctionalTableComponent_th_15_button_4_Template(rf, ctx) { if (rf
 } }
 function MultiFunctionalTableComponent_th_15_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 46)(1, "div", 47)(2, "mat-checkbox", 48);
+    i0.ɵɵelementStart(0, "th", 49)(1, "div", 50)(2, "mat-checkbox", 51);
     i0.ɵɵpipe(3, "translate");
     i0.ɵɵlistener("change", function MultiFunctionalTableComponent_th_15_Template_mat_checkbox_change_2_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleAllRowSelection()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, MultiFunctionalTableComponent_th_15_button_4_Template, 4, 4, "button", 49);
+    i0.ɵɵtemplate(4, MultiFunctionalTableComponent_th_15_button_4_Template, 4, 4, "button", 52);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -3992,7 +4001,7 @@ function MultiFunctionalTableComponent_th_15_Template(rf, ctx) { if (rf & 1) {
 } }
 function MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-checkbox", 53);
+    i0.ɵɵelementStart(0, "mat-checkbox", 56);
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template_mat_checkbox_click_0_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); })("change", function MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template_mat_checkbox_change_0_listener() { i0.ɵɵrestoreView(_r12); const element_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleElementSelection(element_r13)); });
     i0.ɵɵelementEnd();
@@ -4002,8 +4011,8 @@ function MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template(rf, ctx) {
     i0.ɵɵproperty("matTooltip", i0.ɵɵpipeBind1(1, 3, "MULTI_FUNCTIONAL_TABLE.SELECT"))("disabled", ctx_r2.config.batchConfig.checkBoxesDisabled || ctx_r2.preselectedItems.includes(element_r13) && ctx_r2.disablePreselectedItems)("checked", ctx_r2.matSelection.isSelected(element_r13));
 } }
 function MultiFunctionalTableComponent_td_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "td", 51);
-    i0.ɵɵtemplate(1, MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template, 2, 5, "mat-checkbox", 52);
+    i0.ɵɵelementStart(0, "td", 54);
+    i0.ɵɵtemplate(1, MultiFunctionalTableComponent_td_16_mat_checkbox_1_Template, 2, 5, "mat-checkbox", 55);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const element_r13 = ctx.$implicit;
@@ -4012,11 +4021,11 @@ function MultiFunctionalTableComponent_td_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngIf", ctx_r2.isRowCheckboxAlwaysVisible || ctx_r2.hoveredRow === element_r13 || ctx_r2.matSelection.isSelected(element_r13));
 } }
 function MultiFunctionalTableComponent_tr_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "tr", 54);
+    i0.ɵɵelement(0, "tr", 57);
 } }
 function MultiFunctionalTableComponent_tr_18_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 55);
+    i0.ɵɵelementStart(0, "tr", 58);
     i0.ɵɵlistener("click", function MultiFunctionalTableComponent_tr_18_Template_tr_click_0_listener() { const row_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView((ctx_r2.config == null ? null : ctx_r2.config.rowClickCallback) && (!ctx_r2.config.disableRowClick || !(ctx_r2.config == null ? null : ctx_r2.config.disableRowClick(row_r15))) ? ctx_r2.config == null ? null : ctx_r2.config.rowClickCallback(row_r15) : null); })("mouseover", function MultiFunctionalTableComponent_tr_18_Template_tr_mouseover_0_listener() { const ctx_r15 = i0.ɵɵrestoreView(_r14); const row_r15 = ctx_r15.$implicit; const index_r17 = ctx_r15.index; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.rowHovered(index_r17, row_r15)); })("mouseleave", function MultiFunctionalTableComponent_tr_18_Template_tr_mouseleave_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.rowHoverLeave()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -4026,7 +4035,7 @@ function MultiFunctionalTableComponent_tr_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵclassProp("row-clickable", (ctx_r2.config == null ? null : ctx_r2.config.rowClickCallback) && (!ctx_r2.config.disableRowClick || !(ctx_r2.config == null ? null : ctx_r2.config.disableRowClick(row_r15))))("highlight-error", ctx_r2.highlightErrorElement(index_r17, row_r15))("highlight", ctx_r2.isElementHighlighted(index_r17, row_r15));
 } }
 function MultiFunctionalTableComponent_th_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "th", 46)(1, "div", 56)(2, "button", 57)(3, "span", 36);
+    i0.ɵɵelementStart(0, "th", 49)(1, "div", 59)(2, "button", 60)(3, "span", 39);
     i0.ɵɵtext(4, "more_vert");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -4036,11 +4045,11 @@ function MultiFunctionalTableComponent_th_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("matMenuTriggerFor", columnMenu_r18);
 } }
 function MultiFunctionalTableComponent_td_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "td", 51);
+    i0.ɵɵelement(0, "td", 54);
 } }
 function MultiFunctionalTableComponent_ng_container_22_tr_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 59);
-    i0.ɵɵelement(2, "lib-status-display", 60);
+    i0.ɵɵelementStart(0, "tr")(1, "td", 62);
+    i0.ɵɵelement(2, "lib-status-display", 63);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -4049,12 +4058,12 @@ function MultiFunctionalTableComponent_ng_container_22_tr_1_Template(rf, ctx) {
 } }
 function MultiFunctionalTableComponent_ng_container_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, MultiFunctionalTableComponent_ng_container_22_tr_1_Template, 3, 1, "tr", 58);
+    i0.ɵɵtemplate(1, MultiFunctionalTableComponent_ng_container_22_tr_1_Template, 3, 1, "tr", 61);
     i0.ɵɵelementContainerEnd();
 } }
 function MultiFunctionalTableComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mat-paginator", 61);
+    i0.ɵɵelementStart(0, "mat-paginator", 64);
     i0.ɵɵpipe(1, "translate");
     i0.ɵɵlistener("page", function MultiFunctionalTableComponent_Conditional_23_Template_mat_paginator_page_0_listener($event) { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.paginatorChange($event)); });
     i0.ɵɵelementEnd();
@@ -4065,7 +4074,7 @@ function MultiFunctionalTableComponent_Conditional_23_Template(rf, ctx) { if (rf
 } }
 function MultiFunctionalTableComponent_div_27_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div")(1, "mat-checkbox", 62);
+    i0.ɵɵelementStart(0, "div")(1, "mat-checkbox", 65);
     i0.ɵɵtwoWayListener("ngModelChange", function MultiFunctionalTableComponent_div_27_Template_mat_checkbox_ngModelChange_1_listener($event) { const column_r22 = i0.ɵɵrestoreView(_r21).$implicit; i0.ɵɵtwoWayBindingSet(column_r22.selected, $event) || (column_r22.selected = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵtext(2);
     i0.ɵɵpipe(3, "translate");
@@ -4077,6 +4086,33 @@ function MultiFunctionalTableComponent_div_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(3, 2, column_r22.displayName), " ");
 } }
+function MultiFunctionalTableComponent_span_52_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_REQUIRED"), " ");
+} }
+function MultiFunctionalTableComponent_span_53_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_OUT_OF_RANGE"), " ");
+} }
+function MultiFunctionalTableComponent_span_54_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1);
+    i0.ɵɵpipe(2, "translate");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(2, 1, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_ERROR_FROM_GREATER"), " ");
+} }
 class MultiFunctionalTableComponent {
     #dataSource;
     get dataSource() {
@@ -4086,6 +4122,12 @@ class MultiFunctionalTableComponent {
         this.matSelection.setSelection(...(value ?? []));
     }
     get ignoreAttributeName() { return DISABLE_EXPORT_ATTRIBUTE_NAME; }
+    get rangeSelectionRowCount() {
+        return this.dataSource?.data.length ?? 0;
+    }
+    get rangeSelectionInvalid() {
+        return this.rangeSelectionErrors.length > 0;
+    }
     get filterActive() { return this.config.filter?.enabled; }
     get showFilterToggle() { return !this.config.filter?.hideFilterToggle; }
     get showFilterReset() { return this.config.filter?.settings.filters?.find(filter => filter.selectedValues?.length); }
@@ -4102,13 +4144,14 @@ class MultiFunctionalTableComponent {
         this.paginatorUpdate = new EventEmitter();
         this.exported = new EventEmitter();
         this.selectionChange = this.matSelection.changed.asObservable().pipe(map(() => { return this.matSelection.selected; }));
-        this.rangeSelectionApplied = new EventEmitter();
         /** This property will be taken into account only if config.DataSource not set. */
         this.data = input(...(ngDevMode ? [undefined, { debugName: "data" }] : []));
         this.dataSourceUpdateEffect = effect(() => { this.updateDataSourceData(); }, ...(ngDevMode ? [{ debugName: "dataSourceUpdateEffect" }] : []));
         this.noDataRowIcon = "manage_search";
         this.rangeSelectionFrom = null;
         this.rangeSelectionTo = null;
+        this.rangeSelectionFromGreaterThanTo = false;
+        this.rangeSelectionErrors = [];
         this.isDragging = false;
         this.startX = 0;
         this.startY = 0;
@@ -4248,17 +4291,41 @@ class MultiFunctionalTableComponent {
     toggleElementSelection(element) {
         this.matSelection.toggle(element);
     }
+    recalculateRangeSelection() {
+        const errors = [];
+        if (this.rangeSelectionFrom == null) {
+            errors.push(RangeSelectionErrorCode.FromRequired);
+        }
+        if (this.rangeSelectionTo == null) {
+            errors.push(RangeSelectionErrorCode.ToRequired);
+        }
+        if (this.rangeSelectionFrom != null && Number.isInteger(this.rangeSelectionFrom) && (this.rangeSelectionFrom < 1 || this.rangeSelectionFrom > this.rangeSelectionRowCount)) {
+            errors.push(RangeSelectionErrorCode.FromOutOfRange);
+        }
+        if (this.rangeSelectionTo != null && Number.isInteger(this.rangeSelectionTo) && (this.rangeSelectionTo < 1 || this.rangeSelectionTo > this.rangeSelectionRowCount)) {
+            errors.push(RangeSelectionErrorCode.ToOutOfRange);
+        }
+        this.rangeSelectionFromGreaterThanTo =
+            this.rangeSelectionFrom != null && this.rangeSelectionTo != null && Number.isInteger(this.rangeSelectionFrom) && Number.isInteger(this.rangeSelectionTo) && this.rangeSelectionFrom > this.rangeSelectionTo;
+        if (this.rangeSelectionFromGreaterThanTo) {
+            errors.push(RangeSelectionErrorCode.FromGreaterThanTo);
+        }
+        this.rangeSelectionErrors = errors;
+    }
+    onRangeSelectionFromChange(value) {
+        this.rangeSelectionFrom = value;
+        this.recalculateRangeSelection();
+    }
+    onRangeSelectionToChange(value) {
+        this.rangeSelectionTo = value;
+        this.recalculateRangeSelection();
+    }
     applyRangeSelection() {
-        if (this.rangeSelectionFrom == null || this.rangeSelectionTo == null) {
+        this.recalculateRangeSelection();
+        if (this.rangeSelectionErrors.length) {
             return;
         }
-        const start = Math.min(this.rangeSelectionFrom, this.rangeSelectionTo);
-        const end = Math.max(this.rangeSelectionFrom, this.rangeSelectionTo);
-        const selectedIndexes = [];
-        for (let index = start; index <= end; index++) {
-            selectedIndexes.push(index);
-        }
-        this.rangeSelectionApplied.emit(selectedIndexes);
+        this.selection = this.dataSource?.data.slice(this.rangeSelectionFrom - 1, this.rangeSelectionTo);
     }
     onMouseDown(event) {
         if (this.config.disableMouseDragging) {
@@ -4444,66 +4511,71 @@ class MultiFunctionalTableComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.filterBar = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.paginator = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.tableElementRef = _t.first);
-        } }, inputs: { config: "config", highlightedElements: "highlightedElements", trackByFn: "trackByFn", highlightedErrorElements: "highlightedErrorElements", selection: "selection", isRowCheckboxAlwaysVisible: "isRowCheckboxAlwaysVisible", disablePreselectedItems: "disablePreselectedItems", data: [1, "data"] }, outputs: { filterBarChange: "filterBarChange", paginatorUpdate: "paginatorUpdate", exported: "exported", selectionChange: "selectionChange", rangeSelectionApplied: "rangeSelectionApplied" }, standalone: false, ngContentSelectors: _c3, decls: 53, vars: 36, consts: [["tableContainer", ""], ["table", ""], ["columnMenu", "matMenu"], ["rangeSelectMenu", "matMenu"], ["wildSearch", ""], ["filterBar", ""], ["fxLayout", "column", "fxLayoutGap", "0.75rem", 3, "ngClass.lt-md"], ["fxLayout", "row", "fxLayout.lt-md", "column", "fxLayoutGap.lt-md", "0.75rem"], ["fxFlex", "", "fxLayout.lt-md", "column", "fxLayoutGap", "0.75rem", "fxLayoutAlign", "start center", "fxLayoutAlign.lt-md", "start start", 1, "action-row"], ["class", "export-data", "mat-stroked-button", "", "color", "accent", 3, "click", 4, "ngIf"], ["fxFlex", "", "fxLayoutGap", "0.5rem", "fxLayoutAlign", "start center", 4, "ngIf"], ["fxLayout", "row", "fxLayoutAlign", "start center", "class", "wild-search-wrapper", 4, "ngIf"], [3, "filterRowVisible", "settings", "filterBarChange", 4, "ngIf"], [1, "table-overflow", 3, "mousedown", "mouseup", "mouseleave", "mousemove"], ["mat-table", "", 3, "dataSource", "trackBy"], [3, "matColumnDef"], ["class", "row-select", "mat-header-cell", "", "disable-export", "", 4, "matHeaderCellDef"], ["class", "row-select", "mat-cell", "", "disable-export", "", 4, "matCellDef"], ["mat-header-row", "", 4, "matHeaderRowDef", "matHeaderRowDefSticky"], ["mat-row", "", 3, "row-clickable", "highlight-error", "highlight", "click", "mouseover", "mouseleave", 4, "matRowDef", "matRowDefColumns"], [4, "ngIf"], [3, "pageSize", "hidePageSize", "showFirstLastButtons", "pageSizeOptions"], [1, "column-select-menu", 3, "click"], [4, "ngFor", "ngForOf"], [1, "column-select-save"], ["mat-flat-button", "", "color", "accent", 3, "click"], [1, "range-select-menu", 3, "click", "keydown"], [1, "range-select-title"], [1, "range-select-inputs"], ["appearance", "outline", 1, "range-select-field"], ["matInput", "", "type", "number", "min", "1", 3, "ngModelChange", "ngModel"], [1, "range-select-apply"], ["mat-stroked-button", "", "color", "accent", 1, "export-data", 3, "click"], [1, "material-icons-outlined"], ["fxFlex", "", "fxLayoutGap", "0.5rem", "fxLayoutAlign", "start center"], ["mat-stroked-button", "", "color", "accent", 3, "click"], [1, "material-icons"], ["class", "clear-filters-wrapper", 4, "ngIf"], [1, "clear-filters-wrapper"], ["mat-icon-button", "", 3, "click"], ["fxLayout", "row", "fxLayoutAlign", "start center", 1, "wild-search-wrapper"], [1, "search-icon", 3, "matTooltip"], ["type", "text", 3, "keyup", "value", "placeholder"], ["mat-icon-button", "", "class", "wild-search-clear-btn", 3, "click", 4, "ngIf"], ["mat-icon-button", "", 1, "wild-search-clear-btn", 3, "click"], [3, "filterBarChange", "filterRowVisible", "settings"], ["mat-header-cell", "", "disable-export", "", 1, "row-select"], [1, "batch-header"], [3, "change", "matTooltip", "disabled", "checked", "indeterminate"], ["class", "range-select-trigger", "mat-icon-button", "", 3, "matTooltip", "matMenuTriggerFor", 4, "ngIf"], ["mat-icon-button", "", 1, "range-select-trigger", 3, "matTooltip", "matMenuTriggerFor"], ["mat-cell", "", "disable-export", "", 1, "row-select"], [3, "matTooltip", "disabled", "checked", "click", "change", 4, "ngIf"], [3, "click", "change", "matTooltip", "disabled", "checked"], ["mat-header-row", ""], ["mat-row", "", 3, "click", "mouseover", "mouseleave"], [1, "column-selector-wrapper"], ["mat-icon-button", "", "color", "accent", 1, "column-selector", 3, "matMenuTriggerFor"], [4, "matNoDataRow"], ["colspan", "99"], [3, "config"], [3, "page", "pageSize", "hidePageSize", "showFirstLastButtons", "pageSizeOptions"], [3, "ngModelChange", "ngModel"]], template: function MultiFunctionalTableComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { config: "config", highlightedElements: "highlightedElements", trackByFn: "trackByFn", highlightedErrorElements: "highlightedErrorElements", selection: "selection", isRowCheckboxAlwaysVisible: "isRowCheckboxAlwaysVisible", disablePreselectedItems: "disablePreselectedItems", data: [1, "data"] }, outputs: { filterBarChange: "filterBarChange", paginatorUpdate: "paginatorUpdate", exported: "exported", selectionChange: "selectionChange" }, standalone: false, ngContentSelectors: _c3, decls: 59, vars: 41, consts: [["tableContainer", ""], ["table", ""], ["columnMenu", "matMenu"], ["rangeSelectMenu", "matMenu"], ["fromField", "ngModel"], ["toField", "ngModel"], ["wildSearch", ""], ["filterBar", ""], ["fxLayout", "column", "fxLayoutGap", "0.75rem", 3, "ngClass.lt-md"], ["fxLayout", "row", "fxLayout.lt-md", "column", "fxLayoutGap.lt-md", "0.75rem"], ["fxFlex", "", "fxLayout.lt-md", "column", "fxLayoutGap", "0.75rem", "fxLayoutAlign", "start center", "fxLayoutAlign.lt-md", "start start", 1, "action-row"], ["class", "export-data", "mat-stroked-button", "", "color", "accent", 3, "click", 4, "ngIf"], ["fxFlex", "", "fxLayoutGap", "0.5rem", "fxLayoutAlign", "start center", 4, "ngIf"], ["fxLayout", "row", "fxLayoutAlign", "start center", "class", "wild-search-wrapper", 4, "ngIf"], [3, "filterRowVisible", "settings", "filterBarChange", 4, "ngIf"], [1, "table-overflow", 3, "mousedown", "mouseup", "mouseleave", "mousemove"], ["mat-table", "", 3, "dataSource", "trackBy"], [3, "matColumnDef"], ["class", "row-select", "mat-header-cell", "", "disable-export", "", 4, "matHeaderCellDef"], ["class", "row-select", "mat-cell", "", "disable-export", "", 4, "matCellDef"], ["mat-header-row", "", 4, "matHeaderRowDef", "matHeaderRowDefSticky"], ["mat-row", "", 3, "row-clickable", "highlight-error", "highlight", "click", "mouseover", "mouseleave", 4, "matRowDef", "matRowDefColumns"], [4, "ngIf"], [3, "pageSize", "hidePageSize", "showFirstLastButtons", "pageSizeOptions"], [1, "column-select-menu", 3, "click"], [4, "ngFor", "ngForOf"], [1, "column-select-save"], ["mat-flat-button", "", "color", "accent", 3, "click"], [1, "range-select-menu", 3, "click", "keydown"], [1, "range-select-title"], [1, "range-select-inputs"], ["appearance", "outline", 1, "range-select-field"], ["matInput", "", "type", "number", "required", "", "min", "1", 3, "ngModelChange", "max", "ngModel"], [1, "range-select-errors"], [1, "range-select-apply"], ["mat-stroked-button", "", "color", "accent", 1, "export-data", 3, "click"], [1, "material-icons-outlined"], ["fxFlex", "", "fxLayoutGap", "0.5rem", "fxLayoutAlign", "start center"], ["mat-stroked-button", "", "color", "accent", 3, "click"], [1, "material-icons"], ["class", "clear-filters-wrapper", 4, "ngIf"], [1, "clear-filters-wrapper"], ["mat-icon-button", "", 3, "click"], ["fxLayout", "row", "fxLayoutAlign", "start center", 1, "wild-search-wrapper"], [1, "search-icon", 3, "matTooltip"], ["type", "text", 3, "keyup", "value", "placeholder"], ["mat-icon-button", "", "class", "wild-search-clear-btn", 3, "click", 4, "ngIf"], ["mat-icon-button", "", 1, "wild-search-clear-btn", 3, "click"], [3, "filterBarChange", "filterRowVisible", "settings"], ["mat-header-cell", "", "disable-export", "", 1, "row-select"], [1, "batch-header"], [3, "change", "matTooltip", "disabled", "checked", "indeterminate"], ["class", "range-select-trigger", "mat-icon-button", "", 3, "matTooltip", "matMenuTriggerFor", 4, "ngIf"], ["mat-icon-button", "", 1, "range-select-trigger", 3, "matTooltip", "matMenuTriggerFor"], ["mat-cell", "", "disable-export", "", 1, "row-select"], [3, "matTooltip", "disabled", "checked", "click", "change", 4, "ngIf"], [3, "click", "change", "matTooltip", "disabled", "checked"], ["mat-header-row", ""], ["mat-row", "", 3, "click", "mouseover", "mouseleave"], [1, "column-selector-wrapper"], ["mat-icon-button", "", "color", "accent", 1, "column-selector", 3, "matMenuTriggerFor"], [4, "matNoDataRow"], ["colspan", "99"], [3, "config"], [3, "page", "pageSize", "hidePageSize", "showFirstLastButtons", "pageSizeOptions"], [3, "ngModelChange", "ngModel"]], template: function MultiFunctionalTableComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵprojectionDef(_c2$1);
-            i0.ɵɵelementStart(0, "div", 6)(1, "div", 7)(2, "div", 8);
-            i0.ɵɵtemplate(3, MultiFunctionalTableComponent_button_3_Template, 6, 3, "button", 9)(4, MultiFunctionalTableComponent_div_4_Template, 8, 6, "div", 10);
+            i0.ɵɵelementStart(0, "div", 8)(1, "div", 9)(2, "div", 10);
+            i0.ɵɵtemplate(3, MultiFunctionalTableComponent_button_3_Template, 6, 3, "button", 11)(4, MultiFunctionalTableComponent_div_4_Template, 8, 6, "div", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, MultiFunctionalTableComponent_div_5_Template, 8, 8, "div", 11);
+            i0.ɵɵtemplate(5, MultiFunctionalTableComponent_div_5_Template, 8, 8, "div", 13);
             i0.ɵɵprojection(6);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(7, MultiFunctionalTableComponent_tld_filter_bar_7_Template, 2, 2, "tld-filter-bar", 12);
+            i0.ɵɵtemplate(7, MultiFunctionalTableComponent_tld_filter_bar_7_Template, 2, 2, "tld-filter-bar", 14);
             i0.ɵɵprojection(8, 1);
-            i0.ɵɵelementStart(9, "div", 13, 0);
+            i0.ɵɵelementStart(9, "div", 15, 0);
             i0.ɵɵlistener("mousedown", function MultiFunctionalTableComponent_Template_div_mousedown_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseDown($event)); })("mouseup", function MultiFunctionalTableComponent_Template_div_mouseup_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseUp()); })("mouseleave", function MultiFunctionalTableComponent_Template_div_mouseleave_9_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseUp()); })("mousemove", function MultiFunctionalTableComponent_Template_div_mousemove_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onMouseMove($event)); });
-            i0.ɵɵelementStart(11, "table", 14, 1);
+            i0.ɵɵelementStart(11, "table", 16, 1);
             i0.ɵɵprojection(13, 2);
-            i0.ɵɵelementContainerStart(14, 15);
-            i0.ɵɵtemplate(15, MultiFunctionalTableComponent_th_15_Template, 5, 7, "th", 16)(16, MultiFunctionalTableComponent_td_16_Template, 2, 1, "td", 17);
+            i0.ɵɵelementContainerStart(14, 17);
+            i0.ɵɵtemplate(15, MultiFunctionalTableComponent_th_15_Template, 5, 7, "th", 18)(16, MultiFunctionalTableComponent_td_16_Template, 2, 1, "td", 19);
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵtemplate(17, MultiFunctionalTableComponent_tr_17_Template, 1, 0, "tr", 18)(18, MultiFunctionalTableComponent_tr_18_Template, 1, 6, "tr", 19);
-            i0.ɵɵelementContainerStart(19, 15);
-            i0.ɵɵtemplate(20, MultiFunctionalTableComponent_th_20_Template, 5, 1, "th", 16)(21, MultiFunctionalTableComponent_td_21_Template, 1, 0, "td", 17);
+            i0.ɵɵtemplate(17, MultiFunctionalTableComponent_tr_17_Template, 1, 0, "tr", 20)(18, MultiFunctionalTableComponent_tr_18_Template, 1, 6, "tr", 21);
+            i0.ɵɵelementContainerStart(19, 17);
+            i0.ɵɵtemplate(20, MultiFunctionalTableComponent_th_20_Template, 5, 1, "th", 18)(21, MultiFunctionalTableComponent_td_21_Template, 1, 0, "td", 19);
             i0.ɵɵelementContainerEnd();
-            i0.ɵɵtemplate(22, MultiFunctionalTableComponent_ng_container_22_Template, 2, 0, "ng-container", 20);
+            i0.ɵɵtemplate(22, MultiFunctionalTableComponent_ng_container_22_Template, 2, 0, "ng-container", 22);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(23, MultiFunctionalTableComponent_Conditional_23_Template, 2, 8, "mat-paginator", 21);
+            i0.ɵɵconditionalCreate(23, MultiFunctionalTableComponent_Conditional_23_Template, 2, 8, "mat-paginator", 23);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(24, "mat-menu", null, 2)(26, "div", 22);
+            i0.ɵɵelementStart(24, "mat-menu", null, 2)(26, "div", 24);
             i0.ɵɵlistener("click", function MultiFunctionalTableComponent_Template_div_click_26_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-            i0.ɵɵtemplate(27, MultiFunctionalTableComponent_div_27_Template, 4, 4, "div", 23);
-            i0.ɵɵelementStart(28, "div", 24)(29, "button", 25);
+            i0.ɵɵtemplate(27, MultiFunctionalTableComponent_div_27_Template, 4, 4, "div", 25);
+            i0.ɵɵelementStart(28, "div", 26)(29, "button", 27);
             i0.ɵɵlistener("click", function MultiFunctionalTableComponent_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.updateDisplayColumns()); });
             i0.ɵɵtext(30);
             i0.ɵɵpipe(31, "translate");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(32, "mat-menu", null, 3)(34, "div", 26);
+            i0.ɵɵelementStart(32, "mat-menu", null, 3)(34, "div", 28);
             i0.ɵɵlistener("click", function MultiFunctionalTableComponent_Template_div_click_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); })("keydown", function MultiFunctionalTableComponent_Template_div_keydown_34_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
-            i0.ɵɵelementStart(35, "div", 27);
+            i0.ɵɵelementStart(35, "div", 29);
             i0.ɵɵtext(36);
             i0.ɵɵpipe(37, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(38, "div", 28)(39, "mat-form-field", 29)(40, "mat-label");
+            i0.ɵɵelementStart(38, "div", 30)(39, "mat-form-field", 31)(40, "mat-label");
             i0.ɵɵtext(41);
             i0.ɵɵpipe(42, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(43, "input", 30);
-            i0.ɵɵtwoWayListener("ngModelChange", function MultiFunctionalTableComponent_Template_input_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.rangeSelectionFrom, $event) || (ctx.rangeSelectionFrom = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementStart(43, "input", 32, 4);
+            i0.ɵɵlistener("ngModelChange", function MultiFunctionalTableComponent_Template_input_ngModelChange_43_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRangeSelectionFromChange($event)); });
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(44, "mat-form-field", 29)(45, "mat-label");
-            i0.ɵɵtext(46);
-            i0.ɵɵpipe(47, "translate");
+            i0.ɵɵelementStart(45, "mat-form-field", 31)(46, "mat-label");
+            i0.ɵɵtext(47);
+            i0.ɵɵpipe(48, "translate");
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(48, "input", 30);
-            i0.ɵɵtwoWayListener("ngModelChange", function MultiFunctionalTableComponent_Template_input_ngModelChange_48_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.rangeSelectionTo, $event) || (ctx.rangeSelectionTo = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵelementStart(49, "input", 32, 5);
+            i0.ɵɵlistener("ngModelChange", function MultiFunctionalTableComponent_Template_input_ngModelChange_49_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRangeSelectionToChange($event)); });
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(49, "div", 31)(50, "button", 25);
-            i0.ɵɵlistener("click", function MultiFunctionalTableComponent_Template_button_click_50_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.applyRangeSelection()); });
-            i0.ɵɵtext(51);
-            i0.ɵɵpipe(52, "translate");
+            i0.ɵɵelementStart(51, "div", 33);
+            i0.ɵɵtemplate(52, MultiFunctionalTableComponent_span_52_Template, 3, 3, "span", 22)(53, MultiFunctionalTableComponent_span_53_Template, 3, 3, "span", 22)(54, MultiFunctionalTableComponent_span_54_Template, 3, 3, "span", 22);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(55, "div", 34)(56, "button", 27);
+            i0.ɵɵlistener("click", function MultiFunctionalTableComponent_Template_button_click_56_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.applyRangeSelection()); });
+            i0.ɵɵtext(57);
+            i0.ɵɵpipe(58, "translate");
             i0.ɵɵelementEnd()()()();
         } if (rf & 2) {
+            const fromField_r23 = i0.ɵɵreference(44);
+            const toField_r24 = i0.ɵɵreference(50);
             i0.ɵɵproperty("ngClass.lt-md", "mobile");
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.exportActive);
@@ -4532,24 +4604,30 @@ class MultiFunctionalTableComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵproperty("ngForOf", ctx.configurableColumns);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(31, 26, "MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(31, 31, "MULTI_FUNCTIONAL_TABLE.COLUMN_SELECT_SAVE"), " ");
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 28, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(37, 33, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TITLE"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 30, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_FROM"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(42, 35, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_FROM"));
             i0.ɵɵadvance(2);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.rangeSelectionFrom);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(47, 32, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TO"));
+            i0.ɵɵproperty("max", ctx.rangeSelectionRowCount)("ngModel", ctx.rangeSelectionFrom);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(48, 37, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_TO"));
             i0.ɵɵadvance(2);
-            i0.ɵɵtwoWayProperty("ngModel", ctx.rangeSelectionTo);
+            i0.ɵɵproperty("max", ctx.rangeSelectionRowCount)("ngModel", ctx.rangeSelectionTo);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(52, 34, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_APPLY"), " ");
-        } }, dependencies: [i1$1.NgForOf, i1$1.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$2.MatButton, i2$2.MatIconButton, i6$1.MatMenu, i6$1.MatMenuTrigger, i7.MatCheckbox, i9.MatFormField, i9.MatLabel, i9.MatInput, i4$1.DefaultValueAccessor, i4$1.NumberValueAccessor, i4$1.NgControlStatus, i4$1.MinValidator, i4$1.NgModel, FilterBarComponent, i2$4.DefaultLayoutDirective, i2$4.DefaultLayoutGapDirective, i2$4.DefaultLayoutAlignDirective, i2$4.DefaultFlexDirective, i3.DefaultClassDirective, i2$3.MatTooltip, StatusDisplayComponent, i2.MatIcon, i16.MatPaginator, i1.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%]     .mobile .row-actions, [_nghost-%COMP%]     .highlight .row-actions{opacity:1}[_nghost-%COMP%]     .mat-mdc-paginator-range-actions button{padding:8px}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}.batch-header[_ngcontent-%COMP%]{display:flex;align-items:center}.range-select-trigger.mat-mdc-icon-button[_ngcontent-%COMP%]{margin-left:-4px}.range-select-menu[_ngcontent-%COMP%]{padding:12px 16px;min-width:240px}.range-select-menu[_ngcontent-%COMP%]   .range-select-title[_ngcontent-%COMP%]{font-size:1rem;font-weight:500;margin-bottom:12px}.range-select-menu[_ngcontent-%COMP%]   .range-select-inputs[_ngcontent-%COMP%]{display:flex;gap:12px}.range-select-menu[_ngcontent-%COMP%]   .range-select-field[_ngcontent-%COMP%], .range-select-menu[_ngcontent-%COMP%]   .range-select-apply[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:100%}"] }); }
+            i0.ɵɵproperty("ngIf", (fromField_r23.errors == null ? null : fromField_r23.errors["required"]) || (toField_r24.errors == null ? null : toField_r24.errors["required"]));
+            i0.ɵɵadvance();
+            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"]));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.rangeSelectionFromGreaterThanTo && !fromField_r23.errors && !toField_r24.errors);
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(58, 39, "MULTI_FUNCTIONAL_TABLE.RANGE_SELECT_APPLY"), " ");
+        } }, dependencies: [i1$1.NgForOf, i1$1.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$2.MatButton, i2$2.MatIconButton, i6$1.MatMenu, i6$1.MatMenuTrigger, i7.MatCheckbox, i9.MatFormField, i9.MatLabel, i9.MatInput, i4$1.DefaultValueAccessor, i4$1.NumberValueAccessor, i4$1.NgControlStatus, i4$1.RequiredValidator, i4$1.MinValidator, i4$1.MaxValidator, i4$1.NgModel, FilterBarComponent, i2$4.DefaultLayoutDirective, i2$4.DefaultLayoutGapDirective, i2$4.DefaultLayoutAlignDirective, i2$4.DefaultFlexDirective, i3.DefaultClassDirective, i2$3.MatTooltip, StatusDisplayComponent, i2.MatIcon, i16.MatPaginator, i1.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%]     .mobile .row-actions, [_nghost-%COMP%]     .highlight .row-actions{opacity:1}[_nghost-%COMP%]     .mat-mdc-paginator-range-actions button{padding:8px}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}.batch-header[_ngcontent-%COMP%]{display:flex;align-items:center}.range-select-trigger.mat-mdc-icon-button[_ngcontent-%COMP%]{margin-left:-4px}.range-select-menu[_ngcontent-%COMP%]{padding:12px 16px;min-width:240px}.range-select-menu[_ngcontent-%COMP%]   .range-select-title[_ngcontent-%COMP%]{font-size:1rem;font-weight:500;margin-bottom:12px}.range-select-menu[_ngcontent-%COMP%]   .range-select-inputs[_ngcontent-%COMP%]{display:flex;gap:12px}.range-select-menu[_ngcontent-%COMP%]   .range-select-field[_ngcontent-%COMP%]{width:100%}.range-select-menu[_ngcontent-%COMP%]   .range-select-errors[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]   .range-select-apply[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MultiFunctionalTableComponent, [{
         type: Component,
-        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 matInput type=\"number\" min=\"1\" [(ngModel)]=\"rangeSelectionFrom\" />\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 matInput type=\"number\" min=\"1\" [(ngModel)]=\"rangeSelectionTo\" />\r\n      </mat-form-field>\r\n    </div>\r\n\r\n    <div class=\"range-select-apply\">\r\n      <button mat-flat-button color=\"accent\" (click)=\"applyRangeSelection()\">\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,.range-select-menu .range-select-apply button{width:100%}\n"] }]
+        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"] }]
     }], () => [{ type: DOMService }, { type: i1.TranslateService }], { config: [{
             type: Input
         }], highlightedElements: [{
@@ -4572,8 +4650,6 @@ class MultiFunctionalTableComponent {
             type: Output
         }], selectionChange: [{
             type: Output
-        }], rangeSelectionApplied: [{
-            type: Output
         }], headerRowDefs: [{
             type: ContentChildren,
             args: [MatHeaderRowDef]
@@ -4605,7 +4681,7 @@ class MultiFunctionalTableComponent {
             type: ViewChild,
             args: [MatTable, { read: ElementRef }]
         }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MultiFunctionalTableComponent, { className: "MultiFunctionalTableComponent", filePath: "lib/multi-functional-table/multi-functional-table.component.ts", lineNumber: 27 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MultiFunctionalTableComponent, { className: "MultiFunctionalTableComponent", filePath: "lib/multi-functional-table/multi-functional-table.component.ts", lineNumber: 28 }); })();
 
 class StatusDisplayModule {
     static { this.ɵfac = function StatusDisplayModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StatusDisplayModule)(); }; }