@zeedhi/vuetify 1.79.0 → 1.80.0

package/dist/zd-vuetify.esm.js

@@ -7,7 +7,7 @@ import Sortable from 'sortablejs';
 import 'hooper/dist/hooper.css';
 import '@zeedhi/zd-vue-treeselect/dist/vue-treeselect.css';
 import Vue from 'vue';
-import { Prop, Component as Component$1, Watch } from 'vue-property-decorator';
+import { Prop, Component as Component$1, Watch, Vue as Vue$1 } from 'vue-property-decorator';
 import { Component, AlertService, ComponentRender, ApexChart, Badge, Breadcrumbs, Button, ButtonGroup as ButtonGroup$1, Card, Carousel, Input, Form, Toggleable as Toggleable$1, Checkbox, CheckboxMultiple, Chip, CodeEditor, Col, CollapseCard, Container, TextInput, Number as Number$1, AutoNumeric, Currency, Dashboard, Date as Date$1, DateRange, DialogService, Divider, Dropdown, FileInput, Footer, ChildNotFoundError, Frame, FramePage, Iterable, Grid, GridEditable, Header, GridColumn, Column, Icon, Image as Image$1, Increment, IterableComponentRender, IterableColumnsButton, IterablePageComponent, IterablePagination, Select, IterablePageSize, IterablePageInfo, List, ListItem, ListGroup, Loading, LoadingService, Login, LoginButton, MasterDetail, Menu, MenuLink, MenuGroup, MenuButton, MenuSeparator, ModalService, ModalCloseButton, Month, Password, Progress, Radio, RangeSlider, Row as Row$1, Search, SelectableList, SelectMultiple, SelectTree, SelectTreeMultiple, SpeedDial, Steppers, SvgMap, Switch, Table, Tabs, Tag, Text, Textarea, Time, Tooltip, Tree, TreeGrid, TreeGridEditable, Icons as Icons$1 } from '@zeedhi/common';
 import Component$2, { createDecorator } from 'vue-class-component';
 import Prism$1 from 'prismjs';
@@ -16819,7 +16819,7 @@ const BaseSlideGroup = mixins(BaseItemGroup, Mobile).extend({
   }
 
 });
-BaseSlideGroup.extend({
+var VSlideGroup = BaseSlideGroup.extend({
   name: 'v-slide-group',
 
   provide() {
@@ -26042,7 +26042,7 @@ var VSkeletonLoader = mixins(Elevatable, Measurable, Themeable).extend({
 });
 
 // Extensions
-mixins(BaseItem, factory$1('slideGroup')
+var VSlideItem = mixins(BaseItem, factory$1('slideGroup')
 /* @vue/component */
 ).extend({
   name: 'v-slide-item'
@@ -38194,15 +38194,35 @@ let ZdApexChart = class ZdApexChart extends ZdComponentRender$1 {
     constructor() {
         super(...arguments);
         this.instanceType = ApexChart;
+        this.breakpoints = [];
     }
     mounted() {
+        var _a, _b;
         this.setApexChartTheme();
-        const updateFn = (options) => this.$refs.instance.chart.updateOptions(options, false, true, true, true);
+        const updateFn = this.updateChart;
         this.instance.setViewUpdate(updateFn);
         this.instance.setViewGetIconHTML((icon) => IconRenderer.getIcon(icon, this.$root.$options.vuetify));
         if (this.instance.fillHeight) {
             setFillHeight(this.$el);
         }
+        this.defaultOptions = Object.assign({}, this.$refs.instance.chart.w.config);
+        this.breakpoints = ((_b = (_a = this.instance.options) === null || _a === void 0 ? void 0 : _a.parentResponsive) === null || _b === void 0 ? void 0 : _b.sort((a, b) => a.breakpoint - b.breakpoint)) || [];
+        this.apexChartContainer = this.$refs.chartContainer;
+        if (this.breakpoints.length) {
+            this.resizeObserver = new ResizeObserver(this.handleResize);
+            this.resizeObserver.observe(this.apexChartContainer);
+        }
+    }
+    beforeDestroy() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    updateChart(options) {
+        return new Promise((resolve) => {
+            const { chart } = this.$refs.instance;
+            chart.w.globals.selectedDataPoints = [];
+            resolve(chart.updateOptions(options, false, true, true, true));
+        });
     }
     setApexChartTheme() {
         let theme = '';
@@ -38219,6 +38239,20 @@ let ZdApexChart = class ZdApexChart extends ZdComponentRender$1 {
             } });
         this.instance.options = newOptions;
     }
+    handleResize() {
+        if (!this.breakpoints.length)
+            return;
+        const matchedOptions = this.breakpoints.find((bp) => this.apexChartContainer.clientWidth <= bp.breakpoint);
+        if (matchedOptions) {
+            this.instance.updateChart(matchedOptions.options);
+        }
+        else if (this.instance.options !== this.defaultOptions) {
+            this.instance.updateChart(this.defaultOptions);
+        }
+    }
+    drillUp() {
+        this.instance.drillUp();
+    }
 };
 __decorate([
     PropWatch({ type: String, default: 'line' }),
@@ -38288,6 +38322,7 @@ var __vue_render__$1t = function () {
   return _c(
     "div",
     {
+      ref: "chartContainer",
       staticClass: "apexcharts-container",
       style: {
         height: _vm.$formatSize(_vm.instance.height),
@@ -38313,8 +38348,11 @@ var __vue_render__$1t = function () {
         class: [
           "zd-apex-chart",
           _vm.instance.cssClass,
-          { "theme--dark": _vm.$isDark(this) },
-          { "theme--light": _vm.$isLight(this) },
+          {
+            "theme--dark": _vm.$isDark(this),
+            "theme--light": _vm.$isLight(this),
+            "zd-apex-chart-drilled": _vm.instance.drillHistory.length > 0,
+          },
         ],
         style: _vm.instance.cssStyle,
         attrs: {
@@ -38334,6 +38372,26 @@ var __vue_render__$1t = function () {
         },
       }),
       _vm._v(" "),
+      _vm.instance.drillHistory.length > 0
+        ? _c(
+            "zd-button",
+            _vm._b(
+              {
+                attrs: { name: "apexcharts-drill-button" },
+                on: { click: _vm.drillUp },
+              },
+              "zd-button",
+              {
+                cssClass: "zd-apex-charts-drill-button",
+                icon: true,
+                iconName: "arrowLeft",
+                small: true,
+              },
+              false
+            )
+          )
+        : _vm._e(),
+      _vm._v(" "),
       _c(
         "v-overlay",
         {
@@ -38361,7 +38419,7 @@ __vue_render__$1t._withStripped = true;
   /* style */
   const __vue_inject_styles__$1t = function (inject) {
     if (!inject) return
-    inject("data-v-5bef80a8_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  position: relative;\n  overflow: hidden !important;\n}", map: undefined, media: undefined });
+    inject("data-v-51426e9c_0", { source: ".zd-apex-chart.zd-apex-chart-drilled svg text.apexcharts-title-text {\n  transform: translateX(20px);\n}\n.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  position: relative;\n  overflow: hidden !important;\n}\n.apexcharts-container .zd-apex-charts-drill-button {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -41531,6 +41589,11 @@ let ZdTextInput = class ZdTextInput extends ZdInput$1 {
         this.instance.blur(event, this.$el);
         this.setPlaceholder();
     }
+    setBlur() {
+        Vue$1.nextTick(() => {
+            this.$el.getElementsByTagName('input')[0].blur();
+        });
+    }
     getIconClickEvents() {
         const events = {};
         if (this.instance.events.appendIconClick) {
@@ -42522,20 +42585,23 @@ let ZdDate = class ZdDate extends __vue_component__$1f {
         this.instance.selectDate(date, event, this.$el);
     }
     getAllowedDates(date) {
+        const parsedDate = this.instance.parseISODateValue(date);
         if (typeof this.instance.allowedDates === 'function') {
-            return this.instance.allowedDates(date);
+            return this.instance.allowedDates(parsedDate);
         }
         if (typeof this.instance.allowedDates === 'undefined') {
             return true;
         }
-        return this.instance.allowedDates.indexOf(date) !== -1;
+        return this.instance.allowedDates.indexOf(parsedDate) !== -1;
     }
     isPrintableKey(key) {
         return !!key && key.length === 1;
     }
     onChangeDatePicker() {
         const textInput = this.$refs.textInputInstance.$children[0];
-        this.instance.showDatePicker = false;
+        if (!this.$isMobile()) {
+            this.instance.showDatePicker = false;
+        }
         textInput.validate(false);
     }
     setFocus(selectAll = false) {
@@ -42669,6 +42735,14 @@ __decorate([
     PropWatch({ type: String, default: '' }),
     __metadata("design:type", String)
 ], ZdDate.prototype, "helperValue", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' }),
+    __metadata("design:type", String)
+], ZdDate.prototype, "max", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' }),
+    __metadata("design:type", String)
+], ZdDate.prototype, "min", void 0);
 ZdDate = __decorate([
     Component$1
 ], ZdDate);
@@ -42749,54 +42823,131 @@ var __vue_render__$1b = function () {
         },
         [
           _vm._v(" "),
-          _c(
-            "v-date-picker",
-            _vm._b(
-              {
-                directives: [
-                  {
-                    name: "show",
-                    rawName: "v-show",
-                    value: _vm.instance.isVisible,
-                    expression: "instance.isVisible",
-                  },
-                ],
-                ref: "picker",
-                attrs: { "no-title": "" },
-                on: {
-                  "hook:mounted": _vm.pickerMounted,
-                  "hook:destroyed": _vm.pickerDestroyed,
-                  "click:date": _vm.onSelectDate,
-                  change: function ($event) {
-                    return _vm.onChangeDatePicker()
+          !_vm.instance.readonly
+            ? _c(
+                _vm.$isMobile() ? "v-dialog" : "span",
+                {
+                  tag: "component",
+                  attrs: {
+                    width: "290px",
+                    persistent: "",
+                    "content-class": "zd-mx-0",
                   },
-                },
-                model: {
-                  value: _vm.instance.isoValue,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.instance, "isoValue", $$v);
+                  model: {
+                    value: _vm.instance.showDatePicker,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.instance, "showDatePicker", $$v);
+                    },
+                    expression: "instance.showDatePicker",
                   },
-                  expression: "instance.isoValue",
                 },
-              },
-              "v-date-picker",
-              {
-                allowedDates: _vm.getAllowedDates,
-                color: _vm.instance.color,
-                dark: _vm.instance.dark,
-                firstDayOfWeek: _vm.instance.firstDayOfWeek,
-                fullWidth: _vm.instance.fullWidth,
-                light: _vm.instance.light,
-                locale: _vm.instance.locale,
-                scrollable: _vm.instance.scrollable,
-                showDatePicker: _vm.instance.showDatePicker,
-                showWeek: _vm.instance.showWeek,
-                type: _vm.instance.pickerType,
-                width: _vm.instance.width,
-              },
-              false
-            )
-          ),
+                [
+                  _c(
+                    "v-date-picker",
+                    _vm._b(
+                      {
+                        ref: "picker",
+                        attrs: { "no-title": !_vm.$isMobile() },
+                        on: {
+                          "hook:mounted": _vm.pickerMounted,
+                          "hook:destroyed": _vm.pickerDestroyed,
+                          "click:date": _vm.onSelectDate,
+                          change: function ($event) {
+                            return _vm.onChangeDatePicker()
+                          },
+                        },
+                        model: {
+                          value: _vm.instance.isoValue,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.instance, "isoValue", $$v);
+                          },
+                          expression: "instance.isoValue",
+                        },
+                      },
+                      "v-date-picker",
+                      {
+                        allowedDates: _vm.getAllowedDates,
+                        color: _vm.instance.color,
+                        dark: _vm.instance.dark,
+                        firstDayOfWeek: _vm.instance.firstDayOfWeek,
+                        fullWidth: _vm.instance.fullWidth,
+                        light: _vm.instance.light,
+                        locale: _vm.instance.locale,
+                        scrollable: _vm.instance.scrollable,
+                        showDatePicker: _vm.instance.showDatePicker,
+                        showWeek: _vm.instance.showWeek,
+                        type: _vm.instance.pickerType,
+                        width: _vm.$isMobile() ? "290px" : _vm.instance.width,
+                        max: _vm.instance.formatISODateValue(_vm.instance.max),
+                        min: _vm.instance.formatISODateValue(_vm.instance.min),
+                      },
+                      false
+                    ),
+                    [
+                      _vm.$isMobile()
+                        ? _c(
+                            "span",
+                            [
+                              _vm.$isMobile()
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-done-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "OK",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.showDatePicker = false;
+                                            _vm.setBlur();
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
+                              _vm.$isMobile() && _vm.instance.clearable
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-clear-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "CLEAR",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.isoValue = null;
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                            ],
+                            1
+                          )
+                        : _vm._e(),
+                    ]
+                  ),
+                ],
+                1
+              )
+            : _vm._e(),
         ],
         1
       ),
@@ -42847,7 +42998,7 @@ __vue_render__$1b._withStripped = true;
   /* style */
   const __vue_inject_styles__$1b = function (inject) {
     if (!inject) return
-    inject("data-v-3eea2326_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-34d81b8c_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -42955,7 +43106,9 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$1f {
     onChangeDatePicker() {
         const textInput = this.$refs.textInputInstance.$children[0];
         textInput.validate(false);
-        this.instance.showDatePicker = false;
+        if (!this.$isMobile()) {
+            this.instance.showDatePicker = false;
+        }
     }
     setFocus(selectAll = false) {
         const { textInputInstance } = this.$refs;
@@ -43088,6 +43241,14 @@ __decorate([
     PropWatch({ type: [String, Array], default: () => [] }),
     __metadata("design:type", Object)
 ], ZdDateRange.prototype, "value", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' }),
+    __metadata("design:type", String)
+], ZdDateRange.prototype, "max", void 0);
+__decorate([
+    PropWatch({ type: String, default: '' }),
+    __metadata("design:type", String)
+], ZdDateRange.prototype, "min", void 0);
 ZdDateRange = __decorate([
     Component$1
 ], ZdDateRange);
@@ -43168,52 +43329,141 @@ var __vue_render__$1a = function () {
         },
         [
           _vm._v(" "),
-          _c(
-            "v-date-picker",
-            _vm._b(
-              {
-                directives: [
-                  {
-                    name: "show",
-                    rawName: "v-show",
-                    value: _vm.instance.isVisible,
-                    expression: "instance.isVisible",
-                  },
-                ],
-                ref: "picker",
-                attrs: { "no-title": "", range: "" },
-                on: {
-                  "hook:mounted": _vm.pickerMounted,
-                  "hook:destroyed": _vm.pickerDestroyed,
-                  change: function ($event) {
-                    return _vm.onChangeDatePicker()
+          !_vm.instance.readonly
+            ? _c(
+                _vm.$isMobile() ? "v-dialog" : "span",
+                {
+                  tag: "component",
+                  attrs: {
+                    width: "290px",
+                    persistent: "",
+                    "content-class": "zd-mx-0",
                   },
-                },
-                model: {
-                  value: _vm.instance.isoRangeValue,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.instance, "isoRangeValue", $$v);
+                  model: {
+                    value: _vm.instance.showDatePicker,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.instance, "showDatePicker", $$v);
+                    },
+                    expression: "instance.showDatePicker",
                   },
-                  expression: "instance.isoRangeValue",
                 },
-              },
-              "v-date-picker",
-              {
-                color: _vm.instance.color,
-                dark: _vm.instance.dark,
-                firstDayOfWeek: _vm.instance.firstDayOfWeek,
-                fullWidth: _vm.instance.fullWidth,
-                light: _vm.instance.light,
-                locale: _vm.instance.locale,
-                scrollable: _vm.instance.scrollable,
-                showDatePicker: _vm.instance.showDatePicker,
-                showWeek: _vm.instance.showWeek,
-                type: _vm.instance.pickerType,
-                width: _vm.instance.width,
-              },
-              false
-            )
-          ),
+                [
+                  _c(
+                    "v-date-picker",
+                    _vm._b(
+                      {
+                        directives: [
+                          {
+                            name: "show",
+                            rawName: "v-show",
+                            value: _vm.instance.isVisible,
+                            expression: "instance.isVisible",
+                          },
+                        ],
+                        ref: "picker",
+                        attrs: { "no-title": !_vm.$isMobile(), range: "" },
+                        on: {
+                          "hook:mounted": _vm.pickerMounted,
+                          "hook:destroyed": _vm.pickerDestroyed,
+                          change: function ($event) {
+                            return _vm.onChangeDatePicker()
+                          },
+                        },
+                        model: {
+                          value: _vm.instance.isoRangeValue,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.instance, "isoRangeValue", $$v);
+                          },
+                          expression: "instance.isoRangeValue",
+                        },
+                      },
+                      "v-date-picker",
+                      {
+                        color: _vm.instance.color,
+                        dark: _vm.instance.dark,
+                        firstDayOfWeek: _vm.instance.firstDayOfWeek,
+                        fullWidth: _vm.instance.fullWidth,
+                        light: _vm.instance.light,
+                        locale: _vm.instance.locale,
+                        scrollable: _vm.instance.scrollable,
+                        showDatePicker: _vm.instance.showDatePicker,
+                        showWeek: _vm.instance.showWeek,
+                        type: _vm.instance.pickerType,
+                        width: _vm.$isMobile() ? "290px" : _vm.instance.width,
+                        max: _vm.instance.formatISODateRangeValue(
+                          _vm.instance.max
+                        )[0],
+                        min: _vm.instance.formatISODateRangeValue(
+                          _vm.instance.min
+                        )[0],
+                      },
+                      false
+                    ),
+                    [
+                      _vm.$isMobile()
+                        ? _c(
+                            "span",
+                            [
+                              _vm.$isMobile()
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-done-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "OK",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.showDatePicker = false;
+                                            _vm.setBlur();
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
+                              _vm.$isMobile() && _vm.instance.clearable
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-clear-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "CLEAR",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.value = [];
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                            ],
+                            1
+                          )
+                        : _vm._e(),
+                    ]
+                  ),
+                ],
+                1
+              )
+            : _vm._e(),
         ],
         1
       ),
@@ -43265,7 +43515,7 @@ __vue_render__$1a._withStripped = true;
   /* style */
   const __vue_inject_styles__$1a = function (inject) {
     if (!inject) return
-    inject("data-v-7cad0609_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-137a58b0_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -48905,28 +49155,6 @@ let ZdTreeGridCellContent = class ZdTreeGridCellContent extends __vue_component_
         }
         return text;
     }
-    hasShowChevron(row) {
-        if (!this.fieldHasChild)
-            return true;
-        const rowHasChild = row[this.fieldHasChild];
-        let isVisibleChevron = true;
-        switch (rowHasChild) {
-            case '0':
-            case false:
-            case 0:
-                isVisibleChevron = false;
-                break;
-            case '1':
-            case true:
-            case 1:
-                isVisibleChevron = true;
-                break;
-            default:
-                isVisibleChevron = true;
-                break;
-        }
-        return isVisibleChevron;
-    }
     hasShowChevronInTreeGrid(headerIndex, selectable) {
         return headerIndex === 0 || (headerIndex === 1 && selectable);
     }
@@ -48955,14 +49183,14 @@ __decorate([
     Prop({ type: String, required: true }),
     __metadata("design:type", String)
 ], ZdTreeGridCellContent.prototype, "expandClass", void 0);
-__decorate([
-    Prop({ type: String, required: true }),
-    __metadata("design:type", String)
-], ZdTreeGridCellContent.prototype, "fieldHasChild", void 0);
 __decorate([
     Prop({ type: Boolean, default: false }),
     __metadata("design:type", Boolean)
 ], ZdTreeGridCellContent.prototype, "hasUsingCellText", void 0);
+__decorate([
+    Prop({ type: Function, required: true }),
+    __metadata("design:type", Function)
+], ZdTreeGridCellContent.prototype, "hasChildOnDemand", void 0);
 ZdTreeGridCellContent = __decorate([
     Component$2
 ], ZdTreeGridCellContent);
@@ -49030,8 +49258,8 @@ var __vue_render__$T = function () {
                         {
                           name: "show",
                           rawName: "v-show",
-                          value: _vm.hasShowChevron(_vm.row),
-                          expression: "hasShowChevron(row)",
+                          value: _vm.hasChildOnDemand(_vm.row),
+                          expression: "hasChildOnDemand(row)",
                         },
                       ],
                       class: { opened: _vm.row.tree__opened },
@@ -49085,7 +49313,7 @@ __vue_render__$T._withStripped = true;
   /* style */
   const __vue_inject_styles__$T = function (inject) {
     if (!inject) return
-    inject("data-v-4f6824ad_0", { source: ".zd-grid-cell-wrapper {\n  display: flex;\n  gap: 0.75rem;\n}\n.zd-grid-cell-align-right {\n  justify-content: end;\n}\n.zd-grid-cell-align-left {\n  justify-content: start;\n}\n.zd-grid-cell-align-center {\n  justify-content: center;\n}", map: undefined, media: undefined });
+    inject("data-v-f6232196_0", { source: ".zd-grid-cell-wrapper {\n  display: flex;\n  gap: 0.75rem;\n}\n.zd-grid-cell-align-right {\n  justify-content: end;\n}\n.zd-grid-cell-align-left {\n  justify-content: start;\n}\n.zd-grid-cell-align-center {\n  justify-content: center;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -49114,28 +49342,6 @@ __vue_render__$T._withStripped = true;
   );
 
 let ZdTreeGridCellActionContent = class ZdTreeGridCellActionContent extends __vue_component__$W {
-    hasShowChevron(row) {
-        if (!this.fieldHasChild)
-            return true;
-        const rowHasChild = row[this.fieldHasChild];
-        let isVisibleChevron = true;
-        switch (rowHasChild) {
-            case '0':
-            case false:
-            case 0:
-                isVisibleChevron = false;
-                break;
-            case '1':
-            case true:
-            case 1:
-                isVisibleChevron = true;
-                break;
-            default:
-                isVisibleChevron = true;
-                break;
-        }
-        return isVisibleChevron;
-    }
     hasShowChevronInTreeGrid(headerIndex, selectable) {
         return headerIndex === 0 || (headerIndex === 1 && selectable);
     }
@@ -49144,10 +49350,6 @@ __decorate([
     Prop({ type: Number, required: true }),
     __metadata("design:type", Number)
 ], ZdTreeGridCellActionContent.prototype, "headerIndex", void 0);
-__decorate([
-    Prop({ type: String, required: true }),
-    __metadata("design:type", String)
-], ZdTreeGridCellActionContent.prototype, "fieldHasChild", void 0);
 __decorate([
     Prop({ type: Boolean, required: true }),
     __metadata("design:type", Boolean)
@@ -49172,6 +49374,10 @@ __decorate([
     Prop({ type: Object, required: true }),
     __metadata("design:type", Object)
 ], ZdTreeGridCellActionContent.prototype, "row", void 0);
+__decorate([
+    Prop({ type: Function, required: true }),
+    __metadata("design:type", Function)
+], ZdTreeGridCellActionContent.prototype, "hasChildOnDemand", void 0);
 ZdTreeGridCellActionContent = __decorate([
     Component$2
 ], ZdTreeGridCellActionContent);
@@ -49243,8 +49449,8 @@ var __vue_render__$S = function () {
                     {
                       name: "show",
                       rawName: "v-show",
-                      value: _vm.hasShowChevron(_vm.row),
-                      expression: "hasShowChevron(row)",
+                      value: _vm.hasChildOnDemand(_vm.row),
+                      expression: "hasChildOnDemand(row)",
                     },
                   ],
                   class: { opened: _vm.row.tree__opened },
@@ -50724,6 +50930,10 @@ __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Boolean)
 ], ZdSelect.prototype, "manualMode", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Boolean)
+], ZdSelect.prototype, "attach", void 0);
 __decorate([
     PropWatch({ type: String, default: 'SEARCH' }),
     __metadata("design:type", String)
@@ -50792,6 +51002,7 @@ var __vue_render__$K = function () {
         _vm.instance.clearable &&
         !_vm.instance.readonly &&
         !_vm.instance.disabled,
+      attach: _vm.instance.attach,
       color: _vm.instance.color,
       dark: _vm.instance.dark,
       disabled: _vm.instance.disabled,
@@ -51035,7 +51246,7 @@ __vue_render__$K._withStripped = true;
   /* style */
   const __vue_inject_styles__$K = function (inject) {
     if (!inject) return
-    inject("data-v-0b97233f_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
+    inject("data-v-4f61cc61_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -53531,7 +53742,7 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         const el = (Array.isArray(ref) ? ref[0].$el : ref === null || ref === void 0 ? void 0 : ref.$el);
         return el || null;
     }
-    registerMousedown(modal) {
+    registerDragEvents(modal) {
         const el = this.getModalEl(modal);
         if (!el)
             return;
@@ -53544,11 +53755,28 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         if (!this.dragHandle)
             return;
         this.dragHandle.addEventListener('mousedown', this.dragStart.bind(this, modal));
+        this.dragHandle.addEventListener('touchstart', this.dragStart.bind(this, modal), { passive: false });
     }
-    unregisterMousedown(modal) {
+    unregisterDragEvents(modal) {
         if (!this.dragHandle)
             return;
         this.dragHandle.removeEventListener('mousedown', this.dragStart.bind(this, modal));
+        this.dragHandle.removeEventListener('touchstart', this.dragStart.bind(this, modal));
+    }
+    isTouchEvent(event) {
+        return 'touches' in event;
+    }
+    getEventCoordinates(event) {
+        if (this.isTouchEvent(event)) {
+            return {
+                x: event.touches[0].clientX,
+                y: event.touches[0].clientY,
+            };
+        }
+        return {
+            x: event.clientX,
+            y: event.clientY,
+        };
     }
     dragStart(modal, event) {
         var _a, _b;
@@ -53556,26 +53784,35 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
             return;
         const dragHandle = (_a = modal.dragHandle) === null || _a === void 0 ? void 0 : _a.replace('.', '');
         const targetElement = event.target;
-        const isDragHandleInvalid = dragHandle && !targetElement.className.includes(dragHandle);
+        const isDragHandleInvalid = dragHandle && !targetElement.classList.contains(dragHandle);
         if (isDragHandleInvalid) {
             return;
         }
         const isEventTargetInvalid = event && event.target && !((_b = event.target
-            .parentElement) === null || _b === void 0 ? void 0 : _b.className.includes(`zd-modal-card-${modal.name}`));
+            .parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains(`zd-modal-card-${modal.name}`));
         const isDragHandleMissing = !dragHandle;
         if (isEventTargetInvalid && isDragHandleMissing) {
             return;
         }
         this.modalDragged = modal;
-        this.x = event.clientX;
-        this.y = event.clientY;
-        document.addEventListener('mousemove', this.dragMove);
-        document.addEventListener('mouseup', this.dragEnd);
+        const { x, y } = this.getEventCoordinates(event);
+        this.x = x;
+        this.y = y;
+        if (this.isTouchEvent(event)) {
+            document.addEventListener('touchmove', this.dragMove, { passive: false });
+            document.addEventListener('touchend', this.dragEnd);
+        }
+        else {
+            document.addEventListener('mousemove', this.dragMove);
+            document.addEventListener('mouseup', this.dragEnd);
+        }
     }
     dragEnd() {
         this.modalDragged = undefined;
         document.removeEventListener('mousemove', this.dragMove);
         document.removeEventListener('mouseup', this.dragEnd);
+        document.removeEventListener('touchmove', this.dragMove);
+        document.removeEventListener('touchend', this.dragEnd);
     }
     dragMove(event) {
         var _a;
@@ -53585,8 +53822,9 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
         if (!modalEl)
             return;
         event.preventDefault();
-        const dy = event.clientY - this.y;
-        const dx = event.clientX - this.x;
+        const { x, y } = this.getEventCoordinates(event);
+        const dy = y - this.y;
+        const dx = x - this.x;
         const toNum = (str) => Number(str.slice(0, -2));
         const toPx = (num) => `${num}px`;
         const threshold = 1;
@@ -53601,8 +53839,8 @@ let ZdModal = class ZdModal extends ZdComponent$1 {
                 && (window.innerWidth / 2) - 2 * (left + dx) >= 0) {
                 modalEl.style.left = toPx(left + dx);
             }
-            this.x = event.clientX;
-            this.y = event.clientY;
+            this.x = x;
+            this.y = y;
         }
     }
     getContentClass(modal) {
@@ -53696,10 +53934,10 @@ var __vue_render__$u = function () {
               style: modal.cssStyle,
               on: {
                 "hook:mounted": function ($event) {
-                  modal.draggable && _vm.registerMousedown(modal);
+                  modal.draggable && _vm.registerDragEvents(modal);
                 },
                 "hook:destroyed": function ($event) {
-                  return _vm.unregisterMousedown(modal)
+                  return _vm.unregisterDragEvents(modal)
                 },
               },
             },
@@ -53763,7 +54001,7 @@ __vue_render__$u._withStripped = true;
   /* style */
   const __vue_inject_styles__$u = function (inject) {
     if (!inject) return
-    inject("data-v-176ef89b_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
+    inject("data-v-12867ee3_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n  cursor: default;\n}\n.zd-modal-flex {\n  width: 100%;\n}\n.zd-modal-draggable {\n  position: relative;\n}\n.zd-modal-draggable-handle {\n  cursor: grab;\n  cursor: -moz-grab;\n  cursor: -webkit-grab;\n}\n.zd-modal-draggable-handle:active {\n  cursor: grabbing;\n  cursor: -moz-grabbing;\n  cursor: -webkit-grabbing;\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-title {\n  padding: var(--zd-default-padding);\n  padding-bottom: 0px;\n  font-size: var(--zd-font-title-size);\n  font-weight: var(--zd-font-title-weight);\n  color: var(--zd-font-color);\n}\n.zd-modal-content > .zd-modal-card > .zd-modal-card-text {\n  padding: var(--zd-default-padding);\n  display: flex;\n  flex: 1 1 auto;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -55813,8 +56051,18 @@ let ZdSelectTree = class ZdSelectTree extends ZdTextInput$1 {
         }
     }
     mounted() {
+        if (this.instance.parent instanceof Form && (this === null || this === void 0 ? void 0 : this.$parent)) {
+            this.$parent.register(this);
+        }
+        this.instance.setViewResetValidation(this.resetValidation);
         this.addListeners();
     }
+    validate() {
+        return this.instance.validate();
+    }
+    resetValidation() {
+        this.instance.resetValidation();
+    }
     focus(event) {
         this.focused = true;
         this.instance.validationError = '';
@@ -55917,6 +56165,10 @@ __decorate([
     Prop({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], ZdSelectTree.prototype, "fetchOnDemand", void 0);
+__decorate([
+    Prop({ type: [String], default: '' }),
+    __metadata("design:type", String)
+], ZdSelectTree.prototype, "fieldHasChild", void 0);
 __decorate([
     Prop({ type: [Number, String], default: undefined }),
     __metadata("design:type", Object)
@@ -57515,6 +57767,9 @@ let ZdTabs = class ZdTabs extends ZdComponentRender$1 {
         if (this.instance.fillHeight) {
             setFillHeight(this.$el);
         }
+        I18n.registerChangeListener(() => {
+            this.$refs.tabs.callSlider();
+        });
     }
 };
 __decorate([
@@ -57537,6 +57792,10 @@ __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
     __metadata("design:type", Object)
 ], ZdTabs.prototype, "fillHeight", void 0);
+__decorate([
+    PropWatch({ type: [Boolean, String], default: false }),
+    __metadata("design:type", Boolean)
+], ZdTabs.prototype, "touchless", void 0);
 __decorate([
     Prop({ type: Array, default: () => [] }),
     __metadata("design:type", Array)
@@ -57581,6 +57840,7 @@ var __vue_render__$c = function () {
       _c(
         "v-tabs",
         {
+          ref: "tabs",
           attrs: {
             "show-arrows": "",
             dark: _vm.instance.dark,
@@ -57643,7 +57903,11 @@ var __vue_render__$c = function () {
       _c(
         "v-tabs-items",
         {
-          attrs: { dark: _vm.instance.dark, light: _vm.instance.light },
+          attrs: {
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+            touchless: _vm.instance.touchless,
+          },
           model: {
             value: _vm.instance.activeTab,
             callback: function ($$v) {
@@ -57699,11 +57963,11 @@ __vue_render__$c._withStripped = true;
   /* style */
   const __vue_inject_styles__$c = function (inject) {
     if (!inject) return
-    inject("data-v-96a6dab6_0", { source: ".zd-tabs[data-v-96a6dab6] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar,\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-96a6dab6]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-96a6dab6]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+    inject("data-v-f3ce5dca_0", { source: ".zd-tabs[data-v-f3ce5dca] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-bar,\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-f3ce5dca]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-f3ce5dca]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-f3ce5dca]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$c = "data-v-96a6dab6";
+  const __vue_scope_id__$c = "data-v-f3ce5dca";
   /* module identifier */
   const __vue_module_identifier__$c = undefined;
   /* functional template */
@@ -58071,6 +58335,29 @@ let ZdText = class ZdText extends ZdComponent$1 {
     constructor() {
         super(...arguments);
         this.instanceType = Text;
+        this.parentWidth = 0;
+    }
+    handleResize() {
+        if (this.parentWidth && this.textResize.fontSize) {
+            const proportion = this.parentElement.clientWidth / this.parentWidth;
+            const MIN = this.textResize.min || 0;
+            const MAX = this.textResize.max || Infinity;
+            this.$el.style.fontSize = `${Math.min(Math.max(this.textResize.fontSize * proportion, MIN), MAX)}px`;
+        }
+    }
+    mounted() {
+        var _a;
+        this.parentElement = this.$el.parentElement;
+        if (this.instance.textResize) {
+            this.$el.style.fontSize = `${this.instance.textResize.fontSize}px`;
+            this.parentWidth = ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.clientWidth) || 0;
+            this.resizeObserver = new ResizeObserver(this.handleResize);
+            this.resizeObserver.observe(this.parentElement);
+        }
+    }
+    destroyed() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
 };
 __decorate([
@@ -58085,6 +58372,10 @@ __decorate([
     PropWatch({ type: String, default: 'p' }),
     __metadata("design:type", String)
 ], ZdText.prototype, "tag", void 0);
+__decorate([
+    PropWatch({ type: Object, default: undefined }),
+    __metadata("design:type", Object)
+], ZdText.prototype, "textResize", void 0);
 ZdText = __decorate([
     Component$1({
         components: { ZdRender },
@@ -58486,7 +58777,9 @@ let ZdTime = class ZdTime extends __vue_component__$1f {
     mounted() {
         const textInput = this.$refs.textInputInstance.$children[0].$el.getElementsByTagName('input')[0];
         textInput.addEventListener('blur', () => {
-            this.instance.showTimePicker = false;
+            if (!this.$isMobile()) {
+                this.instance.showTimePicker = false;
+            }
         });
         if (this.$isMobile()) {
             this.setMobileProps(textInput);
@@ -58664,136 +58957,200 @@ var __vue_render__$6 = function () {
     "div",
     { staticClass: "zd-time", attrs: { id: _vm.instance.name } },
     [
-      !_vm.$isMobile()
-        ? [
-            _c(
-              "v-menu",
-              {
-                directives: [
-                  {
-                    name: "show",
-                    rawName: "v-show",
-                    value: _vm.instance.isVisible,
-                    expression: "instance.isVisible",
+      _c(
+        "v-menu",
+        {
+          directives: [
+            {
+              name: "show",
+              rawName: "v-show",
+              value: _vm.instance.isVisible,
+              expression: "instance.isVisible",
+            },
+          ],
+          ref: "timeMenu",
+          attrs: {
+            "offset-overflow": "",
+            "offset-y": "",
+            "input-activator": "",
+            "min-width": "290px",
+            transition: "scale-transition",
+            dark: _vm.instance.dark,
+            light: _vm.instance.light,
+            "close-on-content-click": false,
+            disabled: _vm.instance.disabled || _vm.instance.readonly,
+          },
+          scopedSlots: _vm._u([
+            {
+              key: "activator",
+              fn: function (ref) {
+                var on = ref.on;
+                return [
+                  _c("zd-text-input", {
+                    ref: "textInputInstance",
+                    attrs: {
+                      name: _vm.instance.name + "_text-input",
+                      mask: _vm.getTimeMask,
+                      "instance-object": _vm.instance,
+                      events: _vm.getEvents(on),
+                      autofill: false,
+                    },
+                    on: { input: _vm.input },
+                  }),
+                ]
+              },
+            },
+          ]),
+          model: {
+            value: _vm.instance.showTimePicker,
+            callback: function ($$v) {
+              _vm.$set(_vm.instance, "showTimePicker", $$v);
+            },
+            expression: "instance.showTimePicker",
+          },
+        },
+        [
+          _vm._v(" "),
+          !_vm.instance.readonly
+            ? _c(
+                _vm.$isMobile() ? "v-dialog" : "span",
+                {
+                  tag: "component",
+                  attrs: {
+                    width: "290px",
+                    persistent: "",
+                    "content-class": "zd-mx-0",
                   },
-                ],
-                ref: "timeMenu",
-                attrs: {
-                  "offset-overflow": "",
-                  "offset-y": "",
-                  "input-activator": "",
-                  "min-width": "290px",
-                  transition: "scale-transition",
-                  dark: _vm.instance.dark,
-                  light: _vm.instance.light,
-                  "close-on-content-click": false,
-                  disabled: _vm.instance.disabled || _vm.instance.readonly,
-                },
-                scopedSlots: _vm._u(
-                  [
-                    {
-                      key: "activator",
-                      fn: function (ref) {
-                        var on = ref.on;
-                        return [
-                          _c("zd-text-input", {
-                            ref: "textInputInstance",
-                            attrs: {
-                              name: _vm.instance.name + "_text-input",
-                              mask: _vm.getTimeMask,
-                              "instance-object": _vm.instance,
-                              events: _vm.getEvents(on),
-                              autofill: false,
-                            },
-                            on: { input: _vm.input },
-                          }),
-                        ]
-                      },
+                  model: {
+                    value: _vm.instance.showTimePicker,
+                    callback: function ($$v) {
+                      _vm.$set(_vm.instance, "showTimePicker", $$v);
                     },
-                  ],
-                  null,
-                  false,
-                  386348313
-                ),
-                model: {
-                  value: _vm.instance.showTimePicker,
-                  callback: function ($$v) {
-                    _vm.$set(_vm.instance, "showTimePicker", $$v);
+                    expression: "instance.showTimePicker",
                   },
-                  expression: "instance.showTimePicker",
                 },
-              },
-              [
-                _vm._v(" "),
-                _c(
-                  "v-time-picker",
-                  _vm._b(
-                    {
-                      directives: [
-                        {
-                          name: "show",
-                          rawName: "v-show",
-                          value: _vm.instance.isVisible,
-                          expression: "instance.isVisible",
+                [
+                  _c(
+                    "v-time-picker",
+                    _vm._b(
+                      {
+                        directives: [
+                          {
+                            name: "show",
+                            rawName: "v-show",
+                            value: _vm.instance.isVisible,
+                            expression: "instance.isVisible",
+                          },
+                        ],
+                        ref: "picker",
+                        attrs: {
+                          "allowed-hours": _vm.instance.allowedHours,
+                          "allowed-minutes": _vm.instance.allowedMinutes,
+                          "allowed-seconds": _vm.instance.allowedSeconds,
+                          max: _vm.pickerMaxTime,
+                          min: _vm.pickerMinTime,
+                          name: _vm.instance.name,
+                          dark: _vm.instance.dark,
+                          light: _vm.instance.light,
                         },
-                      ],
-                      ref: "picker",
-                      attrs: {
-                        "allowed-hours": _vm.instance.allowedHours,
-                        "allowed-minutes": _vm.instance.allowedMinutes,
-                        "allowed-seconds": _vm.instance.allowedSeconds,
-                        max: _vm.pickerMaxTime,
-                        min: _vm.pickerMinTime,
-                        name: _vm.instance.name,
-                        dark: _vm.instance.dark,
-                        light: _vm.instance.light,
-                      },
-                      on: {
-                        "hook:mounted": _vm.pickerMounted,
-                        "hook:destroyed": _vm.pickerDestroyed,
-                        "click:time": _vm.onSelectTime,
-                        change: function ($event) {
-                          return _vm.onChangeTimePicker()
+                        on: {
+                          "hook:mounted": _vm.pickerMounted,
+                          "hook:destroyed": _vm.pickerDestroyed,
+                          "click:time": _vm.onSelectTime,
+                          change: function ($event) {
+                            return _vm.onChangeTimePicker()
+                          },
                         },
-                      },
-                      model: {
-                        value: _vm.instance.isoValue,
-                        callback: function ($$v) {
-                          _vm.$set(_vm.instance, "isoValue", $$v);
+                        model: {
+                          value: _vm.instance.isoValue,
+                          callback: function ($$v) {
+                            _vm.$set(_vm.instance, "isoValue", $$v);
+                          },
+                          expression: "instance.isoValue",
                         },
-                        expression: "instance.isoValue",
                       },
-                    },
-                    "v-time-picker",
-                    {
-                      ampmInTitle: _vm.instance.ampmInTitle,
-                      color: _vm.instance.color,
-                      format: _vm.instance.timeFormat,
-                      fullWidth: _vm.instance.fullWidth,
-                      useSeconds: _vm.instance.useSeconds,
-                      scrollable: _vm.instance.scrollable,
-                    },
-                    false
-                  )
-                ),
-              ],
-              1
-            ),
-          ]
-        : [
-            _c("zd-text-input", {
-              ref: "textInputInstance",
-              attrs: {
-                name: _vm.instance.name + "_text-input",
-                "instance-object": _vm.instance,
-                autofill: false,
-                type: "text",
-                mask: "",
-              },
-            }),
-          ],
+                      "v-time-picker",
+                      {
+                        ampmInTitle: _vm.instance.ampmInTitle,
+                        color: _vm.instance.color,
+                        format: _vm.instance.timeFormat,
+                        fullWidth: _vm.instance.fullWidth,
+                        useSeconds: _vm.instance.useSeconds,
+                        scrollable: _vm.instance.scrollable,
+                        width: _vm.$isMobile() ? "290px" : _vm.instance.width,
+                      },
+                      false
+                    ),
+                    [
+                      _vm.$isMobile()
+                        ? _c(
+                            "span",
+                            [
+                              _vm.$isMobile()
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-done-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "OK",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.showTimePicker = false;
+                                            _vm.setBlur();
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                              _vm._v(" "),
+                              _vm.$isMobile() && _vm.instance.clearable
+                                ? _c(
+                                    "zd-button",
+                                    _vm._b(
+                                      {
+                                        attrs: {
+                                          name:
+                                            _vm.instance.name + "-clear-button",
+                                        },
+                                      },
+                                      "zd-button",
+                                      {
+                                        flat: true,
+                                        label: "CLEAR",
+                                        events: {
+                                          click: function () {
+                                            _vm.instance.isoValue = null;
+                                          },
+                                        },
+                                      },
+                                      false
+                                    )
+                                  )
+                                : _vm._e(),
+                            ],
+                            1
+                          )
+                        : _vm._e(),
+                    ]
+                  ),
+                ],
+                1
+              )
+            : _vm._e(),
+        ],
+        1
+      ),
     ],
-    2
+    1
   )
 };
 var __vue_staticRenderFns__$6 = [];
@@ -58802,7 +59159,7 @@ __vue_render__$6._withStripped = true;
   /* style */
   const __vue_inject_styles__$6 = function (inject) {
     if (!inject) return
-    inject("data-v-21cfb8e4_0", { source: ".zd-time input[type=time] {\n  -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n  display: none;\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
+    inject("data-v-e8f3b86c_0", { source: ".zd-time input[type=time] {\n  -webkit-appearance: none;\n}\n.zd-time input[type=time]::-webkit-inner-spin-button, .zd-time input[type=time]::-webkit-calendar-picker-indicator {\n  display: none;\n  -webkit-appearance: none;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -58963,8 +59320,8 @@ var __vue_render__$5 = function () {
         nudgeRight: _vm.instance.right ? _vm.instance.nudge : undefined,
         nudgeTop: _vm.instance.top ? _vm.instance.nudge : undefined,
         openOnClick: _vm.instance.openOnClick,
-        openOnFocus: _vm.instance.openOnFocus,
-        openOnHover: _vm.instance.openOnHover,
+        openOnFocus: !_vm.$isMobile() && _vm.instance.openOnFocus,
+        openOnHover: !_vm.$isMobile() && _vm.instance.openOnHover,
         right: _vm.instance.right,
         top: _vm.instance.top,
       },
@@ -58979,7 +59336,7 @@ __vue_render__$5._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-043522aa_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-219472aa_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 */
@@ -59840,6 +60197,9 @@ let ZdTreeGrid = class ZdTreeGrid extends ZdGrid$1 {
         }
         this.orderColumnVisibility();
     }
+    hasChildOnDemand(row) {
+        return this.instance.treeDataStructure.hasChildOnDemand(row);
+    }
 };
 __decorate([
     PropWatch({ type: String, default: '' }),
@@ -60527,8 +60887,8 @@ var __vue_render__$1 = function () {
                                                   headerIndex: headerIndex,
                                                   selectable:
                                                     _vm.instance.selectable,
-                                                  fieldHasChild:
-                                                    _vm.instance.fieldHasChild,
+                                                  hasChildOnDemand:
+                                                    _vm.hasChildOnDemand,
                                                   toggleExpand:
                                                     _vm.toggleExpand,
                                                   rowIndex: index,
@@ -60575,8 +60935,8 @@ var __vue_render__$1 = function () {
                                                 rowIndex: index,
                                                 getActionComponent:
                                                   _vm.getActionComponent,
-                                                fieldHasChild:
-                                                  _vm.instance.fieldHasChild,
+                                                hasChildOnDemand:
+                                                  _vm.hasChildOnDemand,
                                                 selectable:
                                                   _vm.instance.selectable,
                                               },
@@ -60695,8 +61055,8 @@ __vue_render__$1._withStripped = true;
   /* style */
   const __vue_inject_styles__$1 = function (inject) {
     if (!inject) return
-    inject("data-v-7742283a_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\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-7742283a_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 24px !important;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\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-259fcf26_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\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-259fcf26_1", { source: ".zd-tree-grid .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n  display: inline-block;\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 24px !important;\n}\n.zd-tree-grid .zd-tree-grid-expand-action {\n  height: 100%;\n  display: inline-grid;\n  justify-content: end;\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 */
@@ -61651,9 +62011,8 @@ var __vue_render__ = function () {
                                                             selectable:
                                                               _vm.instance
                                                                 .selectable,
-                                                            fieldHasChild:
-                                                              _vm.instance
-                                                                .fieldHasChild,
+                                                            hasChildOnDemand:
+                                                              _vm.hasChildOnDemand,
                                                             toggleExpand:
                                                               _vm.toggleExpand,
                                                             rowIndex: index,
@@ -61708,8 +62067,8 @@ var __vue_render__ = function () {
                                                 rowIndex: index,
                                                 getActionComponent:
                                                   _vm.getActionComponent,
-                                                fieldHasChild:
-                                                  _vm.instance.fieldHasChild,
+                                                hasChildOnDemand:
+                                                  _vm.hasChildOnDemand,
                                                 selectable:
                                                   _vm.instance.selectable,
                                               },
@@ -61828,8 +62187,8 @@ __vue_render__._withStripped = true;
   /* style */
   const __vue_inject_styles__ = function (inject) {
     if (!inject) return
-    inject("data-v-171113f1_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\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-171113f1_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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 0.5rem;\n  position: relative;\n  display: block;\n  height: 1.25rem;\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: 0;\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: 0;\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 {\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:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\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  max-height: 22px;\n}", map: undefined, media: undefined });
+    inject("data-v-897ef0f6_0", { source: ".zd-grid {\n  outline: none;\n  display: flex;\n  flex-direction: column;\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  flex: 0 0 auto;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-toolbar .zd-search {\n  max-width: 200px;\n}\n.zd-grid .v-data-table__wrapper {\n  flex: 1 1 auto;\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.text-center .zd-table-header-cell {\n  justify-content: center;\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-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 5;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table thead tr th.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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 td.zd-table-cell.zd-table-fixed-column-action {\n  position: sticky !important;\n  right: 0;\n  z-index: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--light {\n  background: #f7f7f7 !important;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-fixed-column-action.theme--dark {\n  background: #3c3c3c !important;\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: var(--spacing-4) 0 0 0;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  flex: 0 0 auto;\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-897ef0f6_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell .zd-table-cell-text-first {\n  display: inline-flex;\n  width: 100%;\n}\n.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 0.5rem;\n  position: relative;\n  display: block;\n  height: 1.25rem;\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: 0;\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: 0;\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 {\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:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text: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: 23px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 46px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 69px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 92px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 115px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 138px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 161px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 184px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 207px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 230px;\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  max-height: 22px;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -62277,6 +62636,8 @@ const Zeedhi = {
                 VToolbar,
                 VToolbarItems,
                 VSimpleCheckbox,
+                VSlideGroup,
+                VSlideItem,
             },
             directives: {
                 Touch: directives.Touch,