@zeedhi/common 1.42.0 → 1.45.0

package/dist/zd-common.esm.js

@@ -1,4 +1,4 @@
-import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, isEqual, Router, InstanceNotFoundError, Http, Cookie, normalize, URL as URL$1 } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, FormatterParserProvider, Validation, Accessor, DatasourceFactory, I18n, MethodNotAssignedError, Loader, Mask, Config, dayjs, Utils, Router, InstanceNotFoundError, Http, Cookie, URL as URL$1 } from '@zeedhi/core';
 import merge from 'lodash.merge';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
@@ -192,6 +192,7 @@ class Component {
      * @param element Element mounted reference
      */
     onMounted(element) {
+        this.element = element;
         if (Object.keys(this.keyMap).length) {
             KeyMap.bind(this.keyMap, this, element);
         }
@@ -219,7 +220,11 @@ class Component {
      * @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.
@@ -437,6 +442,26 @@ class ApexChart extends ComponentRender {
                         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);
@@ -479,6 +504,226 @@ class ApexChart extends ComponentRender {
         }
         return Promise.resolve();
     }
+    /**
+     * Fires when the chart’s initial animation is finished
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    animationEndEvent(chartContext, options) {
+        this.callEvent('chartAnimationEnd', { component: this, chartContext, options });
+    }
+    /**
+     * Fires before the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    beforeMountEvent(chartContext, config) {
+        this.callEvent('chartBeforeMount', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires after the chart has been drawn on screen
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    mountedEvent(chartContext, config) {
+        this.callEvent('chartMounted', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    updatedEvent(chartContext, config) {
+        this.callEvent('chartUpdated', {
+            component: this, chartContext, config,
+        });
+    }
+    /**
+     * Fires when the chart has been dynamically updated either with
+     * updateOptions() or updateSeries() functions
+     * @param event Event that triggered the click event
+     * @param chartContext
+     * @param config
+     * @param element DOM Element
+     */
+    clickEvent(event, chartContext, config) {
+        this.callEvent('chartClick', {
+            event: (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)
@@ -863,6 +1108,16 @@ class Carousel extends ComponentRender {
          * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
          */
         this.height = 'auto';
+        /**
+         * Sets the carousel max height. Example values: 'auto', '100%', '400px',
+         * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the carousel min height. Example values: 'auto', '100%', '400px',
+         * '30em', '400', 400. Values without measurement unit will be notated in pixels by default
+         */
+        this.minHeight = 'none';
         /**
          * Configures the carousel as infinite (the slide after the last one is the first slide, and vice-versa)
          */
@@ -954,6 +1209,8 @@ class Carousel extends ComponentRender {
         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);
@@ -1189,6 +1446,7 @@ class Form extends ComponentRender {
         this.internalValue = {};
         this.align = this.getInitValue('align', props.align, this.align);
         this.justify = this.getInitValue('justify', props.justify, this.justify);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.internalValue = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
     }
@@ -1392,9 +1650,9 @@ class Input extends ComponentRender {
          */
         this.storePath = '';
         /**
-         * Input value.
-         */
-        this.value = undefined;
+        * Internal input value.
+        */
+        this.value = null;
         /**
          * Input validations.
          */
@@ -1542,6 +1800,8 @@ class Input extends ComponentRender {
      * @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 });
         }
@@ -1778,6 +2038,10 @@ class CodeEditor extends ComponentRender {
          * Max height in pixels. 'none' means no limit.
          */
         this.maxHeight = 'none';
+        /**
+         * Max height in pixels. 'none' means no limit.
+         */
+        this.height = 'auto';
         /**
          * Language code to be used for highlight (js|javascript, css, html, json, ts|typescript, bash|shell)
          * Other languages must be imported above
@@ -1797,6 +2061,7 @@ class CodeEditor extends ComponentRender {
         this.staticCode = this.getInitValue('staticCode', props.staticCode, this.staticCodeValue);
         this.copyIcon = this.getInitValue('copyIcon', props.copyIcon, this.copyIcon);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.language = this.getInitValue('language', props.language, this.language);
         this.showLineNumbers = this.getInitValue('showLineNumbers', props.showLineNumbers, this.showLineNumbers);
         this.createAccessors();
@@ -2003,12 +2268,27 @@ class Container extends ComponentRender {
          * Adds height 100% to container.
          */
         this.fillHeight = false;
+        /**
+         * Sets the height for the component.
+         */
+        this.height = 'auto';
+        /**
+         * Sets the maximum height for the component.
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the minimum height for the component.
+         */
+        this.minHeight = 'none';
         /**
          * Removes viewport maximum-width size breakpoints.
          */
         this.fluid = true;
         this.fluid = this.getInitValue('fluid', props.fluid, this.fluid);
         this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.createAccessors();
     }
 }
@@ -2346,6 +2626,14 @@ class Dialog extends Component {
          * Dialog type (normal, success, error, warning, info)
          */
         this.type = 'normal';
+        /**
+         * Confirm button component name
+         */
+        this.confirmButton = 'dialogButton';
+        /**
+         * Deny button component name
+         */
+        this.denyButton = undefined;
         /**
          * Default dialog buttons
          * @private
@@ -2357,6 +2645,8 @@ class Dialog extends Component {
                 events: { click: () => this.hide() },
             }];
         this.defaultValues = {
+            confirmButton: this.confirmButton,
+            denyButton: this.denyButton,
             name: this.name,
             maxWidth: this.maxWidth,
             persistent: this.persistent,
@@ -2364,6 +2654,38 @@ class Dialog extends Component {
             title: this.title,
             text: this.text,
         };
+        this.clickDefaultButtonKeyMapping = {
+            enter: {
+                event: () => {
+                    if (this.confirmButton) {
+                        const confirmButton = Metadata.getInstance(this.confirmButton);
+                        if (confirmButton
+                            && confirmButton.events
+                            && confirmButton.events.click
+                            && typeof confirmButton.events.click === 'function') {
+                            confirmButton.events.click({ component: new Button(confirmButton) });
+                        }
+                    }
+                },
+                stop: true,
+            },
+            esc: {
+                event: () => {
+                    if (this.denyButton) {
+                        const denyButton = Metadata.getInstance(this.denyButton);
+                        if (denyButton
+                            && denyButton.events
+                            && denyButton.events.click
+                            && typeof denyButton.events.click === 'function')
+                            denyButton.events.click({ component: new Button(denyButton) });
+                    }
+                    else {
+                        this.hide();
+                    }
+                },
+                stop: true,
+            },
+        };
         this.assignDialogProperties(props);
         this.createAccessors();
     }
@@ -2373,6 +2695,8 @@ class Dialog extends Component {
      */
     assignDialogProperties(dialog) {
         this.buttons = dialog.buttons && dialog.buttons.length ? dialog.buttons : this.defaultButtons;
+        this.confirmButton = this.getInitValue('confirmButton', dialog.confirmButton, this.defaultValues.confirmButton);
+        this.denyButton = this.getInitValue('denyButton', dialog.denyButton, this.defaultValues.denyButton);
         this.name = this.getInitValue('name', dialog.name, this.defaultValues.name);
         this.maxWidth = this.getInitValue('maxWidth', dialog.maxWidth, this.defaultValues.maxWidth);
         this.persistent = this.getInitValue('persistent', dialog.persistent, this.defaultValues.persistent);
@@ -2385,6 +2709,7 @@ class Dialog extends Component {
      * Displays dialog
      */
     show() {
+        KeyMap.bind(this.clickDefaultButtonKeyMapping, this);
         this.isVisible = true;
     }
     /**
@@ -2392,6 +2717,7 @@ class Dialog extends Component {
      */
     hide() {
         this.isVisible = false;
+        KeyMap.unbind(this.clickDefaultButtonKeyMapping, this);
     }
 }
 
@@ -2488,61 +2814,34 @@ class ModalService {
  */
 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.
@@ -3149,8 +3448,9 @@ class Date$1 extends TextInput {
         return !this.dateError || 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;
         }
     }
@@ -3463,7 +3763,7 @@ class DateRange extends TextInput {
         const lastValue = this.value;
         this.dateError = false;
         this.value = this.parseISODateRangeValue(newValue);
-        if (!isEqual(lastValue, this.value))
+        if (!Utils.isEqual(lastValue, this.value))
             this.change(this.value);
     }
     formatISODateRangeValue(dates) {
@@ -3498,8 +3798,9 @@ class DateRange extends TextInput {
         return !this.dateError || 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;
         }
     }
@@ -3721,6 +4022,10 @@ class Dropdown extends ComponentRender {
          * Applies position fixed to the dropdown.
          */
         this.fixed = false;
+        /**
+         * Sets the height for the dropdown.
+         */
+        this.height = 'auto';
         /**
          * Offset the menu on the x-axis.
          */
@@ -3746,6 +4051,7 @@ class Dropdown extends ComponentRender {
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
         this.hover = this.getInitValue('hover', props.hover, this.hover);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
@@ -3867,7 +4173,7 @@ class FileInput extends TextInput {
      * 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();
@@ -4007,12 +4313,18 @@ class Frame extends ComponentRender {
         this.override = {};
         this.cache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
+        this.height = 'auto';
+        this.maxHeight = 'none';
+        this.minHeight = 'none';
         this.headerName = 'sw-fetched-on';
         this.path = props.path;
         this.local = props.local === true;
         this.override = props.override || this.override;
         this.cache = props.cache || this.cache;
         this.cacheDuration = this.getInitValue('cacheDuration', props.cacheDuration, this.cacheDuration);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.createAccessors();
         this.getMetadata();
     }
@@ -4149,6 +4461,8 @@ class Column extends Component {
         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)  */
@@ -4191,6 +4505,7 @@ class Column extends Component {
         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();
@@ -4529,7 +4844,7 @@ class GridColumn extends Column {
         if (this.componentProps.dataValueOut && ((_a = component.datasource) === null || _a === void 0 ? void 0 : _a.currentRow)) {
             this.componentProps.dataValueOut.forEach((columns) => {
                 const { column, columnOnGrid } = columns;
-                if (!isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
+                if (!Utils.isEqual(newRow.originalRow[columnOnGrid], component.datasource.currentRow[column])) {
                     newRow[`${columnOnGrid}_original`] = newRow.originalRow[columnOnGrid];
                     newRow[columnOnGrid] = component.datasource.currentRow[column];
                 }
@@ -4543,7 +4858,7 @@ class GridColumn extends Column {
     }
 }
 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;
@@ -4591,7 +4906,7 @@ FormatterParserProvider.registerFormatter('column_ZdSelect', ({ column, value, r
         });
         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;
@@ -5010,15 +5325,36 @@ class GridEditable extends Grid {
          * @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);
+        KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+    }
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter
@@ -5188,7 +5524,7 @@ class GridEditable extends Grid {
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
         const columnName = column.name;
-        if (!isEqual(value, row[columnName])) {
+        if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
             newRow[key].originalRow = Object.assign({}, row);
@@ -5234,6 +5570,14 @@ class GridEditable extends Grid {
      * Cancels all edited rows and enable grid components
      */
     cancelEditedRows() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.removeAddedRows();
+            this.editing = false;
+            this.editedRows = {};
+            this.invalidComponents = {};
+        });
+    }
+    removeAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
             const { data } = this.datasource;
             data.forEach((row, index) => {
@@ -5242,21 +5586,26 @@ class GridEditable extends Grid {
                 }
             });
             yield this.datasource.updateData(data);
-            this.editing = false;
-            this.editedRows = {};
-            this.invalidComponents = {};
         });
     }
+    addDataRow(row) {
+        if (this.addedRows[row[this.datasource.uniqueKey]])
+            this.datasource.post(row);
+        else
+            this.datasource.put(row);
+    }
     /**
      * Saves all edited rows if they are valid
      * @throws Will throw when it finds an invalid row
      */
     saveEditedRows() {
         return __awaiter(this, void 0, void 0, function* () {
-            const response = yield Promise.all(this.getEditedRows().map((row) => this.datasource.put(row)));
+            yield this.removeAddedRows();
+            const response = yield Promise.all(this.getEditedRows().map((row) => this.addDataRow(row)));
             this.editing = false;
             this.editedRows = {};
             this.invalidComponents = {};
+            this.addedRows = {};
             yield this.datasource.get();
             return response;
         });
@@ -5268,8 +5617,11 @@ class GridEditable extends Grid {
     getEditedRows() {
         const editedRows = [];
         Object.keys(this.editedRows).forEach((key) => {
+            this.addedRows = {};
             const row = Object.assign(Object.assign({}, this.editedRows[key].originalRow), this.editedRows[key]);
             delete row.originalRow;
+            if (row[this.newRowIdentifier])
+                this.addedRows[key] = row;
             delete row[this.newRowIdentifier];
             Object.keys(row).forEach((attr) => {
                 if (Object.prototype.hasOwnProperty.call(row, `${attr}_original`)) {
@@ -6308,10 +6660,10 @@ class Select extends TextInput {
     }
 }
 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];
@@ -6334,7 +6686,7 @@ FormatterParserProvider.registerFormatter('ZdSelect', (value, { dataText, dataTe
         }
     });
     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]) {
@@ -6553,6 +6905,18 @@ class List extends ComponentRender {
          * Will only collapse when explicitly closed.
          */
         this.expand = false;
+        /**
+         * Sets the height for the component.
+         */
+        this.height = 'auto';
+        /**
+         * Sets the maxHeight for the component.
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the minHeight for the component.
+         */
+        this.minHeight = 'none';
         this.dark = this.getInitValue('dark', props.dark, this.dark);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
@@ -6564,6 +6928,9 @@ class List extends ComponentRender {
         this.color = this.getInitValue('color', props.color, this.color);
         this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
         this.expand = this.getInitValue('expand', props.expand, this.expand);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.createAccessors();
     }
     /**
@@ -6657,6 +7024,41 @@ class ListGroup extends ListItem {
     }
 }
 
+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.
  */
@@ -7013,6 +7415,8 @@ class Menu extends ComponentRender {
         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);
@@ -7245,7 +7649,7 @@ class Menu extends ComponentRender {
                 if (item.component === 'ZdMenuGroup') {
                     this.searchItems(item.items);
                 }
-                else if (normalize(I18n.translate(item.label)).indexOf(normalize(this.searchValue)) !== -1) {
+                else if (Utils.normalize(I18n.translate(item.label)).indexOf(Utils.normalize(this.searchValue)) !== -1) {
                     this.filteredMenuItems.push(item);
                 }
             }
@@ -7288,9 +7692,21 @@ class MenuLink extends ComponentRender {
      */
     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;
         }
     }
     /**
@@ -7359,6 +7775,29 @@ class MenuGroup extends ComponentRender {
     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;
+        }
+    }
 }
 
 /**
@@ -7436,10 +7875,20 @@ class Modal extends Component {
          * 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();
     }
@@ -8881,8 +9330,13 @@ class SelectTreeMultiple extends SelectTree {
          */
         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();
     }
     /**
@@ -9306,6 +9760,7 @@ class Tabs extends ComponentRender {
         this.tabs = [];
         this.tabs = this.getTabs(props.tabs || []);
         this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTab);
+        this.height = this.getInitValue('height', props.height, this.height);
         this.createAccessors();
     }
     getTabs(tabs) {
@@ -9701,8 +10156,11 @@ class Time extends TextInput {
             || 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;
         }
     }
@@ -9828,6 +10286,10 @@ class Tree extends ComponentRender {
          * 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 */
@@ -9838,11 +10300,21 @@ class Tree extends ComponentRender {
          * 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);
@@ -9853,8 +10325,16 @@ class Tree extends ComponentRender {
         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 = DatasourceFactory.factory(Object.assign(Object.assign({}, props.datasource), { searchIn: props.datasource.searchIn || [this.titleField, this.dataField].filter(Boolean), lazyLoad: true, loadAll: true }));
@@ -9862,6 +10342,12 @@ class Tree extends ComponentRender {
         }
         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;
@@ -9872,6 +10358,16 @@ class Tree extends ComponentRender {
         }
         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;
@@ -9970,16 +10466,87 @@ class Tree extends ComponentRender {
     setTree(tree) {
         this.tree = tree;
     }
-    /** Get the conditions function to be applied to each column depending on the node */
-    getConditions(conditions) {
-        const cond = 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] = 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(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({}, 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 {
+                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) {
@@ -10007,6 +10574,12 @@ class Tree extends ComponentRender {
             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) => {
@@ -10016,6 +10589,19 @@ class Tree extends ComponentRender {
             }
         });
     }
+    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;
+    }
 }
 
 /**
@@ -10194,9 +10780,25 @@ class TreeGridEditable extends TreeGrid {
          * Enter edit mode on double click
          */
         this.doubleClickEdit = false;
+        this.cancelEditedRowsKeyMapping = {
+            esc: {
+                event: this.cancelEditedRows.bind(this),
+                stop: true,
+                input: true,
+                active: true,
+            },
+        };
         this.doubleClickEdit = this.getInitValue('doubleClickEdit', props.doubleClickEdit, this.doubleClickEdit);
         this.createAccessors();
     }
+    onMounted(element) {
+        super.onMounted(element);
+        KeyMap.bind(this.cancelEditedRowsKeyMapping, this, element);
+    }
+    onBeforeDestroy() {
+        super.onBeforeDestroy();
+        KeyMap.unbind(this.cancelEditedRowsKeyMapping, this);
+    }
     /**
      * Get Grid columns objects
      * @param columns Grid columns parameter
@@ -10365,7 +10967,7 @@ class TreeGridEditable extends TreeGrid {
     changeEditableComponent(column, row, value, component) {
         const key = row[this.datasource.uniqueKey];
         const columnName = column.name;
-        if (!isEqual(value, row[columnName])) {
+        if (!Utils.isEqual(value, row[columnName])) {
             const newRow = {};
             newRow[key] = Object.assign({}, this.editedRows[key]);
             newRow[key].originalRow = Object.assign({}, row);
@@ -10639,7 +11241,7 @@ Icons.mdiIcons = {
     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',
@@ -10737,11 +11339,23 @@ const defaultTheme = {
     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',
@@ -10759,8 +11373,6 @@ const defaultTheme = {
             'font-body4-weight': '500',
             'font-caption-size': '11px',
             'font-caption-weight': '400',
-            'badge-background-color': '#f44336',
-            'badge-text-color': '#fff',
         },
     },
 };
@@ -11015,6 +11627,7 @@ class BaseReport {
                 sequence: index,
                 format: this.getFormatOfColumn(col),
                 size: `${size}%`,
+                xlsType: col.xlsType,
             };
             return Object.assign(Object.assign({}, result), { [col.name]: row });
         }, {});