@sme.up/ketchup 9.2.0 → 9.3.0

package/dist/collection/utils/kup-column-menu/kup-column-menu.js

@@ -16,736 +16,736 @@ const dom = document.documentElement;
  * @module KupColumnMenu
  */
 export class KupColumnMenu {
-  constructor() {
-    this.clickCb = null;
-    this.filtersColumnMenuInstance = new FiltersColumnMenu();
-    this.filtersRowsInstance = new FiltersRows();
-  }
-  /**
-   * Function called by the component when the column menu must be opened.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {string} column - Name of the column.
-   */
-  open(comp, column) {
-    this.filtersColumnMenuInstance.resetTextualFilters(comp.filters, column);
-  }
-  /**
-   * Function called by the component when the column menu must be closed.
-   * @param {HTMLKupCardElement} card - Column menu card.
-   */
-  close(card) {
-    card.menuVisible = false;
-    dom.ketchup.removeClickCallback(this.clickCb);
-    dom.ketchup.dynamicPosition.stop(card);
-  }
-  /**
-   * Function called to reposition the column menu card to the appropriate column.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   */
-  reposition(comp, card) {
-    const root = comp.rootElement.shadowRoot;
-    if (root) {
-      if (card) {
-        const column = card.dataset.column;
-        const wrapper = root.querySelector('th[data-column="' + column + '"]');
-        if (dom.ketchup.dynamicPosition.isRegistered(card)) {
-          dom.ketchup.dynamicPosition.changeAnchor(card, wrapper);
+    constructor() {
+        this.clickCb = null;
+        this.filtersColumnMenuInstance = new FiltersColumnMenu();
+        this.filtersRowsInstance = new FiltersRows();
+    }
+    /**
+     * Function called by the component when the column menu must be opened.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {string} column - Name of the column.
+     */
+    open(comp, column) {
+        this.filtersColumnMenuInstance.resetTextualFilters(comp.filters, column);
+    }
+    /**
+     * Function called by the component when the column menu must be closed.
+     * @param {HTMLKupCardElement} card - Column menu card.
+     */
+    close(card) {
+        card.menuVisible = false;
+        dom.ketchup.removeClickCallback(this.clickCb);
+        dom.ketchup.dynamicPosition.stop(card);
+    }
+    /**
+     * Function called to reposition the column menu card to the appropriate column.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     */
+    reposition(comp, card) {
+        const root = comp.rootElement.shadowRoot;
+        if (root) {
+            if (card) {
+                const column = card.dataset.column;
+                const wrapper = root.querySelector('th[data-column="' + column + '"]');
+                if (dom.ketchup.dynamicPosition.isRegistered(card)) {
+                    dom.ketchup.dynamicPosition.changeAnchor(card, wrapper);
+                }
+                else {
+                    dom.ketchup.dynamicPosition.register(card, wrapper, 0, KupDynamicPositionPlacement.BOTTOM, true);
+                }
+                if (!this.clickCb) {
+                    this.clickCb = {
+                        cb: () => {
+                            this.close(card);
+                        },
+                        el: card,
+                    };
+                }
+                dom.ketchup.addClickCallback(this.clickCb, true);
+                dom.ketchup.dynamicPosition.start(card);
+                card.menuVisible = true;
+            }
         }
-        else {
-          dom.ketchup.dynamicPosition.register(card, wrapper, 0, KupDynamicPositionPlacement.BOTTOM, true);
+    }
+    /**
+     * Function called by the column menu card to prepare its 'data' prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @param {KupCardData} currentData - 'data' prop of the column menu card when it's already initialized.
+     * @returns {GenericObject} 'data' prop of the column menu card.
+     */
+    prepData(comp, column, currentData) {
+        const data = currentData ? Object.assign({}, currentData) : {};
+        data.button = this.prepButton(comp, column);
+        data.checkbox = this.prepCheckbox(comp, column);
+        data.chip = this.prepChip(comp, column);
+        data.datepicker = this.prepIntervalDatePicker(comp, column);
+        data.object = column.objs
+            ? column.objs
+            : column.obj
+                ? [column.obj]
+                : null;
+        data.switch = this.prepSwitch(comp, column, data.object);
+        if (!currentData) {
+            data.tabbar = this.prepTabBar(comp, column);
+            data.text = [column.title];
         }
-        if (!this.clickCb) {
-          this.clickCb = {
-            cb: () => {
-              this.close(card);
-            },
-            el: card,
-          };
+        data.textfield = this.prepTextfield(comp, column);
+        data.timepicker = this.prepIntervalTimePicker(comp, column);
+        return data;
+    }
+    /**
+     * Handles the column menu's button prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Buttons props.
+     */
+    prepButton(comp, column) {
+        const props = [];
+        if (!FiltersColumnMenu.isTree(comp) &&
+            comp.showGroups) {
+            props.push({
+                className: 'printable',
+                'data-storage': {
+                    columnName: column.name,
+                },
+                icon: 'book',
+                id: KupColumnMenuIds.BUTTON_GROUP,
+                title: comp.getGroupByName(column.name) != null
+                    ? dom.ketchup.language.translate(KupLanguageGrouping.DISABLE)
+                    : dom.ketchup.language.translate(KupLanguageGrouping.ENABLE),
+            });
         }
-        dom.ketchup.addClickCallback(this.clickCb, true);
-        dom.ketchup.dynamicPosition.start(card);
-        card.menuVisible = true;
-      }
-    }
-  }
-  /**
-   * Function called by the column menu card to prepare its 'data' prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @param {KupCardData} currentData - 'data' prop of the column menu card when it's already initialized.
-   * @returns {GenericObject} 'data' prop of the column menu card.
-   */
-  prepData(comp, column, currentData) {
-    const data = currentData ? Object.assign({}, currentData) : {};
-    data.button = this.prepButton(comp, column);
-    data.checkbox = this.prepCheckbox(comp, column);
-    data.chip = this.prepChip(comp, column);
-    data.datepicker = this.prepIntervalDatePicker(comp, column);
-    data.object = column.objs
-      ? column.objs
-      : column.obj
-        ? [column.obj]
-        : null;
-    data.switch = this.prepSwitch(comp, column, data.object);
-    if (!currentData) {
-      data.tabbar = this.prepTabBar(comp, column);
-      data.text = [column.title];
-    }
-    data.textfield = this.prepTextfield(comp, column);
-    data.timepicker = this.prepIntervalTimePicker(comp, column);
-    return data;
-  }
-  /**
-   * Handles the column menu's button prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Buttons props.
-   */
-  prepButton(comp, column) {
-    const props = [];
-    if (!FiltersColumnMenu.isTree(comp) &&
-      comp.showGroups) {
-      props.push({
-        className: 'printable',
-        'data-storage': {
-          columnName: column.name,
-        },
-        icon: 'book',
-        id: KupColumnMenuIds.BUTTON_GROUP,
-        title: comp.getGroupByName(column.name) != null
-          ? dom.ketchup.language.translate(KupLanguageGrouping.DISABLE)
-          : dom.ketchup.language.translate(KupLanguageGrouping.ENABLE),
-      });
-    }
-    if (comp.removableColumns) {
-      props.push({
-        className: 'printable',
-        'data-storage': {
-          column: column,
-        },
-        icon: 'table-column-remove',
-        id: KupColumnMenuIds.BUTTON_REMOVE,
-        title: dom.ketchup.language.translate(KupLanguageColumn.HIDE),
-      });
-    }
-    if (comp.enableExtraColumns &&
-      (dom.ketchup.objects.canObjHaveExtraColumns(column.obj) ||
-        dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) {
-      props.push({
-        className: 'printable',
-        'data-storage': {
-          columnName: column.name,
-        },
-        icon: 'table-column-plus-after',
-        id: KupColumnMenuIds.BUTTON_ADD_COLUMNS,
-        title: dom.ketchup.language.translate(KupLanguageColumn.ADD),
-      });
-      props.push({
-        className: 'printable',
-        label: dom.ketchup.language.translate(KupLanguageGeneric.APPLY),
-        id: KupColumnMenuIds.BUTTON_APPLY,
-        styling: FButtonStyling.OUTLINED,
-        title: dom.ketchup.language.translate(KupLanguageGeneric.APPLY),
-      });
-    }
-    return props;
-  }
-  /**
-   * Handles the column menu's checkbox prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Checkboxes props.
-   */
-  prepCheckbox(comp, column) {
-    const props = [];
-    if (comp.showFilters &&
-      (dom.ketchup.objects.isStringObject(column.obj) ||
-        dom.ketchup.objects.isCheckbox(column.obj))) {
-      const checkBoxesFilter = this.filtersColumnMenuInstance.getCheckBoxFilterValues(comp.filters, column.name);
-      const columnValues = comp.getColumnValues(column);
-      if (columnValues.length > 0) {
-        props.push({
-          checked: checkBoxesFilter.length == 0,
-          'data-storage': {
-            column: column,
-            value: null,
-          },
-          id: KupColumnMenuIds.CHECKBOX_GLOBAL,
-          label: dom.ketchup.language.translate(KupLanguageCheckbox.ALL),
-        });
-      }
-      for (let index = 0; index < columnValues.length; index++) {
-        let label = getValueForDisplay2(columnValues[index], column);
-        if (dom.ketchup.objects.isCheckbox(column.obj)) {
-          if (columnValues[index].value == '1') {
-            label = dom.ketchup.language.translate(KupLanguageCheckbox.CHECKED);
-          }
-          else {
-            label = dom.ketchup.language.translate(KupLanguageCheckbox.UNCHECKED);
-          }
+        if (comp.removableColumns) {
+            props.push({
+                className: 'printable',
+                'data-storage': {
+                    column: column,
+                },
+                icon: 'table-column-remove',
+                id: KupColumnMenuIds.BUTTON_REMOVE,
+                title: dom.ketchup.language.translate(KupLanguageColumn.HIDE),
+            });
+        }
+        if (comp.enableExtraColumns &&
+            (dom.ketchup.objects.canObjHaveExtraColumns(column.obj) ||
+                dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) {
+            props.push({
+                className: 'printable',
+                'data-storage': {
+                    columnName: column.name,
+                },
+                icon: 'table-column-plus-after',
+                id: KupColumnMenuIds.BUTTON_ADD_COLUMNS,
+                title: dom.ketchup.language.translate(KupLanguageColumn.ADD),
+            });
+            props.push({
+                className: 'printable',
+                label: dom.ketchup.language.translate(KupLanguageGeneric.APPLY),
+                id: KupColumnMenuIds.BUTTON_APPLY,
+                styling: FButtonStyling.OUTLINED,
+                title: dom.ketchup.language.translate(KupLanguageGeneric.APPLY),
+            });
+        }
+        return props;
+    }
+    /**
+     * Handles the column menu's checkbox prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Checkboxes props.
+     */
+    prepCheckbox(comp, column) {
+        const props = [];
+        if (comp.showFilters &&
+            (dom.ketchup.objects.isStringObject(column.obj) ||
+                dom.ketchup.objects.isCheckbox(column.obj))) {
+            const checkBoxesFilter = this.filtersColumnMenuInstance.getCheckBoxFilterValues(comp.filters, column.name);
+            const columnValues = comp.getColumnValues(column);
+            if (columnValues.length > 0) {
+                props.push({
+                    checked: checkBoxesFilter.length == 0,
+                    'data-storage': {
+                        column: column,
+                        value: null,
+                    },
+                    id: KupColumnMenuIds.CHECKBOX_GLOBAL,
+                    label: dom.ketchup.language.translate(KupLanguageCheckbox.ALL),
+                });
+            }
+            for (let index = 0; index < columnValues.length; index++) {
+                let label = getValueForDisplay2(columnValues[index], column);
+                if (dom.ketchup.objects.isCheckbox(column.obj)) {
+                    if (columnValues[index].value == '1') {
+                        label = dom.ketchup.language.translate(KupLanguageCheckbox.CHECKED);
+                    }
+                    else {
+                        label = dom.ketchup.language.translate(KupLanguageCheckbox.UNCHECKED);
+                    }
+                }
+                props.push({
+                    checked: Filters.valuesArrayContainsValue(checkBoxesFilter, columnValues[index].value),
+                    'data-storage': {
+                        column: column,
+                        value: columnValues[index].value,
+                        displayedValue: getValueForDisplay2(columnValues[index], column),
+                    },
+                    label: label,
+                });
+            }
+        }
+        return props;
+    }
+    /**
+     * Handles the column menu's chip prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Chips props (only 1 is handled).
+     */
+    prepChip(comp, column) {
+        let props = [];
+        const chipProps = { data: [] };
+        if (column.children) {
+            const chipData = [];
+            for (let index = 0; index < column.children.length; index++) {
+                const child = column.children[index];
+                let childColumn = null;
+                try {
+                    if (FiltersColumnMenu.isTree(comp)) {
+                        comp.columns;
+                        childColumn = comp.columns.find((x) => x.name === child.name);
+                    }
+                    else {
+                        childColumn = comp.data.columns.find((x) => x.name === child.name);
+                    }
+                }
+                catch (error) {
+                    dom.ketchup.debug.logMessage(this, 'Child column not found (' + child.name + ')!' + error, KupDebugCategory.ERROR);
+                }
+                chipData.push({
+                    icon: child.icon ? child.icon : null,
+                    value: childColumn ? childColumn.title : '*Not found!',
+                    obj: child.obj ? child.obj : null,
+                    id: childColumn ? childColumn.name : '*NOTFND',
+                });
+            }
+            chipProps.dataSet = { initialData: [...chipData] };
+            chipProps.data = chipData;
+        }
+        chipProps.type = FChipType.INPUT;
+        props.push(chipProps);
+        return props;
+    }
+    /**
+     * Handles the column menu's switch prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @param {KupObj[]} objs - Column's objs.
+     * @returns {GenericObject[]} Switches props.
+     */
+    prepSwitch(comp, column, objs) {
+        const props = [];
+        if (!FiltersColumnMenu.isTree(comp)) {
+            if (objs &&
+                objs.length > 0 &&
+                !dom.ketchup.objects.isEmptyKupObj(objs[0])) {
+                props.push({
+                    'data-storage': {
+                        columnName: column.name,
+                    },
+                    checked: column.isKey ? true : false,
+                    id: KupColumnMenuIds.SWITCH_KEY,
+                    label: dom.ketchup.language.translate(KupLanguageRow.KEY),
+                    leadingLabel: true,
+                });
+            }
+            if (comp.showGroups) {
+                const isGroupActive = comp.getGroupByName(column.name) != null;
+                props.push({
+                    'data-storage': {
+                        columnName: column.name,
+                    },
+                    checked: isGroupActive ? true : false,
+                    id: KupColumnMenuIds.SWITCH_GROUP,
+                    label: dom.ketchup.language.translate(KupLanguageGrouping.GROUPS),
+                    leadingLabel: true,
+                });
+            }
+        }
+        return props;
+    }
+    /**
+     * Handles the column menu's tabbar prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @returns {GenericObject[]} Tab bar props.
+     */
+    prepTabBar(comp, column) {
+        const props = [{ data: [] }];
+        const data = props[0].data;
+        if (comp.showFilters) {
+            data.push({
+                id: KupLanguageGeneric.FILTERS,
+                value: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
+            });
+        }
+        if ((comp.enableExtraColumns &&
+            (dom.ketchup.objects.canObjHaveExtraColumns(column.obj) ||
+                dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) ||
+            comp.removableColumns) {
+            data.push({
+                id: KupLanguageColumn.COLUMNS,
+                value: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
+            });
+        }
+        if (!FiltersColumnMenu.isTree(comp)) {
+            data.push({
+                icon: 'settings',
+                id: KupLanguageGeneric.SETTINGS,
+                value: '',
+            });
+        }
+        if (data.length > 0) {
+            data[0].active = true;
+        }
+        return props;
+    }
+    /**
+     * Handles the column menu's textfield prop.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Text fields props.
+     */
+    prepTextfield(comp, column) {
+        let props = [];
+        if (comp.showFilters) {
+            if (this.filtersColumnMenuInstance.isColumnFiltrableByInterval(column)) {
+                props = props.concat(this.prepIntervalTextfield(comp, column));
+            }
+            else if (dom.ketchup.objects.isStringObject(column.obj)) {
+                let filterInitialValue = this.filtersColumnMenuInstance.getTextFilterValue(comp.filters, column.name);
+                filterInitialValue = getValueForDisplay(filterInitialValue, column.obj, column.decimals);
+                props.push({
+                    'data-storage': {
+                        column: column,
+                    },
+                    fullWidth: true,
+                    icon: 'magnify',
+                    id: KupColumnMenuIds.TEXTFIELD_FILTER,
+                    initialValue: filterInitialValue,
+                    isClearable: true,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
+                    trailingIcon: true,
+                });
+            }
+        }
+        if (!FiltersColumnMenu.isTree(comp)) {
+            if (dom.ketchup.objects.isNumber(column.obj) &&
+                comp.enableColumnsFormula) {
+                props.push({
+                    fullWidth: true,
+                    icon: 'functions',
+                    id: KupColumnMenuIds.TEXTFIELD_FORMULA,
+                    helper: `i.e.: [${column.name}] * 2`,
+                    label: dom.ketchup.language.translate(KupLanguageTotals.FORMULA),
+                    trailingIcon: true,
+                });
+            }
         }
+        return props;
+    }
+    /**
+     * Handles the column menu's interval textfields props (number column type).
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {Column} column - Column of the menu.
+     * @returns {GenericObject[]} Text fields props.
+     */
+    prepIntervalTextfield(comp, column) {
+        let props = [];
+        if (!comp.showFilters) {
+            return props;
+        }
+        if (!dom.ketchup.objects.isNumber(column.obj)) {
+            return props;
+        }
+        let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
+        let initialValueFrom = interval[FilterInterval.FROM];
+        let initialValueTo = interval[FilterInterval.TO];
         props.push({
-          checked: Filters.valuesArrayContainsValue(checkBoxesFilter, columnValues[index].value),
-          'data-storage': {
-            column: column,
-            value: columnValues[index].value,
-            displayedValue: getValueForDisplay2(columnValues[index], column),
-          },
-          label: label,
+            'data-storage': {
+                column: column,
+                intervalIndex: FilterInterval.FROM,
+                isInterval: true,
+            },
+            fullWidth: true,
+            helperWhenFocused: true,
+            id: KupColumnMenuIds.TEXTFIELD_FROM,
+            initialValue: initialValueFrom,
+            isClearable: true,
+            label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
+            icon: 'magnify',
+            trailingIcon: true,
         });
-      }
-    }
-    return props;
-  }
-  /**
-   * Handles the column menu's chip prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Chips props (only 1 is handled).
-   */
-  prepChip(comp, column) {
-    let props = [];
-    const chipProps = { data: [] };
-    if (column.children) {
-      const chipData = [];
-      for (let index = 0; index < column.children.length; index++) {
-        const child = column.children[index];
-        let childColumn = null;
-        try {
-          if (FiltersColumnMenu.isTree(comp)) {
-            comp.columns;
-            childColumn = comp.columns.find((x) => x.name === child.name);
-          }
-          else {
-            childColumn = comp.data.columns.find((x) => x.name === child.name);
-          }
-        }
-        catch (error) {
-          dom.ketchup.debug.logMessage(this, 'Child column not found (' + child.name + ')!' + error, KupDebugCategory.ERROR);
-        }
-        chipData.push({
-          icon: child.icon ? child.icon : null,
-          value: childColumn ? childColumn.title : '*Not found!',
-          obj: child.obj ? child.obj : null,
-          id: childColumn ? childColumn.name : '*NOTFND',
+        props.push({
+            'data-storage': {
+                column: column,
+                intervalIndex: FilterInterval.TO,
+                isInterval: true,
+            },
+            fullWidth: true,
+            helperWhenFocused: true,
+            id: KupColumnMenuIds.TEXTFIELD_TO,
+            initialValue: initialValueTo,
+            isClearable: true,
+            label: dom.ketchup.language.translate(KupLanguageSearch.TO),
+            icon: 'magnify',
+            trailingIcon: true,
         });
-      }
-      chipProps.dataSet = { initialData: [...chipData] };
-      chipProps.data = chipData;
-    }
-    chipProps.type = FChipType.INPUT;
-    props.push(chipProps);
-    return props;
-  }
-  /**
-   * Handles the column menu's switch prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @param {KupObj[]} objs - Column's objs.
-   * @returns {GenericObject[]} Switches props.
-   */
-  prepSwitch(comp, column, objs) {
-    const props = [];
-    if (!FiltersColumnMenu.isTree(comp)) {
-      if (objs &&
-        objs.length > 0 &&
-        !dom.ketchup.objects.isEmptyKupObj(objs[0])) {
+        return props;
+    }
+    /**
+     * Handles the column menu's interval timepicker props (time column type).
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Time picker fields props.
+     */
+    prepIntervalTimePicker(comp, column) {
+        let props = [];
+        if (!comp.showFilters) {
+            return props;
+        }
+        if (!dom.ketchup.objects.isTime(column.obj)) {
+            return props;
+        }
+        let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
+        let initialValueFrom = interval[FilterInterval.FROM];
+        let initialValueTo = interval[FilterInterval.TO];
         props.push({
-          'data-storage': {
-            columnName: column.name,
-          },
-          checked: column.isKey ? true : false,
-          id: KupColumnMenuIds.SWITCH_KEY,
-          label: dom.ketchup.language.translate(KupLanguageRow.KEY),
-          leadingLabel: true,
+            'data-storage': {
+                column: column,
+                intervalIndex: FilterInterval.FROM,
+                isInterval: true,
+            },
+            data: {
+                'kup-text-field': {
+                    fullWidth: true,
+                    helperWhenFocused: true,
+                    id: KupColumnMenuIds.TEXTFIELD_FROM,
+                    isClearable: true,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
+                },
+            },
+            initialValue: initialValueFrom,
+            manageSeconds: dom.ketchup.objects.isTimeWithSeconds(column.obj),
         });
-      }
-      if (comp.showGroups) {
-        const isGroupActive = comp.getGroupByName(column.name) != null;
         props.push({
-          'data-storage': {
-            columnName: column.name,
-          },
-          checked: isGroupActive ? true : false,
-          id: KupColumnMenuIds.SWITCH_GROUP,
-          label: dom.ketchup.language.translate(KupLanguageGrouping.GROUPS),
-          leadingLabel: true,
+            'data-storage': {
+                column: column,
+                intervalIndex: FilterInterval.TO,
+                isInterval: true,
+            },
+            data: {
+                'kup-text-field': {
+                    fullWidth: true,
+                    helperWhenFocused: true,
+                    id: KupColumnMenuIds.TEXTFIELD_TO,
+                    isClearable: true,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.TO),
+                },
+            },
+            initialValue: initialValueTo,
+            manageSeconds: dom.ketchup.objects.isTimeWithSeconds(column.obj),
         });
-      }
-    }
-    return props;
-  }
-  /**
-   * Handles the column menu's tabbar prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @returns {GenericObject[]} Tab bar props.
-   */
-  prepTabBar(comp, column) {
-    const props = [{ data: [] }];
-    const data = props[0].data;
-    if (comp.showFilters) {
-      data.push({
-        id: KupLanguageGeneric.FILTERS,
-        value: dom.ketchup.language.translate(KupLanguageGeneric.FILTERS),
-      });
-    }
-    if ((comp.enableExtraColumns &&
-      (dom.ketchup.objects.canObjHaveExtraColumns(column.obj) ||
-        dom.ketchup.objects.canObjsHaveExtraColumns(column.objs))) ||
-      comp.removableColumns) {
-      data.push({
-        id: KupLanguageColumn.COLUMNS,
-        value: dom.ketchup.language.translate(KupLanguageColumn.COLUMNS),
-      });
-    }
-    if (!FiltersColumnMenu.isTree(comp)) {
-      data.push({
-        icon: 'settings',
-        id: KupLanguageGeneric.SETTINGS,
-        value: '',
-      });
-    }
-    if (data.length > 0) {
-      data[0].active = true;
-    }
-    return props;
-  }
-  /**
-   * Handles the column menu's textfield prop.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Text fields props.
-   */
-  prepTextfield(comp, column) {
-    let props = [];
-    if (comp.showFilters) {
-      if (this.filtersColumnMenuInstance.isColumnFiltrableByInterval(column)) {
-        props = props.concat(this.prepIntervalTextfield(comp, column));
-      }
-      else if (dom.ketchup.objects.isStringObject(column.obj)) {
-        let filterInitialValue = this.filtersColumnMenuInstance.getTextFilterValue(comp.filters, column.name);
-        filterInitialValue = getValueForDisplay(filterInitialValue, column.obj, column.decimals);
+        return props;
+    }
+    /**
+     * Handles the column menu's interval datepicker props (date/timestamp column type).
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @returns {GenericObject[]} Date picker fields props.
+     */
+    prepIntervalDatePicker(comp, column) {
+        let props = [];
+        if (!comp.showFilters) {
+            return props;
+        }
+        if (!dom.ketchup.objects.isDate(column.obj) &&
+            !dom.ketchup.objects.isTimestamp(column.obj)) {
+            return props;
+        }
+        let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
+        let initialValueFrom = interval[FilterInterval.FROM];
+        let initialValueTo = interval[FilterInterval.TO];
+        let suffixFrom = null;
+        let suffixTo = null;
+        if (dom.ketchup.objects.isTimestamp(column.obj)) {
+            suffixFrom = ' 00:00:00';
+            suffixTo = ' 23:59:59';
+            if (initialValueFrom && initialValueFrom.length >= 10) {
+                initialValueFrom = initialValueFrom.substring(0, 10);
+            }
+            else {
+                initialValueFrom = '';
+            }
+            if (initialValueTo && initialValueTo.length >= 10) {
+                initialValueTo = initialValueTo.substring(0, 10);
+            }
+            else {
+                initialValueTo = '';
+            }
+        }
         props.push({
-          'data-storage': {
-            column: column,
-          },
-          fullWidth: true,
-          icon: 'magnify',
-          id: KupColumnMenuIds.TEXTFIELD_FILTER,
-          initialValue: filterInitialValue,
-          isClearable: true,
-          label: dom.ketchup.language.translate(KupLanguageSearch.SEARCH),
-          trailingIcon: true,
+            'data-storage': {
+                column: column,
+                suffix: suffixFrom,
+                intervalIndex: FilterInterval.FROM,
+                isInterval: true,
+            },
+            data: {
+                'kup-text-field': {
+                    fullWidth: true,
+                    helperWhenFocused: true,
+                    id: KupColumnMenuIds.TEXTFIELD_FROM,
+                    isClearable: true,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
+                },
+            },
+            initialValue: initialValueFrom,
         });
-      }
-    }
-    if (!FiltersColumnMenu.isTree(comp)) {
-      if (dom.ketchup.objects.isNumber(column.obj) &&
-        comp.enableColumnsFormula) {
         props.push({
-          fullWidth: true,
-          icon: 'functions',
-          id: KupColumnMenuIds.TEXTFIELD_FORMULA,
-          helper: `i.e.: [${column.name}] * 2`,
-          label: dom.ketchup.language.translate(KupLanguageTotals.FORMULA),
-          trailingIcon: true,
+            'data-storage': {
+                column: column,
+                suffix: suffixTo,
+                intervalIndex: FilterInterval.TO,
+                isInterval: true,
+            },
+            data: {
+                'kup-text-field': {
+                    fullWidth: true,
+                    helperWhenFocused: true,
+                    id: KupColumnMenuIds.TEXTFIELD_TO,
+                    isClearable: true,
+                    label: dom.ketchup.language.translate(KupLanguageSearch.TO),
+                },
+            },
+            initialValue: initialValueTo,
         });
-      }
-    }
-    return props;
-  }
-  /**
-   * Handles the column menu's interval textfields props (number column type).
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
-   * @returns {GenericObject[]} Text fields props.
-   */
-  prepIntervalTextfield(comp, column) {
-    let props = [];
-    if (!comp.showFilters) {
-      return props;
-    }
-    if (!dom.ketchup.objects.isNumber(column.obj)) {
-      return props;
-    }
-    let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[FilterInterval.FROM];
-    let initialValueTo = interval[FilterInterval.TO];
-    props.push({
-      'data-storage': {
-        column: column,
-        intervalIndex: FilterInterval.FROM,
-        isInterval: true,
-      },
-      fullWidth: true,
-      helperWhenFocused: true,
-      id: KupColumnMenuIds.TEXTFIELD_FROM,
-      initialValue: initialValueFrom,
-      isClearable: true,
-      label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
-      icon: 'magnify',
-      trailingIcon: true,
-    });
-    props.push({
-      'data-storage': {
-        column: column,
-        intervalIndex: FilterInterval.TO,
-        isInterval: true,
-      },
-      fullWidth: true,
-      helperWhenFocused: true,
-      id: KupColumnMenuIds.TEXTFIELD_TO,
-      initialValue: initialValueTo,
-      isClearable: true,
-      label: dom.ketchup.language.translate(KupLanguageSearch.TO),
-      icon: 'magnify',
-      trailingIcon: true,
-    });
-    return props;
-  }
-  /**
-   * Handles the column menu's interval timepicker props (time column type).
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Time picker fields props.
-   */
-  prepIntervalTimePicker(comp, column) {
-    let props = [];
-    if (!comp.showFilters) {
-      return props;
-    }
-    if (!dom.ketchup.objects.isTime(column.obj)) {
-      return props;
-    }
-    let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[FilterInterval.FROM];
-    let initialValueTo = interval[FilterInterval.TO];
-    props.push({
-      'data-storage': {
-        column: column,
-        intervalIndex: FilterInterval.FROM,
-        isInterval: true,
-      },
-      data: {
-        'kup-text-field': {
-          fullWidth: true,
-          helperWhenFocused: true,
-          id: KupColumnMenuIds.TEXTFIELD_FROM,
-          isClearable: true,
-          label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
-        },
-      },
-      initialValue: initialValueFrom,
-      manageSeconds: dom.ketchup.objects.isTimeWithSeconds(column.obj),
-    });
-    props.push({
-      'data-storage': {
-        column: column,
-        intervalIndex: FilterInterval.TO,
-        isInterval: true,
-      },
-      data: {
-        'kup-text-field': {
-          fullWidth: true,
-          helperWhenFocused: true,
-          id: KupColumnMenuIds.TEXTFIELD_TO,
-          isClearable: true,
-          label: dom.ketchup.language.translate(KupLanguageSearch.TO),
-        },
-      },
-      initialValue: initialValueTo,
-      manageSeconds: dom.ketchup.objects.isTimeWithSeconds(column.obj),
-    });
-    return props;
-  }
-  /**
-   * Handles the column menu's interval datepicker props (date/timestamp column type).
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @returns {GenericObject[]} Date picker fields props.
-   */
-  prepIntervalDatePicker(comp, column) {
-    let props = [];
-    if (!comp.showFilters) {
-      return props;
-    }
-    if (!dom.ketchup.objects.isDate(column.obj) &&
-      !dom.ketchup.objects.isTimestamp(column.obj)) {
-      return props;
+        return props;
+    }
+    /**
+     * Function called by the column menu card when a kup-card-event is received.
+     * @param {CustomEvent} cardEvent - kup-card-event emitted by the column menu.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     */
+    eventHandlers(cardEvent, comp) {
+        const card = cardEvent.detail.card
+            ? cardEvent.detail.card
+            : cardEvent.detail.comp.rootElement;
+        const compEvent = cardEvent.detail.event;
+        const compID = compEvent.detail.id;
+        const subcomp = compEvent.target;
+        const dataStorage = subcomp['data-storage'];
+        const compEventType = compEvent.type;
+        const isClickEvent = compEventType
+            .toLowerCase()
+            .endsWith('click');
+        switch (compEvent.type) {
+            case 'kup-button-click':
+                switch (compID) {
+                    case KupColumnMenuIds.BUTTON_GROUP:
+                        this.toggleGroup(comp, dataStorage['columnName']);
+                        break;
+                    case KupColumnMenuIds.BUTTON_REMOVE:
+                        comp.closeColumnMenu().then(() => {
+                            comp.hideColumn(dataStorage['column']);
+                        });
+                        break;
+                }
+                break;
+            case 'kup-checkbox-change':
+                this.checkboxChange(comp, compEvent.detail.checked, dataStorage['column'], {
+                    value: dataStorage['value'],
+                    displayedValue: dataStorage['displayedValue'],
+                });
+                break;
+            case 'kup-switch-change':
+                switch (compID) {
+                    case KupColumnMenuIds.SWITCH_GROUP:
+                        this.toggleGroup(comp, dataStorage['columnName']);
+                        break;
+                    case KupColumnMenuIds.SWITCH_KEY:
+                        this.setKey(comp, dataStorage['columnName'], compEvent.detail.value);
+                        break;
+                }
+                break;
+            case 'kup-textfield-submit':
+            case 'kup-datepicker-textfieldsubmit':
+            case 'kup-timepicker-textfieldsubmit':
+                switch (compID) {
+                    case KupColumnMenuIds.TEXTFIELD_FORMULA:
+                        break;
+                    default:
+                        this.saveTextualFilters(comp, dataStorage['column']);
+                        this.close(card);
+                        break;
+                }
+                break;
+            case 'kup-textfield-cleariconclick':
+            case 'kup-datepicker-cleariconclick':
+            case 'kup-timepicker-cleariconclick':
+                if (dataStorage['isInterval'] == true) {
+                    this.intervalChange(comp, null, dataStorage['column'], dataStorage['intervalIndex'], false);
+                }
+                else {
+                    this.textfieldChange(comp, null, dataStorage['column']);
+                }
+                this.saveTextualFilters(comp, dataStorage['column']);
+                break;
+            case 'kup-textfield-change':
+                switch (compID) {
+                    case KupColumnMenuIds.TEXTFIELD_FORMULA:
+                        comp
+                            .newColumn(KupDataNewColumnTypes.MATH, {
+                            operation: compEvent.detail.value,
+                        })
+                            .then((res) => {
+                            if (typeof res === 'string' ||
+                                res instanceof String) {
+                                const textField = compEvent.detail.comp;
+                                textField.rootElement.classList.add('kup-danger');
+                                textField.helper = res;
+                            }
+                            else {
+                                this.close(card);
+                            }
+                        });
+                        break;
+                }
+                break;
+            case 'kup-textfield-input':
+            case 'kup-datepicker-input':
+            case 'kup-datepicker-itemclick':
+            case 'kup-timepicker-input':
+            case 'kup-timepicker-itemclick':
+                switch (compID) {
+                    case KupColumnMenuIds.TEXTFIELD_FORMULA:
+                        break;
+                    default:
+                        window.clearTimeout(comp.columnFilterTimeout);
+                        comp.columnFilterTimeout = window.setTimeout(() => {
+                            if (dataStorage['isInterval'] == true) {
+                                this.intervalChange(comp, compEvent.detail.value, dataStorage['column'], dataStorage['intervalIndex'], !isClickEvent, dataStorage['suffix']);
+                            }
+                            else {
+                                this.textfieldChange(comp, compEvent.detail.value, dataStorage['column']);
+                            }
+                            if (isClickEvent) {
+                                this.saveTextualFilters(comp, dataStorage['column']);
+                            }
+                        }, 300);
+                        break;
+                }
+                break;
+        }
     }
-    let interval = this.filtersColumnMenuInstance.getIntervalTextFieldFilterValues(comp.filters, column);
-    let initialValueFrom = interval[FilterInterval.FROM];
-    let initialValueTo = interval[FilterInterval.TO];
-    let suffixFrom = null;
-    let suffixTo = null;
-    if (dom.ketchup.objects.isTimestamp(column.obj)) {
-      suffixFrom = ' 00:00:00';
-      suffixTo = ' 23:59:59';
-      if (initialValueFrom && initialValueFrom.length >= 10) {
-        initialValueFrom = initialValueFrom.substring(0, 10);
-      }
-      else {
-        initialValueFrom = '';
-      }
-      if (initialValueTo && initialValueTo.length >= 10) {
-        initialValueTo = initialValueTo.substring(0, 10);
-      }
-      else {
-        initialValueTo = '';
-      }
+    /**
+     * Triggered when the text filter changes.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {string} value - New value of the filter.
+     * @param {KupDataColumn} column - Column of the menu.
+     */
+    textfieldChange(comp, value, column) {
+        if (!FiltersColumnMenu.isTree(comp)) {
+            comp.resetCurrentPage();
+        }
+        let newFilter = '';
+        if (value) {
+            newFilter = this.filtersColumnMenuInstance.normalizeValue(value.trim(), column.obj);
+        }
+        const newFilters = Object.assign({}, comp.filters);
+        this.filtersColumnMenuInstance.setTextFieldFilterValue(newFilters, column.name, newFilter);
+        comp.filters = newFilters;
     }
-    props.push({
-      'data-storage': {
-        column: column,
-        suffix: suffixFrom,
-        intervalIndex: FilterInterval.FROM,
-        isInterval: true,
-      },
-      data: {
-        'kup-text-field': {
-          fullWidth: true,
-          helperWhenFocused: true,
-          id: KupColumnMenuIds.TEXTFIELD_FROM,
-          isClearable: true,
-          label: dom.ketchup.language.translate(KupLanguageSearch.FROM),
-        },
-      },
-      initialValue: initialValueFrom,
-    });
-    props.push({
-      'data-storage': {
-        column: column,
-        suffix: suffixTo,
-        intervalIndex: FilterInterval.TO,
-        isInterval: true,
-      },
-      data: {
-        'kup-text-field': {
-          fullWidth: true,
-          helperWhenFocused: true,
-          id: KupColumnMenuIds.TEXTFIELD_TO,
-          isClearable: true,
-          label: dom.ketchup.language.translate(KupLanguageSearch.TO),
-        },
-      },
-      initialValue: initialValueTo,
-    });
-    return props;
-  }
-  /**
-   * Function called by the column menu card when a kup-card-event is received.
-   * @param {CustomEvent} cardEvent - kup-card-event emitted by the column menu.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   */
-  eventHandlers(cardEvent, comp) {
-    const card = cardEvent.detail.card
-      ? cardEvent.detail.card
-      : cardEvent.detail.comp.rootElement;
-    const compEvent = cardEvent.detail.event;
-    const compID = compEvent.detail.id;
-    const subcomp = compEvent.target;
-    const dataStorage = subcomp['data-storage'];
-    const compEventType = compEvent.type;
-    const isClickEvent = compEventType
-      .toLowerCase()
-      .endsWith('click');
-    switch (compEvent.type) {
-      case 'kup-button-click':
-        switch (compID) {
-          case KupColumnMenuIds.BUTTON_GROUP:
-            this.toggleGroup(comp, dataStorage['columnName']);
-            break;
-          case KupColumnMenuIds.BUTTON_REMOVE:
-            comp.closeColumnMenu().then(() => {
-              comp.hideColumn(dataStorage['column']);
-            });
-            break;
+    intervalChange(comp, value, column, index, needNormalize, suffix) {
+        if (!FiltersColumnMenu.isTree(comp)) {
+            comp.resetCurrentPage();
         }
-        break;
-      case 'kup-checkbox-change':
-        this.checkboxChange(comp, compEvent.detail.checked, dataStorage['column'], {
-          value: dataStorage['value'],
-          displayedValue: dataStorage['displayedValue'],
-        });
-        break;
-      case 'kup-switch-change':
-        switch (compID) {
-          case KupColumnMenuIds.SWITCH_GROUP:
-            this.toggleGroup(comp, dataStorage['columnName']);
-            break;
-          case KupColumnMenuIds.SWITCH_KEY:
-            this.setKey(comp, dataStorage['columnName'], compEvent.detail.value);
-            break;
-        }
-        break;
-      case 'kup-textfield-submit':
-      case 'kup-datepicker-textfieldsubmit':
-      case 'kup-timepicker-textfieldsubmit':
-        switch (compID) {
-          case KupColumnMenuIds.TEXTFIELD_FORMULA:
-            break;
-          default:
-            this.saveTextualFilters(comp, dataStorage['column']);
-            this.close(card);
-            break;
-        }
-        break;
-      case 'kup-textfield-cleariconclick':
-      case 'kup-datepicker-cleariconclick':
-      case 'kup-timepicker-cleariconclick':
-        if (dataStorage['isInterval'] == true) {
-          this.intervalChange(comp, null, dataStorage['column'], dataStorage['intervalIndex'], false);
+        let newFilter = '';
+        if (value) {
+            newFilter = value.trim();
+            if (needNormalize) {
+                newFilter = this.filtersColumnMenuInstance.normalizeValue(newFilter, column.obj);
+            }
+            if (suffix != null && newFilter != '') {
+                newFilter = newFilter + suffix;
+            }
+        }
+        const newFilters = Object.assign({}, comp.filters);
+        this.filtersColumnMenuInstance.setIntervalTextFieldFilterValue(newFilters, column.name, newFilter, index);
+        comp.filters = newFilters;
+    }
+    saveTextualFilters(comp, column) {
+        const newFilters = Object.assign({}, comp.filters);
+        this.filtersColumnMenuInstance.saveTextualFilters(newFilters, column.name);
+        comp.filters = newFilters;
+    }
+    /**
+     * Triggered when the checkbox list changes.
+     * @param {KupDataTable | KupTree} comp - Component using the column menu.
+     * @param {boolean} checked - State of the changed checkbox.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @param {string} filterValue - Value used to filter.
+     */
+    checkboxChange(comp, checked, column, filterValueItem) {
+        if (!FiltersColumnMenu.isTree(comp)) {
+            comp.resetCurrentPage();
+        }
+        const newFilters = Object.assign({}, comp.filters);
+        if (checked ||
+            filterValueItem == null ||
+            filterValueItem.value == null) {
+            this.filtersColumnMenuInstance.addCheckboxFilter(newFilters, column.name, filterValueItem);
         }
         else {
-          this.textfieldChange(comp, null, dataStorage['column']);
-        }
-        this.saveTextualFilters(comp, dataStorage['column']);
-        break;
-      case 'kup-textfield-change':
-        switch (compID) {
-          case KupColumnMenuIds.TEXTFIELD_FORMULA:
-            comp
-              .newColumn(KupDataNewColumnTypes.MATH, {
-              operation: compEvent.detail.value,
-            })
-              .then((res) => {
-              if (typeof res === 'string' ||
-                res instanceof String) {
-                const textField = compEvent.detail.comp;
-                textField.rootElement.classList.add('kup-danger');
-                textField.helper = res;
-              }
-              else {
-                this.close(card);
-              }
-            });
-            break;
-        }
-        break;
-      case 'kup-textfield-input':
-      case 'kup-datepicker-input':
-      case 'kup-datepicker-itemclick':
-      case 'kup-timepicker-input':
-      case 'kup-timepicker-itemclick':
-        switch (compID) {
-          case KupColumnMenuIds.TEXTFIELD_FORMULA:
-            break;
-          default:
-            window.clearTimeout(comp.columnFilterTimeout);
-            comp.columnFilterTimeout = window.setTimeout(() => {
-              if (dataStorage['isInterval'] == true) {
-                this.intervalChange(comp, compEvent.detail.value, dataStorage['column'], dataStorage['intervalIndex'], !isClickEvent, dataStorage['suffix']);
-              }
-              else {
-                this.textfieldChange(comp, compEvent.detail.value, dataStorage['column']);
-              }
-              if (isClickEvent) {
-                this.saveTextualFilters(comp, dataStorage['column']);
-              }
-            }, 300);
-            break;
+            this.filtersColumnMenuInstance.removeCheckboxFilter(newFilters, column.name, filterValueItem.value);
         }
-        break;
-    }
-  }
-  /**
-   * Triggered when the text filter changes.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {string} value - New value of the filter.
-   * @param {KupDataColumn} column - Column of the menu.
-   */
-  textfieldChange(comp, value, column) {
-    if (!FiltersColumnMenu.isTree(comp)) {
-      comp.resetCurrentPage();
-    }
-    let newFilter = '';
-    if (value) {
-      newFilter = this.filtersColumnMenuInstance.normalizeValue(value.trim(), column.obj);
-    }
-    const newFilters = Object.assign({}, comp.filters);
-    this.filtersColumnMenuInstance.setTextFieldFilterValue(newFilters, column.name, newFilter);
-    comp.filters = newFilters;
-  }
-  intervalChange(comp, value, column, index, needNormalize, suffix) {
-    if (!FiltersColumnMenu.isTree(comp)) {
-      comp.resetCurrentPage();
-    }
-    let newFilter = '';
-    if (value) {
-      newFilter = value.trim();
-      if (needNormalize) {
-        newFilter = this.filtersColumnMenuInstance.normalizeValue(newFilter, column.obj);
-      }
-      if (suffix != null && newFilter != '') {
-        newFilter = newFilter + suffix;
-      }
-    }
-    const newFilters = Object.assign({}, comp.filters);
-    this.filtersColumnMenuInstance.setIntervalTextFieldFilterValue(newFilters, column.name, newFilter, index);
-    comp.filters = newFilters;
-  }
-  saveTextualFilters(comp, column) {
-    const newFilters = Object.assign({}, comp.filters);
-    this.filtersColumnMenuInstance.saveTextualFilters(newFilters, column.name);
-    comp.filters = newFilters;
-  }
-  /**
-   * Triggered when the checkbox list changes.
-   * @param {KupDataTable | KupTree} comp - Component using the column menu.
-   * @param {boolean} checked - State of the changed checkbox.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @param {string} filterValue - Value used to filter.
-   */
-  checkboxChange(comp, checked, column, filterValueItem) {
-    if (!FiltersColumnMenu.isTree(comp)) {
-      comp.resetCurrentPage();
-    }
-    const newFilters = Object.assign({}, comp.filters);
-    if (checked ||
-      filterValueItem == null ||
-      filterValueItem.value == null) {
-      this.filtersColumnMenuInstance.addCheckboxFilter(newFilters, column.name, filterValueItem);
-    }
-    else {
-      this.filtersColumnMenuInstance.removeCheckboxFilter(newFilters, column.name, filterValueItem.value);
-    }
-    comp.filters = newFilters;
-  }
-  /**
-   * Toggles the grouping of the given column.
-   * @param {KupDataTable} comp - Component using the column menu.
-   * @param {Column} column - Column of the menu.
-   */
-  toggleGroup(comp, column) {
-    const group = comp.getGroupByName(column);
-    if (group !== null) {
-      const index = comp.groups.indexOf(group);
-      comp.groups.splice(index, 1);
-      comp.groups = [...comp.groups];
-    }
-    else {
-      comp.groups = [...comp.groups, { column, visible: true }];
-    }
-    comp.refresh();
-  }
-  /**
-   * Sets the given column as key for the table.
-   * @param {KupDataTable} comp - Component using the column menu.
-   * @param {KupDataColumn} column - Column of the menu.
-   * @param {string} value - The status of the switch.
-   */
-  setKey(comp, column, value) {
-    const columns = comp.data.columns;
-    const switchOn = value === 'on' ? true : false;
-    for (let index = 0; index < columns.length; index++) {
-      const col = columns[index];
-      if (col.name === column) {
-        col.isKey = switchOn;
-      }
-      else if (switchOn) {
-        col.isKey = false;
-      }
+        comp.filters = newFilters;
+    }
+    /**
+     * Toggles the grouping of the given column.
+     * @param {KupDataTable} comp - Component using the column menu.
+     * @param {Column} column - Column of the menu.
+     */
+    toggleGroup(comp, column) {
+        const group = comp.getGroupByName(column);
+        if (group !== null) {
+            const index = comp.groups.indexOf(group);
+            comp.groups.splice(index, 1);
+            comp.groups = [...comp.groups];
+        }
+        else {
+            comp.groups = [...comp.groups, { column, visible: true }];
+        }
+        comp.refresh();
+    }
+    /**
+     * Sets the given column as key for the table.
+     * @param {KupDataTable} comp - Component using the column menu.
+     * @param {KupDataColumn} column - Column of the menu.
+     * @param {string} value - The status of the switch.
+     */
+    setKey(comp, column, value) {
+        const columns = comp.data.columns;
+        const switchOn = value === 'on' ? true : false;
+        for (let index = 0; index < columns.length; index++) {
+            const col = columns[index];
+            if (col.name === column) {
+                col.isKey = switchOn;
+            }
+            else if (switchOn) {
+                col.isKey = false;
+            }
+        }
+        comp.refresh();
     }
-    comp.refresh();
-  }
 }