@zeedhi/vuetify 1.79.0 → 1.80.0

package/dist/zd-vuetify.umd.js

@@ -16818,7 +16818,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     }
 
   });
-  BaseSlideGroup.extend({
+  var VSlideGroup = BaseSlideGroup.extend({
     name: 'v-slide-group',
 
     provide() {
@@ -26041,7 +26041,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   });
 
   // Extensions
-  mixins(BaseItem, factory$1('slideGroup')
+  var VSlideItem = mixins(BaseItem, factory$1('slideGroup')
   /* @vue/component */
   ).extend({
     name: 'v-slide-item'
@@ -38193,15 +38193,35 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.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 = '';
@@ -38218,6 +38238,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               } });
           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' }),
@@ -38287,6 +38321,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     return _c(
       "div",
       {
+        ref: "chartContainer",
         staticClass: "apexcharts-container",
         style: {
           height: _vm.$formatSize(_vm.instance.height),
@@ -38312,8 +38347,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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: {
@@ -38333,6 +38371,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
         }),
         _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",
           {
@@ -38360,7 +38418,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -41530,6 +41588,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.instance.blur(event, this.$el);
           this.setPlaceholder();
       }
+      setBlur() {
+          vuePropertyDecorator.Vue.nextTick(() => {
+              this.$el.getElementsByTagName('input')[0].blur();
+          });
+      }
       getIconClickEvents() {
           const events = {};
           if (this.instance.events.appendIconClick) {
@@ -42521,20 +42584,23 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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) {
@@ -42668,6 +42734,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
       vuePropertyDecorator.Component
   ], ZdDate);
@@ -42748,54 +42822,131 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
           [
             _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
         ),
@@ -42846,7 +42997,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -42954,7 +43105,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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;
@@ -43087,6 +43240,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
       vuePropertyDecorator.Component
   ], ZdDateRange);
@@ -43167,52 +43328,141 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           },
           [
             _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
         ),
@@ -43264,7 +43514,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -48904,28 +49154,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
           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);
       }
@@ -48954,14 +49182,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: String, required: true }),
       __metadata("design:type", String)
   ], ZdTreeGridCellContent.prototype, "expandClass", void 0);
-  __decorate([
-      vuePropertyDecorator.Prop({ type: String, required: true }),
-      __metadata("design:type", String)
-  ], ZdTreeGridCellContent.prototype, "fieldHasChild", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Boolean, default: false }),
       __metadata("design:type", Boolean)
   ], ZdTreeGridCellContent.prototype, "hasUsingCellText", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: Function, required: true }),
+      __metadata("design:type", Function)
+  ], ZdTreeGridCellContent.prototype, "hasChildOnDemand", void 0);
   ZdTreeGridCellContent = __decorate([
       Component__default["default"]
   ], ZdTreeGridCellContent);
@@ -49029,8 +49257,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           {
                             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 },
@@ -49084,7 +49312,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -49113,28 +49341,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     );
 
   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);
       }
@@ -49143,10 +49349,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Number, required: true }),
       __metadata("design:type", Number)
   ], ZdTreeGridCellActionContent.prototype, "headerIndex", void 0);
-  __decorate([
-      vuePropertyDecorator.Prop({ type: String, required: true }),
-      __metadata("design:type", String)
-  ], ZdTreeGridCellActionContent.prototype, "fieldHasChild", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: Boolean, required: true }),
       __metadata("design:type", Boolean)
@@ -49171,6 +49373,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: Object, required: true }),
       __metadata("design:type", Object)
   ], ZdTreeGridCellActionContent.prototype, "row", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: Function, required: true }),
+      __metadata("design:type", Function)
+  ], ZdTreeGridCellActionContent.prototype, "hasChildOnDemand", void 0);
   ZdTreeGridCellActionContent = __decorate([
       Component__default["default"]
   ], ZdTreeGridCellActionContent);
@@ -49242,8 +49448,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       {
                         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 },
@@ -50723,6 +50929,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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)
@@ -50791,6 +51001,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           _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,
@@ -51034,7 +51245,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -53530,7 +53741,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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;
@@ -53543,11 +53754,28 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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;
@@ -53555,26 +53783,35 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               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;
@@ -53584,8 +53821,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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;
@@ -53600,8 +53838,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   && (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) {
@@ -53695,10 +53933,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 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)
                   },
                 },
               },
@@ -53762,7 +54000,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -55812,8 +56050,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
       }
       mounted() {
+          if (this.instance.parent instanceof common.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 = '';
@@ -55916,6 +56164,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: [Boolean, String], default: false }),
       __metadata("design:type", Object)
   ], ZdSelectTree.prototype, "fetchOnDemand", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [String], default: '' }),
+      __metadata("design:type", String)
+  ], ZdSelectTree.prototype, "fieldHasChild", void 0);
   __decorate([
       vuePropertyDecorator.Prop({ type: [Number, String], default: undefined }),
       __metadata("design:type", Object)
@@ -57514,6 +57766,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           if (this.instance.fillHeight) {
               setFillHeight(this.$el);
           }
+          core.I18n.registerChangeListener(() => {
+              this.$refs.tabs.callSlider();
+          });
       }
   };
   __decorate([
@@ -57536,6 +57791,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
       vuePropertyDecorator.Prop({ type: Array, default: () => [] }),
       __metadata("design:type", Array)
@@ -57580,6 +57839,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _c(
           "v-tabs",
           {
+            ref: "tabs",
             attrs: {
               "show-arrows": "",
               dark: _vm.instance.dark,
@@ -57642,7 +57902,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _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) {
@@ -57698,11 +57962,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -58070,6 +58334,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.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([
@@ -58084,6 +58371,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
       vuePropertyDecorator.Component({
           components: { ZdRender: vue.ZdRender },
@@ -58485,7 +58776,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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);
@@ -58663,136 +58956,200 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       "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 = [];
@@ -58801,7 +59158,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -58962,8 +59319,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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,
         },
@@ -58978,7 +59335,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -59839,6 +60196,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
           this.orderColumnVisibility();
       }
+      hasChildOnDemand(row) {
+          return this.instance.treeDataStructure.hasChildOnDemand(row);
+      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -60526,8 +60886,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                     headerIndex: headerIndex,
                                                     selectable:
                                                       _vm.instance.selectable,
-                                                    fieldHasChild:
-                                                      _vm.instance.fieldHasChild,
+                                                    hasChildOnDemand:
+                                                      _vm.hasChildOnDemand,
                                                     toggleExpand:
                                                       _vm.toggleExpand,
                                                     rowIndex: index,
@@ -60574,8 +60934,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   rowIndex: index,
                                                   getActionComponent:
                                                     _vm.getActionComponent,
-                                                  fieldHasChild:
-                                                    _vm.instance.fieldHasChild,
+                                                  hasChildOnDemand:
+                                                    _vm.hasChildOnDemand,
                                                   selectable:
                                                     _vm.instance.selectable,
                                                 },
@@ -60694,8 +61054,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -61650,9 +62010,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                               selectable:
                                                                 _vm.instance
                                                                   .selectable,
-                                                              fieldHasChild:
-                                                                _vm.instance
-                                                                  .fieldHasChild,
+                                                              hasChildOnDemand:
+                                                                _vm.hasChildOnDemand,
                                                               toggleExpand:
                                                                 _vm.toggleExpand,
                                                               rowIndex: index,
@@ -61707,8 +62066,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   rowIndex: index,
                                                   getActionComponent:
                                                     _vm.getActionComponent,
-                                                  fieldHasChild:
-                                                    _vm.instance.fieldHasChild,
+                                                  hasChildOnDemand:
+                                                    _vm.hasChildOnDemand,
                                                   selectable:
                                                     _vm.instance.selectable,
                                                 },
@@ -61827,8 +62186,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -62276,6 +62635,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VToolbar,
                   VToolbarItems,
                   VSimpleCheckbox,
+                  VSlideGroup,
+                  VSlideItem,
               },
               directives: {
                   Touch: directives.Touch,