@zeedhi/common 1.42.0 → 1.45.0

package/dist/zd-common.umd.js

@@ -199,6 +199,7 @@
        * @param element Element mounted reference
        */
       onMounted(element) {
+          this.element = element;
           if (Object.keys(this.keyMap).length) {
               core.KeyMap.bind(this.keyMap, this, element);
           }
@@ -226,7 +227,11 @@
        * @param element Element clicked
        */
       click(event, element) {
-          this.callEvent('click', { event, element, component: this });
+          this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              element: (element || this.element),
+              component: this,
+          });
       }
       /**
        * Triggered when the component is focused.
@@ -444,6 +449,26 @@
                           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);
@@ -486,6 +511,226 @@
           }
           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: (event || new MouseEvent('click')),
+              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)
@@ -870,6 +1115,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)
            */
@@ -961,6 +1216,8 @@
           this.buttonsOutside = this.getInitValue('buttonsOutside', props.buttonsOutside, this.buttonsOutside);
           this.center = this.getInitValue('center', props.center, this.center);
           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);
@@ -1196,6 +1453,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();
       }
@@ -1399,9 +1657,9 @@
            */
           this.storePath = '';
           /**
-           * Input value.
-           */
-          this.value = undefined;
+          * Internal input value.
+          */
+          this.value = null;
           /**
            * Input validations.
            */
@@ -1549,6 +1807,8 @@
        * @param element Element clicked
        */
       change(event, element) {
+          if (this.value === '')
+              this.value = null;
           if (this.events.change && typeof this.events.change === 'function') {
               this.events.change({ event, element, component: this });
           }
@@ -1785,6 +2045,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
@@ -1804,6 +2068,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();
@@ -2010,12 +2275,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();
       }
   }
@@ -2353,6 +2633,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
@@ -2364,6 +2652,8 @@
                   events: { click: () => this.hide() },
               }];
           this.defaultValues = {
+              confirmButton: this.confirmButton,
+              denyButton: this.denyButton,
               name: this.name,
               maxWidth: this.maxWidth,
               persistent: this.persistent,
@@ -2371,6 +2661,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();
       }
@@ -2380,6 +2702,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);
@@ -2392,6 +2716,7 @@
        * Displays dialog
        */
       show() {
+          core.KeyMap.bind(this.clickDefaultButtonKeyMapping, this);
           this.isVisible = true;
       }
       /**
@@ -2399,6 +2724,7 @@
        */
       hide() {
           this.isVisible = false;
+          core.KeyMap.unbind(this.clickDefaultButtonKeyMapping, this);
       }
   }
 
@@ -2495,61 +2821,34 @@
    */
   ModalService.modals = [];
 
-  class Loading extends Component {
-      /*
-       * Creates a new Loading Overlay
-       * @param props Modal structure
-       */
-      constructor(props) {
-          super(props);
-          /**
-           * text to show in Loader Overlay
-           */
-          this.text = 'Loading';
-          this.isVisible = false;
-          this.zIndex = 999;
-          this.text = this.getInitValue('text', props.text, this.text);
-          this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
-          this.defaultText = this.text;
-      }
-      /**
-       * Displays overlay
-       */
-      show(text) {
-          if (text)
-              this.text = text;
-          else
-              this.text = this.defaultText;
-          this.isVisible = true;
-      }
-      /**
-       * Close overlay
-       */
-      hide() {
-          this.isVisible = false;
-      }
-  }
-
   /**
    * Loading Service Class
    */
   class LoadingService {
+      /**
+       * Creates a new loading instance
+       * @param loading loading structure
+       */
+      static create(CreateLoading, props) {
+          const instance = new CreateLoading(props);
+          this.loading = instance;
+          return instance;
+      }
       /**
        * Displays a Loading.
        * If has an opened Loading it will be closed.
        * @param Loading loading structure
        */
       static show(text) {
-          this.instance.show(text);
+          this.loading.show(text);
       }
       /**
        * Hides current Loading
        */
       static hide() {
-          this.instance.hide();
+          this.loading.hide();
       }
-  }
-  LoadingService.instance = new Loading({ name: 'loading-instance' });
+  }
 
   /**
    * Base class for Dashboard component.
@@ -3156,8 +3455,9 @@
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
       click(event, element) {
-          super.click(event, element);
-          if (!event.defaultPrevented) {
+          const clickEvent = event || new MouseEvent('click');
+          super.click(clickEvent, element);
+          if (!clickEvent.defaultPrevented) {
               this.showDatePicker = !this.showDatePicker;
           }
       }
@@ -3470,7 +3770,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) {
@@ -3505,8 +3805,9 @@
           return !this.dateError || core.I18n.translate('VALIDATION_INVALID_DATE');
       }
       click(event, element) {
-          super.click(event, element);
-          if (!event.defaultPrevented) {
+          const clickEvent = event || new MouseEvent('click');
+          super.click(clickEvent, element);
+          if (!clickEvent.defaultPrevented) {
               this.showDatePicker = !this.showDatePicker;
           }
       }
@@ -3728,6 +4029,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.
            */
@@ -3753,6 +4058,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);
@@ -3874,7 +4180,7 @@
        * Triggered when a removable chip is clicked
        * @param event DOM event
        * @param index Chip index
-       * @param element HTMLElement
+       * @param element any
        */
       chipClick(event, index, element) {
           event.stopImmediatePropagation();
@@ -4014,12 +4320,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();
       }
@@ -4156,6 +4468,8 @@
           this.componentProps = {};
           /** column style property */
           this.style = {};
+          /** Type of XLS */
+          this.xlsType = '';
           /* Stores lookup data to prevent unnecessary requests */
           this.lookupData = {};
           /* Stores lookup data count (only to be reactive and force column update)  */
@@ -4198,6 +4512,7 @@
           this.loading = this.getInitValue('loading', props.loading, this.loading);
           this.style = this.getInitValue('style', props.style, this.style);
           this.componentProps = this.getInitValue('componentProps', props.componentProps, this.componentProps);
+          this.xlsType = this.getInitValue('xlsType', props.xlsType, this.xlsType);
           this.conditions = this.getInitValue('conditions', props.conditions, this.conditions);
           this.createConditions();
           this.createActionConditions();
@@ -4536,7 +4851,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];
                   }
@@ -4550,7 +4865,7 @@
       }
   }
   core.FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, row, componentProps, }) => {
-      if (!value)
+      if (value === null || value === undefined)
           return '';
       const { dataText, formatterDataText, dataTextSeparator, dataValue, } = componentProps;
       let currentRow = row;
@@ -4598,7 +4913,7 @@
           });
           return dataTextNames.reduce((result, columnName, index) => {
               const rowCell = currentRow[columnName];
-              if (rowCell) {
+              if (rowCell !== undefined && rowCell !== null) {
                   const separator = index > 0 ? (dataTextSeparator || ' | ') : '';
                   const mask = masks[index];
                   const maskValue = typeof mask === 'function' ? mask(rowCell) : mask;
@@ -5017,15 +5332,36 @@
            * @private
            */
           this.editedRows = {};
+          /**
+           * Rows with newRowIdentifier
+           * @private
+           */
+          this.addedRows = {};
           /**
            * Invalid inline components
            * @private
            */
           this.invalidComponents = {};
+          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
@@ -5195,7 +5531,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);
@@ -5241,6 +5577,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) => {
@@ -5249,21 +5593,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;
           });
@@ -5275,8 +5624,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`)) {
@@ -6315,10 +6667,10 @@
       }
   }
   core.FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTextSeparator = ' | ', }) => {
-      if (!value && value !== 0) {
+      if (value === null || value === undefined) {
           return null;
       }
-      if (typeof value === 'string' || typeof value === 'number') {
+      if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
           return value;
       }
       const dataTextArr = Array.isArray(dataText) ? dataText : [dataText];
@@ -6341,7 +6693,7 @@
           }
       });
       return dataTextNames.reduce((result, column, index) => {
-          if (value[column]) {
+          if (value[column] !== null && value[column] !== undefined) {
               const separator = index > 0 ? dataTextSeparator : '';
               let masked = value[column];
               if (masks[index]) {
@@ -6560,6 +6912,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);
@@ -6571,6 +6935,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();
       }
       /**
@@ -6664,6 +7031,41 @@
       }
   }
 
+  class Loading extends Component {
+      /*
+       * Creates a new Loading Overlay
+       * @param props Modal structure
+       */
+      constructor(props) {
+          super(props);
+          /**
+           * text to show in Loader Overlay
+           */
+          this.text = 'Loading';
+          this.isVisible = false;
+          this.zIndex = 999;
+          this.text = this.getInitValue('text', props.text, this.text);
+          this.zIndex = this.getInitValue('zIndex', props.zIndex, this.zIndex);
+          this.defaultText = this.text;
+      }
+      /**
+       * Displays overlay
+       */
+      show(text) {
+          if (text)
+              this.text = text;
+          else
+              this.text = this.defaultText;
+          this.isVisible = true;
+      }
+      /**
+       * Close overlay
+       */
+      hide() {
+          this.isVisible = false;
+      }
+  }
+
   /**
    * Base class for Login component.
    */
@@ -7020,6 +7422,8 @@
           this.filteredMenuItems = [];
           /** Search value */
           this.searchValue = '';
+          /** Store the current item focused */
+          this.currentItem = null;
           this.app = this.getInitValue('app', props.app, this.app);
           this.clipped = this.getInitValue('clipped', props.clipped, this.clipped);
           this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
@@ -7252,7 +7656,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);
                   }
               }
@@ -7295,9 +7699,21 @@
        */
       click(event) {
           let preventDefault = false;
-          preventDefault = this.callEvent('click', { event, component: this });
+          preventDefault = this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
           if (preventDefault) {
-              event.preventDefault();
+              event === null || event === void 0 ? void 0 : event.preventDefault();
+          }
+          this.setFocus();
+      }
+      /**
+       * Event triggered when this item is focus
+       */
+      focus() {
+          if (this.parentMenu) {
+              this.parentMenu.currentItem = this;
           }
       }
       /**
@@ -7366,6 +7782,29 @@
       close() {
           this.opened = false;
       }
+      /**
+       * Event triggered when this item is clicked
+       */
+      click(event) {
+          let preventDefault = false;
+          preventDefault = this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
+          if (preventDefault) {
+              event === null || event === void 0 ? void 0 : event.preventDefault();
+          }
+          this.setFocus();
+      }
+      /**
+       * Event triggered when this item is focus
+       */
+      focus(event) {
+          this.callEvent('focus', { event, component: this });
+          if (this.parentMenu) {
+              this.parentMenu.currentItem = this;
+          }
+      }
   }
 
   /**
@@ -7443,10 +7882,20 @@
            * If true the modal won't close when overlay is clicked
            */
           this.persistent = false;
+          /**
+           * Allows modal to be dragged around in the screen
+           */
+          this.draggable = false;
+          /**
+           * Css selector of the drag handle
+           */
+          this.dragHandle = '';
           this.title = this.getInitValue('title', props.title, this.title);
           this.fullscreen = this.getInitValue('fullscreen', props.fullscreen, this.fullscreen);
           this.grid = this.getInitValue('grid', props.grid, this.grid);
           this.persistent = this.getInitValue('persistent', props.persistent, this.persistent);
+          this.draggable = this.getInitValue('draggable', props.draggable, this.draggable);
+          this.dragHandle = this.getInitValue('dragHandle', props.dragHandle, this.dragHandle);
           this.isVisible = false;
           this.createAccessors();
       }
@@ -8888,8 +9337,13 @@
            */
           this.selectedNodes = [];
           this.selectValue = [];
+          /**
+           * Changes the behavior of checked nodes that will be displayed in the array of values
+           */
+          this.valueConsistsOf = 'LEAF_PRIORITY';
           this.flat = this.getInitValue('flat', props.flat, this.flat);
           this.limit = this.getInitValue('limit', props.limit, this.limit);
+          this.valueConsistsOf = this.getInitValue('valueConsistsOf', props.valueConsistsOf, this.valueConsistsOf);
           this.createAccessors();
       }
       /**
@@ -9313,6 +9767,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) {
@@ -9708,8 +10163,11 @@
               || core.I18n.translate('VALIDATION_TIME_NOT_ALLOWED');
       }
       click(event) {
-          this.callEvent('click', { event, component: this });
-          if (!event.defaultPrevented) {
+          this.callEvent('click', {
+              event: (event || new MouseEvent('click')),
+              component: this,
+          });
+          if (!(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
               this.showTimePicker = !this.showTimePicker;
           }
       }
@@ -9835,6 +10293,10 @@
            * Components that will be rendered on toolbar slot
            */
           this.toolbarSlot = [];
+          /**
+           * Components that will be rendered on title slot
+           */
+          this.titleSlot = [];
           /** Datasource parent field */
           this.parentField = '';
           /** Datasource title field */
@@ -9845,11 +10307,21 @@
            * Defines if the tree will be opened or not (true/false) or if it should open only until a specific level
            */
           this.openLevelOnLoad = false;
+          /**
+           * Allow row check
+           */
+          this.checkbox = false;
           /**
            * Defines if should wait and not execute GET method when Datasource is created
            */
           this.lazyLoad = true;
-          this.nodes = props.nodes || this.nodes;
+          /**
+           * Dictionary of nodePath ponting to Dictionary of path pointing to the condition (applied) return value
+           */
+          this.appliedConditions = {};
+          /* Conditions of tree */
+          this.factoredConditions = {};
+          this.nodes = this.initNodes(props.nodes || this.nodes);
           this.itemIconName = this.getInitValue('itemIconName', props.itemIconName, this.itemIconName);
           this.groupIconName = this.getInitValue('groupIconName', props.groupIconName, this.groupIconName);
           this.openedIconName = this.getInitValue('openedIconName', props.openedIconName, this.openedIconName);
@@ -9860,8 +10332,16 @@
           this.titleField = this.getInitValue('titleField', props.titleField, this.titleField);
           this.dataField = this.getInitValue('dataField', props.dataField, this.dataField);
           this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
+          this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
           this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
           this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
+          this.titleSlot = props.titleSlot || this.titleSlot;
+          if (props.afterTitleSlot) {
+              this.createConditions([props.afterTitleSlot]);
+          }
+          if (props.titleSlot) {
+              this.createConditions(props.titleSlot);
+          }
           if (props.datasource && Object.keys(props.datasource).length) {
               this.lazyLoad = props.datasource.lazyLoad !== false;
               this.datasource = core.DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || [this.titleField, this.dataField].filter(Boolean), lazyLoad: true, loadAll: true }));
@@ -9869,6 +10349,12 @@
           }
           this.createAccessors();
       }
+      /**
+       * Initialize all the properties of the declared nodes (reactivity)
+       */
+      initNodes(nodes) {
+          return nodes.map((node) => (Object.assign(Object.assign({ isLeaf: false, isExpanded: true, isSelected: false, isDraggable: true, isSelectable: true, isChecked: false }, node), { children: this.initNodes(node.children || []) })));
+      }
       /** Nodes */
       get nodes() {
           return this.nodesValue;
@@ -9879,6 +10365,16 @@
           }
           this.nodesValue = value;
       }
+      getCheckedNodes() {
+          const selectedNodes = [];
+          this.tree.traverse((node) => {
+              const instanceNode = this.getNode(node.path || []);
+              if (instanceNode === null || instanceNode === void 0 ? void 0 : instanceNode.isChecked) {
+                  selectedNodes.push(instanceNode);
+              }
+          });
+          return selectedNodes;
+      }
       /** Returns the selected nodes */
       get selectedNodes() {
           var _a;
@@ -9977,16 +10473,87 @@
       setTree(tree) {
           this.tree = tree;
       }
-      /** Get the conditions function to be applied to each column depending on the node */
-      getConditions(conditions) {
-          const cond = core.Event.factory(conditions);
-          return (node) => {
-              const appliedConditions = {};
-              Object.keys(conditions).forEach((condition) => {
-                  appliedConditions[condition] = cond[condition](node);
-              });
-              return appliedConditions;
-          };
+      /**
+       * Return plain conditions object
+       * @param conditions Conditions object
+       * @param parentPath Path to parent property
+       */
+      getPlainConditions(conditions, parentPath = '') {
+          let plainData = {};
+          Object.keys(conditions).forEach((key) => {
+              const fullKey = parentPath ? [parentPath, key].join('.') : key;
+              if (typeof conditions[key] === 'object') {
+                  plainData = Object.assign(Object.assign({}, plainData), this.getPlainConditions(conditions[key], fullKey));
+              }
+              else {
+                  plainData[fullKey] = conditions[key];
+              }
+          });
+          return plainData;
+      }
+      createConditions(children, parentPath = '') {
+          children.forEach((child) => {
+              const path = parentPath ? `${parentPath}.${child.name}` : child.name;
+              if (child.conditions) {
+                  const plainConditions = this.getPlainConditions(child.conditions);
+                  this.factoredConditions[path] = core.Event.factory(plainConditions);
+              }
+              if (child.children) {
+                  this.createConditions(child.children, path);
+              }
+          });
+      }
+      applyCondition(node, factoredConditions) {
+          const appliedConditions = {};
+          Object.keys(factoredConditions).forEach((condition) => {
+              const conditionFunction = factoredConditions[condition];
+              set__default["default"](appliedConditions, condition, conditionFunction(node));
+          });
+          return appliedConditions;
+      }
+      applyChildCondition(node, factoredConditions = this.factoredConditions) {
+          const appliedConditions = {};
+          Object.keys(factoredConditions).forEach((comp) => {
+              const conditions = this.factoredConditions[comp];
+              appliedConditions[comp] = Object.assign({}, this.applyCondition(node, conditions));
+          });
+          return appliedConditions;
+      }
+      reapplyConditions(node) {
+          const nodePath = node.pathStr;
+          if (!nodePath)
+              return {};
+          const appliedConditions = Object.assign({}, this.appliedConditions);
+          appliedConditions[nodePath] = this.applyChildCondition(node);
+          this.appliedConditions = appliedConditions;
+          return this.appliedConditions[nodePath];
+      }
+      getSlotComponent(slot, node, parentPath = '') {
+          const slotArr = Array.isArray(slot) ? slot : [slot];
+          const newComponents = [];
+          slotArr.forEach((component) => {
+              var _a;
+              if (!component)
+                  return;
+              const nodePath = node.pathStr;
+              if (!nodePath)
+                  return;
+              const compName = component.name;
+              const instanceName = `${compName}_${nodePath}`;
+              const path = parentPath ? `${parentPath}.${compName}` : compName;
+              const newComponent = merge__default["default"]({}, component, (_a = this.appliedConditions[nodePath]) === null || _a === void 0 ? void 0 : _a[path]);
+              const newChildren = this.getSlotComponent(newComponent.children || [], node, path);
+              newComponent.name = instanceName;
+              newComponent.children = newChildren;
+              try {
+                  core.Metadata.updateInstance(instanceName, newComponent);
+              }
+              catch (e) {
+                  // do nothing
+              }
+              newComponents.push(newComponent);
+          });
+          return newComponents;
       }
       /** Triggers when dragging nodes have been dropped */
       nodeDrop(nodes, position, event, element) {
@@ -10014,6 +10581,12 @@
               event, element, component: this, node,
           });
       }
+      /** Triggers when a node has been checked/unchecked */
+      nodeCheck(node, event, element) {
+          this.callEvent('onNodeCheck', {
+              event, element, component: this, node,
+          });
+      }
       clearSelection(nodes) {
           const nodesArray = nodes || this.nodes;
           nodesArray.forEach((node) => {
@@ -10023,6 +10596,19 @@
               }
           });
       }
+      getNode(path) {
+          return this.searchPath(this.nodes, path);
+      }
+      getParentNode(node) {
+          var _a;
+          return this.getNode(((_a = node.path) === null || _a === void 0 ? void 0 : _a.slice(0, -1)) || []);
+      }
+      searchPath(nodes, path) {
+          const currentNode = (path[0] > -1 && path[0] < nodes.length) ? nodes[path[0]] : undefined;
+          if (currentNode && path.length > 1)
+              return this.searchPath(currentNode.children || [], path.slice(1));
+          return currentNode;
+      }
   }
 
   /**
@@ -10201,9 +10787,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
@@ -10372,7 +10974,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);
@@ -10646,7 +11248,7 @@
       tableColumns: 'mdi-table-headers-eye',
       unfold: 'mdi-unfold-more-horizontal',
       warning: 'mdi-exclamation',
-      zoom: 'mdi-magnify-scan',
+      zoom: 'mdi-magnify',
       zoomIn: 'mdi-plus-circle-outline',
       zoomPanning: 'mdi-hand-back-right-outline',
       zoomOut: 'mdi-minus-circle-outline',
@@ -10744,11 +11346,23 @@
       zeedhi: {
           light: {
               'font-color': 'var(--v-grey-darken2)',
-              'background-base': '#F6F6F6',
+              'background-base': '#FDFDFD',
+              'background-base-2': '#F6F6F6',
+              'background-base-3': '#EEE',
+              'scrollbar-track': 'var(--v-grey-lighten5)',
+              'scrollbar-thumb': 'var(--v-grey-lighten4)',
+              'badge-background-color': '#f44336',
+              'badge-text-color': '#fff',
           },
           dark: {
               'font-color': 'var(--v-grey-lighten3)',
-              'background-base': '#121212',
+              'background-base': '#1E1E1E',
+              'background-base-2': 'var(--v-grey-darken2)',
+              'background-base-3': 'var(--v-grey-darken4)',
+              'scrollbar-track': 'var(--v-grey-darken3)',
+              'scrollbar-thumb': 'var(--v-grey-base)',
+              'badge-background-color': '#f44336',
+              'badge-text-color': '#fff',
           },
           variables: {
               'default-padding': '16px',
@@ -10766,8 +11380,6 @@
               'font-body4-weight': '500',
               'font-caption-size': '11px',
               'font-caption-weight': '400',
-              'badge-background-color': '#f44336',
-              'badge-text-color': '#fff',
           },
       },
   };
@@ -11022,6 +11634,7 @@
                   sequence: index,
                   format: this.getFormatOfColumn(col),
                   size: `${size}%`,
+                  xlsType: col.xlsType,
               };
               return Object.assign(Object.assign({}, result), { [col.name]: row });
           }, {});