@zeedhi/teknisa-components-common 1.88.0 → 1.89.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/common'), require('lodash.debounce'), require('lodash.merge'), require('@zeedhi/zd-user-info-common')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/common', 'lodash.debounce', 'lodash.merge', '@zeedhi/zd-user-info-common'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-common"] = {}, global["@zeedhi/core"], global.common, global.lodash.debounce, global.lodash.merge, global["@zeedhi/zd-user-info-common"]));
-})(this, (function (exports, core, common, debounce, merge, zdUserInfoCommon) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('@zeedhi/common'), require('lodash.debounce'), require('lodash.merge'), require('@zeedhi/zd-user-info-common'), require('@zeedhi/zd-drag-grid-common')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', '@zeedhi/common', 'lodash.debounce', 'lodash.merge', '@zeedhi/zd-user-info-common', '@zeedhi/zd-drag-grid-common'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/teknisa-components-common"] = {}, global["@zeedhi/core"], global.common, global.lodash.debounce, global.lodash.merge, global["@zeedhi/zd-user-info-common"], global["@zeedhi/zd-drag-grid-common"]));
+})(this, (function (exports, core, common, debounce, merge, zdUserInfoCommon, zdDragGridCommon) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -718,7 +718,6 @@
   class GridBase {
       constructor(grid) {
           this.exportConfigButtons = [];
-          this.filterFormInputs = {};
           this.atoms = {
               TITLE: '_gridTitle',
               ADD_BUTTON: '_addButton',
@@ -947,18 +946,21 @@
                   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;
@@ -1003,344 +1005,37 @@
               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 = common.ModalService.create(filterModalDef);
-          }
-          else {
-              this.loadFilterValues({ component: core.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 core.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 core.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 = core.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 = core.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 = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
-          Object.keys(filterForm.value).forEach((item) => {
-              filterForm.value[item] = null;
-          });
-      }
-      getFilterRelationsDatasource() {
-          return core.DatasourceFactory.factory({
-              data: this.getFilterOptionsData('relations'),
-              loadAll: true,
-              translate: ['text'],
-          });
-      }
-      getFilterOperationsDatasource() {
-          return core.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 [];
       }
@@ -1368,12 +1063,7 @@
           return core.Metadata.getInstance(`${this.grid.name}${this.atoms[key]}`);
       }
       getFilterInputs(columnName) {
-          const mapper = (name) => core.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);
       }
   }
   core.Messages.add({
@@ -2498,10 +2188,10 @@
                   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() {
@@ -2527,7 +2217,6 @@
       }
       onBeforeDestroy() {
           super.onBeforeDestroy();
-          this.gridBase.destroyFilterModal();
           core.KeyMap.unbind(this.keyShortcutKeyMapping, this);
       }
       focusSearchInput() {
@@ -2941,156 +2630,515 @@
                       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 common.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 common.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);
+          core.Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
+      }
+      getAggregationSelectData() {
+          if (!this.aggregationDataSet.length) {
+              this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
+                  text: core.I18n.translate(`TEKGRID_AGGREGATION_${value}`),
+                  value,
+              }));
+          }
+          return this.aggregationDataSet;
+      }
+  }
+
+  class TekFilterHelper {
+      static getLabel(name) {
+          return core.DateHelper.getLabel(name);
+      }
+      static getValue(name, column) {
+          return core.DateHelper.getValue(name, column.componentProps.dateFormat);
+      }
+      static register(name, label, fn) {
+          core.DateHelper.register(name, label, fn);
+      }
+      static unregister(name) {
+          core.DateHelper.unregister(name);
+      }
+  }
+
+  /**
+   * Base class for TekGrid Filter Button component
+   */
+  class TekGridFilterButton extends common.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 = core.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 = core.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 = common.ModalService.create(filterModalDef);
+          }
+          else {
+              this.loadFilterValues({ component: core.Metadata.getInstance(`${this.grid.name}-filter-form`) });
+          }
+          this.filterModal.show();
+      }
+      onBeforeDestroy() {
+          super.onBeforeDestroy();
+          this.destroyFilterModal();
+      }
+      applyFilter({ event }) {
+          const filterForm = core.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 = core.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) => core.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 common.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 common.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);
-          core.Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
-      }
-      getAggregationSelectData() {
-          if (!this.aggregationDataSet.length) {
-              this.aggregationDataSet = columnAggregationValues.filter(Boolean).map((value) => ({
-                  text: core.I18n.translate(`TEKGRID_AGGREGATION_${value}`),
-                  value,
-              }));
-          }
-          return this.aggregationDataSet;
-      }
   }
 
   class TekGridLayoutOptions extends common.ComponentRender {
@@ -3279,21 +3327,6 @@
       }
   }
 
-  class TekFilterHelper {
-      static getLabel(name) {
-          return core.DateHelper.getLabel(name);
-      }
-      static getValue(name, column) {
-          return core.DateHelper.getValue(name, column.componentProps.dateFormat);
-      }
-      static register(name, label, fn) {
-          core.DateHelper.register(name, label, fn);
-      }
-      static unregister(name) {
-          core.DateHelper.unregister(name);
-      }
-  }
-
   /* TekTreeGrid Class */
   class TekTreeGrid extends common.TreeGridEditable {
       /**
@@ -3966,6 +3999,89 @@
       }
   }
 
+  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 zdDragGridCommon.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,
+          });
+      }
+  }
+
   core.Messages.add({
       'pt-BR': {
           translation: {
@@ -4033,10 +4149,12 @@
   exports.Loading = Loading;
   exports.Notifications = Notifications;
   exports.ProductCard = ProductCard;
+  exports.TekDragGrid = TekDragGrid;
   exports.TekFilterHelper = TekFilterHelper;
   exports.TekGrid = TekGrid;
   exports.TekGridColumn = TekGridColumn;
   exports.TekGridColumnsButton = TekGridColumnsButton;
+  exports.TekGridFilterButton = TekGridFilterButton;
   exports.TekGridLayoutOptions = TekGridLayoutOptions;
   exports.TekMemoryDatasource = TekMemoryDatasource;
   exports.TekRestDatasource = TekRestDatasource;