@zeedhi/common 1.38.0 → 1.40.0

package/dist/zd-common.esm.js

@@ -48,6 +48,14 @@ class Component {
          * Controls component visibility.
          */
         this.isVisible = true;
+        /**
+         * Applies the dark theme variant to the component.
+         */
+        this.dark = false;
+        /**
+         * Applies the light theme variant to the component.
+         */
+        this.light = false;
         /**
          * Define component key mapping
          */
@@ -63,6 +71,8 @@ class Component {
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
         this.isVisible = this.getInitValue('isVisible', props.isVisible, this.isVisible);
+        this.dark = this.getInitValue('dark', props.dark, this.dark);
+        this.light = this.getInitValue('light', props.light, this.light);
         this.children = Array.isArray(props.children) ? props.children : this.children;
         this.keyMap = KeyMap.factory(props.keyMap || this.keyMap);
         this.createAccessors();
@@ -298,6 +308,8 @@ class Alert extends Component {
         this.vertical = false;
         this.defaultValues = {
             name: this.name,
+            dark: this.dark,
+            light: this.light,
             color: this.color,
             text: this.text,
             timeout: this.timeout,
@@ -322,6 +334,8 @@ class Alert extends Component {
     assignAlertProperties(alert) {
         this.name = this.getInitValue('name', alert.name, this.defaultValues.name);
         this.color = this.getInitValue('color', alert.color, this.defaultValues.color);
+        this.dark = this.getInitValue('dark', alert.dark, this.defaultValues.dark);
+        this.light = this.getInitValue('light', alert.light, this.defaultValues.light);
         this.text = this.getInitValue('text', alert.text, this.defaultValues.text);
         this.timeout = this.getInitValue('timeout', alert.timeout, this.defaultValues.timeout);
         this.type = this.getInitValue('type', alert.type, this.defaultValues.type);
@@ -492,10 +506,6 @@ class Breadcrumbs extends ComponentRender {
      */
     constructor(props) {
         super(props);
-        /**
-         * Applies the dark theme variant to the component.
-         */
-        this.dark = false;
         /**
          * Specifies the dividing string between items.
          */
@@ -512,19 +522,13 @@ class Breadcrumbs extends ComponentRender {
          * Increase the font-size of the breadcrumb item text to 16px.
          */
         this.large = false;
-        /**
-         * Applies the light theme variant to the component.
-         */
-        this.light = true;
         /**
          * Decrease the font-size of the breadcrumb item text to 12px.
          */
         this.small = false;
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.divider = this.getInitValue('divider', props.divider, this.divider);
         this.items = this.getInitValue('items', props.items, this.items);
         this.large = this.getInitValue('large', props.large, this.large);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
         this.small = this.getInitValue('small', props.small, this.small);
         this.createAccessors();
@@ -560,10 +564,6 @@ class Button extends ComponentRender {
          * It can be the name of material or css color in hexa
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to the button
-         */
-        this.dark = false;
         /**
          * Removes the ability to click or target the button
          */
@@ -605,10 +605,6 @@ class Button extends ComponentRender {
          * This should be used with the absolute or fixed props
          */
         this.left = false;
-        /**
-         * Applies the light theme variant to the button
-         */
-        this.light = false;
         /**
          * Makes the background transparent and applies a thin border
          */
@@ -711,10 +707,6 @@ class ButtonGroup extends ComponentRender {
          * It can be the name of material or css color in hexa
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to the component.
-         */
-        this.dark = false;
         /**
          * Reduces the button size and padding.
          */
@@ -724,10 +716,6 @@ class ButtonGroup extends ComponentRender {
          * space between the buttons
          */
         this.group = false;
-        /**
-         * Applies the light theme variant to the component.
-         */
-        this.light = false;
         /**
          * Applies mandatory selected button
          */
@@ -761,10 +749,8 @@ class ButtonGroup extends ComponentRender {
         this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
         this.borderless = this.getInitValue('block', props.borderless, this.borderless);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('disabled', props.dense, this.dense);
         this.group = this.getInitValue('group', props.group, this.group);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.mandatory = this.getInitValue('mandatory', props.mandatory, this.mandatory);
         this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
         this.rounded = this.getInitValue('rounded', props.rounded, this.rounded);
@@ -818,10 +804,6 @@ class Carousel extends ComponentRender {
          * a non-integer number in slidesPerView, like 1.5)
          */
         this.center = false;
-        /**
-         * Applies the dark theme variant to the carousel pagination
-         */
-        this.dark = false;
         /**
          * Displays the pagination as a fraction in the following format: currentSlide/slidesCount.
          * Only works when <code>showPagination</code> property is true
@@ -848,10 +830,6 @@ class Carousel extends ComponentRender {
          * Allows controlling the carousel using the keyboard arrow keys
          */
         this.keysControl = true;
-        /**
-         * Applies the light theme variant to the carousel
-         */
-        this.light = true;
         /**
          * Allows controlling the carousel using mouse drag
          */
@@ -926,14 +904,12 @@ class Carousel extends ComponentRender {
         this.autoPlay = this.getInitValue('autoPlay', props.autoPlay, this.autoPlay);
         this.buttonsOutside = this.getInitValue('buttonsOutside', props.buttonsOutside, this.buttonsOutside);
         this.center = this.getInitValue('center', props.center, this.center);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.height = this.getInitValue('height', props.height, this.height);
         this.infiniteScroll = this.getInitValue('infiniteScroll', props.infiniteScroll, this.infiniteScroll);
         this.initialSlide = this.getInitValue('initialSlide', props.initialSlide, this.initialSlide);
         this.currentSlide = this.getInitValue('currentSlide', props.currentSlide, this.initialSlide);
         this.interval = this.getInitValue('interval', props.interval, this.interval);
         this.keysControl = this.getInitValue('keysControl', props.keysControl, this.keysControl);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.mouseControl = this.getInitValue('mouseControl', props.mouseControl, this.mouseControl);
         this.nextButton = props.nextButton || this.nextButton;
         this.fractionPagination = this.getInitValue('fractionPagination', props.fractionPagination, this.fractionPagination);
@@ -1048,10 +1024,6 @@ class Card extends ComponentRender {
          * Applies specified color to the control. It can be the name of material color
          */
         this.color = '';
-        /**
-         * Applies the dark theme variant to the component
-         */
-        this.dark = false;
         /**
          * Removes the ability to click or target the component
          */
@@ -1068,10 +1040,6 @@ class Card extends ComponentRender {
          * Specifies an image background for the card
          */
         this.img = '';
-        /**
-         * Applies the light theme variant to the component
-         */
-        this.light = false;
         /**
          * Designates that the card is a link
          */
@@ -1095,7 +1063,6 @@ class Card extends ComponentRender {
         this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
         this.append = this.getInitValue('append', props.append, this.append);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
         this.flat = this.getInitValue('flat', props.flat, this.flat);
@@ -1103,7 +1070,6 @@ class Card extends ComponentRender {
         this.hover = this.getInitValue('hover', props.hover, this.hover);
         this.href = this.getInitValue('href', props.href, this.href);
         this.img = this.getInitValue('img', props.img, this.img);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.link = this.getInitValue('link', props.link, this.link);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
@@ -1316,10 +1282,6 @@ class Input extends ComponentRender {
          * It can be the name of material or css color in hexa.
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to the input.
-         */
-        this.dark = false;
         /**
          * Defines smaller input.
          */
@@ -1336,10 +1298,6 @@ class Input extends ComponentRender {
          * Defines the input label.
          */
         this.label = '';
-        /**
-         * Applies the light theme variant to the input.
-         */
-        this.light = false;
         /**
          * Applies a custom character mask to the input.
          */
@@ -1408,13 +1366,11 @@ class Input extends ComponentRender {
         this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.clearable = this.getInitValue('clearable', props.clearable, this.clearable);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.hint = this.getInitValue('hint', props.hint, this.hint);
         this.autoHintDetails = this.getInitValue('autoHintDetails', props.autoHintDetails, this.autoHintDetails);
         this.label = this.getInitValue('label', props.label, this.label);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.mask = this.getInitValue('mask', props.mask, this.mask);
         this.maxLength = this.getInitValue('maxLength', props.maxLength, this.maxLength);
         this.persistentHint = this.getInitValue('persistentHint', props.persistentHint, this.persistentHint);
@@ -3672,18 +3628,10 @@ class Divider extends ComponentRender {
      */
     constructor(props) {
         super(props);
-        /**
-         * Applies the dark theme variant to the component.
-         */
-        this.dark = false;
         /**
          * Adds indentation (72px) for normal dividers, reduces max height for vertical.
          */
         this.inset = false;
-        /**
-         * Applies the light theme variant to the component.
-         */
-        this.light = false;
         /**
          * Displays dividers vertically.
          */
@@ -3953,10 +3901,6 @@ class Footer extends ComponentRender {
          * Applies specified color to the control. It can be the name of material or css color in hexa.
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to footer.
-         */
-        this.dark = false;
         /**
          * Applies position fixed to footer.
          */
@@ -3973,10 +3917,6 @@ class Footer extends ComponentRender {
          * Render components on the left of footer.
          */
         this.leftSlot = [];
-        /**
-         * Applies the light theme variant to the footer.
-         */
-        this.light = false;
         /**
          * Remove all padding from the footer.
          */
@@ -4313,11 +4253,11 @@ class Column extends Component {
      * Apply conditions
      * @param row Datasource row
      */
-    applyCondition(row) {
+    applyCondition(row, factoredConditions = this.factoredConditions) {
         const appliedConditions = {};
-        Object.keys(this.factoredConditions).forEach((condition) => {
-            const conditionFunction = this.factoredConditions[condition];
-            set(appliedConditions, condition, conditionFunction({ row }));
+        Object.keys(factoredConditions).forEach((condition) => {
+            const conditionFunction = factoredConditions[condition];
+            set(appliedConditions, condition, conditionFunction({ row, column: this }));
         });
         return appliedConditions;
     }
@@ -4331,11 +4271,7 @@ class Column extends Component {
         const appliedConditions = {};
         Object.keys(this.actionFactoredConditions).forEach((action) => {
             const factoredConditions = this.actionFactoredConditions[action];
-            appliedConditions[action] = {};
-            Object.keys(factoredConditions).forEach((condition) => {
-                const conditionFunction = factoredConditions[condition];
-                set(appliedConditions[action], condition, conditionFunction({ row }));
-            });
+            appliedConditions[action] = Object.assign({}, this.applyCondition(row, factoredConditions));
         });
         return appliedConditions;
     }
@@ -4713,7 +4649,11 @@ class Grid extends Iterable {
         /**
          * Color of the header background
          */
-        this.headerBackground = 'white';
+        this.headerBackground = '';
+        /**
+         * Color of the header cell text color
+         */
+        this.headerCellTextColor = '';
         /**
          * Available order types
          * @public
@@ -4757,6 +4697,8 @@ class Grid extends Iterable {
             },
         };
         this.dense = this.getInitValue('dense', props.dense, this.dense);
+        this.dark = this.getInitValue('dark', props.dark, this.dark);
+        this.light = this.getInitValue('light', props.light, this.light);
         this.selectable = this.getInitValue('selectable', props.selectable, this.selectable);
         this.height = this.getInitValue('height', props.height, this.height);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
@@ -4766,6 +4708,7 @@ class Grid extends Iterable {
         this.showFooter = this.getInitValue('showFooter', props.showFooter, this.showFooter);
         this.showHeader = this.getInitValue('showHeader', props.showHeader, this.showHeader);
         this.headerBackground = this.getInitValue('headerBackground', props.headerBackground, this.headerBackground);
+        this.headerCellTextColor = this.getInitValue('headerCellTextColor', props.headerCellTextColor, this.headerCellTextColor);
         this.dragColumns = this.getInitValue('dragColumns', props.dragColumns, this.dragColumns);
         this.resizeColumns = this.getInitValue('resizeColumns', props.resizeColumns, this.resizeColumns);
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
@@ -5068,7 +5011,6 @@ class GridEditable extends Grid {
         if (this.editing)
             return;
         if (column.editable) {
-            this.selectedRows = [];
             this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
@@ -5138,7 +5080,7 @@ class GridEditable extends Grid {
         else {
             colValue = row[column.name];
         }
-        const componentProps = merge({}, column.componentProps, cellProps.componentProps);
+        const componentProps = merge({}, column.componentProps, cellProps === null || cellProps === void 0 ? void 0 : cellProps.componentProps);
         let compEvents = {};
         if (componentProps && componentProps.events) {
             compEvents = Event.factory(componentProps.events);
@@ -5425,10 +5367,6 @@ class Header extends ComponentRender {
          * Applies specified color to the control. It can be the name of material or css color in hexa.
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to header.
-         */
-        this.dark = false;
         /**
          * Designates that the application menu positioned on the left is below the header.
          */
@@ -5453,10 +5391,6 @@ class Header extends ComponentRender {
          * Render components on the left of header.
          */
         this.leftSlot = [];
-        /**
-         * Applies the light theme variant to the header.
-         */
-        this.light = false;
         /**
          * Removes internal padding from header.
          */
@@ -5471,13 +5405,11 @@ class Header extends ComponentRender {
         this.clippedLeft = this.getInitValue('clippedLeft', props.clippedLeft, this.clippedLeft);
         this.clippedRight = this.getInitValue('clippedRight', props.clippedRight, this.clippedRight);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.height = this.getInitValue('height', props.height, this.height);
         this.leftSlot = props.leftSlot || this.leftSlot;
-        this.light = this.getInitValue('light', props.light, this.light);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
@@ -5511,10 +5443,6 @@ class Icon extends ComponentRender {
          * (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).
          */
         this.color = '';
-        /**
-         * Applies the dark theme variant to the component.
-         */
-        this.dark = false;
         /**
          * Makes icon smaller (20px)
          */
@@ -5536,10 +5464,6 @@ class Icon extends ComponentRender {
          * of a button when placed to the left of another element or text
          */
         this.left = false;
-        /**
-         * Applies the light theme variant to the component.
-         */
-        this.light = false;
         /**
          * Applies appropriate margins to the icon inside of
          * a button when placed to the right of another element or text
@@ -5558,13 +5482,11 @@ class Icon extends ComponentRender {
          */
         this.tag = 'i';
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
         this.large = this.getInitValue('large', props.large, this.large);
         this.left = this.getInitValue('left', props.left, this.left);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.right = this.getInitValue('right', props.right, this.right);
         this.size = this.getInitValue('size', props.size, this.size);
         this.small = this.getInitValue('small', props.small, this.small);
@@ -5931,6 +5853,7 @@ class Select extends TextInput {
         this.cachedData = [];
         this.cachedTotal = 0;
         this.formatterFn = FormatterParserProvider.getFormatter('ZdSelect');
+        this.pushedValue = null;
         this.loadMoreQtty = 0;
         this.debounceSearch = debounce(this.doSearch, 500);
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'expand');
@@ -5952,6 +5875,7 @@ class Select extends TextInput {
             this.dataText = [this.dataText];
         const defaultDatasource = this.getDefaultDatasource(props);
         this.datasource = DatasourceFactory.factory(defaultDatasource);
+        this.overrideGet();
         let defaultValue = props.value;
         if (Accessor.isAccessorDefinition(props.value)) {
             defaultValue = this.getAccessorValue(props.value);
@@ -5982,6 +5906,16 @@ class Select extends TextInput {
         const searchIn = (((_a = field.datasource) === null || _a === void 0 ? void 0 : _a.searchIn) || []).concat(searchInDefault);
         return Object.assign(Object.assign({}, field.datasource), { searchIn, lazyLoad: (field.value !== '' && field.value !== undefined) || (field.datasource && field.datasource.lazyLoad) });
     }
+    overrideGet() {
+        const oldGet = this.datasource.get;
+        this.datasource.get = () => __awaiter(this, void 0, void 0, function* () {
+            yield oldGet.call(this.datasource);
+            if (this.indexOf(this.value) !== -1 || this.datasource.search || this.isFocused)
+                return;
+            yield this.setValue(this.value, false);
+            this.removePushedValue();
+        });
+    }
     get search() {
         return this.searchValue;
     }
@@ -6008,7 +5942,7 @@ class Select extends TextInput {
             }
             if (this.manualMode)
                 return;
-            this.cachedData = this.datasource.data;
+            this.cachedData = [...this.datasource.data];
             this.cachedTotal = this.datasource.total;
             if (pushed) {
                 this.pushedValue = this.selectedData;
@@ -6067,10 +6001,14 @@ class Select extends TextInput {
         if (!this.pushedValue && this.isFilledObj(this.selectValue) && this.indexOf(this.selectValue) === -1) {
             this.pushedValue = this.selectValue;
         }
-        if (this.isFilledObj(this.pushedValue) && this.indexOf(this.pushedValue) === -1) {
+        const index = this.indexOf(this.pushedValue);
+        if (this.isFilledObj(this.pushedValue) && index === -1) {
             this.datasource.data.unshift(this.pushedValue);
         }
-        this.cachedData = this.datasource.data;
+        else if (index !== 0) {
+            this.pushedValue = null;
+        }
+        this.cachedData = [...this.datasource.data];
         this.cachedTotal = this.datasource.total;
     }
     /**
@@ -6129,6 +6067,7 @@ class Select extends TextInput {
             }
             if (!searchValue) {
                 this.setFieldRowValue(null);
+                this.selectValue = this.selectedData;
                 return false;
             }
             this.setFieldRowValue(searchValue);
@@ -6239,7 +6178,7 @@ class Select extends TextInput {
             else {
                 this.removePushedValue();
                 this.datasource.search = this.searchValue;
-                this.datasource.data = this.cachedData;
+                this.datasource.data = [...this.cachedData];
                 this.datasource.total = this.cachedTotal;
             }
         });
@@ -6252,6 +6191,11 @@ class Select extends TextInput {
             yield this.datasource.setLimit(this.datasource.limit + this.loadMoreQtty);
             if (!this.datasource.search) {
                 this.afterLoad();
+                const { dataValue } = this;
+                const isSelected = this.selectValue && this.pushedValue && this.selectValue[dataValue] === this.pushedValue[dataValue];
+                if (isSelected)
+                    return;
+                this.removePushedValue();
             }
         });
     }
@@ -6265,7 +6209,7 @@ class Select extends TextInput {
             this.datasource.search = '';
             this.dirtySearchValue = '';
             if (!this.manualMode) {
-                this.datasource.data = this.cachedData;
+                this.datasource.data = [...this.cachedData];
                 this.datasource.total = this.cachedTotal;
             }
             this.checkValueOnBlur();
@@ -6278,13 +6222,17 @@ class Select extends TextInput {
         }
         if (this.manualMode)
             return;
-        if (this.isFilledObj(this.selectValue)) {
-            if (this.indexOf(this.selectValue) === -1) {
-                this.datasource.data.unshift(this.selectValue);
-                this.pushedValue = this.selectValue;
+        if (this.isFilledObj(this.selectValue) && this.indexOf(this.selectValue) === -1) {
+            if (this.pushedValue) {
+                this.removePushedValue();
             }
+            this.datasource.data.unshift(this.selectValue);
+            this.pushedValue = this.selectValue;
             return;
         }
+        const { dataValue } = this;
+        if (this.pushedValue && this.selectValue && this.selectValue[dataValue] === this.pushedValue[dataValue])
+            return;
         this.removePushedValue();
     }
     showLoadMore() {
@@ -6522,10 +6470,6 @@ class ItemNotFoundError extends Error {
 class List extends ComponentRender {
     constructor(props) {
         super(props);
-        /**
-         * Applies the dark theme variant to the List.
-         */
-        this.dark = false;
         /**
          * Create the list with smaller items.
          */
@@ -6538,10 +6482,6 @@ class List extends ComponentRender {
          * Render list with dividers between the items.
          */
         this.divided = false;
-        /**
-         * Applies the light theme variant to the List.
-         */
-        this.light = false;
         /**
          * Increases the height of all the list items to better support three lines of text.
          */
@@ -6686,10 +6626,6 @@ class Login extends ComponentRender {
          * It can be the name of material or css color in hexa.
          */
         this.color = '';
-        /**
-         * Applies the dark theme.
-         */
-        this.dark = false;
         /**
          * Card position orientation.
          */
@@ -6718,7 +6654,6 @@ class Login extends ComponentRender {
         this.bottomLink = props.bottomLink || this.bottomLink;
         this.cardWidth = this.getInitValue('cardWidth', props.cardWidth, this.cardWidth);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.layout = this.getInitValue('layout', props.layout, this.layout);
         this.logo = this.getInitValue('logo', props.logo, this.logo);
         this.logoMessage = this.getInitValue('logoMessage', props.logoMessage, this.logoMessage);
@@ -6945,10 +6880,6 @@ class Menu extends ComponentRender {
          * Defines if the menu should have a visible container
          */
         this.floating = false;
-        /**
-         * Applies the dark theme variant to the menu.
-         */
-        this.dark = false;
         /**
          * Create the menu with smaller items.
          */
@@ -7031,7 +6962,6 @@ class Menu extends ComponentRender {
         this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.floating = this.getInitValue('floating', props.floating, this.floating);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.mini = this.getInitValue('mini', props.mini, this.mini);
         this.miniState = this.getInitValue('miniState', props.miniState, this.miniState);
@@ -7672,10 +7602,6 @@ class Progress extends ComponentRender {
          * Defines the value color
          */
         this.color = 'primary';
-        /**
-         * Applies the dark theme variant to the component
-         */
-        this.dark = false;
         /**
          * Sets the height for the component
          */
@@ -7684,10 +7610,6 @@ class Progress extends ComponentRender {
          * Animates the component constantly
          */
         this.indeterminate = false;
-        /**
-         * Applies the light theme variant to the component
-         */
-        this.light = false;
         /**
          * Render components on the progress component
          */
@@ -7699,10 +7621,8 @@ class Progress extends ComponentRender {
         this.backgroundColor = this.getInitValue('backgroundColor', props.backgroundColor, this.backgroundColor);
         this.backgroundOpacity = this.getInitValue('backgroundOpacity', props.backgroundOpacity, this.backgroundOpacity);
         this.color = this.getInitValue('color', props.color, this.color);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.height = this.getInitValue('height', props.height, this.height);
         this.indeterminate = this.getInitValue('indeterminate', props.indeterminate, this.indeterminate);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.centerSlot = this.getInitValue('centerSlot', props.centerSlot, this.centerSlot);
         this.value = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
@@ -7929,20 +7849,23 @@ class SelectMultiple extends Select {
     set selectValue(rows) {
         if (!Array.isArray(rows))
             return;
-        if (!this.manualMode && this.insertedValues.length > 0) {
-            this.insertsRemoved = [];
+        if (!this.manualMode) {
             const values = rows.map((row) => row[this.dataValue]);
-            this.insertedValues = this.insertedValues.filter((inserted) => {
-                const removed = !values.includes(inserted[this.dataValue]);
-                if (removed) {
-                    this.insertsRemoved.push(inserted);
-                }
-                return !removed;
-            });
+            this.cutFromAToB(this.insertedValues, this.insertsRemoved, (value) => !values.includes(value[this.dataValue]));
+            this.cutFromAToB(this.insertsRemoved, this.insertedValues, (value) => values.includes(value[this.dataValue]));
         }
         this.selectedValue = rows;
         this.setFieldValue(this.getValues(rows));
     }
+    /**
+     * Removes item from array a and add it to array b if condition is satisfied
+     */
+    cutFromAToB(a, b, condition) {
+        const indices = a.reduce((result, value, index) => (condition(value) ? [...result, index] : result), []);
+        indices.forEach((index) => {
+            b.push(a.splice(index)[0]);
+        });
+    }
     setFieldValue(value) {
         return __awaiter(this, void 0, void 0, function* () {
             const promises = [];
@@ -8119,7 +8042,7 @@ class SelectMultiple extends Select {
     showLoadMore() {
         return !!this.datasource.data.length
             && !this.datasource.loadAll
-            && (this.datasource.data.length - this.insertedValues.length) < this.datasource.total;
+            && (this.datasource.data.length - this.insertedValues.length - this.insertsRemoved.length) < this.datasource.total;
     }
     /**
      * Load more data
@@ -8127,10 +8050,16 @@ class SelectMultiple extends Select {
     loadMore() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.datasource.setLimit(this.datasource.limit + this.loadMoreQtty);
+            this.insertsRemoved = this.insertsRemoved.filter((insert) => {
+                const value = insert[this.dataValue];
+                const foundInData = this.datasource.data.find(this.getCondition(value));
+                return !foundInData;
+            });
+            this.insertSelected();
             if (!this.datasource.search) {
                 this.setCache();
             }
-            this.insertSelected();
+            this.removePushedValue();
         });
     }
     /**
@@ -8324,6 +8253,9 @@ class TreeDataStructure {
             }
             return item;
         });
+        if (parent) { // remove all existing children to add new ones
+            this.treeData = this.treeData.filter((item) => item.tree__parent !== parent);
+        }
         if (!parent) {
             this.treeData = childData;
         }
@@ -8507,7 +8439,7 @@ class TreeDataStructure {
         this.treeStructure = {};
         const childData = this.originalDatasource.data.map((row) => (Object.assign(Object.assign({}, row), { tree__children: [], tree__opened: false, tree__searched: true, tree__level: 1, tree__parent: undefined })));
         this.treeData = childData;
-        this.treeStructure['no-parent'] = this.originalDatasource.data;
+        this.treeStructure['no-parent'] = childData;
     }
     /**
      * Search value against a memory datasource
@@ -8628,6 +8560,10 @@ class SelectTree extends TextInput {
          * Defines if field value should be an object
          */
         this.returnObject = false;
+        /**
+         * Prevents load select data when the input is focused
+         */
+        this.preventLoadOnFocus = true;
         /**
          * Field used to make the item disabled
          */
@@ -8642,6 +8578,7 @@ class SelectTree extends TextInput {
          * Defines if should wait and not execute GET method when Datasource is created
          */
         this.lazyLoad = true;
+        this.selectValue = null;
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
         this.flattenSearchResults = this.getInitValue('flattenSearchResults', props.flattenSearchResults, this.flattenSearchResults);
@@ -8659,6 +8596,7 @@ class SelectTree extends TextInput {
         this.dataValue = this.getInitValue('dataValue', props.dataValue, this.dataValue);
         this.dataDisabled = this.getInitValue('dataDisabled', props.dataDisabled, this.dataDisabled);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
+        this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
             const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -8672,6 +8610,24 @@ class SelectTree extends TextInput {
         }
         this.createAccessors();
     }
+    focus(event, element) {
+        const _super = Object.create(null, {
+            focus: { get: () => super.focus }
+        });
+        return __awaiter(this, void 0, void 0, function* () {
+            _super.focus.call(this, event, element);
+            this.afterFocus();
+        });
+    }
+    afterFocus() {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.preventLoadOnFocus) {
+                yield ((_a = this.datasource) === null || _a === void 0 ? void 0 : _a.get());
+                this.preventLoadOnFocus = true;
+            }
+        });
+    }
     createDataStructure() {
         this.treeDataStructure = new TreeDataStructure({
             datasource: this.datasource,
@@ -8809,8 +8765,41 @@ class SelectTree extends TextInput {
     get searchValue() {
         return this.lastInputValue;
     }
+    clearRow(row) {
+        const result = Object.assign({}, row);
+        Object.keys(result).forEach((key) => {
+            if (key.indexOf('tree__') === 0) {
+                delete result[key];
+            }
+        });
+        return result;
+    }
+    get value() {
+        if (!this.selectValue)
+            return this.selectValue;
+        if (this.returnObject) {
+            return this.clearRow(this.selectValue.row);
+        }
+        return this.selectValue;
+    }
+    set value(value) {
+        this.selectValue = value;
+    }
     setValue(value) {
-        this.value = value;
+        if (this.returnObject) {
+            if (typeof value !== 'object') {
+                this.value = { id: value };
+            }
+            else {
+                this.value = { id: value[this.dataValue] };
+            }
+        }
+        else if (typeof value === 'object') {
+            this.value = value[this.dataValue];
+        }
+        else {
+            this.value = value;
+        }
     }
 }
 
@@ -8836,6 +8825,7 @@ class SelectTreeMultiple extends SelectTree {
          * Selected Nodes
          */
         this.selectedNodes = [];
+        this.selectValue = [];
         this.flat = this.getInitValue('flat', props.flat, this.flat);
         this.limit = this.getInitValue('limit', props.limit, this.limit);
         this.createAccessors();
@@ -8852,6 +8842,34 @@ class SelectTreeMultiple extends SelectTree {
     deselect(node, element) {
         this.callEvent('onDeselect', { element, component: this, node });
     }
+    get value() {
+        if (this.returnObject) {
+            return this.selectValue.map((value) => this.clearRow(value.row));
+        }
+        return this.selectValue;
+    }
+    set value(value) {
+        this.selectValue = value;
+    }
+    setValue(value) {
+        const arrValue = Array.isArray(value) ? value : [value];
+        if (this.returnObject) {
+            this.value = arrValue.map((item) => {
+                if (typeof item !== 'object') {
+                    return { id: item };
+                }
+                return { id: item[this.dataValue] };
+            });
+        }
+        else {
+            this.value = arrValue.map((item) => {
+                if (typeof item === 'object') {
+                    return item[this.dataValue];
+                }
+                return item;
+            });
+        }
+    }
 }
 
 /**
@@ -8937,14 +8955,6 @@ class Steppers extends ComponentRender {
          * Array of steppers items
          */
         this.items = [];
-        /**
-         * Applies the dark theme variant to the stepper
-         */
-        this.dark = false;
-        /**
-         * Applies the light theme variant to the stepper
-         */
-        this.light = false;
         /**
          * Allow user to jump to any step
          */
@@ -8956,9 +8966,7 @@ class Steppers extends ComponentRender {
         this.activeStep = this.getInitValue('activeStep', props.activeStep, this.activeStep);
         this.altLabels = this.getInitValue('altLabels', props.altLabels, this.altLabels);
         this.content = this.getInitValue('content', props.content, this.content);
-        this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.items = this.getInitValue('items', props.items, this.items);
-        this.light = this.getInitValue('light', props.light, this.light);
         this.nonLinear = this.getInitValue('nonLinear', props.nonLinear, this.nonLinear);
         this.vertical = this.getInitValue('vertical', props.vertical, this.vertical);
         this.steps = this.getInitValue('steps', props.steps, this.steps);
@@ -10121,7 +10129,6 @@ class TreeGridEditable extends TreeGrid {
         if (this.editing)
             return;
         if (column.editable) {
-            this.selectedRows = [];
             this.editing = true;
             this.preventRowClick = true;
             this.datasource.currentRow = row;
@@ -10844,6 +10851,16 @@ WatchURL.watchers = {};
 WatchURL.originalEvents = new Map();
 
 class BaseReport {
+    constructor() {
+        this.expressionZeedhiToXls = {
+            AVG: 'AVERAGE',
+            COUNT: 'COUNTA',
+            MAX: 'MAX',
+            MIN: 'MIN',
+            SUM: 'SUM',
+        };
+        this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+    }
     buildColumns(columns) {
         const widths = {};
         let totalWidth;
@@ -11075,11 +11092,256 @@ class XLSReport extends BaseReport {
         this.route = '/generateXLS';
     }
     buildDataset(data, columns) {
+        const result = this.formatRawDataSet(data, columns);
+        return JSON.stringify(result);
+    }
+    // formata o dataset para o formato "cru" xls
+    formatRawDataSet(data, columns) {
         const columnNames = columns.map((col) => col.name);
         const result = data.reduce((reduced, row) => {
             const values = columnNames.map((col) => row[col] || '');
             return [...reduced, values];
         }, [columnNames]);
+        return result;
+    }
+    buildMetadata(name, title, columns, filter) {
+        const builtCols = this.buildColumns(columns);
+        const builtFilters = this.buildFilter(filter || {});
+        const lang = this.formatLangCode(I18n.instance.language);
+        const clientLogo = '';
+        const enterpriseLogo = '';
+        const productLogo = '';
+        const metadataObj = {
+            name,
+            title,
+            lang,
+            clientLogo,
+            enterpriseLogo,
+            productLogo,
+            version: '1.0',
+            words: {
+                Page: I18n.translate('PAGE'),
+                Report: I18n.translate('REPORT'),
+                Version: I18n.translate('VERSION'),
+            },
+            staticData: {},
+            groups: [],
+            reportName: name,
+            widgetLabel: title,
+            orientation: 'PORTRAIT',
+            columns: builtCols,
+            filter: builtFilters,
+            reportXLS: true,
+            xlsMergedCell: [],
+        };
+        return Promise.resolve(JSON.stringify(metadataObj));
+    }
+}
+
+// XLS with groups
+class XLS2Report extends BaseReport {
+    constructor() {
+        super(...arguments);
+        this.route = '/generateXLS';
+    }
+    buildDataset(data, metadata) {
+        const result = this.formatDataSet(metadata, data);
+        return JSON.stringify(result);
+    }
+    buildMetadata(name, title, columns, filter) {
+        const builtCols = this.buildColumns(columns);
+        const builtFilters = this.buildFilter(filter || {});
+        const lang = this.formatLangCode(I18n.instance.language);
+        const clientLogo = '';
+        const enterpriseLogo = '';
+        const productLogo = '';
+        const metadataObj = {
+            name,
+            title,
+            lang,
+            clientLogo,
+            enterpriseLogo,
+            productLogo,
+            version: '1.0',
+            words: {
+                Page: I18n.translate('PAGE'),
+                Report: I18n.translate('REPORT'),
+                Version: I18n.translate('VERSION'),
+            },
+            staticData: {},
+            groups: [],
+            reportName: name,
+            widgetLabel: title,
+            orientation: 'PORTRAIT',
+            columns: builtCols,
+            filter: builtFilters,
+            reportXLS: true,
+            xlsMergedCell: [],
+        };
+        return Promise.resolve(JSON.stringify(metadataObj));
+    }
+    // Ordenar o nome das colunas de acordo com seu index, e sempre deixando as colunas agrupadas nas primeiras posições
+    getColumnsName(columns, metaData, lengthGroup) {
+        const columnsNameGroup = metaData.groups.map((row) => row.field);
+        let columnsName = [];
+        const columnsGroupName = [];
+        Object.entries(columns).forEach((row) => {
+            const columnName = row[0];
+            const index = row[1].sequence;
+            if (columnsNameGroup.indexOf(columnName) === -1) {
+                columnsName[index + lengthGroup] = columnName;
+            }
+            else {
+                columnsGroupName.push(columnName);
+            }
+        });
+        columnsName = columnsGroupName.concat(columnsName);
+        columnsName = columnsName.filter((columnName) => typeof columnName === 'string');
+        return columnsName;
+    }
+    // Inicializa alguns valores auxiliares
+    initVars(metaData) {
+        metaData.xlsMergedCell = [];
+        const { columns } = metaData;
+        const lengthGroup = metaData.groups.length;
+        const indexLastGroup = lengthGroup - 1;
+        let columnsName = [];
+        columnsName = this.getColumnsName(columns, metaData, lengthGroup);
+        const rowValues = [];
+        const formatedDataSet = [];
+        const groups = [];
+        groups.groupEnd = {};
+        groups.groupEnd.cellsfunc = {};
+        return {
+            columns, indexLastGroup, columnsName, rowValues, formatedDataSet, groups,
+        };
+    }
+    // formata as expressões da linha
+    formatRowFunc(column, columns, row, index, rowValues, funcXlsParam, groups, indexLastGroup) {
+        let funcXls = funcXlsParam;
+        if ((row[column] === 0 || row[column]) && index !== undefined) {
+            const letter = this.colunmXLS[rowValues.length];
+            funcXls = this.expressionZeedhiToXls[columns[column].expression];
+            const cellsfunc = `${letter + groups[index].init}:${letter}${groups[index].end}`;
+            let expression = '';
+            if (indexLastGroup === index) {
+                expression = `=${funcXls}(${cellsfunc})`;
+            }
+            else {
+                expression = `=${funcXls}(${groups[index].cellsfunc[column]})`;
+                if (index === 0) {
+                    if (groups.groupEnd.cellsfunc[column]) {
+                        groups.groupEnd.cellsfunc[column] += `,${groups[index].cellsfunc[column]}`;
+                    }
+                    else {
+                        groups.groupEnd.cellsfunc[column] = groups[index].cellsfunc[column];
+                    }
+                }
+                groups[index].cellsfunc[column] = null;
+            }
+            rowValues.push(expression);
+            groups.forEach((group, indexGroup) => {
+                if (indexGroup !== indexLastGroup) {
+                    if (!group.cellsfunc) {
+                        group.cellsfunc = {};
+                    }
+                    if (group.cellsfunc[column]) {
+                        group.cellsfunc[column] += `,${cellsfunc}`;
+                    }
+                    else {
+                        group.cellsfunc[column] = cellsfunc;
+                    }
+                }
+            });
+        }
+        else {
+            let cell = row[column];
+            if (row.groupSummary) {
+                const groupEndFunc = groups.groupEnd.cellsfunc;
+                if (groupEndFunc[column]) {
+                    funcXls = this.expressionZeedhiToXls[columns[column].expression];
+                    cell = `=${funcXls}(${groupEndFunc[column]})`;
+                }
+            }
+            rowValues.push(cell);
+        }
+    }
+    // formata a linha de grupo de acordo com o formato xls2
+    setRowGroup(row, rowValues, groups, metaData, formatedDataSet, columnsName, columns, indexLastGroup) {
+        const label = `${row.groupLabel}:${row.groupValue}`;
+        const index = row.groupIndex;
+        if (row.groupHeader) {
+            rowValues[index] = label;
+            groups[index] = { init: null, end: null };
+        }
+        else if (row.groupFooter) {
+            if (!row.groupLabel) {
+                rowValues.push('Total');
+            }
+            else {
+                rowValues.push(`Total (${label})`);
+            }
+            const funcXls = null;
+            if (groups[index]) {
+                metaData.xlsMergedCell.push({
+                    start_row: groups[index].init,
+                    start_col: this.colunmXLS[index],
+                    end_row: formatedDataSet.length + 2,
+                    end_col: this.colunmXLS[index],
+                });
+            }
+            columnsName.forEach((column, columnIndex) => {
+                if (!(row.groupFooter && columnIndex === 0)) {
+                    this.formatRowFunc(column, columns, row, index, rowValues, funcXls, groups, indexLastGroup);
+                }
+            });
+        }
+        return rowValues;
+    }
+    // Defina o index dos grupos
+    setIndexGroups(groups, formatedDataSet) {
+        groups.forEach((group) => {
+            if (!group.init) {
+                group.init = formatedDataSet.length + 2;
+            }
+            group.end = formatedDataSet.length + 2;
+        });
+    }
+    // Preenche uma linha "normal"
+    setRowNormal(columnsName, rowValues, row) {
+        columnsName.forEach((column) => {
+            rowValues.push(row[column]);
+        });
+    }
+    formatDataSet(metaData, dataSet) {
+        const initVars = this.initVars(metaData);
+        const { columns, indexLastGroup, columnsName, formatedDataSet, groups, } = initVars;
+        let { rowValues } = initVars;
+        dataSet.forEach((row) => {
+            if (row.group || row.groupFooter) {
+                rowValues = this.setRowGroup(row, rowValues, groups, metaData, formatedDataSet, columnsName, columns, indexLastGroup);
+            }
+            else {
+                this.setIndexGroups(groups, formatedDataSet);
+                this.setRowNormal(columnsName, rowValues, row);
+            }
+            if (!row.groupHeader) {
+                formatedDataSet.push(rowValues);
+            }
+            rowValues = [];
+        });
+        return [columnsName].concat(formatedDataSet);
+    }
+}
+
+// Grid mirror (with groups)
+class XLS3Report extends BaseReport {
+    constructor() {
+        super(...arguments);
+        this.route = '/generateXLS';
+    }
+    buildDataset(data, metadata) {
+        const result = this.formatDataSet(metadata, data);
         return JSON.stringify(result);
     }
     buildMetadata(name, title, columns, filter) {
@@ -11109,9 +11371,153 @@ class XLSReport extends BaseReport {
             orientation: 'PORTRAIT',
             columns: builtCols,
             filter: builtFilters,
+            reportXLS: true,
+            xlsMergedCell: [],
         };
         return Promise.resolve(JSON.stringify(metadataObj));
     }
+    // Ordenar o nome das colunas de acordo com seu index, excluindo o nome das colunas agrupadas
+    getColumnsNameFormat3(columns, metaData) {
+        const columnsNameGroup = metaData.groups.map((row) => row.field);
+        let columnsName = [];
+        Object.entries(columns).forEach((row) => {
+            const columnName = row[0];
+            if (columnsNameGroup.indexOf(columnName) === -1) {
+                const index = row[1].sequence;
+                columnsName[index] = columnName;
+            }
+        });
+        columnsName = columnsName.filter((columnName) => typeof columnName === 'string');
+        return columnsName;
+    }
+    // Inicializa alguns valores auxiliares
+    initVars(metaData) {
+        metaData.xlsMergedCell = [];
+        const { columns } = metaData;
+        const lengthGroup = metaData.groups.length;
+        const indexLastGroup = lengthGroup - 1;
+        let columnsName = [];
+        columnsName = this.getColumnsNameFormat3(columns, metaData);
+        const rowValues = [];
+        const formatedDataSet = [];
+        const groups = [];
+        groups.groupEnd = {};
+        groups.groupEnd.cellsfunc = {};
+        return {
+            columns, indexLastGroup, columnsName, rowValues, formatedDataSet, groups,
+        };
+    }
+    // formata a linha do grupo de acordo com o formato xls3
+    setRowGroupFormat(row, rowValuesParam, groups, formatedDataSet, columnsName, columns, indexLastGroup) {
+        let rowValues = rowValuesParam;
+        const label = `${row.groupLabel}:${row.groupValue}`;
+        const index = row.groupIndex;
+        if (row.groupHeader) {
+            rowValues[index] = label;
+            groups[index] = { init: null, end: null };
+            formatedDataSet.push(rowValues);
+            rowValues = [];
+        }
+        else if (row.groupFooter) {
+            if (!row.groupLabel) {
+                rowValues.push('Total');
+            }
+            else {
+                rowValues.push(`Total (${label})`);
+            }
+            formatedDataSet.push(rowValues);
+            rowValues = [];
+            const funcXls = null;
+            columnsName.forEach((column) => {
+                this.formatRowFunc(column, columns, row, index, rowValues, funcXls, groups, indexLastGroup);
+            });
+        }
+        return rowValues;
+    }
+    // formata as expressões da linha
+    formatRowFunc(column, columns, row, index, rowValues, funcXlsParam, groups, indexLastGroup) {
+        let funcXls = funcXlsParam;
+        if ((row[column] === 0 || row[column]) && index !== undefined) {
+            const letter = this.colunmXLS[rowValues.length];
+            funcXls = this.expressionZeedhiToXls[columns[column].expression];
+            const cellsfunc = `${letter + groups[index].init}:${letter}${groups[index].end}`;
+            let expression = '';
+            if (indexLastGroup === index) {
+                expression = `=${funcXls}(${cellsfunc})`;
+            }
+            else {
+                expression = `=${funcXls}(${groups[index].cellsfunc[column]})`;
+                if (index === 0) {
+                    if (groups.groupEnd.cellsfunc[column]) {
+                        groups.groupEnd.cellsfunc[column] += `,${groups[index].cellsfunc[column]}`;
+                    }
+                    else {
+                        groups.groupEnd.cellsfunc[column] = groups[index].cellsfunc[column];
+                    }
+                }
+                groups[index].cellsfunc[column] = null;
+            }
+            rowValues.push(expression);
+            groups.forEach((group, indexGroup) => {
+                if (indexGroup !== indexLastGroup) {
+                    if (!group.cellsfunc) {
+                        group.cellsfunc = {};
+                    }
+                    if (group.cellsfunc[column]) {
+                        group.cellsfunc[column] += `,${cellsfunc}`;
+                    }
+                    else {
+                        group.cellsfunc[column] = cellsfunc;
+                    }
+                }
+            });
+        }
+        else {
+            let cell = row[column];
+            if (row.groupSummary) {
+                const groupEndFunc = groups.groupEnd.cellsfunc;
+                if (groupEndFunc[column]) {
+                    funcXls = this.expressionZeedhiToXls[columns[column].expression];
+                    cell = `=${funcXls}(${groupEndFunc[column]})`;
+                }
+            }
+            rowValues.push(cell);
+        }
+    }
+    // Defina o index dos grupos
+    setIndexGroups(groups, formatedDataSet) {
+        groups.forEach((group) => {
+            if (!group.init) {
+                group.init = formatedDataSet.length + 2;
+            }
+            group.end = formatedDataSet.length + 2;
+        });
+    }
+    // Preenche uma linha "normal"
+    setRowNormal(columnsName, rowValues, row) {
+        columnsName.forEach((column) => {
+            rowValues.push(row[column]);
+        });
+    }
+    formatDataSet(metaData, dataSet) {
+        const initVars = this.initVars(metaData);
+        const { columns, indexLastGroup, columnsName, formatedDataSet, groups, } = initVars;
+        let { rowValues } = initVars;
+        dataSet.forEach((row) => {
+            if (row.group || row.groupFooter) {
+                rowValues = this.setRowGroupFormat(row, rowValues, groups, formatedDataSet, columnsName, columns, indexLastGroup);
+            }
+            else {
+                this.setIndexGroups(groups, formatedDataSet);
+                this.setRowNormal(columnsName, rowValues, row);
+            }
+            if (!row.groupHeader) {
+                formatedDataSet.push(rowValues);
+            }
+            rowValues = [];
+        });
+        return [columnsName].concat(formatedDataSet);
+    }
 }
 
 class Report {
@@ -11150,6 +11556,12 @@ class Report {
         if (type === 'xls') {
             return new XLSReport();
         }
+        if (type === 'xls2') {
+            return new XLS2Report();
+        }
+        if (type === 'xls3') {
+            return new XLS3Report();
+        }
         throw new Error(`Invalid report type: ${type}`);
     }
     getReport(type, portrait = true, rowObj) {
@@ -11163,9 +11575,18 @@ class Report {
             const reportType = this.getReportType(type);
             const { route } = reportType;
             const { name, columns, datasource } = this.iterable;
+            const { groupedData } = Object.assign({}, this.iterable);
             const formattedColumns = this.removeActionColumns(columns);
-            const dataset = reportType.buildDataset(data, formattedColumns);
             const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
+            let dataset;
+            if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
+                const rowMetadata = rowObj.metaData;
+                const metadataObjClone = merge(rowMetadata, JSON.parse(metadataObj));
+                dataset = reportType.buildDataset(groupedData, metadataObjClone);
+            }
+            else {
+                dataset = reportType.buildDataset(data, formattedColumns);
+            }
             const filter = '[]';
             let row = {};
             if (rowObj) {
@@ -11204,4 +11625,4 @@ class Report {
 
 const AutoNumeric = require('@zeedhi/autonumeric/dist/autoNumeric');
 
-export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLSReport, initTheme };
+export { Alert, AlertService, ApexChart, AutoNumeric, Badge, Breadcrumbs, Button, ButtonGroup, CSVReport, Card, Carousel, Checkbox, CheckboxMultiple, ChildNotFoundError, Chip, CodeEditor, Col, CollapseCard, Column, Component, ComponentRender, Container, Currency, Dashboard, Date$1 as Date, DateRange, Dialog, DialogService, Divider, Dropdown, FileInput, Footer, Form, Frame, FramePage, Grid, GridColumn, GridColumnEditable, GridEditable, Header, Icon, Icons, Image, Increment, Input, Iterable, IterableColumnsButton, IterableColumnsButtonController, IterablePageComponent, IterablePageInfo, IterablePageSize, IterablePagination, List, ListGroup, ListItem, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuButton, MenuGroup, MenuLink, MenuSeparator, Modal, ModalCloseButton, ModalService, Month, Number$1 as Number, PDFReport, Password, Progress, Radio, RangeSlider, Report, Row, Search, Select, SelectMultiple, SelectTree, SelectTreeMultiple, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };