@zeedhi/teknisa-components-common 1.130.0 → 1.132.0

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

@@ -635,6 +635,18 @@ OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 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);
@@ -711,98 +723,8 @@ class TekGridDeleteRowsError extends Error {
     }
 }
 
-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',
@@ -824,20 +746,8 @@ class GridBase {
             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: () => ({
@@ -945,7 +855,7 @@ class GridBase {
                         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}}`,
                     },
@@ -954,21 +864,15 @@ class GridBase {
             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}`,
@@ -1137,7 +1041,10 @@ class GridBase {
         return toolbarItems;
     }
     loadFilterButton({ component }) {
-        this.filterButton = component;
+        this.registerFilterButton(component);
+    }
+    registerFilterButton(filterButton) {
+        this.filterButton = filterButton;
     }
     hideButtonClick({ event }) {
         if (!event.defaultPrevented) {
@@ -1239,7 +1146,14 @@ class GridBase {
         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* () {
@@ -1577,6 +1491,95 @@ class GridController {
     }
 }
 
+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
@@ -1593,6 +1596,40 @@ const extractProperties = (obj, props) => {
     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,
@@ -2414,7 +2451,7 @@ class TekGrid extends GridEditable {
          */
         this.tasksBeforeLoad = [];
         this.request = debounce(() => { this.datasource.get(); }, 500);
-        this.updateGrouping = debounce((lazyLoad = false) => {
+        this.updateGrouping = debounce((lazyLoad = this.defaultLazy) => {
             this.updateGroupedData(lazyLoad);
         }, 100);
         this.title = this.getInitValue('title', props.title, this.title);
@@ -2996,44 +3033,38 @@ class TekGrid extends GridEditable {
             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) {
@@ -3041,11 +3072,12 @@ class TekGrid extends GridEditable {
                 }
                 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;
@@ -3168,6 +3200,9 @@ class TekGrid extends GridEditable {
     getFilterInputs(columnName) {
         return this.gridBase.getFilterInputs(columnName);
     }
+    registerFilterButton(filterButton) {
+        this.gridBase.registerFilterButton(filterButton);
+    }
     isColumnSearchable(column) {
         return column.searchable && (!this.searchVisibleOnly || column.isVisible || column.grouped);
     }
@@ -3376,16 +3411,14 @@ class TekGridColumnsButtonController extends IterableColumnsButtonController {
  */
 class TekGridColumnsButton extends 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);
-        Loader.addController(`IterableColumnsButtonController_${this.componentId}`, this.controller);
+    createController() {
+        return new TekGridColumnsButtonController(this.iterableComponent);
     }
     getAggregationSelectData() {
         if (!this.aggregationDataSet.length) {
@@ -3398,6 +3431,67 @@ class TekGridColumnsButton extends IterableColumnsButton {
     }
 }
 
+/**
+ * Base class for TekGrid export button/dropdown component.
+ */
+class TekGridExportButton extends 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 = 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 DateHelper.getLabel(name);
@@ -3425,23 +3519,35 @@ class TekGridFilterButton extends Button {
         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 = Metadata.getInstances(this.gridName)[0];
+        if (!this.grid && this.gridName) {
+            const grid = 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;
@@ -3497,7 +3603,8 @@ class TekGridFilterButton extends Button {
         });
     }
     hideFilterModal() {
-        this.filterModal.hide();
+        if (this.filterModal)
+            this.filterModal.hide();
     }
     destroyFilterModal() {
         if (this.filterModal)
@@ -3543,9 +3650,14 @@ class TekGridFilterButton extends Button {
                             },
                             {
                                 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),
+                                },
                             },
                         ],
                     },
@@ -3691,15 +3803,20 @@ class TekGridFilterButton extends Button {
                 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);
         }
@@ -3749,7 +3866,8 @@ class TekGridFilterButton extends Button {
                         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 = {};
@@ -3783,8 +3901,8 @@ class TekGridFilterButton extends Button {
 }
 
 class TekGridLayoutOptions extends ComponentRender {
-    constructor() {
-        super(...arguments);
+    constructor(props) {
+        super(props);
         this.currentLayoutName = '';
         this.layoutEdited = false;
         this.layouts = {};
@@ -3793,6 +3911,8 @@ class TekGridLayoutOptions extends ComponentRender {
         this.originalDatasourceOrder = [];
         this.originalDatasourceDynamicFilter = {};
         this.originalDatasourceFilter = {};
+        this.gridName = this.getInitValue('gridName', props.gridName, this.gridName);
+        this.createAccessors();
     }
     getParentGrid() {
         let { parent } = this;
@@ -3803,30 +3923,44 @@ class TekGridLayoutOptions extends ComponentRender {
         }
         return parent;
     }
+    loadGrid(gridName) {
+        if (gridName)
+            this.gridName = gridName;
+        if (this.gridName) {
+            const grid = 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) {
@@ -3871,6 +4005,74 @@ class TekGridLayoutOptions extends ComponentRender {
         }
         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;
@@ -3975,16 +4177,16 @@ class TekGridLayoutOptions extends ComponentRender {
         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);
         }
@@ -4019,7 +4221,12 @@ class TekGridLayoutOptions extends ComponentRender {
         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;
@@ -4041,6 +4248,7 @@ class TekGridLayoutOptions extends ComponentRender {
                 return Object.assign(Object.assign({}, originalColumn), column);
             });
         }
+        this.originalLayoutSnapshot = this.getOriginalLayoutSnapshot();
         if (this.currentLayoutName === '') {
             this.applyLayout(this.currentLayoutName, false);
         }
@@ -4052,20 +4260,7 @@ class TekGridLayoutOptions extends ComponentRender {
         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));
             }
         });
     }
@@ -4346,6 +4541,9 @@ class TekTreeGrid extends TreeGridEditable {
     getFilterInputs(columnName) {
         return this.gridBase.getFilterInputs(columnName);
     }
+    registerFilterButton(filterButton) {
+        this.gridBase.registerFilterButton(filterButton);
+    }
     getColumn(name) {
         return super.getColumn(name);
     }
@@ -4932,4 +5130,4 @@ Messages.add({
 const packageContent = require('../package.json');
 VersionService.addPackageVersion(packageContent.name, packageContent.version);
 
-export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };
+export { BreadcrumbHeader, CardTitle, CrudAddButton, CrudButton, CrudCancelButton, CrudDeleteButton, CrudForm, CrudSaveButton, DynamicFilterOperations, DynamicFilterRelations, Image, IterableCarousel, IterableComponentRender, Loading, Notifications, ProductCard, TekDragGrid, TekFilterHelper, TekGrid, TekGridColumn, TekGridColumnsButton, TekGridColumnsButtonController, TekGridExportButton, TekGridFilterButton, TekGridLayoutOptions, TekMemoryDatasource, TekRestDatasource, TekTreeGrid, TekUserInfo, TekUserInfoList, columnAggregationValues };