@zeedhi/common 1.78.2 → 1.79.1

package/dist/zd-common.esm.js

@@ -1,5 +1,6 @@
-import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, DateHelper, Utils, Router, InstanceNotFoundError, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
+import { AccessorManager, Event, KeyMap, Metadata, Accessor, I18n, FormatterParserProvider, Validation, Mask, DatasourceFactory, MethodNotAssignedError, Loader, Config, dayjs, Utils, DateHelper, Router, InstanceNotFoundError, Cookie, Http, URL as URL$1, VersionService } from '@zeedhi/core';
 import merge from 'lodash.merge';
+import cloneDeep from 'lodash.clonedeep';
 import debounce from 'lodash.debounce';
 import isUndefined from 'lodash.isundefined';
 import set from 'lodash.set';
@@ -526,6 +527,7 @@ class ApexChart extends ComponentRender {
                 },
             },
         };
+        this.drillHistory = [];
         this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
         this.options = merge(this.defaultOptions, this.getInitValue('options', this.translateOptions(props.options), this.options));
         this.series = this.getInitValue('series', this.translateSeries(props.series), this.series);
@@ -625,7 +627,11 @@ class ApexChart extends ComponentRender {
      */
     updateChart(options) {
         merge(this.options, options);
+        if (options.labels) {
+            this.options.labels = options.labels;
+        }
         if (options.series) {
+            this.options.series = options.series;
             this.series = this.options.series;
         }
         if (this.viewUpdate) {
@@ -879,6 +885,20 @@ class ApexChart extends ComponentRender {
         }
         return newOptions;
     }
+    drillDown(options) {
+        this.drillHistory.push(cloneDeep(this.options));
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve(this.updateChart(options));
+            }, 200);
+        });
+    }
+    drillUp() {
+        if (this.drillHistory.length === 0)
+            return Promise.resolve();
+        const options = this.drillHistory.pop();
+        return this.updateChart(options);
+    }
 }
 
 /**
@@ -3874,7 +3894,9 @@ class Date$1 extends TextInput {
         this.removeDateMask();
         this.setDateValue(this.formatter(this.value));
         super.blur(event, element);
-        this.showDatePicker = false;
+        if (!Utils.isMobile()) {
+            this.showDatePicker = false;
+        }
     }
     focus(event, element) {
         this.addDateMask();
@@ -4257,6 +4279,8 @@ class DateRange extends TextInput {
             this.removeDateMask();
             this.setDateValue(this.formatter(this.value));
             super.blur(event, element);
+        }
+        if (!Utils.isMobile()) {
             this.showDatePicker = false;
         }
     }
@@ -4890,6 +4914,7 @@ class Frame extends ComponentRender {
     overrideNamedPropsFunc(metadata) {
         let strMetadata = JSON.stringify(metadata);
         Object.keys(this.overrideNamedProps).forEach((key) => {
+            strMetadata = strMetadata.replace(RegExp(`"<<${key}>>"`, 'g'), JSON.stringify(this.overrideNamedProps[key]));
             strMetadata = strMetadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
         });
         return JSON.parse(strMetadata);
@@ -7114,6 +7139,10 @@ class Select extends TextInput {
          * Defines if data handling should be manual or automatic
          */
         this.manualMode = false;
+        /**
+         * Specifies which DOM element that this component should detach to.
+         */
+        this.attach = false;
         /**
          * Defines if data handling should be manual or automatic
          */
@@ -7158,6 +7187,7 @@ class Select extends TextInput {
         this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
+        this.attach = this.getInitValue('attach', props.attach, this.attach);
         this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
         if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
             this.dataValue = 'value';
@@ -8313,8 +8343,32 @@ class MasterDetail extends ComponentRender {
          * Defines whether the relationship will be created on mounted
          */
         this.lazyRelate = 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.config = this.getInitValue('config', props.config, this.config);
         this.lazyRelate = this.getInitValue('lazyRelate', props.lazyRelate, this.lazyRelate);
+        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();
     }
     createRelationship(master, details = []) {
         if (master.datasource && details.length) {
@@ -9776,11 +9830,13 @@ class TreeDataStructure {
          * Stores tree structure
          */
         this.treeStructure = {};
+        this.fieldHasChild = '';
         this.searchValue = '';
         this.originalDatasource = tree.datasource;
         this.parentField = tree.parentField;
         this.fetchOnDemand = tree.fetchOnDemand;
         this.openLevelOnLoad = tree.openLevelOnLoad;
+        this.fieldHasChild = tree.fieldHasChild;
         this.tree = tree;
         this.init();
     }
@@ -10142,6 +10198,33 @@ class TreeDataStructure {
         });
         return result;
     }
+    /**
+     * Checks if a row has async children that are yet to be loaded
+     * @param row
+     * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+     */
+    hasChildOnDemand(row) {
+        if (!this.fieldHasChild)
+            return true;
+        const rowHasChild = row[this.fieldHasChild];
+        let isVisibleChevron = true;
+        switch (rowHasChild) {
+            case '0':
+            case false:
+            case 0:
+                isVisibleChevron = false;
+                break;
+            case '1':
+            case true:
+            case 1:
+                isVisibleChevron = true;
+                break;
+            default:
+                isVisibleChevron = true;
+                break;
+        }
+        return isVisibleChevron;
+    }
 }
 
 /**
@@ -10234,6 +10317,10 @@ class SelectTree extends TextInput {
          * Uses delayed loading to load tree branches
          */
         this.fetchOnDemand = false;
+        /**
+         * Defines if the node tree has child
+         */
+        this.fieldHasChild = '';
         this.savedNodes = undefined;
         this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
         this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -10254,6 +10341,8 @@ class SelectTree extends TextInput {
         this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
         this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
         this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
+        this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
+        this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
         if (props.datasource && Object.keys(props.datasource).length) {
             this.lazyLoad = props.datasource.lazyLoad !== false;
             const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -10291,6 +10380,7 @@ class SelectTree extends TextInput {
             parentField: this.parentField,
             openLevelOnLoad: false,
             fetchOnDemand: this.fetchOnDemand,
+            fieldHasChild: this.fieldHasChild,
         });
         if (!this.lazyLoad) {
             this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -10421,7 +10511,14 @@ class SelectTree extends TextInput {
         return this.disabledItems.indexOf(node.id) !== -1;
     }
     getDisabledNodes(nodes) {
-        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
+        return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: this.getNodeChildren(node) })));
+    }
+    getNodeChildren(node) {
+        if (node.children)
+            return this.getDisabledNodes(node.children);
+        if (!this.fieldHasChild || !this.treeDataStructure)
+            return node.children;
+        return node.row && this.treeDataStructure.hasChildOnDemand(node.row) ? null : undefined;
     }
     getNodes() {
         return this.getDisabledNodes(this.nodes);
@@ -10439,6 +10536,9 @@ class SelectTree extends TextInput {
         });
         return !hasError;
     }
+    resetValidation() {
+        this.validationError = '';
+    }
     /**
      * Triggered when the data is inputed.
      * @param value search value
@@ -11552,7 +11652,6 @@ class Time extends TextInput {
         this.removeTimeMask();
         this.setTimeValue(this.formatter(this.value));
         super.blur(event, element);
-        this.showTimePicker = false;
     }
     focus(event, element) {
         this.addTimeMask();
@@ -12901,6 +13000,8 @@ class Icons {
 }
 Icons.mdiIcons = {
     alertOctagon: 'mdi-alert-octagon',
+    arrowLeft: 'mdi-arrow-left',
+    arrowRight: 'mdi-arrow-right',
     cancel: 'mdi-close-circle',
     calendar: 'mdi-calendar',
     checkboxIndeterminate: 'mdi-minus-box',
@@ -12958,6 +13059,8 @@ Icons.mdiIcons = {
 };
 Icons.faIcons = {
     alertOctagon: 'fa fa-exclamation-circle',
+    arrowLeft: 'fa fa-arrow-left',
+    arrowRight: 'fa fa-arrow-right',
     cancel: 'fa fa-times-circle',
     calendar: 'fa fa-calendar-o',
     checkboxIndeterminate: 'fa fa-minus-square',

package/dist/zd-common.umd.js

@@ -1,12 +1,13 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set'), require('lodash.get')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.debounce', 'lodash.isundefined', 'lodash.set', 'lodash.get'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.debounce, global.isUndefined, global.set, global.get));
-})(this, (function (exports, core, merge, debounce, isUndefined, set, get) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@zeedhi/core'), require('lodash.merge'), require('lodash.clonedeep'), require('lodash.debounce'), require('lodash.isundefined'), require('lodash.set'), require('lodash.get')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@zeedhi/core', 'lodash.merge', 'lodash.clonedeep', 'lodash.debounce', 'lodash.isundefined', 'lodash.set', 'lodash.get'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@zeedhi/common"] = {}, global.core, global.merge, global.cloneDeep, global.debounce, global.isUndefined, global.set, global.get));
+})(this, (function (exports, core, merge, cloneDeep, debounce, isUndefined, set, get) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
+  var cloneDeep__default = /*#__PURE__*/_interopDefaultLegacy(cloneDeep);
   var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
   var isUndefined__default = /*#__PURE__*/_interopDefaultLegacy(isUndefined);
   var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
@@ -533,6 +534,7 @@
                   },
               },
           };
+          this.drillHistory = [];
           this.chartType = this.getInitValue('chartType', props.chartType, this.chartType);
           this.options = merge__default["default"](this.defaultOptions, this.getInitValue('options', this.translateOptions(props.options), this.options));
           this.series = this.getInitValue('series', this.translateSeries(props.series), this.series);
@@ -632,7 +634,11 @@
        */
       updateChart(options) {
           merge__default["default"](this.options, options);
+          if (options.labels) {
+              this.options.labels = options.labels;
+          }
           if (options.series) {
+              this.options.series = options.series;
               this.series = this.options.series;
           }
           if (this.viewUpdate) {
@@ -886,6 +892,20 @@
           }
           return newOptions;
       }
+      drillDown(options) {
+          this.drillHistory.push(cloneDeep__default["default"](this.options));
+          return new Promise((resolve) => {
+              setTimeout(() => {
+                  resolve(this.updateChart(options));
+              }, 200);
+          });
+      }
+      drillUp() {
+          if (this.drillHistory.length === 0)
+              return Promise.resolve();
+          const options = this.drillHistory.pop();
+          return this.updateChart(options);
+      }
   }
 
   /**
@@ -3881,7 +3901,9 @@
           this.removeDateMask();
           this.setDateValue(this.formatter(this.value));
           super.blur(event, element);
-          this.showDatePicker = false;
+          if (!core.Utils.isMobile()) {
+              this.showDatePicker = false;
+          }
       }
       focus(event, element) {
           this.addDateMask();
@@ -4264,6 +4286,8 @@
               this.removeDateMask();
               this.setDateValue(this.formatter(this.value));
               super.blur(event, element);
+          }
+          if (!core.Utils.isMobile()) {
               this.showDatePicker = false;
           }
       }
@@ -4897,6 +4921,7 @@
       overrideNamedPropsFunc(metadata) {
           let strMetadata = JSON.stringify(metadata);
           Object.keys(this.overrideNamedProps).forEach((key) => {
+              strMetadata = strMetadata.replace(RegExp(`"<<${key}>>"`, 'g'), JSON.stringify(this.overrideNamedProps[key]));
               strMetadata = strMetadata.replace(RegExp(`<<${key}>>`, 'g'), this.overrideNamedProps[key]);
           });
           return JSON.parse(strMetadata);
@@ -7121,6 +7146,10 @@
            * Defines if data handling should be manual or automatic
            */
           this.manualMode = false;
+          /**
+           * Specifies which DOM element that this component should detach to.
+           */
+          this.attach = false;
           /**
            * Defines if data handling should be manual or automatic
            */
@@ -7165,6 +7194,7 @@
           this.autocomplete = this.getInitValue('autocomplete', props.autocomplete, this.autocomplete);
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.manualMode = this.getInitValue('manualMode', props.manualMode, this.manualMode);
+          this.attach = this.getInitValue('attach', props.attach, this.attach);
           this.searchParam = this.getInitValue('searchParam', props.searchParam, this.searchParam);
           if (((_a = props.datasource) === null || _a === void 0 ? void 0 : _a.type) === 'simple') {
               this.dataValue = 'value';
@@ -8320,8 +8350,32 @@
            * Defines whether the relationship will be created on mounted
            */
           this.lazyRelate = 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.config = this.getInitValue('config', props.config, this.config);
           this.lazyRelate = this.getInitValue('lazyRelate', props.lazyRelate, this.lazyRelate);
+          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();
       }
       createRelationship(master, details = []) {
           if (master.datasource && details.length) {
@@ -9783,11 +9837,13 @@
            * Stores tree structure
            */
           this.treeStructure = {};
+          this.fieldHasChild = '';
           this.searchValue = '';
           this.originalDatasource = tree.datasource;
           this.parentField = tree.parentField;
           this.fetchOnDemand = tree.fetchOnDemand;
           this.openLevelOnLoad = tree.openLevelOnLoad;
+          this.fieldHasChild = tree.fieldHasChild;
           this.tree = tree;
           this.init();
       }
@@ -10149,6 +10205,33 @@
           });
           return result;
       }
+      /**
+       * Checks if a row has async children that are yet to be loaded
+       * @param row
+       * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+       */
+      hasChildOnDemand(row) {
+          if (!this.fieldHasChild)
+              return true;
+          const rowHasChild = row[this.fieldHasChild];
+          let isVisibleChevron = true;
+          switch (rowHasChild) {
+              case '0':
+              case false:
+              case 0:
+                  isVisibleChevron = false;
+                  break;
+              case '1':
+              case true:
+              case 1:
+                  isVisibleChevron = true;
+                  break;
+              default:
+                  isVisibleChevron = true;
+                  break;
+          }
+          return isVisibleChevron;
+      }
   }
 
   /**
@@ -10241,6 +10324,10 @@
            * Uses delayed loading to load tree branches
            */
           this.fetchOnDemand = false;
+          /**
+           * Defines if the node tree has child
+           */
+          this.fieldHasChild = '';
           this.savedNodes = undefined;
           this.nodes = this.getInitValue('nodes', props.nodes, this.nodes);
           this.alwaysOpen = this.getInitValue('alwaysOpen', props.alwaysOpen, this.alwaysOpen);
@@ -10261,6 +10348,8 @@
           this.disabledItems = this.getInitValue('disabledItems', props.disabledItems, this.disabledItems);
           this.preventLoadOnFocus = this.getInitValue('preventLoadOnFocus', props.preventLoadOnFocus, this.preventLoadOnFocus);
           this.fetchOnDemand = this.getInitValue('fetchOnDemand', props.fetchOnDemand, this.fetchOnDemand);
+          this.fieldHasChild = this.getInitValue('fieldHasChild', props.fieldHasChild, this.fieldHasChild);
+          this.menuMaxWidth = this.getInitValue('menuMaxWidth', props.menuMaxWidth, this.menuMaxWidth);
           if (props.datasource && Object.keys(props.datasource).length) {
               this.lazyLoad = props.datasource.lazyLoad !== false;
               const searchFields = Array.isArray(this.dataText) ? this.dataText : [this.dataText];
@@ -10298,6 +10387,7 @@
               parentField: this.parentField,
               openLevelOnLoad: false,
               fetchOnDemand: this.fetchOnDemand,
+              fieldHasChild: this.fieldHasChild,
           });
           if (!this.lazyLoad) {
               this.datasource.get().then(() => { this.createNodesFromDatasource(false); });
@@ -10428,7 +10518,14 @@
           return this.disabledItems.indexOf(node.id) !== -1;
       }
       getDisabledNodes(nodes) {
-          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: node.children ? this.getDisabledNodes(node.children) : node.children })));
+          return nodes.map((node) => (Object.assign(Object.assign({}, node), { isDisabled: this.isDisable(node), children: this.getNodeChildren(node) })));
+      }
+      getNodeChildren(node) {
+          if (node.children)
+              return this.getDisabledNodes(node.children);
+          if (!this.fieldHasChild || !this.treeDataStructure)
+              return node.children;
+          return node.row && this.treeDataStructure.hasChildOnDemand(node.row) ? null : undefined;
       }
       getNodes() {
           return this.getDisabledNodes(this.nodes);
@@ -10446,6 +10543,9 @@
           });
           return !hasError;
       }
+      resetValidation() {
+          this.validationError = '';
+      }
       /**
        * Triggered when the data is inputed.
        * @param value search value
@@ -11559,7 +11659,6 @@
           this.removeTimeMask();
           this.setTimeValue(this.formatter(this.value));
           super.blur(event, element);
-          this.showTimePicker = false;
       }
       focus(event, element) {
           this.addTimeMask();
@@ -12908,6 +13007,8 @@
   }
   Icons.mdiIcons = {
       alertOctagon: 'mdi-alert-octagon',
+      arrowLeft: 'mdi-arrow-left',
+      arrowRight: 'mdi-arrow-right',
       cancel: 'mdi-close-circle',
       calendar: 'mdi-calendar',
       checkboxIndeterminate: 'mdi-minus-box',
@@ -12965,6 +13066,8 @@
   };
   Icons.faIcons = {
       alertOctagon: 'fa fa-exclamation-circle',
+      arrowLeft: 'fa fa-arrow-left',
+      arrowRight: 'fa fa-arrow-right',
       cancel: 'fa fa-times-circle',
       calendar: 'fa fa-calendar-o',
       checkboxIndeterminate: 'fa fa-minus-square',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeedhi/common",
-  "version": "1.78.2",
+  "version": "1.79.1",
   "description": "Zeedhi Common",
   "author": "Zeedhi <zeedhi@teknisa.com>",
   "license": "ISC",
@@ -19,7 +19,9 @@
     "watch": "npm run build -- -w"
   },
   "dependencies": {
+    "@types/lodash.clonedeep": "^4.5.7",
     "@zeedhi/autonumeric": "*",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "4.0.*",
     "lodash.get": "4.4.*",
     "lodash.isundefined": "3.0.*",
@@ -39,5 +41,5 @@
     "lodash.times": "4.3.*",
     "mockdate": "3.0.*"
   },
-  "gitHead": "f90d2ee43230496d7eac7740266dabc973c9438a"
+  "gitHead": "b4bf265016337a00b453394e11176f0ce770b63f"
 }

package/types/components/zd-apex-chart/apex-chart.d.ts

@@ -251,4 +251,7 @@ export declare class ApexChart extends ComponentRender implements IApexChart {
      */
     brushScrolledEvent(chartContext?: any, config?: any): void;
     updateToolbarIcons(): any;
+    drillHistory: any[];
+    drillDown(options: any): Promise<unknown>;
+    drillUp(): Promise<any>;
 }

package/types/components/zd-frame/frame.d.ts

@@ -1,5 +1,5 @@
-import { IFrame, IFrameEvents } from './interfaces';
 import { ComponentRender } from '../zd-component/component-render';
+import { IFrame, IFrameEvents } from './interfaces';
 /**
  * Base class for Frame component.
  */

package/types/components/zd-master-detail/interfaces.d.ts

@@ -3,4 +3,8 @@ import { IComponentRender } from '../zd-component/interfaces';
 export interface IMasterDetail extends IComponentRender {
     config?: IDictionary<any>;
     lazyRelate?: boolean;
+    height?: number | string;
+    maxHeight?: number | string;
+    minHeight?: number | string;
+    fillHeight?: boolean;
 }

package/types/components/zd-master-detail/master-detail.d.ts

@@ -13,6 +13,25 @@ export declare class MasterDetail extends ComponentRender implements IMasterDeta
      * Defines whether the relationship will be created on mounted
      */
     lazyRelate: boolean;
+    /**
+     * Defines the component height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    height: string | number;
+    /**
+     * Defines the component min height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    minHeight: string | number;
+    /**
+     * Defines the component max height. Possible values for this property can be
+     * <samp>'auto', '100%', '400px' or 400</samp>
+     */
+    maxHeight: string | number;
+    /**
+     * Set component height to fill all space available
+     */
+    fillHeight: boolean;
     /**
      * Creates a new Master Detail.
      * @param props Master detail properties

package/types/components/zd-select/interfaces.d.ts

@@ -16,5 +16,6 @@ export interface ISelect extends ITextInput {
     itemAfterSlot?: IComponentRender[];
     disabledItems?: any[];
     manualMode?: boolean;
+    attach?: boolean;
     searchParam?: string;
 }

package/types/components/zd-select/select.d.ts

@@ -66,6 +66,10 @@ export declare class Select extends TextInput implements ISelect {
      * Defines if data handling should be manual or automatic
      */
     manualMode: boolean;
+    /**
+     * Specifies which DOM element that this component should detach to.
+     */
+    attach: boolean;
     /**
      * Defines if data handling should be manual or automatic
      */

package/types/components/zd-select-tree/interfaces.d.ts

@@ -30,6 +30,8 @@ export interface ISelectTree extends IComponentRender {
     dataDisabled?: string;
     disabledItems?: any[];
     fetchOnDemand?: boolean;
+    fieldHasChild?: string;
+    menuMaxWidth?: number;
 }
 export interface ISelectTreeCloseEvent extends IEventParam<SelectTree> {
     selectedNodes: ISelectTreeNode<IDictionary>[];

package/types/components/zd-select-tree/select-tree.d.ts

@@ -93,6 +93,11 @@ export declare class SelectTree extends TextInput implements ISelectTree {
      * Uses delayed loading to load tree branches
      */
     fetchOnDemand: boolean;
+    menuMaxWidth?: number;
+    /**
+     * Defines if the node tree has child
+     */
+    fieldHasChild: string;
     /**
      * Creates a new instance of SelectTree
      * @param props
@@ -124,8 +129,10 @@ export declare class SelectTree extends TextInput implements ISelectTree {
     searchChange(searchQuery: string, element?: any): void;
     private isDisable;
     private getDisabledNodes;
+    private getNodeChildren;
     getNodes(): ISelectTreeNode<IDictionary>[];
     validate(): boolean;
+    resetValidation(): void;
     /**
      * Triggered when the data is inputed.
      * @param value search value

package/types/utils/tree-data-structure/interfaces.d.ts

@@ -5,4 +5,5 @@ export interface ITreeDataStructure {
     openLevelOnLoad: number | boolean;
     fetchOnDemand: boolean;
     detach?: boolean;
+    fieldHasChild?: string;
 }

package/types/utils/tree-data-structure/tree-data-structure.d.ts

@@ -29,6 +29,7 @@ export declare class TreeDataStructure {
      * Stores tree structure
      */
     private treeStructure;
+    fieldHasChild?: string;
     /**
      * Tree component
      */
@@ -144,4 +145,10 @@ export declare class TreeDataStructure {
      * @param row datasource row
      */
     getChildren(row: IDictionary<any>): IDictionary<any>[];
+    /**
+     * Checks if a row has async children that are yet to be loaded
+     * @param row
+     * @returns `false` if the row has no children to be loaded, `true` if it does or if fieldHasChild is not defined
+     */
+    hasChildOnDemand(row: IDictionary<any>): boolean;
 }