@zeedhi/teknisa-components-common 1.37.0 → 1.41.0

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

@@ -555,6 +555,36 @@
       }
   }
 
+  // eslint-disable-next-line
+  const loading = 'data:image/gif;base64,R0lGODlhlgCWAPf/AC1oxPa+ADarUdmsFEB/m0yTcjiMhEafWjFova2SNDZotX10VsOfJDlosFZnge25BnJtXTukVWVmaFh1eIuOZ1x0ZEFopHpyWGFpcS5ow+q2CVNnhmVnZvW9AW5qYUyKXUJnofW+AKWNOV9mcS9owZuGQTporlCGXbWXLmNrazxnqeKyDoGDZVFniFZ6ZNSpGJ+IPoR4Ud+wEURnnmtpYklnlll5YbGUMcagIk5njmhnZWpoZGF0aWBmbkdnmbyaKUtnlEaBfWdmZTNou0WUW5WDRFtmeGZmZ82kHqecTXqIdzRouGJmbPC6BIB2VDxnrGNmakyHYPO8AkxnkUh0qmRpZl9wZVxndmRmaVhnffS9AqmPN09ni96vEUmQWzBowC1ow2FtZVR3gl5ndFGCYEVnnF1mdGR9i1dnf7qZK4l7TnRvXOK1FD6eV8ijIG6Cgl58lF1rfEBnpFVsi1pmeo5+Sk56dz9np5OCRjaqUi5pxNarFndwWmNqZm9sYFx7a098itGnG4d6T7ikPKKLO1Rmg+e1Cr2bKVhme0GbVkpmk5mWW5GBSM+nHLiYLPG7BIp8TUKZWUFsqWJnbltmd0hnmNqtFExtm1tsgaiOOIx9TNuuE6CKPWJmbcqjH1OJb8CdJjFovlpwb+u5CzioU1aFbjdos0qYXJOPXWFwczepUnBsX8qrKuW0DD5nqdmsFUl+kTtnrDdntNKuI+OzDVRnhYuEV52HPzNqvjltuVBqkJeERNirFnVvXKSMOjVsvDmLhEJxsTloss+sJTeqUdyzGkaeWreYLmBqdjmMhDyhVvC8B49/STinVVV+YVp/bEuScq6fRj5tr8CnNUV/lUNnoGZnZkCFgTaqUVeCYTuLgz2Ig02RcUySck+QcTxpr5qQUFCPXjZsullviFh4ZNaxH0KAmEGYXFJ4oFCNcEdsoUicWpmFQkRooEFvsHt5YDepUXBvYzyKhESXWkeeWjxutcWlK250bYp+UFCQcGZoaLyeLtitFaGSR0OYV2ZmZiH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDcuMS1jMDAwIDc5LmRhYmFjYmIsIDIwMjEvMDQvMTQtMDA6Mzk6NDQgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCAyMy4wIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEMEVGRUY5RjYzRjYxMUVDQkRFNUM0MjQ5M0FFRTY2RSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEMEVGRUZBMDYzRjYxMUVDQkRFNUM0MjQ5M0FFRTY2RSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQwRUZFRjlENjNGNjExRUNCREU1QzQyNDkzQUVFNjZFIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQwRUZFRjlFNjNGNjExRUNCREU1QzQyNDkzQUVFNjZFIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1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3cr155ExDjZsyDKiK8weU4R9AcAWTCgTLcyulFBrCdu7eAHITSmhEpi8gPeirJEBcGDBJR0UNpwXMUksChgfdhxyg+TJlD/eudw480cmdjnf9fxxDAnRo0l3vII6teqNZhajfs1xBILWemlrlNAAt+6NNXz/zjji9OzhGSu1Rp6RSW/RzDOaicw5esZJrqpbx4iFiynZd0mYgtiuEQuaSndMmJAzhY4E8vDjy59Pv779+/jz69/Pv7///wAGKOCABBZo4IEIJqjgggw26OCDEEYo4YQUVmjhhRhmqOGGHHbo4YcghijiiCSWaOKJKKao4oostujiizDGKOOMNNZo44045qjjjjz26OOPQAYp5JBEFmnkkUgmqSRVAQEAIfkEBQQA/wAsAAAAAJYAlgAACPEA/wkcSLCgwYMIEypcyLChw4cQI0qcSLGixYsYM2rcyLGjx48gQ4ocSbKkyZMoU6pcybKly5cwY8qcSbOmzZs4c+rcybOnz59AgwodSrSo0aNIkypdyrSp06dQo0qdSrWq1atYs2rdyrWr169gw4odS7as2bNo06pdy7at27dw48qdS7eu3bt48+rdy7ev37+AAwseTLiw4cOIEytezLix48eQI0ueTLmy5cuYM2vezLmz58+gQ4seTbq06dOoU6tezbq169ewY8ueTbu27du4c+vezbu379/AgwsfTry48ePIkytfzry58+fQo0ufbjggACH5BAUEAP8ALAAAAAABAAEAAAgEAP8FBAA7';
+  /**
+   * Teknisa component
+   */
+  class Loading extends common.ComponentRender {
+      /**
+      * Creates a new instance of TekLoading
+      * @param props Image Link props
+      */
+      constructor(props) {
+          super(props);
+          /**
+          * text to show in Loader Overlay
+          */
+          this.text = '';
+          /**
+          * zIndex value.
+          */
+          this.zIndex = '999';
+          /**
+          * loading path.
+          */
+          this.image = loading;
+          this.text = this.getInitValue('text', props.text, this.text);
+          this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
+          this.image = this.getInitValue('image', props.image, this.image);
+      }
+  }
+
   /**
    * Notifications component is used to show notifications
    */
@@ -682,568 +712,796 @@
       }
   }
 
-  const DynamicFilterOperations = {
-      CONTAINS: true,
-      NOT_CONTAINS: true,
-      EQUALS: true,
-      NOT_EQUALS: true,
-      GREATER_THAN: true,
-      LESS_THAN: true,
-      GREATER_THAN_EQUALS: true,
-      LESS_THAN_EQUALS: true,
-      IN: true,
-      NOT_IN: true,
-      BETWEEN: true,
-  };
-  const DynamicFilterRelations = {
-      AND: true,
-      OR: true,
-  };
-
-  class TekRestDatasource extends core.RestDatasource {
-      /**
-       * Create new datasource
-       * @param props Datasource properties
-       */
-      constructor(props) {
-          super(Object.assign(Object.assign({}, props), { lazyLoad: true }));
-          /**
-           * Dynamic Filter Operations
-           */
-          this.dynamicFilterOperations = DynamicFilterOperations;
-          /**
-           * Dynamic Filter Relations
-           */
-          this.dynamicFilterRelations = DynamicFilterRelations;
-          /**
-           * Dynamic Filter applied flag
-           */
-          this.dynamicFilterApplied = '';
-          if (!this.watchUrl) {
-              this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
-              this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
-          }
-          this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
-          this.createAccessors();
-          if (!this.lazyLoad) {
-              this.get();
-          }
+  class GridBase {
+      constructor(grid) {
+          this.exportConfigButtons = [];
+          this.grid = grid;
+          this.exportConfigButtons = this.getExportConfigButtons();
       }
-      updateReservedKeys() {
-          this.reservedKeys.dynamic_filter = true;
-          this.reservedKeys.search_join = true;
+      getExportConfigButtons() {
+          return this.grid.exportConfig.map((config) => {
+              const { type, label, portrait = true, iconName, } = config;
+              const orientation = portrait ? 'portrait' : 'landscape';
+              return {
+                  label,
+                  iconName,
+                  name: `${this.grid.name}_export_${type}_${orientation}`,
+                  component: 'ZdButton',
+                  flat: true,
+                  events: {
+                      click: () => this.grid.getReport(type, portrait),
+                  },
+              };
+          });
       }
-      updateInternalProperties(datasource = {}) {
-          if (!this.watchUrl)
-              return;
-          this.updateReservedKeys();
-          super.updateInternalProperties(datasource);
-          const queryString = core.URL.getParsedQueryStringFromUrl();
-          this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
-          this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+      createToolbarProps() {
+          return [
+              {
+                  name: `${this.grid.name}_gridTitle`,
+                  component: 'ZdText',
+                  cssClass: 'toolbar-title',
+                  tag: 'h2',
+                  text: this.grid.title,
+                  title: this.grid.title,
+              },
+              {
+                  name: `${this.grid.name}_spacer`,
+                  component: 'VSpacer',
+              },
+              {
+                  name: `${this.grid.name}_notEditingSpan`,
+                  component: 'ZdTag',
+                  tag: 'span',
+                  cssStyle: 'display: flex',
+                  isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
+                  children: [
+                      {
+                          name: `${this.grid.name}_add_tooltip`,
+                          component: 'ZdTooltip',
+                          label: 'TEKGRID_ADD',
+                          bottom: true,
+                          children: [
+                              {
+                                  name: `${this.grid.name}_addButton`,
+                                  component: 'ZdButton',
+                                  icon: true,
+                                  iconName: 'add',
+                                  isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
+                                  events: {
+                                      click: this.addButtonClick.bind(this),
+                                  },
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.grid.name}_delete_tooltip`,
+                          component: 'ZdTooltip',
+                          label: 'TEKGRID_DELETE',
+                          bottom: true,
+                          children: [
+                              {
+                                  name: `${this.grid.name}_deleteButton`,
+                                  component: 'ZdButton',
+                                  icon: true,
+                                  iconName: 'delete',
+                                  isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
+                                  disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
+                                  events: {
+                                      click: this.deleteButtonClick.bind(this),
+                                  },
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.grid.name}_divider1`,
+                          component: 'ZdDivider',
+                          cssClass: 'toolbar-divider',
+                          vertical: true,
+                          isVisible: `{{GridController_${this.grid.componentId}.showFirstDivider}}`,
+                      },
+                      {
+                          name: `${this.grid.name}_refresh_tooltip`,
+                          component: 'ZdTooltip',
+                          label: 'TEKGRID_REFRESH',
+                          bottom: true,
+                          children: [
+                              {
+                                  name: `${this.grid.name}_refreshButton`,
+                                  component: 'ZdButton',
+                                  icon: true,
+                                  iconName: 'refresh',
+                                  isVisible: this.grid.showReload,
+                                  events: {
+                                      click: this.reloadGrid.bind(this),
+                                  },
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.grid.name}_divider2`,
+                          component: 'ZdDivider',
+                          cssClass: 'toolbar-divider',
+                          vertical: true,
+                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}`,
+                      },
+                      {
+                          name: `${this.grid.name}_columns_button_tooltip`,
+                          component: 'ZdTooltip',
+                          label: 'TEKGRID_COLUMNS',
+                          bottom: true,
+                          children: [
+                              {
+                                  name: `${this.grid.name}_columnsButton`,
+                                  component: 'TekGridColumnsButton',
+                                  isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
+                                  iterableComponentName: this.grid.name,
+                                  hideGroups: !(this.grid instanceof TekGrid),
+                                  ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
+                              },
+                          ],
+                      },
+                      {
+                          name: `${this.grid.name}_layout_options`,
+                          component: 'TekGridLayoutOptions',
+                          isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptions}}`,
+                      },
+                      {
+                          name: `${this.grid.name}_dividerActions`,
+                          component: 'ZdDivider',
+                          cssClass: 'toolbar-divider',
+                          vertical: true,
+                          isVisible: `{{GridController_${this.grid.componentId}.showActionAndExportButton}}`,
+                      },
+                      {
+                          name: `${this.grid.name}_export_dropdown`,
+                          component: 'ZdDropdown',
+                          cssClass: 'tekgrid-actions-dropdown',
+                          offsetY: true,
+                          activator: {
+                              name: `${this.grid.name}_exportButton`,
+                              component: 'ZdButton',
+                              icon: true,
+                              iconName: 'fileDownload',
+                              isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
+                          },
+                          children: this.grid.exportActions || this.exportConfigButtons,
+                      },
+                      {
+                          name: `${this.grid.name}_actions_dropdown`,
+                          component: 'ZdDropdown',
+                          cssClass: 'tekgrid-actions-dropdown',
+                          offsetY: true,
+                          activator: {
+                              name: `${this.grid.name}_actionsButton`,
+                              component: 'ZdButton',
+                              icon: true,
+                              iconName: 'more',
+                              isVisible: `{{GridController_${this.grid.componentId}.showActionsButton}}`,
+                          },
+                          children: this.grid.actions,
+                      },
+                      {
+                          name: `${this.grid.name}_divider3`,
+                          component: 'ZdDivider',
+                          cssClass: 'toolbar-divider',
+                          vertical: true,
+                      },
+                  ],
+              },
+              {
+                  name: `${this.grid.name}_saveButton`,
+                  component: 'ZdButton',
+                  label: 'TEKGRID_SAVE',
+                  isVisible: `{{GridController_${this.grid.componentId}.isEditing}}`,
+                  small: true,
+                  events: {
+                      click: this.saveChanges.bind(this),
+                  },
+              },
+              {
+                  name: `${this.grid.name}_cancelButton`,
+                  component: 'ZdButton',
+                  label: 'TEKGRID_CANCEL',
+                  outline: true,
+                  cssClass: 'zd-mx-2',
+                  isVisible: `{{GridController_${this.grid.componentId}.isEditing}}`,
+                  small: true,
+                  events: {
+                      click: this.cancelChanges.bind(this),
+                  },
+              },
+              {
+                  name: `${this.grid.name}_gridSearch`,
+                  component: 'ZdSearch',
+              },
+              {
+                  name: `${this.grid.name}_filter_tooltip`,
+                  component: 'ZdTooltip',
+                  label: 'TEKGRID_FILTER',
+                  bottom: true,
+                  children: [
+                      {
+                          name: `${this.grid.name}_filterButton`,
+                          component: 'ZdButton',
+                          icon: true,
+                          iconName: 'filter',
+                          isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
+                          events: {
+                              click: this.filterClick.bind(this),
+                          },
+                      },
+                  ],
+              },
+          ];
       }
-      getEncodedParam(urlParam, datasourceParam = {}) {
-          return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+      addButtonClick({ event }) {
+          if (this.grid.events.addClick) {
+              this.grid.events.addClick({ component: this, event });
+          }
       }
-      getQueryStringValues() {
-          const values = super.getQueryStringValues();
-          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-              values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+      deleteButtonClick({ event }) {
+          if (this.grid.events.beforeDelete) {
+              this.grid.events.beforeDelete({ component: this, event });
           }
-          if (this.searchJoin && Object.keys(this.searchJoin).length) {
-              values.search_join = btoa(JSON.stringify(this.searchJoin));
+          if (!event.defaultPrevented) {
+              this.grid.deleteRows();
+              if (this.grid.events.afterDelete) {
+                  this.grid.events.afterDelete({ component: this });
+              }
           }
-          return values;
       }
-      getUrlQueryString() {
-          const superQueryString = super.getUrlQueryString();
-          const query = core.URL.getParsedQueryStringFromUrl();
-          let dynamicFilterQuerystring = '';
-          if (query.dynamic_filter) {
-              dynamicFilterQuerystring = `&${core.URL.getFormattedQueryString({
-                dynamic_filter: query.dynamic_filter,
-            })}`;
+      reloadGrid() {
+          this.grid.reload();
+      }
+      saveChanges({ event }) {
+          if (this.grid.events.beforeSave) {
+              this.grid.events.beforeSave({ component: this, event });
           }
-          let searchJoinQuerystring = '';
-          if (query.search_join) {
-              searchJoinQuerystring = `&${core.URL.getFormattedQueryString({
-                search_join: query.search_join,
-            })}`;
+          if (!event.defaultPrevented) {
+              this.grid.saveEditedRows();
+              if (this.grid.events.afterSave) {
+                  this.grid.events.afterSave({ component: this });
+              }
           }
-          return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
       }
-      /**
-       * Adds a new dynamic filter position or replace if exists
-       * @param column Dynamic Filter column name
-       * @param value Dynamic Filter value
-       * @returns Promise with data collection
-       */
-      addDynamicFilter(column, value) {
-          if (this.isValidDynamicFilterValue(column, value)) {
-              this.dynamicFilter[column] = value;
-              return this.updateDynamicFilter();
+      cancelChanges({ event }) {
+          if (this.grid.events.beforeCancel) {
+              this.grid.events.beforeCancel({ component: this, event });
+          }
+          if (!event.defaultPrevented) {
+              this.grid.cancelEditedRows();
+              if (this.grid.events.afterCancel) {
+                  this.grid.events.afterCancel({ component: this });
+              }
           }
-          return this.removeDynamicFilter(column);
       }
-      /**
-       * Removes a dynamic filter position
-       * @param column Dynamic Filter column name
-       * @returns Promise with data collection
-       */
-      removeDynamicFilter(column) {
-          delete this.dynamicFilter[column];
-          return this.updateDynamicFilter();
+      filterClick({ event }) {
+          if (this.grid.events.filterClick) {
+              this.grid.events.filterClick({ event, component: this });
+          }
+          if (!event.defaultPrevented) {
+              this.createFilterFromColumns();
+          }
       }
-      /**
-       * Sets new dynamic filter value
-       * @param filter Dynamic Filter value
-       * @returns Promise with data collection
-       */
-      setDynamicFilter(filter) {
-          this.dynamicFilter = {};
-          Object.keys(filter).forEach((column) => {
-              if (this.isValidDynamicFilterValue(column, filter[column])) {
-                  this.dynamicFilter[column] = filter[column];
-              }
-              else {
-                  delete this.dynamicFilter[column];
-              }
-          });
-          return this.updateDynamicFilter();
+      createFilterFromColumns() {
+          if (!this.filterModal) {
+              const filterModalDef = {
+                  name: `${this.grid.name}-filter-modal`,
+                  persistent: true,
+                  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',
+                                  text: 'FILTER',
+                                  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-form`,
+                          component: 'ZdForm',
+                          cssClass: 'zd-my-4',
+                          children: this.getFilterModalComponents(),
+                          events: {
+                              onMounted: this.loadFilterValues.bind(this),
+                          },
+                      },
+                      {
+                          name: `${this.grid.name}-filter-footer`,
+                          component: 'ZdFooter',
+                          color: 'transparent',
+                          padless: true,
+                          rightSlot: [
+                              {
+                                  name: `${this.grid.name}-filter-cancelButton`,
+                                  component: 'ZdButton',
+                                  label: 'CANCEL',
+                                  outline: true,
+                                  events: {
+                                      click: this.hideFilterModal.bind(this),
+                                  },
+                              },
+                              {
+                                  name: `${this.grid.name}-filter-okButton`,
+                                  component: 'ZdButton',
+                                  label: 'OK',
+                                  events: {
+                                      click: this.applyFilter.bind(this),
+                                  },
+                              },
+                          ],
+                      },
+                  ],
+              };
+              this.filterModal = common.ModalService.create(filterModalDef);
+          }
+          this.filterModal.show();
       }
-      /**
-       * Clears Dynamic filter value
-       * @returns Promise with data collection
-       */
-      clearDynamicFilter() {
-          this.dynamicFilter = {};
-          return this.updateDynamicFilter();
+      hideFilterModal() {
+          this.filterModal.hide();
       }
-      /**
-       * Resets page and selected rows and tries to update the url
-       * @returns Promise with data collection
-       */
-      updateDynamicFilter() {
-          return __awaiter(this, void 0, void 0, function* () {
-              this.page = this.firstPage;
-              this.selectedRows = [];
-              this.visibleSelectedRows = [];
-              if (this.watchUrl) {
-                  if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-                      core.URL.updateQueryString({
-                          dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
-                      });
-                  }
-                  else {
-                      core.URL.updateQueryString({
-                          dynamic_filter: undefined,
-                      });
-                  }
+      getFilterModalComponents() {
+          const filterColumns = [];
+          let columnComponentName;
+          this.grid.columns.forEach((column) => {
+              const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
+              if (column.filterable && filterProps && filterProps.length > 0) {
+                  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}`;
+                      }
+                      let newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                      if (filterItem.helperOptions) {
+                          newColumnComponent = this.getHelperValueComponent(newColumnComponent, filterItem.helperOptions, column);
+                      }
+                      filterColumns.push(newColumnComponent);
+                  });
               }
-              return this.get();
           });
+          return filterColumns;
       }
-      /**
-       * Checks if a filter value is valid
-       * @param value Filter value
-       * @returns Is valid filter value
-       */
-      isValidDynamicFilterValue(column, value) {
-          return !this.reservedKeys[column]
-              && value
-              && value.length > 0
-              && value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation]
-                  && this.dynamicFilterRelations[filterValue.relation]
-                  && filterValue.value !== '' && filterValue.value !== null);
+      getHelperValueComponent(component, helperValues, column) {
+          return {
+              name: `${component.name}_helperspan`,
+              component: 'ZdTag',
+              tag: 'span',
+              cssClass: 'zd-display-flex',
+              grid: component.grid,
+              children: [
+                  Object.assign(Object.assign({}, component), { persistentHint: true, events: {
+                          onMounted: this.registerFilterComponentToForm.bind(this),
+                          change: this.clearFilterHelperValue.bind(this, column),
+                      } }),
+                  {
+                      name: `${component.name}_helperdropdown`,
+                      component: 'ZdDropdown',
+                      offsetY: true,
+                      activator: {
+                          name: `${component.name}_helperbutton`,
+                          component: 'ZdButton',
+                          iconName: 'magnify',
+                          icon: true,
+                          small: true,
+                          cssClass: `filter-helper-values-button ${component.showLabel !== false ? 'with-label' : ''}`,
+                      },
+                      children: this.createHelperValueOptions(component, helperValues, column),
+                  },
+              ],
+          };
       }
-      /**
-       * Retrieves request params
-       */
-      getRequestParams() {
-          const requestParams = super.getRequestParams();
-          const isNotEmptyObj = (obj) => !!(obj && Object.keys(obj).length);
-          const isValid = this.dynamicFilter && Object.keys(this.dynamicFilter).every((column) => {
-              const value = this.dynamicFilter[column];
-              return value && value.length > 0 && this.isValidDynamicFilterValue(column, value);
-          });
-          if (isNotEmptyObj(this.dynamicFilter) && isValid) {
-              requestParams.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
-          }
-          if (isNotEmptyObj(this.searchJoin)) {
-              requestParams.search_join = btoa(JSON.stringify(this.searchJoin));
-          }
-          return requestParams;
+      createHelperValueOptions(component, helperValues, column) {
+          return helperValues.map((value) => ({
+              name: `${component.name}_helpervalue_${value}`,
+              component: 'ZdText',
+              cssClass: 'filter-helper-values-option',
+              text: TekFilterHelper.getLabel(value),
+              events: {
+                  click: this.helperValuesOptionClick.bind(this, component, value, column),
+              },
+          }));
       }
-      clone() {
-          return Object.assign(Object.assign({}, super.clone()), { dynamicFilter: this.dynamicFilter, searchJoin: this.searchJoin, type: 'tek-rest' });
+      helperValuesOptionClick(component, helperValue, column) {
+          const value = TekFilterHelper.getValue(helperValue, column);
+          const componentObject = core.Metadata.getInstance(component.name);
+          componentObject.value = value;
+          componentObject.hint = TekFilterHelper.getLabel(helperValue);
+          this.setFilterPropsHelperValue(column, component.name, helperValue);
       }
-  }
-  core.DatasourceFactory.register('tek-rest', TekRestDatasource);
-
-  class TekMemoryDatasource extends core.MemoryDatasource {
-      /**
-       * Create new datasource
-       * @param props Datasource properties
-       */
-      constructor(props) {
-          super(props);
-          /**
-           * Dynamic Filter Operations
-           */
-          this.dynamicFilterOperations = DynamicFilterOperations;
-          /**
-           * Dynamic Filter Relations
-           */
-          this.dynamicFilterRelations = DynamicFilterRelations;
-          /**
-           * Dynamic Filter applied flag
-           */
-          this.dynamicFilterApplied = '';
-          if (!this.watchUrl) {
-              this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
-              this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+      setFilterPropsHelperValue(column, componentName, helperValue) {
+          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;
+                  }
+              });
           }
-          this.createAccessors();
-          this.get();
-      }
-      updateReservedKeys() {
-          this.reservedKeys.dynamic_filter = true;
-          this.reservedKeys.search_join = true;
-      }
-      updateInternalProperties(datasource = {}) {
-          if (!this.watchUrl)
-              return;
-          this.updateReservedKeys();
-          super.updateInternalProperties(datasource);
-          const queryString = core.URL.getParsedQueryStringFromUrl();
-          this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
-          this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
       }
-      getEncodedParam(urlParam, datasourceParam = {}) {
-          return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+      registerFilterComponentToForm({ component }) {
+          const form = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
+          form.registerInput(component);
       }
-      getQueryStringValues() {
-          const values = super.getQueryStringValues();
-          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-              values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
-          }
-          if (this.searchJoin && Object.keys(this.searchJoin).length) {
-              values.search_join = btoa(JSON.stringify(this.searchJoin));
-          }
-          return values;
+      clearFilterHelperValue(column, { component }) {
+          this.setFilterPropsHelperValue(column, component.name, '');
+          component.hint = '';
       }
-      getUrlQueryString() {
-          const superQueryString = super.getUrlQueryString();
-          const query = core.URL.getParsedQueryStringFromUrl();
-          let dynamicFilterQuerystring = '';
-          if (query.dynamic_filter) {
-              dynamicFilterQuerystring = `&${core.URL.getFormattedQueryString({
-                dynamic_filter: query.dynamic_filter,
-            })}`;
-          }
-          let searchJoinQuerystring = '';
-          if (query.search_join) {
-              searchJoinQuerystring = `&${core.URL.getFormattedQueryString({
-                search_join: query.search_join,
-            })}`;
+      loadFilterValues({ component }) {
+          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}`;
+                          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);
+                              }
+                          }
+                      });
+                  }
+              });
           }
-          return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
-      }
-      /**
-       * Adds a new dynamic filter position or replace if exists
-       * @param column Dynamic Filter column name
-       * @param value Dynamic Filter value
-       * @returns Promise with data collection
-       */
-      addDynamicFilter(column, value) {
-          if (this.isValidDynamicFilterValue(column, value)) {
-              this.dynamicFilter[column] = value;
-              return this.updateDynamicFilter();
+          else {
+              const { filter } = datasource;
+              Object.keys(filter).forEach((item) => {
+                  if (filter[item]) {
+                      component.value[`${this.grid.name}-filter-AND-CONTAINS-${item}-0`] = filter[item];
+                  }
+              });
           }
-          return this.removeDynamicFilter(column);
-      }
-      /**
-       * Removes a dynamic filter position
-       * @param column Dynamic Filter column name
-       * @returns Promise with data collection
-       */
-      removeDynamicFilter(column) {
-          delete this.dynamicFilter[column];
-          return this.updateDynamicFilter();
       }
-      /**
-       * Sets new dynamic filter value
-       * @param filter Dynamic Filter value
-       * @returns Promise with data collection
-       */
-      setDynamicFilter(filter) {
-          this.dynamicFilter = {};
-          Object.keys(filter).forEach((column) => {
-              if (this.isValidDynamicFilterValue(column, filter[column])) {
-                  this.dynamicFilter[column] = filter[column];
+      applyFilter({ event }) {
+          const filterForm = core.Metadata.getInstance(`${this.grid.name}-filter-form`);
+          if (filterForm.validate()) {
+              const { datasource } = this.grid;
+              if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                  const dynamicFilter = {};
+                  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 (!dynamicFilter[columnName]) {
+                              dynamicFilter[columnName] = [];
+                          }
+                          const value = filterForm.value[item];
+                          dynamicFilter[columnName].push({
+                              relation,
+                              operation,
+                              value,
+                          });
+                      }
+                  });
+                  datasource.dynamicFilter = dynamicFilter;
               }
               else {
-                  delete this.dynamicFilter[column];
+                  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]) {
+                          datasource.filter[columnName] = filterForm.value[item];
+                      }
+                      else {
+                          delete datasource.filter[columnName];
+                      }
+                  });
               }
-          });
-          return this.updateDynamicFilter();
-      }
-      /**
-       * Clears Dynamic filter value
-       * @returns Promise with data collection
-       */
-      clearDynamicFilter() {
-          this.dynamicFilter = {};
-          return this.updateDynamicFilter();
-      }
-      /**
-       * Resets page and selected rows and tries to update the url
-       * @returns Promise with data collection
-       */
-      updateDynamicFilter() {
-          return __awaiter(this, void 0, void 0, function* () {
-              this.page = this.firstPage;
-              this.selectedRows = [];
-              this.visibleSelectedRows = [];
-              if (this.watchUrl) {
-                  if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-                      core.URL.updateQueryString({
-                          dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
-                      });
-                  }
-                  else {
-                      core.URL.updateQueryString({
-                          dynamic_filter: undefined,
-                      });
-                  }
+              if (this.grid.events.beforeApplyFilter) {
+                  this.grid.events.beforeApplyFilter({ event, component: this });
               }
-              return this.get();
-          });
-      }
-      /**
-       * Checks if a filter value is valid
-       * @param value Filter value
-       * @returns Is valid filter value
-       */
-      isValidDynamicFilterValue(column, value) {
-          return !this.reservedKeys[column]
-              && value
-              && value.length > 0
-              && value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation]
-                  && this.dynamicFilterRelations[filterValue.relation]
-                  && filterValue.value !== '' && filterValue.value !== null);
-      }
-      clone() {
-          return Object.assign(Object.assign({}, super.clone()), { dynamicFilter: this.dynamicFilter, searchJoin: this.searchJoin, type: 'tek-memory' });
-      }
-      /**
-       * Updates filtered data
-       */
-      updateFilteredData() {
-          super.updateFilteredData();
-          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
-              this.filteredData = this.filteredData.filter((row) => this.getRowByDynamicFilter(row));
-          }
-          if (this.searchJoin && Object.keys(this.searchJoin).length) {
-              this.filteredData = this.filteredData.filter((row) => this.getRowBySearchJoin(row));
+              if (!event.defaultPrevented) {
+                  datasource.get();
+                  this.filterModal.hide();
+              }
+              this.grid.changeLayout(event);
           }
       }
-      getRowByDynamicFilter(row) {
-          let filtered;
-          Object.keys(this.dynamicFilter).forEach((key) => {
-              const filterItems = this.dynamicFilter[key];
-              filterItems.forEach((item) => {
-                  if (filtered === false && item.relation === 'AND')
-                      return;
-                  if (filtered === true && item.relation === 'OR')
-                      return;
-                  const columnValue = core.normalize(row[key].toString());
-                  const value = core.normalize(item.value.toString());
-                  let range;
-                  switch (item.operation) {
-                      case 'CONTAINS':
-                          filtered = columnValue.indexOf(value) !== -1;
-                          break;
-                      case 'NOT_CONTAINS':
-                          filtered = columnValue.indexOf(value) === -1;
-                          break;
-                      case 'EQUALS':
-                          filtered = columnValue === value;
-                          break;
-                      case 'NOT_EQUALS':
-                          filtered = columnValue !== value;
-                          break;
-                      case 'GREATER_THAN':
-                          filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
-                          break;
-                      case 'LESS_THAN':
-                          filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
-                          break;
-                      case 'GREATER_THAN_EQUALS':
-                          filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
-                          break;
-                      case 'LESS_THAN_EQUALS':
-                          filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
-                          break;
-                      case 'IN':
-                          filtered = value.split(';').includes(columnValue);
-                          break;
-                      case 'NOT_IN':
-                          filtered = !value.split(';').includes(columnValue);
-                          break;
-                      case 'BETWEEN':
-                          range = value.split(';');
-                          filtered = (Number(columnValue) || columnValue) >= (Number(range[0]) || range[0])
-                              && (Number(columnValue) || columnValue) <= (Number(range[1]) || range[1]);
-                          break;
-                  }
-              });
+      getFilterRelationsDatasource() {
+          return core.DatasourceFactory.factory({
+              data: this.getFilterOptionsData('relations'),
+              loadAll: true,
+              translate: ['text'],
           });
-          return filtered;
       }
-      getRowBySearchJoin(row) {
-          return Object.keys(this.searchJoin).some((key) => this.searchJoin[key].includes(row[key]));
+      getFilterOperationsDatasource() {
+          return core.DatasourceFactory.factory({
+              data: this.getFilterOptionsData('operations'),
+              loadAll: true,
+              translate: ['text'],
+          });
       }
-  }
-  core.DatasourceFactory.register('tek-memory', TekMemoryDatasource);
-
-  /**
-   * Base class for TekGrid column
-   */
-  class TekGridColumn extends common.GridColumnEditable {
-      /* istanbul ignore next */
-      /**
-       * Creates a new TekGrid Column.
-       * @param props TekGrid column properties
-       */
-      constructor(props, grid) {
-          super(props);
-          /* filter component props */
-          this.filterProps = [];
-          /* column can be use to filter */
-          this.filterable = true;
-          /* column is fixed */
-          this.fixed = false;
-          /* column is grouped */
-          this.groupedValue = false;
-          /* Value to show when grouped value is empty */
-          this.groupLabelForEmptyValue = '';
-          /* column is visible */
-          this.isVisibleValue = true;
-          /**
-           * Defines if the column should store the componentProps datasource.data in memory
-           */
-          this.storeData = true;
-          this.lookup = debounce__default["default"]((lookupColumn) => __awaiter(this, void 0, void 0, function* () {
-              var _a, _b;
-              let data = [];
-              if (this.storeData) {
-                  data = yield ((_a = this.lookupDatasource) === null || _a === void 0 ? void 0 : _a.get());
+      getFilterOptionsData(prop) {
+          const { datasource } = this.grid;
+          if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+              let options;
+              if (prop === 'relations') {
+                  options = Object.keys(datasource.dynamicFilterRelations);
               }
               else {
-                  const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
-                  this.dataToLookup = [];
-                  data = yield ((_b = this.lookupDatasource) === null || _b === void 0 ? void 0 : _b.addFilter(lookupColumn, dataToLookup));
+                  options = Object.keys(datasource.dynamicFilterOperations);
               }
-              data.forEach((row) => {
-                  this.lookupData[row[lookupColumn]] = row;
-              });
-              this.lookupDataCount += 1;
-          }), 100);
-          this.grid = grid;
-          this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
-          this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
-          this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
-          this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
-          this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
-          this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
-          this.aggregation = this.getInitValue('aggregation', props.aggregation, this.aggregation);
-          this.groupLabelForEmptyValue = this.getInitValue('groupLabelForEmptyValue', props.groupLabelForEmptyValue, this.groupLabelForEmptyValue);
-          this.storeData = this.getInitValue('storeData', props.storeData, this.storeData);
-          this.createAccessors();
-      }
-      getLookupData(lookupColumn, value) {
-          const emptyRow = {};
-          if (this.lookupData[value]) {
-              return this.lookupData[value];
-          }
-          this.lookupData[value] = emptyRow;
-          const dataIndex = this.lookupDatasource.data.findIndex((row) => row[lookupColumn] === value);
-          if (dataIndex !== -1) {
-              this.lookupData[value] = this.lookupDatasource.data[dataIndex];
-              return this.lookupData[value];
+              return options.map((item) => ({
+                  text: `TEKGRID_${item}`,
+                  value: item,
+              }));
           }
-          this.dataToLookup = (this.dataToLookup || []);
-          this.dataToLookup.push(value);
-          this.lookup(lookupColumn);
-          return emptyRow;
+          return [];
       }
-      /**
-       * Memory search, without changing lookupDatasource
-       */
-      memorySearch(search) {
+      setSearch(search) {
           return __awaiter(this, void 0, void 0, function* () {
-              if (!this.lookupDatasource) {
-                  throw new Error('Can\'t search in a column that doesn\'t have a datasource');
-              }
-              let { data } = this.lookupDatasource;
-              if (this.storeData) {
-                  if (!data.length) {
-                      data = yield this.lookupDatasource.get();
-                  }
-              }
-              else {
-                  // datasource without the lookup filters
-                  const defaultDs = core.DatasourceFactory.factory(Object.assign(Object.assign({}, this.componentProps.datasource), { lazyLoad: true, loadAll: true }));
-                  data = yield defaultDs.get();
+              const { datasource } = this.grid;
+              if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
+                  const lookupColumns = this.grid.columns.filter((column) => !!column.componentProps.datasource);
+                  const searchJoin = {};
+                  if (search) {
+                      const promises = lookupColumns.map((column) => __awaiter(this, void 0, void 0, function* () {
+                          const searchData = yield column.memorySearch(search);
+                          const lookupId = column.componentProps.datasource.uniqueKey;
+                          searchJoin[column.name] = searchData.map((row) => row[lookupId]);
+                      }));
+                      yield Promise.all(promises);
+                  }
+                  datasource.searchJoin = searchJoin;
               }
-              const { dataText } = this.componentProps;
-              const searchIn = Array.isArray(dataText) ? dataText : [dataText];
-              // get datasource as memory
-              const datasource = core.DatasourceFactory.factory({
-                  searchIn,
-                  data,
-                  type: 'memory',
-                  loadAll: true,
-              });
               return datasource.setSearch(search);
           });
       }
-      get grouped() {
-          return this.groupedValue;
-      }
-      set grouped(value) {
-          const changed = value !== this.groupedValue;
-          this.groupedValue = value;
-          if (changed) {
-              this.changeGrouping();
-          }
-      }
-      get aggregation() {
-          return this.aggregationValue;
-      }
-      set aggregation(value) {
-          const changed = value !== this.aggregationValue;
-          this.aggregationValue = value;
-          if (changed) {
-              this.changeGrouping();
-          }
-      }
-      get isVisible() {
-          return this.isVisibleValue && !this.grouped;
-      }
-      set isVisible(value) {
-          this.isVisibleValue = value;
-      }
-      changeGrouping() {
-          // wait for grid.constructor to be fully executed
-          setTimeout(() => {
-              this.grid.updateGrouping();
-          });
-      }
-  }
+  }
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              TEKGRID_CONTAINS: 'contém',
+              TEKGRID_NOT_CONTAINS: 'não contém',
+              TEKGRID_EQUALS: 'é igual a',
+              TEKGRID_NOT_EQUALS: 'é diferente de',
+              TEKGRID_GREATER_THAN: 'é maior que',
+              TEKGRID_LESS_THAN: 'é menor que',
+              TEKGRID_GREATER_THAN_EQUALS: 'é maior ou igual a',
+              TEKGRID_LESS_THAN_EQUALS: 'é menor ou igual a',
+              TEKGRID_IN: 'um dos valores',
+              TEKGRID_NOT_IN: 'nenhum dos valores',
+              TEKGRID_BETWEEN: 'está entre',
+              TEKGRID_AND: 'e',
+              TEKGRID_OR: 'ou',
+              TEKGRID_ADD: 'Adicionar',
+              TEKGRID_DELETE: 'Excluir',
+              TEKGRID_REFRESH: 'Atualizar',
+              TEKGRID_COLUMNS: 'Colunas',
+              TEKGRID_SAVE: 'Salvar',
+              TEKGRID_CANCEL: 'Cancelar',
+              TEKGRID_APPLY: 'Aplicar',
+              TEKGRID_FILTER: 'Filtro',
+              TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
+              TEKGRID_EXPORT: 'Exportar',
+              TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_COLUMN_VISIBLE: 'Visível',
+              TEKGRID_COLUMN_GROUPED: 'Grupo',
+              TEKGRID_COLUMN_AGGREGATION: 'Totalização',
+              TEKGRID_COLUMN_LABEL: 'Rótulo',
+              TEKGRID_COLUMN_ALIGNMENT: 'Alinhamento',
+              TEKGRID_COLUMN_GROUP_OPENED: 'Aberto (grupo)',
+              TEKGRID_COLUMN_ORDER: 'Ordem',
+              TEKGRID_COLUMN_ORDER_DIRECTION: 'Direção (ordem)',
+              TEKGRID_AGGREGATION_SUM: 'Soma',
+              TEKGRID_AGGREGATION_AVG: 'Média',
+              TEKGRID_AGGREGATION_MAX: 'Máximo',
+              TEKGRID_AGGREGATION_MIN: 'Mínimo',
+              TEKGRID_AGGREGATION_COUNT: 'Contador',
+              TEKGRID_MORE_OPTIONS: 'Mais opções',
+              TEKGRID_COLUMNS_OPTIONS: 'Configuração de colunas',
+              TEKGRID_CLOSE: 'Fechar',
+              TEKGRID_FIXED_COLUMNS: 'Colunas fixadas',
+              TEKGRID_VISIBLE_COLUMNS: 'Colunas visíveis',
+              TEKGRID_GROUPED_COLUMNS: 'Colunas agrupadas',
+              TEKGRID_ORDER: 'Ordem',
+              TEKGRID_OTHER_COLUMNS: 'Outras colunas',
+              TEKGRID_DROP_COLUMNS: 'Arraste colunas aqui',
+              TEKGRID_DETAILS_FOR: 'Detalhes para:',
+              TEKGRID_LEFT: 'Esquerda',
+              TEKGRID_CENTER: 'Centro',
+              TEKGRID_RIGHT: 'Direita',
+              TEKGRID_ASC: 'Crescente',
+              TEKGRID_DESC: 'Decrescente',
+              TEKGRID_SELECT_COLUMN: '(selecione uma ou mais colunas)',
+              TEKGRID_SELECT_ALL: 'Selecionar todas',
+              TEKGRID_HELPERVALUE_TODAY: 'Hoje',
+              TEKGRID_HELPERVALUE_TOMORROW: 'Amanhã',
+              TEKGRID_HELPERVALUE_YESTERDAY: 'Ontem',
+              TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 Dias',
+              TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 Dias',
+              TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana Atual',
+              TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mês Atual',
+              TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Ano Atual',
+              TEKGRID_WITH_GROUPS: '(Com grupos)',
+              TEKGRID_WITHOUT_GROUPS: '(Sem grupos)',
+              TEKGRID_GRID_MIRROR: '(Espelho do grid)',
+          },
+      },
+      'en-US': {
+          translation: {
+              TEKGRID_CONTAINS: 'contains',
+              TEKGRID_NOT_CONTAINS: 'does not contain',
+              TEKGRID_EQUALS: 'is equal to',
+              TEKGRID_NOT_EQUALS: 'is differente from',
+              TEKGRID_GREATER_THAN: 'is greater than',
+              TEKGRID_LESS_THAN: 'is less than',
+              TEKGRID_GREATER_THAN_EQUALS: 'is greater or equals to',
+              TEKGRID_LESS_THAN_EQUALS: 'is less or equals to',
+              TEKGRID_IN: 'is in',
+              TEKGRID_NOT_IN: 'is not in',
+              TEKGRID_BETWEEN: 'is between',
+              TEKGRID_AND: 'and',
+              TEKGRID_OR: 'or',
+              TEKGRID_ADD: 'Add',
+              TEKGRID_DELETE: 'Delete',
+              TEKGRID_REFRESH: 'Refresh',
+              TEKGRID_COLUMNS: 'Columns',
+              TEKGRID_SAVE: 'Save',
+              TEKGRID_CANCEL: 'Cancel',
+              TEKGRID_APPLY: 'Apply',
+              TEKGRID_FILTER: 'Filter',
+              TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
+              TEKGRID_EXPORT: 'Export',
+              TEKGRID_EXPORT_AS: 'Export as {{ type }}',
+              TEKGRID_COLUMN_VISIBLE: 'Visible',
+              TEKGRID_COLUMN_GROUPED: 'Grouped',
+              TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
+              TEKGRID_COLUMN_LABEL: 'Label',
+              TEKGRID_COLUMN_ALIGNMENT: 'Alignment',
+              TEKGRID_COLUMN_GROUP_OPENED: 'Opened (group)',
+              TEKGRID_COLUMN_ORDER: 'Order',
+              TEKGRID_COLUMN_ORDER_DIRECTION: 'Direction (order)',
+              TEKGRID_AGGREGATION_SUM: 'Sum',
+              TEKGRID_AGGREGATION_AVG: 'Average',
+              TEKGRID_AGGREGATION_MAX: 'Maximum',
+              TEKGRID_AGGREGATION_MIN: 'Minimum',
+              TEKGRID_AGGREGATION_COUNT: 'Count',
+              TEKGRID_MORE_OPTIONS: 'More options',
+              TEKGRID_COLUMNS_OPTIONS: 'Columns configuration',
+              TEKGRID_CLOSE: 'Close',
+              TEKGRID_FIXED_COLUMNS: 'Fixed columns',
+              TEKGRID_VISIBLE_COLUMNS: 'Visible columns',
+              TEKGRID_GROUPED_COLUMNS: 'Grouped columns',
+              TEKGRID_ORDER: 'Order',
+              TEKGRID_OTHER_COLUMNS: 'Other columns',
+              TEKGRID_DROP_COLUMNS: 'Drop columns here',
+              TEKGRID_DETAILS_FOR: 'Details for:',
+              TEKGRID_LEFT: 'Left',
+              TEKGRID_CENTER: 'Center',
+              TEKGRID_RIGHT: 'Right',
+              TEKGRID_ASC: 'Ascending',
+              TEKGRID_DESC: 'Descending',
+              TEKGRID_SELECT_COLUMN: '(select one or more columns)',
+              TEKGRID_SELECT_ALL: 'Select all',
+              TEKGRID_HELPERVALUE_TODAY: 'Today',
+              TEKGRID_HELPERVALUE_TOMORROW: 'Tomorrow',
+              TEKGRID_HELPERVALUE_YESTERDAY: 'Yesterday',
+              TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Last 7 Days',
+              TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Next 7 Days',
+              TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Current Week',
+              TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Current Month',
+              TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Current Year',
+              TEKGRID_WITH_GROUPS: '(With groups)',
+              TEKGRID_WITHOUT_GROUPS: '(No groups)',
+              TEKGRID_GRID_MIRROR: '(Grid mirror)',
+          },
+      },
+      'es-ES': {
+          translation: {
+              TEKGRID_CONTAINS: 'contiene',
+              TEKGRID_NOT_CONTAINS: 'no contiene',
+              TEKGRID_EQUALS: 'igual',
+              TEKGRID_NOT_EQUALS: 'es diferente de',
+              TEKGRID_GREATER_THAN: 'es mayor que',
+              TEKGRID_LESS_THAN: 'es menor que',
+              TEKGRID_GREATER_THAN_EQUALS: 'es mayor o igual que',
+              TEKGRID_LESS_THAN_EQUALS: 'es menor o igual que',
+              TEKGRID_IN: 'uno de los valores',
+              TEKGRID_NOT_IN: 'ninguno de los valores',
+              TEKGRID_BETWEEN: 'está entre',
+              TEKGRID_AND: 'e',
+              TEKGRID_OR: 'o',
+              TEKGRID_ADD: 'Añadir',
+              TEKGRID_DELETE: 'Eliminar',
+              TEKGRID_REFRESH: 'Actualizar',
+              TEKGRID_COLUMNS: 'Colunas',
+              TEKGRID_SAVE: 'Guardar',
+              TEKGRID_CANCEL: 'Cancelar',
+              TEKGRID_APPLY: 'Aplicar',
+              TEKGRID_FILTER: 'Filtro',
+              TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
+              TEKGRID_EXPORT: 'Exportar',
+              TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
+              TEKGRID_COLUMN_VISIBLE: 'Visible',
+              TEKGRID_COLUMN_GROUPED: 'Grupo',
+              TEKGRID_COLUMN_AGGREGATION: 'Totalización',
+              TEKGRID_COLUMN_LABEL: 'Etiqueta',
+              TEKGRID_COLUMN_ALIGNMENT: 'alineación',
+              TEKGRID_COLUMN_GROUP_OPENED: 'Abierto (grupo)',
+              TEKGRID_COLUMN_ORDER: 'Orden',
+              TEKGRID_COLUMN_ORDER_DIRECTION: 'Dirección (orden)',
+              TEKGRID_AGGREGATION_SUM: 'Suma',
+              TEKGRID_AGGREGATION_AVG: 'Media',
+              TEKGRID_AGGREGATION_MAX: 'Máximo',
+              TEKGRID_AGGREGATION_MIN: 'Mínimo',
+              TEKGRID_AGGREGATION_COUNT: 'Contar',
+              TEKGRID_MORE_OPTIONS: 'Mas opciones',
+              TEKGRID_COLUMNS_OPTIONS: 'Configuración de columna',
+              TEKGRID_CLOSE: 'Cerrar',
+              TEKGRID_FIXED_COLUMNS: 'Columnas fijas',
+              TEKGRID_VISIBLE_COLUMNS: 'Columnas visibles',
+              TEKGRID_GROUPED_COLUMNS: 'Columnas agrupadas',
+              TEKGRID_ORDER: 'Orden',
+              TEKGRID_OTHER_COLUMNS: 'Otras columnas',
+              TEKGRID_DROP_COLUMNS: 'Arrastra columnas aquí',
+              TEKGRID_DETAILS_FOR: 'Detalles para',
+              TEKGRID_LEFT: 'Izquierda',
+              TEKGRID_CENTER: 'Centro',
+              TEKGRID_RIGHT: 'Derecha',
+              TEKGRID_ASC: 'Creciente',
+              TEKGRID_DESC: 'Decreciente',
+              TEKGRID_SELECT_COLUMN: '(seleccione una o más columnas)',
+              TEKGRID_SELECT_ALL: 'Seleccionar todas',
+              TEKGRID_HELPERVALUE_TODAY: 'Hoy',
+              TEKGRID_HELPERVALUE_TOMORROW: 'Mañana',
+              TEKGRID_HELPERVALUE_YESTERDAY: 'Ayer',
+              TEKGRID_HELPERVALUE_LAST_7_DAYS: 'Últimos 7 días',
+              TEKGRID_HELPERVALUE_NEXT_7_DAYS: 'Próximos 7 días',
+              TEKGRID_HELPERVALUE_CURRENT_WEEK: 'Semana actual',
+              TEKGRID_HELPERVALUE_CURRENT_MONTH: 'Mes actual',
+              TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Año actual',
+              TEKGRID_WITH_GROUPS: '(Con grupos)',
+              TEKGRID_WITHOUT_GROUPS: '(No grupos)',
+              TEKGRID_GRID_MIRROR: '(Espejo de grid)',
+          },
+      },
+  });
 
-  class TekGridController {
+  class GridController {
       constructor(grid) {
           this.grid = grid;
       }
@@ -1292,572 +1550,713 @@
       }
   }
 
-  /* TekGrid Class */
-  class TekGrid extends common.GridEditable {
+  const DynamicFilterOperations = {
+      CONTAINS: true,
+      NOT_CONTAINS: true,
+      EQUALS: true,
+      NOT_EQUALS: true,
+      GREATER_THAN: true,
+      LESS_THAN: true,
+      GREATER_THAN_EQUALS: true,
+      LESS_THAN_EQUALS: true,
+      IN: true,
+      NOT_IN: true,
+      BETWEEN: true,
+  };
+  const DynamicFilterRelations = {
+      AND: true,
+      OR: true,
+  };
+
+  class TekRestDatasource extends core.RestDatasource {
       /**
-       * TekGrid class constructor
-       * @param props TekGrid properties
-       */
+       * Create new datasource
+       * @param props Datasource properties
+       */
       constructor(props) {
-          var _a;
-          super(Object.assign(Object.assign({}, props), { datasource: Object.assign(Object.assign({}, props.datasource), { lazyLoad: true }) }));
-          /* Grid Title */
-          this.title = '';
-          /* Show Add button */
-          this.addButton = false;
-          /* Show Delete button */
-          this.deleteButton = 'none';
-          /* Show Delete button */
-          this.actions = [];
-          /* Show Filter button */
-          this.filterButton = false;
-          /* Show Column Filter button */
-          this.columnFilterButton = false;
-          /* Show Columns button */
-          this.columnsButton = false;
-          /* Columns to be ignored on columns button */
-          this.columnsButtonIgnore = [];
-          /**
-           * Enables column dragging
-           * @public
-           */
-          this.dragColumns = true;
-          /**
-           * Enables column resizing
-           * @public
-           */
-          this.resizeColumns = true;
-          /**
-           * Enables layout saving
-           * @public
-           */
-          this.showLayoutOptions = true;
-          /**
-           * Show export button
-           */
-          this.showExport = false;
-          /**
-           * Show refresh button
-           */
-          this.showReload = true;
+          super(Object.assign(Object.assign({}, props), { lazyLoad: true }));
           /**
-           * Export config
+           * Dynamic Filter Operations
            */
-          this.exportConfig = [
-              {
-                  type: 'pdf',
-                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
-              },
-              {
-                  type: 'xls',
-                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
-              },
-              {
-                  type: 'csv',
-                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'CSV' }),
-              },
-          ];
-          this.exportConfigButtons = [];
+          this.dynamicFilterOperations = DynamicFilterOperations;
           /**
-           * Groups should be opened by default after building
+           * Dynamic Filter Relations
            */
-          this.groupsOpened = false;
+          this.dynamicFilterRelations = DynamicFilterRelations;
           /**
-           * Show Total summary
+           * Dynamic Filter applied flag
            */
-          this.showSummaryTotal = true;
-          this.groupColumnNames = [];
-          this.summaryColumns = [];
-          this.groupColumns = [];
-          this.groupedData = [];
-          this.toolbarSlotProps = false;
-          this.filterRelationsDatasource = core.DatasourceFactory.factory({
-              data: this.getFilterOptionsData('relations'),
-              loadAll: true,
-              translate: ['text'],
-          });
-          this.filterOperationsDatasource = core.DatasourceFactory.factory({
-              data: this.getFilterOptionsData('operations'),
-              loadAll: true,
-              translate: ['text'],
-          });
-          this.groups = [];
-          this.summary = {};
-          this.updateGrouping = debounce__default["default"]((lazyLoad = false) => {
-              this.updateGroupedData(lazyLoad);
-          }, 500);
-          this.title = this.getInitValue('title', props.title, this.title);
-          this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
-          this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
-          this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
-          this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
-          this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
-          this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
-          this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
-          this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
-          this.showLayoutOptions = this.getInitValue('showLayoutOptions', props.showLayoutOptions, this.showLayoutOptions);
-          this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
-          this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
-          this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
-          this.exportActions = props.exportActions || this.exportActions;
-          this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
-          this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
-          this.actions = props.actions || this.actions;
-          this.toolbarSlotProps = props.toolbarSlot !== undefined;
-          if (this.deleteButton === 'selection') {
-              this.selectable = true;
+          this.dynamicFilterApplied = '';
+          if (!this.watchUrl) {
+              this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+              this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
           }
+          this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
           this.createAccessors();
-          this.exportConfigButtons = this.getExportConfigButtons();
-          this.initGrouping((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad);
+          if (!this.lazyLoad) {
+              this.get();
+          }
       }
-      getExportConfigButtons() {
-          return this.exportConfig.map((config) => {
-              const { type, label, portrait = true, iconName, } = config;
-              const orientation = portrait ? 'portrait' : 'landscape';
-              return {
-                  label,
-                  iconName,
-                  name: `${this.name}_export_${type}_${orientation}`,
-                  component: 'ZdButton',
-                  flat: true,
-                  events: {
-                      click: () => this.getReport(type, portrait),
-                  },
-              };
+      updateReservedKeys() {
+          this.reservedKeys.dynamic_filter = true;
+          this.reservedKeys.search_join = true;
+      }
+      updateInternalProperties(datasource = {}) {
+          if (!this.watchUrl)
+              return;
+          this.updateReservedKeys();
+          super.updateInternalProperties(datasource);
+          const queryString = core.URL.getParsedQueryStringFromUrl();
+          this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
+          this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+      }
+      getEncodedParam(urlParam, datasourceParam = {}) {
+          return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+      }
+      getQueryStringValues() {
+          const values = super.getQueryStringValues();
+          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+              values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+          }
+          if (this.searchJoin && Object.keys(this.searchJoin).length) {
+              values.search_join = btoa(JSON.stringify(this.searchJoin));
+          }
+          return values;
+      }
+      getUrlQueryString() {
+          const superQueryString = super.getUrlQueryString();
+          const query = core.URL.getParsedQueryStringFromUrl();
+          let dynamicFilterQuerystring = '';
+          if (query.dynamic_filter) {
+              dynamicFilterQuerystring = `&${core.URL.getFormattedQueryString({
+                dynamic_filter: query.dynamic_filter,
+            })}`;
+          }
+          let searchJoinQuerystring = '';
+          if (query.search_join) {
+              searchJoinQuerystring = `&${core.URL.getFormattedQueryString({
+                search_join: query.search_join,
+            })}`;
+          }
+          return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
+      }
+      /**
+       * Adds a new dynamic filter position or replace if exists
+       * @param column Dynamic Filter column name
+       * @param value Dynamic Filter value
+       * @returns Promise with data collection
+       */
+      addDynamicFilter(column, value) {
+          if (this.isValidDynamicFilterValue(column, value)) {
+              this.dynamicFilter[column] = value;
+              return this.updateDynamicFilter();
+          }
+          return this.removeDynamicFilter(column);
+      }
+      /**
+       * Removes a dynamic filter position
+       * @param column Dynamic Filter column name
+       * @returns Promise with data collection
+       */
+      removeDynamicFilter(column) {
+          delete this.dynamicFilter[column];
+          return this.updateDynamicFilter();
+      }
+      /**
+       * Sets new dynamic filter value
+       * @param filter Dynamic Filter value
+       * @returns Promise with data collection
+       */
+      setDynamicFilter(filter) {
+          this.dynamicFilter = {};
+          Object.keys(filter).forEach((column) => {
+              if (this.isValidDynamicFilterValue(column, filter[column])) {
+                  this.dynamicFilter[column] = filter[column];
+              }
+              else {
+                  delete this.dynamicFilter[column];
+              }
           });
+          return this.updateDynamicFilter();
       }
-      onCreated() {
-          super.onCreated();
-          core.Loader.addController(`TekGridController_${this.componentId}`, new TekGridController(this));
-          if (!this.toolbarSlotProps)
-              this.createToolbarProps();
-          this.navigationKeyMapping.left = {
-              event: this.navigateLeft.bind(this),
-              stop: true,
-              active: true,
-          };
-          this.navigationKeyMapping.right = {
-              event: this.navigateRight.bind(this),
-              stop: true,
-              active: true,
-          };
+      /**
+       * Clears Dynamic filter value
+       * @returns Promise with data collection
+       */
+      clearDynamicFilter() {
+          this.dynamicFilter = {};
+          return this.updateDynamicFilter();
       }
       /**
-       * Get Grid columns objects
-       * @param columns Grid columns parameter
+       * Resets page and selected rows and tries to update the url
+       * @returns Promise with data collection
        */
-      getColumns(columns) {
-          return columns.map((column) => new TekGridColumn(column, this));
+      updateDynamicFilter() {
+          return __awaiter(this, void 0, void 0, function* () {
+              this.page = this.firstPage;
+              this.selectedRows = [];
+              this.visibleSelectedRows = [];
+              if (this.watchUrl) {
+                  if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+                      core.URL.updateQueryString({
+                          dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
+                      });
+                  }
+                  else {
+                      core.URL.updateQueryString({
+                          dynamic_filter: undefined,
+                      });
+                  }
+              }
+              return this.get();
+          });
       }
-      createToolbarProps() {
-          this.toolbarSlot = [
-              {
-                  name: `${this.name}_gridTitle`,
-                  component: 'ZdText',
-                  cssClass: 'toolbar-title',
-                  tag: 'h2',
-                  text: this.title,
-                  title: this.title,
-              },
-              {
-                  name: `${this.name}_spacer`,
-                  component: 'VSpacer',
-              },
-              {
-                  name: `${this.name}_notEditingSpan`,
-                  component: 'ZdTag',
-                  tag: 'span',
-                  cssStyle: 'display: flex',
-                  isVisible: `{{TekGridController_${this.componentId}.isNotEditing}}`,
-                  children: [
-                      {
-                          name: `${this.name}_add_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_ADD',
-                          bottom: true,
-                          children: [
-                              {
-                                  name: `${this.name}_addButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'add',
-                                  isVisible: `{{TekGridController_${this.componentId}.showAddButton}}`,
-                                  events: {
-                                      click: this.addButtonClick.bind(this),
-                                  },
-                              },
-                          ],
-                      },
-                      {
-                          name: `${this.name}_delete_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_DELETE',
-                          bottom: true,
-                          children: [
-                              {
-                                  name: `${this.name}_deleteButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'delete',
-                                  isVisible: `{{TekGridController_${this.componentId}.showDeleteButton}}`,
-                                  disabled: `{{TekGridController_${this.componentId}.disableDeleteButton}}`,
-                                  events: {
-                                      click: this.deleteButtonClick.bind(this),
-                                  },
-                              },
-                          ],
-                      },
-                      {
-                          name: `${this.name}_divider1`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{TekGridController_${this.componentId}.showFirstDivider}}`,
-                      },
-                      {
-                          name: `${this.name}_refresh_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_REFRESH',
-                          bottom: true,
-                          children: [
-                              {
-                                  name: `${this.name}_refreshButton`,
-                                  component: 'ZdButton',
-                                  icon: true,
-                                  iconName: 'refresh',
-                                  isVisible: this.showReload,
-                                  events: {
-                                      click: this.reloadGrid.bind(this),
-                                  },
-                              },
-                          ],
-                      },
-                      {
-                          name: `${this.name}_divider2`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{TekGridController_${this.componentId}.showLayoutOptions}`,
-                      },
-                      {
-                          name: `${this.name}_columns_button_tooltip`,
-                          component: 'ZdTooltip',
-                          label: 'TEKGRID_COLUMNS',
-                          bottom: true,
-                          children: [
-                              {
-                                  name: `${this.name}_columnsButton`,
-                                  component: 'TekGridColumnsButton',
-                                  isVisible: `{{TekGridController_${this.componentId}.showColumnsButton}}`,
-                                  iterableComponentName: this.name,
-                                  ignoreColumns: `{{TekGridController_${this.componentId}.columnsButtonIgnore}}`,
-                              },
-                          ],
-                      },
-                      {
-                          name: `${this.name}_layout_options`,
-                          component: 'TekGridLayoutOptions',
-                          isVisible: `{{TekGridController_${this.componentId}.showLayoutOptions}}`,
-                      },
-                      {
-                          name: `${this.name}_dividerActions`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                          isVisible: `{{TekGridController_${this.componentId}.showActionAndExportButton}}`,
-                      },
-                      {
-                          name: `${this.name}_export_dropdown`,
-                          component: 'ZdDropdown',
-                          cssClass: 'tekgrid-actions-dropdown',
-                          offsetY: true,
-                          activator: {
-                              name: `${this.name}_exportButton`,
-                              component: 'ZdButton',
-                              icon: true,
-                              iconName: 'fileDownload',
-                              isVisible: `{{TekGridController_${this.componentId}.showExportButton}}`,
-                          },
-                          children: this.exportActions || this.exportConfigButtons,
-                      },
-                      {
-                          name: `${this.name}_actions_dropdown`,
-                          component: 'ZdDropdown',
-                          cssClass: 'tekgrid-actions-dropdown',
-                          offsetY: true,
-                          activator: {
-                              name: `${this.name}_actionsButton`,
-                              component: 'ZdButton',
-                              icon: true,
-                              iconName: 'more',
-                              isVisible: `{{TekGridController_${this.componentId}.showActionsButton}}`,
-                          },
-                          children: this.actions,
-                      },
-                      {
-                          name: `${this.name}_divider3`,
-                          component: 'ZdDivider',
-                          cssClass: 'toolbar-divider',
-                          vertical: true,
-                      },
-                  ],
-              },
-              {
-                  name: `${this.name}_saveButton`,
-                  component: 'ZdButton',
-                  label: 'TEKGRID_SAVE',
-                  isVisible: `{{TekGridController_${this.componentId}.isEditing}}`,
-                  small: true,
-                  events: {
-                      click: this.saveChanges.bind(this),
-                  },
-              },
-              {
-                  name: `${this.name}_cancelButton`,
-                  component: 'ZdButton',
-                  label: 'TEKGRID_CANCEL',
-                  outline: true,
-                  cssClass: 'zd-mx-2',
-                  isVisible: `{{TekGridController_${this.componentId}.isEditing}}`,
-                  small: true,
-                  events: {
-                      click: this.cancelChanges.bind(this),
-                  },
-              },
-              {
-                  name: `${this.name}_gridSearch`,
-                  component: 'ZdSearch',
-              },
-              {
-                  name: `${this.name}_filter_tooltip`,
-                  component: 'ZdTooltip',
-                  label: 'TEKGRID_FILTER',
-                  bottom: true,
-                  children: [
-                      {
-                          name: `${this.name}_filterButton`,
-                          component: 'ZdButton',
-                          icon: true,
-                          iconName: 'filter',
-                          isVisible: `{{TekGridController_${this.componentId}.showFilterButton}}`,
-                          events: {
-                              click: this.filterClick.bind(this),
-                          },
-                      },
-                  ],
-              },
-          ];
+      /**
+       * Checks if a filter value is valid
+       * @param value Filter value
+       * @returns Is valid filter value
+       */
+      isValidDynamicFilterValue(column, value) {
+          return !this.reservedKeys[column]
+              && value
+              && value.length > 0
+              && value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation]
+                  && this.dynamicFilterRelations[filterValue.relation]
+                  && filterValue.value !== '' && filterValue.value !== null);
       }
-      saveChanges({ event }) {
-          if (this.events.beforeSave) {
-              this.events.beforeSave({ component: this, event });
+      /**
+       * Retrieves request params
+       */
+      getRequestParams() {
+          const requestParams = super.getRequestParams();
+          const isNotEmptyObj = (obj) => !!(obj && Object.keys(obj).length);
+          const isValid = this.dynamicFilter && Object.keys(this.dynamicFilter).every((column) => {
+              const value = this.dynamicFilter[column];
+              return value && value.length > 0 && this.isValidDynamicFilterValue(column, value);
+          });
+          if (isNotEmptyObj(this.dynamicFilter) && isValid) {
+              requestParams.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
           }
-          if (!event.defaultPrevented) {
-              this.saveEditedRows();
-              if (this.events.afterSave) {
-                  this.events.afterSave({ component: this });
+          if (isNotEmptyObj(this.searchJoin)) {
+              requestParams.search_join = btoa(JSON.stringify(this.searchJoin));
+          }
+          return requestParams;
+      }
+      clone() {
+          return Object.assign(Object.assign({}, super.clone()), { dynamicFilter: this.dynamicFilter, searchJoin: this.searchJoin, type: 'tek-rest' });
+      }
+  }
+  core.DatasourceFactory.register('tek-rest', TekRestDatasource);
+
+  class TekMemoryDatasource extends core.MemoryDatasource {
+      /**
+       * Create new datasource
+       * @param props Datasource properties
+       */
+      constructor(props) {
+          super(props);
+          /**
+           * Dynamic Filter Operations
+           */
+          this.dynamicFilterOperations = DynamicFilterOperations;
+          /**
+           * Dynamic Filter Relations
+           */
+          this.dynamicFilterRelations = DynamicFilterRelations;
+          /**
+           * Dynamic Filter applied flag
+           */
+          this.dynamicFilterApplied = '';
+          if (!this.watchUrl) {
+              this.dynamicFilter = this.getInitValue('dynamicFilter', props.dynamicFilter, {});
+              this.searchJoin = this.getInitValue('searchJoin', props.searchJoin, {});
+          }
+          this.createAccessors();
+          this.get();
+      }
+      updateReservedKeys() {
+          this.reservedKeys.dynamic_filter = true;
+          this.reservedKeys.search_join = true;
+      }
+      updateInternalProperties(datasource = {}) {
+          if (!this.watchUrl)
+              return;
+          this.updateReservedKeys();
+          super.updateInternalProperties(datasource);
+          const queryString = core.URL.getParsedQueryStringFromUrl();
+          this.dynamicFilter = this.getEncodedParam(queryString.dynamic_filter, datasource.dynamicFilter);
+          this.searchJoin = this.getEncodedParam(queryString.search_join, datasource.searchJoin);
+      }
+      getEncodedParam(urlParam, datasourceParam = {}) {
+          return urlParam ? JSON.parse(atob(urlParam)) : datasourceParam;
+      }
+      getQueryStringValues() {
+          const values = super.getQueryStringValues();
+          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+              values.dynamic_filter = btoa(JSON.stringify(this.dynamicFilter));
+          }
+          if (this.searchJoin && Object.keys(this.searchJoin).length) {
+              values.search_join = btoa(JSON.stringify(this.searchJoin));
+          }
+          return values;
+      }
+      getUrlQueryString() {
+          const superQueryString = super.getUrlQueryString();
+          const query = core.URL.getParsedQueryStringFromUrl();
+          let dynamicFilterQuerystring = '';
+          if (query.dynamic_filter) {
+              dynamicFilterQuerystring = `&${core.URL.getFormattedQueryString({
+                dynamic_filter: query.dynamic_filter,
+            })}`;
+          }
+          let searchJoinQuerystring = '';
+          if (query.search_join) {
+              searchJoinQuerystring = `&${core.URL.getFormattedQueryString({
+                search_join: query.search_join,
+            })}`;
+          }
+          return superQueryString + dynamicFilterQuerystring + searchJoinQuerystring;
+      }
+      /**
+       * Adds a new dynamic filter position or replace if exists
+       * @param column Dynamic Filter column name
+       * @param value Dynamic Filter value
+       * @returns Promise with data collection
+       */
+      addDynamicFilter(column, value) {
+          if (this.isValidDynamicFilterValue(column, value)) {
+              this.dynamicFilter[column] = value;
+              return this.updateDynamicFilter();
+          }
+          return this.removeDynamicFilter(column);
+      }
+      /**
+       * Removes a dynamic filter position
+       * @param column Dynamic Filter column name
+       * @returns Promise with data collection
+       */
+      removeDynamicFilter(column) {
+          delete this.dynamicFilter[column];
+          return this.updateDynamicFilter();
+      }
+      /**
+       * Sets new dynamic filter value
+       * @param filter Dynamic Filter value
+       * @returns Promise with data collection
+       */
+      setDynamicFilter(filter) {
+          this.dynamicFilter = {};
+          Object.keys(filter).forEach((column) => {
+              if (this.isValidDynamicFilterValue(column, filter[column])) {
+                  this.dynamicFilter[column] = filter[column];
               }
-          }
-      }
-      cancelChanges({ event }) {
-          if (this.events.beforeCancel) {
-              this.events.beforeCancel({ component: this, event });
-          }
-          if (!event.defaultPrevented) {
-              this.cancelEditedRows();
-              if (this.events.afterCancel) {
-                  this.events.afterCancel({ component: this });
+              else {
+                  delete this.dynamicFilter[column];
               }
-          }
+          });
+          return this.updateDynamicFilter();
       }
-      addButtonClick({ event }) {
-          if (this.events.addClick) {
-              this.events.addClick({ component: this, event });
-          }
+      /**
+       * Clears Dynamic filter value
+       * @returns Promise with data collection
+       */
+      clearDynamicFilter() {
+          this.dynamicFilter = {};
+          return this.updateDynamicFilter();
       }
-      deleteButtonClick({ event }) {
-          if (this.events.beforeDelete) {
-              this.events.beforeDelete({ component: this, event });
-          }
-          if (!event.defaultPrevented) {
-              this.deleteRows();
-              if (this.events.afterDelete) {
-                  this.events.afterDelete({ component: this });
+      /**
+       * Resets page and selected rows and tries to update the url
+       * @returns Promise with data collection
+       */
+      updateDynamicFilter() {
+          return __awaiter(this, void 0, void 0, function* () {
+              this.page = this.firstPage;
+              this.selectedRows = [];
+              this.visibleSelectedRows = [];
+              if (this.watchUrl) {
+                  if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+                      core.URL.updateQueryString({
+                          dynamic_filter: btoa(JSON.stringify(this.dynamicFilter)),
+                      });
+                  }
+                  else {
+                      core.URL.updateQueryString({
+                          dynamic_filter: undefined,
+                      });
+                  }
               }
-          }
+              return this.get();
+          });
       }
-      reloadGrid() {
-          this.reload();
+      /**
+       * Checks if a filter value is valid
+       * @param value Filter value
+       * @returns Is valid filter value
+       */
+      isValidDynamicFilterValue(column, value) {
+          return !this.reservedKeys[column]
+              && value
+              && value.length > 0
+              && value.every((filterValue) => this.dynamicFilterOperations[filterValue.operation]
+                  && this.dynamicFilterRelations[filterValue.relation]
+                  && filterValue.value !== '' && filterValue.value !== null);
       }
-      filterClick({ event }) {
-          if (this.events.filterClick) {
-              this.events.filterClick({ event, component: this });
-          }
-          if (!event.defaultPrevented) {
-              this.createFilterFromColumns();
-          }
+      clone() {
+          return Object.assign(Object.assign({}, super.clone()), { dynamicFilter: this.dynamicFilter, searchJoin: this.searchJoin, type: 'tek-memory' });
       }
-      createFilterFromColumns() {
-          if (!this.filterModal) {
-              const filterModalDef = {
-                  name: `${this.name}-filter-modal`,
-                  persistent: true,
-                  children: [
-                      {
-                          name: `${this.name}-filter-modal-header`,
-                          component: 'ZdHeader',
-                          color: 'transparent',
-                          padless: true,
-                          elevation: 0,
-                          leftSlot: [
-                              {
-                                  name: `${this.name}-filter-title`,
-                                  component: 'ZdText',
-                                  text: 'FILTER',
-                                  tag: 'h3',
-                              },
-                          ],
-                          rightSlot: [
-                              {
-                                  name: `${this.name}-filter-close-button`,
-                                  component: 'ZdModalCloseButton',
-                                  small: true,
-                                  modalName: `${this.name}-filter-modal`,
-                              },
-                          ],
-                      },
-                      {
-                          name: `${this.name}-filter-form`,
-                          component: 'ZdForm',
-                          cssClass: 'zd-my-4',
-                          children: this.getFilterModalComponents(),
-                          events: {
-                              onMounted: this.loadFilterValues.bind(this),
-                          },
-                      },
-                      {
-                          name: `${this.name}-filter-footer`,
-                          component: 'ZdFooter',
-                          color: 'transparent',
-                          padless: true,
-                          rightSlot: [
-                              {
-                                  name: `${this.name}-filter-cancelButton`,
-                                  component: 'ZdButton',
-                                  label: 'CANCEL',
-                                  outline: true,
-                                  events: {
-                                      click: this.hideFilterModal.bind(this),
-                                  },
-                              },
-                              {
-                                  name: `${this.name}-filter-okButton`,
-                                  component: 'ZdButton',
-                                  label: 'OK',
-                                  events: {
-                                      click: this.applyFilter.bind(this),
-                                  },
-                              },
-                          ],
-                      },
-                  ],
-              };
-              this.filterModal = common.ModalService.create(filterModalDef);
+      /**
+       * Updates filtered data
+       */
+      updateFilteredData() {
+          super.updateFilteredData();
+          if (this.dynamicFilter && Object.keys(this.dynamicFilter).length) {
+              this.filteredData = this.filteredData.filter((row) => this.getRowByDynamicFilter(row));
+          }
+          if (this.searchJoin && Object.keys(this.searchJoin).length) {
+              this.filteredData = this.filteredData.filter((row) => this.getRowBySearchJoin(row));
           }
-          this.filterModal.show();
-      }
-      hideFilterModal() {
-          this.filterModal.hide();
       }
-      getFilterModalComponents() {
-          const filterColumns = [];
-          this.columns.forEach((column) => {
-              const filterProps = Array.isArray(column.filterProps) ? column.filterProps : [column.filterProps];
-              if (column.filterable && filterProps && filterProps.length > 0) {
-                  filterProps.forEach((filterItem) => {
-                      if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
-                          const relation = filterItem.relation || 'AND';
-                          const operation = filterItem.operation || 'CONTAINS';
-                          filterColumns.push(Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: `${this.name}-filter-${relation}-${operation}-${column.name}` }));
+      getRowByDynamicFilter(row) {
+          let filtered;
+          Object.keys(this.dynamicFilter).forEach((key) => {
+              const filterItems = this.dynamicFilter[key];
+              filterItems.forEach((item) => {
+                  if (filtered === false && item.relation === 'AND')
+                      return;
+                  if (filtered === true && item.relation === 'OR')
+                      return;
+                  const columnValue = core.normalize(row[key].toString());
+                  let value = '';
+                  if (Array.isArray(item.value)) {
+                      value = item.value.map((val) => core.normalize(val.toString()));
+                      switch (item.operation) {
+                          case 'IN':
+                              filtered = value.includes(columnValue);
+                              break;
+                          case 'NOT_IN':
+                              filtered = !value.includes(columnValue);
+                              break;
+                          case 'BETWEEN':
+                              filtered = (Number(columnValue) || columnValue) >= (Number(value[0]) || value[0])
+                                  && (Number(columnValue) || columnValue) <= (Number(value[1]) || value[1]);
+                              break;
                       }
-                      else {
-                          filterColumns.push(Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: `${this.name}-filter-AND-CONTAINS-${column.name}` }));
+                  }
+                  else {
+                      value = core.normalize(item.value.toString());
+                      switch (item.operation) {
+                          case 'CONTAINS':
+                              filtered = columnValue.indexOf(value) !== -1;
+                              break;
+                          case 'NOT_CONTAINS':
+                              filtered = columnValue.indexOf(value) === -1;
+                              break;
+                          case 'EQUALS':
+                              filtered = columnValue === value;
+                              break;
+                          case 'NOT_EQUALS':
+                              filtered = columnValue !== value;
+                              break;
+                          case 'GREATER_THAN':
+                              filtered = (Number(columnValue) || columnValue) > (Number(value) || value);
+                              break;
+                          case 'LESS_THAN':
+                              filtered = (Number(columnValue) || columnValue) < (Number(value) || value);
+                              break;
+                          case 'GREATER_THAN_EQUALS':
+                              filtered = (Number(columnValue) || columnValue) >= (Number(value) || value);
+                              break;
+                          case 'LESS_THAN_EQUALS':
+                              filtered = (Number(columnValue) || columnValue) <= (Number(value) || value);
+                              break;
                       }
-                  });
+                  }
+              });
+          });
+          return filtered;
+      }
+      getRowBySearchJoin(row) {
+          return Object.keys(this.searchJoin).some((key) => this.searchJoin[key].includes(row[key]));
+      }
+  }
+  core.DatasourceFactory.register('tek-memory', TekMemoryDatasource);
+
+  /**
+   * Base class for TekGrid column
+   */
+  class TekGridColumn extends common.GridColumnEditable {
+      /* istanbul ignore next */
+      /**
+       * Creates a new TekGrid Column.
+       * @param props TekGrid column properties
+       */
+      constructor(props, grid) {
+          super(props);
+          /* filter component props */
+          this.filterProps = [];
+          /* column can be use to filter */
+          this.filterable = true;
+          /* column is fixed */
+          this.fixed = false;
+          /* column is grouped */
+          this.groupedValue = false;
+          /* Value to show when grouped value is empty */
+          this.groupLabelForEmptyValue = '';
+          /* column is visible */
+          this.isVisibleValue = true;
+          /**
+           * Defines if the column should store the componentProps datasource.data in memory
+           */
+          this.storeData = true;
+          this.lookup = debounce__default["default"]((lookupColumn) => __awaiter(this, void 0, void 0, function* () {
+              var _a, _b;
+              let data = [];
+              if (this.storeData) {
+                  data = yield ((_a = this.lookupDatasource) === null || _a === void 0 ? void 0 : _a.get());
+              }
+              else {
+                  const dataToLookup = Array.from(new Set(this.dataToLookup)); // remove duplicates
+                  this.dataToLookup = [];
+                  data = yield ((_b = this.lookupDatasource) === null || _b === void 0 ? void 0 : _b.addFilter(lookupColumn, dataToLookup));
+              }
+              data.forEach((row) => {
+                  this.lookupData[row[lookupColumn]] = row;
+              });
+              this.lookupDataCount += 1;
+          }), 100);
+          this.grid = grid;
+          this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
+          this.filterProps = this.getInitValue('filterProps', props.filterProps, this.filterProps);
+          this.filterable = this.getInitValue('filterable', props.filterable, this.filterable);
+          this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
+          this.grouped = this.getInitValue('grouped', props.grouped, this.grouped);
+          this.groupOpened = this.getInitValue('groupOpened', props.groupOpened, this.groupOpened);
+          this.aggregation = this.getInitValue('aggregation', props.aggregation, this.aggregation);
+          this.groupLabelForEmptyValue = this.getInitValue('groupLabelForEmptyValue', props.groupLabelForEmptyValue, this.groupLabelForEmptyValue);
+          this.storeData = this.getInitValue('storeData', props.storeData, this.storeData);
+          this.createAccessors();
+      }
+      getLookupData(lookupColumn, value) {
+          const emptyRow = {};
+          if (this.lookupData[value]) {
+              return this.lookupData[value];
+          }
+          this.lookupData[value] = emptyRow;
+          const dataIndex = this.lookupDatasource.data.findIndex((row) => row[lookupColumn] === value);
+          if (dataIndex !== -1) {
+              this.lookupData[value] = this.lookupDatasource.data[dataIndex];
+              return this.lookupData[value];
+          }
+          this.dataToLookup = (this.dataToLookup || []);
+          this.dataToLookup.push(value);
+          this.lookup(lookupColumn);
+          return emptyRow;
+      }
+      /**
+       * Memory search, without changing lookupDatasource
+       */
+      memorySearch(search) {
+          return __awaiter(this, void 0, void 0, function* () {
+              if (!this.lookupDatasource) {
+                  throw new Error('Can\'t search in a column that doesn\'t have a datasource');
+              }
+              let { data } = this.lookupDatasource;
+              if (this.storeData) {
+                  if (!data.length) {
+                      data = yield this.lookupDatasource.get();
+                  }
+              }
+              else {
+                  // datasource without the lookup filters
+                  const defaultDs = core.DatasourceFactory.factory(Object.assign(Object.assign({}, this.componentProps.datasource), { lazyLoad: true, loadAll: true }));
+                  data = yield defaultDs.get();
               }
+              const { dataText } = this.componentProps;
+              const searchIn = Array.isArray(dataText) ? dataText : [dataText];
+              // get datasource as memory
+              const datasource = core.DatasourceFactory.factory({
+                  searchIn,
+                  data,
+                  type: 'memory',
+                  loadAll: true,
+              });
+              return datasource.setSearch(search);
           });
-          return filterColumns;
       }
-      loadFilterValues({ component }) {
-          if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
-              const { dynamicFilter } = this.datasource;
-              Object.keys(dynamicFilter).forEach((column) => {
-                  if (dynamicFilter[column] && dynamicFilter[column].length > 0) {
-                      dynamicFilter[column].forEach((filterItem) => {
-                          const relation = filterItem.relation || 'AND';
-                          const operation = filterItem.operation || 'CONTAINS';
-                          const compName = `${this.name}-filter-${relation}-${operation}-${column}`;
-                          component.value[compName] = filterItem.value;
-                      });
-                  }
-              });
+      get grouped() {
+          return this.groupedValue;
+      }
+      set grouped(value) {
+          const changed = value !== this.groupedValue;
+          this.groupedValue = value;
+          if (changed) {
+              this.changeGrouping();
           }
-          else {
-              const { filter } = this.datasource;
-              Object.keys(filter).forEach((item) => {
-                  if (filter[item]) {
-                      component.value[`${this.name}-filter-AND-CONTAINS-${item}`] = filter[item];
-                  }
-              });
+      }
+      get aggregation() {
+          return this.aggregationValue;
+      }
+      set aggregation(value) {
+          const changed = value !== this.aggregationValue;
+          this.aggregationValue = value;
+          if (changed) {
+              this.changeGrouping();
           }
       }
-      applyFilter({ event }) {
-          const filterForm = core.Metadata.getInstance(`${this.name}-filter-form`);
-          if (filterForm.validate()) {
-              if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
-                  const dynamicFilter = {};
-                  Object.keys(filterForm.value).forEach((item) => {
-                      if (filterForm.value[item]) {
-                          const relationAndOperationAndName = item.split(`${this.name}-filter-`)[1];
-                          const [relation, operation] = relationAndOperationAndName.split('-');
-                          const columnName = relationAndOperationAndName.split(`${relation}-${operation}-`)[1];
-                          if (!dynamicFilter[columnName]) {
-                              dynamicFilter[columnName] = [];
-                          }
-                          let value = filterForm.value[item];
-                          if (['IN', 'NOT_IN', 'BETWEEN'].includes(operation) && !Array.isArray(value)) {
-                              value = value.split(';').map((valueItem) => valueItem.trim());
-                          }
-                          dynamicFilter[columnName].push({
-                              relation,
-                              operation,
-                              value,
-                          });
-                      }
-                  });
-                  this.datasource.dynamicFilter = dynamicFilter;
-              }
-              else {
-                  Object.keys(filterForm.value).forEach((item) => {
-                      const columnName = item.split(`${this.name}-filter-AND-CONTAINS-`)[1];
-                      if (filterForm.value[item]) {
-                          this.datasource.filter[columnName] = filterForm.value[item];
-                      }
-                      else {
-                          delete this.datasource.filter[columnName];
-                      }
-                  });
-              }
-              if (this.events.beforeApplyFilter) {
-                  this.events.beforeApplyFilter({ event, component: this });
-              }
-              if (!event.defaultPrevented) {
-                  this.datasource.get();
-                  this.filterModal.hide();
-              }
-              this.changeLayout(event);
+      get isVisible() {
+          return this.isVisibleValue && !this.grouped;
+      }
+      set isVisible(value) {
+          this.isVisibleValue = value;
+      }
+      changeGrouping() {
+          // wait for grid.constructor to be fully executed
+          setTimeout(() => {
+              this.grid.updateGrouping();
+          });
+      }
+  }
+
+  /* TekGrid Class */
+  class TekGrid extends common.GridEditable {
+      /**
+       * TekGrid class constructor
+       * @param props TekGrid properties
+       */
+      constructor(props) {
+          var _a;
+          super(Object.assign(Object.assign({}, props), { datasource: Object.assign(Object.assign({}, props.datasource), { lazyLoad: true }) }));
+          /* Grid Title */
+          this.title = '';
+          /* Show Add button */
+          this.addButton = false;
+          /* Show Delete button */
+          this.deleteButton = 'none';
+          /* Show Delete button */
+          this.actions = [];
+          /* Show Filter button */
+          this.filterButton = false;
+          /* Show Column Filter button */
+          this.columnFilterButton = false;
+          /* Show Columns button */
+          this.columnsButton = false;
+          /* Columns to be ignored on columns button */
+          this.columnsButtonIgnore = [];
+          /**
+           * Enables column dragging
+           * @public
+           */
+          this.dragColumns = true;
+          /**
+           * Enables column resizing
+           * @public
+           */
+          this.resizeColumns = true;
+          /**
+           * Enables layout saving
+           * @public
+           */
+          this.showLayoutOptions = true;
+          /**
+           * Show export button
+           */
+          this.showExport = false;
+          /**
+           * Show refresh button
+           */
+          this.showReload = true;
+          /**
+           * Export config
+           */
+          this.exportConfig = [
+              {
+                  type: 'pdf',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+              },
+              {
+                  type: 'xls',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: `XLS ${core.I18n.translate('TEKGRID_WITHOUT_GROUPS')}` }),
+              },
+              {
+                  type: 'xls2',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: `XLS ${core.I18n.translate('TEKGRID_WITH_GROUPS')}` }),
+              },
+              {
+                  type: 'xls3',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: `XLS ${core.I18n.translate('TEKGRID_GRID_MIRROR')}` }),
+              },
+              {
+                  type: 'csv',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'CSV' }),
+              },
+          ];
+          /**
+           * Groups should be opened by default after building
+           */
+          this.groupsOpened = false;
+          /**
+           * Show Total summary
+           */
+          this.showSummaryTotal = true;
+          this.groupColumnNames = [];
+          this.summaryColumns = [];
+          this.groupColumns = [];
+          this.groupedData = [];
+          this.toolbarSlotProps = false;
+          this.groups = [];
+          this.summary = {};
+          this.updateGrouping = debounce__default["default"]((lazyLoad = false) => {
+              this.updateGroupedData(lazyLoad);
+          }, 500);
+          this.title = this.getInitValue('title', props.title, this.title);
+          this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
+          this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
+          this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+          this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
+          this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
+          this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
+          this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
+          this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+          this.showLayoutOptions = this.getInitValue('showLayoutOptions', props.showLayoutOptions, this.showLayoutOptions);
+          this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
+          this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
+          this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+          this.exportActions = props.exportActions || this.exportActions;
+          this.groupsOpened = this.getInitValue('groupsOpened', props.groupsOpened, this.groupsOpened);
+          this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
+          this.actions = props.actions || this.actions;
+          this.toolbarSlotProps = props.toolbarSlot !== undefined;
+          if (this.deleteButton === 'selection') {
+              this.selectable = true;
           }
+          this.gridBase = new GridBase(this);
+          this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
+          this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
+          this.createAccessors();
+          this.initGrouping((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.lazyLoad);
+      }
+      onCreated() {
+          super.onCreated();
+          core.Loader.addController(`GridController_${this.componentId}`, new GridController(this));
+          if (!this.toolbarSlotProps)
+              this.toolbarSlot = this.gridBase.createToolbarProps();
+          this.navigationKeyMapping.left = {
+              event: this.navigateLeft.bind(this),
+              stop: true,
+              active: true,
+          };
+          this.navigationKeyMapping.right = {
+              event: this.navigateRight.bind(this),
+              stop: true,
+              active: true,
+          };
+      }
+      /**
+       * Get Grid columns objects
+       * @param columns Grid columns parameter
+       */
+      getColumns(columns) {
+          return columns.map((column) => new TekGridColumn(column, this));
       }
       columnHasFilterData(column) {
           if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
@@ -1866,22 +2265,6 @@
           }
           return this.datasource.filter[column.name];
       }
-      getFilterOptionsData(prop) {
-          if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
-              let options;
-              if (prop === 'relations') {
-                  options = Object.keys(this.datasource.dynamicFilterRelations);
-              }
-              else {
-                  options = Object.keys(this.datasource.dynamicFilterOperations);
-              }
-              return options.map((item) => ({
-                  text: `TEKGRID_${item}`,
-                  value: item,
-              }));
-          }
-          return [];
-      }
       buildReportGroups() {
           return this.columns.filter((column) => column.grouped).map((column) => ({
               field: column.name,
@@ -1983,6 +2366,9 @@
                       groupBreak = true;
                   }
               });
+              this.groups.forEach((group) => {
+                  group.lastGroupHeaderRow.children.push(row);
+              });
               this.groupedData.push(Object.assign(Object.assign({}, row), { groupHeaders: this.groups.map((group) => group.lastGroupHeaderRow).filter(Boolean) }));
               this.calcSummary(row);
           });
@@ -2024,6 +2410,7 @@
               groupValue,
               groupOpened: group.column.groupOpened || this.groupsOpened,
               groupHeaders: [],
+              children: [],
           };
           // add header for outer groups to the added row
           for (let i = 0; i < index; i += 1) {
@@ -2144,29 +2531,16 @@
           const groupValue = groupColumn.formatterByRow(row, cellProps);
           return groupValue;
       }
-      getEditedRows() {
-          return super.getEditedRows().map((row) => {
-              const cleanRow = Object.assign({}, row);
-              delete cleanRow.groupHeaders;
-              return cleanRow;
-          });
-      }
-      setSearch(search) {
-          return __awaiter(this, void 0, void 0, function* () {
-              if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
-                  const lookupColumns = this.columns.filter((column) => !!column.componentProps.datasource);
-                  const searchJoin = {};
-                  if (search) {
-                      const promises = lookupColumns.map((column) => __awaiter(this, void 0, void 0, function* () {
-                          const searchData = yield column.memorySearch(search);
-                          const lookupId = column.componentProps.datasource.uniqueKey;
-                          searchJoin[column.name] = searchData.map((row) => row[lookupId]);
-                      }));
-                      yield Promise.all(promises);
-                  }
-                  this.datasource.searchJoin = searchJoin;
-              }
-              return this.datasource.setSearch(search);
+      getEditedRows() {
+          return super.getEditedRows().map((row) => {
+              const cleanRow = Object.assign({}, row);
+              delete cleanRow.groupHeaders;
+              return cleanRow;
+          });
+      }
+      setSearch(search) {
+          return __awaiter(this, void 0, void 0, function* () {
+              return this.gridBase.setSearch(search);
           });
       }
       isGrouped() {
@@ -2198,253 +2572,96 @@
       }
       navigateUp(params) {
           if (!this.isGrouped()) {
-              super.navigateUp();
-          }
-          else {
-              const { index } = params;
-              if (!this.groupedData.length || index === -1)
-                  return;
-              const { uniqueKey, currentRow } = this.datasource;
-              let rowIndex;
-              rowIndex = index !== undefined ? index : this.groupedData.findIndex((row) => {
-                  if (currentRow.group) {
-                      return row.group && row.groupValue === currentRow.groupValue;
-                  }
-                  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;
-      }
-  }
-  core.Messages.add({
-      'pt-BR': {
-          translation: {
-              TEKGRID_CONTAINS: 'contém',
-              TEKGRID_NOT_CONTAINS: 'não contém',
-              TEKGRID_EQUALS: 'é igual a',
-              TEKGRID_NOT_EQUALS: 'é diferente de',
-              TEKGRID_GREATER_THAN: 'é maior que',
-              TEKGRID_LESS_THAN: 'é menor que',
-              TEKGRID_GREATER_THAN_EQUALS: 'é maior ou igual a',
-              TEKGRID_LESS_THAN_EQUALS: 'é menor ou igual a',
-              TEKGRID_IN: 'um dos valores',
-              TEKGRID_NOT_IN: 'nenhum dos valores',
-              TEKGRID_BETWEEN: 'está entre',
-              TEKGRID_AND: 'e',
-              TEKGRID_OR: 'ou',
-              TEKGRID_ADD: 'Adicionar',
-              TEKGRID_DELETE: 'Excluir',
-              TEKGRID_REFRESH: 'Atualizar',
-              TEKGRID_COLUMNS: 'Colunas',
-              TEKGRID_SAVE: 'Salvar',
-              TEKGRID_CANCEL: 'Cancelar',
-              TEKGRID_APPLY: 'Aplicar',
-              TEKGRID_FILTER: 'Filtro',
-              TEKGRID_MULTIPLE_VALUE_HINT: 'Separe valores usando ";"',
-              TEKGRID_EXPORT: 'Exportar',
-              TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
-              TEKGRID_COLUMN_VISIBLE: 'Visível',
-              TEKGRID_COLUMN_GROUPED: 'Grupo',
-              TEKGRID_COLUMN_AGGREGATION: 'Totalização',
-              TEKGRID_COLUMN_LABEL: 'Rótulo',
-              TEKGRID_COLUMN_ALIGNMENT: 'Alinhamento',
-              TEKGRID_COLUMN_GROUP_OPENED: 'Aberto (grupo)',
-              TEKGRID_COLUMN_ORDER: 'Ordem',
-              TEKGRID_COLUMN_ORDER_DIRECTION: 'Direção (ordem)',
-              TEKGRID_AGGREGATION_SUM: 'Soma',
-              TEKGRID_AGGREGATION_AVG: 'Média',
-              TEKGRID_AGGREGATION_MAX: 'Máximo',
-              TEKGRID_AGGREGATION_MIN: 'Mínimo',
-              TEKGRID_AGGREGATION_COUNT: 'Contador',
-              TEKGRID_MORE_OPTIONS: 'Mais opções',
-              TEKGRID_COLUMNS_OPTIONS: 'Configuração de colunas',
-              TEKGRID_CLOSE: 'Fechar',
-              TEKGRID_FIXED_COLUMNS: 'Colunas fixadas',
-              TEKGRID_VISIBLE_COLUMNS: 'Colunas visíveis',
-              TEKGRID_GROUPED_COLUMNS: 'Colunas agrupadas',
-              TEKGRID_ORDER: 'Ordem',
-              TEKGRID_OTHER_COLUMNS: 'Outras colunas',
-              TEKGRID_DROP_COLUMNS: 'Arraste colunas aqui',
-              TEKGRID_DETAILS_FOR: 'Detalhes para:',
-              TEKGRID_LEFT: 'Esquerda',
-              TEKGRID_CENTER: 'Centro',
-              TEKGRID_RIGHT: 'Direita',
-              TEKGRID_ASC: 'Crescente',
-              TEKGRID_DESC: 'Decrescente',
-              TEKGRID_SELECT_COLUMN: '(selecione uma ou mais colunas)',
-              TEKGRID_SELECT_ALL: 'Selecionar todas',
-          },
-      },
-      'en-US': {
-          translation: {
-              TEKGRID_CONTAINS: 'contains',
-              TEKGRID_NOT_CONTAINS: 'does not contain',
-              TEKGRID_EQUALS: 'is equal to',
-              TEKGRID_NOT_EQUALS: 'is differente from',
-              TEKGRID_GREATER_THAN: 'is greater than',
-              TEKGRID_LESS_THAN: 'is less than',
-              TEKGRID_GREATER_THAN_EQUALS: 'is greater or equals to',
-              TEKGRID_LESS_THAN_EQUALS: 'is less or equals to',
-              TEKGRID_IN: 'is in',
-              TEKGRID_NOT_IN: 'is not in',
-              TEKGRID_BETWEEN: 'is between',
-              TEKGRID_AND: 'and',
-              TEKGRID_OR: 'or',
-              TEKGRID_ADD: 'Add',
-              TEKGRID_DELETE: 'Delete',
-              TEKGRID_REFRESH: 'Refresh',
-              TEKGRID_COLUMNS: 'Columns',
-              TEKGRID_SAVE: 'Save',
-              TEKGRID_CANCEL: 'Cancel',
-              TEKGRID_APPLY: 'Apply',
-              TEKGRID_FILTER: 'Filter',
-              TEKGRID_MULTIPLE_VALUE_HINT: 'Separate values using ";"',
-              TEKGRID_EXPORT: 'Export',
-              TEKGRID_EXPORT_AS: 'Export as {{ type }}',
-              TEKGRID_COLUMN_VISIBLE: 'Visible',
-              TEKGRID_COLUMN_GROUPED: 'Grouped',
-              TEKGRID_COLUMN_AGGREGATION: 'Aggregation',
-              TEKGRID_COLUMN_LABEL: 'Label',
-              TEKGRID_COLUMN_ALIGNMENT: 'Alignment',
-              TEKGRID_COLUMN_GROUP_OPENED: 'Opened (group)',
-              TEKGRID_COLUMN_ORDER: 'Order',
-              TEKGRID_COLUMN_ORDER_DIRECTION: 'Direction (order)',
-              TEKGRID_AGGREGATION_SUM: 'Sum',
-              TEKGRID_AGGREGATION_AVG: 'Average',
-              TEKGRID_AGGREGATION_MAX: 'Maximum',
-              TEKGRID_AGGREGATION_MIN: 'Minimum',
-              TEKGRID_AGGREGATION_COUNT: 'Count',
-              TEKGRID_MORE_OPTIONS: 'More options',
-              TEKGRID_COLUMNS_OPTIONS: 'Columns configuration',
-              TEKGRID_CLOSE: 'Close',
-              TEKGRID_FIXED_COLUMNS: 'Fixed columns',
-              TEKGRID_VISIBLE_COLUMNS: 'Visible columns',
-              TEKGRID_GROUPED_COLUMNS: 'Grouped columns',
-              TEKGRID_ORDER: 'Order',
-              TEKGRID_OTHER_COLUMNS: 'Other columns',
-              TEKGRID_DROP_COLUMNS: 'Drop columns here',
-              TEKGRID_DETAILS_FOR: 'Details for:',
-              TEKGRID_LEFT: 'Left',
-              TEKGRID_CENTER: 'Center',
-              TEKGRID_RIGHT: 'Right',
-              TEKGRID_ASC: 'Ascending',
-              TEKGRID_DESC: 'Descending',
-              TEKGRID_SELECT_COLUMN: '(select one or more columns)',
-              TEKGRID_SELECT_ALL: 'Select all',
-          },
-      },
-      'es-ES': {
-          translation: {
-              TEKGRID_CONTAINS: 'contiene',
-              TEKGRID_NOT_CONTAINS: 'no contiene',
-              TEKGRID_EQUALS: 'igual',
-              TEKGRID_NOT_EQUALS: 'es diferente de',
-              TEKGRID_GREATER_THAN: 'es mayor que',
-              TEKGRID_LESS_THAN: 'es menor que',
-              TEKGRID_GREATER_THAN_EQUALS: 'es mayor o igual que',
-              TEKGRID_LESS_THAN_EQUALS: 'es menor o igual que',
-              TEKGRID_IN: 'uno de los valores',
-              TEKGRID_NOT_IN: 'ninguno de los valores',
-              TEKGRID_BETWEEN: 'está entre',
-              TEKGRID_AND: 'e',
-              TEKGRID_OR: 'o',
-              TEKGRID_ADD: 'Añadir',
-              TEKGRID_DELETE: 'Eliminar',
-              TEKGRID_REFRESH: 'Actualizar',
-              TEKGRID_COLUMNS: 'Colunas',
-              TEKGRID_SAVE: 'Guardar',
-              TEKGRID_CANCEL: 'Cancelar',
-              TEKGRID_APPLY: 'Aplicar',
-              TEKGRID_FILTER: 'Filtro',
-              TEKGRID_MULTIPLE_VALUE_HINT: 'Separe los valores usando ";"',
-              TEKGRID_EXPORT: 'Exportar',
-              TEKGRID_EXPORT_AS: 'Exportar como {{ type }}',
-              TEKGRID_COLUMN_VISIBLE: 'Visible',
-              TEKGRID_COLUMN_GROUPED: 'Grupo',
-              TEKGRID_COLUMN_AGGREGATION: 'Totalización',
-              TEKGRID_COLUMN_LABEL: 'Etiqueta',
-              TEKGRID_COLUMN_ALIGNMENT: 'alineación',
-              TEKGRID_COLUMN_GROUP_OPENED: 'Abierto (grupo)',
-              TEKGRID_COLUMN_ORDER: 'Orden',
-              TEKGRID_COLUMN_ORDER_DIRECTION: 'Dirección (orden)',
-              TEKGRID_AGGREGATION_SUM: 'Suma',
-              TEKGRID_AGGREGATION_AVG: 'Media',
-              TEKGRID_AGGREGATION_MAX: 'Máximo',
-              TEKGRID_AGGREGATION_MIN: 'Mínimo',
-              TEKGRID_AGGREGATION_COUNT: 'Contar',
-              TEKGRID_MORE_OPTIONS: 'Mas opciones',
-              TEKGRID_COLUMNS_OPTIONS: 'Configuración de columna',
-              TEKGRID_CLOSE: 'Cerrar',
-              TEKGRID_FIXED_COLUMNS: 'Columnas fijas',
-              TEKGRID_VISIBLE_COLUMNS: 'Columnas visibles',
-              TEKGRID_GROUPED_COLUMNS: 'Columnas agrupadas',
-              TEKGRID_ORDER: 'Orden',
-              TEKGRID_OTHER_COLUMNS: 'Otras columnas',
-              TEKGRID_DROP_COLUMNS: 'Arrastra columnas aquí',
-              TEKGRID_DETAILS_FOR: 'Detalles para',
-              TEKGRID_LEFT: 'Izquierda',
-              TEKGRID_CENTER: 'Centro',
-              TEKGRID_RIGHT: 'Derecha',
-              TEKGRID_ASC: 'Creciente',
-              TEKGRID_DESC: 'Decreciente',
-              TEKGRID_SELECT_COLUMN: '(seleccione una o más columnas)',
-              TEKGRID_SELECT_ALL: 'Seleccionar todas',
-          },
-      },
-  });
+              super.navigateUp();
+          }
+          else {
+              const { index } = params;
+              if (!this.groupedData.length || index === -1)
+                  return;
+              const { uniqueKey, currentRow } = this.datasource;
+              let rowIndex;
+              rowIndex = index !== undefined ? index : this.groupedData.findIndex((row) => {
+                  if (currentRow.group) {
+                      return row.group && row.groupValue === currentRow.groupValue;
+                  }
+                  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,
+              });
+          }
+      }
+  }
 
   class TekGridColumnsButtonController extends common.IterableColumnsButtonController {
       changeGroupedColumn(column, { component, event, element }) {
@@ -2468,9 +2685,12 @@
    * Base class for TekGrid Columns Button component
    */
   class TekGridColumnsButton extends common.IterableColumnsButton {
-      constructor() {
-          super(...arguments);
+      constructor(props) {
+          super(props);
+          this.hideGroups = false;
           this.aggregationDataSet = [];
+          this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
+          this.createAccessors();
       }
       onCreated() {
           super.onCreated();
@@ -2517,20 +2737,19 @@
               this.originalDatasourceOrder = [...this.grid.datasource.order];
               this.originalDatasourceDynamicFilter = Object.assign({}, this.grid.datasource.dynamicFilter);
               this.originalDatasourceFilter = Object.assign({}, this.grid.datasource.filter);
-              this.originalColumnProps = this.grid.columns.map((column) => {
-                  const obj = {};
-                  obj.name = column.name;
-                  obj.label = column.label;
-                  obj.align = column.align;
-                  obj.isVisible = column.isVisible;
-                  obj.minWidth = column.minWidth;
-                  obj.maxWidth = column.maxWidth;
-                  obj.fixed = column.fixed;
-                  obj.grouped = column.grouped;
-                  obj.groupOpened = column.groupOpened;
-                  obj.aggregation = column.aggregation;
-                  return obj;
-              });
+              this.originalColumnProps = this.grid.columns.map((column) => ({
+                  name: column.name,
+                  label: column.label,
+                  align: column.align,
+                  isVisible: column.isVisible,
+                  minWidth: column.minWidth,
+                  maxWidth: column.maxWidth,
+                  fixed: column.fixed,
+                  grouped: column.grouped,
+                  groupOpened: column.groupOpened,
+                  aggregation: column.aggregation,
+                  filterHelperValue: this.getHelperValue(column),
+              }));
               let layoutsInfo = {};
               const eventFunction = this.events.loadLayouts || this.grid.events.loadLayouts;
               if (eventFunction && typeof eventFunction === 'function') {
@@ -2549,6 +2768,14 @@
               }
           });
       }
+      getHelperValue(column) {
+          if (column instanceof TekGridColumn) {
+              if (!Array.isArray(column.filterProps))
+                  return column.filterProps.helperValue;
+              return column.filterProps.map((prop) => prop.helperValue);
+          }
+          return '';
+      }
       newLayout(newLayout) {
           this.currentLayoutName = newLayout.name;
           this.layouts[this.currentLayoutName] = newLayout;
@@ -2595,6 +2822,240 @@
       }
   }
 
+  class TekFilterHelper {
+      static formatDate(date, column) {
+          if (column.componentProps.dateFormat) {
+              return core.dayjs(date).format(column.componentProps.dateFormat);
+          }
+          return core.dayjs(date).format(core.Config.dateFormat);
+      }
+      static getLabel(name) {
+          return core.I18n.translate(this.values[name].label);
+      }
+      static getValue(name, column) {
+          if (!this.values[name])
+              return '';
+          const value = this.values[name].fn();
+          if (Array.isArray(value)) {
+              return value.map((item) => this.formatDate(item, column));
+          }
+          return this.formatDate(value, column);
+      }
+      static register(name, label, fn) {
+          this.values[name] = {
+              label,
+              fn,
+          };
+      }
+      static unregister(name) {
+          delete this.values[name];
+      }
+  }
+  TekFilterHelper.values = {
+      TODAY: {
+          label: 'TEKGRID_HELPERVALUE_TODAY',
+          fn: () => core.dayjs().toDate(),
+      },
+      TOMORROW: {
+          label: 'TEKGRID_HELPERVALUE_TOMORROW',
+          fn: () => core.dayjs().add(1, 'day').toDate(),
+      },
+      YESTERDAY: {
+          label: 'TEKGRID_HELPERVALUE_YESTERDAY',
+          fn: () => core.dayjs().subtract(1, 'day').toDate(),
+      },
+      LAST_7_DAYS: {
+          label: 'TEKGRID_HELPERVALUE_LAST_7_DAYS',
+          fn: () => {
+              const end = core.dayjs().toDate();
+              const start = core.dayjs().subtract(7, 'day').toDate();
+              return [start, end];
+          },
+      },
+      NEXT_7_DAYS: {
+          label: 'TEKGRID_HELPERVALUE_NEXT_7_DAYS',
+          fn: () => {
+              const start = core.dayjs().toDate();
+              const end = core.dayjs().add(7, 'day').toDate();
+              return [start, end];
+          },
+      },
+      CURRENT_WEEK: {
+          label: 'TEKGRID_HELPERVALUE_CURRENT_WEEK',
+          fn: () => {
+              const start = core.dayjs().startOf('week').toDate();
+              const end = core.dayjs().endOf('week').toDate();
+              return [start, end];
+          },
+      },
+      CURRENT_MONTH: {
+          label: 'TEKGRID_HELPERVALUE_CURRENT_MONTH',
+          fn: () => {
+              const start = core.dayjs().startOf('month').toDate();
+              const end = core.dayjs().endOf('month').toDate();
+              return [start, end];
+          },
+      },
+      CURRENT_YEAR: {
+          label: 'TEKGRID_HELPERVALUE_CURRENT_YEAR',
+          fn: () => {
+              const start = core.dayjs().startOf('year').toDate();
+              const end = core.dayjs().endOf('year').toDate();
+              return [start, end];
+          },
+      },
+  };
+
+  /* TekTreeGrid Class */
+  class TekTreeGrid extends common.TreeGridEditable {
+      /**
+       * TekTreeGrid class constructor
+       * @param props TekTreeGrid properties
+       */
+      constructor(props) {
+          super(props);
+          /* Grid Title */
+          this.title = '';
+          /* Show Add button */
+          this.addButton = false;
+          /* Show Delete button */
+          this.deleteButton = 'none';
+          /* Show Delete button */
+          this.actions = [];
+          /* Show Filter button */
+          this.filterButton = false;
+          /* Show Column Filter button */
+          this.columnFilterButton = false;
+          /* Show Columns button */
+          this.columnsButton = false;
+          /* Columns to be ignored on columns button */
+          this.columnsButtonIgnore = [];
+          /**
+           * Enables column dragging
+           * @public
+           */
+          this.dragColumns = true;
+          /**
+           * Enables column resizing
+           * @public
+           */
+          this.resizeColumns = true;
+          /**
+           * Enables layout saving
+           * @public
+           */
+          this.showLayoutOptions = true;
+          /**
+           * Show export button
+           */
+          this.showExport = false;
+          /**
+           * Show refresh button
+           */
+          this.showReload = true;
+          /**
+           * Export config
+           */
+          this.exportConfig = [
+              {
+                  type: 'pdf',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'PDF' }),
+              },
+              {
+                  type: 'xls',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'XLS' }),
+              },
+              {
+                  type: 'csv',
+                  label: core.I18n.translate('TEKGRID_EXPORT_AS', { type: 'CSV' }),
+              },
+          ];
+          this.toolbarSlotProps = false;
+          this.title = this.getInitValue('title', props.title, this.title);
+          this.addButton = this.getInitValue('addButton', props.addButton, this.addButton);
+          this.deleteButton = this.getInitValue('deleteButton', props.deleteButton, this.deleteButton);
+          this.filterButton = this.getInitValue('filterButton', props.filterButton, this.filterButton);
+          this.columnFilterButton = this.getInitValue('columnFilterButton', props.columnFilterButton, this.columnFilterButton);
+          this.columnsButton = this.getInitValue('columnsButton', props.columnsButton, this.columnsButton);
+          this.columnsButtonIgnore = this.getInitValue('columnsButtonIgnore', props.columnsButtonIgnore, this.columnsButtonIgnore);
+          this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
+          this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
+          this.showLayoutOptions = this.getInitValue('showLayoutOptions', props.showLayoutOptions, this.showLayoutOptions);
+          this.showExport = this.getInitValue('showExport', props.showExport, this.showExport);
+          this.showReload = this.getInitValue('showReload', props.showReload, this.showReload);
+          this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+          this.exportActions = props.exportActions || this.exportActions;
+          this.actions = props.actions || this.actions;
+          this.toolbarSlotProps = props.toolbarSlot !== undefined;
+          if (this.deleteButton === 'selection') {
+              this.selectable = true;
+          }
+          this.gridBase = new GridBase(this);
+          this.filterOperationsDatasource = this.gridBase.getFilterOperationsDatasource();
+          this.filterRelationsDatasource = this.gridBase.getFilterRelationsDatasource();
+          this.createAccessors();
+      }
+      onCreated() {
+          super.onCreated();
+          core.Loader.addController(`GridController_${this.componentId}`, new GridController(this));
+          if (!this.toolbarSlotProps)
+              this.toolbarSlot = this.gridBase.createToolbarProps();
+      }
+      /**
+       * Get Grid columns objects
+       * @param columns Grid columns parameter
+       */
+      getColumns(columns) {
+          return columns.map((column) => new TekGridColumn(column, this));
+      }
+      columnHasFilterData(column) {
+          if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
+              const dynamicFilter = this.datasource.dynamicFilter[column.name];
+              return dynamicFilter && dynamicFilter.length > 0;
+          }
+          return this.datasource.filter[column.name];
+      }
+      getReport(type, portrait, rowObj = {}) {
+          return __awaiter(this, void 0, void 0, function* () {
+              const report = new common.Report(this, this.title);
+              const reportGroups = {};
+              const reportAggregations = {};
+              let filter;
+              if (this.datasource instanceof TekRestDatasource || this.datasource instanceof TekMemoryDatasource) {
+                  const reportFilter = new ReportFilter(this.datasource.dynamicFilter);
+                  filter = reportFilter.build();
+              }
+              return report.getReport(type, portrait, {
+                  metaData: merge__default["default"](rowObj, {
+                      filter,
+                      groups: reportGroups,
+                      columns: reportAggregations,
+                  }),
+              }).then((reportUrl) => window.open(reportUrl));
+          });
+      }
+      setSearch(search) {
+          return __awaiter(this, void 0, void 0, function* () {
+              return this.gridBase.setSearch(search);
+          });
+      }
+      /**
+       * 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;
+      }
+  }
+
   core.Messages.add({
       'pt-BR': {
           translation: {
@@ -2656,14 +3117,17 @@
   exports.Image = Image;
   exports.IterableCarousel = IterableCarousel;
   exports.IterableComponentRender = IterableComponentRender;
+  exports.Loading = Loading;
   exports.Notifications = Notifications;
   exports.ProductCard = ProductCard;
+  exports.TekFilterHelper = TekFilterHelper;
   exports.TekGrid = TekGrid;
   exports.TekGridColumn = TekGridColumn;
   exports.TekGridColumnsButton = TekGridColumnsButton;
   exports.TekGridLayoutOptions = TekGridLayoutOptions;
   exports.TekMemoryDatasource = TekMemoryDatasource;
   exports.TekRestDatasource = TekRestDatasource;
+  exports.TekTreeGrid = TekTreeGrid;
   exports.columnAggregationValues = columnAggregationValues;
 
   Object.defineProperty(exports, '__esModule', { value: true });