@zeedhi/common 1.72.0 → 1.74.0

package/dist/zd-common.umd.js

@@ -30,6 +30,10 @@
        * @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.
            */
@@ -88,6 +92,7 @@
           this.parent = props.parent;
           this.name = props.name;
           this.events = core.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);
@@ -201,7 +206,7 @@
        * Triggered when the component is created.
        */
       onCreated() {
-          this.componentId = core.Metadata.addInstance(this);
+          this.componentId = core.Metadata.addInstance(this, this.allowDuplicate);
           if (this.parent) {
               this.parent.addChildInstance(this);
           }
@@ -436,10 +441,24 @@
            */
           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
@@ -453,10 +472,20 @@
            */
           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
            */
@@ -508,7 +537,12 @@
           this.options = merge__default["default"](this.defaultOptions, this.getInitValue('options', props.options, this.options));
           this.series = this.getInitValue('series', props.series, this.series);
           this.height = this.getInitValue('height', props.height, this.height);
+          this.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);
@@ -1157,7 +1191,11 @@
            * 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)
            */
@@ -1251,6 +1289,7 @@
           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);
@@ -1390,6 +1429,30 @@
            * 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
            */
@@ -1412,21 +1475,22 @@
           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();
       }
   }
@@ -1479,6 +1543,40 @@
        */
       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.
            */
@@ -1487,6 +1585,12 @@
           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();
       }
@@ -2105,13 +2209,39 @@
       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
@@ -2130,8 +2260,13 @@
           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();
@@ -2349,7 +2484,22 @@
           /**
            * 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.
            */
@@ -2364,6 +2514,9 @@
           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();
       }
   }
@@ -2977,10 +3130,42 @@
           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()}`,
@@ -3201,6 +3386,12 @@
           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);
@@ -4543,9 +4734,40 @@
           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);
@@ -4558,6 +4780,10 @@
           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();
@@ -4754,7 +4980,7 @@
                   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;
               });
@@ -4972,6 +5198,10 @@
            * 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
@@ -4989,6 +5219,7 @@
           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);
@@ -5337,9 +5568,39 @@
            */
           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
            */
@@ -5408,10 +5669,12 @@
           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);
@@ -5627,6 +5890,7 @@
           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;
@@ -5892,7 +6156,7 @@
                   }
               } });
           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) {
@@ -6001,21 +6265,25 @@
        */
       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) {
@@ -6031,7 +6299,7 @@
        */
       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 = {};
@@ -6373,10 +6641,6 @@
            * 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\"
@@ -6385,32 +6649,58 @@
            */
           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
        */
@@ -7363,17 +7653,39 @@
               },
           ];
           /**
-           * 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
            */
@@ -7388,8 +7700,12 @@
           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) {
@@ -7475,17 +7791,39 @@
            */
           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);
@@ -7498,8 +7836,12 @@
           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();
       }
       /**
@@ -8865,10 +9207,33 @@
           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();
       }
   }
@@ -10125,11 +10490,52 @@
            * 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) {
@@ -10426,9 +10832,32 @@
            * 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();
       }
   }
@@ -10449,7 +10878,6 @@
           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();
       }
@@ -10483,9 +10911,31 @@
           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() {
@@ -10647,11 +11097,22 @@
            */
           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);
@@ -10666,6 +11127,8 @@
           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))) {
@@ -11165,6 +11628,40 @@
            * 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
            */
@@ -11208,7 +11705,12 @@
           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;
@@ -11960,7 +12462,7 @@
                   }
               } });
           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)