@zeedhi/teknisa-components-common 1.130.0 → 1.132.0

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

@@ -639,6 +639,18 @@
   PERFORMANCE OF THIS SOFTWARE.
   ***************************************************************************** */
 
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
   function __decorate(decorators, target, key, desc) {
       var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
       if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -715,98 +727,8 @@
       }
   }
 
-  class ButtonOption {
-      constructor(config) {
-          this.config = config;
-      }
-      buildComponent(grid) {
-          const { type, label, portrait = true, iconName, } = this.config;
-          const orientation = portrait ? 'portrait' : 'landscape';
-          return {
-              label,
-              iconName,
-              name: `${grid.name}_export_${type}_${orientation}`,
-              component: 'ZdButton',
-              flat: true,
-              events: {
-                  click: () => grid.getReport(type, portrait),
-              },
-          };
-      }
-  }
-
-  class MultiOption {
-      constructor(config) {
-          this.config = config;
-      }
-      formatName(id, type, grid) {
-          return `${grid.name}_export_${type}_${id}`;
-      }
-      buildTooltip(option, type, grid) {
-          const { label } = option;
-          return {
-              name: this.formatName(`tooltip_${label}`, type, grid),
-              component: 'ZdTooltip',
-              bottom: true,
-              label,
-              children: [],
-          };
-      }
-      buildButton(option, type, grid) {
-          const { cssClass, label, iconName, reportParams, } = option;
-          const { portrait: optionPortrait, rowObj } = reportParams || {};
-          return {
-              name: this.formatName(`button_${label}`, type, grid),
-              component: 'ZdButton',
-              cssClass,
-              icon: true,
-              iconName,
-              events: {
-                  click: () => grid.getReport(type, optionPortrait, rowObj),
-              },
-          };
-      }
-      buildDivider(option, type, grid) {
-          const { label } = option;
-          return {
-              name: this.formatName(`divider_${label}`, type, grid),
-              component: 'ZdDivider',
-              cssClass: 'zd-my-1',
-              vertical: true,
-          };
-      }
-      buildComponent(grid) {
-          const { type, label, multiOption, } = this.config;
-          const optionComponents = multiOption.map((option) => ([
-              Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
-                      this.buildButton(option, type, grid),
-                  ] }),
-              this.buildDivider(option, type, grid),
-          ]))
-              .flat();
-          optionComponents.pop();
-          const text = {
-              name: this.formatName('text', type, grid),
-              component: 'ZdText',
-              cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
-              events: {
-                  click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
-              },
-              text: label || '',
-          };
-          const result = {
-              name: this.formatName('row', type, grid),
-              component: 'ZdRow',
-              cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
-              children: [text, ...optionComponents],
-          };
-          return result;
-      }
-  }
-
   class GridBase {
       constructor(grid) {
-          this.exportConfigButtons = [];
           this.defaultToolbar = {};
           this.atoms = {
               TITLE: '_gridTitle',
@@ -828,20 +750,8 @@
               ACTIONS_DROPDOWN: '_actions_dropdown',
           };
           this.grid = grid;
-          this.exportConfigButtons = this.getExportConfigButtons();
           this.initializeDefaultToolbarItems();
       }
-      getOption(config) {
-          if (config.multiOption)
-              return new MultiOption(config);
-          return new ButtonOption(config);
-      }
-      getExportConfigButtons() {
-          return this.grid.exportConfig.map((config) => {
-              const option = this.getOption(config);
-              return option.buildComponent(this.grid);
-          });
-      }
       initializeDefaultToolbarItems() {
           this.defaultToolbar = {
               title: () => ({
@@ -949,7 +859,7 @@
                           name: `${this.grid.name}_columnsButton`,
                           component: 'TekGridColumnsButton',
                           isVisible: `{{GridController_${this.grid.componentId}.showColumnsButton}}`,
-                          iterableComponentName: this.grid.name,
+                          gridName: this.grid.name,
                           hideGroups: !(this.grid instanceof TekGrid),
                           ignoreColumns: `{{GridController_${this.grid.componentId}.columnsButtonIgnore}}`,
                       },
@@ -958,21 +868,15 @@
               layoutOptions: () => ({
                   name: `${this.grid.name}_layout_options`,
                   component: 'TekGridLayoutOptions',
+                  gridName: this.grid.name,
                   isVisible: `{{GridController_${this.grid.componentId}.showLayoutOptionsButton}}`,
               }),
               exportDropdown: () => ({
                   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,
+                  component: 'TekGridExportButton',
+                  grid: this.grid,
+                  gridName: this.grid.name,
+                  isVisible: `{{GridController_${this.grid.componentId}.showExportButton}}`,
               }),
               actionsDivider: (index) => ({
                   name: `${this.grid.name}_actions_divider${index}`,
@@ -1141,7 +1045,10 @@
           return toolbarItems;
       }
       loadFilterButton({ component }) {
-          this.filterButton = component;
+          this.registerFilterButton(component);
+      }
+      registerFilterButton(filterButton) {
+          this.filterButton = filterButton;
       }
       hideButtonClick({ event }) {
           if (!event.defaultPrevented) {
@@ -1243,7 +1150,14 @@
           return __awaiter(this, void 0, void 0, function* () {
               const { datasource } = this.grid;
               if (datasource instanceof TekRestDatasource || datasource instanceof TekMemoryDatasource) {
-                  const lookupColumns = this.grid.columns.filter((column) => !!column.componentProps.datasource && !column.skipLookupSearch);
+                  const searchIn = datasource.searchIn || [];
+                  const lookupColumns = this.grid.columns.filter((column) => {
+                      if (!column.componentProps.datasource || column.skipLookupSearch)
+                          return false;
+                      if (searchIn.length > 0)
+                          return searchIn.indexOf(column.name) !== -1;
+                      return true;
+                  });
                   const searchJoin = {};
                   if (search) {
                       const promises = lookupColumns.map((column) => __awaiter(this, void 0, void 0, function* () {
@@ -1581,6 +1495,95 @@
       }
   }
 
+  class ButtonOption {
+      constructor(config) {
+          this.config = config;
+      }
+      buildComponent(grid) {
+          const { type, label, portrait = true, iconName, } = this.config;
+          const orientation = portrait ? 'portrait' : 'landscape';
+          return {
+              label,
+              iconName,
+              name: `${grid.name}_export_${type}_${orientation}`,
+              component: 'ZdButton',
+              flat: true,
+              events: {
+                  click: () => grid.getReport(type, portrait),
+              },
+          };
+      }
+  }
+
+  class MultiOption {
+      constructor(config) {
+          this.config = config;
+      }
+      formatName(id, type, grid) {
+          return `${grid.name}_export_${type}_${id}`;
+      }
+      buildTooltip(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`tooltip_${label}`, type, grid),
+              component: 'ZdTooltip',
+              bottom: true,
+              label,
+              children: [],
+          };
+      }
+      buildButton(option, type, grid) {
+          const { cssClass, label, iconName, reportParams, } = option;
+          const { portrait: optionPortrait, rowObj } = reportParams || {};
+          return {
+              name: this.formatName(`button_${label}`, type, grid),
+              component: 'ZdButton',
+              cssClass,
+              icon: true,
+              iconName,
+              events: {
+                  click: () => grid.getReport(type, optionPortrait, rowObj),
+              },
+          };
+      }
+      buildDivider(option, type, grid) {
+          const { label } = option;
+          return {
+              name: this.formatName(`divider_${label}`, type, grid),
+              component: 'ZdDivider',
+              cssClass: 'zd-my-1',
+              vertical: true,
+          };
+      }
+      buildComponent(grid) {
+          const { type, label, multiOption, } = this.config;
+          const optionComponents = multiOption.map((option) => ([
+              Object.assign(Object.assign({}, this.buildTooltip(option, type, grid)), { children: [
+                      this.buildButton(option, type, grid),
+                  ] }),
+              this.buildDivider(option, type, grid),
+          ]))
+              .flat();
+          optionComponents.pop();
+          const text = {
+              name: this.formatName('text', type, grid),
+              component: 'ZdText',
+              cssClass: 'zd-display-flex zd-align-center zd-flex-grow-1 tek-grid-export-multioption-text',
+              events: {
+                  click: ({ event }) => event === null || event === void 0 ? void 0 : event.stopPropagation(),
+              },
+              text: label || '',
+          };
+          const result = {
+              name: this.formatName('row', type, grid),
+              component: 'ZdRow',
+              cssClass: 'zd-display-flex zd-ma-0 zd-py-0 zd-gap-x-1 tek-grid-export-multioption-row',
+              children: [text, ...optionComponents],
+          };
+          return result;
+      }
+  }
+
   /**
    * Extracts properties from an object based on a list of properties
    * @param obj object whose properties will be extracted
@@ -1597,6 +1600,40 @@
       return result;
   };
 
+  const EMPTY_VALUE = null;
+  function cloneComparableValue(value) {
+      return JSON.parse(JSON.stringify(value));
+  }
+  function normalizeComparableValue(value) {
+      if (value === undefined || value === null || value === '') {
+          return EMPTY_VALUE;
+      }
+      if (Array.isArray(value)) {
+          if (!value.length)
+              return EMPTY_VALUE;
+          return value.map((item) => normalizeComparableValue(item));
+      }
+      if (value && typeof value === 'object') {
+          const normalizedValue = Object.keys(value)
+              .sort()
+              .reduce((result, key) => {
+              const normalizedItem = normalizeComparableValue(value[key]);
+              if (normalizedItem !== EMPTY_VALUE) {
+                  result[key] = normalizedItem;
+              }
+              return result;
+          }, {});
+          if (!Object.keys(normalizedValue).length)
+              return EMPTY_VALUE;
+          return normalizedValue;
+      }
+      return value;
+  }
+  function areObjectsEqual(first, second) {
+      return JSON.stringify(normalizeComparableValue(first))
+          === JSON.stringify(normalizeComparableValue(second));
+  }
+
   const DynamicFilterOperations = {
       CONTAINS: true,
       NOT_CONTAINS: true,
@@ -2418,7 +2455,7 @@
            */
           this.tasksBeforeLoad = [];
           this.request = debounce__default["default"](() => { this.datasource.get(); }, 500);
-          this.updateGrouping = debounce__default["default"]((lazyLoad = false) => {
+          this.updateGrouping = debounce__default["default"]((lazyLoad = this.defaultLazy) => {
               this.updateGroupedData(lazyLoad);
           }, 100);
           this.title = this.getInitValue('title', props.title, this.title);
@@ -3000,44 +3037,38 @@
               super.navigateDown();
               return;
           }
-          if (this.cellSelection && this.viewNavigate) {
+          if (this.viewNavigate) {
               this.viewNavigate('down');
               return;
           }
-          const { index } = params;
-          if (!this.groupedData.length || index === this.groupedData.length)
-              return;
-          const { uniqueKey, currentRow } = this.datasource;
-          const 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];
-              });
-          const newRow = this.groupedData[rowIndex + 1];
-          if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
-              this.navigateDown({ index: rowIndex + 1 });
-              return;
-          }
-          this.datasource.currentRow = newRow;
+          this.navigateGroupedDatasource(false, params);
       }
       navigateUp(params) {
           if (!this.isGrouped()) {
               super.navigateUp();
               return;
           }
-          if (this.cellSelection && this.viewNavigate) {
+          if (this.viewNavigate) {
               this.viewNavigate('up');
               return;
           }
+          this.navigateGroupedDatasource(true, params);
+      }
+      navigateDatasource(up) {
+          if (!this.isGrouped()) {
+              super.navigateDatasource(up);
+              return;
+          }
+          this.navigateGroupedDatasource(up);
+      }
+      navigateGroupedDatasource(up, params = {}) {
           const { index } = params;
-          if (!this.groupedData.length || index === -1)
+          if (!this.groupedData.length
+              || (!up && index === this.groupedData.length)
+              || (up && index === -1))
               return;
           const { uniqueKey, currentRow } = this.datasource;
-          let rowIndex;
-          rowIndex = index !== undefined
+          let rowIndex = index !== undefined
               ? index
               : this.groupedData.findIndex((row) => {
                   if (currentRow.group) {
@@ -3045,11 +3076,12 @@
                   }
                   return row[uniqueKey] && row[uniqueKey] === currentRow[uniqueKey];
               });
-          if (rowIndex === -1)
+          if (up && rowIndex === -1)
               rowIndex = this.groupedData.length;
-          const newRow = this.groupedData[rowIndex - 1];
+          const nextIndex = rowIndex + (up ? -1 : 1);
+          const newRow = this.groupedData[nextIndex];
           if (!newRow || !this.isItemVisible(newRow) || newRow.groupFooter) {
-              this.navigateUp({ index: rowIndex - 1 });
+              this.navigateGroupedDatasource(up, { index: nextIndex });
               return;
           }
           this.datasource.currentRow = newRow;
@@ -3172,6 +3204,9 @@
       getFilterInputs(columnName) {
           return this.gridBase.getFilterInputs(columnName);
       }
+      registerFilterButton(filterButton) {
+          this.gridBase.registerFilterButton(filterButton);
+      }
       isColumnSearchable(column) {
           return column.searchable && (!this.searchVisibleOnly || column.isVisible || column.grouped);
       }
@@ -3380,16 +3415,14 @@
    */
   class TekGridColumnsButton extends common.IterableColumnsButton {
       constructor(props) {
-          super(props);
+          super(Object.assign(Object.assign({}, props), { iterableComponentName: props.gridName || props.iterableComponentName }));
           this.hideGroups = false;
           this.aggregationDataSet = [];
           this.hideGroups = this.getInitValue('hideGroups', props.hideGroups, this.hideGroups);
           this.createAccessors();
       }
-      onCreated() {
-          super.onCreated();
-          this.controller = new TekGridColumnsButtonController(this.iterableComponent);
-          core.Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
+      createController() {
+          return new TekGridColumnsButtonController(this.iterableComponent);
       }
       getAggregationSelectData() {
           if (!this.aggregationDataSet.length) {
@@ -3402,6 +3435,67 @@
       }
   }
 
+  /**
+   * Base class for TekGrid export button/dropdown component.
+   */
+  class TekGridExportButton extends common.ComponentRender {
+      constructor(props) {
+          super(props);
+          this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+          this.grid = this.getInitValue('grid', props.grid, this.grid);
+          this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
+          this.exportActions = this.getInitValue('exportActions', props.exportActions, this.exportActions);
+          this.children = this.getInitValue('children', props.children, []);
+          this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
+          this.createAccessors();
+          this.loadGrid();
+      }
+      getOption(config) {
+          if (config.multiOption)
+              return new MultiOption(config);
+          return new ButtonOption(config);
+      }
+      getExportConfigButtons() {
+          if (!this.grid)
+              return [];
+          const exportConfig = this.exportConfig || this.grid.exportConfig;
+          return exportConfig.map((config) => {
+              const option = this.getOption(config);
+              return option.buildComponent(this.grid);
+          });
+      }
+      loadChildren() {
+          if (!this.grid)
+              return;
+          if (this.exportActions) {
+              this.children = this.exportActions;
+              return;
+          }
+          if (this.exportConfig) {
+              this.children = this.getExportConfigButtons();
+              return;
+          }
+          this.children = this.grid.exportActions || this.getExportConfigButtons();
+      }
+      loadGrid(gridName) {
+          if (gridName)
+              this.gridName = gridName;
+          if (!this.grid && this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+              this.loadChildren();
+          }
+      }
+      onCreated() {
+          super.onCreated();
+          this.loadGrid();
+      }
+  }
+
   class TekFilterHelper {
       static getLabel(name) {
           return core.DateHelper.getLabel(name);
@@ -3429,23 +3523,35 @@
           this.grid = this.getInitValue('grid', props.grid, undefined);
           this.showCheckboxAll = this.getInitValue('showCheckboxAll', props.showCheckboxAll, this.showCheckboxAll);
           this.createAccessors();
-          if (!this.grid)
-              this.loadGrid();
+          this.loadGrid();
       }
       loadGrid(gridName) {
           if (gridName)
               this.gridName = gridName;
-          if (!this.gridName)
-              return;
-          this.grid = core.Metadata.getInstances(this.gridName)[0];
+          if (!this.grid && this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+              this.grid.registerFilterButton(this);
+          }
       }
       click(event) {
           this.callEvent('click', { component: this, event });
+          this.loadGrid();
+          if (!this.grid)
+              return;
           this.grid.callEvent('filterClick', { component: this.grid, event });
           if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
               this.createFilterFromColumns.call(this);
           }
       }
+      onCreated() {
+          super.onCreated();
+          this.loadGrid();
+      }
       loadFilterValues({ component }) {
           const changedCompNames = [];
           const { datasource } = this.grid;
@@ -3501,7 +3607,8 @@
           });
       }
       hideFilterModal() {
-          this.filterModal.hide();
+          if (this.filterModal)
+              this.filterModal.hide();
       }
       destroyFilterModal() {
           if (this.filterModal)
@@ -3547,9 +3654,14 @@
                               },
                               {
                                   name: `${this.grid.name}-filter-close-button`,
-                                  component: 'ZdModalCloseButton',
+                                  component: 'ZdButton',
+                                  icon: true,
+                                  iconName: 'close',
+                                  flat: true,
                                   small: true,
-                                  modalName: `${this.grid.name}-filter-modal`,
+                                  events: {
+                                      click: this.hideFilterModal.bind(this),
+                                  },
                               },
                           ],
                       },
@@ -3695,15 +3807,20 @@
                   this.setFilter(filter, event, datasource.setBaseFilter.bind(datasource));
               }
               else {
+                  const structuredFilter = {};
                   Object.keys(formValue).forEach((item) => {
                       let columnName = item.split(`${this.grid.name}-filter-AND-CONTAINS-`)[1];
                       columnName = columnName.split('-').slice(0, -1).join('-'); // remove index
-                      if (formValue[item]) {
-                          filter[columnName] = formValue[item];
+                      const itemValue = formValue[item];
+                      if (itemValue && !(Array.isArray(itemValue) && !itemValue.length)) {
+                          filter[columnName] = itemValue;
+                          if (!structuredFilter[columnName])
+                              structuredFilter[columnName] = [];
+                          structuredFilter[columnName].push({ relation: 'AND', operation: 'CONTAINS', value: itemValue });
                       }
                   });
                   datasource.filter = filter;
-                  this.setFilter(filter, event, datasource.setBaseFilter.bind(datasource));
+                  this.setFilter(structuredFilter, event, datasource.setBaseFilter.bind(datasource));
               }
               this.grid.changeLayout(event);
           }
@@ -3753,7 +3870,8 @@
                           columnComponentName = `${this.grid.name}-filter-AND-CONTAINS-${column.name}-${index}`;
                       }
                       this.filterFormInputs[column.name].push(columnComponentName);
-                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, column.componentProps), filterItem), { name: columnComponentName });
+                      const _b = column.componentProps || {}, componentProps = __rest(_b, ["dataValueOut"]);
+                      const newColumnComponent = Object.assign(Object.assign(Object.assign({ label: column.label }, componentProps), filterItem), { name: columnComponentName });
                       if (filterItem.helperOptions) {
                           if (!newColumnComponent.events)
                               newColumnComponent.events = {};
@@ -3787,8 +3905,8 @@
   }
 
   class TekGridLayoutOptions extends common.ComponentRender {
-      constructor() {
-          super(...arguments);
+      constructor(props) {
+          super(props);
           this.currentLayoutName = '';
           this.layoutEdited = false;
           this.layouts = {};
@@ -3797,6 +3915,8 @@
           this.originalDatasourceOrder = [];
           this.originalDatasourceDynamicFilter = {};
           this.originalDatasourceFilter = {};
+          this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+          this.createAccessors();
       }
       getParentGrid() {
           let { parent } = this;
@@ -3807,30 +3927,44 @@
           }
           return parent;
       }
+      loadGrid(gridName) {
+          if (gridName)
+              this.gridName = gridName;
+          if (this.gridName) {
+              const grid = core.Metadata.getInstances(this.gridName)[0];
+              if (grid)
+                  this.grid = grid;
+          }
+          else {
+              this.grid = this.getParentGrid();
+          }
+          if (this.grid) {
+              this.gridName = this.grid.name;
+          }
+          return this.grid;
+      }
+      onGridChangeLayout() {
+          this.layoutEdited = this.hasLayoutChanges();
+      }
+      registerChangeLayoutEvent() {
+          if (!this.grid || this.changeLayoutEventGrid === this.grid)
+              return;
+          this.grid.addEvent('changeLayout', this.onGridChangeLayout.bind(this));
+          this.changeLayoutEventGrid = this.grid;
+      }
       onMounted(element) {
           const _super = Object.create(null, {
               onMounted: { get: () => super.onMounted }
           });
           return __awaiter(this, void 0, void 0, function* () {
               _super.onMounted.call(this, element);
-              this.grid = this.getParentGrid();
+              this.loadGrid();
+              this.registerChangeLayoutEvent();
               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) => ({
-                  name: column.name,
-                  label: column.label,
-                  align: column.align,
-                  isVisible: column.isVisible,
-                  minWidth: column.minWidth,
-                  maxWidth: column.maxWidth,
-                  width: column.width,
-                  fixed: column.fixed,
-                  grouped: column.grouped,
-                  groupOpened: column.groupOpened,
-                  aggregation: column.aggregation,
-                  filterHelperValue: this.getHelperValue(column),
-              }));
+              this.originalColumnProps = this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column));
+              this.originalLayoutSnapshot = cloneComparableValue(this.getCurrentLayoutSnapshot(''));
               let layoutsInfo = {};
               const promise = this.loadLayoutsInfo();
               if (this.grid instanceof TekGrid) {
@@ -3875,6 +4009,74 @@
           }
           return '';
       }
+      getLayoutColumnSnapshot(column, isVisible = column.isVisible) {
+          const filterHelperValue = this.getHelperValue(column);
+          return {
+              name: column.name,
+              label: column.label,
+              align: column.align,
+              isVisible,
+              minWidth: column.minWidth || '',
+              maxWidth: column.maxWidth || '',
+              width: column.width,
+              fixed: !!column.fixed,
+              grouped: !!column.grouped,
+              groupOpened: !!column.groupOpened,
+              aggregation: column.aggregation,
+              filterHelperValue: Array.isArray(filterHelperValue)
+                  ? filterHelperValue
+                  : filterHelperValue || '',
+          };
+      }
+      getCurrentLayoutSnapshot(name) {
+          if (this.viewGetCurrentLayout) {
+              return this.viewGetCurrentLayout(name);
+          }
+          return {
+              name,
+              gridWidth: 'auto',
+              order: [...this.grid.datasource.order],
+              filter: Object.assign({}, this.grid.datasource.filter),
+              dynamicFilter: Object.assign({}, this.grid.datasource.dynamicFilter),
+              columns: this.grid.columns.map((column) => this.getLayoutColumnSnapshot(column)),
+          };
+      }
+      getBaselineLayoutSnapshot() {
+          if (this.currentLayoutName) {
+              const currentLayout = this.layouts[this.currentLayoutName];
+              return currentLayout;
+          }
+          return this.originalLayoutSnapshot;
+      }
+      getOriginalLayoutSnapshot() {
+          return cloneComparableValue({
+              name: '',
+              gridWidth: 'auto',
+              order: [...this.originalDatasourceOrder],
+              filter: Object.assign({}, this.originalDatasourceFilter),
+              dynamicFilter: Object.assign({}, this.originalDatasourceDynamicFilter),
+              columns: this.originalColumnProps,
+          });
+      }
+      hasLayoutChanges() {
+          const baselineLayout = this.getBaselineLayoutSnapshot();
+          if (!baselineLayout)
+              return false;
+          const currentLayout = this.getCurrentLayoutSnapshot(this.currentLayoutName);
+          return !areObjectsEqual(currentLayout, baselineLayout);
+      }
+      getCurrentLayout() {
+          return this.getCurrentLayoutSnapshot(this.currentLayoutName);
+      }
+      getLayout(name = this.currentLayoutName) {
+          if (name === '') {
+              return this.getOriginalLayoutSnapshot();
+          }
+          const layout = this.layouts[name];
+          if (!layout)
+              return undefined;
+          return cloneComparableValue(layout);
+      }
       layoutHasFilter(layout) {
           if (layout === '')
               return false;
@@ -3979,16 +4181,16 @@
           this.layoutEdited = false;
       }
       applyLayout(name, save = true) {
+          const layoutSelected = name === '' ? this.getLayout(name) : this.layouts[name];
           if (this.grid.events.beforeApplyLayout) {
               const canApply = this.grid.callEvent('beforeApplyLayout', {
                   component: this.grid,
-                  layout: this.layouts[name],
+                  layout: layoutSelected,
               });
               if (canApply === false)
                   return;
           }
           this.currentLayoutName = name;
-          const layoutSelected = this.layouts[name];
           if (this.viewApplyLayout) {
               this.viewApplyLayout(layoutSelected);
           }
@@ -4023,7 +4225,12 @@
           delete this.layouts[name];
           this.saveLayouts();
       }
-      updateLayout(name, layout) {
+      updateLayout(name = this.currentLayoutName, layout = this.getCurrentLayout()) {
+          if (name === '') {
+              this.updateDefaultLayout(layout);
+              this.layoutEdited = false;
+              return;
+          }
           this.fixColumns(layout);
           this.currentLayoutName = name;
           layout.name = name;
@@ -4045,6 +4252,7 @@
                   return Object.assign(Object.assign({}, originalColumn), column);
               });
           }
+          this.originalLayoutSnapshot = this.getOriginalLayoutSnapshot();
           if (this.currentLayoutName === '') {
               this.applyLayout(this.currentLayoutName, false);
           }
@@ -4056,20 +4264,7 @@
           this.grid.columns.forEach((gridColumn) => {
               if (!hasLayoutColumns
                   || layoutColumnNames.indexOf(gridColumn.name) === -1) {
-                  layout.columns.push({
-                      name: gridColumn.name,
-                      label: gridColumn.label,
-                      align: gridColumn.align,
-                      isVisible: !hasLayoutColumns && gridColumn.isVisible,
-                      width: gridColumn.width,
-                      minWidth: gridColumn.minWidth,
-                      maxWidth: gridColumn.maxWidth,
-                      fixed: gridColumn.fixed,
-                      grouped: gridColumn.grouped,
-                      groupOpened: gridColumn.groupOpened,
-                      aggregation: gridColumn.aggregation,
-                      filterHelperValue: this.getHelperValue(gridColumn),
-                  });
+                  layout.columns.push(this.getLayoutColumnSnapshot(gridColumn, !hasLayoutColumns && gridColumn.isVisible));
               }
           });
       }
@@ -4350,6 +4545,9 @@
       getFilterInputs(columnName) {
           return this.gridBase.getFilterInputs(columnName);
       }
+      registerFilterButton(filterButton) {
+          this.gridBase.registerFilterButton(filterButton);
+      }
       getColumn(name) {
           return super.getColumn(name);
       }
@@ -4958,6 +5156,7 @@
   exports.TekGridColumn = TekGridColumn;
   exports.TekGridColumnsButton = TekGridColumnsButton;
   exports.TekGridColumnsButtonController = TekGridColumnsButtonController;
+  exports.TekGridExportButton = TekGridExportButton;
   exports.TekGridFilterButton = TekGridFilterButton;
   exports.TekGridLayoutOptions = TekGridLayoutOptions;
   exports.TekMemoryDatasource = TekMemoryDatasource;