@zeedhi/common 1.72.0 → 1.74.0

package/dist/zd-common.esm.js

@@ -23,6 +23,10 @@ class Component {
      * @param props Components properties
      */
     constructor(props) {
+        /**
+         * Allow the component to be duplicated without warning.
+         */
+        this.allowDuplicate = false;
         /**
          * Automatically add focus to input when it's created.
          */
@@ -81,6 +85,7 @@ class Component {
         this.parent = props.parent;
         this.name = props.name;
         this.events = Event.factory(props.events || this.events);
+        this.allowDuplicate = this.getInitValue('allowDuplicate', props.allowDuplicate, this.allowDuplicate);
         this.autofocus = this.getInitValue('autofocus', props.autofocus, this.autofocus);
         this.cssClass = this.getInitValue('cssClass', props.cssClass, this.cssClass);
         this.cssStyle = this.getInitValue('cssStyle', props.cssStyle, this.cssStyle);
@@ -194,7 +199,7 @@ class Component {
      * Triggered when the component is created.
      */
     onCreated() {
-        this.componentId = Metadata.addInstance(this);
+        this.componentId = Metadata.addInstance(this, this.allowDuplicate);
         if (this.parent) {
             this.parent.addChildInstance(this);
         }
@@ -429,10 +434,24 @@ class ApexChart extends ComponentRender {
          */
         this.chartType = 'line';
         /**
-         * Defines the chart height. Possible values for width can be
+         * Defines the component height. Possible values for this property can be
          * <samp>'auto', '100%', '400px' or 400</samp>
          */
-        this.height = 'auto';
+        this.height = '100%';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         /**
          * Chart options. See <a href=\"https://apexcharts.com/docs/options/\"
          * target=\"_blank\" alt=\"Apex Charts API Reference\">Apex Chart API
@@ -446,10 +465,20 @@ class ApexChart extends ComponentRender {
          */
         this.series = [];
         /**
-         * Defines the chart width. Possible values for width can be
+         * Defines the component width. Possible values for this property can be
          * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Defines if chart is loading
          */
@@ -501,7 +530,12 @@ class ApexChart extends ComponentRender {
         this.options = merge(this.defaultOptions, this.getInitValue('options', props.options, this.options));
         this.series = this.getInitValue('series', props.series, this.series);
         this.height = this.getInitValue('height', props.height, this.height);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.loading = this.getInitValue('loading', props.loading, this.loading);
         this.loadOpacity = this.getInitValue('loadOpacity', props.loadOpacity, this.loadOpacity);
         this.loadColor = this.getInitValue('loadColor', props.loadColor, this.loadColor);
@@ -1150,7 +1184,11 @@ class Carousel extends ComponentRender {
          * 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';
+        this.minHeight = 'auto';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         /**
          * Configures the carousel as infinite (the slide after the last one is the first slide, and vice-versa)
          */
@@ -1244,6 +1282,7 @@ class Carousel extends ComponentRender {
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         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);
@@ -1383,6 +1422,30 @@ class Card extends ComponentRender {
          * Designates that the card is a link
          */
         this.link = false;
+        /**
+         * Sets the maximum height for the card.
+         * Possible values for width can be 'auto', '100%', '400px' or 400
+         */
+        this.maxHeight = 'none';
+        /**
+         * Sets the maximum width for the card.
+         * Possible values for width can be 'auto', '100%', '400px' or 400
+         */
+        this.maxWidth = 'none';
+        /**
+         * Sets the minimum height for the card.
+         * Possible values for width can be 'auto', '100%', '400px' or 400
+         */
+        this.minHeight = 'auto';
+        /**
+         * Sets the minimum width for the card.
+         * Possible values for width can be 'auto', '100%', '400px' or 400
+         */
+        this.minWidth = 'auto';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         /**
          * Removes card elevation shadow and adds a thin border
          */
@@ -1405,21 +1468,22 @@ class Card extends ComponentRender {
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
         this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
         this.flat = this.getInitValue('flat', props.flat, this.flat);
-        this.height = this.getInitValue('height', props.height, this.height);
         this.hover = this.getInitValue('hover', props.hover, this.hover);
         this.href = this.getInitValue('href', props.href, this.href);
         this.img = this.getInitValue('img', props.img, this.img);
         this.link = this.getInitValue('link', props.link, this.link);
+        this.height = this.getInitValue('height', props.height, this.height);
+        this.width = this.getInitValue('width', props.width, this.width);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
         this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.outlined = this.getInitValue('outlined', props.outlined, this.outlined);
         this.raised = this.getInitValue('raised', props.raised, this.raised);
         this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
         this.tile = this.getInitValue('tile', props.tile, this.tile);
         this.to = this.getInitValue('to', props.to, this.to);
-        this.width = this.getInitValue('width', props.width, this.width);
         this.createAccessors();
     }
 }
@@ -1472,6 +1536,40 @@ class Form extends ComponentRender {
      */
     constructor(props) {
         super(props);
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Children components that are Inputs.
          */
@@ -1480,6 +1578,12 @@ class Form extends ComponentRender {
         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.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.internalValue = this.getInitValue('value', props.value, this.value);
         this.createAccessors();
     }
@@ -2098,13 +2202,39 @@ class CodeEditor extends ComponentRender {
     constructor(props) {
         super(props);
         /**
-         * Max height in pixels. 'none' means no limit.
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.maxHeight = 'none';
         /**
-         * Max height in pixels. 'none' means no limit.
+         * Set component height to fill all space available
          */
-        this.height = 'auto';
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = 'auto';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Language code to be used for highlight (js|javascript, css, html, json, ts|typescript, bash|shell)
          * Other languages must be imported above
@@ -2123,8 +2253,13 @@ class CodeEditor extends ComponentRender {
         this.staticCodeValue = '';
         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.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
+        this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.language = this.getInitValue('language', props.language, this.language);
         this.showLineNumbers = this.getInitValue('showLineNumbers', props.showLineNumbers, this.showLineNumbers);
         this.createAccessors();
@@ -2342,7 +2477,22 @@ class Container extends ComponentRender {
         /**
          * Sets the minimum height for the component.
          */
-        this.minHeight = 'none';
+        this.minHeight = 'auto';
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Removes viewport maximum-width size breakpoints.
          */
@@ -2357,6 +2507,9 @@ class Container extends ComponentRender {
         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.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.createAccessors();
     }
 }
@@ -2970,10 +3123,42 @@ class Dashboard extends ComponentRender {
         this.overrideNamedProps = {};
         /* Remove the paddings of the dashboard */
         this.removePadding = false;
-        /* Height of the dashboard */
-        this.height = '';
-        /* Height adjust of the dashboard */
+        /* Height steps of the dashboard cards */
         this.heightAdjust = '';
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /* Creates the add modal */
         this.addModalDef = {
             name: `addModal${this.getCardId()}`,
@@ -3194,6 +3379,12 @@ class Dashboard extends ComponentRender {
         this.overrideNamedProps = props.overrideNamedProps || this.overrideNamedProps;
         this.removePadding = this.getInitValue('removePadding', props.removePadding, this.removePadding);
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.heightAdjust = this.getInitValue('heightAdjust', props.heightAdjust, this.heightAdjust);
         this.cardFooterSlot = this.getInitValue('cardFooterSlot', props.cardFooterSlot, this.cardFooterSlot);
         this.editHeader = this.getInitValue('editHeader', props.editHeader, this.editHeader);
@@ -4536,9 +4727,40 @@ class Frame extends ComponentRender {
         this.cache = false;
         this.JSONCache = false;
         this.cacheDuration = 2 * 60 * 60 * 1000;
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
         this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
         this.maxHeight = 'none';
-        this.minHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         this.type = 'get';
         this.headerName = 'sw-fetched-on';
         this.path = this.getInitValue('path', props.path, this.path);
@@ -4551,6 +4773,10 @@ class Frame extends ComponentRender {
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.type = this.getInitValue('type', props.type, this.type);
         this.params = this.getInitValue('params', props.params, this.params);
         this.createAccessors();
@@ -4747,7 +4973,7 @@ class Column extends Component {
                 data.forEach((row) => {
                     lookupData[row[lookupColumn]] = row;
                 });
-                this.lookupData = lookupData;
+                this.lookupData = Object.assign(Object.assign({}, this.lookupData), lookupData);
                 this.lookupDataCount += 1;
                 this.loading = false;
             });
@@ -4965,6 +5191,10 @@ class Iterable extends ComponentRender {
          * Uses virtual scrolling to render data.
          */
         this.virtualScroll = false;
+        /**
+         * Number of lines outside the viewport to cache when using virtual scroll.
+         */
+        this.virtualScrollCache = 5;
         /**
          * Dictionary of rowKey ponting to Dictionary of colName pointing to Dictionary of prop pointing to the
          * condition (applied) return value
@@ -4982,6 +5212,7 @@ class Iterable extends ComponentRender {
         this.pageSizes = this.getInitValue('pageSizes', props.pageSizes, this.pageSizes);
         this.searchVisibleOnly = this.getInitValue('searchVisibleOnly', props.searchVisibleOnly, this.defaultSearchVisibleOnly);
         this.virtualScroll = this.getInitValue('virtualScroll', props.virtualScroll, this.virtualScroll);
+        this.virtualScrollCache = this.getInitValue('virtualScrollCache', props.virtualScrollCache, this.virtualScrollCache);
     }
     createController() {
         const controller = new IterableController(this);
@@ -5330,9 +5561,39 @@ class Grid extends Iterable {
          */
         this.dense = true;
         /**
-         * Defines if the component should fill the entire available height
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
          */
         this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Controls footer visibility
          */
@@ -5401,10 +5662,12 @@ class Grid extends Iterable {
         this.light = this.getInitValue('light', props.light, this.light);
         this.selectable = this.getInitValue('selectable', props.selectable, this.selectable);
         this.height = this.getInitValue('height', props.height, this.height);
-        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
         this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
-        this.gridHeight = this.getInitValue('gridHeight', props.gridHeight, this.gridHeight);
-        this.gridMaxHeight = this.getInitValue('gridMaxHeight', props.gridMaxHeight, this.gridMaxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.showFooter = this.getInitValue('showFooter', props.showFooter, this.showFooter);
         this.showHeader = this.getInitValue('showHeader', props.showHeader, this.showHeader);
         this.headerBackground = this.getInitValue('headerBackground', props.headerBackground, this.headerBackground);
@@ -5620,6 +5883,7 @@ class Grid extends Iterable {
         const newChildren = (_d = newComponent.children) === null || _d === void 0 ? void 0 : _d.map((child) => this.getActionComponent(child, column, row, path));
         newComponent.name = instanceName;
         newComponent.children = newChildren;
+        newComponent.allowDuplicate = true;
         try {
             const updatedComponent = Object.assign({}, newComponent);
             delete updatedComponent.datasource;
@@ -5885,7 +6149,7 @@ class GridEditable extends Grid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
     }
     checkLookupData(column, row, componentProps) {
         if (row[column.name] && column.lookupData && componentProps.datasource) {
@@ -5994,21 +6258,25 @@ class GridEditable extends Grid {
      */
     cancelEditedRows() {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.removeAddedRows();
+            yield this.cancelAddedRows();
             this.editing = false;
             this.editedRows = {};
             this.invalidComponents = {};
         });
     }
-    removeAddedRows() {
+    cancelAddedRows() {
         return __awaiter(this, void 0, void 0, function* () {
-            const { data } = this.datasource;
-            data.forEach((row, index) => {
+            const { data, page } = this.datasource;
+            const allData = this.datasource.allData || data;
+            Promise.resolve(allData);
+            allData.forEach((row, index) => {
                 if (row[this.newRowIdentifier]) {
-                    data.splice(index, 1);
+                    allData.splice(index, 1);
                 }
             });
-            yield this.datasource.updateData(data);
+            yield this.datasource.updateData(allData);
+            yield this.datasource.get();
+            yield this.datasource.setPage(page);
         });
     }
     addDataRow(row) {
@@ -6024,7 +6292,7 @@ class GridEditable extends Grid {
      */
     saveEditedRows(revalidate = false) {
         return __awaiter(this, void 0, void 0, function* () {
-            yield this.removeAddedRows();
+            yield this.cancelAddedRows();
             const response = yield Promise.all(this.getEditedRows(revalidate).map((row) => this.addDataRow(row)));
             this.editing = false;
             this.editedRows = {};
@@ -6366,10 +6634,6 @@ class Image extends ComponentRender {
          * Text to be shown if an error occurs.
          */
         this.errorImageText = '';
-        /**
-         * Height of the image, e.g. <samp>\"100px\"</samp> or <samp>\"50%\"</samp>.
-         */
-        this.height = '';
         /**
          * Defines how the image should be resized to fit its container.
          *  See <a href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit\"
@@ -6378,32 +6642,58 @@ class Image extends ComponentRender {
          */
         this.objectFit = '';
         /**
-         * Source of the image file.
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
-        this.srcValue = '';
+        this.height = 'auto';
         /**
-         * Width of the image, e.g. <samp>\"100px\"</samp> or <samp>\"50%\"</samp>.
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
-        this.width = '';
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = 'auto';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
+        /**
+         * Source of the image file.
+         */
+        this.srcValue = '';
         this.validImage = undefined;
         this.src = this.getInitValue('src', props.src, this.srcValue);
         this.alt = this.getInitValue('alt', props.alt, this.alt);
         this.errorImagePath = this.getInitValue('errorImagePath', props.errorImagePath, this.errorImagePath);
         this.errorImageText = this.getInitValue('errorImageText', props.errorImageText, this.errorImageText);
-        this.width = this.getInitValue('width', props.width, this.width);
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.objectFit = this.getInitValue('objectFit', props.objectFit, this.objectFit);
         this.createAccessors();
     }
-    /**
-     * Returns the style attribute for the image component
-     */
-    getStyle() {
-        const width = this.width ? `width: ${this.width}; ` : '';
-        const height = this.height ? `height: ${this.height}; ` : '';
-        const objectFit = this.objectFit ? `object-fit: ${this.objectFit};` : '';
-        return width + height + objectFit;
-    }
     /**
      * Event to be called after the error image is loaded
      */
@@ -7356,17 +7646,39 @@ class IterableComponentRender extends Iterable {
             },
         ];
         /**
-         * Sets the height for the component.
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.height = 'auto';
         /**
-         * Sets the maximum height for the component.
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.maxHeight = 'none';
         /**
-         * Sets the minimum height for the component.
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
-        this.minHeight = 'none';
+        this.maxWidth = 'none';
         /**
          * Components that will be rendered in error case
          */
@@ -7381,8 +7693,12 @@ class IterableComponentRender extends Iterable {
         this.noDataSlot = this.changeDefaultSlotNames(this.noDataSlot);
         this.noResultSlot = this.changeDefaultSlotNames(this.noResultSlot);
         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.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.createAccessors();
     }
     addSlashes(value) {
@@ -7468,17 +7784,39 @@ class List extends ComponentRender {
          */
         this.expand = false;
         /**
-         * Sets the height for the component.
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.height = 'auto';
         /**
-         * Sets the maxHeight for the component.
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.maxHeight = 'none';
         /**
-         * Sets the minHeight for the component.
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
-        this.minHeight = 'none';
+        this.maxWidth = '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);
@@ -7491,8 +7829,12 @@ class List extends ComponentRender {
         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.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
+        this.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.createAccessors();
     }
     /**
@@ -8858,10 +9200,33 @@ class Row extends ComponentRender {
         super(props);
         this.dense = true;
         this.noGutters = false;
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         this.align = this.getInitValue('align', props.align, this.align);
         this.dense = this.getInitValue('dense', props.dense, this.dense);
         this.justify = this.getInitValue('justify', props.justify, this.justify);
         this.noGutters = this.getInitValue('noGutters', props.noGutters, this.noGutters);
+        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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.createAccessors();
     }
 }
@@ -10118,11 +10483,52 @@ class SelectableList extends List {
          * Sets the active list-item inside the list-group
          */
         this.value = undefined;
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
         this.mandatory = this.getInitValue('mandatory', props.mandatory, this.mandatory);
         this.max = this.getInitValue('max', props.max, this.max);
         this.multiple = this.getInitValue('multiple', props.multiple, this.multiple);
         this.value = this.getInitValue('value', props.value, this.value);
+        this.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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.createAccessors();
     }
     change(event, element) {
@@ -10419,9 +10825,32 @@ class Table extends Iterable {
          * Controls table head visibility.
          */
         this.showTableHead = true;
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         this.caption = Object.assign(Object.assign({}, this.caption), props.caption || {});
         this.fillWidth = this.getInitValue('fillWidth', props.fillWidth, this.fillWidth);
         this.showTableHead = this.getInitValue('showTableHead', props.showTableHead, this.showTableHead);
+        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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.createAccessors();
     }
 }
@@ -10442,7 +10871,6 @@ class Tab extends Component {
         this.lazyLoad = true;
         this.tabTitle = this.getInitValue('tabTitle', props.tabTitle, this.tabTitle);
         this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
-        this.flex = this.getInitValue('flex', props.flex, this.flex);
         this.lazyLoad = this.getInitValue('lazyLoad', props.lazyLoad, this.lazyLoad);
         this.createAccessors();
     }
@@ -10476,9 +10904,31 @@ class Tabs extends ComponentRender {
         super(props);
         this.activeTabValue = 0;
         this.tabs = [];
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
         this.tabs = this.getTabs(props.tabs || []);
         this.activeTab = this.getInitValue('activeTab', props.activeTab, this.activeTabValue);
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.createAccessors();
     }
     get activeTab() {
@@ -10640,11 +11090,22 @@ class Textarea extends TextInput {
          */
         this.rows = 5;
         /**
-         * Input height
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
          */
         this.height = 'auto';
         /**
-         * Should input fill the remaining height
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
          */
         this.fillHeight = false;
         this.autoGrow = this.getInitValue('autoGrow', props.autoGrow, this.autoGrow);
@@ -10659,6 +11120,8 @@ class Textarea extends TextInput {
         this.rowHeight = this.getInitValue('rowHeight', props.rowHeight, this.rowHeight);
         this.rows = this.getInitValue('rows', props.rows, this.rows);
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
         this.createAccessors();
         if (this.counter && !Number.isNaN(parseInt(this.counter.toString(), 10))) {
@@ -11158,6 +11621,40 @@ class Tree extends ComponentRender {
          * Components that will be rendered on toolbar slot
          */
         this.toolbarSlot = [];
+        /**
+         * Defines the component height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.height = 'auto';
+        /**
+         * Defines the component min height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minHeight = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxHeight = 'none';
+        /**
+         * Set component height to fill all space available
+         */
+        this.fillHeight = false;
+        /**
+         * Defines the component width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.width = '100%';
+        /**
+         * Defines the component min width. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.minWidth = 'auto';
+        /**
+         * Defines the component max height. Possible values for this property can be
+         * <samp>'auto', '100%', '400px' or 400</samp>
+         */
+        this.maxWidth = 'none';
         /**
          * Components that will be rendered on title slot
          */
@@ -11201,7 +11698,12 @@ class Tree extends ComponentRender {
         this.openLevelOnLoad = this.getInitValue('openLevelOnLoad', props.openLevelOnLoad, this.openLevelOnLoad);
         this.checkbox = this.getInitValue('checkbox', props.checkbox, this.checkbox);
         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.fillHeight = this.getInitValue('fillHeight', props.fillHeight, this.fillHeight);
+        this.width = this.getInitValue('width', props.width, this.width);
+        this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
+        this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
         this.disableCheckbox = this.getInitValue('disableCheckbox', props.disableCheckbox, this.disableCheckbox);
         this.afterTitleSlot = props.afterTitleSlot || this.afterTitleSlot;
         this.toolbarSlot = props.toolbarSlot || this.toolbarSlot;
@@ -11953,7 +12455,7 @@ class TreeGridEditable extends TreeGrid {
                 }
             } });
         this.updateOriginalRow(key, row);
-        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false });
+        return Object.assign(Object.assign({}, componentProps), { name: compName, parent: this, align: column.align, showLabel: false, showHelper: false, dense: true, value: colValue, events: newEvents, autofill: false, allowDuplicate: true });
     }
     updateOriginalRow(key, row) {
         if (this.editedRows[key] !== undefined)