@zeedhi/common 1.38.0 → 1.40.0

package/dist/zd-common.umd.js

@@ -55,6 +55,14 @@
            * 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
            */
@@ -70,6 +78,8 @@
           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 = core.KeyMap.factory(props.keyMap || this.keyMap);
           this.createAccessors();
@@ -305,6 +315,8 @@
           this.vertical = false;
           this.defaultValues = {
               name: this.name,
+              dark: this.dark,
+              light: this.light,
               color: this.color,
               text: this.text,
               timeout: this.timeout,
@@ -329,6 +341,8 @@
       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);
@@ -499,10 +513,6 @@
        */
       constructor(props) {
           super(props);
-          /**
-           * Applies the dark theme variant to the component.
-           */
-          this.dark = false;
           /**
            * Specifies the dividing string between items.
            */
@@ -519,19 +529,13 @@
            * 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();
@@ -567,10 +571,6 @@
            * 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
            */
@@ -612,10 +612,6 @@
            * 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
            */
@@ -718,10 +714,6 @@
            * 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.
            */
@@ -731,10 +723,6 @@
            * space between the buttons
            */
           this.group = false;
-          /**
-           * Applies the light theme variant to the component.
-           */
-          this.light = false;
           /**
            * Applies mandatory selected button
            */
@@ -768,10 +756,8 @@
           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);
@@ -825,10 +811,6 @@
            * 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
@@ -855,10 +837,6 @@
            * 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
            */
@@ -933,14 +911,12 @@
           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);
@@ -1055,10 +1031,6 @@
            * 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
            */
@@ -1075,10 +1047,6 @@
            * 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
            */
@@ -1102,7 +1070,6 @@
           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);
@@ -1110,7 +1077,6 @@
           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);
@@ -1323,10 +1289,6 @@
            * 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.
            */
@@ -1343,10 +1305,6 @@
            * 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.
            */
@@ -1415,13 +1373,11 @@
           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);
@@ -3679,18 +3635,10 @@
        */
       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.
            */
@@ -3960,10 +3908,6 @@
            * 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.
            */
@@ -3980,10 +3924,6 @@
            * 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.
            */
@@ -4320,11 +4260,11 @@
        * 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__default["default"](appliedConditions, condition, conditionFunction({ row }));
+          Object.keys(factoredConditions).forEach((condition) => {
+              const conditionFunction = factoredConditions[condition];
+              set__default["default"](appliedConditions, condition, conditionFunction({ row, column: this }));
           });
           return appliedConditions;
       }
@@ -4338,11 +4278,7 @@
           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__default["default"](appliedConditions[action], condition, conditionFunction({ row }));
-              });
+              appliedConditions[action] = Object.assign({}, this.applyCondition(row, factoredConditions));
           });
           return appliedConditions;
       }
@@ -4720,7 +4656,11 @@
           /**
            * Color of the header background
            */
-          this.headerBackground = 'white';
+          this.headerBackground = '';
+          /**
+           * Color of the header cell text color
+           */
+          this.headerCellTextColor = '';
           /**
            * Available order types
            * @public
@@ -4764,6 +4704,8 @@
               },
           };
           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);
@@ -4773,6 +4715,7 @@
           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;
@@ -5075,7 +5018,6 @@
           if (this.editing)
               return;
           if (column.editable) {
-              this.selectedRows = [];
               this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
@@ -5145,7 +5087,7 @@
           else {
               colValue = row[column.name];
           }
-          const componentProps = merge__default["default"]({}, column.componentProps, cellProps.componentProps);
+          const componentProps = merge__default["default"]({}, column.componentProps, cellProps === null || cellProps === void 0 ? void 0 : cellProps.componentProps);
           let compEvents = {};
           if (componentProps && componentProps.events) {
               compEvents = core.Event.factory(componentProps.events);
@@ -5432,10 +5374,6 @@
            * 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.
            */
@@ -5460,10 +5398,6 @@
            * 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.
            */
@@ -5478,13 +5412,11 @@
           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);
@@ -5518,10 +5450,6 @@
            * (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)
            */
@@ -5543,10 +5471,6 @@
            * 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
@@ -5565,13 +5489,11 @@
            */
           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);
@@ -5938,6 +5860,7 @@
           this.cachedData = [];
           this.cachedTotal = 0;
           this.formatterFn = core.FormatterParserProvider.getFormatter('ZdSelect');
+          this.pushedValue = null;
           this.loadMoreQtty = 0;
           this.debounceSearch = debounce__default["default"](this.doSearch, 500);
           this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'expand');
@@ -5959,6 +5882,7 @@
               this.dataText = [this.dataText];
           const defaultDatasource = this.getDefaultDatasource(props);
           this.datasource = core.DatasourceFactory.factory(defaultDatasource);
+          this.overrideGet();
           let defaultValue = props.value;
           if (core.Accessor.isAccessorDefinition(props.value)) {
               defaultValue = this.getAccessorValue(props.value);
@@ -5989,6 +5913,16 @@
           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;
       }
@@ -6015,7 +5949,7 @@
               }
               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;
@@ -6074,10 +6008,14 @@
           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;
       }
       /**
@@ -6136,6 +6074,7 @@
               }
               if (!searchValue) {
                   this.setFieldRowValue(null);
+                  this.selectValue = this.selectedData;
                   return false;
               }
               this.setFieldRowValue(searchValue);
@@ -6246,7 +6185,7 @@
               else {
                   this.removePushedValue();
                   this.datasource.search = this.searchValue;
-                  this.datasource.data = this.cachedData;
+                  this.datasource.data = [...this.cachedData];
                   this.datasource.total = this.cachedTotal;
               }
           });
@@ -6259,6 +6198,11 @@
               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();
               }
           });
       }
@@ -6272,7 +6216,7 @@
               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();
@@ -6285,13 +6229,17 @@
           }
           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() {
@@ -6529,10 +6477,6 @@
   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.
            */
@@ -6545,10 +6489,6 @@
            * 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.
            */
@@ -6693,10 +6633,6 @@
            * It can be the name of material or css color in hexa.
            */
           this.color = '';
-          /**
-           * Applies the dark theme.
-           */
-          this.dark = false;
           /**
            * Card position orientation.
            */
@@ -6725,7 +6661,6 @@
           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);
@@ -6952,10 +6887,6 @@
            * 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.
            */
@@ -7038,7 +6969,6 @@
           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);
@@ -7679,10 +7609,6 @@
            * Defines the value color
            */
           this.color = 'primary';
-          /**
-           * Applies the dark theme variant to the component
-           */
-          this.dark = false;
           /**
            * Sets the height for the component
            */
@@ -7691,10 +7617,6 @@
            * Animates the component constantly
            */
           this.indeterminate = false;
-          /**
-           * Applies the light theme variant to the component
-           */
-          this.light = false;
           /**
            * Render components on the progress component
            */
@@ -7706,10 +7628,8 @@
           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();
@@ -7936,20 +7856,23 @@
       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 = [];
@@ -8126,7 +8049,7 @@
       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
@@ -8134,10 +8057,16 @@
       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();
           });
       }
       /**
@@ -8331,6 +8260,9 @@
               }
               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;
           }
@@ -8514,7 +8446,7 @@
           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
@@ -8635,6 +8567,10 @@
            * 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
            */
@@ -8649,6 +8585,7 @@
            * 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);
@@ -8666,6 +8603,7 @@
           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];
@@ -8679,6 +8617,24 @@
           }
           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,
@@ -8816,8 +8772,41 @@
       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;
+          }
       }
   }
 
@@ -8843,6 +8832,7 @@
            * 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();
@@ -8859,6 +8849,34 @@
       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;
+              });
+          }
+      }
   }
 
   /**
@@ -8944,14 +8962,6 @@
            * 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
            */
@@ -8963,9 +8973,7 @@
           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);
@@ -10128,7 +10136,6 @@
           if (this.editing)
               return;
           if (column.editable) {
-              this.selectedRows = [];
               this.editing = true;
               this.preventRowClick = true;
               this.datasource.currentRow = row;
@@ -10851,6 +10858,16 @@
   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;
@@ -11082,11 +11099,256 @@
           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(core.I18n.instance.language);
+          const clientLogo = '';
+          const enterpriseLogo = '';
+          const productLogo = '';
+          const metadataObj = {
+              name,
+              title,
+              lang,
+              clientLogo,
+              enterpriseLogo,
+              productLogo,
+              version: '1.0',
+              words: {
+                  Page: core.I18n.translate('PAGE'),
+                  Report: core.I18n.translate('REPORT'),
+                  Version: core.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(core.I18n.instance.language);
+          const clientLogo = '';
+          const enterpriseLogo = '';
+          const productLogo = '';
+          const metadataObj = {
+              name,
+              title,
+              lang,
+              clientLogo,
+              enterpriseLogo,
+              productLogo,
+              version: '1.0',
+              words: {
+                  Page: core.I18n.translate('PAGE'),
+                  Report: core.I18n.translate('REPORT'),
+                  Version: core.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) {
@@ -11116,9 +11378,153 @@
               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 {
@@ -11157,6 +11563,12 @@
           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) {
@@ -11170,9 +11582,18 @@
               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__default["default"](rowMetadata, JSON.parse(metadataObj));
+                  dataset = reportType.buildDataset(groupedData, metadataObjClone);
+              }
+              else {
+                  dataset = reportType.buildDataset(data, formattedColumns);
+              }
               const filter = '[]';
               let row = {};
               if (rowObj) {
@@ -11312,6 +11733,8 @@
   exports.TreeGrid = TreeGrid;
   exports.TreeGridEditable = TreeGridEditable;
   exports.WatchURL = WatchURL;
+  exports.XLS2Report = XLS2Report;
+  exports.XLS3Report = XLS3Report;
   exports.XLSReport = XLSReport;
   exports.initTheme = initTheme;