@zeedhi/teknisa-components-common 1.117.1 → 3.0.1

package/dist/teknisa-components-common.min.js

@@ -0,0 +1,3802 @@
+import { DatasourceFactory, MemoryDatasource, URL, Utils, RestDatasource, Metadata, DateHelper, I18n, Messages, Config, Accessor, Loader, Http } from '@zeedhi/core';
+import { ComponentRender, GridColumnEditable, Button, ModalService, NonInitializedError, ViewNavigator, GridEditableEvents, DataSelector, Iterable, TableActionBuilder, IterableTable, DataNavigator, DataEditorWithAdd, KeyMapMerger, KeyMapNavigation, KeyMapEditing, IterableColumnsButtonController, IterableColumnsButton, List } from '@zeedhi/common';
+import debounce from 'lodash.debounce';
+import clonedeep from 'lodash.clonedeep';
+import { UserInfo } from '@zeedhi/zd-user-info-common';
+
+/**
+ * BreadcrumbHeader join breadcrumb and title
+ */
+class BreadcrumbHeader extends ComponentRender {
+    breadcrumb;
+    title = '';
+    rightSlot = [];
+    constructor(props) {
+        super(props);
+        this.breadcrumb = this.getBreadcrumbProperties(props.breadcrumb);
+        this.title = this.getInitValue('title', props.title, this.title);
+        this.rightSlot = props.rightSlot || this.rightSlot;
+    }
+    getBreadcrumbProperties(breadcrumb) {
+        return {
+            ...breadcrumb,
+            name: breadcrumb.name,
+            component: 'ZdBreadcrumb',
+            divider: '>',
+        };
+    }
+}
+
+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;
+    /**
+     * Dynamic Filter Operations
+     */
+    dynamicFilterOperations = DynamicFilterOperations;
+    /**
+     * Dynamic Filter Relations
+     */
+    dynamicFilterRelations = DynamicFilterRelations;
+    /**
+     * Dynamic Filter applied flag
+     */
+    dynamicFilterApplied = '';
+    /**
+     * Create new datasource
+     * @param props Datasource properties
+     */
+    constructor(props) {
+        super(props);
+        if (!this.watchUrl) {
+            this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+            this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+        }
+        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
+     */
+    addDynamicFilter(column, value) {
+        if (this.isValidDynamicFilterValue(column, value)) {
+            this.dynamicFilter[column] = value;
+            return this.updateDynamicFilter();
+        }
+        return this.removeDynamicFilter(column);
+    }
+    /**
+     * Removes a dynamic filter position
+     * @param column Dynamic Filter column name
+     * @returns Promise with data collection
+     */
+    removeDynamicFilter(column) {
+        delete this.dynamicFilter[column];
+        return this.updateDynamicFilter();
+    }
+    /**
+     * Sets new dynamic filter value
+     * @param filter Dynamic Filter value
+     * @returns Promise with data collection
+     */
+    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();
+    }
+    /**
+     * Clears Dynamic filter value
+     * @returns Promise with data collection
+     */
+    clearDynamicFilter() {
+        this.dynamicFilter = {};
+        return this.updateDynamicFilter();
+    }
+    /**
+     * Resets page and selected rows and tries to update the url
+     * @returns Promise with data collection
+     */
+    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();
+    }
+    /**
+     * Checks if a filter value is valid
+     * @param value Filter value
+     * @returns Is valid filter value
+     */
+    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',
+        };
+    }
+    /**
+     * Updates filtered data
+     */
+    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;
+    /**
+     * Dynamic Filter Operations
+     */
+    dynamicFilterOperations = DynamicFilterOperations;
+    /**
+     * Dynamic Filter Relations
+     */
+    dynamicFilterRelations = DynamicFilterRelations;
+    /**
+     * Dynamic Filter applied flag
+     */
+    dynamicFilterApplied = '';
+    /**
+     * Create new datasource
+     * @param props Datasource properties
+     */
+    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);
+        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
+     */
+    addDynamicFilter(column, value) {
+        if (this.isValidDynamicFilterValue(column, value)) {
+            this.dynamicFilter[column] = value;
+            return this.updateDynamicFilter();
+        }
+        return this.removeDynamicFilter(column);
+    }
+    /**
+     * Removes a dynamic filter position
+     * @param column Dynamic Filter column name
+     * @returns Promise with data collection
+     */
+    removeDynamicFilter(column) {
+        delete this.dynamicFilter[column];
+        return this.updateDynamicFilter();
+    }
+    /**
+     * Sets new dynamic filter value
+     * @param filter Dynamic Filter value
+     * @returns Promise with data collection
+     */
+    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();
+    }
+    /**
+     * Clears Dynamic filter value
+     * @returns Promise with data collection
+     */
+    clearDynamicFilter() {
+        this.dynamicFilter = {};
+        return this.updateDynamicFilter();
+    }
+    /**
+     * Resets page and selected rows and tries to update the url
+     * @returns Promise with data collection
+     */
+    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();
+    }
+    /**
+     * Checks if a filter value is valid
+     * @param value Filter value
+     * @returns Is valid filter value
+     */
+    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));
+    }
+    /**
+     * Retrieves request params
+     */
+    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;
+    }
+}
+
+/**
+ * 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 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();
+        });
+    }
+}
+
+/**
+ * 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;
+                }
+            });
+        }
+    }
+}
+
+const isFilledObject = (obj) => {
+    return !!obj && typeof obj === 'object' && !Array.isArray(obj) && !!Object.keys(obj).length;
+};
+
+function isNil(value) {
+    return value === null || value === undefined;
+}
+
+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 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,
+            });
+        }
+    }
+}
+
+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();
+    }
+}
+
+/* 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;
+    }
+}
+
+class TekUserInfoController {
+    component;
+    get versionInfo() {
+        return this.component.versionInfo;
+    }
+    constructor(component) {
+        this.component = component;
+    }
+    get name() {
+        return this.versionInfo?.name || '';
+    }
+    set name(value) {
+        if (!this.versionInfo)
+            return;
+        this.versionInfo.name = value;
+    }
+    get version() {
+        return this.versionInfo?.version || '';
+    }
+    set version(value) {
+        if (!this.versionInfo)
+            return;
+        this.versionInfo.version = value;
+    }
+    get hasDefaultEmail() {
+        return !!this.component.defaultEmail;
+    }
+    get hasAboutImage() {
+        return !!this.component.aboutImage;
+    }
+    mergeText(name, version) {
+        return `<li>${name} - <b>${version}</b></li>`;
+    }
+    get mainVersion() {
+        if (!this.versionInfo?.name || !this.versionInfo.version)
+            return '';
+        return `${this.versionInfo.name} - <b>${this.versionInfo.version}</b>`;
+    }
+    getItems(tab) {
+        if (!this.versionInfo)
+            return [];
+        const tabInfo = this.versionInfo[tab];
+        return `<ul>${tabInfo.map((item) => this.mergeText(item.name, item.version)).join('')}</ul>`;
+    }
+    get frontendItems() {
+        return this.getItems('frontend');
+    }
+    get backendItems() {
+        return this.getItems('backend');
+    }
+    get modulesItems() {
+        return this.getItems('modules');
+    }
+    get showReportError() {
+        const { reportError } = this.component.visibleItems;
+        return reportError || reportError === undefined;
+    }
+    get showVersionInfo() {
+        const { versionInfo } = this.component.visibleItems;
+        return versionInfo || versionInfo === undefined;
+    }
+    get showAbout() {
+        const { about } = this.component.visibleItems;
+        return about || about === undefined;
+    }
+}
+
+class TekUserInfo extends UserInfo {
+    aboutModal;
+    reportModal;
+    /**
+    * Data about the application version
+    */
+    versionInfo = null;
+    /**
+    * Default email address to be defined in the Report Bug form
+    */
+    defaultEmail = '';
+    /**
+    * Url from which the version info will be retrieved
+    */
+    versionUrl = '';
+    /**
+    * Path to the image to be shown on about modal
+    */
+    aboutImage = '';
+    propBottomSlot;
+    constructor(props) {
+        super(props);
+        this.versionInfo = this.getInitValue('versionInfo', props.versionInfo, this.versionInfo);
+        this.defaultEmail = this.getInitValue('defaultEmail', props.defaultEmail, this.defaultEmail);
+        this.versionUrl = this.getInitValue('versionUrl', props.versionUrl, this.versionUrl);
+        this.aboutImage = this.getInitValue('aboutImage', props.aboutImage, this.aboutImage);
+        this.createAccessors();
+        this.propBottomSlot = props.bottomSlot;
+    }
+    getBottomSlot() {
+        return [
+            {
+                name: `${this.name}_bottom_list`,
+                component: 'TekUserInfoList',
+                parentName: this.name,
+            },
+        ];
+    }
+    onAboutClick() {
+        if (!this.aboutModal) {
+            this.aboutModal = ModalService.create({
+                name: `${this.name}_about_modal`,
+                cssClass: 'about-modal',
+                grid: { cols: 8, sm: 4, lg: 5 },
+                children: [
+                    {
+                        name: `${this.name}_about_header`,
+                        component: 'ZdHeader',
+                        color: 'transparent',
+                        padless: true,
+                        elevation: 0,
+                        rightSlot: [
+                            {
+                                name: `${this.name}_about_close_button`,
+                                component: 'ZdModalCloseButton',
+                                small: true,
+                                modalName: `${this.name}_about_modal`,
+                            },
+                        ],
+                    },
+                    {
+                        name: `${this.name}_about_row`,
+                        component: 'ZdTag',
+                        tag: 'div',
+                        cssClass: 'zd-justify-center zd-px-6',
+                        isVisible: `{{TekUserInfoController_${this.componentId}.hasAboutImage}}`,
+                        children: [
+                            {
+                                name: `${this.name}_about_image`,
+                                component: 'ZdImage',
+                                width: '100%',
+                                src: this.aboutImage,
+                            },
+                        ],
+                    },
+                    {
+                        name: `${this.name}_version_tabs`,
+                        cssClass: 'zd-pt-3 zd-tekUserInfo-tab',
+                        component: 'ZdTabs',
+                        tabs: [
+                            {
+                                name: `${this.name}_version_frontend_tab`,
+                                tabTitle: 'Frontend',
+                                children: this.getVersionTree('frontend'),
+                            },
+                            {
+                                name: `${this.name}_version_backend_tab`,
+                                tabTitle: 'Backend',
+                                children: this.getVersionTree('backend'),
+                            },
+                            {
+                                name: `${this.name}_version_modules_tab`,
+                                tabTitle: 'Modules',
+                                children: this.getVersionTree('modules'),
+                            },
+                        ],
+                    },
+                ],
+            });
+        }
+        this.aboutModal.show();
+    }
+    getVersionTree(tab) {
+        if (!this.versionInfo)
+            return [];
+        const main = {
+            name: `${this.name}_version_${tab}_main`,
+            component: 'ZdText',
+            text: `{{TekUserInfoController_${this.componentId}.mainVersion}}`,
+        };
+        const itemsComponent = {
+            name: `${this.name}_version_${tab}`,
+            component: 'ZdText',
+            cssClass: 'zd-pl-4',
+            text: `{{TekUserInfoController_${this.componentId}.${tab}Items}}`,
+        };
+        return [main, itemsComponent];
+    }
+    onReportClick() {
+        if (!this.reportModal) {
+            this.reportModal = ModalService.create({
+                name: `${this.name}_report_modal`,
+                children: [
+                    {
+                        name: `${this.name}_report_header`,
+                        component: 'ZdHeader',
+                        color: 'transparent',
+                        padless: true,
+                        elevation: 0,
+                        leftSlot: [
+                            {
+                                name: `${this.name}_report_title`,
+                                component: 'ZdText',
+                                text: 'TEKUSERINFO_REPORT_ERROR',
+                                cssClass: 'zd-theme-font-title',
+                            },
+                        ],
+                        rightSlot: [
+                            {
+                                name: `${this.name}_report_close_button`,
+                                component: 'ZdModalCloseButton',
+                                small: true,
+                                modalName: `${this.name}_report_modal`,
+                            },
+                        ],
+                    },
+                    {
+                        name: `${this.name}_report_form`,
+                        component: 'ZdForm',
+                        cssClass: 'zd-pt-4',
+                        children: [
+                            {
+                                name: 'report_email',
+                                component: 'ZdTextInput',
+                                label: 'E-mail',
+                                grid: {
+                                    cols: '12',
+                                },
+                                value: this.defaultEmail,
+                                readonly: `{{TekUserInfoController_${this.componentId}.hasDefaultEmail}}`,
+                                validations: {
+                                    required: {},
+                                    email: {},
+                                },
+                            },
+                            {
+                                name: 'report_cc',
+                                component: 'ZdTextInput',
+                                label: 'CC',
+                                placeholder: 'TEKUSERINFO_EMAIL_PLACEHOLDER',
+                                grid: {
+                                    cols: '12',
+                                },
+                            },
+                            {
+                                name: 'report_type',
+                                component: 'ZdSelect',
+                                label: 'TEKUSERINFO_TYPE',
+                                dataValue: 'value',
+                                dataText: 'text',
+                                datasource: {
+                                    uniqueKey: 'value',
+                                    translate: true,
+                                    data: [
+                                        { value: '0', text: 'TEKUSERINFO_ERROR' },
+                                        { value: '1', text: 'TEKUSERINFO_IMPROVEMENT' },
+                                    ],
+                                },
+                                grid: {
+                                    cols: '12',
+                                },
+                                validations: {
+                                    required: {},
+                                },
+                            },
+                            {
+                                name: 'report_description',
+                                component: 'ZdTextarea',
+                                label: 'TEKUSERINFO_DESCRIPTION',
+                                grid: {
+                                    cols: '12',
+                                },
+                                validations: {
+                                    required: {},
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        name: `${this.name}_report_footer`,
+                        component: 'ZdFooter',
+                        color: 'transparent',
+                        padless: true,
+                        rightSlot: [
+                            {
+                                name: `${this.name}_report_cancel`,
+                                component: 'ZdButton',
+                                label: 'TEKUSERINFO_CANCEL',
+                                outline: true,
+                                events: {
+                                    click: () => { this.reportModal?.hide(); },
+                                },
+                            },
+                            {
+                                name: `${this.name}_report_send`,
+                                component: 'ZdButton',
+                                label: 'TEKUSERINFO_SEND',
+                                events: {
+                                    click: (args) => this.onSendReport(args),
+                                },
+                            },
+                        ],
+                    },
+                ],
+            });
+        }
+        this.reportModal.show();
+    }
+    async onSendReport({ event, element }) {
+        if (!this.reportModal)
+            return;
+        const form = Metadata.getInstance(`${this.name}_report_form`);
+        const validation = await form.validate();
+        if (!validation.valid)
+            return;
+        this.callEvent('onSendReport', {
+            event, element, component: this, form,
+        });
+        this.reportModal.hide();
+    }
+    onCreated() {
+        super.onCreated();
+        Loader.addController(`TekUserInfoController_${this.componentId}`, TekUserInfoController, [this]);
+        this.bottomSlot = this.propBottomSlot ? this.propBottomSlot : this.getBottomSlot();
+    }
+    async onMounted(element) {
+        super.onMounted(element);
+        if (this.versionUrl) {
+            const res = await Http.get(this.versionUrl);
+            this.versionInfo = res.data.versionInfo;
+        }
+    }
+}
+Messages.add({
+    'pt-BR': {
+        translation: {
+            TEKUSERINFO_ABOUT: 'Sobre',
+            TEKUSERINFO_REPORT_ERROR: 'Reportar Erro',
+            TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separe e-mails usando ";"',
+            TEKUSERINFO_TYPE: 'Tipo',
+            TEKUSERINFO_ERROR: 'Erro',
+            TEKUSERINFO_IMPROVEMENT: 'Melhoria',
+            TEKUSERINFO_DESCRIPTION: 'Descrição',
+            TEKUSERINFO_CANCEL: 'Cancelar',
+            TEKUSERINFO_SEND: 'Enviar',
+        },
+    },
+    'en-US': {
+        translation: {
+            TEKUSERINFO_ABOUT: 'About',
+            TEKUSERINFO_REPORT_ERROR: 'Report Bug',
+            TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separate e-mails using ";"',
+            TEKUSERINFO_TYPE: 'Type',
+            TEKUSERINFO_ERROR: 'Bug',
+            TEKUSERINFO_IMPROVEMENT: 'Improvement',
+            TEKUSERINFO_DESCRIPTION: 'Description',
+            TEKUSERINFO_CANCEL: 'Cancel',
+            TEKUSERINFO_SEND: 'Send',
+        },
+    },
+    'es-CL': {
+        translation: {
+            TEKUSERINFO_ABOUT: 'Sobre',
+            TEKUSERINFO_REPORT_ERROR: 'Reportar Error',
+            TEKUSERINFO_EMAIL_PLACEHOLDER: 'Separar e-mails usando ";"',
+            TEKUSERINFO_TYPE: 'Tipo',
+            TEKUSERINFO_ERROR: 'Error',
+            TEKUSERINFO_IMPROVEMENT: 'Mejora',
+            TEKUSERINFO_DESCRIPTION: 'Descripción',
+            TEKUSERINFO_CANCEL: 'Cancelar',
+            TEKUSERINFO_SEND: 'Enviar',
+        },
+    },
+});
+
+class TekUserInfoList extends List {
+    /**
+     * Name of the user info component
+     */
+    parentName = '';
+    dense = true;
+    constructor(props) {
+        super(props);
+        this.parentName = props.parentName || '';
+    }
+    onCreated() {
+        super.onCreated();
+        this.items = this.getItems();
+    }
+    getItems() {
+        const parent = this.parentName ? Metadata.getInstance(this.parentName) : this.parent;
+        if (!(parent instanceof TekUserInfo)) {
+            throw Error(`Could not find the TekUserInfo component associated with ${this.name} TekUserInfoList`);
+        }
+        return [
+            {
+                name: `${parent.name}_version`,
+                component: 'ZdListItem',
+                title: `{{TekUserInfoController_${parent.componentId}.name}}`,
+                subtitle: `{{TekUserInfoController_${parent.componentId}.version}}`,
+                isVisible: `{{TekUserInfoController_${parent.componentId}.showVersionInfo}}`,
+                cssClass: 'zd-px-2',
+            },
+            {
+                name: `${parent.name}_about`,
+                component: 'ZdListItem',
+                title: 'TEKUSERINFO_ABOUT',
+                prependIcon: 'infoOutline',
+                cssClass: 'zd-px-2',
+                isVisible: `{{TekUserInfoController_${parent.componentId}.showAbout}}`,
+                events: {
+                    click: () => parent.onAboutClick(),
+                },
+            },
+            {
+                name: `${parent.name}_report`,
+                component: 'ZdListItem',
+                title: 'TEKUSERINFO_REPORT_ERROR',
+                prependIcon: 'mdi-ladybug',
+                cssClass: 'zd-px-2',
+                isVisible: `{{TekUserInfoController_${parent.componentId}.showReportError}}`,
+                events: {
+                    click: () => parent.onReportClick(),
+                },
+            },
+        ];
+    }
+}
+
+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',
+        },
+    },
+});
+
+export { BreadcrumbHeader, ButtonOption, ColumnsSearcher, DynamicFilterDatasourceFactory, DynamicFilterOperations, DynamicFilterRelations, GroupedDataManager, GroupedDataSelector, GroupedViewNavigator, KeyMapGrouped, MultiOption, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridController, TekGridEvents, TekGridFilterButton, TekGridLayoutOptions, TekGridToolbarProvider, TekMemoryDatasource, TekRestDatasource, TekUserInfo, TekUserInfoList, columnAggregationValues, isFilledObject, isNil };