@zeedhi/teknisa-components-common 1.107.1 → 1.108.0

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

@@ -806,6 +806,7 @@ class MultiOption {
 class GridBase {
     constructor(grid) {
         this.exportConfigButtons = [];
+        this.defaultToolbar = {};
         this.atoms = {
             TITLE: '_gridTitle',
             HIDE_BUTTON: '_hideButton',
@@ -827,6 +828,7 @@ class GridBase {
         };
         this.grid = grid;
         this.exportConfigButtons = this.getExportConfigButtons();
+        this.initializeDefaultToolbarItems();
     }
     getOption(config) {
         if (config.multiOption)
@@ -839,17 +841,17 @@ class GridBase {
             return option.buildComponent(this.grid);
         });
     }
-    createToolbarProps() {
-        return [
-            {
-                name: `${this.grid.name}_gridTitle`,
+    initializeDefaultToolbarItems() {
+        this.defaultToolbar = {
+            title: () => ({
+                name: `${this.grid.name}_title`,
                 component: 'ZdText',
                 cssClass: 'toolbar-title',
                 tag: 'h2',
                 text: this.grid.title,
                 title: this.grid.title,
-            },
-            {
+            }),
+            hideButton: () => ({
                 name: `${this.grid.name}_hideTooltip`,
                 component: 'ZdTooltip',
                 label: `{{GridController_${this.grid.componentId}.tooltipName}}`,
@@ -859,213 +861,260 @@ class GridBase {
                         name: `${this.grid.name}_hideButton`,
                         component: 'ZdIcon',
                         iconName: 'mdi-chevron-right',
-                        isVisible: `{{GridController_${this.grid.componentId}.isNotEditing}}`,
+                        isVisible: true,
                         cssClass: `{{GridController_${this.grid.componentId}.toolbarStyle}}`,
                         events: {
                             click: this.hideButtonClick.bind(this),
                         },
                     },
                 ],
-            },
-            {
-                name: `${this.grid.name}_toolbarDiv`,
-                component: 'ZdTag',
-                tag: 'div',
-                cssStyle: 'display: flex; align-items: center',
-                isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+            }),
+            addButton: () => ({
+                name: `${this.grid.name}_add_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_ADD',
+                bottom: true,
                 children: [
                     {
-                        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}.showDivider1}}`,
-                            },
-                            {
-                                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: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
-                                        events: {
-                                            click: this.reloadGrid.bind(this),
-                                        },
-                                    },
-                                ],
-                            },
-                            {
-                                name: `${this.grid.name}_divider2`,
-                                component: 'ZdDivider',
-                                cssClass: 'toolbar-divider',
-                                vertical: true,
-                                isVisible: `{{GridController_${this.grid.componentId}.showDivider2}}`,
-                            },
-                            {
-                                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}.showLayoutOptionsButton}}`,
-                            },
-                            {
-                                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,
-                                isVisible: `{{GridController_${this.grid.componentId}.showDivider3}}`,
-                            },
-                        ],
+                        name: `${this.grid.name}_addButton`,
+                        component: 'ZdButton',
+                        icon: true,
+                        iconName: 'add',
+                        isVisible: `{{GridController_${this.grid.componentId}.showAddButton}}`,
+                        events: {
+                            click: this.addButtonClick.bind(this),
+                        },
                     },
+                ],
+            }),
+            deleteButton: () => ({
+                name: `${this.grid.name}_delete_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_DELETE',
+                bottom: true,
+                children: [
                     {
-                        name: `${this.grid.name}_saveButton`,
+                        name: `${this.grid.name}_deleteButton`,
                         component: 'ZdButton',
-                        label: 'TEKGRID_SAVE',
-                        isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                        small: true,
+                        icon: true,
+                        iconName: 'delete',
+                        isVisible: `{{GridController_${this.grid.componentId}.showDeleteButton}}`,
+                        disabled: `{{GridController_${this.grid.componentId}.disableDeleteButton}}`,
                         events: {
-                            click: this.saveChanges.bind(this),
+                            click: this.deleteButtonClick.bind(this),
                         },
                     },
+                ],
+            }),
+            divider: (index) => ({
+                name: `${this.grid.name}_divider${index}`,
+                component: 'ZdDivider',
+                cssClass: 'toolbar-divider',
+                vertical: true,
+                isVisible: `{{GridController_${this.grid.componentId}.showDivider}}`,
+            }),
+            refreshButton: () => ({
+                name: `${this.grid.name}_refresh_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_REFRESH',
+                bottom: true,
+                children: [
                     {
-                        name: `${this.grid.name}_cancelButton`,
+                        name: `${this.grid.name}_refreshButton`,
                         component: 'ZdButton',
-                        label: 'TEKGRID_CANCEL',
-                        outline: true,
-                        cssClass: 'zd-mx-2',
-                        isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
-                        small: true,
+                        icon: true,
+                        iconName: 'refresh',
+                        isVisible: `{{GridController_${this.grid.componentId}.showReloadButton}}`,
                         events: {
-                            click: this.cancelChanges.bind(this),
+                            click: this.reloadGrid.bind(this),
                         },
                     },
+                ],
+            }),
+            columnsButton: () => ({
+                name: `${this.grid.name}_columns_button_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_COLUMNS',
+                bottom: true,
+                children: [
                     {
-                        name: `${this.grid.name}_gridSearch`,
-                        component: 'ZdSearch',
-                        cssClass: 'zd-grid-search',
-                        iterableComponentName: `${this.grid.name}`,
-                        isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
+                        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}}`,
                     },
+                ],
+            }),
+            layoutOptions: () => ({
+                name: `${this.grid.name}_layout_options`,
+                component: 'TekGridLayoutOptions',
+                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,
+            }),
+            actionsDropdown: () => ({
+                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,
+            }),
+            saveButton: () => ({
+                name: `${this.grid.name}_saveButton`,
+                component: 'ZdButton',
+                label: 'TEKGRID_SAVE',
+                isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                small: true,
+                events: {
+                    click: this.saveChanges.bind(this),
+                },
+            }),
+            cancelButton: () => ({
+                name: `${this.grid.name}_cancelButton`,
+                component: 'ZdButton',
+                label: 'TEKGRID_CANCEL',
+                outline: true,
+                cssClass: 'zd-mx-2',
+                isVisible: `{{GridController_${this.grid.componentId}.showEditButtons}}`,
+                small: true,
+                events: {
+                    click: this.cancelChanges.bind(this),
+                },
+            }),
+            gridSearch: () => ({
+                name: `${this.grid.name}_gridSearch`,
+                component: 'ZdSearch',
+                cssClass: 'zd-grid-search',
+                iterableComponentName: `${this.grid.name}`,
+                isVisible: `{{GridController_${this.grid.componentId}.showSearchInput}}`,
+            }),
+            filterButton: () => ({
+                name: `${this.grid.name}_filter_tooltip`,
+                component: 'ZdTooltip',
+                label: 'TEKGRID_FILTER',
+                bottom: true,
+                children: [
                     {
-                        name: `${this.grid.name}_filter_tooltip`,
-                        component: 'ZdTooltip',
-                        label: 'TEKGRID_FILTER',
-                        bottom: true,
-                        children: [
-                            {
-                                name: `${this.grid.name}_filterButton`,
-                                component: 'TekGridFilterButton',
-                                grid: this.grid,
-                                gridName: this.grid.name,
-                                showCheckboxAll: this.grid.showCheckboxAllFilter,
-                                isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
-                                events: {
-                                    onCreated: this.loadFilterButton.bind(this),
-                                },
-                            },
-                        ],
+                        name: `${this.grid.name}_filterButton`,
+                        component: 'TekGridFilterButton',
+                        grid: this.grid,
+                        gridName: this.grid.name,
+                        showCheckboxAll: this.grid.showCheckboxAllFilter,
+                        isVisible: `{{GridController_${this.grid.componentId}.showFilterButton}}`,
+                        events: {
+                            onCreated: this.loadFilterButton.bind(this),
+                        },
                     },
                 ],
-            },
+            }),
+        };
+    }
+    processUserToolbarItems(toolbarDivChildren) {
+        this.grid.toolbarConfig.forEach((item, index) => {
+            if (typeof item === 'object' && item.component) {
+                toolbarDivChildren.push(item);
+            }
+            else if (typeof item === 'string') {
+                const toolbarToPropertyMap = {
+                    addButton: 'addButton',
+                    deleteButton: 'deleteButton',
+                    refreshButton: 'refreshButton',
+                    columnsButton: 'columnsButton',
+                    layoutOptions: 'layoutButton',
+                    exportDropdown: 'exportButton',
+                    actionsDropdown: 'actionsButton',
+                    gridSearch: 'searchInput',
+                    filterButton: 'filterButton',
+                };
+                const gridProperty = toolbarToPropertyMap[item];
+                if (gridProperty && !this.grid[gridProperty]) {
+                    this.grid[gridProperty] = true;
+                }
+                const itemFactory = this.defaultToolbar[item];
+                if (itemFactory) {
+                    const predefinedItem = itemFactory(index);
+                    if (predefinedItem) {
+                        toolbarDivChildren.push(predefinedItem);
+                    }
+                }
+                else {
+                    console.warn(`Predefined toolbar item "${item}" not found.`);
+                }
+            }
+            else {
+                console.warn('Invalid item in toolbarConfig:', item);
+            }
+        });
+    }
+    /**
+     * Adiciona os itens padrão da toolbar quando nenhuma configuração é fornecida.
+     * @param toolbarDivChildren Array para adicionar os componentes da toolbar.
+     */
+    addDefaultToolbarItems(toolbarDivChildren) {
+        const defaultItems = [
+            'addButton', 'deleteButton', 'divider', 'refreshButton', 'divider',
+            'columnsButton', 'layoutOptions', 'exportDropdown', 'divider', 'actionsDropdown',
+            'saveButton', 'cancelButton', 'divider', 'gridSearch', 'filterButton',
         ];
+        defaultItems.forEach((itemName, index) => {
+            const itemFactory = this.defaultToolbar[itemName];
+            if (itemFactory) {
+                const predefinedItem = itemFactory(index);
+                if (predefinedItem) {
+                    toolbarDivChildren.push(predefinedItem);
+                }
+            }
+        });
+    }
+    /**
+     * Cria os componentes que serão renderizados na toolbar do grid.
+     */
+    createToolbarProps() {
+        var _a, _b, _c, _d;
+        const toolbarItems = [];
+        const toolbarDivChildren = [];
+        const title = (_b = (_a = this.defaultToolbar).title) === null || _b === void 0 ? void 0 : _b.call(_a);
+        const hideButton = (_d = (_c = this.defaultToolbar).hideButton) === null || _d === void 0 ? void 0 : _d.call(_c);
+        if (title)
+            toolbarItems.push(title);
+        if (hideButton)
+            toolbarItems.push(hideButton);
+        if (this.grid.toolbarConfig && this.grid.toolbarConfig.length > 0) {
+            this.processUserToolbarItems(toolbarDivChildren);
+        }
+        else {
+            this.addDefaultToolbarItems(toolbarDivChildren);
+        }
+        toolbarItems.push({
+            name: `${this.grid.name}_toolbarDiv`,
+            component: 'ZdTag',
+            tag: 'div',
+            cssStyle: 'display: flex; align-items: center',
+            isVisible: `{{GridController_${this.grid.componentId}.showToolbar}}`,
+            children: toolbarDivChildren,
+        });
+        return toolbarItems;
     }
     loadFilterButton({ component }) {
         this.filterButton = component;
@@ -1254,7 +1303,6 @@ Messages.add({
             TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Ano Atual',
             TEKGRID_WITH_GROUPS: '(Com grupos)',
             TEKGRID_GRID_MIRROR: '(Espelho do grid)',
-            TEKGRID_NO_DATA: 'Não há dados para gerar o relatório',
         },
     },
     'en-US': {
@@ -1327,7 +1375,6 @@ Messages.add({
             TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Current Year',
             TEKGRID_WITH_GROUPS: '(With groups)',
             TEKGRID_GRID_MIRROR: '(Grid mirror)',
-            TEKGRID_NO_DATA: 'There is no data to generate the report',
         },
     },
     'es-CL': {
@@ -1400,7 +1447,6 @@ Messages.add({
             TEKGRID_HELPERVALUE_CURRENT_YEAR: 'Año actual',
             TEKGRID_WITH_GROUPS: '(Con grupos)',
             TEKGRID_GRID_MIRROR: '(Espejo de grid)',
-            TEKGRID_NO_DATA: 'No hay datos para generar el reporte',
         },
     },
 });
@@ -1415,19 +1461,19 @@ class GridController {
         return this.grid.title;
     }
     get showAddButton() {
-        return this.grid.addButton;
+        return this.grid.addButton && !this.isEditing && this.openToolbar;
     }
     get showDeleteButton() {
-        return this.grid.deleteButton !== 'none';
+        return this.grid.deleteButton !== 'none' && !this.isEditing && this.openToolbar;
     }
     get showFilterButton() {
-        return this.grid.filterButton;
+        return this.grid.filterButton && this.openToolbar;
     }
     get showModalFilterProps() {
         return this.grid.modalFilterProps;
     }
     get showSearchInput() {
-        return this.grid.showSearch;
+        return this.grid.showSearch && this.openToolbar;
     }
     get showToolbar() {
         return this.openToolbar;
@@ -1442,46 +1488,29 @@ class GridController {
         return !this.openToolbar ? 'TEKGRID_SHOW' : 'TEKGRID_HIDE';
     }
     get showReloadButton() {
-        return this.grid.showReload;
-    }
-    get showDivider2() {
-        return (this.showReloadButton
-            && (this.showLayoutOptionsButton
-                || this.showColumnsButton
-                || this.showActionsButton
-                || this.showExportButton
-                || this.showSearchInput));
+        return this.grid.showReload && !this.isEditing && this.openToolbar;
     }
     get showColumnsButton() {
-        return this.grid.columnsButton;
+        return this.grid.columnsButton && !this.isEditing && this.openToolbar;
     }
     get columnsButtonIgnore() {
         return this.grid.columnsButtonIgnore;
     }
     get showLayoutOptionsButton() {
-        return this.grid.showLayoutOptions;
+        return this.grid.showLayoutOptions && !this.isEditing && this.openToolbar;
     }
-    get showDivider1() {
-        return ((this.showAddButton || this.showDeleteButton)
-            && (this.showReloadButton
-                || this.showLayoutOptionsButton
-                || this.showColumnsButton
-                || this.showActionsButton
-                || this.showExportButton
-                || this.showSearchInput));
+    get showDivider() {
+        return !this.isEditing && this.openToolbar;
     }
     get showActionsButton() {
-        return this.grid.actions.length > 0;
+        return this.grid.actions.length > 0 && !this.isEditing && this.openToolbar;
     }
     get showExportButton() {
-        return this.grid.showExport;
+        return this.grid.showExport && !this.isEditing && this.openToolbar;
     }
     get showActionAndExportButton() {
         return ((this.showLayoutOptionsButton || this.showColumnsButton)
-            && (this.showActionsButton || this.showExportButton || this.showSearchInput));
-    }
-    get showDivider3() {
-        return ((this.showActionsButton || this.showExportButton) && this.showSearchInput);
+            && (this.showActionsButton || this.showExportButton || this.showSearchInput)) && !this.isEditing && this.openToolbar;
     }
     get isEditing() {
         return this.grid.editing;
@@ -2243,6 +2272,10 @@ class TekGrid extends GridEditable {
          * @public
          */
         this.dragColumns = true;
+        /**
+         * Components that will be rendered on toolbar slot
+         */
+        this.toolbarConfig = [];
         /**
          * Enables column resizing
          * @public
@@ -2324,8 +2357,8 @@ class TekGrid extends GridEditable {
         this.groupColumnNames = [];
         this.summaryColumns = [];
         this.groupColumns = [];
-        this.groupedData = [];
         this.toolbarSlotProps = false;
+        this.groupedData = [];
         this.editNewRowsOnly = false;
         this.showCheckboxAllFilter = Config.gridShowCheckboxAllFilter || false;
         this.defaultFilter = {};
@@ -2364,6 +2397,7 @@ class TekGrid extends GridEditable {
         this.showSummaryTotal = this.getInitValue('showSummaryTotal', props.showSummaryTotal, this.showSummaryTotal);
         this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
         this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+        this.toolbarConfig = this.getInitValue('toolbarConfig', props.toolbarConfig, this.toolbarConfig);
         this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
         this.editNewRowsOnly = this.getInitValue('editNewRowsOnly', props.editNewRowsOnly, this.editNewRowsOnly);
         this.mainGrid = this.getInitValue('mainGrid', props.mainGrid, this.mainGrid);
@@ -2661,8 +2695,9 @@ class TekGrid extends GridEditable {
         });
         if (this.groupedData.length > 0) {
             this.addGroupFooters(0);
-            if (this.showSummaryTotal) {
-                this.addSummary();
+            if (this.showSummaryTotal && this.summaryColumns.length > 0) {
+                const summaryRow = this.getSummary();
+                this.groupedData.push(summaryRow);
             }
         }
     }
@@ -2714,14 +2749,79 @@ class TekGrid extends GridEditable {
         for (let i = this.groups.length - 1; i >= groupIndex; i -= 1) {
             if (!this.groups[i].initialized)
                 return;
-            const groupFooterRow = Object.assign({ groupFooter: true, groupIndex: i, groupHeaders: [], groupLabel: this.groups[i].lastGroupHeaderRow.groupLabel, groupValue: this.groups[i].lastGroupHeaderRow.groupValue }, this.summaryData(this.groups[i].footer));
-            // add header for outer groups
-            for (let g = 0; g < i; g += 1) {
-                groupFooterRow.groupHeaders.push(this.groups[g].lastGroupHeaderRow);
-            }
+            const groupFooterRow = this.getGroupFooter(this.groups[i], i);
+            groupFooterRow.groupHeaders = this.getGroupHeaders(groupIndex);
             this.groupedData.push(groupFooterRow);
         }
     }
+    /**
+     * Creates a group footer, calculating its summary data
+     * @param group Group to which this footer is related
+     * @param groupIndex Index of the group
+     * @returns new group footer
+     */
+    getGroupFooter(group, groupIndex) {
+        const groupFooterRow = Object.assign({ groupIndex, groupFooter: true, groupHeaders: [], groupLabel: group.lastGroupHeaderRow.groupLabel, groupValue: group.lastGroupHeaderRow.groupValue }, this.getSummaryData(group.footer));
+        return groupFooterRow;
+    }
+    /**
+     * Gets all of the group headers that belong to the group at the specified index
+     * This method should be called only during the groups creation process because it depends on the
+     * group creation order (because it accesses lastGroupHeaderRow that changes during the creation process)
+     * @param groupIndex
+     * @returns
+     */
+    getGroupHeaders(groupIndex) {
+        const groupHeaders = [];
+        for (let i = 0; i <= groupIndex; i += 1) {
+            groupHeaders.push(this.groups[i].lastGroupHeaderRow);
+        }
+        return groupHeaders;
+    }
+    /**
+     * Updates all footers summary data and the summary total
+     */
+    updateSummary() {
+        this.summary = {};
+        this.groups.forEach((group) => {
+            this.resetFooterVariables(group);
+        });
+        this.groupedData.forEach((row) => {
+            if (this.isGroupHeader(row))
+                return;
+            if (this.isGroupFooter(row)) {
+                this.updateGroupFooterSummary(row);
+                this.resetFooterVariables(this.groups[row.groupIndex]);
+                return;
+            }
+            if (this.isGroupSummary(row)) {
+                this.updateSummaryTotal(row);
+                return;
+            }
+            this.calcSummary(row);
+        });
+    }
+    /**
+     * Takes a group footer and updates its summary data
+     */
+    updateGroupFooterSummary(groupFooter) {
+        const group = this.groups[groupFooter.groupIndex];
+        const summary = this.getSummaryData(group.footer);
+        Object.keys(summary).forEach((key) => {
+            // change properties one by one to avoid changing the object reference
+            groupFooter[key] = summary[key];
+        });
+    }
+    /**
+     * Updates the total summary data
+     */
+    updateSummaryTotal(summaryTotal) {
+        const summary = this.getSummaryData(this.summary);
+        Object.keys(summary).forEach((key) => {
+            // change properties one by one to avoid changing the object reference
+            summaryTotal[key] = summary[key];
+        });
+    }
     resetFooterVariables(group) {
         this.summaryColumns.forEach((column) => {
             group.footer[column.name] = {
@@ -2758,33 +2858,31 @@ class TekGrid extends GridEditable {
         }
     }
     calcSummary(row) {
-        if (this.summaryColumns.length > 0) {
-            this.summaryColumns.forEach((column) => {
-                const columnName = column.name;
-                const rowValue = row[columnName];
-                if (this.isUndefined(this.summary[columnName])) {
-                    this.summary[columnName] = {
-                        count: 0,
-                        sum: undefined,
-                        avg: undefined,
-                        min: undefined,
-                        max: undefined,
-                    };
-                }
-                this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
-                this.groups.forEach((group) => {
-                    this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
-                });
-            });
-        }
-    }
-    addSummary() {
         if (this.summaryColumns.length === 0)
             return;
-        const summaryRow = Object.assign({ groupFooter: true, groupSummary: true }, this.summaryData(this.summary));
-        this.groupedData.push(summaryRow);
+        this.summaryColumns.forEach((column) => {
+            const columnName = column.name;
+            const rowValue = this.getVisibleValue(row, column);
+            if (this.isUndefined(this.summary[columnName])) {
+                this.summary[columnName] = {
+                    count: 0,
+                    sum: undefined,
+                    avg: undefined,
+                    min: undefined,
+                    max: undefined,
+                };
+            }
+            this.calcSummaryValues(columnName, this.summary[columnName], rowValue);
+            this.groups.forEach((group) => {
+                this.calcSummaryValues(columnName, group.footer[columnName], rowValue);
+            });
+        });
     }
-    summaryData(group) {
+    getSummary() {
+        const summaryRow = Object.assign({ groupFooter: true, groupSummary: true }, this.getSummaryData(this.summary));
+        return summaryRow;
+    }
+    getSummaryData(group) {
         const summaryData = {};
         this.summaryColumns.forEach((column) => {
             const { aggregation } = column;
@@ -3177,12 +3275,32 @@ class TekGrid extends GridEditable {
     isGroupHeader(row) {
         return row.groupHeader;
     }
+    /**
+     * Checks if a row is a group footer, adding typescript type-checking
+     */
+    isGroupFooter(row) {
+        return row.groupFooter && !row.groupSummary;
+    }
+    /**
+     * Checks if a row is a summary, adding typescript type-checking
+     */
+    isGroupSummary(row) {
+        return row.groupSummary;
+    }
     /**
      * Checks if a row is the last grouping of the grid (the most internal grouping)
      */
     isLastGrouping(group) {
         return group.groupColumnName === this.groupColumns[this.groupColumns.length - 1].name;
     }
+    /**
+     * change event of editable components
+     * - override to call updateSummary on change
+     */
+    changeEditableComponent(column, row, value, component) {
+        super.changeEditableComponent(column, row, value, component);
+        this.updateSummary();
+    }
 }
 
 class TekGridColumnsButtonController extends IterableColumnsButtonController {
@@ -3825,6 +3943,10 @@ class TekTreeGrid extends TreeGridEditable {
         this.title = '';
         /* Show Add button */
         this.addButton = false;
+        /**
+         * Components that will be rendered on toolbar slot
+         */
+        this.toolbarConfig = [];
         /* Show edit buttons */
         this.showEditButtons = true;
         /* Show Delete button */
@@ -3943,6 +4065,7 @@ class TekTreeGrid extends TreeGridEditable {
         this.exportConfig = this.getInitValue('exportConfig', props.exportConfig, this.exportConfig);
         this.showCheckboxAllFilter = this.getInitValue('showCheckboxAllFilter', props.showCheckboxAllFilter, this.showCheckboxAllFilter);
         this.defaultFilter = this.getInitValue('defaultFilter', props.defaultFilter, this.defaultFilter);
+        this.toolbarConfig = this.getInitValue('toolbarConfig', props.toolbarConfig, this.toolbarConfig);
         this.toolbarOpened = this.getInitValue('toolbarOpened', props.toolbarOpened, this.toolbarOpened);
         this.exportActions = props.exportActions || this.exportActions;
         this.reportTitle = this.getInitValue('reportTitle', props.reportTitle, this.reportTitle);