@zeedhi/common 1.39.1 → 1.43.0

package/dist/zd-common.esm.js

@@ -1,7 +1,7 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, isEqual, Router, InstanceNotFoundError, Http, Cookie, normalize, URL as URL$1 } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
+import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
-import merge from 'lodash.merge';
 import set from 'lodash.set';
 
 /**
@@ -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);
@@ -410,8 +424,43 @@ class ApexChart extends ComponentRender {
          * Defines the load progress color
          */
         this.loadColor = 'primary';
+        this.defaultOptions = {
+            chart: {
+                toolbar: {
+                    tools: {
+                        download: 'fileDownload',
+                        selection: 'zoomSelection',
+                        zoom: 'zoom',
+                        zoomin: 'zoomIn',
+                        zoomout: 'zoomOut',
+                        pan: 'zoomPanning',
+                        reset: 'zoomReset',
+                    },
+                },
+                events: {
+                    animationEnd: this.animationEndEvent.bind(this),
+                    beforeMount: this.beforeMountEvent.bind(this),
+                    mounted: this.mountedEvent.bind(this),
+                    updated: this.updatedEvent.bind(this),
+                    click: this.clickEvent.bind(this),
+                    mouseMove: this.mouseMoveEvent.bind(this),
+                    mouseLeave: this.mouseLeaveEvent.bind(this),
+                    legendClick: this.legendClickEvent.bind(this),
+                    markerClick: this.markerClickEvent.bind(this),
+                    selection: this.selectionEvent.bind(this),
+                    dataPointSelection: this.dataPointSelectionEvent.bind(this),
+                    dataPointMouseEnter: this.dataPointMouseEnterEvent.bind(this),
+                    dataPointMouseLeave: this.dataPointMouseLeaveEvent.bind(this),
+                    beforeZoom: this.beforeZoomEvent.bind(this),
+                    beforeResetZoom: this.beforeResetZoomEvent.bind(this),
+                    zoomed: this.zoomedEvent.bind(this),
+                    scrolled: this.scrolledEvent.bind(this),
+                    brushScrolled: this.brushScrolledEvent.bind(this),
+                },
+            },
+        };
         this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
-        this.options = this.getInitValue('options', props.options, this.options);
+        this.options = merge(this.defaultOptions, this.getInitValue('options', props.options, this.options));
         this.series = this.getInitValue('series', props.series, this.series);
         this.height = this.getInitValue('height', props.height, this.height);
         this.width = this.getInitValue('width', props.width, this.width);
@@ -428,6 +477,14 @@ class ApexChart extends ComponentRender {
     setViewUpdate(viewUpdate) {
         this.viewUpdate = viewUpdate;
     }
+    /**
+     * Sets view get icon HTML method.
+     * @param viewGetIconHTML Update method
+     */
+    setViewGetIconHTML(viewGetIconHTML) {
+        this.viewGetIconHTML = viewGetIconHTML;
+        this.updateToolbarIcons();
+    }
     /**
      * Update the chart
      * @param options New options
@@ -442,6 +499,249 @@ class ApexChart extends ComponentRender {
         }
         return Promise.resolve();
     }
+    /**
+     * Fires when the chart’s initial animation is finished
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    animationEndEvent(chartContext, options) {
+        this.callEvent('chartAnimationEnd', { component: this, chartContext, options });
+    }
+    /**
+     * Fires before the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    beforeMountEvent(chartContext, config) {
+        this.callEvent('chartBeforeMount', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires after the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    mountedEvent(chartContext, config) {
+        this.callEvent('chartMounted', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    updatedEvent(chartContext, config) {
+        this.callEvent('chartUpdated', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param event Event that triggered the click event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    clickEvent(event, chartContext, config) {
+        this.callEvent('chartClick', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the click event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    mouseMoveEvent(event, chartContext, config) {
+        this.callEvent('chartMouseMove', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the mouse leave
+     * @param chartContext
+     * @param config New config
+     * @param element DOM Element
+     */
+    mouseLeaveEvent(event, chartContext, config) {
+        this.callEvent('chartMouseLeave', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param chartContext
+     * @param seriesIndex
+     * @param config
+     * @param element DOM Element
+     */
+    legendClickEvent(chartContext, seriesIndex, config) {
+        this.callEvent('chartLegendClick', {
+            component: this, chartContext, seriesIndex, config,
+        });
+    }
+    /**
+     * Fires when user moves mouse on any area of the chart.
+     * @param event Event that triggered the marker click
+     * @param chartContext
+     * @param option New config
+     * @param element DOM Element
+     */
+    markerClickEvent(event, chartContext, config) {
+        this.callEvent('chartMarkerClick', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user selects rect using the selection tool.
+     * The second argument
+     * @param chartContext
+     * @param config contains the yaxis and xaxis coordinates where user made the selection
+     * @param element DOM Element
+     */
+    selectionEvent(chartContext, config) {
+        this.callEvent('chartSelection', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered when user clicks on a datapoint
+     * @param chartContext
+     * @param config The config object, also includes additional information like
+     * which dataPointIndex was selected of which series.
+     * @param element DOM Element
+     */
+    dataPointSelectionEvent(event, chartContext, config) {
+        this.callEvent('chartDataPointSelection', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user clicks on a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered when user’s mouse enter on a datapoint
+     * @param chartContext
+     * @param config The config object, also includes additional information like
+     * which dataPointIndex was hovered of particular series.
+     * @param element DOM Element
+     */
+    dataPointMouseEnterEvent(event, chartContext, config) {
+        this.callEvent('chartDataPointMouseEnter', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * MouseLeave event for a datapoint (bar/column/marker/bubble/donut-slice).
+     * @param event Event that triggered the beforeSlide event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    dataPointMouseLeaveEvent(event, chartContext, config) {
+        this.callEvent('chartDataPointMouseLeave', {
+            event, component: this, chartContext, config,
+        });
+    }
+    /**
+     * This function, if defined, runs just before zooming in/out of the chart
+     * allowing you to set a custom range for zooming in/out.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    beforeZoomEvent(chartContext, config) {
+        this.callEvent('chartBeforeZoom', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * This function, if defined, runs just before the user hits the HOME button
+     * on the toolbar to reset the chart to it’s original state. The function
+     * allows you to set a custom axes range for the initial view of the chart.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    beforeResetZoomEvent(chartContext, config) {
+        this.callEvent('chartBeforeResetZoom', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user zooms in/out the chart using either the selection zooming
+     * tool or zoom in/out buttons.
+     * The 2nd argument includes information of the new xaxis/yaxis generated after zooming.
+     * @param chartContext
+     * @param config { min: timestamp, max: timestamp }
+     * @param element DOM Element
+     */
+    zoomedEvent(chartContext, config) {
+        this.callEvent('chartZoomed', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user scrolls using the pan tool.
+     * The 2nd argument includes information of the new xaxis generated after scrolling.
+     * @param chartContext
+     * @param config { xaxis: any  }
+     * @param element DOM Element
+     */
+    scrolledEvent(chartContext, config) {
+        this.callEvent('chartScrolled', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when user drags the brush in a brush chart.
+     * The 2nd argument includes information of the new axes generated after
+     * scrolling the brush.
+     * @param chartContext
+     * @param config { xaxis: any, yaxis: any  }
+     * @param element DOM Element
+     */
+    brushScrolledEvent(chartContext, config) {
+        this.callEvent('chartBrushScrolled', {
+            component: this, chartContext, config,
+        });
+    }
+    updateToolbarIcons() {
+        var _a, _b, _c;
+        if (!this.viewGetIconHTML)
+            return this.options;
+        const getIconFn = this.viewGetIconHTML;
+        let changed = false;
+        const newOptions = Object.assign({}, this.options);
+        if ((_b = (_a = newOptions.chart) === null || _a === void 0 ? void 0 : _a.toolbar) === null || _b === void 0 ? void 0 : _b.tools) {
+            const { tools } = newOptions.chart.toolbar;
+            Object.keys(tools).forEach((key) => {
+                if (typeof tools[key] === 'string') {
+                    tools[key] = getIconFn(tools[key]);
+                    changed = true;
+                }
+            });
+            if ((_c = tools.customIcons) === null || _c === void 0 ? void 0 : _c.length) {
+                tools.customIcons.forEach((item) => {
+                    item.icon = getIconFn(item.icon);
+                });
+            }
+        }
+        if (this.viewUpdate && changed) {
+            this.viewUpdate(newOptions);
+        }
+        return newOptions;
+    }
 }
 
 /**
@@ -492,10 +792,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 +808,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 +850,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 +891,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 +993,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 +1002,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 +1035,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 +1090,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
@@ -832,6 +1100,16 @@ class Carousel extends ComponentRender {
          * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
          */
         this.height = 'auto';
+        /**
+         * Sets the carousel max height. Example values: 'auto', '100%', '400px',
+         * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the carousel min height. Example values: 'auto', '100%', '400px',
+         * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+         */
+        this.minHeight = 'none';
         /**
          * Configures the carousel as infinite (the slide after the last one is the first slide, and vice-versa)
          */
@@ -848,10 +1126,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 +1200,14 @@ 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.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         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 +1322,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 +1338,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 +1361,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 +1368,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);
@@ -1174,6 +1438,7 @@ class Form extends ComponentRender {
         this.internalValue = {};
         this.align = this.getInitValue('align', props.align, this.align);
         this.justify = this.getInitValue('justify', props.justify, this.justify);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.internalValue = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
     }
@@ -1316,10 +1581,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 +1597,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 +1665,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);
@@ -1773,6 +2028,10 @@ class CodeEditor extends ComponentRender {
          * Max height in pixels. 'none' means no limit.
          */
         this.maxHeight = 'none';
+        /**
+         * Max height in pixels. 'none' means no limit.
+         */
+        this.height = 'auto';
         /**
          * Language code to be used for highlight (js|javascript, css, html, json, ts|typescript, bash|shell)
          * Other languages must be imported above
@@ -1792,6 +2051,7 @@ class CodeEditor extends ComponentRender {
         this.staticCode = this.getInitValue('staticCode', props.staticCode, this.staticCodeValue);
         this.copyIcon = this.getInitValue('copyIcon', props.copyIcon, this.copyIcon);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.language = this.getInitValue('language', props.language, this.language);
         this.showLineNumbers = this.getInitValue('showLineNumbers', props.showLineNumbers, this.showLineNumbers);
         this.createAccessors();
@@ -1998,12 +2258,27 @@ class Container extends ComponentRender {
          * Adds height 100% to container.
          */
         this.fillHeight = false;
+        /**
+         * Sets the height for the component.
+         */
+        this.height = 'auto';
+        /**
+         * Sets the maximum height for the component.
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the minimum height for the component.
+         */
+        this.minHeight = 'none';
         /**
          * Removes viewport maximum-width size breakpoints.
          */
         this.fluid = true;
         this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.createAccessors();
     }
 }
@@ -2341,6 +2616,14 @@ class Dialog extends Component {
          * Dialog type (normal, success, error, warning, info)
          */
         this.type = 'normal';
+        /**
+         * Confirm button component name
+         */
+        this.confirmButton = 'dialogButton';
+        /**
+         * Deny button component name
+         */
+        this.denyButton = undefined;
         /**
          * Default dialog buttons
          * @private
@@ -2352,6 +2635,8 @@ class Dialog extends Component {
                 events: { click: () => this.hide() },
             }];
         this.defaultValues = {
+            confirmButton: this.confirmButton,
+            denyButton: this.denyButton,
             name: this.name,
             maxWidth: this.maxWidth,
             persistent: this.persistent,
@@ -2359,6 +2644,38 @@ class Dialog extends Component {
             title: this.title,
             text: this.text,
         };
+        this.clickDefaultButtonKeyMapping = {
+            enter: {
+                event: () => {
+                    if (this.confirmButton) {
+                        const confirmButton = Metadata.getInstance(this.confirmButton);
+                        if (confirmButton
+                            && confirmButton.events
+                            && confirmButton.events.click
+                            && typeof confirmButton.events.click === 'function') {
+                            confirmButton.events.click({ component: new Button(confirmButton) });
+                        }
+                    }
+                },
+                stop: true,
+            },
+            esc: {
+                event: () => {
+                    if (this.denyButton) {
+                        const denyButton = Metadata.getInstance(this.denyButton);
+                        if (denyButton
+                            && denyButton.events
+                            && denyButton.events.click
+                            && typeof denyButton.events.click === 'function')
+                            denyButton.events.click({ component: new Button(denyButton) });
+                    }
+                    else {
+                        this.hide();
+                    }
+                },
+                stop: true,
+            },
+        };
         this.assignDialogProperties(props);
         this.createAccessors();
     }
@@ -2368,6 +2685,8 @@ class Dialog extends Component {
      */
     assignDialogProperties(dialog) {
         this.buttons = dialog.buttons && dialog.buttons.length ? dialog.buttons : this.defaultButtons;
+        this.confirmButton = this.getInitValue('confirmButton', dialog.confirmButton, this.defaultValues.confirmButton);
+        this.denyButton = this.getInitValue('denyButton', dialog.denyButton, this.defaultValues.denyButton);
         this.name = this.getInitValue('name', dialog.name, this.defaultValues.name);
         this.maxWidth = this.getInitValue('maxWidth', dialog.maxWidth, this.defaultValues.maxWidth);
         this.persistent = this.getInitValue('persistent', dialog.persistent, this.defaultValues.persistent);
@@ -2380,6 +2699,7 @@ class Dialog extends Component {
      * Displays dialog
      */
     show() {
+        KeyMap.bind(this.clickDefaultButtonKeyMapping, this);
         this.isVisible = true;
     }
     /**
@@ -2387,6 +2707,7 @@ class Dialog extends Component {
      */
     hide() {
         this.isVisible = false;
+        KeyMap.unbind(this.clickDefaultButtonKeyMapping, this);
     }
 }
 
@@ -3322,10 +3643,6 @@ class DateRange extends TextInput {
          * Sets the locale. Accepts a string with a BCP 47 language tag.
          */
         this.locale = I18n.instance.language;
-        /**
-         * Defines if dates should be ordered
-         */
-        this.orderedDates = false;
         /**
          * Allows changing displayed month with mouse scroll
          */
@@ -3349,15 +3666,12 @@ class DateRange extends TextInput {
         this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, 'calendar');
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.dateFormat = this.getInitValue('dateFormat', props.dateFormat, this.dateFormat);
-        this.orderedDates = this.getInitValue('orderedDates', props.orderedDates, this.orderedDates);
         this.dateValidation = this.dateValidation.bind(this);
-        this.dateValidateOrder = this.dateValidateOrder.bind(this);
         this.displayFormat = this.getInitValue('displayFormat', props.displayFormat, this.displayFormat);
         this.inputFormat = this.getInitValue('inputFormat', props.inputFormat, this.inputFormat);
         this.firstDayOfWeek = this.getInitValue('firstDayOfWeek', props.firstDayOfWeek, this.firstDayOfWeek);
         this.fullWidth = this.getInitValue('fullWidth', props.fullWidth, this.fullWidth);
         this.locale = this.getInitValue('locale', props.locale, this.locale);
-        this.rules.push(this.dateValidation, this.dateValidateOrder);
         this.scrollable = this.getInitValue('scrollable', props.scrollable, this.scrollable);
         this.showDatePicker = this.getInitValue('showDatePicker', props.showDatePicker, this.showDatePicker);
         this.showWeek = this.getInitValue('showWeek', props.showWeek, this.showWeek);
@@ -3465,7 +3779,7 @@ class DateRange extends TextInput {
         const lastValue = this.value;
         this.dateError = false;
         this.value = this.parseISODateRangeValue(newValue);
-        if (!isEqual(lastValue, this.value))
+        if (!Utils.isEqual(lastValue, this.value))
             this.change(this.value);
     }
     formatISODateRangeValue(dates) {
@@ -3474,13 +3788,13 @@ class DateRange extends TextInput {
             splitedValue = dates;
         else
             splitedValue = this.splitValues(dates);
-        const formatedValue = [];
+        const formattedValue = [];
         splitedValue.forEach((value) => {
             if (value && this.isValidDate(value, this.dateFormat)) {
-                formatedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
+                formattedValue.push(dayjs(value, this.dateFormat, true).format(this.isoFormat));
             }
         });
-        return formatedValue;
+        return formattedValue;
     }
     parseISODateRangeValue(values) {
         const parsedValue = [];
@@ -3491,19 +3805,14 @@ class DateRange extends TextInput {
                 }
             });
         }
-        return parsedValue;
+        return this.sortDates(parsedValue);
+    }
+    sortDates(parsedValue) {
+        return parsedValue.sort((a, b) => (dayjs(a, this.dateFormat).isAfter(dayjs(b, this.dateFormat)) ? 1 : -1));
     }
     dateValidation() {
         return !this.dateError || I18n.translate('VALIDATION_INVALID_DATE');
     }
-    dateValidateOrder() {
-        if (this.value && (this.value.length === 2 && this.orderedDates)) {
-            const date1 = dayjs(this.value[0], this.dateFormat);
-            const date2 = dayjs(this.value[1], this.dateFormat);
-            return (date1.isBefore(date2) || date1.isSame(date2)) || I18n.translate('VALIDATION_INVALID_ORDER_DATE');
-        }
-        return true;
-    }
     click(event, element) {
         super.click(event, element);
         if (!event.defaultPrevented) {
@@ -3511,6 +3820,7 @@ class DateRange extends TextInput {
         }
     }
     blur(event, element) {
+        this.value = this.sortDates(this.value);
         this.removeDateMask();
         this.setDateValue(this.displayValue);
         super.blur(event, element);
@@ -3672,18 +3982,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.
          */
@@ -3735,6 +4037,10 @@ class Dropdown extends ComponentRender {
          * Applies position fixed to the dropdown.
          */
         this.fixed = false;
+        /**
+         * Sets the height for the dropdown.
+         */
+        this.height = 'auto';
         /**
          * Offset the menu on the x-axis.
          */
@@ -3760,6 +4066,7 @@ class Dropdown extends ComponentRender {
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.hover = this.getInitValue('hover', props.hover, this.hover);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
@@ -3953,10 +4260,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 +4276,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.
          */
@@ -4029,12 +4328,18 @@ class Frame extends ComponentRender {
         this.override = {};
         this.cache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
+        this.height = 'auto';
+        this.maxHeight = 'none';
+        this.minHeight = 'none';
         this.headerName = 'sw-fetched-on';
         this.path = props.path;
         this.local = props.local === true;
         this.override = props.override || this.override;
         this.cache = props.cache || this.cache;
         this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.createAccessors();
         this.getMetadata();
     }
@@ -4055,6 +4360,12 @@ class Frame extends ComponentRender {
             }
         });
     }
+    reload() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.loading = true;
+            this.getMetadata();
+        });
+    }
     notFoundError() { }
     requestPage() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -4545,7 +4856,7 @@ class GridColumn extends Column {
         if (this.componentProps.dataValueOut && ((_a = component.datasource) === null || _a === void 0 ? void 0 : _a.currentRow)) {
             this.componentProps.dataValueOut.forEach((columns) => {
                 const { column, columnOnGrid } = columns;
-                if (!isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
+                if (!Utils.isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
                     newRow[`${columnOnGrid}_original`] = newRow.originalRow[columnOnGrid];
                     newRow[columnOnGrid] = component.datasource.currentRow[column];
                 }
@@ -4709,7 +5020,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
@@ -4753,6 +5068,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);
@@ -4762,6 +5079,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;
@@ -4930,6 +5248,7 @@ class Grid extends Iterable {
         var _a, _b, _c;
         const rowKey = row[this.datasource.uniqueKey];
         const compName = actionComponent.name;
+        const instanceName = `${compName}_${rowKey}`;
         const path = parentPath ? `${parentPath}.${compName}` : compName;
         const newComponent = merge({}, actionComponent, (_b = (_a = this.actionsApplied[rowKey]) === null || _a === void 0 ? void 0 : _a[column.name]) === null || _b === void 0 ? void 0 : _b[path]);
         let compEvents = {};
@@ -4944,7 +5263,16 @@ class Grid extends Iterable {
                 }
             } });
         const newChildren = (_c = newComponent.children) === null || _c === void 0 ? void 0 : _c.map((child) => this.getActionComponent(child, column, row, path));
-        return Object.assign(Object.assign({}, newComponent), { events: newEvents, name: `${compName}_${rowKey}`, children: newChildren });
+        newComponent.name = instanceName;
+        newComponent.children = newChildren;
+        newComponent.events = newEvents;
+        try {
+            Metadata.updateInstance(instanceName, newComponent);
+        }
+        catch (e) {
+            // do nothing
+        }
+        return newComponent;
     }
     changeDefaultSlotNames(slot) {
         slot.forEach((item) => {
@@ -5009,15 +5337,36 @@ class GridEditable extends Grid {
          * @private
          */
         this.editedRows = {};
+        /**
+         * Rows with newRowIdentifier
+         * @private
+         */
+        this.addedRows = {};
         /**
          * Invalid inline components
          * @private
          */
         this.invalidComponents = {};
-        this.newRowIdentifier = '__added_row';
-        this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
+        this.cancelEditedRowsKeyMapping = {
+            esc: {
+                event: this.cancelEditedRows.bind(this),
+                stop: true,
+                input: true,
+                active: true,
+            },
+        };
+        this.newRowIdentifier = '__added_row';
+        this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.createAccessors();
     }
+    onMounted(element) {
+        super.onMounted(element);
+        KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+    }
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter
@@ -5187,7 +5536,7 @@ class GridEditable extends Grid {
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
         const columnName = column.name;
-        if (!isEqual(value, row[columnName])) {
+        if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
             newRow[key].originalRow = Object.assign({}, row);
@@ -5233,6 +5582,14 @@ class GridEditable extends Grid {
      * Cancels all edited rows and enable grid components
      */
     cancelEditedRows() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.removeAddedRows();
+            this.editing = false;
+            this.editedRows = {};
+            this.invalidComponents = {};
+        });
+    }
+    removeAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
             const { data } = this.datasource;
             data.forEach((row, index) => {
@@ -5241,21 +5598,26 @@ class GridEditable extends Grid {
                 }
             });
             yield this.datasource.updateData(data);
-            this.editing = false;
-            this.editedRows = {};
-            this.invalidComponents = {};
         });
     }
+    addDataRow(row) {
+        if (this.addedRows[row[this.datasource.uniqueKey]])
+            this.datasource.post(row);
+        else
+            this.datasource.put(row);
+    }
     /**
      * Saves all edited rows if they are valid
      * @throws Will throw when it finds an invalid row
      */
     saveEditedRows() {
         return __awaiter(this, void 0, void 0, function* () {
-            const response = yield Promise.all(this.getEditedRows().map((row) => this.datasource.put(row)));
+            yield this.removeAddedRows();
+            const response = yield Promise.all(this.getEditedRows().map((row) => this.addDataRow(row)));
             this.editing = false;
             this.editedRows = {};
             this.invalidComponents = {};
+            this.addedRows = {};
             yield this.datasource.get();
             return response;
         });
@@ -5267,8 +5629,11 @@ class GridEditable extends Grid {
     getEditedRows() {
         const editedRows = [];
         Object.keys(this.editedRows).forEach((key) => {
+            this.addedRows = {};
             const row = Object.assign(Object.assign({}, this.editedRows[key].originalRow), this.editedRows[key]);
             delete row.originalRow;
+            if (row[this.newRowIdentifier])
+                this.addedRows[key] = row;
             delete row[this.newRowIdentifier];
             Object.keys(row).forEach((attr) => {
                 if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
@@ -5420,10 +5785,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.
          */
@@ -5448,10 +5809,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.
          */
@@ -5466,13 +5823,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);
@@ -5506,10 +5861,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)
          */
@@ -5531,10 +5882,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
@@ -5553,13 +5900,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);
@@ -5982,11 +6327,12 @@ class Select extends TextInput {
     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();
+            const response = yield oldGet.call(this.datasource);
+            if (this.indexOf(this.value) === -1 && !this.datasource.search && !this.isFocused) {
+                yield this.setValue(this.value, false);
+                this.removePushedValue();
+            }
+            return response;
         });
     }
     get search() {
@@ -6543,10 +6889,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.
          */
@@ -6559,10 +6901,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.
          */
@@ -6579,6 +6917,18 @@ class List extends ComponentRender {
          * Will only collapse when explicitly closed.
          */
         this.expand = false;
+        /**
+         * Sets the height for the component.
+         */
+        this.height = 'auto';
+        /**
+         * Sets the maxHeight for the component.
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the minHeight for the component.
+         */
+        this.minHeight = 'none';
         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);
@@ -6590,6 +6940,9 @@ class List extends ComponentRender {
         this.color = this.getInitValue('color', props.color, this.color);
         this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
         this.expand = this.getInitValue('expand', props.expand, this.expand);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.createAccessors();
     }
     /**
@@ -6707,10 +7060,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.
          */
@@ -6739,7 +7088,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);
@@ -6966,10 +7314,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.
          */
@@ -7052,7 +7396,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);
@@ -7281,7 +7624,7 @@ class Menu extends ComponentRender {
                 if (item.component === 'ZdMenuGroup') {
                     this.searchItems(item.items);
                 }
-                else if (normalize(I18n.translate(item.label)).indexOf(normalize(this.searchValue)) !== -1) {
+                else if (Utils.normalize(I18n.translate(item.label)).indexOf(Utils.normalize(this.searchValue)) !== -1) {
                     this.filteredMenuItems.push(item);
                 }
             }
@@ -7693,10 +8036,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
          */
@@ -7705,10 +8044,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
          */
@@ -7720,10 +8055,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();
@@ -8661,6 +8994,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
          */
@@ -8693,6 +9030,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];
@@ -8706,6 +9044,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,
@@ -8950,6 +9306,40 @@ class SelectTreeMultiple extends SelectTree {
     }
 }
 
+/**
+ * Base class for SelectableList component.
+ */
+class SelectableList extends List {
+    constructor(props) {
+        super(props);
+        /**
+         * Specifies whether at least one element must be selected
+         */
+        this.mandatory = false;
+        /**
+         * Defines the maximum number of elements the list has
+         */
+        this.max = undefined;
+        /**
+         * Defines how many elements of the list can be selected at the same time
+         */
+        this.multiple = undefined;
+        /**
+         * Sets the active list-item inside the list-group
+         */
+        this.value = undefined;
+        this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
+        this.mandatory = this.getInitValue('mandatory', props.mandatory, this.mandatory);
+        this.max = this.getInitValue('max', props.max, this.max);
+        this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
+        this.value = this.getInitValue('value', props.value, this.value);
+        this.createAccessors();
+    }
+    change(event, element) {
+        this.callEvent('change', { event, element, component: this });
+    }
+}
+
 /**
  * Base class for SpeedDial component.
  */
@@ -9033,14 +9423,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
          */
@@ -9052,9 +9434,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);
@@ -9305,6 +9685,7 @@ class Tabs extends ComponentRender {
         this.tabs = [];
         this.tabs = this.getTabs(props.tabs || []);
         this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.createAccessors();
     }
     getTabs(tabs) {
@@ -9317,6 +9698,31 @@ class Tabs extends ComponentRender {
         }
         return tab;
     }
+    /**
+     * Method for navigating to the next tab
+     * @param loop Defines if want a loop navigation
+     */
+    nextTab(loop = false) {
+        if (loop) {
+            this.activeTab = (this.activeTab + 1) % this.tabs.length;
+        }
+        else if (this.activeTab < this.tabs.length - 1) {
+            this.activeTab += 1;
+        }
+    }
+    /**
+     * Method for navigating to the previous tab
+     * @param loop Defines if want a loop navigation
+     */
+    previousTab(loop = false) {
+        if (loop) {
+            const newTabIndex = (this.activeTab - 1) % this.tabs.length;
+            this.activeTab = newTabIndex >= 0 ? newTabIndex : newTabIndex + this.tabs.length;
+        }
+        else if (this.activeTab > 0) {
+            this.activeTab -= 1;
+        }
+    }
     /**
      * Triggered before tab is change.
      * @param event DOM event
@@ -10168,9 +10574,25 @@ class TreeGridEditable extends TreeGrid {
          * Enter edit mode on double click
          */
         this.doubleClickEdit = false;
+        this.cancelEditedRowsKeyMapping = {
+            esc: {
+                event: this.cancelEditedRows.bind(this),
+                stop: true,
+                input: true,
+                active: true,
+            },
+        };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.createAccessors();
     }
+    onMounted(element) {
+        super.onMounted(element);
+        KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+    }
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter
@@ -10339,7 +10761,7 @@ class TreeGridEditable extends TreeGrid {
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
         const columnName = column.name;
-        if (!isEqual(value, row[columnName])) {
+        if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
             newRow[key].originalRow = Object.assign({}, row);
@@ -10613,6 +11035,12 @@ Icons.mdiIcons = {
     tableColumns: 'mdi-table-headers-eye',
     unfold: 'mdi-unfold-more-horizontal',
     warning: 'mdi-exclamation',
+    zoom: 'mdi-magnify-scan',
+    zoomIn: 'mdi-plus-circle-outline',
+    zoomPanning: 'mdi-hand-back-right-outline',
+    zoomOut: 'mdi-minus-circle-outline',
+    zoomReset: 'mdi-magnify-close',
+    zoomSelection: 'mdi-magnify-scan',
 };
 Icons.faIcons = {
     alertOctagon: 'fa fa-exclamation-circle',
@@ -10663,6 +11091,12 @@ Icons.faIcons = {
     tableColumns: 'fa fa-columns',
     unfold: 'fa fa-sort',
     warning: 'fa fa-exclamation',
+    zoom: 'fa fa-search',
+    zoomIn: 'fa fa-search-plus',
+    zoomPanning: 'fa fa-hand-paper',
+    zoomOut: 'fa fa-search-minus',
+    zoomReset: 'fa fa-undo',
+    zoomSelection: 'fa fa-expand',
 };
 Icons.icons = (() => Icons.mdiIcons)();
 
@@ -10700,10 +11134,14 @@ const defaultTheme = {
         light: {
             'font-color': 'var(--v-grey-darken2)',
             'background-base': '#F6F6F6',
+            'scrollbar-track': 'var(--v-grey-lighten5)',
+            'scrollbar-thumb': 'var(--v-grey-lighten4)',
         },
         dark: {
             'font-color': 'var(--v-grey-lighten3)',
             'background-base': '#121212',
+            'scrollbar-track': 'var(--v-grey-darken3)',
+            'scrollbar-thumb': 'var(--v-grey-base)',
         },
         variables: {
             'default-padding': '16px',
@@ -10939,6 +11377,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;
@@ -11165,27 +11613,12 @@ class PDFReport extends BaseReport {
 }
 
 class XLSReport extends BaseReport {
-    constructor(type) {
-        super();
+    constructor() {
+        super(...arguments);
         this.route = '/generateXLS';
-        this.expressionZeedhiToXls = {
-            AVG: 'AVERAGE',
-            COUNT: 'COUNTA',
-            MAX: 'MAX',
-            MIN: 'MIN',
-            SUM: 'SUM',
-        };
-        this.colunmXLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-        this.type = type || 'xls';
     }
-    buildDataset(data, columns, metadata) {
-        let result;
-        if (this.type === 'xls') {
-            result = this.formatRawDataSet(data, columns);
-        }
-        else if (metadata) {
-            result = this.formatDataSet(metadata, data);
-        }
+    buildDataset(data, columns) {
+        const result = this.formatRawDataSet(data, columns);
         return JSON.stringify(result);
     }
     // formata o dataset para o formato "cru" xls
@@ -11229,27 +11662,55 @@ class XLSReport extends BaseReport {
         };
         return Promise.resolve(JSON.stringify(metadataObj));
     }
-    isFormat3(format) {
-        return format === 'xls3';
+}
+
+// XLS with groups
+class XLS2Report extends BaseReport {
+    constructor() {
+        super(...arguments);
+        this.route = '/generateXLS';
     }
-    // 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;
+    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;
@@ -11257,25 +11718,21 @@ class XLSReport extends BaseReport {
                 columnsName[index + lengthGroup] = columnName;
             }
             else {
-                columnsName[index] = columnName;
+                columnsGroupName.push(columnName);
             }
         });
+        columnsName = columnsGroupName.concat(columnsName);
         columnsName = columnsName.filter((columnName) => typeof columnName === 'string');
         return columnsName;
     }
     // Inicializa alguns valores auxiliares
-    initVars(metaData, type) {
+    initVars(metaData) {
         metaData.xlsMergedCell = [];
         const { columns } = metaData;
         const lengthGroup = metaData.groups.length;
         const indexLastGroup = lengthGroup - 1;
         let columnsName = [];
-        if (this.isFormat3(type)) {
-            columnsName = this.getColumnsNameFormat3(columns, metaData);
-        }
-        else {
-            columnsName = this.getColumnsName(columns, metaData, lengthGroup);
-        }
+        columnsName = this.getColumnsName(columns, metaData, lengthGroup);
         const rowValues = [];
         const formatedDataSet = [];
         const groups = [];
@@ -11285,33 +11742,6 @@ class XLSReport extends BaseReport {
             columns, indexLastGroup, columnsName, rowValues, formatedDataSet, groups,
         };
     }
-    // formata a linha do grupo de acordo com o formato xls3
-    setRowGroupFormat3(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;
@@ -11410,18 +11840,199 @@ class XLSReport extends BaseReport {
         });
     }
     formatDataSet(metaData, dataSet) {
-        const initVars = this.initVars(metaData, this.type);
+        const initVars = this.initVars(metaData);
         const { columns, indexLastGroup, columnsName, formatedDataSet, groups, } = initVars;
         let { rowValues } = initVars;
         dataSet.forEach((row) => {
             if (row.group || row.groupFooter) {
-                if (this.isFormat3(this.type)) {
-                    rowValues = this.setRowGroupFormat3(row, rowValues, groups, formatedDataSet, columnsName, columns, indexLastGroup);
+                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) {
+        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, 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];
+                    }
                 }
-                else {
-                    rowValues = this.setRowGroup(row, rowValues, groups, metaData, formatedDataSet, columnsName, columns, indexLastGroup);
+                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);
@@ -11468,8 +12079,14 @@ class Report {
         if (type === 'pdf') {
             return new PDFReport();
         }
-        if (type === 'xls' || type === 'xls2' || type === 'xls3') {
-            return new XLSReport(type);
+        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}`);
     }
@@ -11488,10 +12105,10 @@ class Report {
             const formattedColumns = this.removeActionColumns(columns);
             const metadataObj = yield reportType.buildMetadata(name, this.title, formattedColumns, datasource.filter, portrait);
             let dataset;
-            if ((reportType.type === 'xls2' || reportType.type === 'xls3') && groupedData) {
+            if ((reportType instanceof XLS2Report || reportType instanceof XLS3Report) && groupedData) {
                 const rowMetadata = rowObj.metaData;
                 const metadataObjClone = merge(rowMetadata, JSON.parse(metadataObj));
-                dataset = reportType.buildDataset(groupedData, formattedColumns, metadataObjClone);
+                dataset = reportType.buildDataset(groupedData, metadataObjClone);
             }
             else {
                 dataset = reportType.buildDataset(data, formattedColumns);
@@ -11534,4 +12151,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, SelectableList, SpeedDial, Steppers, SvgMap, Switch, Tab, Table, Tabs, Tag, Text, TextInput, Textarea, Time, Toggleable, Tooltip, Tree, TreeDataStructure, TreeGrid, TreeGridEditable, WatchURL, XLS2Report, XLS3Report, XLSReport, initTheme };