@zeedhi/teknisa-components-common 1.88.0 → 1.90.0

package/dist/tek-components-common.esm.js

@@ -1,8 +1,9 @@
-import { KeyMap, I18n, FormatterParserProvider, Messages, Metadata, DatasourceFactory, MemoryDatasource, URL, Utils, RestDatasource, Loader, Config, Http, DateHelper, Singleton, VersionService } from '@zeedhi/core';
-import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, IterableComponentRender as IterableComponentRender$1, Loading as Loading$1, ModalService, GridColumnEditable, Report, ColumnNotFoundError, IterableColumnsButtonController, IterableColumnsButton, TreeGridEditable, List } from '@zeedhi/common';
+import { KeyMap, I18n, FormatterParserProvider, Messages, DatasourceFactory, Metadata, MemoryDatasource, URL, Utils, RestDatasource, Loader, DateHelper, Config, Http, Singleton, VersionService } from '@zeedhi/core';
+import { Form, Button, Tooltip, GridEditable, Grid, ComponentRender, Iterable, Carousel, IterableComponentRender as IterableComponentRender$1, Loading as Loading$1, GridColumnEditable, Report, ColumnNotFoundError, IterableColumnsButtonController, IterableColumnsButton, ModalService, TreeGridEditable, List } from '@zeedhi/common';
 import debounce from 'lodash.debounce';
 import merge from 'lodash.merge';
 import { UserInfo } from '@zeedhi/zd-user-info-common';
+import { Draggable } from '@zeedhi/zd-drag-grid-common';
 
 /**
  * Form to be used on Crud operations
@@ -713,7 +714,6 @@ class TekGridDeleteRowsError extends Error {
 class GridBase {
     constructor(grid) {
         this.exportConfigButtons = [];
-        this.filterFormInputs = {};
         this.atoms = {
             TITLE: '_gridTitle',
             ADD_BUTTON: '_addButton',
@@ -942,18 +942,21 @@ class GridBase {
                 children: [
                     {
                         name: `${this.grid.name}_filterButton`,
-                        component: 'ZdButton',
-                        icon: true,
-                        iconName: 'filter',
+                        component: 'TekGridFilterButton',
+                        grid: this.grid,
+                        gridName: this.grid.name,
                         isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
                         events: {
-                            click: this.filterClick.bind(this),
+                            onCreated: this.loadFilterButton.bind(this),
                         },
                     },
                 ],
             },
         ];
     }
+    loadFilterButton({ component }) {
+        this.filterButton = component;
+    }
     addButtonClick({ event }) {
         if (this.grid.editNewRowsOnly) {
             this.grid.editingNewRows = true;
@@ -998,344 +1001,37 @@ class GridBase {
             this.grid.callEvent('afterCancel', { component: this.grid });
         }
     }
-    filterClick({ event }) {
-        this.grid.callEvent('filterClick', { component: this.grid, event });
-        if (!event.defaultPrevented) {
-            this.createFilterFromColumns();
-        }
-    }
-    destroyFilterModal() {
-        var _a;
-        (_a = this.filterModal) === null || _a === void 0 ? void 0 : _a.destroy();
-    }
-    createFilterFromColumns() {
-        if (!this.filterModal) {
-            const originalProps = {
-                height: 'auto',
-                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',
-                        children: [
-                            {
-                                name: `${this.grid.name}-filter-modal-header`,
-                                component: 'ZdHeader',
-                                color: 'transparent',
-                                padless: true,
-                                elevation: 0,
-                                leftSlot: [
-                                    {
-                                        name: `${this.grid.name}-filter-title`,
-                                        component: 'ZdText',
-                                        cssStyle: `color: ${'var(--v-primary-base);'}`,
-                                        text: `${mergeModalFilterProps.title}`,
-                                        tag: 'h3',
-                                    },
-                                ],
-                                rightSlot: [
-                                    {
-                                        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',
-                        maxHeight: '18.75rem',
-                        height: this.grid.modalFilterProps.height,
-                        children: [
-                            {
-                                name: `${this.grid.name}-filter-form`,
-                                component: 'ZdForm',
-                                cssClass: 'zd-my-2',
-                                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();
-    }
     hideFilterModal() {
-        this.filterModal.hide();
-    }
-    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;
+        this.filterButton.hideFilterModal();
     }
-    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 = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
-                    if (filterItem.helperOptions) {
-                        if (!newColumnComponent.events)
-                            newColumnComponent.events = {};
-                        newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
-                    }
-                    filterColumns.push(newColumnComponent);
-                });
-            }
+    getFilterRelationsDatasource() {
+        return DatasourceFactory.factory({
+            data: this.getFilterOptionsData('relations'),
+            loadAll: true,
+            translate: ['text'],
         });
-        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;
-                }
-            });
-        }
+    getFilterOperationsDatasource() {
+        return DatasourceFactory.factory({
+            data: this.getFilterOptionsData('operations'),
+            loadAll: true,
+            translate: ['text'],
+        });
     }
-    loadFilterValues({ component }) {
-        const changedCompNames = [];
+    getFilterOptionsData(prop) {
         const { datasource } = this.grid;
         if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-            const { dynamicFilter } = datasource;
-            Object.keys(dynamicFilter).forEach((column) => {
-                if (dynamicFilter[column] && dynamicFilter[column].length > 0) {
-                    dynamicFilter[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;
-            Object.keys(filter).forEach((item) => {
-                if (filter[item]) {
-                    const compName = `${this.grid.name}-filter-AND-CONTAINS-${item}-0`;
-                    changedCompNames.push(compName);
-                    component.value[compName] = filter[item];
-                }
-            });
-        }
-        Object.keys(component.value).forEach((compName) => {
-            if (changedCompNames.indexOf(compName) === -1) {
-                component.value[compName] = null;
-            }
-        });
-    }
-    applyFilter({ event }) {
-        const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
-        if (filterForm.validate()) {
-            const { datasource } = this.grid;
-            const filter = {};
-            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                Object.keys(filterForm.value).forEach((item) => {
-                    if (filterForm.value[item] && !(Array.isArray(filterForm.value[item]) && !filterForm.value[item].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 = filterForm.value[item];
-                        filter[columnName].push({
-                            relation,
-                            operation,
-                            value,
-                        });
-                    }
-                });
-                datasource.dynamicFilter = filter;
-                this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
-            }
-            else {
-                Object.keys(filterForm.value).forEach((item) => {
-                    let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
-                    columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                    if (filterForm.value[item]) {
-                        filter[columnName] = filterForm.value[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;
-        });
-    }
-    getFilterRelationsDatasource() {
-        return DatasourceFactory.factory({
-            data: this.getFilterOptionsData('relations'),
-            loadAll: true,
-            translate: ['text'],
-        });
-    }
-    getFilterOperationsDatasource() {
-        return DatasourceFactory.factory({
-            data: this.getFilterOptionsData('operations'),
-            loadAll: true,
-            translate: ['text'],
-        });
-    }
-    getFilterOptionsData(prop) {
-        const { datasource } = this.grid;
-        if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-            let options;
-            if (prop === 'relations') {
-                options = Object.keys(datasource.dynamicFilterRelations);
-            }
-            else {
-                options = Object.keys(datasource.dynamicFilterOperations);
-            }
-            return options.map((item) => ({
-                text: `TEKGRID_${item}`,
-                value: item,
-            }));
+            let options;
+            if (prop === 'relations') {
+                options = Object.keys(datasource.dynamicFilterRelations);
+            }
+            else {
+                options = Object.keys(datasource.dynamicFilterOperations);
+            }
+            return options.map((item) => ({
+                text: `TEKGRID_${item}`,
+                value: item,
+            }));
         }
         return [];
     }
@@ -1363,12 +1059,7 @@ class GridBase {
         return Metadata.getInstance(`${this.grid.name}${this.atoms[key]}`);
     }
     getFilterInputs(columnName) {
-        const mapper = (name) => Metadata.getInstance(name);
-        if (columnName) {
-            return this.filterFormInputs[columnName].map(mapper);
-        }
-        const values = Object.values(this.filterFormInputs);
-        return values.reduce((result, current) => ([...result, ...current.map(mapper)]), []);
+        return this.filterButton.getFilterInputs(columnName);
     }
 }
 Messages.add({
@@ -2493,10 +2184,10 @@ class TekGrid extends GridEditable {
                 input: true,
             },
         };
+        this.createAccessors();
         this.gridBase = new GridBase(this);
         this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
         this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
-        this.createAccessors();
         this.defaultLazy = (_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad;
     }
     onCreated() {
@@ -2522,7 +2213,6 @@ class TekGrid extends GridEditable {
     }
     onBeforeDestroy() {
         super.onBeforeDestroy();
-        this.gridBase.destroyFilterModal();
         KeyMap.unbind(this.keyShortcutKeyMapping, this);
     }
     focusSearchInput() {
@@ -2936,156 +2626,515 @@ class TekGrid extends GridEditable {
                     if (currentRow.group) {
                         return row.group && row.groupValue === currentRow.groupValue;
                     }
-                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+                    return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
+                });
+            if (rowIndex === -1)
+                rowIndex = this.groupedData.length;
+            const newRow = this.groupedData[rowIndex - 1];
+            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
+                this.datasource.currentRow = newRow;
+            }
+            else {
+                this.navigateUp({ index: rowIndex - 1 });
+            }
+        }
+    }
+    navigateLeft() {
+        var _a;
+        const { currentRow } = this.datasource;
+        if (currentRow.group && currentRow.groupOpened) {
+            currentRow.groupOpened = false;
+        }
+        else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
+            this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
+        }
+    }
+    navigateRight() {
+        const { currentRow } = this.datasource;
+        if (currentRow.group && !currentRow.groupOpened) {
+            currentRow.groupOpened = true;
+        }
+    }
+    /**
+     * Dispatches row click event
+     * @param row Grid row
+     * @param event DOM event
+     * @param element DOM Element
+     */
+    rowClick(row, event, element) {
+        if (!this.preventRowClick) {
+            this.datasource.currentRow = row;
+            this.callEvent('rowClick', {
+                event,
+                element,
+                row,
+                component: this,
+                column: undefined,
+            });
+        }
+        this.preventRowClick = 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.callEvent('groupRowClick', {
+                event,
+                element,
+                row,
+                component: this,
+                column: undefined,
+            });
+        }
+        this.preventRowClick = 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.callEvent('groupSelected', {
+                event,
+                element,
+                row,
+                component: this,
+                column: undefined,
+            });
+        }
+        else {
+            this.callEvent('groupUnselected', {
+                event,
+                element,
+                row,
+                component: this,
+                column: undefined,
+            });
+        }
+    }
+    getAtomInstance(key) {
+        return this.gridBase.getAtomInstance(key);
+    }
+    getFilterInputs(columnName) {
+        return this.gridBase.getFilterInputs(columnName);
+    }
+}
+
+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 {
+    constructor(props) {
+        super(props);
+        this.hideGroups = false;
+        this.aggregationDataSet = [];
+        this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
+        this.createAccessors();
+    }
+    onCreated() {
+        super.onCreated();
+        this.controller = new TekGridColumnsButtonController(this.iterableComponent);
+        Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
+    }
+    getAggregationSelectData() {
+        if (!this.aggregationDataSet.length) {
+            this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
+                text: I18n.translate(`TEKGRID_AGGREGATION_${value}`),
+                value,
+            }));
+        }
+        return this.aggregationDataSet;
+    }
+}
+
+class TekFilterHelper {
+    static getLabel(name) {
+        return DateHelper.getLabel(name);
+    }
+    static getValue(name, column) {
+        return DateHelper.getValue(name, column.componentProps.dateFormat);
+    }
+    static register(name, label, fn) {
+        DateHelper.register(name, label, fn);
+    }
+    static unregister(name) {
+        DateHelper.unregister(name);
+    }
+}
+
+/**
+ * Base class for TekGrid Filter Button component
+ */
+class TekGridFilterButton extends Button {
+    constructor(props) {
+        super(props);
+        this.filterFormInputs = {};
+        this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+        this.grid = this.getInitValue('grid', props.grid, undefined);
+        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;
+            Object.keys(dynamicFilter).forEach((column) => {
+                if (dynamicFilter[column] && dynamicFilter[column].length > 0) {
+                    dynamicFilter[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;
+            Object.keys(filter).forEach((item) => {
+                if (filter[item]) {
+                    const compName = `${this.grid.name}-filter-AND-CONTAINS-${item}-0`;
+                    changedCompNames.push(compName);
+                    component.value[compName] = filter[item];
+                }
+            });
+        }
+        Object.keys(component.value).forEach((compName) => {
+            if (changedCompNames.indexOf(compName) === -1) {
+                component.value[compName] = null;
+            }
+        });
+    }
+    hideFilterModal() {
+        this.filterModal.hide();
+    }
+    destroyFilterModal() {
+        this.filterModal.destroy();
+    }
+    createFilterFromColumns() {
+        if (!this.filterModal) {
+            const originalProps = {
+                height: 'auto',
+                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',
+                        children: [
+                            {
+                                name: `${this.grid.name}-filter-modal-header`,
+                                component: 'ZdHeader',
+                                color: 'transparent',
+                                padless: true,
+                                elevation: 0,
+                                leftSlot: [
+                                    {
+                                        name: `${this.grid.name}-filter-title`,
+                                        component: 'ZdText',
+                                        cssStyle: `color: ${'var(--v-primary-base);'}`,
+                                        text: `${mergeModalFilterProps.title}`,
+                                        tag: 'h3',
+                                    },
+                                ],
+                                rightSlot: [
+                                    {
+                                        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',
+                        maxHeight: '18.75rem',
+                        height: this.grid.modalFilterProps.height,
+                        children: [
+                            {
+                                name: `${this.grid.name}-filter-form`,
+                                component: 'ZdForm',
+                                cssClass: 'zd-my-2',
+                                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();
+    }
+    applyFilter({ event }) {
+        const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
+        if (filterForm.validate()) {
+            const { datasource } = this.grid;
+            const filter = {};
+            if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                Object.keys(filterForm.value).forEach((item) => {
+                    if (filterForm.value[item] && !(Array.isArray(filterForm.value[item]) && !filterForm.value[item].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 = filterForm.value[item];
+                        filter[columnName].push({
+                            relation,
+                            operation,
+                            value,
+                        });
+                    }
                 });
-            if (rowIndex === -1)
-                rowIndex = this.groupedData.length;
-            const newRow = this.groupedData[rowIndex - 1];
-            if (newRow && this.isItemVisible(newRow) && !newRow.groupFooter) {
-                this.datasource.currentRow = newRow;
+                datasource.dynamicFilter = filter;
+                this.setFilter(filter, event, datasource.setDynamicFilter.bind(datasource));
             }
             else {
-                this.navigateUp({ index: rowIndex - 1 });
+                Object.keys(filterForm.value).forEach((item) => {
+                    let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
+                    columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
+                    if (filterForm.value[item]) {
+                        filter[columnName] = filterForm.value[item];
+                    }
+                });
+                datasource.filter = filter;
+                this.setFilter(filter, event, datasource.setFilter.bind(datasource));
             }
+            this.grid.changeLayout(event);
         }
     }
-    navigateLeft() {
-        var _a;
-        const { currentRow } = this.datasource;
-        if (currentRow.group && currentRow.groupOpened) {
-            currentRow.groupOpened = false;
-        }
-        else if ((_a = currentRow.groupHeaders) === null || _a === void 0 ? void 0 : _a.length) {
-            this.datasource.currentRow = currentRow.groupHeaders[currentRow.groupHeaders.length - 1];
-        }
+    setFilter(filter, event, filterFn) {
+        this.grid.callEvent('beforeApplyFilter', { component: this.grid, event });
+        if (event.defaultPrevented)
+            return;
+        filterFn(filter);
+        this.hideFilterModal();
     }
-    navigateRight() {
-        const { currentRow } = this.datasource;
-        if (currentRow.group && !currentRow.groupOpened) {
-            currentRow.groupOpened = true;
-        }
+    clearFilter() {
+        const filterForm = Metadata.getInstance(`${this.grid.name}-filter-form`);
+        Object.keys(filterForm.value).forEach((item) => {
+            filterForm.value[item] = null;
+        });
     }
-    /**
-     * Dispatches row click event
-     * @param row Grid row
-     * @param event DOM event
-     * @param element DOM Element
-     */
-    rowClick(row, event, element) {
-        if (!this.preventRowClick) {
-            this.datasource.currentRow = row;
-            this.callEvent('rowClick', {
-                event,
-                element,
-                row,
-                component: this,
-                column: undefined,
-            });
-        }
-        this.preventRowClick = false;
+    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;
     }
-    /**
-     * 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.callEvent('groupRowClick', {
-                event,
-                element,
-                row,
-                component: this,
-                column: undefined,
-            });
+    getFilterInputs(columnName) {
+        const mapper = (name) => Metadata.getInstance(name);
+        if (columnName) {
+            return this.filterFormInputs[columnName].map(mapper);
         }
-        this.preventRowClick = false;
+        const values = Object.values(this.filterFormInputs);
+        return values.reduce((result, current) => ([...result, ...current.map(mapper)]), []);
     }
-    /**
-     * 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.callEvent('groupSelected', {
-                event,
-                element,
-                row,
-                component: this,
-                column: undefined,
-            });
+    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 = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                    if (filterItem.helperOptions) {
+                        if (!newColumnComponent.events)
+                            newColumnComponent.events = {};
+                        newColumnComponent.events.change = this.changeHelperEvent.bind(this, column);
+                    }
+                    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 {
-            this.callEvent('groupUnselected', {
-                event,
-                element,
-                row,
-                component: this,
-                column: undefined,
+            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;
+                }
             });
         }
     }
-    getAtomInstance(key) {
-        return this.gridBase.getAtomInstance(key);
-    }
-    getFilterInputs(columnName) {
-        return this.gridBase.getFilterInputs(columnName);
-    }
-}
-
-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 {
-    constructor(props) {
-        super(props);
-        this.hideGroups = false;
-        this.aggregationDataSet = [];
-        this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
-        this.createAccessors();
-    }
-    onCreated() {
-        super.onCreated();
-        this.controller = new TekGridColumnsButtonController(this.iterableComponent);
-        Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
-    }
-    getAggregationSelectData() {
-        if (!this.aggregationDataSet.length) {
-            this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
-                text: I18n.translate(`TEKGRID_AGGREGATION_${value}`),
-                value,
-            }));
-        }
-        return this.aggregationDataSet;
-    }
 }
 
 class TekGridLayoutOptions extends ComponentRender {
@@ -3274,21 +3323,6 @@ class TekGridLayoutOptions extends ComponentRender {
     }
 }
 
-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);
-    }
-}
-
 /* TekTreeGrid Class */
 class TekTreeGrid extends TreeGridEditable {
     /**
@@ -3961,6 +3995,89 @@ class TekUserInfoList extends List {
     }
 }
 
+class TekDragGrid extends TekGrid {
+    constructor(props) {
+        super(Object.assign(Object.assign({}, props), { datasource: Object.assign(Object.assign({}, props.datasource), { order: [`${props.orderColumnName}.${props.orderMode || 'asc'}`] }) }));
+        this.internalOrderColumnName = '';
+        this.internalOrderMode = 'asc';
+        this.internalOrderColumnName = this.getInitValue('orderColumnName', props.orderColumnName, this.orderColumnName);
+        this.internalOrderMode = this.getInitValue('orderMode', props.orderMode, this.orderMode);
+        this.createAccessors();
+        this.draggable = new Draggable(this.orderColumnName, this.orderMode);
+    }
+    set orderColumnName(value) {
+        this.internalOrderColumnName = value;
+        this.draggable.orderColumnName = value;
+    }
+    get orderColumnName() {
+        return this.internalOrderColumnName;
+    }
+    set orderMode(value) {
+        this.internalOrderMode = value;
+        this.draggable.orderColumnName = value;
+    }
+    get orderMode() {
+        return this.internalOrderMode;
+    }
+    /**
+     * Event triggered when dragged element is moving
+     * @param event DOM event
+     * @param row row being dragged
+     * @param element HTML element
+     * @returns return false to cancel dragging
+     */
+    onDragMove(event, row, element) {
+        this.callEvent('onDragMove', {
+            component: this,
+            event,
+            row,
+            element,
+        });
+        return true;
+    }
+    /**
+     * Event triggered when drag starts
+     * @param event DOM event
+     * @param row row being dragged
+     * @param element HTML element
+     */
+    onDragStart(event, row, element) {
+        return this.callEvent('onDragStart', {
+            component: this,
+            event,
+            row,
+            element,
+        });
+    }
+    /**
+     * Event triggered when drag ends
+     * @param event DOM event
+     * @param row row being dragged
+     * @param element HTML element
+     */
+    onDragEnd(event, row, element) {
+        const { oldIndex, newIndex } = event;
+        const changes = this.draggable.getDragChanges(oldIndex, newIndex, this.datasource, this.getEditedRows());
+        this.editing = true;
+        changes.forEach((change) => {
+            this.changeEditableComponent({ name: this.orderColumnName }, change.row, change.value);
+        });
+        this.callEvent('inlineEdit', {
+            event,
+            element,
+            row,
+            column: { name: this.orderColumnName },
+            component: this,
+        });
+        this.callEvent('onDragEnd', {
+            component: this,
+            event,
+            row,
+            element,
+        });
+    }
+}
+
 Messages.add({
     'pt-BR': {
         translation: {
@@ -4012,4 +4129,4 @@ Messages.add({
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };
+export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };