@zeedhi/vuetify 1.59.0 → 1.61.0

package/dist/zd-vuetify.esm.js

@@ -767,14 +767,6 @@ function getZIndex(el) {
   if (!index) return getZIndex(el.parentNode);
   return index;
 }
-const tagsToReplace = {
-  '&': '&',
-  '<': '&lt;',
-  '>': '&gt;'
-};
-function escapeHTML(str) {
-  return str.replace(/[&<>]/g, tag => tagsToReplace[tag] || tag);
-}
 function filterObjectOnKeys(obj, keys) {
   const filtered = {};
 
@@ -2221,7 +2213,7 @@ class Vuetify {
 }
 Vuetify.install = install$1;
 Vuetify.installed = false;
-Vuetify.version = "2.6.9";
+Vuetify.version = "2.6.11";
 Vuetify.config = {
   silent: false
 };
@@ -3379,7 +3371,7 @@ function checkIsActive(e, binding) {
   return isActive(e);
 }
 
-function directive$1(e, el, binding, vnode) {
+function directive$1(e, el, binding) {
   const handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
   el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(() => {
     checkIsActive(e, binding) && handler && handler(e);
@@ -6554,7 +6546,11 @@ var Menuable = baseMixins$r.extend().extend({
     },
 
     checkActivatorFixed() {
-      if (this.attach !== false) return;
+      if (this.attach !== false) {
+        this.activatorFixed = false;
+        return;
+      }
+
       let el = this.getActivator();
 
       while (el) {
@@ -8220,13 +8216,13 @@ var VSelectList = mixins(Colorable, Themeable).extend({
 
     genFilteredText(text) {
       text = text || '';
-      if (!this.searchInput || this.noFilter) return escapeHTML(text);
+      if (!this.searchInput || this.noFilter) return text;
       const {
         start,
         middle,
         end
       } = this.getMaskedCharacters(text);
-      return `${escapeHTML(start)}${this.genHighlight(middle)}${escapeHTML(end)}`;
+      return [start, this.genHighlight(middle), end];
     },
 
     genHeader(props) {
@@ -8236,7 +8232,9 @@ var VSelectList = mixins(Colorable, Themeable).extend({
     },
 
     genHighlight(text) {
-      return `<span class="v-list-item__mask">${escapeHTML(text)}</span>`;
+      return this.$createElement('span', {
+        staticClass: 'v-list-item__mask'
+      }, text);
     },
 
     getMaskedCharacters(text) {
@@ -8309,12 +8307,7 @@ var VSelectList = mixins(Colorable, Themeable).extend({
     },
 
     genTileContent(item, index = 0) {
-      const innerHTML = this.genFilteredText(this.getText(item));
-      return this.$createElement(VListItemContent, [this.$createElement(VListItemTitle, {
-        domProps: {
-          innerHTML
-        }
-      })]);
+      return this.$createElement(VListItemContent, [this.$createElement(VListItemTitle, [this.genFilteredText(this.getText(item))])]);
     },
 
     hasItem(item) {
@@ -8871,7 +8864,8 @@ var VInput = baseMixins$m.extend().extend({
           color: this.validationState,
           dark: this.dark,
           disabled: this.isDisabled,
-          light: this.light
+          light: this.light,
+          tabindex: type === 'clear' ? -1 : undefined
         },
         on: !hasListener ? undefined : {
           click: e => {
@@ -12040,8 +12034,8 @@ var VDialog = baseMixins$i.extend({
       !this.getOpenDependentElements().some(el => el.contains(target)) // So we must have focused something outside the dialog and its children
       ) {
         // Find and focus the first available element inside the dialog
-        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-        const el = [...focusable].find(el => !el.hasAttribute('disabled'));
+        const focusable = this.$refs.dialog.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])');
+        const el = [...focusable].find(el => !el.hasAttribute('disabled') && !el.matches('[tabindex="-1"]'));
         el && el.focus();
       }
     },
@@ -13764,7 +13758,7 @@ var CalendarWithEvents = CalendarBase.extend({
     },
 
     eventNameFunction() {
-      return typeof this.eventName === 'function' ? this.eventName : (event, timedEvent) => escapeHTML(event.input[this.eventName] || '');
+      return typeof this.eventName === 'function' ? this.eventName : (event, timedEvent) => event.input[this.eventName] || '';
     },
 
     eventModeFunction() {
@@ -13976,15 +13970,17 @@ var CalendarWithEvents = CalendarBase.extend({
         const name = this.eventNameFunction(event, timedEvent);
 
         if (event.start.hasTime) {
-          const eventSummaryClass = 'v-event-summary';
-
           if (timedEvent) {
             const time = timeSummary();
-            const delimiter = singline ? ', ' : '<br>';
-            return `<span class="${eventSummaryClass}"><strong>${name}</strong>${delimiter}${time}</span>`;
+            const delimiter = singline ? ', ' : this.$createElement('br');
+            return this.$createElement('span', {
+              staticClass: 'v-event-summary'
+            }, [this.$createElement('strong', [name]), delimiter, time]);
           } else {
             const time = formatTime(event.start, true);
-            return `<span class="${eventSummaryClass}"><strong>${time}</strong> ${name}</span>`;
+            return this.$createElement('span', {
+              staticClass: 'v-event-summary'
+            }, [this.$createElement('strong', [time]), ' ', name]);
           }
         }
 
@@ -14014,11 +14010,8 @@ var CalendarWithEvents = CalendarBase.extend({
 
     genName(eventSummary) {
       return this.$createElement('div', {
-        staticClass: 'pl-1',
-        domProps: {
-          innerHTML: eventSummary()
-        }
-      });
+        staticClass: 'pl-1'
+      }, [eventSummary()]);
     },
 
     genPlaceholder(day) {
@@ -29903,7 +29896,7 @@ function checkIsActive(e, binding) {
   return isActive(e);
 }
 
-function directive(e, el, binding, vnode) {
+function directive(e, el, binding) {
   var handler = typeof binding.value === 'function' ? binding.value : binding.value.handler;
   el._clickOutside.lastMousedownWasOutside && checkEvent(e, el, binding) && setTimeout(function () {
     checkIsActive(e, binding) && handler && handler(e);
@@ -30858,7 +30851,6 @@ exports.getObjectValueByPath = getObjectValueByPath;
 exports.getPropertyFromItem = getPropertyFromItem;
 exports.createRange = createRange;
 exports.getZIndex = getZIndex;
-exports.escapeHTML = escapeHTML;
 exports.filterObjectOnKeys = filterObjectOnKeys;
 exports.convertToUnit = convertToUnit;
 exports.kebabCase = kebabCase;
@@ -31051,18 +31043,6 @@ function getZIndex(el) {
   return index;
 }
 
-var tagsToReplace = {
-  '&': '&amp;',
-  '<': '&lt;',
-  '>': '&gt;'
-};
-
-function escapeHTML(str) {
-  return str.replace(/[&<>]/g, function (tag) {
-    return tagsToReplace[tag] || tag;
-  });
-}
-
 function filterObjectOnKeys(obj, keys) {
   var filtered = {};
 
@@ -36854,7 +36834,7 @@ var Vuetify = /*#__PURE__*/function () {
 exports.default = Vuetify;
 Vuetify.install = install_1.install;
 Vuetify.installed = false;
-Vuetify.version = "2.6.9";
+Vuetify.version = "2.6.11";
 Vuetify.config = {
   silent: false
 };
@@ -38272,7 +38252,7 @@ __vue_render__$1n._withStripped = true;
   /* style */
   const __vue_inject_styles__$1n = function (inject) {
     if (!inject) return
-    inject("data-v-02c50976_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart.theme--light .apexcharts-toolbar > div > .v-icon {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip {\n  background: #fdfdfd !important;\n  border: 1px solid #fdfdfd !important;\n  color: #3b3b3b !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #eee !important;\n  color: #3b3b3b !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--light .apexcharts-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-title-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip {\n  background: #eee !important;\n  border: 1px solid #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-toolbar > div > .v-icon {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip {\n  background: #1e1e1e !important;\n  border: 1px solid #1e1e1e !important;\n  color: #b8b8b8 !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #101010 !important;\n  color: #b8b8b8 !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-title-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip {\n  background: #101010 !important;\n  border: 1px solid #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #252525 !important;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-0df63fea_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-toolbar > div {\n  transform: scale(0.8) !important;\n}\n.zd-apex-chart.theme--light .apexcharts-toolbar > div > .v-icon {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip {\n  background: #fdfdfd !important;\n  border: 1px solid #fdfdfd !important;\n  color: #3b3b3b !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--light .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #eee !important;\n  color: #3b3b3b !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--light .apexcharts-title-text {\n  fill: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip {\n  background: #eee !important;\n  border: 1px solid #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #3b3b3b !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--light .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #d4d4d4 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-toolbar > div > .v-icon {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip {\n  background: #1e1e1e !important;\n  border: 1px solid #1e1e1e !important;\n  color: #b8b8b8 !important;\n  z-index: 1;\n}\n.zd-apex-chart.theme--dark .apexcharts-tooltip .apexcharts-tooltip-title {\n  background: #101010 !important;\n  color: #b8b8b8 !important;\n  border-bottom: none !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-title-text {\n  fill: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip {\n  background: #101010 !important;\n  border: 1px solid #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip .apexcharts-xaxistooltip-text {\n  color: #b8b8b8 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::before {\n  border-bottom-color: #252525 !important;\n}\n.zd-apex-chart.theme--dark .apexcharts-xaxistooltip-bottom::after {\n  border-bottom-color: #252525 !important;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -41902,6 +41882,10 @@ __decorate([
     PropWatch({ type: Array, default: () => undefined }),
     __metadata("design:type", Object)
 ], ZdDashboard.prototype, "cardFooterSlot", void 0);
+__decorate([
+    Prop({ type: Object, default: () => undefined }),
+    __metadata("design:type", Object)
+], ZdDashboard.prototype, "editHeader", void 0);
 ZdDashboard = __decorate([
     Component$1
 ], ZdDashboard);
@@ -41944,13 +41928,15 @@ var __vue_render__$16 = function () {
       },
     },
     [
-      _c("zd-header", {
-        attrs: {
-          name: "headerDashboard" + _vm.instance.name,
-          leftSlot: _vm.instance.headerLeftSlot,
-          isVisible: _vm.instance.editingMode,
-        },
-      }),
+      _c(
+        "zd-header",
+        _vm._b(
+          { attrs: { isVisible: _vm.instance.editingMode } },
+          "zd-header",
+          _vm.instance.editHeader,
+          false
+        )
+      ),
       _vm._v(" "),
       _c(
         "div",
@@ -42114,7 +42100,7 @@ __vue_render__$16._withStripped = true;
   /* style */
   const __vue_inject_styles__$16 = function (inject) {
     if (!inject) return
-    inject("data-v-29d9be7e_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: 10px;\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-8c8b40d8_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: 10px;\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 */
@@ -42185,7 +42171,7 @@ let ZdDate = class ZdDate extends __vue_component__$19 {
             while (Mask.isMaskDelimiter(inputEl.value[start - 1]) && inputEl.value[start - 1] !== ' ') {
                 start -= 1;
             }
-            inputEl.value = `${value.slice(0, start - 1)} ${value.substr(start)}`;
+            inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`;
             inputEl.selectionStart = start - 1;
             inputEl.selectionEnd = start - 1;
             if (Mask.getValueWithoutMask(inputEl.value) === '') {
@@ -42196,7 +42182,7 @@ let ZdDate = class ZdDate extends __vue_component__$19 {
         else {
             if ((event.key === 'Backspace' || event.key === 'Delete') && (start !== 0 || end !== value.length)) {
                 const selectionText = value.substring(start, end).replace(/[0-9]/g, ' ');
-                inputEl.value = value.slice(0, start) + selectionText + value.substr(end);
+                inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
                 event.preventDefault();
             }
             else if ((event.key === 'Backspace' || event.key === 'Delete') && (start === 0 && end === value.length)) {
@@ -42210,8 +42196,8 @@ let ZdDate = class ZdDate extends __vue_component__$19 {
                 while (Mask.isMaskDelimiter(value[start]) && value[start] !== ' ') {
                     start += 1;
                 }
-                const firstSlice = value.substr(0, start);
-                const secondSlice = value.substr(start + 1);
+                const firstSlice = value.substring(0, start);
+                const secondSlice = value.substring(start + 1);
                 inputEl.value = firstSlice + secondSlice;
             }
             inputEl.selectionStart = start;
@@ -42622,7 +42608,7 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$19 {
             while (Mask.isMaskDelimiter(inputEl.value[start - 1]) && inputEl.value[start - 1] !== ' ') {
                 start -= 1;
             }
-            inputEl.value = `${value.slice(0, start - 1)} ${value.substr(start)}`;
+            inputEl.value = `${value.slice(0, start - 1)} ${value.substring(start)}`;
             inputEl.selectionStart = start - 1;
             inputEl.selectionEnd = start - 1;
             if (Mask.getValueWithoutMask(inputEl.value) === '') {
@@ -42633,7 +42619,7 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$19 {
         else {
             if ((event.key === 'Backspace' || event.key === 'Delete') && (start !== 0 || end !== value.length)) {
                 const selectionText = value.substring(start, end).replace(/[0-9-]/g, ' ');
-                inputEl.value = value.slice(0, start) + selectionText + value.substr(end);
+                inputEl.value = value.slice(0, start) + selectionText + value.substring(end);
                 event.preventDefault();
             }
             else if ((event.key === 'Backspace' || event.key === 'Delete') && (start === 0 && end === value.length)) {
@@ -42647,8 +42633,8 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$19 {
                 while (Mask.isMaskDelimiter(value[start]) && value[start] !== ' ') {
                     start += 1;
                 }
-                const firstSlice = value.substr(0, start);
-                const secondSlice = value.substr(start + 1);
+                const firstSlice = value.substring(0, start);
+                const secondSlice = value.substring(start + 1);
                 inputEl.value = firstSlice + secondSlice;
             }
             inputEl.selectionStart = start;
@@ -42805,6 +42791,10 @@ __decorate([
     PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], ZdDateRange.prototype, "helperValue", void 0);
+__decorate([
+    PropWatch({ type: [String, Array], default: () => [] }),
+    __metadata("design:type", Object)
+], ZdDateRange.prototype, "value", void 0);
 ZdDateRange = __decorate([
     Component$1
 ], ZdDateRange);
@@ -43242,6 +43232,54 @@ __vue_render__$12._withStripped = true;
     undefined
   );
 
+/**
+ * This function was copied from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/activatable/index.ts
+ * the only change was to consider ZdDropdown and ZdTooltip as activatable components
+ */
+const getActivator = (e, comp) => {
+    // If we've already fetched the activator, re-use
+    if (comp.activatorElement)
+        return comp.activatorElement;
+    let activator = null;
+    if (comp.activator) {
+        const target = comp.internalActivator ? comp.$el : document;
+        if (typeof comp.activator === 'string') {
+            // Selector
+            activator = target.querySelector(comp.activator);
+        }
+        else if (comp.activator.$el) {
+            // Component (ref)
+            activator = comp.activator.$el;
+        }
+        else {
+            // HTMLElement | Element
+            activator = comp.activator;
+        }
+    }
+    else if (comp.activatorNode.length === 1 || (comp.activatorNode.length && !e)) {
+        // Use the contents of the activator slot
+        // There's either only one element in it or we
+        // don't have a click event to use as a last resort
+        const vm = comp.activatorNode[0].componentInstance;
+        const isActivatable = (vm.$options.mixins
+            && vm.$options.mixins.some((m) => m.options && ['activatable', 'menuable'].includes(m.options.name))) || ['ZdDropdown', 'ZdTooltip'].includes(vm.$options.name);
+        if (vm && isActivatable) {
+            // Activator is actually another activatible component, use its activator (#8846)
+            activator = vm.getActivator();
+        }
+        else {
+            activator = comp.activatorNode[0].elm;
+        }
+    }
+    else if (e) {
+        // Activated by a click or focus event
+        activator = (e.currentTarget || e.target);
+    }
+    // The activator should only be a valid element (Ignore comments and text nodes)
+    comp.activatorElement = (activator === null || activator === void 0 ? void 0 : activator.nodeType) === Node.ELEMENT_NODE ? activator : null;
+    return comp.activatorElement;
+};
+
 /**
  * Dropdown component
  */
@@ -43258,6 +43296,16 @@ let ZdDropdown = class ZdDropdown extends ZdComponentRender$1 {
             '--cursor': this.getCursor(this.instance.cursor),
         };
     }
+    getActivator() {
+        const { dropdown } = this.$refs;
+        return (dropdown === null || dropdown === void 0 ? void 0 : dropdown.getActivator()) || null;
+    }
+    mounted() {
+        const { dropdown } = this.$refs;
+        if (dropdown) {
+            dropdown.getActivator = (e) => getActivator(e, dropdown);
+        }
+    }
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
@@ -43355,6 +43403,7 @@ var __vue_render__$11 = function () {
           expression: "instance.isVisible",
         },
       ],
+      ref: "dropdown",
       style: _vm.instance.cssStyle,
       attrs: {
         id: _vm.instance.name,
@@ -43384,31 +43433,25 @@ var __vue_render__$11 = function () {
             var dropdown = ref.on;
             return [
               _c(
-                "div",
-                [
-                  _c(
-                    _vm.instance.activator.component,
-                    _vm._b(
-                      {
-                        tag: "component",
-                        attrs: {
-                          "dropdown-activator": Object.assign(
-                            {},
-                            _vm.$attrs["dropdown-activator"],
-                            dropdown
-                          ),
-                        },
-                      },
-                      "component",
-                      _vm.instance.activator,
-                      false
-                    )
-                  ),
-                  _vm._v(" "),
-                  _c("div", { staticStyle: { display: "none" } }),
-                ],
-                1
+                _vm.instance.activator.component,
+                _vm._b(
+                  {
+                    tag: "component",
+                    attrs: {
+                      "dropdown-activator": Object.assign(
+                        {},
+                        _vm.$attrs["dropdown-activator"],
+                        dropdown
+                      ),
+                    },
+                  },
+                  "component",
+                  _vm.instance.activator,
+                  false
+                )
               ),
+              _vm._v(" "),
+              _c("div", { staticStyle: { display: "none" } }),
             ]
           },
         },
@@ -43467,7 +43510,7 @@ __vue_render__$11._withStripped = true;
   /* style */
   const __vue_inject_styles__$11 = function (inject) {
     if (!inject) return
-    inject("data-v-fa06dbd6_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
+    inject("data-v-289939c3_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -44735,6 +44778,7 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
     constructor() {
         super(...arguments);
         this.instanceType = Grid;
+        this.allselectedState = false;
         this.resizeX = 0;
         this.resizeWidth = 0;
         this.resizeTableWidth = 0;
@@ -44756,6 +44800,26 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             this.destroyDragColumns();
         }
     }
+    change(value) {
+        if (value && this.instance.selectable) {
+            setTimeout(() => {
+                this.$el.querySelector('.column').colSpan = this.instance.columns.length + 1;
+            }, 0);
+        }
+    }
+    updateStates() {
+        setTimeout(() => {
+            this.allselectedState = this.instance.datasource.data.every((row) => {
+                if (this.instance.callDisableSelection(row))
+                    return true;
+                return this.instance.selectedRows.some((item) => {
+                    const key = this.instance.datasource.uniqueKey;
+                    const result = item[key] === row[key];
+                    return result;
+                });
+            });
+        }, 0);
+    }
     mounted() {
         this.setHeight();
         if (this.instance.dragColumns) {
@@ -44823,15 +44887,20 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             });
         });
     }
-    calcWidth(column, width) {
-        if ((width === null || width === void 0 ? void 0 : width.indexOf('%')) !== -1 && this.$el) {
+    parseWidth(width) {
+        if (width && width.indexOf('%') !== -1 && this.$el) {
             const percent = Number(width === null || width === void 0 ? void 0 : width.replace('%', '')) / 100;
             const tableWidth = this.$el.clientWidth;
-            return `${Math
-                .max(this.minimumColumnWidth(column), Math
-                .trunc(Number(tableWidth) * percent))}px`;
+            const pxWidth = Number(tableWidth) * percent;
+            return pxWidth;
         }
-        return width || '';
+        return Number(width === null || width === void 0 ? void 0 : width.replace('px', ''));
+    }
+    calcWidth(column, width) {
+        const min = Math.max(this.minimumColumnWidth(column), this.parseWidth(column.minWidth) || 0);
+        const max = this.parseWidth(column.maxWidth);
+        const pxWidth = this.parseWidth(width);
+        return `${Math.max(min, Math.min(Math.trunc(pxWidth), max || Infinity))}px`;
     }
     sortColumns(event) {
         const { originalEvent } = event;
@@ -44922,21 +44991,26 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
             : MIN_WIDTH_WITH_SORTABLE_FALSE;
     }
     resizeMouseMoveHandler(event) {
+        var _a, _b;
         // Determine how far the mouse has been moved
         const dx = event.clientX - this.resizeX;
-        const minimumColumnWidth = this.minimumColumnWidth(this.resizeColumn);
-        const width = Math.max(minimumColumnWidth, this.resizeWidth + dx);
+        const min = Math.max(this.minimumColumnWidth(this.resizeColumn), this.parseWidth((_a = this.resizeColumn) === null || _a === void 0 ? void 0 : _a.minWidth) || 0);
+        const max = this.parseWidth((_b = this.resizeColumn) === null || _b === void 0 ? void 0 : _b.maxWidth) || Infinity;
+        const newWidth = this.resizeWidth + dx;
+        const width = Math.max(min, Math.min(newWidth, max));
         if (this.resizeColumn) {
             // Update the width of column
             this.resizeColumn.width = `${width}px`;
-            this.resizeColumn.maxWidth = this.resizeColumn.width;
         }
-        if (this.resizeWidth + dx >= minimumColumnWidth) {
+        if (newWidth >= max) {
+            return;
+        }
+        if (newWidth >= min) {
             // Update the width of the table
             this.resizeTableElement.style.width = `${this.resizeTableWidth + dx}px`;
         }
         else {
-            this.resizeTableElement.style.width = `${this.resizeTableWidth - this.resizeWidth + minimumColumnWidth}px`;
+            this.resizeTableElement.style.width = `${this.resizeTableWidth - this.resizeWidth + min}px`;
         }
     }
     resizeMouseUpHandler(event) {
@@ -44975,6 +45049,7 @@ let ZdGrid = class ZdGrid extends ZdIterable$1 {
     }
     selectAllClick(isSelected, event) {
         this.$nextTick(() => {
+            this.instance.selectAll(isSelected);
             this.instance.selectAllClick(isSelected, event, this.$el);
         });
     }
@@ -45265,6 +45340,18 @@ __decorate([
     __metadata("design:paramtypes", [Boolean]),
     __metadata("design:returntype", void 0)
 ], ZdGrid.prototype, "update", null);
+__decorate([
+    Watch('instance.datasource.loading'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Boolean]),
+    __metadata("design:returntype", void 0)
+], ZdGrid.prototype, "change", null);
+__decorate([
+    Watch('instance.selectedRows'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ZdGrid.prototype, "updateStates", null);
 ZdGrid = __decorate([
     Component$2
 ], ZdGrid);
@@ -45360,7 +45447,7 @@ var __vue_render__$X = function () {
               key: "header",
               fn: function (ref) {
                 var props = ref.props;
-                var on = ref.on;
+                ref.on;
                 return [
                   _c("thead", { staticClass: "zd-grid-table-header" }, [
                     _c(
@@ -45387,20 +45474,18 @@ var __vue_render__$X = function () {
                                         "indeterminate-icon": _vm.$getIcon(
                                           "checkboxIndeterminate"
                                         ),
-                                        "input-value": props.everyItem,
+                                        "input-value": _vm.allselectedState,
                                         indeterminate:
-                                          !props.everyItem && props.someItems,
+                                          !_vm.allselectedState &&
+                                          props.someItems,
                                       },
                                       on: {
                                         click: function ($event) {
                                           $event.stopPropagation();
-                                          on["toggle-select-all"](
-                                            !props.everyItem
-                                          );
-                                          _vm.selectAllClick(
-                                            !props.everyItem,
+                                          return _vm.selectAllClick(
+                                            !_vm.allselectedState,
                                             $event
-                                          );
+                                          )
                                         },
                                       },
                                     })
@@ -45439,7 +45524,9 @@ var __vue_render__$X = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth || column.minWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: {
@@ -45457,7 +45544,10 @@ var __vue_render__$X = function () {
                                           width:
                                             _vm.calcWidth(
                                               column,
-                                              column.maxWidth || column.minWidth
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
                                             ) || "unset",
                                           color:
                                             _vm.instance.headerCellTextColor,
@@ -45877,17 +45967,20 @@ var __vue_render__$X = function () {
                                                 width:
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.width
+                                                    column.width,
+                                                    true
                                                   ) || "unset",
                                                 "min-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.minWidth
+                                                    column.minWidth,
+                                                    true
                                                   ) || "unset",
                                                 "max-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.maxWidth
+                                                    column.maxWidth,
+                                                    true
                                                   ) || "unset",
                                               },
                                               on: {
@@ -46074,7 +46167,7 @@ __vue_render__$X._withStripped = true;
   /* style */
   const __vue_inject_styles__$X = function (inject) {
     if (!inject) return
-    inject("data-v-5e41fd76_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-c13aa836_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\n}\n.v-data-table--mobile > .v-data-table__wrapper tbody {\n  display: contents;\n  flex-direction: column;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -46110,6 +46203,7 @@ let ZdGridEditable = class ZdGridEditable extends ZdGrid$1 {
         super(...arguments);
         this.instanceType = GridEditable;
         this.inputToFocus = '';
+        this.isTrVisible = false;
         this.navigationKeyMapping = {
             enter: {
                 event: this.navigateDown.bind(this),
@@ -46157,24 +46251,40 @@ let ZdGridEditable = class ZdGridEditable extends ZdGrid$1 {
         }
     }
     getColWidth(col) {
-        this.$nextTick(() => {
-            const element = this.$el.querySelector(`.column-th-${col.name}-${this.instance.name}`);
-            if (!element) {
-                return;
-            }
-            if (col.maxWidth) {
-                element.style.width = this.calcWidth(col, col.maxWidth || '');
-            }
-            else if (col.minWidth) {
-                element.style.width = this.calcWidth(col, col.minWidth || '');
-            }
-            else {
-                element.style.width = `${element.clientWidth}px`;
-            }
-        });
+        if (this.isTrVisible) {
+            this.$nextTick(() => {
+                const element = this.$el.querySelector(`.column-th-${col.name}-${this.instance.name}`);
+                if (!element) {
+                    return;
+                }
+                if (col.width) {
+                    element.style.width = this.calcWidth(col, col.width || '');
+                }
+                else if (col.maxWidth) {
+                    element.style.width = this.calcWidth(col, col.maxWidth || '');
+                }
+                else if (col.minWidth) {
+                    element.style.width = this.calcWidth(col, col.minWidth || '');
+                }
+                else {
+                    element.style.width = `${element.clientWidth}px`;
+                }
+            });
+        }
         return true;
     }
+    registerOnVisible() {
+        const headerRow = this.$el.querySelector('thead > tr');
+        if (!headerRow)
+            return;
+        const obs = this.$onVisible(headerRow, () => {
+            this.instance.columns.forEach(this.getColWidth);
+            this.isTrVisible = true;
+            obs.disconnect();
+        }, this.$el);
+    }
     mounted() {
+        this.registerOnVisible();
         KeyMap.bind(this.navigationKeyMapping, this.instance, this.$el);
     }
     beforeDestroy() {
@@ -46339,7 +46449,7 @@ var __vue_render__$W = function () {
               key: "header",
               fn: function (ref) {
                 var props = ref.props;
-                var on = ref.on;
+                ref.on;
                 return [
                   _c("thead", { staticClass: "zd-grid-table-header" }, [
                     _c(
@@ -46367,20 +46477,18 @@ var __vue_render__$W = function () {
                                         "indeterminate-icon": _vm.$getIcon(
                                           "checkboxIndeterminate"
                                         ),
-                                        "input-value": props.everyItem,
+                                        "input-value": _vm.allselectedState,
                                         indeterminate:
-                                          !props.everyItem && props.someItems,
+                                          !_vm.allselectedState &&
+                                          props.someItems,
                                       },
                                       on: {
                                         click: function ($event) {
                                           $event.stopPropagation();
-                                          on["toggle-select-all"](
-                                            !props.everyItem
-                                          );
-                                          _vm.selectAllClick(
-                                            !props.everyItem,
+                                          return _vm.selectAllClick(
+                                            !_vm.allselectedState,
                                             $event
-                                          );
+                                          )
                                         },
                                       },
                                     })
@@ -46425,7 +46533,9 @@ var __vue_render__$W = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth || column.minWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: { index: index },
@@ -46439,7 +46549,9 @@ var __vue_render__$W = function () {
                                           width:
                                             _vm.calcWidth(
                                               column,
-                                              column.maxWidth || column.minWidth
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth
                                             ) || "unset",
                                         },
                                       },
@@ -46880,17 +46992,20 @@ var __vue_render__$W = function () {
                                                       _vm.calcWidth(
                                                         column,
                                                         column.maxWidth ||
-                                                          column.minWidth
+                                                          column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                 },
@@ -47030,17 +47145,20 @@ var __vue_render__$W = function () {
                                                       _vm.calcWidth(
                                                         column,
                                                         column.maxWidth ||
-                                                          column.minWidth
+                                                          column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "min-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.minWidth
+                                                        column.minWidth,
+                                                        true
                                                       ) || "unset",
                                                     "max-width":
                                                       _vm.calcWidth(
                                                         column,
-                                                        column.maxWidth
+                                                        column.maxWidth,
+                                                        true
                                                       ) || "unset",
                                                   },
                                                   on: {
@@ -47229,8 +47347,8 @@ __vue_render__$W._withStripped = true;
   /* style */
   const __vue_inject_styles__$W = function (inject) {
     if (!inject) return
-    inject("data-v-3833beae_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-3833beae_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-a2a78194_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-a2a78194_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 */
@@ -48752,11 +48870,11 @@ __vue_render__$N._withStripped = true;
   /* style */
   const __vue_inject_styles__$N = function (inject) {
     if (!inject) return
-    inject("data-v-770adb91_0", { source: ".zd-iterable-component-render[data-v-770adb91] {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-flex: 1;\n  flex: 1 1 auto;\n}\n.zd-iterable-component-render .error--text[data-v-770adb91],\n.zd-iterable-component-render .no--data[data-v-770adb91] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-770adb91] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-770adb91] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-770adb91] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
+    inject("data-v-425f0852_0", { source: ".zd-iterable-component-render[data-v-425f0852] {\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  -webkit-box-flex: 1;\n  flex: 1 1 auto;\n}\n.zd-iterable-component-render .error--text[data-v-425f0852],\n.zd-iterable-component-render .no--data[data-v-425f0852] {\n  text-align: center;\n  width: 100%;\n  font-size: 14px;\n}\n.zd-iterable-component-render .no--data[data-v-425f0852] {\n  color: rgba(0, 0, 0, 0.38);\n}\n.zd-iterable-component-render .zd-iterable-toolbar[data-v-425f0852] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 16px;\n  align-items: center;\n  width: 100%;\n}\n.zd-iterable-component-render .zd-iterable-footer[data-v-425f0852] {\n  padding: 5px 0;\n  display: flex;\n  width: 100%;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$N = "data-v-770adb91";
+  const __vue_scope_id__$N = "data-v-425f0852";
   /* module identifier */
   const __vue_module_identifier__$N = undefined;
   /* functional template */
@@ -50712,6 +50830,10 @@ __decorate([
     PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], ZdLogin.prototype, "poweredByImageCard", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Boolean)
+], ZdLogin.prototype, "flatForm", void 0);
 __decorate([
     Prop({ type: Array, default: () => [] }),
     __metadata("design:type", Array)
@@ -50754,13 +50876,25 @@ var __vue_render__$C = function () {
             "position-" + _vm.instance.layout,
             "zd-login-content",
           ],
-          style: "background: " + _vm.instance.backgroundStyle + ";",
+          style: {
+            background:
+              !_vm.instance.flatForm || _vm.instance.layout === "center"
+                ? _vm.instance.backgroundStyle
+                : "",
+            "flex-direction":
+              _vm.instance.flatForm && _vm.instance.layout === "right"
+                ? "row-reverse"
+                : "row",
+          },
         },
         [
           _c(
             "v-card",
             {
-              staticClass: "zd-login-card",
+              class: [
+                "zd-login-card",
+                _vm.instance.flatForm ? "zd-login-flat-card" : "",
+              ],
               attrs: {
                 width: _vm.instance.cardWidth,
                 dark: _vm.instance.dark,
@@ -50789,7 +50923,7 @@ var __vue_render__$C = function () {
                         {
                           key: index,
                           tag: "component",
-                          staticClass: "zd-login-card-content",
+                          class: ["zd-login-card-content"],
                           attrs: { parent: _vm.instance },
                         },
                         "component",
@@ -50865,6 +50999,20 @@ var __vue_render__$C = function () {
                 attrs: { src: _vm.instance.poweredByImage },
               })
             : _vm._e(),
+          _vm._v(" "),
+          _vm.instance.backgroundStyle &&
+          _vm.instance.flatForm &&
+          _vm.instance.layout !== "center"
+            ? _c("div", {
+                class: ["background-div"],
+                style: [
+                  {
+                    width: "calc(100% - " + _vm.instance.cardWidth + ")",
+                    background: _vm.instance.backgroundStyle,
+                  },
+                ],
+              })
+            : _vm._e(),
         ],
         1
       ),
@@ -50877,7 +51025,7 @@ __vue_render__$C._withStripped = true;
   /* style */
   const __vue_inject_styles__$C = function (inject) {
     if (!inject) return
-    inject("data-v-557ec43a_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .flex {\n    height: 100%;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
+    inject("data-v-2045fd32_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n.zd-login .zd-login-card {\n  z-index: 1;\n}\n.zd-login .zd-login-flat-card {\n  margin: 0px !important;\n  height: 100%;\n  border-radius: 0px !important;\n}\n.zd-login .zd-login-background-image {\n  z-index: 0;\n}\n.zd-login .background-div {\n  background-position-x: left !important;\n  background-size: cover !important;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by {\n  z-index: 1;\n}\n.zd-login .zd-login-powered-by-card {\n  z-index: 1;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .zd-login-flat-card {\n    margin: 0px !important;\n    height: 100% !important;\n    border-radius: 0px !important;\n}\n.zd-login .flex {\n    height: 100%;\n}\n.zd-login .background-div {\n    position: absolute;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-left .zd-login-background-image {\n  position: absolute;\n  right: 0px;\n  height: 100%;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right .zd-login-background-image {\n  position: absolute;\n  left: 0px;\n  height: 100%;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-center .backgroud-div {\n  position: absolute !important;\n}\n.zd-login .position-center .zd-login-background-image {\n  position: absolute;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -56946,6 +57094,16 @@ let ZdTooltip = class ZdTooltip extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Tooltip;
     }
+    getActivator() {
+        const { tooltip } = this.$refs;
+        return (tooltip === null || tooltip === void 0 ? void 0 : tooltip.getActivator()) || null;
+    }
+    mounted() {
+        const { tooltip } = this.$refs;
+        if (tooltip) {
+            tooltip.getActivator = (e) => getActivator(e, tooltip);
+        }
+    }
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
@@ -57012,6 +57170,7 @@ var __vue_render__$5 = function () {
     "v-tooltip",
     _vm._b(
       {
+        ref: "tooltip",
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name },
         scopedSlots: _vm._u(
@@ -57021,32 +57180,28 @@ var __vue_render__$5 = function () {
               fn: function (ref) {
                 var dropdown = ref.on;
                 return [
-                  _c(
-                    "div",
-                    _vm._l(_vm.instance.children, function (child, index) {
-                      return _c(
-                        child.component,
-                        _vm._b(
-                          {
-                            key: index,
-                            tag: "component",
-                            attrs: {
-                              "dropdown-activator": Object.assign(
-                                {},
-                                _vm.$attrs["dropdown-activator"],
-                                dropdown
-                              ),
-                              parent: _vm.instance.parent,
-                            },
+                  _vm._l(_vm.instance.children, function (child, index) {
+                    return _c(
+                      child.component,
+                      _vm._b(
+                        {
+                          key: index,
+                          tag: "component",
+                          attrs: {
+                            "dropdown-activator": Object.assign(
+                              {},
+                              _vm.$attrs["dropdown-activator"],
+                              dropdown
+                            ),
+                            parent: _vm.instance.parent,
                           },
-                          "component",
-                          child,
-                          false
-                        )
+                        },
+                        "component",
+                        child,
+                        false
                       )
-                    }),
-                    1
-                  ),
+                    )
+                  }),
                   _vm._v(" "),
                   _vm._t("default"),
                 ]
@@ -57085,7 +57240,7 @@ __vue_render__$5._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-17e0820c_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
+    inject("data-v-766faea4_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -57335,6 +57490,7 @@ let ZdTree = class ZdTree extends ZdComponentRender$1 {
         this.beforeNodeState = {};
     }
     mounted() {
+        this.setHeight();
         this.instance.setTree(this.$refs.tree);
         this.setAfterTitleMargin();
         this.nodeChange();
@@ -57350,6 +57506,15 @@ let ZdTree = class ZdTree extends ZdComponentRender$1 {
     onNodeDrop(nodes, position, event) {
         this.instance.nodeDrop(nodes, position, event, this.$el);
     }
+    setHeight() {
+        const { grid } = this.$refs;
+        if (this.instance.height) {
+            grid.$el.style.height = this.$formatSize(this.instance.height);
+        }
+        if (this.instance.maxHeight) {
+            grid.$el.style.maxHeight = this.$formatSize(this.instance.maxHeight);
+        }
+    }
     onNodeSelect(nodes, event) {
         const prevSelectCount = Object.keys(this.beforeNodeState).length;
         this.beforeNodeState = {};
@@ -57476,6 +57641,14 @@ __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Boolean)
 ], ZdTree.prototype, "checkbox", void 0);
+__decorate([
+    Prop({ type: [Number, String], default: '' }),
+    __metadata("design:type", Object)
+], ZdTree.prototype, "maxHeight", void 0);
+__decorate([
+    Prop({ type: [Number, String], default: '' }),
+    __metadata("design:type", Object)
+], ZdTree.prototype, "height", void 0);
 __decorate([
     Prop({ type: [String, Number, Boolean], default: false }),
     __metadata("design:type", Object)
@@ -57521,15 +57694,28 @@ var __vue_render__$2 = function () {
         "zd-tree",
         { "theme--dark": _vm.$isDark(this) },
         { "theme--light": _vm.$isLight(this) },
+        { "zd-tree-flex": _vm.instance.height || _vm.instance.maxHeight },
       ],
-      style: [_vm.cssColorVars].concat(_vm.$styleObject(_vm.instance.cssStyle)),
+      style: [_vm.cssColorVars].concat(
+        _vm.$styleObject(_vm.instance.cssStyle),
+        [
+          _vm.instance.height
+            ? { height: _vm.$formatSize(_vm.instance.height) }
+            : {},
+        ],
+        [
+          _vm.instance.maxHeight
+            ? { height: _vm.$formatSize(_vm.instance.maxHeight) }
+            : {},
+        ]
+      ),
       attrs: { id: _vm.instance.name },
     },
     [
       _vm.instance.toolbarSlot.length && !_vm.$slots.toolbarSlot
         ? _c(
             "div",
-            { staticClass: "zd-mb-4" },
+            { staticClass: "zd-mb-4 zd-tree-toolbar" },
             [
               _vm._l(_vm.instance.toolbarSlot, function (child, index) {
                 return _c(
@@ -57553,238 +57739,247 @@ var __vue_render__$2 = function () {
           )
         : _vm._e(),
       _vm._v(" "),
-      _c("sl-vue-tree", {
-        ref: "tree",
-        attrs: {
-          allowMultiselect: _vm.instance.allowMultiSelect,
-          dark: _vm.instance.dark,
-          light: _vm.instance.light,
-        },
-        on: {
-          drop: _vm.onNodeDrop,
-          select: _vm.onNodeSelect,
-          nodeclick: _vm.onNodeClick,
-          nodedblclick: _vm.onNodeDblClick,
-        },
-        scopedSlots: _vm._u(
-          [
-            {
-              key: "title",
-              fn: function (ref) {
-                var node = ref.node;
-                return [
-                  _c("span", { staticClass: "align" }),
-                  _vm._v(" "),
-                  _vm.instance.checkbox
-                    ? _c("zd-tree-checkbox", {
-                        attrs: {
-                          disabled: _vm.instance.callDisableCheckbox(node),
-                          node: _vm.instanceNode(node),
-                          checkedField: _vm.instance.checkedField,
-                        },
-                        on: {
-                          click: function ($event) {
-                            return _vm.nodeCheck(node, $event)
-                          },
-                        },
-                      })
-                    : _vm._e(),
-                  _vm._v(" "),
-                  _c(
-                    "span",
-                    { staticClass: "item-icon" },
-                    [
-                      node.isLeaf && _vm.instance.itemIconName
-                        ? _c(
-                            "v-icon",
-                            {
-                              attrs: {
-                                dark: _vm.instance.dark,
-                                light: _vm.instance.light,
+      _c(
+        "div",
+        { staticClass: "zd-tree-container" },
+        [
+          _c("sl-vue-tree", {
+            ref: "tree",
+            attrs: {
+              allowMultiselect: _vm.instance.allowMultiSelect,
+              dark: _vm.instance.dark,
+              light: _vm.instance.light,
+            },
+            on: {
+              drop: _vm.onNodeDrop,
+              select: _vm.onNodeSelect,
+              nodeclick: _vm.onNodeClick,
+              nodedblclick: _vm.onNodeDblClick,
+            },
+            scopedSlots: _vm._u(
+              [
+                {
+                  key: "title",
+                  fn: function (ref) {
+                    var node = ref.node;
+                    return [
+                      _c("span", { staticClass: "align" }),
+                      _vm._v(" "),
+                      _vm.instance.checkbox
+                        ? _c("zd-tree-checkbox", {
+                            attrs: {
+                              disabled: _vm.instance.callDisableCheckbox(node),
+                              node: _vm.instanceNode(node),
+                              checkedField: _vm.instance.checkedField,
+                            },
+                            on: {
+                              click: function ($event) {
+                                return _vm.nodeCheck(node, $event)
                               },
                             },
-                            [
-                              _vm._v(
-                                "\n          " +
-                                  _vm._s(
-                                    _vm.$getIcon(_vm.instance.itemIconName)
-                                  ) +
-                                  "\n        "
-                              ),
-                            ]
-                          )
+                          })
                         : _vm._e(),
                       _vm._v(" "),
-                      !node.isLeaf && _vm.instance.groupIconName
-                        ? _c("v-icon", [
-                            _vm._v(
-                              _vm._s(_vm.$getIcon(_vm.instance.groupIconName)) +
-                                "\n        "
-                            ),
-                          ])
-                        : _vm._e(),
-                    ],
-                    1
-                  ),
-                  _vm._v(" "),
-                  !_vm.$slots.titleSlot
-                    ? [
-                        _vm.instance.titleSlot.length === 0
-                          ? _c(
-                              "span",
-                              {
-                                class: [
-                                  "item-title",
-                                  { "has-children": node.children.length },
-                                ],
-                              },
-                              [
+                      _c(
+                        "span",
+                        { staticClass: "item-icon" },
+                        [
+                          node.isLeaf && _vm.instance.itemIconName
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    "\n            " +
+                                      _vm._s(
+                                        _vm.$getIcon(_vm.instance.itemIconName)
+                                      ) +
+                                      "\n          "
+                                  ),
+                                ]
+                              )
+                            : _vm._e(),
+                          _vm._v(" "),
+                          !node.isLeaf && _vm.instance.groupIconName
+                            ? _c("v-icon", [
                                 _vm._v(
-                                  "\n          " +
-                                    _vm._s(node.title) +
-                                    "\n        "
-                                ),
-                              ]
-                            )
-                          : _c(
-                              "span",
-                              { staticClass: "zd-display-inline-flex" },
-                              _vm._l(
-                                _vm.instance.getSlotComponent(
-                                  _vm.instance.titleSlot,
-                                  node
+                                  _vm._s(
+                                    _vm.$getIcon(_vm.instance.groupIconName)
+                                  ) + "\n          "
                                 ),
-                                function (comp, index) {
-                                  return _c(
-                                    comp.component,
-                                    _vm._b(
-                                      {
-                                        key: index,
-                                        tag: "component",
-                                        class: [
-                                          "item-title",
+                              ])
+                            : _vm._e(),
+                        ],
+                        1
+                      ),
+                      _vm._v(" "),
+                      !_vm.$slots.titleSlot
+                        ? [
+                            _vm.instance.titleSlot.length === 0
+                              ? _c(
+                                  "span",
+                                  {
+                                    class: [
+                                      "item-title",
+                                      { "has-children": node.children.length },
+                                    ],
+                                  },
+                                  [
+                                    _vm._v(
+                                      "\n            " +
+                                        _vm._s(node.title) +
+                                        "\n          "
+                                    ),
+                                  ]
+                                )
+                              : _c(
+                                  "span",
+                                  { staticClass: "zd-display-inline-flex" },
+                                  _vm._l(
+                                    _vm.instance.getSlotComponent(
+                                      _vm.instance.titleSlot,
+                                      node
+                                    ),
+                                    function (comp, index) {
+                                      return _c(
+                                        comp.component,
+                                        _vm._b(
                                           {
-                                            "has-children":
-                                              node.children.length,
+                                            key: index,
+                                            tag: "component",
+                                            class: [
+                                              "item-title",
+                                              {
+                                                "has-children":
+                                                  node.children.length,
+                                              },
+                                            ],
                                           },
-                                        ],
-                                      },
-                                      "component",
-                                      comp,
-                                      false
-                                    )
-                                  )
-                                }
-                              ),
-                              1
-                            ),
-                      ]
-                    : _vm._e(),
-                  _vm._v(" "),
-                  _vm._t("titleSlot", null, { node: node }),
-                  _vm._v(" "),
-                  _c(
-                    "zd-tree-after-title",
-                    {
-                      ref: node.pathStr,
-                      attrs: {
-                        afterTitleSlot: _vm.instance.getSlotComponent(
-                          _vm.instance.afterTitleSlot,
-                          node
-                        )[0],
-                      },
-                      on: {
-                        "hook:mounted": function ($event) {
-                          return _vm.addObserver(node)
-                        },
-                      },
-                    },
-                    [_vm._t("afterTitleSlot", null, { node: node })],
-                    2
-                  ),
-                ]
-              },
-            },
-            {
-              key: "toggle",
-              fn: function (ref) {
-                var node = ref.node;
-                return [
-                  _c(
-                    "span",
-                    [
-                      node.children.length &&
-                      node.isExpanded &&
-                      _vm.instance.openedIconName
-                        ? _c(
-                            "v-icon",
-                            {
-                              attrs: {
-                                dark: _vm.instance.dark,
-                                light: _vm.instance.light,
-                              },
-                            },
-                            [
-                              _vm._v(
-                                _vm._s(
-                                  _vm.$getIcon(_vm.instance.openedIconName)
-                                ) + "\n        "
-                              ),
-                            ]
-                          )
+                                          "component",
+                                          comp,
+                                          false
+                                        )
+                                      )
+                                    }
+                                  ),
+                                  1
+                                ),
+                          ]
                         : _vm._e(),
                       _vm._v(" "),
-                      node.children.length &&
-                      !node.isExpanded &&
-                      _vm.instance.closedIconName
-                        ? _c(
-                            "v-icon",
-                            {
-                              attrs: {
-                                dark: _vm.instance.dark,
-                                light: _vm.instance.light,
-                              },
+                      _vm._t("titleSlot", null, { node: node }),
+                      _vm._v(" "),
+                      _c(
+                        "zd-tree-after-title",
+                        {
+                          ref: node.pathStr,
+                          attrs: {
+                            afterTitleSlot: _vm.instance.getSlotComponent(
+                              _vm.instance.afterTitleSlot,
+                              node
+                            )[0],
+                          },
+                          on: {
+                            "hook:mounted": function ($event) {
+                              return _vm.addObserver(node)
                             },
-                            [
-                              _vm._v(
-                                _vm._s(
-                                  _vm.$getIcon(_vm.instance.closedIconName)
-                                ) + "\n        "
-                              ),
-                            ]
-                          )
-                        : _vm._e(),
-                    ],
-                    1
-                  ),
-                ]
-              },
-            },
-            {
-              key: "draginfo",
-              fn: function () {
-                return [
-                  _vm._v(
-                    "\n      " + _vm._s(_vm.selectedNodesTitle) + "\n    "
-                  ),
-                ]
+                          },
+                        },
+                        [_vm._t("afterTitleSlot", null, { node: node })],
+                        2
+                      ),
+                    ]
+                  },
+                },
+                {
+                  key: "toggle",
+                  fn: function (ref) {
+                    var node = ref.node;
+                    return [
+                      _c(
+                        "span",
+                        [
+                          node.children.length &&
+                          node.isExpanded &&
+                          _vm.instance.openedIconName
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    _vm._s(
+                                      _vm.$getIcon(_vm.instance.openedIconName)
+                                    ) + "\n          "
+                                  ),
+                                ]
+                              )
+                            : _vm._e(),
+                          _vm._v(" "),
+                          node.children.length &&
+                          !node.isExpanded &&
+                          _vm.instance.closedIconName
+                            ? _c(
+                                "v-icon",
+                                {
+                                  attrs: {
+                                    dark: _vm.instance.dark,
+                                    light: _vm.instance.light,
+                                  },
+                                },
+                                [
+                                  _vm._v(
+                                    _vm._s(
+                                      _vm.$getIcon(_vm.instance.closedIconName)
+                                    ) + "\n          "
+                                  ),
+                                ]
+                              )
+                            : _vm._e(),
+                        ],
+                        1
+                      ),
+                    ]
+                  },
+                },
+                {
+                  key: "draginfo",
+                  fn: function () {
+                    return [
+                      _vm._v(
+                        "\n        " +
+                          _vm._s(_vm.selectedNodesTitle) +
+                          "\n      "
+                      ),
+                    ]
+                  },
+                  proxy: true,
+                },
+              ],
+              null,
+              true
+            ),
+            model: {
+              value: _vm.instance.nodes,
+              callback: function ($$v) {
+                _vm.$set(_vm.instance, "nodes", $$v);
               },
-              proxy: true,
+              expression: "instance.nodes",
             },
-          ],
-          null,
-          true
-        ),
-        model: {
-          value: _vm.instance.nodes,
-          callback: function ($$v) {
-            _vm.$set(_vm.instance, "nodes", $$v);
-          },
-          expression: "instance.nodes",
-        },
-      }),
-    ],
-    1
+          }),
+        ],
+        1
+      ),
+    ]
   )
 };
 var __vue_staticRenderFns__$2 = [];
@@ -57793,7 +57988,7 @@ __vue_render__$2._withStripped = true;
   /* style */
   const __vue_inject_styles__$2 = function (inject) {
     if (!inject) return
-    inject("data-v-6a21eeb4_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 });
+    inject("data-v-61d810b1_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-toolbar {\n  display: flex;\n}\n.zd-tree-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tree-container {\n  overflow: auto;\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 */
@@ -57996,7 +58191,7 @@ var __vue_render__$1 = function () {
               key: "header",
               fn: function (ref) {
                 var props = ref.props;
-                var on = ref.on;
+                ref.on;
                 return [
                   _c("thead", { staticClass: "zd-grid-table-header" }, [
                     _c(
@@ -58023,20 +58218,18 @@ var __vue_render__$1 = function () {
                                         "indeterminate-icon": _vm.$getIcon(
                                           "checkboxIndeterminate"
                                         ),
-                                        "input-value": props.everyItem,
+                                        "input-value": _vm.allselectedState,
                                         indeterminate:
-                                          !props.everyItem && props.someItems,
+                                          !_vm.allselectedState &&
+                                          props.someItems,
                                       },
                                       on: {
                                         click: function ($event) {
                                           $event.stopPropagation();
-                                          on["toggle-select-all"](
-                                            !props.everyItem
-                                          );
-                                          _vm.selectAllClick(
-                                            !props.everyItem,
+                                          return _vm.selectAllClick(
+                                            !_vm.allselectedState,
                                             $event
-                                          );
+                                          )
                                         },
                                       },
                                     })
@@ -58075,198 +58268,257 @@ var __vue_render__$1 = function () {
                                       width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth
-                                        ) ||
-                                        _vm.calcWidth(
-                                          column,
-                                          column.minWidth
-                                        ) ||
-                                        "unset",
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
+                                        ) || "unset",
                                     },
                                     attrs: { index: index },
-                                    on: {
-                                      click: function ($event) {
-                                        return _vm.instance.changeColumnOrder(
-                                          column
-                                        )
-                                      },
-                                    },
                                   },
                                   [
-                                    column.type !== "action"
-                                      ? [
-                                          column.sortable &&
-                                          column.align === "right"
-                                            ? _c(
+                                    _c(
+                                      "span",
+                                      {
+                                        staticClass: "zd-table-header-cell",
+                                        style: {
+                                          width:
+                                            _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ) || "unset",
+                                          color:
+                                            _vm.instance.headerCellTextColor,
+                                        },
+                                      },
+                                      [
+                                        column.type !== "action"
+                                          ? [
+                                              column.sortable &&
+                                              column.align === "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--left zd-mr-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align === "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order left",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _c(
                                                 "span",
                                                 {
-                                                  staticClass:
-                                                    "zd-table-cell-sort",
-                                                },
-                                                [
-                                                  column.sortable &&
-                                                  column.align === "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
+                                                  class: [
+                                                    "zd-table-cell-name",
+                                                    {
+                                                      "overflow-hidden":
+                                                        column.overflow ===
+                                                        "hidden",
+                                                      "overflow-wrap":
+                                                        column.overflow ===
+                                                        "wrap",
+                                                    },
+                                                    !isNaN(column.overflow)
+                                                      ? "overflow-clamp overflow-clamp-" +
+                                                        column.overflow
+                                                      : "",
+                                                  ],
+                                                  on: {
+                                                    click: function ($event) {
+                                                      return _vm.instance.changeColumnOrder(
+                                                        column
                                                       )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order left",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
+                                                    },
+                                                    mouseenter: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.checkOverflow(
+                                                        $event
                                                       )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                          _vm._v(" "),
-                                          _c(
-                                            "span",
-                                            {
-                                              class: [
-                                                "zd-table-cell-name",
-                                                {
-                                                  "overflow-hidden":
-                                                    column.overflow ===
-                                                    "hidden",
-                                                  "overflow-wrap":
-                                                    column.overflow === "wrap",
-                                                },
-                                                !isNaN(column.overflow)
-                                                  ? "overflow-clamp overflow-clamp-" +
-                                                    column.overflow
-                                                  : "",
-                                              ],
-                                              style: {
-                                                "min-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.minWidth
-                                                  ) || "unset",
-                                                "max-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.maxWidth
-                                                  ) || "unset",
-                                              },
-                                              on: {
-                                                mouseenter: function ($event) {
-                                                  return _vm.checkOverflow(
-                                                    $event
-                                                  )
-                                                },
-                                                mouseleave: function ($event) {
-                                                  return _vm.removeTooltip()
+                                                    },
+                                                    mouseleave: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.removeTooltip()
+                                                    },
+                                                  },
                                                 },
-                                              },
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                [
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
+                                              _vm._v(" "),
+                                              column.sortable &&
+                                              column.align !== "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--right zd-ml-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align !== "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
                                             ]
-                                          ),
-                                          _vm._v(" "),
-                                          column.sortable &&
-                                          column.align !== "right"
-                                            ? _c(
+                                          : [
+                                              _c(
                                                 "span",
                                                 {
                                                   staticClass:
-                                                    "zd-table-cell-sort",
+                                                    "zd-table-cell-name",
                                                 },
                                                 [
-                                                  column.sortable &&
-                                                  column.align !== "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                        ]
-                                      : [
-                                          _c(
-                                            "span",
-                                            {
-                                              staticClass: "zd-table-cell-name",
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
-                                            ]
-                                          ),
-                                        ],
-                                  ],
-                                  2
+                                            ],
+                                        _vm._v(" "),
+                                        _vm.instance.resizeColumns
+                                          ? _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "zd-grid-resize-handle",
+                                                on: {
+                                                  mousedown: function ($event) {
+                                                    return _vm.resizeMouseDownHandler(
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                  click: _vm.resizeClickHandler,
+                                                },
+                                              },
+                                              [_vm._v("‖")]
+                                            )
+                                          : _vm._e(),
+                                      ],
+                                      2
+                                    ),
+                                  ]
                                 )
                               : _vm._e(),
                           ]
@@ -58305,7 +58557,7 @@ var __vue_render__$1 = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                      style: "padding-top: " + _vm.scrollData.endHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -58469,15 +58721,23 @@ var __vue_render__$1 = function () {
                                                   : "",
                                               ],
                                               style: {
+                                                width:
+                                                  _vm.calcWidth(
+                                                    column,
+                                                    column.width,
+                                                    true
+                                                  ) || "unset",
                                                 "min-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.minWidth
+                                                    column.minWidth,
+                                                    true
                                                   ) || "unset",
                                                 "max-width":
                                                   _vm.calcWidth(
                                                     column,
-                                                    column.maxWidth
+                                                    column.maxWidth,
+                                                    true
                                                   ) || "unset",
                                               },
                                               on: {
@@ -58549,6 +58809,7 @@ var __vue_render__$1 = function () {
                                                 ],
                                                 1
                                               ),
+                                              _vm._v(" "),
                                               _c("span", {
                                                 key: item.tree__searched
                                                   ? "a"
@@ -58598,34 +58859,92 @@ var __vue_render__$1 = function () {
                                             },
                                           },
                                         },
-                                        _vm._l(
-                                          column.childrenProps,
-                                          function (child) {
-                                            return _c(
-                                              child.component,
-                                              _vm._b(
+                                        [
+                                          _c(
+                                            "div",
+                                            {
+                                              directives: [
                                                 {
-                                                  key:
-                                                    child.name +
-                                                    _vm.rowKey(item),
-                                                  tag: "component",
+                                                  name: "show",
+                                                  rawName: "v-show",
+                                                  value: headerIndex === 0,
+                                                  expression:
+                                                    "headerIndex === 0",
                                                 },
-                                                "component",
-                                                Object.assign(
-                                                  {},
-                                                  child,
-                                                  _vm.instance.getActionComponent(
-                                                    child,
-                                                    column,
-                                                    item
+                                              ],
+                                              class: [
+                                                "zd-tree-grid-expand",
+                                                "level" + item.tree__level,
+                                              ],
+                                            },
+                                            [
+                                              (item.tree__children || [])
+                                                .length > 0
+                                                ? _c(
+                                                    "v-icon",
+                                                    {
+                                                      class: {
+                                                        opened:
+                                                          item.tree__opened,
+                                                      },
+                                                      attrs: { tabindex: "-1" },
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.toggleExpand(
+                                                            item,
+                                                            index
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      _vm._v(
+                                                        "\n                  " +
+                                                          _vm._s(
+                                                            _vm.$getIcon(
+                                                              "chevronRight"
+                                                            )
+                                                          ) +
+                                                          "\n                "
+                                                      ),
+                                                    ]
                                                   )
-                                                ),
-                                                false
+                                                : _vm._e(),
+                                            ],
+                                            1
+                                          ),
+                                          _vm._v(" "),
+                                          _vm._l(
+                                            column.childrenProps,
+                                            function (child) {
+                                              return _c(
+                                                child.component,
+                                                _vm._b(
+                                                  {
+                                                    key:
+                                                      child.name +
+                                                      _vm.rowKey(item),
+                                                    tag: "component",
+                                                  },
+                                                  "component",
+                                                  Object.assign(
+                                                    {},
+                                                    child,
+                                                    _vm.instance.getActionComponent(
+                                                      child,
+                                                      column,
+                                                      item
+                                                    )
+                                                  ),
+                                                  false
+                                                )
                                               )
-                                            )
-                                          }
-                                        ),
-                                        1
+                                            }
+                                          ),
+                                        ],
+                                        2
                                       ),
                                     ]
                                   : _vm._e(),
@@ -58730,8 +59049,8 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-34a8a2e4_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-34a8a2e4_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-37f68802_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-37f68802_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 */
@@ -58767,6 +59086,7 @@ let ZdTreeGridEditable = class ZdTreeGridEditable extends ZdTreeGrid$1 {
         super(...arguments);
         this.instanceType = TreeGridEditable;
         this.inputToFocus = '';
+        this.isTrVisible = false;
         this.navigationKeyMapping = {
             enter: {
                 event: this.navigateDown.bind(this),
@@ -58813,24 +59133,41 @@ let ZdTreeGridEditable = class ZdTreeGridEditable extends ZdTreeGrid$1 {
             this.$nextTick(() => { input.focus(); });
         }
     }
-    setColumnsWidth() {
-        this.columns.forEach((col) => {
-            const element = document.querySelector(`.column-th-${col.name}-${this.instance.name}`);
-            if (element) {
-                if (col.maxWidth) {
-                    element.style.width = this.calcWidth(col, col.maxWidth);
+    getColWidth(col) {
+        if (this.isTrVisible) {
+            this.$nextTick(() => {
+                const element = this.$el.querySelector(`.column-th-${col.name}-${this.instance.name}`);
+                if (!element) {
+                    return;
+                }
+                if (col.width) {
+                    element.style.width = this.calcWidth(col, col.width || '');
+                }
+                else if (col.maxWidth) {
+                    element.style.width = this.calcWidth(col, col.maxWidth || '');
                 }
                 else if (col.minWidth) {
-                    element.style.width = this.calcWidth(col, col.minWidth);
+                    element.style.width = this.calcWidth(col, col.minWidth || '');
                 }
                 else {
                     element.style.width = `${element.clientWidth}px`;
                 }
-            }
-        });
+            });
+        }
+        return true;
+    }
+    registerOnVisible() {
+        const headerRow = this.$el.querySelector('thead > tr');
+        if (!headerRow)
+            return;
+        const obs = this.$onVisible(headerRow, () => {
+            this.instance.columns.forEach(this.getColWidth);
+            this.isTrVisible = true;
+            obs.disconnect();
+        }, this.$el);
     }
     mounted() {
-        this.setColumnsWidth();
+        this.registerOnVisible();
         KeyMap.bind(this.navigationKeyMapping, this.instance, this.$el);
     }
     beforeDestroy() {
@@ -58931,6 +59268,7 @@ var __vue_render__ = function () {
     ref: "grid",
     class: [
       "zd-grid",
+      "zd-tree-grid",
       "zd-tree-grid-editable",
       _vm.instance.cssClass,
       { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
@@ -58996,7 +59334,7 @@ var __vue_render__ = function () {
               key: "header",
               fn: function (ref) {
                 var props = ref.props;
-                var on = ref.on;
+                ref.on;
                 return [
                   _c("thead", { staticClass: "zd-grid-table-header" }, [
                     _c(
@@ -59023,18 +59361,17 @@ var __vue_render__ = function () {
                                     "indeterminate-icon": _vm.$getIcon(
                                       "checkboxIndeterminate"
                                     ),
-                                    value: props.everyItem,
+                                    value: _vm.allselectedState,
                                     indeterminate:
-                                      !props.everyItem && props.someItems,
+                                      !_vm.allselectedState && props.someItems,
                                   },
                                   on: {
                                     click: function ($event) {
                                       $event.stopPropagation();
-                                      on["toggle-select-all"](!props.everyItem);
-                                      _vm.selectAllClick(
-                                        !props.everyItem,
+                                      return _vm.selectAllClick(
+                                        !_vm.allselectedState,
                                         $event
-                                      );
+                                      )
                                     },
                                   },
                                 }),
@@ -59045,7 +59382,7 @@ var __vue_render__ = function () {
                         _vm._v(" "),
                         _vm._l(props.headers, function (column, index) {
                           return [
-                            column.isVisible
+                            column.isVisible && _vm.getColWidth(column)
                               ? _c(
                                   "th",
                                   {
@@ -59073,201 +59410,260 @@ var __vue_render__ = function () {
                                     style: {
                                       "background-color":
                                         _vm.instance.headerBackground,
-                                      "min-width":
-                                        _vm.calcWidth(
-                                          column,
-                                          column.minWidth
-                                        ) || "unset",
-                                      "max-width":
+                                      width:
                                         _vm.calcWidth(
                                           column,
-                                          column.maxWidth
+                                          column.width ||
+                                            column.maxWidth ||
+                                            column.minWidth
                                         ) || "unset",
                                     },
                                     attrs: { index: index },
-                                    on: {
-                                      click: function ($event) {
-                                        return _vm.instance.changeColumnOrder(
-                                          column
-                                        )
-                                      },
-                                    },
                                   },
                                   [
-                                    column.type !== "action"
-                                      ? [
-                                          column.sortable &&
-                                          column.align === "right"
-                                            ? _c(
+                                    _c(
+                                      "span",
+                                      {
+                                        staticClass: "zd-table-header-cell",
+                                        style: {
+                                          width:
+                                            _vm.calcWidth(
+                                              column,
+                                              column.width ||
+                                                column.maxWidth ||
+                                                column.minWidth,
+                                              true
+                                            ) || "unset",
+                                          color:
+                                            _vm.instance.headerCellTextColor,
+                                        },
+                                      },
+                                      [
+                                        column.type !== "action"
+                                          ? [
+                                              column.sortable &&
+                                              column.align === "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--left zd-mr-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align === "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order left",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _c(
                                                 "span",
                                                 {
-                                                  staticClass:
-                                                    "zd-table-cell-sort",
-                                                },
-                                                [
-                                                  column.sortable &&
-                                                  column.align === "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
+                                                  class: [
+                                                    "zd-table-cell-name",
+                                                    {
+                                                      "overflow-hidden":
+                                                        column.overflow ===
+                                                        "hidden",
+                                                      "overflow-wrap":
+                                                        column.overflow ===
+                                                        "wrap",
+                                                    },
+                                                    !isNaN(column.overflow)
+                                                      ? "overflow-clamp overflow-clamp-" +
+                                                        column.overflow
+                                                      : "",
+                                                  ],
+                                                  on: {
+                                                    click: function ($event) {
+                                                      return _vm.instance.changeColumnOrder(
+                                                        column
                                                       )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order left",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
+                                                    },
+                                                    mouseenter: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.checkOverflow(
+                                                        $event
                                                       )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                          _vm._v(" "),
-                                          _c(
-                                            "span",
-                                            {
-                                              class: [
-                                                "zd-table-cell-name",
-                                                {
-                                                  "overflow-hidden":
-                                                    column.overflow ===
-                                                    "hidden",
-                                                  "overflow-wrap":
-                                                    column.overflow === "wrap",
-                                                },
-                                                !isNaN(column.overflow)
-                                                  ? "overflow-clamp overflow-clamp-" +
-                                                    column.overflow
-                                                  : "",
-                                              ],
-                                              style: {
-                                                "min-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.minWidth
-                                                  ) || "unset",
-                                                "max-width":
-                                                  _vm.calcWidth(
-                                                    column,
-                                                    column.maxWidth
-                                                  ) || "unset",
-                                              },
-                                              on: {
-                                                mouseenter: function ($event) {
-                                                  return _vm.checkOverflow(
-                                                    $event
-                                                  )
-                                                },
-                                                mouseleave: function ($event) {
-                                                  return _vm.removeTooltip()
+                                                    },
+                                                    mouseleave: function (
+                                                      $event
+                                                    ) {
+                                                      return _vm.removeTooltip()
+                                                    },
+                                                  },
                                                 },
-                                              },
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                [
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
+                                              _vm._v(" "),
+                                              column.sortable &&
+                                              column.align !== "right"
+                                                ? _c(
+                                                    "span",
+                                                    {
+                                                      staticClass:
+                                                        "zd-table-cell-sort zd-table-cell-sort--right zd-ml-1",
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.changeColumnOrder(
+                                                            column
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      column.sortable &&
+                                                      column.align !== "right"
+                                                        ? _c(
+                                                            "v-icon",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-icon",
+                                                              attrs: {
+                                                                small: "",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      "chevronUp"
+                                                                    )
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _vm.instance.datasource.findOrderIndex(
+                                                        column.name
+                                                      ) >= 0
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-sort-order",
+                                                            },
+                                                            [
+                                                              _vm._v(
+                                                                "\n                    " +
+                                                                  _vm._s(
+                                                                    _vm.instance.datasource.findOrderIndex(
+                                                                      column.name
+                                                                    ) + 1
+                                                                  ) +
+                                                                  "\n                  "
+                                                              ),
+                                                            ]
+                                                          )
+                                                        : _vm._e(),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm._e(),
                                             ]
-                                          ),
-                                          _vm._v(" "),
-                                          column.sortable &&
-                                          column.align !== "right"
-                                            ? _c(
+                                          : [
+                                              _c(
                                                 "span",
                                                 {
                                                   staticClass:
-                                                    "zd-table-cell-sort",
+                                                    "zd-table-cell-name",
                                                 },
                                                 [
-                                                  column.sortable &&
-                                                  column.align !== "right"
-                                                    ? _c(
-                                                        "v-icon",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-icon",
-                                                          attrs: { small: "" },
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.$getIcon(
-                                                                "chevronUp"
-                                                              )
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _vm.instance.datasource.findOrderIndex(
-                                                    column.name
-                                                  ) >= 0
-                                                    ? _c(
-                                                        "span",
-                                                        {
-                                                          staticClass:
-                                                            "zd-table-cell-sort-order",
-                                                        },
-                                                        [
-                                                          _vm._v(
-                                                            _vm._s(
-                                                              _vm.instance.datasource.findOrderIndex(
-                                                                column.name
-                                                              ) + 1
-                                                            )
-                                                          ),
-                                                        ]
-                                                      )
-                                                    : _vm._e(),
-                                                ],
-                                                1
-                                              )
-                                            : _vm._e(),
-                                        ]
-                                      : [
-                                          _c(
-                                            "span",
-                                            {
-                                              staticClass: "zd-table-cell-name",
-                                            },
-                                            [
-                                              _vm._v(
-                                                _vm._s(_vm.$t(column.label))
+                                                  _vm._v(
+                                                    _vm._s(_vm.$t(column.label))
+                                                  ),
+                                                ]
                                               ),
-                                            ]
-                                          ),
-                                        ],
-                                  ],
-                                  2
+                                            ],
+                                        _vm._v(" "),
+                                        _vm.instance.resizeColumns
+                                          ? _c(
+                                              "span",
+                                              {
+                                                staticClass:
+                                                  "zd-grid-resize-handle",
+                                                on: {
+                                                  mousedown: function ($event) {
+                                                    return _vm.resizeMouseDownHandler(
+                                                      column,
+                                                      $event
+                                                    )
+                                                  },
+                                                  click: _vm.resizeClickHandler,
+                                                },
+                                              },
+                                              [_vm._v("‖")]
+                                            )
+                                          : _vm._e(),
+                                      ],
+                                      2
+                                    ),
+                                  ]
                                 )
                               : _vm._e(),
                           ]
@@ -59288,7 +59684,8 @@ var __vue_render__ = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.startHeight + "px",
+                      style:
+                        "padding-top: " + _vm.scrollData.startHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -59306,7 +59703,7 @@ var __vue_render__ = function () {
                 return [
                   _c("tr", [
                     _c("td", {
-                      style: "padding-top:" + _vm.scrollData.endHeight + "px",
+                      style: "padding-top: " + _vm.scrollData.endHeight + "px",
                       attrs: { colspan: headers.length },
                     }),
                   ]),
@@ -59466,288 +59863,538 @@ var __vue_render__ = function () {
                                               })
                                             : _vm._e(),
                                           _vm._v(" "),
-                                          Object.assign({}, column, cellProps)
-                                            .editable &&
-                                          _vm.canEditRowValues[
-                                            _vm.rowKey(item)
-                                          ] &&
-                                          _vm.instance.editing
-                                            ? _c(
-                                                "span",
-                                                {
-                                                  directives: [
+                                          _c(
+                                            "span",
+                                            {
+                                              staticClass:
+                                                "zd-tree-grid-editable-cell-wrapper",
+                                            },
+                                            [
+                                              Object.assign(
+                                                {},
+                                                column,
+                                                cellProps
+                                              ).editable &&
+                                              _vm.canEditRowValues[
+                                                _vm.rowKey(item)
+                                              ] &&
+                                              _vm.instance.editing
+                                                ? _c(
+                                                    "span",
                                                     {
-                                                      name: "show",
-                                                      rawName: "v-show",
-                                                      value: !column.loading,
-                                                      expression:
-                                                        "!column.loading",
+                                                      directives: [
+                                                        {
+                                                          name: "show",
+                                                          rawName: "v-show",
+                                                          value:
+                                                            !column.loading,
+                                                          expression:
+                                                            "!column.loading",
+                                                        },
+                                                      ],
+                                                      staticClass:
+                                                        "zd-table-cell-inline-edit",
+                                                      style: {
+                                                        width:
+                                                          _vm.calcWidth(
+                                                            column,
+                                                            column.width,
+                                                            true
+                                                          ) || "unset",
+                                                        "min-width":
+                                                          _vm.calcWidth(
+                                                            column,
+                                                            column.minWidth,
+                                                            true
+                                                          ) || "unset",
+                                                        "max-width":
+                                                          _vm.calcWidth(
+                                                            column,
+                                                            column.maxWidth,
+                                                            true
+                                                          ) || "unset",
+                                                      },
                                                     },
-                                                  ],
-                                                  staticClass:
-                                                    "zd-table-cell-inline-edit",
-                                                  style: {
-                                                    width:
-                                                      _vm.calcWidth(
-                                                        column,
-                                                        column.maxWidth ||
-                                                          column.minWidth
-                                                      ) || "unset",
-                                                    "min-width":
-                                                      _vm.calcWidth(
-                                                        column,
-                                                        column.minWidth
-                                                      ) || "unset",
-                                                    "max-width":
-                                                      _vm.calcWidth(
+                                                    [
+                                                      _vm.instance.isEdited(
                                                         column,
-                                                        column.maxWidth
-                                                      ) || "unset",
-                                                  },
-                                                },
-                                                [
-                                                  _vm.instance.isEdited(
+                                                        item
+                                                      )
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              staticClass:
+                                                                "zd-table-cell-edit-icon",
+                                                            },
+                                                            [
+                                                              _vm.instance.isValid(
+                                                                column,
+                                                                item
+                                                              )
+                                                                ? _c(
+                                                                    "v-icon",
+                                                                    {
+                                                                      attrs: {
+                                                                        color:
+                                                                          "primary",
+                                                                      },
+                                                                    },
+                                                                    [
+                                                                      _vm._v(
+                                                                        _vm._s(
+                                                                          _vm.$getIcon(
+                                                                            "pencil"
+                                                                          )
+                                                                        )
+                                                                      ),
+                                                                    ]
+                                                                  )
+                                                                : _c(
+                                                                    "v-icon",
+                                                                    {
+                                                                      attrs: {
+                                                                        color:
+                                                                          "error",
+                                                                      },
+                                                                    },
+                                                                    [
+                                                                      _vm._v(
+                                                                        _vm._s(
+                                                                          _vm.$getIcon(
+                                                                            "warning"
+                                                                          )
+                                                                        )
+                                                                      ),
+                                                                    ]
+                                                                  ),
+                                                            ],
+                                                            1
+                                                          )
+                                                        : _vm._e(),
+                                                      _vm._v(" "),
+                                                      _c(
+                                                        column.componentProps
+                                                          .component,
+                                                        _vm._b(
+                                                          {
+                                                            key:
+                                                              column.name +
+                                                              _vm.rowKey(item),
+                                                            tag: "component",
+                                                          },
+                                                          "component",
+                                                          _vm.getEditableComponent(
+                                                            column,
+                                                            item,
+                                                            cellProps
+                                                          ),
+                                                          false
+                                                        )
+                                                      ),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _vm.hasToggleIcon(
                                                     column,
                                                     item
                                                   )
-                                                    ? _c(
-                                                        "span",
+                                                ? _c(
+                                                    "span",
+                                                    [
+                                                      _c("v-icon", [
+                                                        _vm._v(
+                                                          _vm._s(
+                                                            _vm.$getIcon(
+                                                              column.formatterByRow(
+                                                                item,
+                                                                cellProps
+                                                              )
+                                                            )
+                                                          )
+                                                        ),
+                                                      ]),
+                                                    ],
+                                                    1
+                                                  )
+                                                : _c(
+                                                    "span",
+                                                    {
+                                                      directives: [
                                                         {
-                                                          staticClass:
-                                                            "zd-table-cell-edit-icon",
+                                                          name: "show",
+                                                          rawName: "v-show",
+                                                          value:
+                                                            !column.loading,
+                                                          expression:
+                                                            "!column.loading",
                                                         },
-                                                        [
-                                                          _vm.instance.isValid(
+                                                      ],
+                                                      class: [
+                                                        "zd-table-cell-text",
+                                                        {
+                                                          "zd-table-cell-text-editable":
+                                                            Object.assign(
+                                                              {},
+                                                              column,
+                                                              cellProps
+                                                            ).editable,
+                                                          "overflow-hidden":
+                                                            column.overflow ===
+                                                            "hidden",
+                                                          "overflow-wrap":
+                                                            column.overflow ===
+                                                            "wrap",
+                                                        },
+                                                        !isNaN(column.overflow)
+                                                          ? "overflow-clamp overflow-clamp-" +
+                                                            column.overflow
+                                                          : "",
+                                                      ],
+                                                      style: {
+                                                        width:
+                                                          _vm.calcWidth(
                                                             column,
-                                                            item
+                                                            column.width,
+                                                            true
+                                                          ) || "unset",
+                                                        "min-width":
+                                                          _vm.calcWidth(
+                                                            column,
+                                                            column.minWidth,
+                                                            true
+                                                          ) || "unset",
+                                                        "max-width":
+                                                          _vm.calcWidth(
+                                                            column,
+                                                            column.maxWidth,
+                                                            true
+                                                          ) || "unset",
+                                                      },
+                                                      on: {
+                                                        mouseenter: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.checkOverflow(
+                                                            $event
                                                           )
+                                                        },
+                                                        mouseleave: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.removeTooltip()
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      _c(
+                                                        "div",
+                                                        {
+                                                          directives: [
+                                                            {
+                                                              name: "show",
+                                                              rawName: "v-show",
+                                                              value:
+                                                                headerIndex ===
+                                                                0,
+                                                              expression:
+                                                                "headerIndex === 0",
+                                                            },
+                                                          ],
+                                                          class: [
+                                                            "zd-tree-grid-editable-expand",
+                                                            "level" +
+                                                              item.tree__level,
+                                                          ],
+                                                        },
+                                                        [
+                                                          item.tree__children
+                                                            .length > 0
                                                             ? _c(
                                                                 "v-icon",
                                                                 {
+                                                                  class: {
+                                                                    opened:
+                                                                      item.tree__opened,
+                                                                  },
                                                                   attrs: {
-                                                                    color:
-                                                                      "primary",
+                                                                    tabindex:
+                                                                      "-1",
+                                                                  },
+                                                                  on: {
+                                                                    click:
+                                                                      function (
+                                                                        $event
+                                                                      ) {
+                                                                        $event.stopPropagation();
+                                                                        return _vm.instance.toggleExpand(
+                                                                          item,
+                                                                          index
+                                                                        )
+                                                                      },
                                                                   },
                                                                 },
                                                                 [
                                                                   _vm._v(
-                                                                    _vm._s(
-                                                                      _vm.$getIcon(
-                                                                        "pencil"
-                                                                      )
-                                                                    )
+                                                                    "\n                      " +
+                                                                      _vm._s(
+                                                                        _vm.$getIcon(
+                                                                          "chevronRight"
+                                                                        )
+                                                                      ) +
+                                                                      "\n                    "
                                                                   ),
                                                                 ]
                                                               )
-                                                            : _c(
-                                                                "v-icon",
+                                                            : _vm._e(),
+                                                        ],
+                                                        1
+                                                      ),
+                                                      _vm._v(" "),
+                                                      Object.assign(
+                                                        {},
+                                                        column,
+                                                        cellProps
+                                                      ).editable &&
+                                                      _vm.canEditRowValues[
+                                                        _vm.rowKey(item)
+                                                      ] &&
+                                                      _vm.instance.editing
+                                                        ? _c(
+                                                            "span",
+                                                            {
+                                                              directives: [
                                                                 {
-                                                                  attrs: {
-                                                                    color:
-                                                                      "error",
-                                                                  },
+                                                                  name: "show",
+                                                                  rawName:
+                                                                    "v-show",
+                                                                  value:
+                                                                    !column.loading,
+                                                                  expression:
+                                                                    "!column.loading",
                                                                 },
-                                                                [
-                                                                  _vm._v(
-                                                                    _vm._s(
-                                                                      _vm.$getIcon(
-                                                                        "warning"
+                                                              ],
+                                                              staticClass:
+                                                                "zd-table-cell-inline-edit",
+                                                              style: {
+                                                                width:
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.maxWidth ||
+                                                                      column.minWidth
+                                                                  ) || "unset",
+                                                                "min-width":
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.minWidth
+                                                                  ) || "unset",
+                                                                "max-width":
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.maxWidth
+                                                                  ) || "unset",
+                                                              },
+                                                            },
+                                                            [
+                                                              _vm.instance.isEdited(
+                                                                column,
+                                                                item
+                                                              )
+                                                                ? _c(
+                                                                    "span",
+                                                                    {
+                                                                      staticClass:
+                                                                        "zd-table-cell-edit-icon",
+                                                                    },
+                                                                    [
+                                                                      _vm.instance.isValid(
+                                                                        column,
+                                                                        item
                                                                       )
-                                                                    )
+                                                                        ? _c(
+                                                                            "v-icon",
+                                                                            {
+                                                                              attrs:
+                                                                                {
+                                                                                  color:
+                                                                                    "primary",
+                                                                                },
+                                                                            },
+                                                                            [
+                                                                              _vm._v(
+                                                                                _vm._s(
+                                                                                  _vm.$getIcon(
+                                                                                    "pencil"
+                                                                                  )
+                                                                                )
+                                                                              ),
+                                                                            ]
+                                                                          )
+                                                                        : _c(
+                                                                            "v-icon",
+                                                                            {
+                                                                              attrs:
+                                                                                {
+                                                                                  color:
+                                                                                    "error",
+                                                                                },
+                                                                            },
+                                                                            [
+                                                                              _vm._v(
+                                                                                _vm._s(
+                                                                                  _vm.$getIcon(
+                                                                                    "warning"
+                                                                                  )
+                                                                                )
+                                                                              ),
+                                                                            ]
+                                                                          ),
+                                                                    ],
+                                                                    1
+                                                                  )
+                                                                : _vm._e(),
+                                                              _vm._v(" "),
+                                                              _c(
+                                                                column
+                                                                  .componentProps
+                                                                  .component,
+                                                                _vm._b(
+                                                                  {
+                                                                    key:
+                                                                      column.name +
+                                                                      _vm.rowKey(
+                                                                        item
+                                                                      ),
+                                                                    tag: "component",
+                                                                  },
+                                                                  "component",
+                                                                  _vm.getEditableComponent(
+                                                                    column,
+                                                                    item,
+                                                                    cellProps
                                                                   ),
-                                                                ]
+                                                                  false
+                                                                )
                                                               ),
-                                                        ],
-                                                        1
-                                                      )
-                                                    : _vm._e(),
-                                                  _vm._v(" "),
-                                                  _c(
-                                                    column.componentProps
-                                                      .component,
-                                                    _vm._b(
-                                                      {
-                                                        key:
-                                                          column.name +
-                                                          _vm.rowKey(item),
-                                                        tag: "component",
-                                                      },
-                                                      "component",
-                                                      _vm.getEditableComponent(
-                                                        column,
-                                                        item,
-                                                        cellProps
-                                                      ),
-                                                      false
-                                                    )
-                                                  ),
-                                                ],
-                                                1
-                                              )
-                                            : _vm.hasToggleIcon(column, item)
-                                            ? _c(
-                                                "span",
-                                                [
-                                                  _c("v-icon", [
-                                                    _vm._v(
-                                                      _vm._s(
-                                                        _vm.$getIcon(
-                                                          column.formatterByRow(
-                                                            item,
-                                                            cellProps
+                                                            ],
+                                                            1
+                                                          )
+                                                        : _vm.hasToggleIcon(
+                                                            column,
+                                                            item
                                                           )
-                                                        )
-                                                      )
-                                                    ),
-                                                  ]),
-                                                ],
-                                                1
-                                              )
-                                            : _c(
-                                                "span",
-                                                {
-                                                  directives: [
-                                                    {
-                                                      name: "show",
-                                                      rawName: "v-show",
-                                                      value: !column.loading,
-                                                      expression:
-                                                        "!column.loading",
-                                                    },
-                                                  ],
-                                                  class: [
-                                                    "zd-table-cell-text",
-                                                    {
-                                                      "zd-table-cell-text-editable":
-                                                        Object.assign(
-                                                          {},
-                                                          column,
-                                                          cellProps
-                                                        ).editable,
-                                                      "overflow-hidden":
-                                                        column.overflow ===
-                                                        "hidden",
-                                                      "overflow-wrap":
-                                                        column.overflow ===
-                                                        "wrap",
-                                                    },
-                                                    !isNaN(column.overflow)
-                                                      ? "overflow-clamp overflow-clamp-" +
-                                                        column.overflow
-                                                      : "",
-                                                  ],
-                                                  style: {
-                                                    width:
-                                                      _vm.calcWidth(
-                                                        column,
-                                                        column.maxWidth ||
-                                                          column.minWidth
-                                                      ) || "unset",
-                                                    "min-width":
-                                                      _vm.calcWidth(
-                                                        column,
-                                                        column.minWidth
-                                                      ) || "unset",
-                                                    "max-width":
-                                                      _vm.calcWidth(
-                                                        column,
-                                                        column.maxWidth
-                                                      ) || "unset",
-                                                  },
-                                                  on: {
-                                                    mouseenter: function (
-                                                      $event
-                                                    ) {
-                                                      return _vm.checkOverflow(
-                                                        $event
-                                                      )
-                                                    },
-                                                    mouseleave: function (
-                                                      $event
-                                                    ) {
-                                                      return _vm.removeTooltip()
-                                                    },
-                                                  },
-                                                },
-                                                [
-                                                  _c(
-                                                    "div",
-                                                    {
-                                                      directives: [
-                                                        {
-                                                          name: "show",
-                                                          rawName: "v-show",
-                                                          value:
-                                                            headerIndex === 0,
-                                                          expression:
-                                                            "headerIndex === 0",
-                                                        },
-                                                      ],
-                                                      class: [
-                                                        "zd-tree-grid-editable-expand",
-                                                        "level" +
-                                                          item.tree__level,
-                                                      ],
-                                                    },
-                                                    [
-                                                      item.tree__children
-                                                        .length > 0
                                                         ? _c(
-                                                            "v-icon",
+                                                            "span",
+                                                            [
+                                                              _c("v-icon", [
+                                                                _vm._v(
+                                                                  _vm._s(
+                                                                    _vm.$getIcon(
+                                                                      column.formatterByRow(
+                                                                        item,
+                                                                        cellProps
+                                                                      )
+                                                                    )
+                                                                  )
+                                                                ),
+                                                              ]),
+                                                            ],
+                                                            1
+                                                          )
+                                                        : _c(
+                                                            "span",
                                                             {
-                                                              class: {
-                                                                opened:
-                                                                  item.tree__opened,
-                                                              },
-                                                              attrs: {
-                                                                tabindex: "-1",
+                                                              directives: [
+                                                                {
+                                                                  name: "show",
+                                                                  rawName:
+                                                                    "v-show",
+                                                                  value:
+                                                                    !column.loading,
+                                                                  expression:
+                                                                    "!column.loading",
+                                                                },
+                                                              ],
+                                                              class: [
+                                                                "zd-table-cell-text",
+                                                                {
+                                                                  "zd-table-cell-text-editable":
+                                                                    Object.assign(
+                                                                      {},
+                                                                      column,
+                                                                      cellProps
+                                                                    ).editable,
+                                                                  "overflow-hidden":
+                                                                    column.overflow ===
+                                                                    "hidden",
+                                                                  "overflow-wrap":
+                                                                    column.overflow ===
+                                                                    "wrap",
+                                                                },
+                                                                !isNaN(
+                                                                  column.overflow
+                                                                )
+                                                                  ? "overflow-clamp overflow-clamp-" +
+                                                                    column.overflow
+                                                                  : "",
+                                                              ],
+                                                              style: {
+                                                                width:
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.maxWidth ||
+                                                                      column.minWidth
+                                                                  ) || "unset",
+                                                                "min-width":
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.minWidth
+                                                                  ) || "unset",
+                                                                "max-width":
+                                                                  _vm.calcWidth(
+                                                                    column,
+                                                                    column.maxWidth
+                                                                  ) || "unset",
                                                               },
                                                               on: {
-                                                                click:
+                                                                mouseenter:
                                                                   function (
                                                                     $event
                                                                   ) {
-                                                                    return _vm.instance.toggleExpand(
-                                                                      item,
-                                                                      index
+                                                                    return _vm.checkOverflow(
+                                                                      $event
                                                                     )
                                                                   },
+                                                                mouseleave:
+                                                                  function (
+                                                                    $event
+                                                                  ) {
+                                                                    return _vm.removeTooltip()
+                                                                  },
                                                               },
                                                             },
                                                             [
-                                                              _vm._v(
-                                                                "\n                    " +
-                                                                  _vm._s(
-                                                                    _vm.$getIcon(
-                                                                      "chevronRight"
-                                                                    )
-                                                                  ) +
-                                                                  "\n                  "
-                                                              ),
+                                                              _c("span", {
+                                                                key: item.tree__searched
+                                                                  ? "a"
+                                                                  : "b",
+                                                                domProps: {
+                                                                  innerHTML:
+                                                                    _vm._s(
+                                                                      _vm.formatSearchResult(
+                                                                        column.formatterByRow(
+                                                                          item,
+                                                                          cellProps
+                                                                        )
+                                                                      )
+                                                                    ),
+                                                                },
+                                                              }),
                                                             ]
-                                                          )
-                                                        : _vm._e(),
-                                                    ],
-                                                    1
+                                                          ),
+                                                    ]
                                                   ),
-                                                  _vm._v(" "),
-                                                  _c("span", {
-                                                    key: item.tree__searched
-                                                      ? "a"
-                                                      : "b",
-                                                    domProps: {
-                                                      innerHTML: _vm._s(
-                                                        _vm.formatSearchResult(
-                                                          column.formatterByRow(
-                                                            item,
-                                                            cellProps
-                                                          )
-                                                        )
-                                                      ),
-                                                    },
-                                                  }),
-                                                ]
-                                              ),
+                                            ]
+                                          ),
                                         ],
                                         1
                                       ),
@@ -59780,34 +60427,92 @@ var __vue_render__ = function () {
                                             },
                                           },
                                         },
-                                        _vm._l(
-                                          column.childrenProps,
-                                          function (child) {
-                                            return _c(
-                                              child.component,
-                                              _vm._b(
+                                        [
+                                          _c(
+                                            "div",
+                                            {
+                                              directives: [
                                                 {
-                                                  key:
-                                                    child.name +
-                                                    _vm.rowKey(item),
-                                                  tag: "component",
+                                                  name: "show",
+                                                  rawName: "v-show",
+                                                  value: headerIndex === 0,
+                                                  expression:
+                                                    "headerIndex === 0",
                                                 },
-                                                "component",
-                                                Object.assign(
-                                                  {},
-                                                  child,
-                                                  _vm.instance.getActionComponent(
-                                                    child,
-                                                    column,
-                                                    item
+                                              ],
+                                              class: [
+                                                "zd-tree-grid-expand",
+                                                "level" + item.tree__level,
+                                              ],
+                                            },
+                                            [
+                                              (item.tree__children || [])
+                                                .length > 0
+                                                ? _c(
+                                                    "v-icon",
+                                                    {
+                                                      class: {
+                                                        opened:
+                                                          item.tree__opened,
+                                                      },
+                                                      attrs: { tabindex: "-1" },
+                                                      on: {
+                                                        click: function (
+                                                          $event
+                                                        ) {
+                                                          return _vm.instance.toggleExpand(
+                                                            item,
+                                                            index
+                                                          )
+                                                        },
+                                                      },
+                                                    },
+                                                    [
+                                                      _vm._v(
+                                                        "\n                  " +
+                                                          _vm._s(
+                                                            _vm.$getIcon(
+                                                              "chevronRight"
+                                                            )
+                                                          ) +
+                                                          "\n                "
+                                                      ),
+                                                    ]
                                                   )
-                                                ),
-                                                false
+                                                : _vm._e(),
+                                            ],
+                                            1
+                                          ),
+                                          _vm._v(" "),
+                                          _vm._l(
+                                            column.childrenProps,
+                                            function (child) {
+                                              return _c(
+                                                child.component,
+                                                _vm._b(
+                                                  {
+                                                    key:
+                                                      child.name +
+                                                      _vm.rowKey(item),
+                                                    tag: "component",
+                                                  },
+                                                  "component",
+                                                  Object.assign(
+                                                    {},
+                                                    child,
+                                                    _vm.instance.getActionComponent(
+                                                      child,
+                                                      column,
+                                                      item
+                                                    )
+                                                  ),
+                                                  false
+                                                )
                                               )
-                                            )
-                                          }
-                                        ),
-                                        1
+                                            }
+                                          ),
+                                        ],
+                                        2
                                       ),
                                     ]
                                   : _vm._e(),
@@ -59912,8 +60617,8 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-3cea1c94_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-3cea1c94_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-7871e6ca_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  justify-content: space-between;\n  gap: 1rem;\n}\n.zd-grid-div-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n@media screen and (max-width: 425px) {\n.zd-grid-footer {\n    flex-direction: column;\n    justify-content: center;\n}\n.zd-grid-div-footer {\n    width: 100%;\n}\n.zd-grid .zd-iterable-pagination {\n    justify-content: space-evenly;\n}\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__progress {\n  position: sticky;\n  top: 24px;\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-7871e6ca_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-tree-grid-editable-cell-wrapper, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-tree-grid-editable-cell-wrapper {\n  display: flex;\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  width: 100%;\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 */
@@ -60097,6 +60802,23 @@ var styleObjectPlugin = (style) => {
     return objectStyle;
 };
 
+/**
+ * Register an observer that calls `callback` when the `element` becomes visible
+ */
+var onVisiblePlugin = (element, callback, root) => {
+    const options = {
+        root,
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.intersectionRatio > 0)
+                callback();
+        });
+    }, options);
+    observer.observe(element);
+    return observer;
+};
+
 // tslint:disable: variable-name
 const VueTreeSelect = require('@zeedhi/zd-vue-treeselect');
 const Hooper = require('hooper');
@@ -60233,6 +60955,8 @@ const Zeedhi = {
         Vue.prototype.$doubleClick = doubleClickPlugin;
         // isMobile
         Vue.prototype.$isMobile = isMobilePlugin;
+        // onVisible
+        Vue.prototype.$onVisible = onVisiblePlugin;
         // isDark
         Vue.prototype.$isDark = isDarkPlugin;
         // isLight