@zeedhi/vuetify 1.49.0 → 1.52.0

package/dist/zd-vuetify.esm.js

@@ -958,7 +958,7 @@ function searchItems(items, search) {
   if (!search) return items;
   search = search.toString().toLowerCase();
   if (search.trim() === '') return items;
-  return items.filter(item => Object.keys(item).some(key => defaultFilter(getObjectValueByPath(item, key), search)));
+  return items.filter(item => Object.keys(item).some(key => defaultFilter(getObjectValueByPath(item, key), search, item)));
 }
 /**
  * Returns:
@@ -1010,10 +1010,10 @@ function getSlot(vm, name = 'default', data, optional = false) {
 function clamp(value, min = 0, max = 1) {
   return Math.max(min, Math.min(max, value));
 }
-function padEnd(str, length, char = '0') {
+function padEnd(str, length, char) {
   return str + char.repeat(Math.max(0, length - str.length));
 }
-function chunk(str, size = 1) {
+function chunk(str, size) {
   const chunked = [];
   let index = 0;
 
@@ -1094,11 +1094,11 @@ const icons$5 = {
   cancel: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   close: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
   delete: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
-  clear: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
-  success: 'M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z',
-  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z',
-  warning: 'M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z',
-  error: 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z',
+  clear: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
+  success: 'M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z',
+  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  warning: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  error: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   prev: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z',
   next: 'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z',
   checkboxOn: 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z',
@@ -1315,7 +1315,7 @@ Icons.property = 'icons';
 const LANG_PREFIX = '$vuetify.';
 const fallback = Symbol('Lang fallback');
 
-function getTranslation(locale, key, usingDefault = false, defaultLocale) {
+function getTranslation(locale, key, usingDefault, defaultLocale) {
   const shortKey = key.replace(LANG_PREFIX, '');
   let translation = getObjectValueByPath(locale, shortKey, fallback);
 
@@ -2221,7 +2221,7 @@ class Vuetify {
 }
 Vuetify.install = install$1;
 Vuetify.installed = false;
-Vuetify.version = "2.6.4";
+Vuetify.version = "2.6.6";
 Vuetify.config = {
   silent: false
 };
@@ -2602,7 +2602,7 @@ var VResponsive = mixins(Measurable).extend({
       return this.$createElement('div', {
         staticClass: 'v-responsive__content',
         class: this.contentClass
-      }, this.$slots.default);
+      }, getSlot(this));
     }
 
   },
@@ -2987,10 +2987,12 @@ var VImg = mixins(VResponsive, Themeable).extend({
     },
 
     __genPlaceholder() {
-      if (this.$slots.placeholder) {
+      const slot = getSlot(this, 'placeholder');
+
+      if (slot) {
         const placeholder = this.isLoading ? [this.$createElement('div', {
           staticClass: 'v-image__placeholder'
-        }, this.$slots.placeholder)] : [];
+        }, slot)] : [];
         if (!this.transition) return placeholder[0];
         return this.$createElement('transition', {
           props: {
@@ -3253,7 +3255,7 @@ let all = factory().extend({
 })
 /**/
 
-function applicationable(value, events = []) {
+function applicationable(value, events) {
   /* @vue/component */
   return mixins(factory$3(['absolute', 'fixed'])).extend({
     name: 'applicationable',
@@ -12405,7 +12407,7 @@ var Mouse = Vue.extend({
   }
 });
 
-function createUTCDate(year, month = 0, day = 1) {
+function createUTCDate(year, month, day = 1) {
   let date;
 
   if (year < 100 && year >= 0) {
@@ -16225,10 +16227,6 @@ var Selectable = mixins(VInput, Rippleable, Comparable).extend({
       });
     },
 
-    onBlur() {
-      this.isFocused = false;
-    },
-
     onClick(e) {
       this.onChange();
       this.$emit('click', e);
@@ -16263,8 +16261,14 @@ var Selectable = mixins(VInput, Rippleable, Comparable).extend({
       this.hasColor = input;
     },
 
-    onFocus() {
+    onFocus(e) {
       this.isFocused = true;
+      this.$emit('focus', e);
+    },
+
+    onBlur(e) {
+      this.isFocused = false;
+      this.$emit('blur', e);
     },
 
     /** @abstract */
@@ -22450,8 +22454,9 @@ var VDatePicker = mixins(Localable, Picker).extend({
     },
 
     monthClick(value) {
-      this.inputYear = parseInt(value.split('-')[0], 10);
-      this.inputMonth = parseInt(value.split('-')[1], 10) - 1;
+      const [year, month] = value.split('-');
+      this.inputYear = parseInt(year, 10);
+      this.inputMonth = parseInt(month, 10) - 1;
 
       if (this.type === 'date') {
         if (this.inputDay) {
@@ -22470,9 +22475,10 @@ var VDatePicker = mixins(Localable, Picker).extend({
     },
 
     dateClick(value) {
-      this.inputYear = parseInt(value.split('-')[0], 10);
-      this.inputMonth = parseInt(value.split('-')[1], 10) - 1;
-      this.inputDay = parseInt(value.split('-')[2], 10);
+      const [year, month, day] = value.split('-');
+      this.inputYear = parseInt(year, 10);
+      this.inputMonth = parseInt(month, 10) - 1;
+      this.inputDay = parseInt(day, 10);
       this.emitInput(this.inputDate);
     },
 
@@ -24725,6 +24731,10 @@ VAutocomplete.extend({
 
     computedItems() {
       return this.segmented ? this.allItems : this.filteredItems;
+    },
+
+    labelValue() {
+      return this.isFocused && !this.persistentPlaceholder || this.isLabelActive;
     }
 
   },
@@ -29463,7 +29473,7 @@ mixins(provide('treeview'), Themeable
         };
         this.buildTree(children, key); // This fixed bug with dynamic children resetting selected parent state
 
-        if (!this.nodes.hasOwnProperty(key) && parent !== null && this.nodes.hasOwnProperty(parent)) {
+        if (this.selectionType !== 'independent' && parent !== null && !this.nodes.hasOwnProperty(key) && this.nodes.hasOwnProperty(parent)) {
           node.isSelected = this.nodes[parent].isSelected;
         } else {
           node.isSelected = oldNode.isSelected;
@@ -31252,7 +31262,7 @@ function searchItems(items, search) {
   if (search.trim() === '') return items;
   return items.filter(function (item) {
     return Object.keys(item).some(function (key) {
-      return defaultFilter(getObjectValueByPath(item, key), search);
+      return defaultFilter(getObjectValueByPath(item, key), search, item);
     });
   });
 }
@@ -31433,11 +31443,11 @@ var icons = {
   cancel: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   close: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
   delete: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
-  clear: 'M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z',
-  success: 'M12,2C17.52,2 22,6.48 22,12C22,17.52 17.52,22 12,22C6.48,22 2,17.52 2,12C2,6.48 6.48,2 12,2M11,16.5L18,9.5L16.59,8.09L11,13.67L7.91,10.59L6.5,12L11,16.5Z',
-  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z',
-  warning: 'M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z',
-  error: 'M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z',
+  clear: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
+  success: 'M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z',
+  info: 'M13,9H11V7H13M13,17H11V11H13M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2ZM13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  warning: 'M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z',
+  error: 'M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z',
   prev: 'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z',
   next: 'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z',
   checkboxOn: 'M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z',
@@ -32157,12 +32167,12 @@ var _default = {
   dataTable: {
     itemsPerPageText: 'Files per pàgina:',
     ariaLabel: {
-      sortDescending: 'Ordre descendent. Premi per treure la ordenació.',
-      sortAscending: 'Ordre ascendent. Premi per ordenar descendent.',
-      sortNone: 'Sense ordenar. Premi per ordenar ascendent.',
-      activateNone: 'Activate to remove sorting.',
-      activateDescending: 'Activate to sort descending.',
-      activateAscending: 'Activate to sort ascending.'
+      sortDescending: 'Ordre descendent.',
+      sortAscending: 'Ordre ascendent.',
+      sortNone: 'Sense ordenar.',
+      activateNone: 'Premi per treure la ordenació.',
+      activateDescending: 'Premi per ordenar descendent.',
+      activateAscending: 'Premi per ordenar ascendent.'
     },
     sortBy: 'Ordenat per'
   },
@@ -32212,7 +32222,7 @@ var _default = {
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}'
+      icon: 'Puntuació {0} de {1}'
     }
   }
 };
@@ -32714,8 +32724,8 @@ var _default = {
       sortAscending: 'Orden ascendente.',
       sortNone: 'Sin ordenar.',
       activateNone: 'Pulse para quitar orden.',
-      activateDescending: 'Pulse para ordenar descendente.',
-      activateAscending: 'Pulse para ordenar ascendente.'
+      activateDescending: 'Pulse para ordenar de forma descendente.',
+      activateAscending: 'Pulse para ordenar de forma ascendente.'
     },
     sortBy: 'Ordenado por'
   },
@@ -32724,7 +32734,7 @@ var _default = {
     itemsPerPageAll: 'Todos',
     nextPage: 'Página siguiente',
     prevPage: 'Página anterior',
-    firstPage: 'Primer página',
+    firstPage: 'Primera página',
     lastPage: 'Última página',
     pageText: '{0}-{1} de {2}'
   },
@@ -32994,15 +33004,15 @@ var _default = {
   pagination: {
     ariaLabel: {
       wrapper: 'Pagination Navigation',
-      next: 'Next page',
-      previous: 'Previous page',
-      page: 'Goto Page {0}',
-      currentPage: 'Current Page, Page {0}'
+      next: 'Seuraava sivu',
+      previous: 'Edellinen sivu',
+      page: 'Mene sivulle {0}',
+      currentPage: 'Nykyinen sivu, Sivu {0}'
     }
   },
   rating: {
     ariaLabel: {
-      icon: 'Rating {0} of {1}'
+      icon: 'Luokitus {0}/{1}'
     }
   }
 };
@@ -36827,7 +36837,7 @@ var Vuetify = /*#__PURE__*/function () {
 exports.default = Vuetify;
 Vuetify.install = install_1.install;
 Vuetify.installed = false;
-Vuetify.version = "2.6.4";
+Vuetify.version = "2.6.6";
 Vuetify.config = {
   silent: false
 };
@@ -40113,7 +40123,7 @@ var __vue_render__$1e = function () {
             {
               "--checkbox-horizontal-columns": _vm.checkboxHorizontalColumns,
             },
-            _vm.instance.cssStyle,
+            _vm.$styleObject(_vm.instance.cssStyle),
           ],
         },
         _vm._l(_vm.instance.datasource.data, function (row) {
@@ -40175,7 +40185,7 @@ __vue_render__$1e._withStripped = true;
   /* style */
   const __vue_inject_styles__$1e = function (inject) {
     if (!inject) return
-    inject("data-v-351ba26a_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 0 var(--spacing-2);\n  color: var(--zd-font-color);\n  align-items: flex-start;\n  display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n  display: inline-grid;\n  grid-template-columns: var(--checkbox-horizontal-columns);\n  width: 100%;\n}\n.zd-checkbox-multiple .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n  padding: 0;\n  margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n  display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n  margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
+    inject("data-v-03bb5313_0", { source: ".zd-checkbox-multiple .zd-checkbox-label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 0 var(--spacing-2);\n  color: var(--zd-font-color);\n  align-items: flex-start;\n  display: flex;\n}\n.zd-checkbox-multiple .zd-checkbox-horizontal {\n  display: inline-grid;\n  grid-template-columns: var(--checkbox-horizontal-columns);\n  width: 100%;\n}\n.zd-checkbox-multiple .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox-multiple .v-input--selection-controls {\n  padding: 0;\n  margin: 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-messages {\n  display: none;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot {\n  margin: 0 10px 0 0;\n}\n.zd-checkbox-multiple .v-input--selection-controls .v-input__control .v-input__slot:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox-multiple.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -40885,7 +40895,7 @@ var __vue_render__$1a = function () {
           tile: _vm.instance.tile,
         },
       ],
-      style: [_vm.widthStyles, _vm.instance.cssStyle],
+      style: [_vm.widthStyles, _vm.$styleObject(_vm.instance.cssStyle)],
       attrs: {
         id: _vm.instance.name,
         dark: _vm.instance.dark,
@@ -41047,7 +41057,7 @@ __vue_render__$1a._withStripped = true;
   /* style */
   const __vue_inject_styles__$1a = function (inject) {
     if (!inject) return
-    inject("data-v-10d8e3f9_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
+    inject("data-v-83d4103c_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -41088,6 +41098,10 @@ __decorate([
     PropWatch({ type: [Boolean, String], default: true }),
     __metadata("design:type", Boolean)
 ], ZdContainer.prototype, "fluid", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Boolean)
+], ZdContainer.prototype, "scrollView", void 0);
 __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Boolean)
@@ -41133,11 +41147,16 @@ var __vue_render__$19 = function () {
         _vm.instance.cssClass,
         { "fill-height": _vm.instance.fillHeight },
       ],
-      style: Object.assign({}, _vm.instance.cssStyle, {
-        height: _vm.$formatSize(_vm.instance.height),
-        minHeight: _vm.$formatSize(_vm.instance.minHeight),
-        maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-      }),
+      style: Object.assign(
+        {},
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+          overflow: _vm.instance.scrollView ? "hidden auto" : "none",
+        },
+        _vm.$styleObject(_vm.instance.cssStyle)
+      ),
       attrs: {
         id: _vm.instance.name,
         name: _vm.instance.name,
@@ -41176,11 +41195,11 @@ __vue_render__$19._withStripped = true;
   /* style */
   const __vue_inject_styles__$19 = function (inject) {
     if (!inject) return
-    inject("data-v-352601cf_0", { source: ".zd-container[data-v-352601cf] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
+    inject("data-v-a056e4b6_0", { source: ".zd-container[data-v-a056e4b6] {\n  padding: var(--zd-default-padding);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$19 = "data-v-352601cf";
+  const __vue_scope_id__$19 = "data-v-a056e4b6";
   /* module identifier */
   const __vue_module_identifier__$19 = undefined;
   /* functional template */
@@ -41797,11 +41816,11 @@ let ZdDashboard = class ZdDashboard extends ZdComponentRender$1 {
                     card.height = (this.resizeHeight + dy);
                 }
                 if (dx > this.widthDashboardContainer / 12 && card.width < 12) {
-                    card.width += 1;
+                    card.width = Number(card.width) + 1;
                     this.resizeX = event.clientX;
                 }
                 else if (dx < 0 && Math.abs(dx) > this.widthDashboardContainer / 12 && card.width > 1) {
-                    card.width -= 1;
+                    card.width = Number(card.width) - 1;
                     this.resizeX = event.clientX;
                 }
             }
@@ -41837,13 +41856,6 @@ let ZdDashboard = class ZdDashboard extends ZdComponentRender$1 {
         }
         this.onUnchoose();
     }
-    /* Return resize options */
-    getDragCursor() {
-        if (this.instance.editingMode || this.instance.moveMode) {
-            return 'cursor: grabbing; overflow: auto';
-        }
-        return 'cursor: auto';
-    }
 };
 __decorate([
     PropWatch({ type: Array, default: () => ([]) }),
@@ -41907,9 +41919,11 @@ var __vue_render__$15 = function () {
         dark: _vm.instance.dark,
         light: _vm.instance.light,
         name: "container-dashboard" + _vm.instance.name,
-        cssStyle: Object.assign({}, _vm.instance.cssStyle, {
-          height: _vm.$formatSize(_vm.instance.height),
-        }),
+        cssStyle: Object.assign(
+          {},
+          { height: _vm.$formatSize(_vm.instance.height) },
+          _vm.$styleObject(_vm.instance.cssStyle)
+        ),
       },
     },
     [
@@ -41963,13 +41977,46 @@ var __vue_render__$15 = function () {
                       "zd-card",
                       {
                         parent: _vm.instance,
-                        name: "dashboardCard" + card.cardId,
+                        activeClass: card.activeClass,
+                        append: card.append,
                         cardId: card.cardId,
-                        flat: card.flat,
                         children: [_vm.instance.getFrameProps(card.cardId)],
-                        cssStyle: _vm.getDragCursor(),
-                        key: card.path,
+                        color: card.color,
+                        cssClass: card.cssClass,
+                        cssStyle: Object.assign(
+                          {},
+                          {
+                            cursor:
+                              _vm.instance.editingMode || _vm.instance.moveMode
+                                ? "grabbing"
+                                : "auto",
+                            overflow:
+                              _vm.instance.editingMode || _vm.instance.moveMode
+                                ? "overflow"
+                                : "",
+                          },
+                          _vm.$styleObject(card.cssStyle)
+                        ),
+                        dark: card.dark,
+                        directives: card.directives,
+                        disabled: card.disabled,
+                        elevation: card.elevation,
                         events: card.events,
+                        key: card.path,
+                        flat: card.flat,
+                        hover: card.hover,
+                        href: card.href,
+                        img: card.img,
+                        isVisible: card.isVisible,
+                        keyMap: card.keyMap,
+                        light: card.light,
+                        link: card.link,
+                        name: "dashboardCard" + card.cardId,
+                        outlined: card.outlined,
+                        raised: card.raised,
+                        ripple: card.ripple,
+                        tile: card.tile,
+                        to: card.to,
                       },
                       false
                     )
@@ -42045,7 +42092,7 @@ __vue_render__$15._withStripped = true;
   /* style */
   const __vue_inject_styles__$15 = function (inject) {
     if (!inject) return
-    inject("data-v-1b943622_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-5ff6ec98_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -43599,10 +43646,9 @@ var __vue_render__$$ = function () {
               "zd-input-required": _vm.instance.validations.required,
             },
           ],
-          style: [
-            { "--drag-area-height": _vm.getDragAreaHeight() },
-            _vm.instance.cssStyle,
-          ],
+          style: [{ "--drag-area-height": _vm.getDragAreaHeight() }].concat(
+            _vm.$styleObject(_vm.instance.cssStyle)
+          ),
           attrs: {
             id: _vm.instance.name,
             dark: _vm.instance.dark,
@@ -43819,7 +43865,7 @@ __vue_render__$$._withStripped = true;
   /* style */
   const __vue_inject_styles__$$ = function (inject) {
     if (!inject) return
-    inject("data-v-f1ffac76_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: 8px;\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #7c7c7c;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}\n.zd-file-input.theme--light > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.zd-file-input.theme--dark > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background: #555;\n  color: #fff;\n}", map: undefined, media: undefined });
+    inject("data-v-47bb0268_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: 8px;\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #7c7c7c;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}\n.zd-file-input.theme--light > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.zd-file-input.theme--dark > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background: #555;\n  color: #fff;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -44254,10 +44300,11 @@ var __vue_render__$Z = function () {
       ],
       ref: "form",
       class: ["zd-form", _vm.instance.cssClass],
-      style: [
-        _vm.instance.cssStyle,
+      style: Object.assign(
+        {},
         { height: _vm.$formatSize(_vm.instance.height) },
-      ],
+        _vm.$styleObject(_vm.instance.cssStyle)
+      ),
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
       on: {
         submit: function ($event) {
@@ -44367,7 +44414,7 @@ let ZdFrame = class ZdFrame extends ZdComponentRender$1 {
     }
 };
 __decorate([
-    PropWatch({ type: String, required: true }),
+    PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], ZdFrame.prototype, "path", void 0);
 __decorate([
@@ -44435,11 +44482,15 @@ var __vue_render__$Y = function () {
         },
       ],
       class: ["zd-frame", _vm.instance.cssClass],
-      style: Object.assign({}, _vm.instance.cssStyle, {
-        height: _vm.$formatSize(_vm.instance.height),
-        minHeight: _vm.$formatSize(_vm.instance.minHeight),
-        maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
-      }),
+      style: Object.assign(
+        {},
+        {
+          height: _vm.$formatSize(_vm.instance.height),
+          minHeight: _vm.$formatSize(_vm.instance.minHeight),
+          maxHeight: _vm.$formatSize(_vm.instance.maxHeight),
+        },
+        _vm.$styleObject(_vm.instance.cssStyle)
+      ),
       attrs: { id: _vm.instance.name },
     },
     [
@@ -44466,7 +44517,7 @@ __vue_render__$Y._withStripped = true;
   /* style */
   const __vue_inject_styles__$Y = function (inject) {
     if (!inject) return
-    inject("data-v-a3dafc0a_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
+    inject("data-v-2c5980a4_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -44951,15 +45002,16 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             '--current-row-hover-color': `${ThemeColor(this, 'primary')}30`,
         };
     }
-    checkOverflow(event) {
+    checkOverflow(event, columnOverflow) {
         const target = event.target;
-        const overflown = target.clientWidth < target.scrollWidth;
+        const overflow = target.clientWidth < target.scrollWidth;
         const tooltip = this.$refs.gridTooltip;
-        if (overflown && tooltip) {
+        if ((overflow && tooltip)
+            || (Number.isInteger(columnOverflow) && tooltip)) {
+            tooltip.classList.add('zd-grid-cell-tooltip-show');
             const value = target.innerText;
             const targetBoundingRect = target.getBoundingClientRect();
             tooltip.innerText = value;
-            tooltip.classList.add('zd-grid-cell-tooltip-show');
             tooltip.style.top = `${targetBoundingRect.bottom}px`;
             tooltip.style.left = `${targetBoundingRect.left}px`;
         }
@@ -45104,10 +45156,10 @@ var __vue_render__$W = function () {
     ],
     style: [
       _vm.cssColorVars,
-      _vm.instance.cssStyle,
       _vm.instance.gridHeight
         ? { height: _vm.$formatSize(_vm.instance.gridHeight) }
         : {},
+      _vm.$styleObject(_vm.instance.cssStyle),
     ],
     attrs: {
       id: _vm.instance.name,
@@ -45688,7 +45740,8 @@ var __vue_render__$W = function () {
                                               on: {
                                                 mouseenter: function ($event) {
                                                   return _vm.checkOverflow(
-                                                    $event
+                                                    $event,
+                                                    column.overflow
                                                   )
                                                 },
                                                 mouseleave: function ($event) {
@@ -45867,7 +45920,7 @@ __vue_render__$W._withStripped = true;
   /* style */
   const __vue_inject_styles__$W = function (inject) {
     if (!inject) return
-    inject("data-v-51a553aa_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined });
+    inject("data-v-1dfd9c3b_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -46068,7 +46121,7 @@ var __vue_render__$V = function () {
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
       { "zd-grid-loading": _vm.instance.datasource.loading },
     ],
-    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
     attrs: {
       id: _vm.instance.name,
       dark: _vm.instance.dark,
@@ -46995,8 +47048,8 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-81027f46_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
-,inject("data-v-81027f46_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+    inject("data-v-4dde3c74_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-4dde3c74_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -51495,9 +51548,15 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         const threshold = 1;
         if ((Math.abs(dy) + Math.abs(dx)) >= threshold) {
             const top = toNum(this.dragModal.style.top);
-            this.dragModal.style.top = toPx(top + dy);
             const left = toNum(this.dragModal.style.left);
-            this.dragModal.style.left = toPx(left + dx);
+            if ((window.innerHeight / 2) - (top + dy) >= (this.dragModal.offsetHeight / 2)
+                && (window.innerHeight / 2) + (top + dy) >= (this.dragModal.offsetHeight / 2)) {
+                this.dragModal.style.top = toPx(top + dy);
+            }
+            if ((window.innerWidth / 2) + 2 * (left + dx) >= 4
+                && (window.innerWidth / 2) - 2 * (left + dx) >= 0) {
+                this.dragModal.style.left = toPx(left + dx);
+            }
             this.x = event.clientX;
             this.y = event.clientY;
         }
@@ -52329,7 +52388,7 @@ var __vue_render__$o = function () {
                 maxWidth: _vm.parseSizeToString(_vm.instance.maxWidth),
                 minWidth: _vm.parseSizeToString(_vm.instance.minWidth),
               },
-              _vm.instance.cssStyle,
+              _vm.$styleObject(_vm.instance.cssStyle),
             ],
             on: {
               input: function ($event) {
@@ -52440,7 +52499,7 @@ __vue_render__$o._withStripped = true;
   /* style */
   const __vue_inject_styles__$o = function (inject) {
     if (!inject) return
-    inject("data-v-bae09272_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
+    inject("data-v-136b22b0_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -53532,7 +53591,8 @@ let ZdSelectTree = class ZdSelectTree extends ZdTextInput$1 {
         this.focused = false;
     }
     dataChange() {
-        this.instance.createNodesFromDatasource();
+        if (!this.instance.fetchOnDemand)
+            this.instance.createNodesFromDatasource();
     }
     onOpen() {
         this.instance.open(this.$el);
@@ -53578,6 +53638,13 @@ let ZdSelectTree = class ZdSelectTree extends ZdTextInput$1 {
         this.instance.validate();
         this.instance.blur(event, this.$el);
     }
+    loadOptions({ action, parentNode, callback }) {
+        if (action === 'LOAD_CHILDREN_OPTIONS') {
+            this.instance.loadChildren(parentNode)
+                .then(callback)
+                .catch(() => { var _a; return callback(new Error(I18n.translate(((_a = this.instance.datasource) === null || _a === void 0 ? void 0 : _a.error) || ''))); });
+        }
+    }
 };
 __decorate([
     Prop({ type: [Array, String], default: () => [] }),
@@ -53659,6 +53726,10 @@ __decorate([
     Prop({ type: [String, Array], default: () => ([]) }),
     __metadata("design:type", Array)
 ], ZdSelectTree.prototype, "disabledItems", void 0);
+__decorate([
+    Prop({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Object)
+], ZdSelectTree.prototype, "fetchOnDemand", void 0);
 __decorate([
     Watch('instance.datasource.data.length'),
     __metadata("design:type", Function),
@@ -53774,9 +53845,11 @@ var __vue_render__$j = function () {
                   "menu-props": {
                     cssClass: _vm.$isDark(this)
                       ? "theme--dark"
-                      : _vm.$isLight(this)
-                      ? "theme--light"
-                      : "",
+                      : (_vm.$isLight(this) ? "theme--light" : "") +
+                        (_vm.instance.datasource &&
+                        _vm.instance.datasource.search
+                          ? " has-search"
+                          : ""),
                   },
                   clearable:
                     _vm.instance.clearable &&
@@ -53795,6 +53868,7 @@ var __vue_render__$j = function () {
                   showCountOf: _vm.instance.showCountOf,
                   valueFormat: _vm.instance.returnObject ? "object" : "id",
                   disableBranchNodes: _vm.instance.disableParentNode,
+                  loadOptions: _vm.loadOptions,
                 },
                 on: {
                   open: _vm.onOpen,
@@ -53891,7 +53965,7 @@ __vue_render__$j._withStripped = true;
   /* style */
   const __vue_inject_styles__$j = function (inject) {
     if (!inject) return
-    inject("data-v-8968dfac_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined });
+    inject("data-v-b782ddc6_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -54062,6 +54136,7 @@ var __vue_render__$i = function () {
                   showCountOf: _vm.instance.showCountOf,
                   valueFormat: _vm.instance.returnObject ? "object" : "id",
                   valueConsistsOf: _vm.instance.valueConsistsOf,
+                  loadOptions: _vm.loadOptions,
                 },
                 on: {
                   open: _vm.onOpen,
@@ -54157,8 +54232,8 @@ __vue_render__$i._withStripped = true;
   /* style */
   const __vue_inject_styles__$i = function (inject) {
     if (!inject) return
-    inject("data-v-583c6b7b_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined })
-,inject("data-v-583c6b7b_1", { source: ".zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
+    inject("data-v-054c20a4_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined })
+,inject("data-v-054c20a4_1", { source: ".zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -54696,7 +54771,7 @@ var __vue_render__$f = function () {
         },
         _vm.cssVars
       ),
-      _vm.instance.cssStyle,
+      _vm.$styleObject(_vm.instance.cssStyle),
     ],
     attrs: { id: _vm.instance.name, name: _vm.instance.name },
     on: {
@@ -54712,7 +54787,7 @@ __vue_render__$f._withStripped = true;
   /* style */
   const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
-    inject("data-v-fe67069c_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
+    inject("data-v-6e440529_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -55108,10 +55183,11 @@ var __vue_render__$c = function () {
         },
       ],
       class: ["zd-tabs", _vm.instance.cssClass],
-      style: [
-        _vm.instance.cssStyle,
+      style: Object.assign(
+        {},
         { height: _vm.$formatSize(_vm.instance.height) },
-      ],
+        _vm.$styleObject(_vm.instance.cssStyle)
+      ),
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
     },
     [
@@ -55215,6 +55291,7 @@ var __vue_render__$c = function () {
                     children: tab.children,
                     flex: tab.flex,
                     name: _vm.instance.name + "-tab-item-" + index,
+                    lazyLoad: tab.lazyLoad,
                   },
                   false
                 )
@@ -55236,11 +55313,11 @@ __vue_render__$c._withStripped = true;
   /* style */
   const __vue_inject_styles__$c = function (inject) {
     if (!inject) return
-    inject("data-v-0d859840_0", { source: ".zd-tabs[data-v-0d859840] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-bar,\n.zd-tabs[data-v-0d859840]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0d859840]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0d859840]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0d859840]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0d859840]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-0d859840]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+    inject("data-v-0700f23a_0", { source: ".zd-tabs[data-v-0700f23a] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar,\n.zd-tabs[data-v-0700f23a]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0700f23a]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-0700f23a]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$c = "data-v-0d859840";
+  const __vue_scope_id__$c = "data-v-0700f23a";
   /* module identifier */
   const __vue_module_identifier__$c = undefined;
   /* functional template */
@@ -55392,6 +55469,10 @@ __decorate([
     PropWatch({ type: Boolean }),
     __metadata("design:type", Boolean)
 ], ZdTabItem.prototype, "flex", void 0);
+__decorate([
+    PropWatch({ type: Boolean }),
+    __metadata("design:type", Boolean)
+], ZdTabItem.prototype, "lazyLoad", void 0);
 ZdTabItem = __decorate([
     Component
 ], ZdTabItem);
@@ -55418,8 +55499,13 @@ var __vue_render__$a = function () {
       ],
       key: _vm.index,
       staticClass: "zd-tabs-tab-item",
-      style: [_vm.instance.cssStyle],
-      attrs: { value: _vm.index, dark: _vm.dark, light: _vm.light },
+      style: _vm.instance.cssStyle,
+      attrs: {
+        eager: !_vm.lazyLoad,
+        value: _vm.index,
+        dark: _vm.dark,
+        light: _vm.light,
+      },
     },
     [
       _c(
@@ -55457,11 +55543,11 @@ __vue_render__$a._withStripped = true;
   /* style */
   const __vue_inject_styles__$a = function (inject) {
     if (!inject) return
-    inject("data-v-7287e500_0", { source: ".zd-tabs-tab-item[data-v-7287e500] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-7287e500] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-7287e500] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .zd-tabs-tab-item-container-flex[data-v-7287e500] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-7287e500] {\n  height: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-f6ae0120_0", { source: ".zd-tabs-tab-item[data-v-f6ae0120] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-f6ae0120] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-f6ae0120] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .zd-tabs-tab-item-container-flex[data-v-f6ae0120] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-f6ae0120] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$a = "data-v-7287e500";
+  const __vue_scope_id__$a = "data-v-f6ae0120";
   /* module identifier */
   const __vue_module_identifier__$a = undefined;
   /* functional template */
@@ -56864,7 +56950,7 @@ var __vue_render__$2 = function () {
         { "theme--dark": _vm.$isDark(this) },
         { "theme--light": _vm.$isLight(this) },
       ],
-      style: [_vm.cssColorVars, _vm.instance.cssStyle],
+      style: [_vm.cssColorVars].concat(_vm.$styleObject(_vm.instance.cssStyle)),
       attrs: { id: _vm.instance.name },
     },
     [
@@ -56915,6 +57001,8 @@ var __vue_render__$2 = function () {
               fn: function (ref) {
                 var node = ref.node;
                 return [
+                  _c("span", { staticClass: "align" }),
+                  _vm._v(" "),
                   _vm.instance.checkbox
                     ? _c("zd-tree-checkbox", {
                         attrs: {
@@ -56997,7 +57085,17 @@ var __vue_render__$2 = function () {
                                   return _c(
                                     comp.component,
                                     _vm._b(
-                                      { key: index, tag: "component" },
+                                      {
+                                        key: index,
+                                        tag: "component",
+                                        class: [
+                                          "item-title",
+                                          {
+                                            "has-children":
+                                              node.children.length,
+                                          },
+                                        ],
+                                      },
                                       "component",
                                       comp,
                                       false
@@ -57122,7 +57220,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-8a21aff2_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: var(--current-row-color);\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
+    inject("data-v-38571f58_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--light .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #eee;\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree.theme--dark .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item:hover {\n  background: #616161;\n}\n.zd-tree .sl-vue-tree-title {\n  display: flex;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: var(--current-row-color);\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin: 0px 1px 0px 1px;\n  padding-bottom: 1.4px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .sl-vue-tree-nodes-list .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align {\n  padding-left: 26px;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.is-clickable {\n  cursor: pointer;\n}\n.zd-tree .sl-vue-tree-node-item.sl-vue-tree-node-is-leaf .sl-vue-tree-title .align.v-icon {\n  padding-left: 4px;\n}\n.zd-tree .sl-vue-tree-node-item .zd-tree-checkbox {\n  padding: 0px 3px 3px 0px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -57238,7 +57336,7 @@ var __vue_render__$1 = function () {
       { "theme--light": _vm.$isLight(this) },
       { "zd-grid-loading": _vm.instance.datasource.loading },
     ],
-    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
     attrs: {
       id: _vm.instance.name,
       "fixed-header": "",
@@ -58027,8 +58125,8 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-71cd7ad7_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
-,inject("data-v-71cd7ad7_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
+    inject("data-v-51de25ce_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-51de25ce_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -58229,7 +58327,7 @@ var __vue_render__ = function () {
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
       { "zd-grid-loading": _vm.instance.datasource.loading },
     ],
-    style: [_vm.cssColorVars, _vm.instance.cssStyle],
+    style: [_vm.cssColorVars, _vm.$styleObject(_vm.instance.cssStyle)],
     attrs: {
       id: _vm.instance.name,
       "fixed-header": "",
@@ -59190,8 +59288,8 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-535243ab_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
-,inject("data-v-535243ab_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+    inject("data-v-6ec9aad8_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: normal;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined })
+,inject("data-v-6ec9aad8_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -59359,6 +59457,21 @@ var isDarkPlugin = (component) => (component.$vuetify.theme.dark && !component.i
 
 var isLightPlugin = (component) => (!component.$vuetify.theme.dark || component.instance.light);
 
+var styleObjectPlugin = (style) => {
+    if (!style || typeof style !== 'string') {
+        return style;
+    }
+    const objectStyle = {};
+    const attributes = style.split(';');
+    for (let i = 0; i < attributes.length; i += 1) {
+        if (attributes[i]) {
+            const entry = attributes[i].split(':');
+            objectStyle[entry.splice(0, 1)[0].trim()] = entry.join(':').trim();
+        }
+    }
+    return objectStyle;
+};
+
 // tslint:disable: variable-name
 const VueTreeSelect = require('@zeedhi/zd-vue-treeselect');
 const Hooper = require('hooper');
@@ -59499,6 +59612,8 @@ const Zeedhi = {
         Vue.prototype.$isDark = isDarkPlugin;
         // isLight
         Vue.prototype.$isLight = isLightPlugin;
+        // styleObject
+        Vue.prototype.$styleObject = styleObjectPlugin;
     },
 };