@zeedhi/common 3.0.2 → 3.0.4

package/dist/zd-common.js

@@ -1,4 +1,4 @@
-import { Metadata, Utils, DatasourceFactory, AccessorManager, Event, KeyMap, FormatterParserProvider, Validation, Mask, Accessor, Loader, dayjs, Config, I18n, DateHelper, Router, MethodNotAssignedError, Http, Cookie, ViewService, InstanceNotFoundError, MemoryDatasource, URL, RestDatasource, Messages } from '@zeedhi/core';
+import { Metadata, Utils, DatasourceFactory, AccessorManager, Event, KeyMap, FormatterParserProvider, Validation, Mask, Accessor, Loader, dayjs, Config, I18n, DateHelper, Router, MethodNotAssignedError, Http, Cookie, ViewService, InstanceNotFoundError } from '@zeedhi/core';
 import AutoNumeric from '@zeedhi/autonumeric';
 export { default as AutoNumeric } from '@zeedhi/autonumeric';
 import isUndefined from 'lodash.isundefined';
@@ -338,10 +338,6 @@ const uniqueBy = (a, key) => {
     });
 };
 
-const isFilledObject = (obj) => {
-    return !!obj && typeof obj === 'object' && !Array.isArray(obj) && !!Object.keys(obj).length;
-};
-
 class DatasourceSearcher {
     dsSearch = {
         SEARCH: (value, searchIn) => ({
@@ -847,10 +843,6 @@ class TreeDataStructure {
     }
 }
 
-function isNil(value) {
-    return value === null || value === undefined;
-}
-
 /**
  * Child not found error
  */
@@ -2173,6 +2165,7 @@ class TextInput extends Input {
      * Defines text input value should concat the suffix text.
      */
     valueWithSuffix = textInputDefaults.valueWithSuffix;
+    inputMode;
     formatterFn = FormatterParserProvider.getFormatter('ZdTextInput');
     parserFn = FormatterParserProvider.getParser('ZdTextInput');
     /* istanbul ignore next */
@@ -2191,6 +2184,7 @@ class TextInput extends Input {
         this.type = props.type || this.type;
         this.valueWithPrefix = this.getInitValue('valueWithPrefix', props.valueWithPrefix, this.valueWithPrefix);
         this.valueWithSuffix = this.getInitValue('valueWithSuffix', props.valueWithSuffix, this.valueWithSuffix);
+        this.inputMode = this.getInitValue('inputMode', props.inputMode, this.inputMode);
     }
     onCreated() {
         super.onCreated();
@@ -2363,6 +2357,7 @@ class DateInput extends TextInput {
     parserFn = FormatterParserProvider.getParser('ZdDateInput');
     initialMask;
     isSimpleDisplay;
+    inputMode = 'none';
     /* istanbul ignore next */
     /**
      * Creates a new Date.
@@ -2424,6 +2419,10 @@ class DateInput extends TextInput {
             return;
         this.internalDisplayValue = this.formatter(value);
         this.internalValue = value;
+        if (!value) {
+            this.dateObject = null;
+            return;
+        }
         if (this.isValidFormatDate(value, this.dateFormat)) {
             this.dateObject = dayjs(value, this.dateFormat);
         }
@@ -10915,3473 +10914,192 @@ class TreeGrid extends Iterable {
     }
 }
 
-const DynamicFilterOperations = {
-    CONTAINS: true,
-    NOT_CONTAINS: true,
-    EQUALS: true,
-    NOT_EQUALS: true,
-    GREATER_THAN: true,
-    LESS_THAN: true,
-    GREATER_THAN_EQUALS: true,
-    LESS_THAN_EQUALS: true,
-    IN: true,
-    NOT_IN: true,
-    BETWEEN: true,
-};
-const DynamicFilterRelations = {
-    AND: true,
-    OR: true,
-};
-
-class TekMemoryDatasource extends MemoryDatasource {
-    /** Dynamic filter data */
-    dynamicFilter;
-    /** Search Join data */
-    searchJoin;
+/**
+ * Base class for Checkbox multiple component.
+ */
+class CheckboxMultiple extends Input {
+    /**
+     * Quantity of columns that will be rendered on non vertical case
+     */
+    columns = 4;
+    /**
+     * Field on datasource.data that will be used to set checkbox's label
+     */
+    dataLabel = '';
+    /**
+     * Source of checkbox items
+     */
+    datasource;
     /**
-     * Dynamic Filter Operations
+     * Field on datasource.data that will be used to set checkbox's value
      */
-    dynamicFilterOperations = DynamicFilterOperations;
+    dataValue = '';
     /**
-     * Dynamic Filter Relations
+     * Defines the checkbox list direction
      */
-    dynamicFilterRelations = DynamicFilterRelations;
+    vertical = true;
     /**
-     * Dynamic Filter applied flag
+     * Defines if field value should be an object
      */
-    dynamicFilterApplied = '';
+    returnObject = false;
+    /* istanbul ignore next */
     /**
-     * Create new datasource
-     * @param props Datasource properties
+     * Create a new Checkbox Multiple.
+     * @param props CheckBpox Multiple properties
      */
     constructor(props) {
         super(props);
-        if (!this.watchUrl) {
-            this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
-            this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+        this.columns = this.getInitValue('columns', props.columns, this.columns);
+        this.dataLabel = this.getInitValue('dataLabel', props.dataLabel, this.dataLabel);
+        this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
+        this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
+        this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
+        if (!Accessor.isAccessorDefinition(props.value)) {
+            this.value = this.getInitValue('value', props.value, []);
         }
-        this.createAccessors();
-        this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
-        this.createObjAccessors(this.searchJoin, 'searchJoin');
+        if (props.datasource && props.datasource.type === 'simple') {
+            this.dataValue = 'value';
+            this.dataLabel = this.dataValue;
+        }
+        this.datasource = DatasourceFactory.factory(props.datasource);
     }
-    updateReservedKeys() {
-        this.reservedKeys.dynamic_filter = true;
-        this.reservedKeys.search_join = true;
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        this.datasource.destroy();
     }
-    updateInternalProperties(datasource = {}) {
-        if (!this.watchUrl)
-            return;
-        this.updateReservedKeys();
-        super.updateInternalProperties(datasource);
-        const queryString = URL.getParsedQueryStringFromUrl();
-        this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
-        this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
-    }
-    getEncodedParam(urlParam, datasourceParam = {}) {
-        return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
-    }
-    getQueryStringValues() {
-        const values = super.getQueryStringValues();
-        if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-            values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
-        }
-        if (this.searchJoin && Object.keys(this.searchJoin).length) {
-            values.search_join = btoa(JSON.stringify(this.searchJoin));
-        }
-        return values;
-    }
-    getUrlQueryString() {
-        const superQueryString = super.getUrlQueryString();
-        const query = URL.getParsedQueryStringFromUrl();
-        let dynamicFilterQuerystring = '';
-        if (query.dynamic_filter) {
-            dynamicFilterQuerystring = `&${URL.getFormattedQueryString({
-                dynamic_filter: query.dynamic_filter,
-            })}`;
-        }
-        let searchJoinQuerystring = '';
-        if (query.search_join) {
-            searchJoinQuerystring = `&${URL.getFormattedQueryString({
-                search_join: query.search_join,
-            })}`;
-        }
-        return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
-    }
-    /**
-     * Adds a new dynamic filter position or replace if exists
-     * @param column Dynamic Filter column name
-     * @param value Dynamic Filter value
-     * @returns Promise with data collection
-     */
-    addDynamicFilter(column, value) {
-        if (this.isValidDynamicFilterValue(column, value)) {
-            this.dynamicFilter[column] = value;
-            return this.updateDynamicFilter();
-        }
-        return this.removeDynamicFilter(column);
+    onCreated() {
+        super.onCreated();
+        this.datasource?.initialize();
     }
+}
+InputFactory.register('ZdCheckboxMultiple', CheckboxMultiple);
+
+/**
+ * Base class for Chip component.
+ */
+class Chip extends Button {
     /**
-     * Removes a dynamic filter position
-     * @param column Dynamic Filter column name
-     * @returns Promise with data collection
+     * Determines whether the chip is active or not
      */
-    removeDynamicFilter(column) {
-        delete this.dynamicFilter[column];
-        return this.updateDynamicFilter();
-    }
+    active = true;
     /**
-     * Sets new dynamic filter value
-     * @param filter Dynamic Filter value
-     * @returns Promise with data collection
+     * Configure the active CSS class applied when the link is active
      */
-    setDynamicFilter(filter) {
-        this.dynamicFilter = {};
-        Object.keys(filter).forEach((column) => {
-            if (this.isValidDynamicFilterValue(column, filter[column])) {
-                this.dynamicFilter[column] = filter[column];
-            }
-            else {
-                delete this.dynamicFilter[column];
-            }
-        });
-        return this.updateDynamicFilter();
-    }
+    activeClass = '';
     /**
-     * Clears Dynamic filter value
-     * @returns Promise with data collection
+     * Adds remove button
      */
-    clearDynamicFilter() {
-        this.dynamicFilter = {};
-        return this.updateDynamicFilter();
-    }
+    closable = false;
     /**
-     * Resets page and selected rows and tries to update the url
-     * @returns Promise with data collection
+     * Change the default icon used for close chips
      */
-    async updateDynamicFilter() {
-        this.page = this.firstPage;
-        this.selectedRows = [];
-        this.visibleSelectedRows = [];
-        if (this.watchUrl) {
-            if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-                URL.updateQueryString({
-                    dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
-                });
-            }
-            else {
-                URL.updateQueryString({
-                    dynamic_filter: undefined,
-                });
-            }
-        }
-        return this.get();
-    }
+    closeIcon = 'delete';
     /**
-     * Checks if a filter value is valid
-     * @param value Filter value
-     * @returns Is valid filter value
+     * Makes the chip draggable
      */
-    isValidDynamicFilterValue(column, value) {
-        return (!this.reservedKeys[column] &&
-            value &&
-            value.length > 0 &&
-            value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation] &&
-                this.dynamicFilterRelations[filterValue.relation] &&
-                filterValue.value !== '' &&
-                filterValue.value !== null));
-    }
-    clone() {
-        return {
-            ...super.clone(),
-            dynamicFilter: this.dynamicFilter,
-            searchJoin: this.searchJoin,
-            type: 'tek-memory',
-        };
-    }
+    draggable = false;
     /**
-     * Updates filtered data
+     * Explicitly define the chip as a link
      */
-    updateFilteredData() {
-        // first apply filters (simple and dynamic)
-        this.filteredData = Object.keys(this.filter).length
-            ? this.allData.filter((row) => this.getRowByFilter(row))
-            : Array.from(this.allData);
-        if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-            this.filteredData = this.filteredData.filter((row) => this.getRowByDynamicFilter(row));
-        }
-        const searchWithoutSearchJoin = (row) => {
-            const searchRow = { ...row };
-            if (this.searchJoin) {
-                // do not search on columns with searchJoin
-                Object.keys(this.searchJoin).forEach((key) => delete searchRow[key]);
-            }
-            return this.getRowBySearch(searchRow);
-        };
-        // only after do the search
-        const searchData = this.search ? this.filteredData.filter(searchWithoutSearchJoin) : this.filteredData;
-        let searchIds = searchData.map((row) => row[this.uniqueKey]);
-        if (this.searchJoin && Object.keys(this.searchJoin).length) {
-            const searchJoinData = this.filteredData.filter((row) => this.getRowBySearchJoin(row));
-            // get the ids from search and searchJoin
-            searchIds = searchIds.concat(searchJoinData.map((row) => row[this.uniqueKey])).sort();
-        }
-        // filter filteredData using searchIds
-        this.filteredData = this.allData.filter((row) => searchIds.indexOf(row[this.uniqueKey]) !== -1);
-    }
-    getRowByDynamicFilter(row) {
-        let filtered;
-        try {
-            Object.keys(this.dynamicFilter).forEach((key) => {
-                const filterItems = this.dynamicFilter[key];
-                filterItems.forEach((item) => {
-                    if (filtered === false && item.relation === 'AND')
-                        return;
-                    if (filtered === true && item.relation === 'OR')
-                        return;
-                    const columnValue = Utils.normalize(row[key].toString());
-                    let value = '';
-                    if (Array.isArray(item.value)) {
-                        value = item.value.map((val) => Utils.normalize(val.toString()));
-                        switch (item.operation) {
-                            case 'IN':
-                                filtered = value.includes(columnValue);
-                                break;
-                            case 'NOT_IN':
-                                filtered = !value.includes(columnValue);
-                                break;
-                            case 'BETWEEN':
-                                filtered =
-                                    (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0]) &&
-                                        (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
-                                break;
-                            default:
-                                break;
-                        }
-                    }
-                    else {
-                        value = Utils.normalize(item.value.toString());
-                        switch (item.operation) {
-                            case 'CONTAINS':
-                                filtered = columnValue.indexOf(value) !== -1;
-                                break;
-                            case 'NOT_CONTAINS':
-                                filtered = columnValue.indexOf(value) === -1;
-                                break;
-                            case 'EQUALS':
-                                filtered = columnValue === value;
-                                break;
-                            case 'NOT_EQUALS':
-                                filtered = columnValue !== value;
-                                break;
-                            case 'GREATER_THAN':
-                                filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
-                                break;
-                            case 'LESS_THAN':
-                                filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
-                                break;
-                            case 'GREATER_THAN_EQUALS':
-                                filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
-                                break;
-                            case 'LESS_THAN_EQUALS':
-                                filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
-                                break;
-                            default:
-                                break;
-                        }
-                    }
-                });
-            });
-        }
-        catch {
-            // do nothing
-        }
-        return filtered;
-    }
-    getRowBySearchJoin(row) {
-        return Object.keys(this.searchJoin).some((key) => this.searchJoin[key].includes(row[key]));
-    }
-    hasFilter(columnName) {
-        return this.dynamicFilter[columnName] && this.dynamicFilter[columnName].length > 0;
-    }
-}
-DatasourceFactory.register('tek-memory', TekMemoryDatasource);
-
-class TekRestDatasource extends RestDatasource {
-    /** Dynamic filter data */
-    dynamicFilter;
-    /** Search Join data */
-    searchJoin;
+    link = false;
+    /**
+     * Removes background and applies border and text color
+     */
+    outlined = false;
+    /**
+     * Applies the ripple
+     */
+    ripple = true;
+    /**
+     * Applies a large border radius on the chip
+     */
+    round = true;
     /**
-     * Dynamic Filter Operations
+     * Value Model
      */
-    dynamicFilterOperations = DynamicFilterOperations;
+    value = false;
     /**
-     * Dynamic Filter Relations
+     * Makes the component extra large
      */
-    dynamicFilterRelations = DynamicFilterRelations;
+    xLarge = false;
     /**
-     * Dynamic Filter applied flag
+     * Makes the component extra small
      */
-    dynamicFilterApplied = '';
+    xSmall = false;
+    /* istanbul ignore next */
     /**
-     * Create new datasource
-     * @param props Datasource properties
+     * Create a new Chip
+     * @param props Chip definition
      */
     constructor(props) {
-        super({ ...props, lazyLoad: true });
-        if (!this.watchUrl) {
-            this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
-            this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
-        }
-        this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
+        super(props);
+        this.active = this.getInitValue('active', props.active, this.active);
+        this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
+        this.closable = this.getInitValue('closable', props.closable, this.closable);
+        this.closeIcon = this.getInitValue('closeIcon', props.closeIcon, this.closeIcon);
+        this.draggable = this.getInitValue('draggable', props.draggable, this.draggable);
+        this.link = this.getInitValue('link', props.link, this.link);
+        this.outlined = this.getInitValue('outlined', props.outlined, this.outlined);
+        this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
+        this.round = this.getInitValue('round', props.round, this.round);
+        this.value = this.getInitValue('value', props.value, this.value);
+        this.xLarge = this.getInitValue('xLarge', props.xLarge, this.xLarge);
+        this.xSmall = this.getInitValue('xSmall', props.xSmall, this.xSmall);
         this.createAccessors();
-        this.createObjAccessors(this.dynamicFilter, 'dynamicFilter');
-        this.createObjAccessors(this.searchJoin, 'searchJoin');
-    }
-    updateReservedKeys() {
-        this.reservedKeys.dynamic_filter = true;
-        this.reservedKeys.search_join = true;
     }
-    updateInternalProperties(datasource = {}) {
-        if (!this.watchUrl)
-            return;
-        this.updateReservedKeys();
-        super.updateInternalProperties(datasource);
-        const queryString = URL.getParsedQueryStringFromUrl();
-        this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
-        this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
-    }
-    getEncodedParam(urlParam, datasourceParam = {}) {
-        return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
-    }
-    getQueryStringValues() {
-        const values = super.getQueryStringValues();
-        if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-            values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
-        }
-        if (this.searchJoin && Object.keys(this.searchJoin).length) {
-            values.search_join = btoa(JSON.stringify(this.searchJoin));
-        }
-        return values;
-    }
-    getUrlQueryString() {
-        const superQueryString = super.getUrlQueryString();
-        const query = URL.getParsedQueryStringFromUrl();
-        let dynamicFilterQuerystring = '';
-        if (query.dynamic_filter) {
-            dynamicFilterQuerystring = `&${URL.getFormattedQueryString({
-                dynamic_filter: query.dynamic_filter,
-            })}`;
-        }
-        let searchJoinQuerystring = '';
-        if (query.search_join) {
-            searchJoinQuerystring = `&${URL.getFormattedQueryString({
-                search_join: query.search_join,
-            })}`;
-        }
-        return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
-    }
-    /**
-     * Adds a new dynamic filter position or replace if exists
-     * @param column Dynamic Filter column name
-     * @param value Dynamic Filter value
-     * @returns Promise with data collection
+}
+
+/**
+ * Base class for Progress component
+ */
+class Progress extends ComponentRender {
+    /**
+     * Set component's background color
      */
-    addDynamicFilter(column, value) {
-        if (this.isValidDynamicFilterValue(column, value)) {
-            this.dynamicFilter[column] = value;
-            return this.updateDynamicFilter();
-        }
-        return this.removeDynamicFilter(column);
-    }
+    backgroundColor = 'primary';
     /**
-     * Removes a dynamic filter position
-     * @param column Dynamic Filter column name
-     * @returns Promise with data collection
+     * Set component's background opacity
      */
-    removeDynamicFilter(column) {
-        delete this.dynamicFilter[column];
-        return this.updateDynamicFilter();
-    }
+    backgroundOpacity = '0.5';
     /**
-     * Sets new dynamic filter value
-     * @param filter Dynamic Filter value
-     * @returns Promise with data collection
+     * Defines the value color
      */
-    setDynamicFilter(filter) {
-        this.dynamicFilter = {};
-        Object.keys(filter).forEach((column) => {
-            if (this.isValidDynamicFilterValue(column, filter[column])) {
-                this.dynamicFilter[column] = filter[column];
-            }
-            else {
-                delete this.dynamicFilter[column];
-            }
-        });
-        return this.updateDynamicFilter();
-    }
+    color = 'primary';
     /**
-     * Clears Dynamic filter value
-     * @returns Promise with data collection
+     * Sets the height for the component
      */
-    clearDynamicFilter() {
-        this.dynamicFilter = {};
-        return this.updateDynamicFilter();
-    }
+    height = 4;
     /**
-     * Resets page and selected rows and tries to update the url
-     * @returns Promise with data collection
+     * Animates the component constantly
      */
-    async updateDynamicFilter() {
-        this.page = this.firstPage;
-        this.selectedRows = [];
-        this.visibleSelectedRows = [];
-        if (this.watchUrl) {
-            if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-                URL.updateQueryString({
-                    dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
-                });
-            }
-            else {
-                URL.updateQueryString({
-                    dynamic_filter: undefined,
-                });
-            }
-        }
-        return this.get();
-    }
+    indeterminate = false;
     /**
-     * Checks if a filter value is valid
-     * @param value Filter value
-     * @returns Is valid filter value
+     * Render components on the progress component
      */
-    isValidDynamicFilterValue(column, value) {
-        return (!this.reservedKeys[column] &&
-            value &&
-            value.length > 0 &&
-            value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation] &&
-                this.dynamicFilterRelations[filterValue.relation] &&
-                filterValue.value !== '' &&
-                filterValue.value !== null));
-    }
+    centerSlot = [];
     /**
-     * Retrieves request params
+     * The percentage value for current progress
      */
-    getRequestParams() {
-        const requestParams = super.getRequestParams();
-        const isNotEmptyObj = (obj) => !!(obj && Object.keys(obj).length);
-        const isValid = this.dynamicFilter &&
-            Object.keys(this.dynamicFilter).every((column) => {
-                const value = this.dynamicFilter[column];
-                return value && value.length > 0 && this.isValidDynamicFilterValue(column, value);
-            });
-        if (isNotEmptyObj(this.dynamicFilter) && isValid) {
-            requestParams.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
-        }
-        if (isNotEmptyObj(this.searchJoin)) {
-            requestParams.search_join = btoa(JSON.stringify(this.searchJoin));
-        }
-        return requestParams;
-    }
-    hasFilter(columnName) {
-        return this.dynamicFilter[columnName] && this.dynamicFilter[columnName].length > 0;
-    }
-    clone() {
-        return {
-            ...super.clone(),
-            dynamicFilter: this.dynamicFilter,
-            searchJoin: this.searchJoin,
-            type: 'tek-rest',
-        };
-    }
-}
-DatasourceFactory.register('tek-rest', TekRestDatasource);
-
-class ButtonOption {
-    config;
-    constructor(config) {
-        this.config = config;
-    }
-    buildComponent(grid) {
-        const { type, label, portrait = true, iconName } = this.config;
-        const orientation = portrait ? 'portrait' : 'landscape';
-        return {
-            label,
-            iconName,
-            name: `${grid.name}_export_${type}_${orientation}`,
-            component: 'ZdButton',
-            flat: true,
-            events: {
-                click: () => grid.getReport(type, portrait),
-            },
-        };
-    }
-}
-
-class MultiOption {
-    config;
-    constructor(config) {
-        this.config = config;
-    }
-    formatName(id, type, grid) {
-        return `${grid.name}_export_${type}_${id}`;
-    }
-    buildTooltip(option, type, grid) {
-        const { label } = option;
-        return {
-            name: this.formatName(`tooltip_${label}`, type, grid),
-            component: 'ZdTooltip',
-            bottom: true,
-            label,
-            children: [],
-        };
-    }
-    buildButton(option, type, grid) {
-        const { cssClass, label, iconName, reportParams } = option;
-        const { portrait: optionPortrait, rowObj } = reportParams || {};
-        return {
-            name: this.formatName(`button_${label}`, type, grid),
-            component: 'ZdButton',
-            cssClass,
-            icon: true,
-            iconName,
-            events: {
-                click: () => grid.getReport(type, optionPortrait, rowObj),
-            },
-        };
-    }
-    buildDivider(option, type, grid) {
-        const { label } = option;
-        return {
-            name: this.formatName(`divider_${label}`, type, grid),
-            component: 'ZdDivider',
-            cssClass: 'zd-my-1',
-            vertical: true,
-        };
-    }
-    buildComponent(grid) {
-        const { type, label, multiOption } = this.config;
-        const optionComponents = multiOption.flatMap((option) => [
-            {
-                ...this.buildTooltip(option, type, grid),
-                children: [this.buildButton(option, type, grid)],
-            },
-            this.buildDivider(option, type, grid),
-        ]);
-        optionComponents.pop();
-        const text = {
-            name: this.formatName('text', type, grid),
-            component: 'ZdText',
-            cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
-            events: {
-                click: ({ event }) => event?.stopPropagation(),
-            },
-            text: label || '',
-        };
-        const result = {
-            name: this.formatName('row', type, grid),
-            component: 'ZdRow',
-            cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
-            children: [text, ...optionComponents],
-        };
-        return result;
+    value = 0;
+    /* istanbul ignore next */
+    /**
+     * Create a new Progress
+     * @param props Progress definition
+     */
+    constructor(props) {
+        super(props);
+        this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
+        this.backgroundOpacity = this.getInitValue('backgroundOpacity', props.backgroundOpacity, this.backgroundOpacity);
+        this.color = this.getInitValue('color', props.color, this.color);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.indeterminate = this.getInitValue('indeterminate', props.indeterminate, this.indeterminate);
+        this.centerSlot = this.getInitValue('centerSlot', props.centerSlot, this.centerSlot);
+        this.value = this.getInitValue('value', props.value, this.value);
     }
 }
 
 /**
- * Base Teknisa error
- */
-class TeknisaCommonError extends Error {
-    constructor(message) {
-        super(`[Teknisa Common err]: ${message}`);
-    }
-}
-
-/**
- * TekGridDelete rows error
- */
-class TekGridDeleteRowsError extends TeknisaCommonError {
-    constructor() {
-        super("TekGrid can't automatically delete rows when selectAllPages property is true." +
-            ' You should delete them manually using the beforeDelete event and preventing' +
-            ' the default execution');
-        this.name = 'TekGridDeleteRowsError';
-    }
-}
-
-class TekGridToolbarProvider {
-    grid;
-    groupsVisibility;
-    constructor(grid, groupsVisibility) {
-        this.grid = grid;
-        this.groupsVisibility = groupsVisibility;
-    }
-    atoms = {
-        TITLE: '_gridTitle',
-        HIDE_BUTTON: '_hideButton',
-        ADD_BUTTON: '_addButton',
-        DELETE_BUTTON: '_deleteButton',
-        REFRESH_BUTTON: '_refreshButton',
-        COLUMNS_BUTTON: '_columnsButton',
-        LAYOUT_BUTTON: '_layout_options',
-        EXPORT_BUTTON: '_exportButton',
-        ACTIONS_BUTTON: '_actionsButton',
-        SAVE_BUTTON: '_saveButton',
-        CANCEL_BUTTON: '_cancelButton',
-        SEARCH: '_gridSearch',
-        FILTER_BUTTON: '_filterButton',
-        FILTER_MODAL: '-filter-modal',
-        FILTER_FORM: '-filter-form',
-        EXPORT_DROPDOWN: '_export_dropdown',
-        ACTIONS_DROPDOWN: '_actions_dropdown',
-        HIDE_TOOLTIP: '_hideTooltip',
-        TOOLBAR_DIV: '_toolbarDiv',
-        NOT_EDITING_SPAN: '_notEditingSpan',
-        ADD_TOOLTIP: '_add_tooltip',
-        DELETE_TOOLTIP: '_delete_tooltip',
-        DIVIDER1: '_divider1',
-        REFRESH_TOOLTIP: '_refresh_tooltip',
-        DIVIDER2: '_divider2',
-        COLUMNS_TOOLTIP: '_columns_button_tooltip',
-        DIVIDER_ACTIONS: '_dividerActions',
-        DIVIDER3: '_divider3',
-        FILTER_TOOLTIP: '_filter_tooltip',
-    };
-    getAtomName(key) {
-        return `${this.grid.name}${this.atoms[key]}`;
-    }
-    getAtomInstance(key) {
-        return Metadata.getInstance(`${this.grid.name}${this.atoms[key]}`);
-    }
-    getOption(config) {
-        if (config.multiOption)
-            return new MultiOption(config);
-        return new ButtonOption(config);
-    }
-    getExportConfigButtons() {
-        return this.grid.exportConfig.map((config) => {
-            const option = this.getOption(config);
-            return option.buildComponent(this.grid);
-        });
-    }
-    hideButtonClick({ event }) {
-        if (!event.defaultPrevented) {
-            const instance = Metadata.getInstance(`${this.grid.name}_toolbarDiv`);
-            if (instance) {
-                instance.isVisible = !instance.isVisible;
-            }
-        }
-    }
-    cancelChanges({ event }) {
-        this.grid.callEvent('beforeCancel', { component: this.grid, event });
-        if (!event.defaultPrevented) {
-            const cancel = async () => {
-                await this.grid.cancelEditedRows();
-                this.grid.editingNewRows = false;
-            };
-            cancel();
-            this.grid.callEvent('afterCancel', { component: this.grid });
-        }
-    }
-    saveChanges({ event }) {
-        this.grid.callEvent('beforeSave', { component: this.grid, event });
-        if (!event.defaultPrevented) {
-            const save = async () => {
-                await this.grid.saveEditedRows();
-                this.grid.editingNewRows = false;
-            };
-            save();
-            this.grid.callEvent('afterSave', { component: this.grid });
-        }
-    }
-    addButtonClick({ event }) {
-        if (this.grid.editNewRowsOnly) {
-            this.grid.editingNewRows = true;
-        }
-        this.grid.callEvent('addClick', { component: this.grid, event });
-    }
-    deleteButtonClick({ event }) {
-        this.grid.callEvent('beforeDelete', { component: this.grid, event });
-        if (!event.defaultPrevented) {
-            if (this.grid.selectAllPages) {
-                throw new TekGridDeleteRowsError();
-            }
-            this.grid.deleteRows();
-            this.grid.callEvent('afterDelete', { component: this.grid });
-        }
-    }
-    reloadGrid({ event }) {
-        this.grid.callEvent('beforeReload', { component: this.grid, event });
-        if (event?.defaultPrevented)
-            return;
-        this.grid.reload();
-    }
-    getProperties() {
-        const exportConfigButtons = this.getExportConfigButtons();
-        return [
-            {
-                name: this.getAtomName('TITLE'),
-                component: 'ZdText',
-                cssClass: 'toolbar-title',
-                tag: 'h2',
-                text: this.grid.title,
-                title: this.grid.title,
-            },
-            {
-                name: `${this.grid.name}_spacer`,
-                component: 'VSpacer',
-            },
-            {
-                name: this.getAtomName('HIDE_TOOLTIP'),
-                component: 'ZdTooltip',
-                label: `{{GridController_${this.grid.name}.tooltipName}}`,
-                bottom: true,
-                children: [
-                    {
-                        name: this.getAtomName('HIDE_BUTTON'),
-                        component: 'ZdButton',
-                        flat: true,
-                        icon: true,
-                        iconName: 'mdi-chevron-right',
-                        color: 'grey',
-                        isVisible: `{{GridController_${this.grid.name}.isNotEditing}}`,
-                        cssClass: `{{GridController_${this.grid.name}.toolbarClass}}`,
-                        events: {
-                            click: this.hideButtonClick.bind(this),
-                        },
-                    },
-                ],
-            },
-            {
-                name: this.getAtomName('TOOLBAR_DIV'),
-                component: 'ZdTag',
-                tag: 'div',
-                cssStyle: 'display: flex; align-items: center',
-                isVisible: `{{GridController_${this.grid.name}.showToolbar}}`,
-                children: [
-                    {
-                        name: this.getAtomName('NOT_EDITING_SPAN'),
-                        component: 'ZdTag',
-                        tag: 'span',
-                        cssStyle: 'display: flex',
-                        isVisible: `{{GridController_${this.grid.name}.isNotEditing}}`,
-                        children: [
-                            {
-                                name: this.getAtomName('ADD_TOOLTIP'),
-                                component: 'ZdTooltip',
-                                label: 'TEKGRID_ADD',
-                                bottom: true,
-                                children: [
-                                    {
-                                        name: this.getAtomName('ADD_BUTTON'),
-                                        component: 'ZdButton',
-                                        icon: true,
-                                        iconName: 'mdi-plus-box',
-                                        isVisible: `{{GridController_${this.grid.name}.showAddButton}}`,
-                                        events: {
-                                            click: this.addButtonClick.bind(this),
-                                        },
-                                    },
-                                ],
-                            },
-                            {
-                                name: this.getAtomName('DELETE_TOOLTIP'),
-                                component: 'ZdTooltip',
-                                label: 'TEKGRID_DELETE',
-                                bottom: true,
-                                children: [
-                                    {
-                                        name: this.getAtomName('DELETE_BUTTON'),
-                                        component: 'ZdButton',
-                                        icon: true,
-                                        iconName: 'mdi-trash-can-outline',
-                                        isVisible: `{{GridController_${this.grid.name}.showDeleteButton}}`,
-                                        disabled: `{{GridController_${this.grid.name}.disableDeleteButton}}`,
-                                        events: {
-                                            click: this.deleteButtonClick.bind(this),
-                                        },
-                                    },
-                                ],
-                            },
-                            {
-                                name: this.getAtomName('DIVIDER1'),
-                                component: 'ZdDivider',
-                                cssClass: 'toolbar-divider',
-                                vertical: true,
-                                isVisible: `{{GridController_${this.grid.name}.showDivider1}}`,
-                            },
-                            {
-                                name: this.getAtomName('REFRESH_TOOLTIP'),
-                                component: 'ZdTooltip',
-                                label: 'TEKGRID_REFRESH',
-                                bottom: true,
-                                children: [
-                                    {
-                                        name: this.getAtomName('REFRESH_BUTTON'),
-                                        component: 'ZdButton',
-                                        icon: true,
-                                        iconName: 'refresh',
-                                        isVisible: `{{GridController_${this.grid.name}.showReloadButton}}`,
-                                        events: {
-                                            click: this.reloadGrid.bind(this),
-                                        },
-                                    },
-                                ],
-                            },
-                            {
-                                name: this.getAtomName('DIVIDER2'),
-                                component: 'ZdDivider',
-                                cssClass: 'toolbar-divider',
-                                vertical: true,
-                                isVisible: `{{GridController_${this.grid.name}.showDivider2}}`,
-                            },
-                            {
-                                name: this.getAtomName('COLUMNS_BUTTON'),
-                                component: 'TekGridColumnsButton',
-                                isVisible: `{{GridController_${this.grid.name}.showColumnsButton}}`,
-                                iterableComponentName: this.grid.name,
-                                hideGroups: this.groupsVisibility === 'hide',
-                                ignoreColumns: `{{GridController_${this.grid.name}.columnsButtonIgnore}}`,
-                            },
-                            {
-                                name: this.getAtomName('LAYOUT_BUTTON'),
-                                component: 'TekGridLayoutOptions',
-                                isVisible: `{{GridController_${this.grid.name}.showLayoutOptionsButton}}`,
-                            },
-                            {
-                                name: this.getAtomName('DIVIDER_ACTIONS'),
-                                component: 'ZdDivider',
-                                cssClass: 'toolbar-divider',
-                                vertical: true,
-                                isVisible: `{{GridController_${this.grid.name}.showActionAndExportButton}}`,
-                            },
-                            {
-                                name: this.getAtomName('EXPORT_DROPDOWN'),
-                                component: 'ZdDropdown',
-                                cssClass: 'tekgrid-actions-dropdown',
-                                offsetY: true,
-                                activator: {
-                                    name: this.getAtomName('EXPORT_BUTTON'),
-                                    component: 'ZdButton',
-                                    icon: true,
-                                    iconName: 'mdi-file-download-outline',
-                                    isVisible: `{{GridController_${this.grid.name}.showExportButton}}`,
-                                },
-                                children: this.grid.exportActions || exportConfigButtons,
-                            },
-                            {
-                                name: this.getAtomName('ACTIONS_DROPDOWN'),
-                                component: 'ZdDropdown',
-                                cssClass: 'tekgrid-actions-dropdown',
-                                offsetY: true,
-                                activator: {
-                                    name: this.getAtomName('ACTIONS_BUTTON'),
-                                    component: 'ZdButton',
-                                    icon: true,
-                                    iconName: 'mdi-dots-vertical',
-                                    isVisible: `{{GridController_${this.grid.name}.showActionsButton}}`,
-                                },
-                                children: this.grid.actions,
-                            },
-                            {
-                                name: this.getAtomName('DIVIDER3'),
-                                component: 'ZdDivider',
-                                cssClass: 'toolbar-divider',
-                                vertical: true,
-                                isVisible: `{{GridController_${this.grid.name}.showDivider3}}`,
-                            },
-                        ],
-                    },
-                    {
-                        name: this.getAtomName('SAVE_BUTTON'),
-                        component: 'ZdButton',
-                        label: 'TEKGRID_SAVE',
-                        isVisible: `{{GridController_${this.grid.name}.showEditButtons}}`,
-                        small: true,
-                        events: {
-                            click: this.saveChanges.bind(this),
-                        },
-                    },
-                    {
-                        name: this.getAtomName('CANCEL_BUTTON'),
-                        component: 'ZdButton',
-                        label: 'TEKGRID_CANCEL',
-                        outline: true,
-                        cssClass: 'zd-mx-2',
-                        isVisible: `{{GridController_${this.grid.name}.showEditButtons}}`,
-                        small: true,
-                        events: {
-                            click: this.cancelChanges.bind(this),
-                        },
-                    },
-                    {
-                        name: this.getAtomName('SEARCH'),
-                        component: 'ZdSearch',
-                        cssClass: 'zd-grid-search',
-                        iterableComponentName: `${this.grid.name}`,
-                        isVisible: `{{GridController_${this.grid.name}.showSearchInput}}`,
-                    },
-                    {
-                        name: this.getAtomName('FILTER_TOOLTIP'),
-                        component: 'ZdTooltip',
-                        label: 'TEKGRID_FILTER',
-                        bottom: true,
-                        children: [
-                            {
-                                name: this.getAtomName('FILTER_BUTTON'),
-                                component: 'TekGridFilterButton',
-                                grid: this.grid,
-                                gridName: this.grid.name,
-                                showCheckboxAll: this.grid.showCheckboxAllFilter,
-                                isVisible: `{{GridController_${this.grid.name}.showFilterButton}}`,
-                            },
-                        ],
-                    },
-                ],
-            },
-        ];
-    }
-}
-
-class ColumnsSearcher {
-    async searchColumn(columns, search) {
-        const lookupColumns = columns.filter((column) => !!column.componentProps?.datasource && !column.skipLookupSearch);
-        const searchJoin = {};
-        if (search) {
-            const promises = lookupColumns.map(async (column) => {
-                const searchData = await column.memorySearch(search);
-                const lookupId = column.componentProps.datasource.uniqueKey;
-                searchJoin[column.name] = searchData.map((row) => row[lookupId]);
-            });
-            await Promise.all(promises);
-        }
-        return searchJoin;
-    }
-}
-
-class DynamicFilterDatasourceFactory {
-    factory(options) {
-        return DatasourceFactory.factory({
-            data: this.getFilterOptionsData(options),
-            loadAll: true,
-            translate: ['text'],
-        });
-    }
-    getFilterOptionsData(options) {
-        const optionsKeys = Object.keys(options);
-        return optionsKeys.map((item) => ({
-            text: `TEKGRID_${item}`,
-            value: item,
-        }));
-    }
-}
-
-class TekFilterHelper {
-    static getLabel(name) {
-        return DateHelper.getLabel(name);
-    }
-    static getValue(name, column) {
-        return DateHelper.getValue(name, column.componentProps.dateFormat);
-    }
-    static register(name, label, fn) {
-        DateHelper.register(name, label, fn);
-    }
-    static unregister(name) {
-        DateHelper.unregister(name);
-    }
-}
-
-/**
- * Base class for TekGrid Filter Button component
- */
-class TekGridFilterButton extends Button {
-    gridName;
-    grid;
-    showCheckboxAll = false;
-    filterModal;
-    filterFormInputs = {};
-    constructor(props) {
-        super(props);
-        this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
-        this.grid = this.getInitValue('grid', props.grid, undefined);
-        this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
-        this.createAccessors();
-        if (!this.grid)
-            this.loadGrid();
-    }
-    loadGrid(gridName) {
-        if (gridName)
-            this.gridName = gridName;
-        if (!this.gridName)
-            return;
-        this.grid = Metadata.getInstances(this.gridName)[0];
-    }
-    click(event) {
-        this.callEvent('click', { component: this, event });
-        this.grid.callEvent('filterClick', { component: this.grid, event });
-        if (!event?.defaultPrevented) {
-            this.createFilterFromColumns.call(this);
-        }
-    }
-    loadFilterValues({ component }) {
-        const changedCompNames = [];
-        const { datasource } = this.grid;
-        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-            const { dynamicFilter } = datasource;
-            const newDynamicFilter = { ...this.grid.defaultFilter, ...dynamicFilter };
-            Object.keys(newDynamicFilter).forEach((column) => {
-                if (newDynamicFilter[column] && newDynamicFilter[column].length > 0) {
-                    newDynamicFilter[column].forEach((filterItem, index) => {
-                        const relation = filterItem.relation || 'AND';
-                        const operation = filterItem.operation || 'CONTAINS';
-                        const compName = `${this.grid.name}-filter-${relation}-${operation}-${column}-${index}`;
-                        changedCompNames.push(compName);
-                        component.value[compName] = filterItem.value;
-                        let helperValue = '';
-                        const columnObj = this.grid.getColumn(column);
-                        if (columnObj instanceof TekGridColumn) {
-                            const { filterProps } = columnObj;
-                            if (!Array.isArray(filterProps)) {
-                                helperValue = filterProps.helperValue || '';
-                            }
-                            else {
-                                filterProps.forEach((prop) => {
-                                    if ((prop.relation || 'AND') === relation && (prop.operation || 'CONTAINS') === operation) {
-                                        helperValue = prop.helperValue || '';
-                                    }
-                                });
-                            }
-                            const inputObj = Metadata.getInstances(compName);
-                            if (helperValue && inputObj.length && inputObj[0]) {
-                                inputObj[0].hint = TekFilterHelper.getLabel(helperValue);
-                            }
-                        }
-                    });
-                }
-            });
-        }
-        else {
-            const { filter } = datasource;
-            const newFilter = { ...this.grid.defaultFilter, ...filter };
-            Object.keys(newFilter).forEach((item) => {
-                if (newFilter[item]) {
-                    const compName = `${this.grid.name}-filter-AND-CONTAINS-${item}-0`;
-                    changedCompNames.push(compName);
-                    component.value[compName] = newFilter[item];
-                }
-            });
-        }
-        Object.keys(component.value).forEach((compName) => {
-            if (changedCompNames.indexOf(compName) === -1) {
-                component.value[compName] = null;
-            }
-        });
-    }
-    hideFilterModal() {
-        this.filterModal.hide();
-    }
-    destroyFilterModal() {
-        if (this.filterModal)
-            this.filterModal.destroy();
-    }
-    createFilterFromColumns() {
-        if (!this.filterModal) {
-            const originalProps = {
-                height: 'auto',
-                maxHeight: '18.75rem',
-                persistent: true,
-                title: 'FILTER',
-            };
-            const mergeModalFilterProps = Object.assign(originalProps, this.grid.modalFilterProps);
-            const filterModalDef = {
-                name: `${this.grid.name}-filter-modal`,
-                persistent: mergeModalFilterProps.persistent,
-                grid: mergeModalFilterProps.grid,
-                cssClass: mergeModalFilterProps.cssClass,
-                cssStyle: mergeModalFilterProps.cssStyle,
-                draggable: mergeModalFilterProps.draggable,
-                dragHandle: mergeModalFilterProps.dragHandle,
-                fullscreen: mergeModalFilterProps.fullscreen,
-                light: mergeModalFilterProps.light,
-                dark: mergeModalFilterProps.dark,
-                escKeydownStop: false,
-                children: [
-                    {
-                        name: `${this.grid.name}-filter-header-container`,
-                        component: 'ZdContainer',
-                        cssClass: 'zd-pa-0 zd-display-flex',
-                        children: [
-                            {
-                                name: `${this.grid.name}-filter-title`,
-                                component: 'ZdText',
-                                cssStyle: `color: ${'var(--v-primary-base);'}`,
-                                text: mergeModalFilterProps.title,
-                                tag: 'h3',
-                            },
-                            {
-                                name: `${this.grid.name}-filter-spacer`,
-                                component: 'VSpacer',
-                            },
-                            {
-                                name: `${this.grid.name}-filter-close-button`,
-                                component: 'ZdModalCloseButton',
-                                small: true,
-                                modalName: `${this.grid.name}-filter-modal`,
-                            },
-                        ],
-                    },
-                    {
-                        name: `${this.grid.name}-filter-content-container`,
-                        component: 'ZdContainer',
-                        scrollView: true,
-                        cssClass: 'zd-my-2 zd-pa-0 tek-grid-filter-content-container',
-                        maxHeight: mergeModalFilterProps.maxHeight,
-                        height: mergeModalFilterProps.height,
-                        children: [
-                            {
-                                name: `${this.grid.name}-filter-form`,
-                                component: 'ZdForm',
-                                cssClass: 'zd-my-2 zd-pa-0',
-                                children: this.getFilterModalComponents(),
-                                events: {
-                                    onMounted: this.loadFilterValues.bind(this),
-                                },
-                            },
-                        ],
-                    },
-                    {
-                        name: `${this.grid.name}-filter-footer-container`,
-                        component: 'ZdContainer',
-                        cssClass: 'zd-pa-0',
-                        children: [
-                            {
-                                name: `${this.grid.name}-filter-footer`,
-                                component: 'ZdFooter',
-                                color: 'transparent',
-                                padless: true,
-                                leftSlot: [
-                                    {
-                                        name: `${this.grid.name}-filter-clearButton`,
-                                        component: 'ZdButton',
-                                        label: 'CLEAR',
-                                        outline: true,
-                                        events: {
-                                            click: this.clearFilter.bind(this),
-                                        },
-                                    },
-                                ],
-                                rightSlot: [
-                                    {
-                                        name: `${this.grid.name}-filter-cancelButton`,
-                                        component: 'ZdButton',
-                                        label: 'CANCEL',
-                                        keyMap: {
-                                            esc: {
-                                                event: this.hideFilterModal.bind(this),
-                                                focus: true,
-                                                visible: true,
-                                                input: true,
-                                                stop: true,
-                                            },
-                                        },
-                                        outline: true,
-                                        events: {
-                                            click: this.hideFilterModal.bind(this),
-                                        },
-                                    },
-                                    {
-                                        name: `${this.grid.name}-filter-okButton`,
-                                        component: 'ZdButton',
-                                        label: 'OK',
-                                        events: {
-                                            click: this.applyFilter.bind(this),
-                                        },
-                                        keyMap: {
-                                            'mod+enter': {
-                                                event: this.applyFilter.bind(this),
-                                                focus: true,
-                                                input: true,
-                                                stop: true,
-                                                visible: true,
-                                            },
-                                        },
-                                    },
-                                ],
-                            },
-                        ],
-                    },
-                ],
-            };
-            this.filterModal = ModalService.create(filterModalDef);
-        }
-        else {
-            this.loadFilterValues({ component: Metadata.getInstance(`${this.grid.name}-filter-form`) });
-        }
-        this.filterModal.show();
-    }
-    onBeforeDestroy() {
-        super.onBeforeDestroy();
-        this.destroyFilterModal();
-    }
-    formatFormValue(filterForm) {
-        // TODO: add this logic when SelectMultiple is implemented
-        // return Object.keys(filterForm.value).reduce((result, item) => {
-        //   try {
-        //     const itemInstance = filterForm.getChildInstance<Input>(item);
-        //     if (!(itemInstance instanceof SelectMultiple) || !itemInstance.checkboxAll) return result;
-        //     // when selectmultiple with checkboxAll, should either remove it from the filter or
-        //     // change the value to T, depending on selectAllCompatibilityMode
-        //     if ((Config as ITekConfig).selectAllCompatibilityMode) {
-        //       result[item] = 'T';
-        //       return result;
-        //     }
-        //     delete result[item];
-        //     return result;
-        //   } catch (e) {
-        //     return result;
-        //   }
-        // }, { ...filterForm.value });
-        return filterForm.value;
-    }
-    async applyFilter({ event }) {
-        const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
-        const isFormValid = await filterForm.validate();
-        if (isFormValid.valid) {
-            const { datasource } = this.grid;
-            const filter = {};
-            const formValue = this.formatFormValue(filterForm);
-            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                Object.keys(formValue).forEach((item) => {
-                    const itemValue = formValue[item];
-                    if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
-                        const relationAndOperationAndName = item.split(`${this.grid.name}-filter-`)[1];
-                        const [relation, operation] = relationAndOperationAndName.split('-');
-                        let columnName = relationAndOperationAndName.split(`${relation}-${operation}-`)[1];
-                        columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                        if (!filter[columnName]) {
-                            filter[columnName] = [];
-                        }
-                        const value = itemValue;
-                        filter[columnName].push({
-                            relation,
-                            operation,
-                            value,
-                        });
-                    }
-                });
-                datasource.dynamicFilter = filter;
-                this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
-            }
-            else {
-                Object.keys(formValue).forEach((item) => {
-                    let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
-                    columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                    if (formValue[item]) {
-                        filter[columnName] = formValue[item];
-                    }
-                });
-                datasource.filter = filter;
-                this.setFilter(filter, event, datasource.setFilter.bind(datasource));
-            }
-            this.grid.changeLayout(event);
-        }
-    }
-    setFilter(filter, event, filterFn) {
-        this.grid.callEvent('beforeApplyFilter', { component: this.grid, event });
-        if (event.defaultPrevented)
-            return;
-        filterFn(filter);
-        this.hideFilterModal();
-    }
-    clearFilter() {
-        const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
-        Object.keys(filterForm.value).forEach((item) => {
-            filterForm.value[item] = null;
-        });
-    }
-    sortFilterIndex(col1, col2) {
-        const index1 = col1.filterIndex !== undefined ? col1.filterIndex : Number.MAX_SAFE_INTEGER;
-        const index2 = col2.filterIndex !== undefined ? col2.filterIndex : Number.MAX_SAFE_INTEGER;
-        return index1 - index2;
-    }
-    getFilterModalComponents() {
-        const filterColumns = [];
-        let columnComponentName;
-        [...this.grid.columns].sort(this.sortFilterIndex).forEach((column) => {
-            const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
-            if (column.filterable && filterProps && filterProps.length > 0) {
-                this.filterFormInputs[column.name] = [];
-                filterProps.forEach((filterItem, index) => {
-                    const { datasource } = this.grid;
-                    if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                        const relation = filterItem.relation || 'AND';
-                        const operation = filterItem.operation || 'CONTAINS';
-                        columnComponentName = `${this.grid.name}-filter-${relation}-${operation}-${column.name}-${index}`;
-                    }
-                    else {
-                        columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
-                    }
-                    this.filterFormInputs[column.name].push(columnComponentName);
-                    const newColumnComponent = {
-                        label: column.label,
-                        ...column.componentProps,
-                        ...filterItem,
-                        name: columnComponentName,
-                    };
-                    if (filterItem.helperOptions) {
-                        if (!newColumnComponent.events)
-                            newColumnComponent.events = {};
-                        newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
-                    }
-                    if (newColumnComponent.component === 'ZdSelectMultiple') {
-                        newColumnComponent.showCheckboxAll = newColumnComponent.showCheckboxAll ?? this.showCheckboxAll;
-                    }
-                    filterColumns.push(newColumnComponent);
-                });
-            }
-        });
-        return filterColumns;
-    }
-    changeHelperEvent(column, { component }) {
-        const { helperValue } = component;
-        const componentName = component.name;
-        if (!Array.isArray(column.filterProps)) {
-            column.filterProps.helperValue = helperValue;
-        }
-        else {
-            column.filterProps.forEach((prop) => {
-                const relationAndOperationAndName = componentName.split(`${this.grid.name}-filter-`)[1];
-                const [relation, operation] = relationAndOperationAndName.split('-');
-                if ((prop.relation || 'AND') === relation && (prop.operation || 'CONTAINS') === operation) {
-                    prop.helperValue = helperValue;
-                }
-            });
-        }
-    }
-}
-
-class GroupedDataManager {
-    grid;
-    summaryColumns = [];
-    groups = [];
-    summary = {};
-    groupedData = [];
-    groupColumnNames = [];
-    groupColumns = [];
-    originalDatasourceLoadAll;
-    originalDatasourceLimit;
-    viewUpdateScrollData;
-    viewUpdateFixedColumns;
-    constructor(grid) {
-        this.grid = grid;
-    }
-    setViewUpdateFixedColumns(fn) {
-        this.viewUpdateFixedColumns = fn;
-    }
-    setViewUpdateScrollData(fn) {
-        this.viewUpdateScrollData = fn;
-    }
-    /**
-     * Tasks that should be finished before loading the grid data
-     */
-    tasksBeforeLoad = [];
-    registerTask(task) {
-        this.tasksBeforeLoad.push(task);
-    }
-    request = () => {
-        throw new NonInitializedError(this.constructor.name);
-    };
-    debounceUpdateGrouping = () => {
-        throw new NonInitializedError(this.constructor.name);
-    };
-    /**
-     * Loads grid data after resolving all tasks
-     */
-    async loadAfterTasks() {
-        Promise.all(this.tasksBeforeLoad.map((promise) => promise.catch(() => undefined)));
-        this.tasksBeforeLoad = [];
-        return this.request();
-    }
-    initializeDebounceFunctions() {
-        this.request = debounce(() => {
-            this.grid.reload();
-        }, 500);
-        this.debounceUpdateGrouping = debounce((lazyLoad = false) => {
-            this.updateGroupedData(lazyLoad);
-        }, 100);
-    }
-    /**
-     * Initializes grid groups, summary columns and registers the grid datasource callback
-     * @param lazyLoad defines if the grid should automatically load data after updating the datasource
-     */
-    initializeGrouping(lazyLoad) {
-        this.initializeDebounceFunctions();
-        this.initGroups();
-        this.initSummaryColumns();
-        this.originalDatasourceLoadAll = this.grid.datasource.loadAll;
-        this.originalDatasourceLimit = this.grid.datasource.limit;
-        this.grid.datasource.registerGetCallback((data) => this.onGet(data));
-        this.updateGrouping(lazyLoad);
-    }
-    onGet(data) {
-        if (this.isGrouped()) {
-            this.buildGroupedData();
-        }
-        return data;
-    }
-    resetFooterVariables(group) {
-        this.summaryColumns.forEach((column) => {
-            group.footer[column.name] = {
-                count: 0,
-                sum: undefined,
-                avg: undefined,
-                min: undefined,
-                max: undefined,
-            };
-        });
-    }
-    initGroups() {
-        this.groups = [];
-        this.groupColumns.forEach((column) => {
-            const newGroup = {
-                column,
-                name: column.name,
-                label: column.label,
-                lastValue: undefined,
-                initialized: false,
-                footer: {},
-            };
-            this.resetFooterVariables(newGroup);
-            this.groups.push(newGroup);
-        });
-    }
-    getGroupedData() {
-        return this.groupedData;
-    }
-    initSummaryColumns() {
-        this.summaryColumns = this.grid.columns.filter((column) => !!column.aggregation && !column.grouped);
-        this.summary = {};
-    }
-    /**
-     * Calls updateGroupedData with debounce
-     */
-    updateGrouping(lazyLoad) {
-        this.debounceUpdateGrouping(lazyLoad);
-    }
-    /**
-     * Inits summary columns, updates the grid datasource and, if needed, reloads the grid data
-     */
-    async updateGroupedData(lazyLoad) {
-        this.initSummaryColumns();
-        this.updateGridDatasource();
-        if (!lazyLoad) {
-            await this.loadAfterTasks();
-        }
-        if (this.grid.virtualScroll && this.viewUpdateScrollData) {
-            this.viewUpdateScrollData();
-        }
-        if (this.viewUpdateFixedColumns) {
-            this.viewUpdateFixedColumns();
-        }
-    }
-    /**
-     * When using groups, should update the grid datasource order to reflect the group order
-     * If the grid is not grouped, should not update the datasource order
-     */
-    updateGridDatasource() {
-        this.groupedData = [];
-        this.groupColumns = this.grid.columns.filter((column) => column.grouped);
-        this.groupColumnNames = this.groupColumns.map((column) => column.name);
-        if (this.isGrouped()) {
-            if (this.groupColumns.length) {
-                const order = this.getOrder(this.groupColumnNames, this.grid.datasource.order);
-                this.grid.datasource.order = order;
-            }
-            this.grid.datasource.loadAll = true;
-            return;
-        }
-        this.grid.datasource.loadAll = this.originalDatasourceLoadAll;
-        this.grid.datasource.limit = this.originalDatasourceLimit;
-    }
-    /**
-     * Returns the order to be used in the grid datasource based on the group column names and the grid order
-     */
-    getOrder(groupColumnNames, gridOrder) {
-        const groupOrderColumns = groupColumnNames.map((column) => `${column}.asc`);
-        const otherOrderColumns = gridOrder.filter((column) => groupColumnNames.indexOf(column.split('.')[0]) === -1);
-        return [...groupOrderColumns, ...otherOrderColumns];
-    }
-    /**
-     * Returns the summary data for the group
-     */
-    getSummaryData(group) {
-        const summaryData = {};
-        this.summaryColumns.forEach((column) => {
-            const { aggregation } = column;
-            const currentGroup = group[column.name];
-            if (!currentGroup) {
-                summaryData[column.name] = 0;
-                return;
-            }
-            if (aggregation === 'COUNT') {
-                summaryData[column.name] = currentGroup.count;
-            }
-            else if (aggregation === 'SUM') {
-                summaryData[column.name] = currentGroup.sum;
-            }
-            else if (aggregation === 'AVG') {
-                if (currentGroup.avg) {
-                    summaryData[column.name] = currentGroup.avg;
-                }
-                else if (typeof currentGroup.sum === 'number') {
-                    summaryData[column.name] = currentGroup.sum / currentGroup.count;
-                }
-            }
-            else if (aggregation === 'MIN') {
-                summaryData[column.name] = currentGroup.min;
-            }
-            else {
-                // if (aggregation === 'MAX') {
-                summaryData[column.name] = currentGroup.max;
-            }
-        });
-        return summaryData;
-    }
-    /**
-     * Adds group footers to the grouped data
-     */
-    addGroupFooters(groupIndex) {
-        if (this.summaryColumns.length === 0) {
-            return;
-        }
-        for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
-            if (this.groups[i].initialized) {
-                const groupFooterRow = {
-                    groupFooter: true,
-                    groupIndex: i,
-                    groupHeaders: [],
-                    groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel,
-                    groupValue: this.groups[i].lastGroupHeaderRow.groupValue,
-                    ...this.getSummaryData(this.groups[i].footer),
-                };
-                // add header for outer groups
-                for (let g = 0; g < i; g += 1) {
-                    const { lastGroupHeaderRow } = this.groups[g];
-                    if (lastGroupHeaderRow) {
-                        groupFooterRow.groupHeaders.push(lastGroupHeaderRow);
-                    }
-                }
-                this.groupedData.push(groupFooterRow);
-            }
-        }
-    }
-    getGroupValue(group, row) {
-        const groupColumn = this.grid.getColumn(group.column.name);
-        const cellsApplied = this.grid.getAppliedConditions({ row, column: groupColumn });
-        if (!isFilledObject(cellsApplied)) {
-            this.grid.reapplyConditions(row);
-        }
-        const groupValue = groupColumn.formatterByRow(row, cellsApplied);
-        return groupValue;
-    }
-    addGroupHeader(row, group, index) {
-        const groupValue = this.getGroupValue(group, row) || group.column.groupLabelForEmptyValue;
-        const groupHeaderRow = {
-            group: true,
-            groupRow: row,
-            groupColumnName: group.column.name,
-            groupHeader: true,
-            groupIndex: index,
-            groupLabel: I18n.translate(group.label),
-            groupValue,
-            groupOpened: group.column.groupOpened || this.grid.groupsOpened,
-            groupHeaders: [],
-            children: [],
-        };
-        // add header for outer groups to the added row
-        for (let i = 0; i < index; i += 1) {
-            groupHeaderRow.groupHeaders.push(this.groups[i].lastGroupHeaderRow);
-        }
-        group.lastGroupHeaderRow = groupHeaderRow;
-        group.initialized = true;
-        this.groupedData.push(groupHeaderRow);
-    }
-    calcSummaryValues(column, summary, row) {
-        const rowValue = row[column.name];
-        if (isNil(rowValue))
-            return;
-        summary.count += 1;
-        if (this.grid.events.calcSummary) {
-            this.grid.calcSummary(column, summary, row);
-            return;
-        }
-        if (summary.min === undefined)
-            summary.min = rowValue;
-        if (summary.max === undefined)
-            summary.max = rowValue;
-        summary.min = rowValue < summary.min ? rowValue : summary.min;
-        summary.max = rowValue > summary.max ? rowValue : summary.max;
-        if (typeof rowValue === 'number') {
-            summary.sum = (summary.sum || 0) + rowValue;
-        }
-    }
-    calcSummary(row) {
-        if (this.summaryColumns.length === 0)
-            return;
-        this.summaryColumns.forEach((column) => {
-            const columnName = column.name;
-            if (isNil(this.summary[columnName])) {
-                this.summary[columnName] = {
-                    count: 0,
-                    sum: undefined,
-                    avg: undefined,
-                    min: undefined,
-                    max: undefined,
-                };
-            }
-            this.calcSummaryValues(column, this.summary[columnName], row);
-            this.groups.forEach((group) => {
-                this.calcSummaryValues(column, group.footer[columnName], row);
-            });
-        });
-    }
-    addSummary() {
-        if (this.summaryColumns.length === 0)
-            return;
-        const summaryRow = {
-            groupFooter: true,
-            groupSummary: true,
-            ...this.getSummaryData(this.summary),
-        };
-        this.groupedData.push(summaryRow);
-    }
-    /**
-     * It takes a flat array of data and groups it by the group columns specified in
-     * the grid.
-     */
-    buildGroupedData() {
-        this.initGroups();
-        this.initSummaryColumns();
-        this.groupedData = [];
-        const data = this.grid.getData();
-        data.forEach((row) => {
-            let groupBreak = false;
-            this.groups.forEach((group, index) => {
-                const groupValue = row[group.name];
-                if (group.lastValue !== groupValue || groupBreak) {
-                    if (!groupBreak) {
-                        this.addGroupFooters(index);
-                    }
-                    group.lastValue = groupValue;
-                    this.resetFooterVariables(group);
-                    this.addGroupHeader(row, group, index);
-                    groupBreak = true;
-                }
-            });
-            this.groups.forEach((group) => {
-                group.lastGroupHeaderRow.children.push(row);
-            });
-            this.groupedData.push({
-                ...row,
-                groupHeaders: this.groups.map((group) => group.lastGroupHeaderRow).filter(Boolean),
-            });
-            this.calcSummary(row);
-        });
-        if (this.groupedData.length > 0) {
-            this.addGroupFooters(0);
-            if (this.grid.showSummaryTotal) {
-                this.addSummary();
-            }
-        }
-    }
-    openGroup(group) {
-        group.groupOpened = !group.groupOpened;
-        if (this.grid.virtualScroll && this.viewUpdateScrollData)
-            this.viewUpdateScrollData();
-    }
-    isItemVisible(row) {
-        return !row.groupHeaders || !row.groupHeaders.length || row.groupHeaders.every((group) => group.groupOpened);
-    }
-    isGrouped() {
-        return !!this.groupColumnNames.length || (this.grid.showSummaryTotal && !!this.summaryColumns.length);
-    }
-    isColumnSearchable(column) {
-        return !this.grid.searchVisibleOnly || column.isVisible || column.grouped;
-    }
-    directionalLeft() {
-        const { currentRow } = this.grid.datasource;
-        if (currentRow.group && currentRow.groupOpened) {
-            currentRow.groupOpened = false;
-            return;
-        }
-        if (this.grid.cellSelection || !currentRow.groupHeaders?.length)
-            return;
-        const newCurrentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
-        this.grid.setCurrentRow(newCurrentRow);
-    }
-    directionalRight() {
-        const { currentRow } = this.grid.datasource;
-        if (!currentRow.group || currentRow.groupOpened)
-            return;
-        currentRow.groupOpened = true;
-    }
-}
-
-class GroupedViewNavigator {
-    viewNavigator;
-    grid;
-    constructor(iterable) {
-        this.viewNavigator = new ViewNavigator();
-        this.grid = iterable;
-    }
-    navigateLeft(param) {
-        this.viewNavigator.navigateLeft(param);
-    }
-    navigateRight(param) {
-        this.viewNavigator.navigateRight(param);
-    }
-    setViewNavigate(viewNavigate) {
-        this.viewNavigator.setViewNavigate(viewNavigate);
-    }
-    getRowIndex(groupedData, index) {
-        if (index)
-            return index;
-        const { currentRow } = this.grid.datasource;
-        return groupedData.findIndex((row) => {
-            if (currentRow.group) {
-                return row.group && row.groupValue === currentRow.groupValue;
-            }
-            const rowKey = this.grid.getRowKey(row);
-            const currentRowKey = this.grid.getRowKey(currentRow);
-            return rowKey && rowKey === currentRowKey;
-        });
-    }
-    navigateUp(index) {
-        if (!this.grid.isGrouped() || this.grid.cellSelection) {
-            this.viewNavigator.navigateUp();
-            return;
-        }
-        const groupedData = this.grid.getGroupedData();
-        if (!groupedData.length || index === -1)
-            return;
-        let rowIndex = this.getRowIndex(groupedData, index);
-        if (rowIndex === -1)
-            rowIndex = groupedData.length;
-        const newRow = groupedData[rowIndex - 1];
-        if (!newRow || !this.grid.isItemVisible(newRow) || newRow.groupFooter) {
-            this.navigateUp(rowIndex - 1);
-            return;
-        }
-        this.grid.setCurrentRow(newRow);
-    }
-    navigateDown(index) {
-        if (!this.grid.isGrouped() || this.grid.cellSelection) {
-            this.viewNavigator.navigateDown();
-            return;
-        }
-        const groupedData = this.grid.getGroupedData();
-        if (!groupedData.length || index === groupedData.length)
-            return;
-        const rowIndex = this.getRowIndex(groupedData, index);
-        const newRow = groupedData[rowIndex + 1];
-        if (!newRow || !this.grid.isItemVisible(newRow) || newRow.groupFooter) {
-            this.navigateDown(rowIndex + 1);
-            return;
-        }
-        this.grid.setCurrentRow(newRow);
-    }
-}
-
-const tuple = (...args) => args;
-const columnAggregationValues = tuple('SUM', 'MIN', 'MAX', 'AVG', 'COUNT', undefined);
-
-class KeyMapGrouped {
-    getMap(instance) {
-        return {
-            left: {
-                event: instance.directionalLeft.bind(instance),
-                stop: true,
-                active: true,
-            },
-            right: {
-                event: instance.directionalRight.bind(instance),
-                stop: true,
-                active: true,
-            },
-        };
-    }
-}
-
-class GroupedDataSelector extends DataSelector {
-    selectAll(isSelected) {
-        if (!this.iterable.selectable)
-            return;
-        this.iterable.selectionState = { allSelected: isSelected, except: [] };
-        const data = this.getData();
-        if (!isSelected) {
-            data.forEach((row) => {
-                const index = this.iterable.selectedRows.indexOf(row);
-                if (index > -1) {
-                    this.iterable.selectedRows.splice(index, 1);
-                }
-            });
-            return;
-        }
-        data.forEach((row) => {
-            if (this.callDisableSelection(row))
-                return;
-            const key = this.iterable.getRowKey(row);
-            if (key && this.iterable.selectedRows.indexOf(row) === -1) {
-                this.iterable.selectedRows.push(row);
-            }
-        });
-    }
-    getData() {
-        if (this.iterable.isGrouped()) {
-            return this.iterable.getGroupedData();
-        }
-        return this.iterable.getData();
-    }
-}
-
-/**
- * Base class for TekGrid column
- */
-class TekGridColumn extends GridColumnEditable {
-    /* filter component props */
-    filterProps = [];
-    /* column can be use to filter */
-    filterable = true;
-    /* Index of the column inside filter modal */
-    filterIndex;
-    /* should not consider lookup column on search */
-    skipLookupSearch = false;
-    /* column is grouped */
-    groupedValue = false;
-    /* column group is opened */
-    groupOpenedValue = false;
-    /* Value to show when grouped value is empty */
-    groupLabelForEmptyValue = '';
-    /* column has aggregation */
-    aggregationValue;
-    /* column is visible */
-    isVisibleValue = true;
-    /**
-     * Defines if the column should store the componentProps datasource.data in memory
-     */
-    storeData = true;
-    grid;
-    /* istanbul ignore next */
-    /**
-     * Creates a new TekGrid Column.
-     * @param props TekGrid column properties
-     */
-    constructor(props, grid) {
-        super(props);
-        this.grid = grid;
-        this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
-        this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
-        this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
-        this.filterIndex = this.getInitValue('filterIndex', props.filterIndex, this.filterIndex);
-        this.skipLookupSearch = this.getInitValue('skipLookupSearch', props.skipLookupSearch, this.skipLookupSearch);
-        this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
-        this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
-        this.aggregation = this.getInitValue('aggregation', props.aggregation, this.aggregation);
-        this.groupLabelForEmptyValue = this.getInitValue('groupLabelForEmptyValue', props.groupLabelForEmptyValue, this.groupLabelForEmptyValue);
-        this.storeData = this.getInitValue('storeData', props.storeData, this.storeData);
-        this.createAccessors();
-    }
-    async getBatchLookupData(lookupColumn, values) {
-        const batch = [];
-        const dataToLookup = [];
-        values.forEach((value) => {
-            if (this.lookupData[value]) {
-                batch.push(this.lookupData[value]);
-                return;
-            }
-            const dataIndex = this.lookupDatasource.data.findIndex((row) => row[lookupColumn] === value);
-            if (dataIndex !== -1) {
-                this.lookupData[value] = this.lookupDatasource.data[dataIndex];
-                batch.push(this.lookupData[value]);
-                return;
-            }
-            dataToLookup.push(value);
-        });
-        if (dataToLookup.length > 0) {
-            await this.lookupFn(lookupColumn, dataToLookup);
-            dataToLookup.forEach((value) => {
-                const row = this.lookupData[value];
-                if (row)
-                    batch.push(row);
-            });
-        }
-        return batch;
-    }
-    /**
-     * Memory search, without changing lookupDatasource
-     */
-    async memorySearch(search) {
-        if (!this.lookupDatasource) {
-            throw new Error("Can't search in a column that doesn't have a datasource");
-        }
-        let { data } = this.lookupDatasource;
-        if (this.storeData) {
-            if (!data.length) {
-                data = await this.lookupDatasource.get();
-            }
-        }
-        else {
-            // datasource without the lookup filters
-            const defaultDs = DatasourceFactory.factory({
-                ...this.componentProps.datasource,
-                lazyLoad: true,
-                loadAll: true,
-            });
-            defaultDs.initialize();
-            data = await defaultDs.get();
-        }
-        const { dataText } = this.componentProps;
-        const searchIn = Array.isArray(dataText) ? dataText : [dataText];
-        // get datasource as memory
-        const datasource = DatasourceFactory.factory({
-            searchIn,
-            data,
-            type: 'memory',
-            loadAll: true,
-        });
-        datasource.initialize();
-        return datasource.setSearch(search);
-    }
-    get grouped() {
-        return this.groupedValue;
-    }
-    set grouped(value) {
-        const changed = value !== this.groupedValue;
-        this.groupedValue = value;
-        if (changed) {
-            this.changeGrouping();
-        }
-    }
-    get aggregation() {
-        return this.aggregationValue;
-    }
-    set aggregation(value) {
-        const changed = value !== this.aggregationValue;
-        this.aggregationValue = value;
-        if (changed) {
-            this.changeGrouping();
-        }
-    }
-    get groupOpened() {
-        return this.groupOpenedValue;
-    }
-    set groupOpened(value) {
-        const changed = value !== this.groupOpenedValue;
-        this.groupOpenedValue = value;
-        if (changed) {
-            this.changeGrouping();
-        }
-    }
-    /* istanbul ignore next */
-    // @ts-ignore
-    get isVisible() {
-        return this.isVisibleValue && !this.grouped;
-    }
-    /* istanbul ignore next */
-    set isVisible(value) {
-        this.isVisibleValue = value;
-    }
-    changeGrouping() {
-        // wait for grid.constructor to be fully executed
-        setTimeout(() => {
-            this.grid.updateGrouping();
-        });
-    }
-}
-
-class TekGridController {
-    grid;
-    openToolbar = true;
-    constructor(grid) {
-        this.grid = grid;
-        this.openToolbar = this.grid.toolbarOpened;
-    }
-    get gridTitle() {
-        return this.grid.title;
-    }
-    get showAddButton() {
-        return this.grid.addButton;
-    }
-    get showDeleteButton() {
-        return this.grid.deleteButton !== 'none';
-    }
-    get showFilterButton() {
-        return this.grid.filterButton;
-    }
-    get showModalFilterProps() {
-        return this.grid.modalFilterProps;
-    }
-    get showSearchInput() {
-        return this.grid.showSearch;
-    }
-    get showToolbar() {
-        return this.openToolbar;
-    }
-    set showToolbar(value) {
-        this.openToolbar = value;
-    }
-    get toolbarClass() {
-        return !this.openToolbar ? 'is-rotated' : '';
-    }
-    get tooltipName() {
-        return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
-    }
-    get showReloadButton() {
-        return this.grid.showReload;
-    }
-    get showDivider2() {
-        return (this.showReloadButton &&
-            (this.showLayoutOptionsButton ||
-                this.showColumnsButton ||
-                this.showActionsButton ||
-                this.showExportButton ||
-                this.showSearchInput));
-    }
-    get showColumnsButton() {
-        return this.grid.columnsButton;
-    }
-    get columnsButtonIgnore() {
-        return this.grid.columnsButtonIgnore;
-    }
-    get showLayoutOptionsButton() {
-        return this.grid.showLayoutOptions;
-    }
-    get showDivider1() {
-        return ((this.showAddButton || this.showDeleteButton) &&
-            (this.showReloadButton ||
-                this.showLayoutOptionsButton ||
-                this.showColumnsButton ||
-                this.showActionsButton ||
-                this.showExportButton ||
-                this.showSearchInput));
-    }
-    get showActionsButton() {
-        return this.grid.actions.length > 0;
-    }
-    get showExportButton() {
-        return this.grid.showExport;
-    }
-    get showActionAndExportButton() {
-        return ((this.showLayoutOptionsButton || this.showColumnsButton) &&
-            (this.showActionsButton || this.showExportButton || this.showSearchInput));
-    }
-    get showDivider3() {
-        return (this.showActionsButton || this.showExportButton) && this.showSearchInput;
-    }
-    get isEditing() {
-        return this.grid.editing;
-    }
-    get showEditButtons() {
-        return this.isEditing && this.grid.showEditButtons;
-    }
-    get isNotEditing() {
-        return !this.isEditing;
-    }
-    get disableDeleteButton() {
-        if (this.grid.deleteButton === 'selection') {
-            if (this.grid.selectAllPages) {
-                const { allSelected, except } = this.grid.selectionState;
-                return (allSelected && except.length === this.grid.datasource.total) || (!allSelected && except.length === 0);
-            }
-            return this.grid.selectedRows.length === 0;
-        }
-        if (this.grid.deleteButton === 'currentRow') {
-            return !this.grid.datasource.currentRow[this.grid.datasource.uniqueKey];
-        }
-        return false;
-    }
-}
-
-class TekGridEvents extends GridEditableEvents {
-    tekGrid;
-    /**
-     * Flag to prevent row click
-     */
-    preventRowClick = false;
-    preventRowDoubleClick = false;
-    constructor(tekGrid) {
-        super(tekGrid);
-        this.tekGrid = tekGrid;
-    }
-    calcSummary(column, summary, row) {
-        this.tekGrid.callEvent('calcSummary', {
-            component: this.tekGrid,
-            column,
-            columnName: column.name,
-            summary,
-            row,
-            rowValue: row[column.name],
-        });
-    }
-    rowDoubleClick(row, event, element) {
-        if (!this.preventRowDoubleClick) {
-            this.tekGrid.datasource.currentRow = row;
-            this.tekGrid.callEvent('rowDoubleClick', {
-                event,
-                element,
-                row,
-                component: this.tekGrid,
-                column: undefined,
-            });
-        }
-        this.preventRowDoubleClick = false;
-    }
-    /**
-     * Dispatches group row click event
-     * @param row Grid row
-     * @param event DOM event
-     * @param element DOM Element
-     */
-    groupRowClick(row, event, element) {
-        if (!this.preventRowClick) {
-            this.tekGrid.callEvent('groupRowClick', {
-                event,
-                element,
-                row,
-                component: this.tekGrid,
-                column: undefined,
-            });
-        }
-        this.preventRowClick = false;
-    }
-    groupRowDoubleClick(row, event, element) {
-        if (!this.preventRowDoubleClick) {
-            this.tekGrid.callEvent('groupRowDoubleClick', {
-                event,
-                element,
-                row,
-                component: this.tekGrid,
-                column: undefined,
-            });
-        }
-        this.preventRowDoubleClick = false;
-    }
-    /**
-     * Dispatches group select/unselect event
-     * @param row Group row
-     * @param isSelected Row is selected
-     * @param event DOM event
-     * @param element DOM Element
-     */
-    selectGroupClick(row, isSelected, event, element) {
-        if (isSelected) {
-            this.tekGrid.callEvent('groupSelected', {
-                event,
-                element,
-                row,
-                component: this.tekGrid,
-                column: undefined,
-            });
-        }
-        else {
-            this.tekGrid.callEvent('groupUnselected', {
-                event,
-                element,
-                row,
-                component: this.tekGrid,
-                column: undefined,
-            });
-        }
-    }
-}
-
-/* TekGrid Class */
-class TekGrid extends Iterable {
-    tableActionBuilder;
-    iterableTable;
-    dataSelector;
-    tekGridEvents;
-    dataNavigator;
-    groupedViewNavigator;
-    keyMapMerger;
-    dataEditor;
-    columnsSearcher;
-    groupedDataManager;
-    tekGridToolbarProvider;
-    /* Grid Title */
-    title = '';
-    /* Show Add button */
-    addButton = false;
-    /* Show Delete button */
-    deleteButton = 'none';
-    /* Show Delete button */
-    actions = [];
-    /* Show edit button */
-    showEditButtons = true;
-    /* Show Filter button */
-    filterButton = false;
-    /* Show SearchInput */
-    showSearch = true;
-    /* Show Column Filter button */
-    columnFilterButton = false;
-    /* Show Columns button */
-    columnsButton = false;
-    /* Defines if the grid is the unique grid on screen */
-    mainGrid = true;
-    /* Columns to be ignored on columns button */
-    columnsButtonIgnore = [];
-    /**
-     * Enables column dragging
-     * @public
-     */
-    dragColumns = true;
-    /**
-     * Enables column resizing
-     * @public
-     */
-    resizeColumns = true;
-    /**
-     * Enables layout saving
-     * @public
-     */
-    showLayoutOptions = true;
-    xlsDefaultType;
-    modalFilterProps = {
-        name: this.name,
-        height: 'auto',
-        persistent: true,
-        cssClass: '',
-        cssStyle: '',
-        dark: false,
-        draggable: false,
-        fullscreen: false,
-        dragHandle: '',
-        title: 'FILTER',
-    };
-    /**
-     * Show export button
-     */
-    showExport = false;
-    /**
-     * Show refresh button
-     */
-    showReload = true;
-    /**
-     * Export config
-     */
-    exportConfig = [
-        {
-            type: 'pdf',
-            label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
-            multiOption: [
-                { label: I18n.translate('TEKGRID_PORTRAIT'), iconName: 'mdi-file-outline' },
-                {
-                    label: I18n.translate('TEKGRID_LANDSCAPE'),
-                    iconName: 'mdi-file-outline',
-                    cssClass: 'tek-grid-export-landscape',
-                    reportParams: { portrait: false },
-                },
-            ],
-        },
-        {
-            type: 'xls',
-            label: I18n.translate('TEKGRID_EXPORT_AS', {
-                type: 'XLS',
-            }),
-        },
-        {
-            type: 'xls2',
-            label: I18n.translate('TEKGRID_EXPORT_AS', {
-                type: `XLS ${I18n.translate('TEKGRID_WITH_GROUPS')}`,
-            }),
-        },
-        {
-            type: 'xls3',
-            label: I18n.translate('TEKGRID_EXPORT_AS', {
-                type: `XLS ${I18n.translate('TEKGRID_GRID_MIRROR')}`,
-            }),
-        },
-        {
-            type: 'csv',
-            label: I18n.translate('TEKGRID_EXPORT_AS', { type: 'CSV' }),
-        },
-    ];
-    /**
-     * Actions to overwrite the default export config
-     */
-    exportActions;
-    /**
-     * Groups should be opened by default after building
-     */
-    groupsOpened = false;
-    /**
-     * Show Total summary
-     */
-    showSummaryTotal = true;
-    editNewRowsOnly = false;
-    keyShortcutKeyMapping;
-    showCheckboxAllFilter = Config.gridShowCheckboxAllFilter || false;
-    defaultFilter = {};
-    toolbarOpened = true;
-    reportTitle = '';
-    editing = false;
-    currentColumn = null;
-    selectedRows = [];
-    selectionState = {
-        allSelected: false,
-        except: [],
-    };
-    rowStyleConditions;
-    selectAllPages = Config.gridSelectAllPages;
-    selectable = false;
-    disableSelection;
-    cellSelection = false;
-    toolbarSlot = [{ name: '<<NAME>>_gridSearch', component: 'ZdSearch' }];
-    footerSlot = [
-        { name: '<<NAME>>_iterablePagination', component: 'ZdIterablePagination' },
-        {
-            name: '<<NAME>>_iterableInfoDiv',
-            component: 'ZdTag',
-            cssClass: 'zd-grid-div-footer',
-            tag: 'div',
-            children: [
-                {
-                    name: '<<NAME>>_iterablePageSize',
-                    component: 'ZdIterablePageSize',
-                    iterableComponentName: '<<NAME>>',
-                },
-                {
-                    name: '<<NAME>>_iterablePageInfo',
-                    component: 'ZdIterablePageInfo',
-                    iterableComponentName: '<<NAME>>',
-                },
-            ],
-        },
-    ];
-    noResultsText = 'NO_RESULT';
-    noResultSlot = [
-        {
-            name: '<<NAME>>_no-result',
-            component: 'ZdText',
-            cssClass: 'no-result',
-            text: this.noResultsText,
-        },
-    ];
-    errorSlot = [];
-    dense = true;
-    headerBackground = '';
-    headerCellTextColor = '';
-    height = 'auto';
-    loadingText = 'LOADING';
-    maxHeight = 'none';
-    maxWidth = 'none';
-    minHeight = 'auto';
-    minWidth = 'auto';
-    noDataText = 'NO_DATA';
-    noDataSlot = [
-        {
-            name: '<<NAME>>_no-data',
-            component: 'ZdText',
-            cssClass: 'no-data',
-            text: this.noDataText,
-        },
-    ];
-    showFooter = true;
-    showHeader = true;
-    showSelectAll = true;
-    width = '100%';
-    backgroundColor = 'transparent';
-    canEditRow;
-    showCancelColumn = false;
-    doubleClickEdit = false;
-    singleEdit = false;
-    editingNewRows = false;
-    defaultLazy = false;
-    toolbarSlotProps = false;
-    filterRelationsDatasource;
-    filterOperationsDatasource;
-    /**
-     * TekGrid class constructor
-     * @param props TekGrid properties
-     */
-    constructor(props) {
-        super(props);
-        this.title = this.getInitValue('title', props.title, this.title);
-        this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
-        this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
-        this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
-        this.showSearch = this.getInitValue('showSearch', props.showSearch, this.showSearch);
-        this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
-        this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
-        this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
-        this.showEditButtons = this.getInitValue('showEditButtons', props.showEditButtons, this.showEditButtons);
-        this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
-        this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
-        this.showLayoutOptions = this.getInitValue('showLayoutOptions', props.showLayoutOptions, this.showLayoutOptions);
-        this.xlsDefaultType = this.getInitValue('xlsDefaultType', props.xlsDefaultType, this.xlsDefaultType);
-        this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
-        this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
-        this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
-        this.modalFilterProps = this.getInitValue('modalFilterProps', props.modalFilterProps, this.modalFilterProps);
-        this.exportActions = props.exportActions || this.exportActions;
-        this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
-        this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
-        this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
-        this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
-        this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
-        this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
-        this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
-        this.reportTitle = this.getInitValue('reportTitle', props.reportTitle, this.reportTitle);
-        this.actions = props.actions || this.actions;
-        this.toolbarSlotProps = props.toolbarSlot !== undefined;
-        this.cellSelection = this.getInitValue('cellSelection', props.cellSelection, this.cellSelection);
-        this.dense = this.getInitValue('dense', props.dense, this.dense);
-        this.disableSelection = this.getInitValue('disableSelection', props.disableSelection, this.disableSelection);
-        this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
-        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
-        this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
-        this.height = this.getInitValue('height', props.height, this.height);
-        this.loadingText = this.getInitValue('loadingText', props.loadingText, this.loadingText);
-        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
-        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
-        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
-        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
-        this.noDataText = this.getInitValue('noDataText', props.noDataText, this.noDataText);
-        this.noResultsText = this.getInitValue('noResultsText', props.noResultsText, this.noResultsText);
-        this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
-        this.rowStyleConditions = this.getInitValue('rowStyleConditions', props.rowStyleConditions, this.rowStyleConditions);
-        this.selectable = this.getInitValue('selectable', props.selectable, this.selectable);
-        this.selectAllPages = this.getInitValue('selectAllPages', props.selectAllPages, this.selectAllPages);
-        this.showFooter = this.getInitValue('showFooter', props.showFooter, this.showFooter);
-        this.showHeader = this.getInitValue('showHeader', props.showHeader, this.showHeader);
-        this.showSelectAll = this.getInitValue('showSelectAll', props.showSelectAll, this.showSelectAll);
-        this.width = this.getInitValue('width', props.width, this.width);
-        this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
-        // headerBackground defaults to the backgroundColor, unless backgroundColor is transparent
-        const defaultHeaderBackground = this.backgroundColor === 'transparent' ? '' : this.backgroundColor;
-        this.headerBackground = this.getInitValue('headerBackground', props.headerBackground, defaultHeaderBackground);
-        this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
-        this.singleEdit = this.getInitValue('singleEdit', props.singleEdit, this.singleEdit);
-        this.showCancelColumn = this.getInitValue('showCancelColumn', props.showCancelColumn, this.showCancelColumn);
-        this.canEditRow = this.getInitValue('canEditRow', props.canEditRow, this.canEditRow);
-        this.editingNewRows = this.getInitValue('editingNewRows', props.editingNewRows, this.editingNewRows);
-        this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
-        this.footerSlot = props.footerSlot || this.footerSlot;
-        this.noDataSlot = props.noDataSlot || this.noDataSlot;
-        this.noResultSlot = props.noResultSlot || this.noResultSlot;
-        this.errorSlot = props.errorSlot || this.errorSlot;
-        this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
-        this.footerSlot = this.changeDefaultSlotNames(this.footerSlot);
-        this.toolbarSlot = this.changeDefaultSlotNames(this.toolbarSlot);
-        this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
-        this.errorSlot = this.changeDefaultSlotNames(this.errorSlot);
-        this.defaultLazy = this.getDefaultLazy(props);
-        if (this.deleteButton === 'selection') {
-            this.selectable = true;
-        }
-        this.tableActionBuilder = new TableActionBuilder(this);
-        this.iterableTable = new IterableTable(this);
-        this.dataSelector = new GroupedDataSelector(this);
-        this.tekGridEvents = new TekGridEvents(this);
-        this.dataNavigator = new DataNavigator(this);
-        this.groupedViewNavigator = new GroupedViewNavigator(this);
-        this.dataEditor = new DataEditorWithAdd(this);
-        this.columnsSearcher = new ColumnsSearcher();
-        this.groupedDataManager = new GroupedDataManager(this);
-        this.tekGridToolbarProvider = new TekGridToolbarProvider(this, 'show');
-    }
-    initializeDatasource(props) {
-        let datasourceProps = clonedeep(props.datasource);
-        // if using accessor, get props from the controller
-        if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
-            const [controller, accessor] = Accessor.getAccessor(props.datasource);
-            const instance = Loader.getInstance(controller);
-            datasourceProps = instance[accessor];
-        }
-        this.datasource = DatasourceFactory.factory({
-            ...datasourceProps,
-            searchIn: props.datasource?.searchIn || `{{IterableController_${this.name}.searchIn}}`,
-            lazyLoad: true,
-        });
-    }
-    columnHasFilter(columnName) {
-        return this.datasource.hasFilter(columnName);
-    }
-    registerTask(task) {
-        this.groupedDataManager.registerTask(task);
-    }
-    async loadAfterTasks() {
-        return this.groupedDataManager.loadAfterTasks();
-    }
-    calcSummary(column, columnNamesummary, row) {
-        this.tekGridEvents.calcSummary(column, columnNamesummary, row);
-    }
-    getDefaultLazy(props) {
-        if (typeof props.datasource === 'object') {
-            return props.datasource.lazyLoad;
-        }
-        if (typeof props.datasource === 'string' && Accessor.isAccessorDefinition(props.datasource)) {
-            const [controller, accessor] = Accessor.getAccessor(props.datasource);
-            const instance = Loader.getInstance(controller);
-            return instance[accessor].lazyLoad || false;
-        }
-        return false;
-    }
-    initializeGrouping(lazyLoad) {
-        this.groupedDataManager.initializeGrouping(lazyLoad);
-    }
-    updateGrouping() {
-        return this.groupedDataManager.updateGrouping();
-    }
-    updateGroupedData(lazyLoad) {
-        return this.groupedDataManager.updateGroupedData(lazyLoad);
-    }
-    buildGroupedData() {
-        this.groupedDataManager.buildGroupedData();
-    }
-    openGroup(group) {
-        this.groupedDataManager.openGroup(group);
-    }
-    isItemVisible(row) {
-        return this.groupedDataManager.isItemVisible(row);
-    }
-    isGrouped() {
-        return this.groupedDataManager.isGrouped();
-    }
-    isColumnSearchable(column) {
-        return this.groupedDataManager.isColumnSearchable(column);
-    }
-    getGroupedData() {
-        return this.groupedDataManager.getGroupedData();
-    }
-    directionalLeft(param) {
-        this.groupedDataManager.directionalLeft(param);
-        this.groupedViewNavigator.navigateLeft(param);
-    }
-    directionalRight(param) {
-        this.groupedDataManager.directionalRight(param);
-        this.groupedViewNavigator.navigateRight(param);
-    }
-    getReport() {
-        throw new Error('Method not implemented.');
-    }
-    setViewUpdateFixedColumns(fn) {
-        this.groupedDataManager.setViewUpdateFixedColumns(fn);
-    }
-    setViewUpdateScrollData(fn) {
-        this.groupedDataManager.setViewUpdateScrollData(fn);
-    }
-    onCreated() {
-        super.onCreated();
-        Loader.addController(`GridController_${this.name}`, TekGridController, [this]);
-        if (!this.toolbarSlotProps)
-            this.toolbarSlot = this.tekGridToolbarProvider.getProperties();
-        this.createDynamicFilterDatasources();
-    }
-    createDynamicFilterDatasources() {
-        if (!(this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource))
-            return;
-        const datasourceFactory = new DynamicFilterDatasourceFactory();
-        this.filterRelationsDatasource = datasourceFactory.factory(this.datasource.dynamicFilterRelations);
-        this.filterOperationsDatasource = datasourceFactory.factory(this.datasource.dynamicFilterOperations);
-    }
-    onMounted(element) {
-        super.onMounted(element);
-        this.keyMapMerger = new KeyMapMerger(this, [KeyMapNavigation, KeyMapEditing, KeyMapGrouped]);
-        this.keyMapMerger.bind(element);
-        this.initializeGrouping(this.defaultLazy);
-    }
-    onBeforeDestroy() {
-        super.onBeforeDestroy();
-        this.keyMapMerger.unbind();
-    }
-    createColumn(column) {
-        return new TekGridColumn(column, this);
-    }
-    getConditionalProps({ row, column }) {
-        const rowStyle = this.getRowStyleConditions(row);
-        const cellsApplied = this.getAppliedConditions({ row, column });
-        return { ...rowStyle, ...cellsApplied };
-    }
-    changeOrder(sortBy) {
-        return this.iterableTable.changeOrder(sortBy);
-    }
-    selectCell(row, column) {
-        this.iterableTable.selectCell(row, column);
-    }
-    reapplyRowStyleConditions(row) {
-        return this.iterableTable.reapplyRowStyleConditions(row);
-    }
-    getRowStyleConditions(row) {
-        return this.iterableTable.getRowStyleConditions(row);
-    }
-    deleteRows() {
-        return this.iterableTable.deleteRows();
-    }
-    selectAll(isSelected) {
-        this.dataSelector.selectAll(isSelected);
-    }
-    toggleRow(row) {
-        this.dataSelector.toggleRow(row);
-    }
-    selectRow(row, select) {
-        this.dataSelector.selectRow(row, select);
-    }
-    callDisableSelection(row) {
-        return this.dataSelector.callDisableSelection(row);
-    }
-    selectClick(row, isSelected, event, element) {
-        this.dataSelector.selectClick(row, isSelected, event, element);
-    }
-    selectAllClick(isSelected, event, element) {
-        this.dataSelector.selectAllClick(isSelected, event, element);
-    }
-    navigatePageUp() {
-        this.dataNavigator.navigatePageUp();
-    }
-    navigatePageDown() {
-        this.dataNavigator.navigatePageDown();
-    }
-    setViewNavigate(viewNavigate) {
-        this.groupedViewNavigator.setViewNavigate(viewNavigate);
-    }
-    navigateLeft(params) {
-        if (!this.cellSelection)
-            return;
-        this.groupedViewNavigator.navigateLeft(params);
-    }
-    navigateRight(params) {
-        if (!this.cellSelection)
-            return;
-        this.groupedViewNavigator.navigateRight(params);
-    }
-    navigateUp() {
-        this.groupedViewNavigator.navigateUp();
-    }
-    navigateDown() {
-        this.groupedViewNavigator.navigateDown();
-    }
-    navigateDatasource(direction) {
-        this.dataNavigator.navigateDatasource(direction);
-    }
-    getActionComponent(actionComponent, column, row, parentPath) {
-        return this.tableActionBuilder.getActionComponent(actionComponent, column, row, parentPath);
-    }
-    addCancelColumn() {
-        this.dataEditor.addCancelColumn();
-    }
-    getCancelColumnProps() {
-        return this.dataEditor.getCancelColumnProps();
-    }
-    isAdded(row) {
-        return this.dataEditor.isAdded(row);
-    }
-    cancelAddedRow(key) {
-        return this.dataEditor.cancelAddedRow(key);
-    }
-    cancelAddedRows() {
-        return this.dataEditor.cancelAddedRows();
-    }
-    getAddedRows() {
-        return this.dataEditor.getAddedRows();
-    }
-    addNewRow(row, position) {
-        return this.dataEditor.addNewRow(row, position);
-    }
-    getVisibleValue(row, column) {
-        return this.dataEditor.getVisibleValue(row, column);
-    }
-    getEditableComponent(column, row) {
-        return this.dataEditor.getEditableComponent(column, row);
-    }
-    isEdited(column, row) {
-        return this.dataEditor.isEdited(column, row);
-    }
-    isValid(column, row, revalidate) {
-        return this.dataEditor.isValid(column, row, revalidate);
-    }
-    checkValid(column, row) {
-        return this.dataEditor.checkValid(column, row);
-    }
-    isGridValid(revalidate) {
-        return this.dataEditor.isGridValid(revalidate);
-    }
-    getComponent(key, columnName) {
-        return this.dataEditor.getComponent(key, columnName);
-    }
-    updateRow(newRow) {
-        this.dataEditor.updateRow(newRow);
-    }
-    updateCell(rowKey, columnName, value) {
-        this.dataEditor.updateCell(rowKey, columnName, value);
-    }
-    setViewEnterEdit(fn) {
-        this.dataEditor.setViewEnterEdit(fn);
-    }
-    enterEdit(rowKey, columnName) {
-        this.dataEditor.enterEdit(rowKey, columnName);
-    }
-    cancelEditedRows() {
-        return this.dataEditor.cancelEditedRows();
-    }
-    saveEditedRows(revalidate) {
-        return this.dataEditor.saveEditedRows(revalidate);
-    }
-    reapplyCanEditRow(row) {
-        return this.dataEditor.reapplyCanEditRow(row);
-    }
-    getCanEditRow(row) {
-        return this.dataEditor.getCanEditRow(row);
-    }
-    getEditedRows(revalidate, silent) {
-        return this.dataEditor.getEditedRows(revalidate, silent);
-    }
-    getEditedRow(row) {
-        return this.dataEditor.getEditedRow(row);
-    }
-    rowClick(row, event, element) {
-        this.tekGridEvents.rowClick(row, event, element);
-    }
-    rowDoubleClick(row, event, element) {
-        this.tekGridEvents.rowDoubleClick(row, event, element);
-    }
-    cellDoubleClick(row, column, event, element) {
-        this.tekGridEvents.cellDoubleClick(row, column, event, element);
-    }
-    inlineEdit(row, column, event, element) {
-        this.tekGridEvents.inlineEdit(row, column, event, element);
-    }
-    cellClick(row, column, event, element) {
-        this.tekGridEvents.cellClick(row, column, event, element);
-    }
-    cellClickEvent(row, column, event, element) {
-        this.tekGridEvents.cellClickEvent(row, column, event, element);
-    }
-    groupRowClick(row, event, element) {
-        this.tekGridEvents.groupRowClick(row, event, element);
-    }
-    groupRowDoubleClick(row, event, element) {
-        this.tekGridEvents.groupRowDoubleClick(row, event, element);
-    }
-    selectGroupClick(row, isSelected, event, element) {
-        this.tekGridEvents.selectGroupClick(row, isSelected, event, element);
-    }
-    async setSearch(search) {
-        const { datasource } = this;
-        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-            datasource.searchJoin = await this.columnsSearcher.searchColumn(this.columns, search);
-        }
-        datasource.page = 1;
-        return datasource.setSearch(search);
-    }
-    getAtomInstance(key) {
-        return this.tekGridToolbarProvider.getAtomInstance(key);
-    }
-    getAtomName(key) {
-        return this.tekGridToolbarProvider.getAtomName(key);
-    }
-}
-Messages.add({
-    'pt-BR': {
-        translation: {
-            TEKGRID_CONTAINS: 'contém',
-            TEKGRID_NOT_CONTAINS: 'não contém',
-            TEKGRID_EQUALS: 'é igual a',
-            TEKGRID_NOT_EQUALS: 'é diferente de',
-            TEKGRID_GREATER_THAN: 'é maior que',
-            TEKGRID_LESS_THAN: 'é menor que',
-            TEKGRID_GREATER_THAN_EQUALS: 'é maior ou igual a',
-            TEKGRID_LESS_THAN_EQUALS: 'é menor ou igual a',
-            TEKGRID_IN: 'um dos valores',
-            TEKGRID_NOT_IN: 'nenhum dos valores',
-            TEKGRID_BETWEEN: 'está entre',
-            TEKGRID_AND: 'e',
-            TEKGRID_OR: 'ou',
-            TEKGRID_HIDE: 'Esconder Ações',
-            TEKGRID_SHOW: 'Mostrar Ações',
-            TEKGRID_ADD: 'Adicionar',
-            TEKGRID_DELETE: 'Excluir',
-            TEKGRID_REFRESH: 'Atualizar',
-            TEKGRID_COLUMNS: 'Colunas',
-            TEKGRID_SAVE: 'Salvar',
-            TEKGRID_CANCEL: 'Cancelar',
-            TEKGRID_APPLY: 'Aplicar',
-            TEKGRID_FILTER: 'Filtro',
-            TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
-            TEKGRID_EXPORT: 'Exportar',
-            TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
-            TEKGRID_PORTRAIT: 'Retrato',
-            TEKGRID_LANDSCAPE: 'Paisagem',
-            TEKGRID_COLUMN_VISIBLE: 'Visível',
-            TEKGRID_COLUMN_GROUPED: 'Grupo',
-            TEKGRID_COLUMN_AGGREGATION: 'Totalização',
-            TEKGRID_COLUMN_LABEL: 'Rótulo',
-            TEKGRID_COLUMN_ALIGNMENT: 'Alinhamento',
-            TEKGRID_COLUMN_GROUP_OPENED: 'Aberto (grupo)',
-            TEKGRID_COLUMN_ORDER: 'Ordem',
-            TEKGRID_COLUMN_ORDER_DIRECTION: 'Direção (ordem)',
-            TEKGRID_AGGREGATION_SUM: 'Soma',
-            TEKGRID_AGGREGATION_AVG: 'Média',
-            TEKGRID_AGGREGATION_MAX: 'Máximo',
-            TEKGRID_AGGREGATION_MIN: 'Mínimo',
-            TEKGRID_AGGREGATION_COUNT: 'Contador',
-            TEKGRID_MORE_OPTIONS: 'Mais opções',
-            TEKGRID_COLUMNS_OPTIONS: 'Configuração de colunas',
-            TEKGRID_CLOSE: 'Fechar',
-            TEKGRID_FIXED_COLUMNS: 'Colunas fixadas',
-            TEKGRID_VISIBLE_COLUMNS: 'Colunas visíveis',
-            TEKGRID_GROUPED_COLUMNS: 'Colunas agrupadas',
-            TEKGRID_ORDER: 'Ordem',
-            TEKGRID_OTHER_COLUMNS: 'Outras colunas',
-            TEKGRID_DROP_COLUMNS: 'Arraste colunas aqui',
-            TEKGRID_DETAILS_FOR: 'Detalhes para:',
-            TEKGRID_LEFT: 'Esquerda',
-            TEKGRID_CENTER: 'Centro',
-            TEKGRID_RIGHT: 'Direita',
-            TEKGRID_ASC: 'Crescente',
-            TEKGRID_DESC: 'Decrescente',
-            TEKGRID_SELECT_COLUMN: '(selecione uma ou mais colunas)',
-            TEKGRID_SELECT_ALL: 'Selecionar todas',
-            TEKGRID_HELPERVALUE_TODAY: 'Hoje',
-            TEKGRID_HELPERVALUE_TOMORROW: 'Amanhã',
-            TEKGRID_HELPERVALUE_YESTERDAY: 'Ontem',
-            TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 Dias',
-            TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 Dias',
-            TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana Atual',
-            TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mês Atual',
-            TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Ano Atual',
-            TEKGRID_WITH_GROUPS: '(Com grupos)',
-            TEKGRID_GRID_MIRROR: '(Espelho do grid)',
-            TEKGRID_NO_DATA: 'Não há dados para gerar o relatório',
-        },
-    },
-    'en-US': {
-        translation: {
-            TEKGRID_CONTAINS: 'contains',
-            TEKGRID_NOT_CONTAINS: 'does not contain',
-            TEKGRID_EQUALS: 'is equal to',
-            TEKGRID_NOT_EQUALS: 'is different from',
-            TEKGRID_GREATER_THAN: 'is greater than',
-            TEKGRID_LESS_THAN: 'is less than',
-            TEKGRID_GREATER_THAN_EQUALS: 'is greater or equals to',
-            TEKGRID_LESS_THAN_EQUALS: 'is less or equals to',
-            TEKGRID_IN: 'is in',
-            TEKGRID_NOT_IN: 'is not in',
-            TEKGRID_BETWEEN: 'is between',
-            TEKGRID_AND: 'and',
-            TEKGRID_OR: 'or',
-            TEKGRID_HIDE: 'Hide Actions',
-            TEKGRID_SHOW: 'Show Actions',
-            TEKGRID_ADD: 'Add',
-            TEKGRID_DELETE: 'Delete',
-            TEKGRID_REFRESH: 'Refresh',
-            TEKGRID_COLUMNS: 'Columns',
-            TEKGRID_SAVE: 'Save',
-            TEKGRID_CANCEL: 'Cancel',
-            TEKGRID_APPLY: 'Apply',
-            TEKGRID_FILTER: 'Filter',
-            TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
-            TEKGRID_EXPORT: 'Export',
-            TEKGRID_EXPORT_AS: 'Export as {{ type }}',
-            TEKGRID_PORTRAIT: 'Portrait',
-            TEKGRID_LANDSCAPE: 'Landscape',
-            TEKGRID_COLUMN_VISIBLE: 'Visible',
-            TEKGRID_COLUMN_GROUPED: 'Grouped',
-            TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
-            TEKGRID_COLUMN_LABEL: 'Label',
-            TEKGRID_COLUMN_ALIGNMENT: 'Alignment',
-            TEKGRID_COLUMN_GROUP_OPENED: 'Opened (group)',
-            TEKGRID_COLUMN_ORDER: 'Order',
-            TEKGRID_COLUMN_ORDER_DIRECTION: 'Direction (order)',
-            TEKGRID_AGGREGATION_SUM: 'Sum',
-            TEKGRID_AGGREGATION_AVG: 'Average',
-            TEKGRID_AGGREGATION_MAX: 'Maximum',
-            TEKGRID_AGGREGATION_MIN: 'Minimum',
-            TEKGRID_AGGREGATION_COUNT: 'Count',
-            TEKGRID_MORE_OPTIONS: 'More options',
-            TEKGRID_COLUMNS_OPTIONS: 'Columns configuration',
-            TEKGRID_CLOSE: 'Close',
-            TEKGRID_FIXED_COLUMNS: 'Fixed columns',
-            TEKGRID_VISIBLE_COLUMNS: 'Visible columns',
-            TEKGRID_GROUPED_COLUMNS: 'Grouped columns',
-            TEKGRID_ORDER: 'Order',
-            TEKGRID_OTHER_COLUMNS: 'Other columns',
-            TEKGRID_DROP_COLUMNS: 'Drop columns here',
-            TEKGRID_DETAILS_FOR: 'Details for:',
-            TEKGRID_LEFT: 'Left',
-            TEKGRID_CENTER: 'Center',
-            TEKGRID_RIGHT: 'Right',
-            TEKGRID_ASC: 'Ascending',
-            TEKGRID_DESC: 'Descending',
-            TEKGRID_SELECT_COLUMN: '(select one or more columns)',
-            TEKGRID_SELECT_ALL: 'Select all',
-            TEKGRID_HELPERVALUE_TODAY: 'Today',
-            TEKGRID_HELPERVALUE_TOMORROW: 'Tomorrow',
-            TEKGRID_HELPERVALUE_YESTERDAY: 'Yesterday',
-            TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Last 7 Days',
-            TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Next 7 Days',
-            TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Current Week',
-            TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Current Month',
-            TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Current Year',
-            TEKGRID_WITH_GROUPS: '(With groups)',
-            TEKGRID_GRID_MIRROR: '(Grid mirror)',
-            TEKGRID_NO_DATA: 'There is no data to generate the report',
-        },
-    },
-    'es-CL': {
-        translation: {
-            TEKGRID_CONTAINS: 'contiene',
-            TEKGRID_NOT_CONTAINS: 'no contiene',
-            TEKGRID_EQUALS: 'igual',
-            TEKGRID_NOT_EQUALS: 'es diferente de',
-            TEKGRID_GREATER_THAN: 'es mayor que',
-            TEKGRID_LESS_THAN: 'es menor que',
-            TEKGRID_GREATER_THAN_EQUALS: 'es mayor o igual que',
-            TEKGRID_LESS_THAN_EQUALS: 'es menor o igual que',
-            TEKGRID_IN: 'uno de los valores',
-            TEKGRID_NOT_IN: 'ninguno de los valores',
-            TEKGRID_BETWEEN: 'está entre',
-            TEKGRID_AND: 'e',
-            TEKGRID_OR: 'o',
-            TEKGRID_HIDE: 'Ocultar Acciones',
-            TEKGRID_SHOW: 'Mostrar Acciones',
-            TEKGRID_ADD: 'Añadir',
-            TEKGRID_DELETE: 'Eliminar',
-            TEKGRID_REFRESH: 'Actualizar',
-            TEKGRID_COLUMNS: 'Colunas',
-            TEKGRID_SAVE: 'Guardar',
-            TEKGRID_CANCEL: 'Cancelar',
-            TEKGRID_APPLY: 'Aplicar',
-            TEKGRID_FILTER: 'Filtro',
-            TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
-            TEKGRID_EXPORT: 'Exportar',
-            TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
-            TEKGRID_PORTRAIT: 'Vertical',
-            TEKGRID_LANDSCAPE: 'Horizontal',
-            TEKGRID_COLUMN_VISIBLE: 'Visible',
-            TEKGRID_COLUMN_GROUPED: 'Grupo',
-            TEKGRID_COLUMN_AGGREGATION: 'Totalización',
-            TEKGRID_COLUMN_LABEL: 'Etiqueta',
-            TEKGRID_COLUMN_ALIGNMENT: 'alineación',
-            TEKGRID_COLUMN_GROUP_OPENED: 'Abierto (grupo)',
-            TEKGRID_COLUMN_ORDER: 'Orden',
-            TEKGRID_COLUMN_ORDER_DIRECTION: 'Dirección (orden)',
-            TEKGRID_AGGREGATION_SUM: 'Suma',
-            TEKGRID_AGGREGATION_AVG: 'Media',
-            TEKGRID_AGGREGATION_MAX: 'Máximo',
-            TEKGRID_AGGREGATION_MIN: 'Mínimo',
-            TEKGRID_AGGREGATION_COUNT: 'Contar',
-            TEKGRID_MORE_OPTIONS: 'Mas opciones',
-            TEKGRID_COLUMNS_OPTIONS: 'Configuración de columna',
-            TEKGRID_CLOSE: 'Cerrar',
-            TEKGRID_FIXED_COLUMNS: 'Columnas fijas',
-            TEKGRID_VISIBLE_COLUMNS: 'Columnas visibles',
-            TEKGRID_GROUPED_COLUMNS: 'Columnas agrupadas',
-            TEKGRID_ORDER: 'Orden',
-            TEKGRID_OTHER_COLUMNS: 'Otras columnas',
-            TEKGRID_DROP_COLUMNS: 'Arrastra columnas aquí',
-            TEKGRID_DETAILS_FOR: 'Detalles para',
-            TEKGRID_LEFT: 'Izquierda',
-            TEKGRID_CENTER: 'Centro',
-            TEKGRID_RIGHT: 'Derecha',
-            TEKGRID_ASC: 'Creciente',
-            TEKGRID_DESC: 'Decreciente',
-            TEKGRID_SELECT_COLUMN: '(seleccione una o más columnas)',
-            TEKGRID_SELECT_ALL: 'Seleccionar todas',
-            TEKGRID_HELPERVALUE_TODAY: 'Hoy',
-            TEKGRID_HELPERVALUE_TOMORROW: 'Mañana',
-            TEKGRID_HELPERVALUE_YESTERDAY: 'Ayer',
-            TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 días',
-            TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 días',
-            TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana actual',
-            TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mes actual',
-            TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Año actual',
-            TEKGRID_WITH_GROUPS: '(Con grupos)',
-            TEKGRID_GRID_MIRROR: '(Espejo de grid)',
-            TEKGRID_NO_DATA: 'No hay datos para generar el reporte',
-        },
-    },
-});
-Messages.add({
-    'pt-BR': {
-        translation: {
-            NO_NOTIFICATIONS: 'Nenhuma Notificação',
-            MARK_ALL_AS_READ: 'Marcar todas como lidas',
-            NOTIFICATIONS: 'Notificações',
-            SEE_ALL_NOTIFICATIONS: 'Ver todas notificações',
-            UNAVAILABLE_IMAGE: 'Imagem indisponível',
-            REFRESH: 'Atualizar',
-            ACTIONS: 'Ações',
-            FILTER: 'Filtro',
-            LAYOUT: 'Layout: ',
-            NEW_LAYOUT: 'Novo layout',
-            DEFAULT_LAYOUT: 'Padrão',
-            LAYOUT_MODIFIED: 'O layout atual foi modificado. Crie um novo layout, sobrescreva um existente ou descarte as alterações',
-            LAYOUT_NOT_MODIFIED: 'Crie um novo layout ou aplique um dos layouts já existentes',
-            LAYOUT_DISCART_CHANGES: 'Descartar alterações',
-        },
-    },
-    'en-US': {
-        translation: {
-            NO_NOTIFICATIONS: 'No Notifications',
-            MARK_ALL_AS_READ: 'Mark all as read',
-            NOTIFICATIONS: 'Notifications',
-            SEE_ALL_NOTIFICATIONS: 'See all notifications',
-            UNAVAILABLE_IMAGE: 'Unavailable image',
-            REFRESH: 'Refresh',
-            ACTIONS: 'Actions',
-            FILTER: 'Filter',
-            LAYOUT: 'Layout: ',
-            NEW_LAYOUT: 'New layout',
-            DEFAULT_LAYOUT: 'Default',
-            LAYOUT_MODIFIED: 'The current layout has been modified. Create a new layout, overwrite an existing one or discard changes',
-            LAYOUT_NOT_MODIFIED: 'Create a new layout or apply one of the existing layouts',
-            LAYOUT_DISCART_CHANGES: 'Discard changes',
-        },
-    },
-    'es-CL': {
-        translation: {
-            NO_NOTIFICATIONS: 'Sin Notificación',
-            MARK_ALL_AS_READ: 'Marcar todo como leído',
-            NOTIFICATIONS: 'Notificaciones',
-            SEE_ALL_NOTIFICATIONS: 'Ver todas las notificaciones',
-            UNAVAILABLE_IMAGE: 'Imagen no disponible',
-            REFRESH: 'Actualizar',
-            ACTIONS: 'Acciones',
-            FILTER: 'Filtro',
-            LAYOUT: 'Disposición: ',
-            NEW_LAYOUT: 'Nueva disposición',
-            DEFAULT_LAYOUT: 'Default',
-            LAYOUT_MODIFIED: 'La disposición actual ha sido modificada. Cree una nueva disposición, sobrescriba una existente o descarte los cambios',
-            LAYOUT_NOT_MODIFIED: 'Cree una nueva disposición o aplique una de las disposiciones existentes',
-            LAYOUT_DISCART_CHANGES: 'Descartar los cambios',
-        },
-    },
-});
-
-class TekGridLayoutOptions extends ComponentRender {
-    currentLayoutName = '';
-    layoutEdited = false;
-    layouts = {};
-    layoutNames = [];
-    viewApplyLayout;
-    viewGetCurrentLayout;
-    originalColumnProps = [];
-    originalDatasourceOrder = [];
-    originalDatasourceDynamicFilter = {};
-    originalDatasourceFilter = {};
-    grid;
-    getParentGrid() {
-        let { parent } = this;
-        while (parent && !(parent.constructor === Iterable || parent.constructor.prototype instanceof Iterable)) {
-            parent = parent.parent;
-        }
-        return parent;
-    }
-    async onMounted(element) {
-        super.onMounted(element);
-        this.grid = this.getParentGrid();
-        this.originalDatasourceOrder = [...this.grid.datasource.order];
-        this.originalDatasourceDynamicFilter = {
-            ...this.grid.datasource.dynamicFilter,
-        };
-        this.originalDatasourceFilter = { ...this.grid.datasource.filter };
-        this.originalColumnProps = this.grid.columns.map((column) => ({
-            name: column.name,
-            label: column.label,
-            align: column.align,
-            isVisible: column.isVisible,
-            minWidth: column.minWidth,
-            maxWidth: column.maxWidth,
-            width: column.width,
-            fixed: column.fixed,
-            grouped: column.grouped,
-            groupOpened: column.groupOpened,
-            aggregation: column.aggregation,
-            filterHelperValue: this.getHelperValue(column),
-        }));
-        let layoutsInfo = {};
-        const promise = this.loadLayoutsInfo();
-        if (this.grid instanceof TekGrid) {
-            this.grid.registerTask(promise);
-        }
-        layoutsInfo = await promise;
-        if (layoutsInfo.layouts) {
-            this.layouts = layoutsInfo.layouts;
-            this.layoutNames = Object.keys(this.layouts);
-            if (layoutsInfo.currentLayoutName) {
-                this.currentLayoutName = layoutsInfo.currentLayoutName;
-                this.applyLayout(this.currentLayoutName, false);
-            }
-        }
-    }
-    async loadLayoutsInfo() {
-        const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
-        if (eventFunction && typeof eventFunction === 'function') {
-            return eventFunction({ component: this.grid });
-        }
-        if (Config.loadGridLayoutsEndPoint) {
-            const route = Config.loadGridLayoutsEndPoint;
-            const response = await Http.get(`${route}?id=${this.grid.name}`);
-            const responseData = response.data.data;
-            return responseData.length && responseData[0] ? responseData[0].layouts : responseData.layouts || {};
-        }
-        return JSON.parse(localStorage.getItem(this.grid.name) || '{}');
-    }
-    getHelperValue(column) {
-        if (column instanceof TekGridColumn) {
-            if (!Array.isArray(column.filterProps))
-                return column.filterProps.helperValue;
-            return column.filterProps.map((prop) => prop.helperValue);
-        }
-        return '';
-    }
-    newLayout(layout) {
-        this.fixColumns(layout);
-        this.currentLayoutName = layout.name;
-        this.addLayout(layout);
-        this.layoutEdited = false;
-    }
-    addLayout(layout) {
-        this.fixColumns(layout);
-        this.layouts[layout.name] = layout;
-        this.saveLayouts();
-    }
-    discardChanges() {
-        const layoutSelected = this.layouts[this.currentLayoutName];
-        if (this.viewApplyLayout) {
-            this.viewApplyLayout(layoutSelected);
-        }
-        this.layoutEdited = false;
-    }
-    applyLayout(name, save = true) {
-        this.currentLayoutName = name;
-        const layoutSelected = this.layouts[name];
-        if (this.viewApplyLayout) {
-            this.viewApplyLayout(layoutSelected);
-        }
-        if (save) {
-            this.saveLayouts();
-        }
-        this.layoutEdited = false;
-    }
-    saveLayouts() {
-        this.layoutNames = Object.keys(this.layouts);
-        const layoutInfo = {
-            currentLayoutName: this.currentLayoutName,
-            layouts: this.layouts,
-        };
-        const eventFunction = this.events.saveLayouts || this.grid.events.saveLayouts;
-        if (eventFunction && typeof eventFunction === 'function') {
-            eventFunction({ component: this.grid, layouts: layoutInfo });
-        }
-        else if (Config.saveGridLayoutsEndPoint) {
-            const route = Config.saveGridLayoutsEndPoint;
-            Http.post(route, { id: this.grid.name, layouts: layoutInfo });
-        }
-        else {
-            localStorage.setItem(this.grid.name, JSON.stringify(layoutInfo));
-        }
-    }
-    deleteLayout(name) {
-        if (this.currentLayoutName === name) {
-            this.currentLayoutName = '';
-            this.applyLayout(this.currentLayoutName, false);
-        }
-        delete this.layouts[name];
-        this.saveLayouts();
-    }
-    updateLayout(name, layout) {
-        this.fixColumns(layout);
-        this.currentLayoutName = name;
-        layout.name = name;
-        this.layouts[layout.name] = layout;
-        this.saveLayouts();
-        this.layoutEdited = false;
-    }
-    updateDefaultLayout(layout) {
-        this.fixColumns(layout);
-        this.originalDatasourceOrder = layout.order || this.originalDatasourceOrder;
-        this.originalDatasourceDynamicFilter = layout.dynamicFilter || this.originalDatasourceDynamicFilter;
-        this.originalDatasourceFilter = layout.filter || this.originalDatasourceFilter;
-        if (layout.columns) {
-            this.originalColumnProps = layout.columns.map((column) => {
-                const originalColumnIdx = this.originalColumnProps.findIndex((item) => item.name === column.name);
-                const originalColumn = originalColumnIdx !== -1 ? this.originalColumnProps[originalColumnIdx] : {};
-                return {
-                    ...originalColumn,
-                    ...column,
-                };
-            });
-        }
-        if (this.currentLayoutName === '') {
-            this.applyLayout(this.currentLayoutName, false);
-        }
-    }
-    fixColumns(layout) {
-        const hasLayoutColumns = !!layout.columns;
-        layout.columns = layout.columns || [];
-        const layoutColumnNames = layout.columns.map((layoutColumn) => layoutColumn.name);
-        this.grid.columns.forEach((gridColumn) => {
-            if (!hasLayoutColumns || layoutColumnNames.indexOf(gridColumn.name) === -1) {
-                layout.columns.push({
-                    name: gridColumn.name,
-                    label: gridColumn.label,
-                    align: gridColumn.align,
-                    isVisible: !hasLayoutColumns && gridColumn.isVisible,
-                    width: gridColumn.width,
-                    minWidth: gridColumn.minWidth,
-                    maxWidth: gridColumn.maxWidth,
-                    fixed: gridColumn.fixed,
-                    grouped: gridColumn.grouped,
-                    groupOpened: gridColumn.groupOpened,
-                    aggregation: gridColumn.aggregation,
-                    filterHelperValue: this.getHelperValue(gridColumn),
-                });
-            }
-        });
-    }
-}
-
-class TekGridColumnsButtonController extends IterableColumnsButtonController {
-    changeGroupedColumn(column, { component, event, element }) {
-        column.grouped = component.value;
-        if (!column.grouped) {
-            const index = this.iterableComponent.datasource.order.indexOf(`${column.name}.asc`);
-            this.iterableComponent.datasource.order.splice(index, 1);
-        }
-        this.iterableComponent.changeLayout(event, element);
-    }
-    changeAggregationColumn(column, { component, event, element }) {
-        const newValue = component.value || undefined;
-        if (column.aggregation !== newValue) {
-            this.iterableComponent.changeLayout(event, element);
-        }
-        column.aggregation = newValue;
-    }
-    showHideTekColumn(column, { component, event, element }) {
-        if (!component.value && column.grouped)
-            column.grouped = false;
-        column.isVisible = component.value;
-        this.iterableComponent.changeLayout(event, element);
-    }
-}
-
-/**
- * Base class for TekGrid Columns Button component
- */
-class TekGridColumnsButton extends IterableColumnsButton {
-    hideGroups = false;
-    constructor(props) {
-        super(props);
-        this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
-        this.createAccessors();
-    }
-    onCreated() {
-        super.onCreated();
-        Loader.addController(`IterableColumnsButtonController_${this.name}`, TekGridColumnsButtonController, [
-            this.iterableComponent,
-        ]);
-        this.controller = Loader.getInstance(`IterableColumnsButtonController_${this.name}`);
-    }
-    aggregationDataSet = [];
-    getAggregationSelectData() {
-        if (!this.aggregationDataSet.length) {
-            this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
-                text: I18n.translate(`TEKGRID_AGGREGATION_${value}`),
-                value,
-            }));
-        }
-        return this.aggregationDataSet;
-    }
-}
-
-/**
- * Base class for Checkbox multiple component.
- */
-class CheckboxMultiple extends Input {
-    /**
-     * Quantity of columns that will be rendered on non vertical case
-     */
-    columns = 4;
-    /**
-     * Field on datasource.data that will be used to set checkbox's label
-     */
-    dataLabel = '';
-    /**
-     * Source of checkbox items
-     */
-    datasource;
-    /**
-     * Field on datasource.data that will be used to set checkbox's value
-     */
-    dataValue = '';
-    /**
-     * Defines the checkbox list direction
-     */
-    vertical = true;
-    /**
-     * Defines if field value should be an object
-     */
-    returnObject = false;
-    /* istanbul ignore next */
-    /**
-     * Create a new Checkbox Multiple.
-     * @param props CheckBpox Multiple properties
-     */
-    constructor(props) {
-        super(props);
-        this.columns = this.getInitValue('columns', props.columns, this.columns);
-        this.dataLabel = this.getInitValue('dataLabel', props.dataLabel, this.dataLabel);
-        this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
-        this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
-        this.returnObject = this.getInitValue('returnObject', props.returnObject, this.returnObject);
-        if (!Accessor.isAccessorDefinition(props.value)) {
-            this.value = this.getInitValue('value', props.value, []);
-        }
-        if (props.datasource && props.datasource.type === 'simple') {
-            this.dataValue = 'value';
-            this.dataLabel = this.dataValue;
-        }
-        this.datasource = DatasourceFactory.factory(props.datasource);
-    }
-    onBeforeDestroy() {
-        super.onBeforeDestroy();
-        this.datasource.destroy();
-    }
-    onCreated() {
-        super.onCreated();
-        this.datasource?.initialize();
-    }
-}
-InputFactory.register('ZdCheckboxMultiple', CheckboxMultiple);
-
-/**
- * Base class for Chip component.
- */
-class Chip extends Button {
-    /**
-     * Determines whether the chip is active or not
-     */
-    active = true;
-    /**
-     * Configure the active CSS class applied when the link is active
-     */
-    activeClass = '';
-    /**
-     * Adds remove button
-     */
-    closable = false;
-    /**
-     * Change the default icon used for close chips
-     */
-    closeIcon = 'delete';
-    /**
-     * Makes the chip draggable
-     */
-    draggable = false;
-    /**
-     * Explicitly define the chip as a link
-     */
-    link = false;
-    /**
-     * Removes background and applies border and text color
-     */
-    outlined = false;
-    /**
-     * Applies the ripple
-     */
-    ripple = true;
-    /**
-     * Applies a large border radius on the chip
-     */
-    round = true;
-    /**
-     * Value Model
-     */
-    value = false;
-    /**
-     * Makes the component extra large
-     */
-    xLarge = false;
-    /**
-     * Makes the component extra small
-     */
-    xSmall = false;
-    /* istanbul ignore next */
-    /**
-     * Create a new Chip
-     * @param props Chip definition
-     */
-    constructor(props) {
-        super(props);
-        this.active = this.getInitValue('active', props.active, this.active);
-        this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
-        this.closable = this.getInitValue('closable', props.closable, this.closable);
-        this.closeIcon = this.getInitValue('closeIcon', props.closeIcon, this.closeIcon);
-        this.draggable = this.getInitValue('draggable', props.draggable, this.draggable);
-        this.link = this.getInitValue('link', props.link, this.link);
-        this.outlined = this.getInitValue('outlined', props.outlined, this.outlined);
-        this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
-        this.round = this.getInitValue('round', props.round, this.round);
-        this.value = this.getInitValue('value', props.value, this.value);
-        this.xLarge = this.getInitValue('xLarge', props.xLarge, this.xLarge);
-        this.xSmall = this.getInitValue('xSmall', props.xSmall, this.xSmall);
-        this.createAccessors();
-    }
-}
-
-/**
- * Base class for Progress component
- */
-class Progress extends ComponentRender {
-    /**
-     * Set component's background color
-     */
-    backgroundColor = 'primary';
-    /**
-     * Set component's background opacity
-     */
-    backgroundOpacity = '0.5';
-    /**
-     * Defines the value color
-     */
-    color = 'primary';
-    /**
-     * Sets the height for the component
-     */
-    height = 4;
-    /**
-     * Animates the component constantly
-     */
-    indeterminate = false;
-    /**
-     * Render components on the progress component
-     */
-    centerSlot = [];
-    /**
-     * The percentage value for current progress
-     */
-    value = 0;
-    /* istanbul ignore next */
-    /**
-     * Create a new Progress
-     * @param props Progress definition
-     */
-    constructor(props) {
-        super(props);
-        this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
-        this.backgroundOpacity = this.getInitValue('backgroundOpacity', props.backgroundOpacity, this.backgroundOpacity);
-        this.color = this.getInitValue('color', props.color, this.color);
-        this.height = this.getInitValue('height', props.height, this.height);
-        this.indeterminate = this.getInitValue('indeterminate', props.indeterminate, this.indeterminate);
-        this.centerSlot = this.getInitValue('centerSlot', props.centerSlot, this.centerSlot);
-        this.value = this.getInitValue('value', props.value, this.value);
-    }
-}
-
-/**
- * Base class for Button Group component.
+ * Base class for Button Group component.
  */
 class ButtonGroup extends ComponentRender {
     /**
@@ -15500,6 +12218,7 @@ class Time extends TextInput {
     initialMask;
     isSimpleDisplay;
     timeError = false;
+    inputMode = 'none';
     /**
      * Create a new Time Picker.
      * @param props Time properties
@@ -15687,6 +12406,9 @@ class Time extends TextInput {
         this.removeTimeMask();
         this.setTimeValue(this.formatter(this.value));
         super.blur(event, element);
+        if (!Utils.isMobile()) {
+            this.showTimePicker = false;
+        }
     }
     focus(event, element) {
         this.addTimeMask();
@@ -15916,6 +12638,7 @@ class DateRange extends TextInput {
     initialMask;
     unitMask;
     isSimpleDisplay;
+    inputMode = 'none';
     /* istanbul ignore next */
     /**
      * Creates a new Date.
@@ -16004,14 +12727,44 @@ class DateRange extends TextInput {
         return this.internalValue;
     }
     set value(value) {
-        if (this.internalValue !== value) {
-            this.internalDisplayValue = this.formatter(value);
-            this.internalValue = value;
-        }
-        if (value === null) {
+        if (!Array.isArray(value) && value !== null && value !== undefined)
+            return;
+        if (!value || value.length === 0) {
             this.internalValue = [];
+            this.internalDisplayValue = '';
+            this.dateObject = [];
+            return;
+        }
+        if (this.internalValue === value)
+            return;
+        this.internalDisplayValue = this.formatter(value);
+        this.internalValue = value;
+        const [startDate, endDate] = value;
+        const isStartValid = this.isValidFormatDate(startDate, this.dateFormat);
+        // if end date is not defined, no need to validate it
+        const isEndValid = !endDate || this.isValidFormatDate(endDate, this.dateFormat);
+        const areDatesValid = isStartValid && isEndValid;
+        if (areDatesValid) {
+            this.dateObject = this.getDatesInRange(startDate, endDate);
+        }
+    }
+    /**
+     * Returns all days ranging from start to end as dayjs objects
+     * @returns an array of dayjs objects containing all days between start and end
+     */
+    getDatesInRange(startDateStr, endDateStr) {
+        const dates = [];
+        let startDate = dayjs(startDateStr, this.dateFormat);
+        if (!endDateStr)
+            return [startDate];
+        const endDate = dayjs(endDateStr, this.dateFormat);
+        while (startDate.isBefore(endDate) || startDate.isSame(endDate)) {
+            dates.push(startDate);
+            startDate = startDate.add(1, 'day');
         }
+        return dates;
     }
+    ;
     /**
      * Assign the updated mask to mask property
      */
@@ -16040,14 +12793,14 @@ class DateRange extends TextInput {
             this.internalValue = this.parser(displayValue);
             this.dateError = false;
             if (lastValue !== this.displayValue)
-                this.change(this.value);
+                this.change();
         }
         else {
             if (!displayValue) {
                 this.internalDisplayValue = displayValue;
                 this.internalValue = [];
                 if (lastValue !== this.displayValue)
-                    this.change(this.value);
+                    this.change();
             }
             this.dateError = !!displayValue;
         }
@@ -16102,7 +12855,7 @@ class DateRange extends TextInput {
         this.dateError = false;
         this.value = this.parseISODateRangeValue(newValue);
         if (!Utils.isEqual(lastValue, this.value))
-            this.change(this.value);
+            this.change();
     }
     formatISODateRangeValue(dates) {
         let splitedValue;
@@ -16253,7 +13006,7 @@ class DateRange extends TextInput {
             .filter((obj) => obj !== null)
             .map((obj) => obj.format(this.dateFormat));
     }
-    dateObject = [null, null];
+    dateObject = [];
     getNativeDate() {
         return this.dateObject.filter((obj) => obj !== null).map((obj) => obj.toDate());
     }
@@ -16377,4 +13130,4 @@ Icons.addIcons({
     layout: 'mdi-table-star',
 });
 
-export { Alert, AlertQueue, AlertReplace, AlertService, AlertStack, Badge, Breadcrumbs, Button, ButtonGroup, ButtonOption, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeViewer, Col, CollapseCard, Column, ColumnNotFoundError, ColumnsSearcher, Component, ComponentRender, ConditionsManager, Container, Currency, DataEditor, DataEditorWithAdd, DataNavigator, DataSelector, DataValueOutHelper, DatasourceSearcher, DateInput, DateRange, DetailNotFoundError, Dialog, DialogService, Divider, Dropdown, DynamicFilterDatasourceFactory, DynamicFilterOperations, DynamicFilterRelations, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GridEditableController, GridEditableEvents, GridEvents, GroupedDataManager, GroupedDataSelector, GroupedViewNavigator, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, IterableTable, IterableTree, KeyMapGrouped, KeyMapMerger, KeyMapNavigation, KeyMapTree, Layout, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, MasterNotFoundError, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, MultiOption, NumberInput, Password, Progress, Radio, Row, Search, Select, SelectMultiple, SvgMap, Switch, Tab, TabNotFoundError, Table, TableActionBuilder, Tabs, Tag, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridController, TekGridEvents, TekGridFilterButton, TekGridLayoutOptions, TekGridToolbarProvider, TekMemoryDatasource, TekRestDatasource, Text, TextInput, Textarea, Time, TimeFormatSelector, Toggleable, Tooltip, Tree, TreeDataNavigator, TreeDataSelector, TreeDataStructure, TreeGrid, ViewNavigator, columnAggregationValues, initTheme, isFilledObject, isNil, omit, uniqueBy };
+export { Alert, AlertQueue, AlertReplace, AlertService, AlertStack, Badge, Breadcrumbs, Button, ButtonGroup, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeViewer, Col, CollapseCard, Column, ColumnNotFoundError, Component, ComponentRender, ConditionsManager, Container, Currency, DataEditor, DataEditorWithAdd, DataNavigator, DataSelector, DataValueOutHelper, DatasourceSearcher, DateInput, DateRange, DeleteRowsError, DetailNotFoundError, Dialog, DialogService, Divider, Dropdown, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, GridEditableController, GridEditableEvents, GridEvents, Header, Icon, Icons, Image, Increment, Input, InputFactory, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterableComponentRender, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, IterableTable, IterableTree, KeyMapEditing, KeyMapMerger, KeyMapNavigation, KeyMapTree, Layout, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, Main, MasterDetail, MasterNotFoundError, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, NonInitializedError, NumberInput, Password, Progress, Radio, Row, Search, Select, SelectMultiple, SvgMap, Switch, Tab, TabNotFoundError, Table, TableActionBuilder, Tabs, Tag, Text, TextInput, Textarea, Time, TimeFormatSelector, Toggleable, Tooltip, Tree, TreeDataNavigator, TreeDataSelector, TreeDataStructure, TreeGrid, ViewNavigator, ZeedhiCommonError, initTheme, omit, uniqueBy };