@zeedhi/common 1.39.1 → 1.43.0

package/dist/zd-common.umd.js

@@ -1,14 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.merge'), require('lodash.set')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.debounce', 'lodash.isundefined', 'lodash.merge', 'lodash.set'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.debounce, global.isUndefined, global.merge, global.set));
-})(this, (function (exports, core, debounce, isUndefined, merge, set) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set));
+})(this, (function (exports, core, merge, debounce, isUndefined, set) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+  var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
-  var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
 
   /**
@@ -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);
@@ -417,8 +431,43 @@
            * 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__default["default"](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);
@@ -435,6 +484,14 @@
       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
@@ -449,6 +506,249 @@
           }
           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;
+      }
   }
 
   /**
@@ -499,10 +799,6 @@
        */
       constructor(props) {
           super(props);
-          /**
-           * Applies the dark theme variant to the component.
-           */
-          this.dark = false;
           /**
            * Specifies the dividing string between items.
            */
@@ -519,19 +815,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 +857,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 +898,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 +1000,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 +1009,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 +1042,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 +1097,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
@@ -839,6 +1107,16 @@
            * '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)
            */
@@ -855,10 +1133,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 +1207,14 @@
           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);
@@ -1055,10 +1329,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 +1345,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 +1368,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 +1375,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);
@@ -1181,6 +1445,7 @@
           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();
       }
@@ -1323,10 +1588,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 +1604,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 +1672,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);
@@ -1780,6 +2035,10 @@
            * 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
@@ -1799,6 +2058,7 @@
           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();
@@ -2005,12 +2265,27 @@
            * 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();
       }
   }
@@ -2348,6 +2623,14 @@
            * 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
@@ -2359,6 +2642,8 @@
                   events: { click: () => this.hide() },
               }];
           this.defaultValues = {
+              confirmButton: this.confirmButton,
+              denyButton: this.denyButton,
               name: this.name,
               maxWidth: this.maxWidth,
               persistent: this.persistent,
@@ -2366,6 +2651,38 @@
               title: this.title,
               text: this.text,
           };
+          this.clickDefaultButtonKeyMapping = {
+              enter: {
+                  event: () => {
+                      if (this.confirmButton) {
+                          const confirmButton = core.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 = core.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();
       }
@@ -2375,6 +2692,8 @@
        */
       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);
@@ -2387,6 +2706,7 @@
        * Displays dialog
        */
       show() {
+          core.KeyMap.bind(this.clickDefaultButtonKeyMapping, this);
           this.isVisible = true;
       }
       /**
@@ -2394,6 +2714,7 @@
        */
       hide() {
           this.isVisible = false;
+          core.KeyMap.unbind(this.clickDefaultButtonKeyMapping, this);
       }
   }
 
@@ -3329,10 +3650,6 @@
            * Sets the locale. Accepts a string with a BCP 47 language tag.
            */
           this.locale = core.I18n.instance.language;
-          /**
-           * Defines if dates should be ordered
-           */
-          this.orderedDates = false;
           /**
            * Allows changing displayed month with mouse scroll
            */
@@ -3356,15 +3673,12 @@
           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);
@@ -3472,7 +3786,7 @@
           const lastValue = this.value;
           this.dateError = false;
           this.value = this.parseISODateRangeValue(newValue);
-          if (!core.isEqual(lastValue, this.value))
+          if (!core.Utils.isEqual(lastValue, this.value))
               this.change(this.value);
       }
       formatISODateRangeValue(dates) {
@@ -3481,13 +3795,13 @@
               splitedValue = dates;
           else
               splitedValue = this.splitValues(dates);
-          const formatedValue = [];
+          const formattedValue = [];
           splitedValue.forEach((value) => {
               if (value && this.isValidDate(value, this.dateFormat)) {
-                  formatedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
+                  formattedValue.push(core.dayjs(value, this.dateFormat, true).format(this.isoFormat));
               }
           });
-          return formatedValue;
+          return formattedValue;
       }
       parseISODateRangeValue(values) {
           const parsedValue = [];
@@ -3498,19 +3812,14 @@
                   }
               });
           }
-          return parsedValue;
+          return this.sortDates(parsedValue);
+      }
+      sortDates(parsedValue) {
+          return parsedValue.sort((a, b) => (core.dayjs(a, this.dateFormat).isAfter(core.dayjs(b, this.dateFormat)) ? 1 : -1));
       }
       dateValidation() {
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
-      dateValidateOrder() {
-          if (this.value && (this.value.length === 2 && this.orderedDates)) {
-              const date1 = core.dayjs(this.value[0], this.dateFormat);
-              const date2 = core.dayjs(this.value[1], this.dateFormat);
-              return (date1.isBefore(date2) || date1.isSame(date2)) || core.I18n.translate('VALIDATION_INVALID_ORDER_DATE');
-          }
-          return true;
-      }
       click(event, element) {
           super.click(event, element);
           if (!event.defaultPrevented) {
@@ -3518,6 +3827,7 @@
           }
       }
       blur(event, element) {
+          this.value = this.sortDates(this.value);
           this.removeDateMask();
           this.setDateValue(this.displayValue);
           super.blur(event, element);
@@ -3679,18 +3989,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.
            */
@@ -3742,6 +4044,10 @@
            * 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.
            */
@@ -3767,6 +4073,7 @@
           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);
@@ -3960,10 +4267,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 +4283,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.
            */
@@ -4036,12 +4335,18 @@
           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();
       }
@@ -4062,6 +4367,12 @@
               }
           });
       }
+      reload() {
+          return __awaiter(this, void 0, void 0, function* () {
+              this.loading = true;
+              this.getMetadata();
+          });
+      }
       notFoundError() { }
       requestPage() {
           return __awaiter(this, void 0, void 0, function* () {
@@ -4552,7 +4863,7 @@
           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 (!core.isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
+                  if (!core.Utils.isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
                       newRow[`${columnOnGrid}_original`] = newRow.originalRow[columnOnGrid];
                       newRow[columnOnGrid] = component.datasource.currentRow[column];
                   }
@@ -4716,7 +5027,11 @@
           /**
            * Color of the header background
            */
-          this.headerBackground = 'white';
+          this.headerBackground = '';
+          /**
+           * Color of the header cell text color
+           */
+          this.headerCellTextColor = '';
           /**
            * Available order types
            * @public
@@ -4760,6 +5075,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);
@@ -4769,6 +5086,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;
@@ -4937,6 +5255,7 @@
           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__default["default"]({}, 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 = {};
@@ -4951,7 +5270,16 @@
                   }
               } });
           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 {
+              core.Metadata.updateInstance(instanceName, newComponent);
+          }
+          catch (e) {
+              // do nothing
+          }
+          return newComponent;
       }
       changeDefaultSlotNames(slot) {
           slot.forEach((item) => {
@@ -5016,15 +5344,36 @@
            * @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);
+          core.KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+      }
+      onBeforeDestroy() {
+          super.onBeforeDestroy();
+          core.KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+      }
       /**
        * Get Grid columns objects
        * @param columns Grid columns parameter
@@ -5194,7 +5543,7 @@
       changeEditableComponent(column, row, value, component) {
           const key = row[this.datasource.uniqueKey];
           const columnName = column.name;
-          if (!core.isEqual(value, row[columnName])) {
+          if (!core.Utils.isEqual(value, row[columnName])) {
               const newRow = {};
               newRow[key] = Object.assign({}, this.editedRows[key]);
               newRow[key].originalRow = Object.assign({}, row);
@@ -5240,6 +5589,14 @@
        * 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) => {
@@ -5248,21 +5605,26 @@
                   }
               });
               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;
           });
@@ -5274,8 +5636,11 @@
       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`)) {
@@ -5427,10 +5792,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.
            */
@@ -5455,10 +5816,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.
            */
@@ -5473,13 +5830,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);
@@ -5513,10 +5868,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)
            */
@@ -5538,10 +5889,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
@@ -5560,13 +5907,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);
@@ -5989,11 +6334,12 @@
       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() {
@@ -6550,10 +6896,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.
            */
@@ -6566,10 +6908,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.
            */
@@ -6586,6 +6924,18 @@
            * 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);
@@ -6597,6 +6947,9 @@
           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();
       }
       /**
@@ -6714,10 +7067,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.
            */
@@ -6746,7 +7095,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);
@@ -6973,10 +7321,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.
            */
@@ -7059,7 +7403,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);
@@ -7288,7 +7631,7 @@
                   if (item.component === 'ZdMenuGroup') {
                       this.searchItems(item.items);
                   }
-                  else if (core.normalize(core.I18n.translate(item.label)).indexOf(core.normalize(this.searchValue)) !== -1) {
+                  else if (core.Utils.normalize(core.I18n.translate(item.label)).indexOf(core.Utils.normalize(this.searchValue)) !== -1) {
                       this.filteredMenuItems.push(item);
                   }
               }
@@ -7700,10 +8043,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
            */
@@ -7712,10 +8051,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
            */
@@ -7727,10 +8062,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();
@@ -8668,6 +9001,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
            */
@@ -8700,6 +9037,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];
@@ -8713,6 +9051,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,
@@ -8957,6 +9313,40 @@
       }
   }
 
+  /**
+   * 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.
    */
@@ -9040,14 +9430,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
            */
@@ -9059,9 +9441,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);
@@ -9312,6 +9692,7 @@
           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) {
@@ -9324,6 +9705,31 @@
           }
           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
@@ -10175,9 +10581,25 @@
            * 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);
+          core.KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+      }
+      onBeforeDestroy() {
+          super.onBeforeDestroy();
+          core.KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+      }
       /**
        * Get Grid columns objects
        * @param columns Grid columns parameter
@@ -10346,7 +10768,7 @@
       changeEditableComponent(column, row, value, component) {
           const key = row[this.datasource.uniqueKey];
           const columnName = column.name;
-          if (!core.isEqual(value, row[columnName])) {
+          if (!core.Utils.isEqual(value, row[columnName])) {
               const newRow = {};
               newRow[key] = Object.assign({}, this.editedRows[key]);
               newRow[key].originalRow = Object.assign({}, row);
@@ -10620,6 +11042,12 @@
       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',
@@ -10670,6 +11098,12 @@
       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)();
 
@@ -10707,10 +11141,14 @@
           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',
@@ -10946,6 +11384,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;
@@ -11172,27 +11620,12 @@
   }
 
   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
@@ -11236,27 +11669,55 @@
           };
           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(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;
@@ -11264,25 +11725,21 @@
                   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 = [];
@@ -11292,33 +11749,6 @@
               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;
@@ -11417,18 +11847,199 @@
           });
       }
       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(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, 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);
@@ -11475,8 +12086,14 @@
           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}`);
       }
@@ -11495,10 +12112,10 @@
               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__default["default"](rowMetadata, JSON.parse(metadataObj));
-                  dataset = reportType.buildDataset(groupedData, formattedColumns, metadataObjClone);
+                  dataset = reportType.buildDataset(groupedData, metadataObjClone);
               }
               else {
                   dataset = reportType.buildDataset(data, formattedColumns);
@@ -11623,6 +12240,7 @@
   exports.SelectMultiple = SelectMultiple;
   exports.SelectTree = SelectTree;
   exports.SelectTreeMultiple = SelectTreeMultiple;
+  exports.SelectableList = SelectableList;
   exports.SpeedDial = SpeedDial;
   exports.Steppers = Steppers;
   exports.SvgMap = SvgMap;
@@ -11642,6 +12260,8 @@
   exports.TreeGrid = TreeGrid;
   exports.TreeGridEditable = TreeGridEditable;
   exports.WatchURL = WatchURL;
+  exports.XLS2Report = XLS2Report;
+  exports.XLS3Report = XLS3Report;
   exports.XLSReport = XLSReport;
   exports.initTheme = initTheme;