@zeedhi/vuetify 1.79.1 → 1.80.1

package/dist/zd-vuetify.umd.js

@@ -37861,9 +37861,67 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   let ZdAlert = class ZdAlert extends ZdComponent$1 {
       constructor() {
           super();
-          this.alert = common.AlertService.instance;
+          common.AlertService.instantiateManager(this.multiple);
+          this.alerts = common.AlertService.alertsManager.visibleInstances;
+      }
+      arrangeStackItems() {
+          const components = this.$refs.alerts;
+          if (!Array.isArray(components))
+              return;
+          const totalShift = {
+              'top-left': 0,
+              'top-right': 0,
+              'top-center': 0,
+              'bottom-left': 0,
+              'bottom-right': 0,
+              'bottom-center': 0,
+          };
+          const calculateComponentOffset = (component) => {
+              if (component instanceof Element)
+                  return;
+              const element = component.$el;
+              const content = element.querySelector('.v-snack__wrapper');
+              if (!content)
+                  return;
+              const vertical = component.top ? 'top' : 'bottom';
+              let horizontal = 'center';
+              if (component.right) {
+                  horizontal = 'right';
+              }
+              else if (component.left) {
+                  horizontal = 'left';
+              }
+              const totalShiftKey = `${vertical}-${horizontal}`;
+              content.style[vertical] = this.$formatSize(totalShift[totalShiftKey]);
+              const height = content.offsetHeight;
+              const styles = window.getComputedStyle(content);
+              const margin = parseInt(styles.marginTop, 10) + parseInt(styles.marginBottom, 10);
+              totalShift[totalShiftKey] += height + margin;
+          };
+          components.forEach((component) => {
+              this.$nextTick(() => calculateComponentOffset(component));
+          });
+      }
+      changeAlerts() {
+          this.$nextTick(this.arrangeStackItems);
+      }
+      remove(index) {
+          common.AlertService.remove(index);
+      }
+      hide(index) {
+          common.AlertService.hide(index);
       }
   };
+  __decorate([
+      PropWatch({ type: String, default: 'replace' }),
+      __metadata("design:type", String)
+  ], ZdAlert.prototype, "multiple", void 0);
+  __decorate([
+      vuePropertyDecorator.Watch('alerts'),
+      __metadata("design:type", Function),
+      __metadata("design:paramtypes", []),
+      __metadata("design:returntype", void 0)
+  ], ZdAlert.prototype, "changeAlerts", null);
   ZdAlert = __decorate([
       vuePropertyDecorator.Component,
       __metadata("design:paramtypes", [])
@@ -38007,84 +38065,114 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
     return _c(
-      "v-snackbar",
-      {
-        class: ["zd-alert", _vm.alert.cssClass],
-        attrs: {
-          id: _vm.alert.name,
-          top: _vm.alert.top,
-          bottom: _vm.alert.bottom,
-          left: _vm.alert.left,
-          right: _vm.alert.right,
-          timeout: _vm.alert.timeout,
-          "multi-line": _vm.alert.multiLine,
-          vertical: _vm.alert.vertical,
-          color: _vm.alert.color,
-          dark: _vm.alert.dark,
-          light: _vm.alert.light,
-        },
-        scopedSlots: _vm._u([
+      "div",
+      { staticClass: "zd-alert-wrapper" },
+      _vm._l(_vm.alerts, function (alert, index) {
+        return _c(
+          "v-snackbar",
           {
-            key: "action",
-            fn: function () {
-              return [
-                _vm.alert.showDismiss
-                  ? _c(
-                      "v-btn",
-                      {
-                        class: [
-                          "zd-button",
-                          "zd-alert-dismiss",
-                          {
-                            "zd-alert-dismiss-buttons":
-                              _vm.alert.buttonsSlot.length,
-                          },
-                        ],
-                        attrs: {
-                          dark: "",
-                          text: "",
-                          color: _vm.alert.dismissColor,
-                        },
-                        on: {
-                          click: function ($event) {
-                            _vm.alert.isVisible = false;
-                          },
-                        },
-                      },
-                      [_vm._v("\n      " + _vm._s(_vm.$t("DISMISS")) + "\n    ")]
-                    )
-                  : _vm._e(),
-              ]
+            key: alert.id,
+            ref: "alerts",
+            refInFor: true,
+            class: ["zd-alert", alert.cssClass],
+            attrs: {
+              id: alert.name,
+              top: alert.top,
+              bottom: alert.bottom,
+              left: alert.left,
+              right: alert.right,
+              timeout: alert.timeout,
+              "multi-line": alert.multiLine,
+              vertical: alert.vertical,
+              color: alert.color,
+              dark: alert.dark,
+              light: alert.light,
+            },
+            on: {
+              "hook:mounted": _vm.arrangeStackItems,
+              input: function ($event) {
+                return _vm.remove(index)
+              },
+            },
+            scopedSlots: _vm._u(
+              [
+                {
+                  key: "action",
+                  fn: function () {
+                    return [
+                      alert.showDismiss
+                        ? _c(
+                            "v-btn",
+                            {
+                              class: [
+                                "zd-button",
+                                "zd-alert-dismiss",
+                                {
+                                  "zd-alert-dismiss-buttons":
+                                    alert.buttonsSlot.length,
+                                },
+                              ],
+                              attrs: {
+                                dark: "",
+                                text: "",
+                                color: alert.dismissColor,
+                              },
+                              on: {
+                                click: function ($event) {
+                                  return _vm.hide(index)
+                                },
+                              },
+                            },
+                            [
+                              _vm._v(
+                                "\n        " +
+                                  _vm._s(_vm.$t("DISMISS")) +
+                                  "\n      "
+                              ),
+                            ]
+                          )
+                        : _vm._e(),
+                    ]
+                  },
+                  proxy: true,
+                },
+              ],
+              null,
+              true
+            ),
+            model: {
+              value: alert.isVisible,
+              callback: function ($$v) {
+                _vm.$set(alert, "isVisible", $$v);
+              },
+              expression: "alert.isVisible",
             },
-            proxy: true,
-          },
-        ]),
-        model: {
-          value: _vm.alert.isVisible,
-          callback: function ($$v) {
-            _vm.$set(_vm.alert, "isVisible", $$v);
           },
-          expression: "alert.isVisible",
-        },
-      },
-      [
-        _c("span", {
-          domProps: { innerHTML: _vm._s(_vm.$sanitize(_vm.$t(_vm.alert.text))) },
-        }),
-        _vm._v(" "),
-        _vm._l(_vm.alert.buttonsSlot, function (btn, index) {
-          return _c(
-            btn.component,
-            _vm._b(
-              { key: index, tag: "component", staticClass: "zd-alert-buttons" },
-              "component",
-              btn,
-              false
-            )
-          )
-        }),
-      ],
-      2
+          [
+            _c("span", {
+              domProps: { innerHTML: _vm._s(_vm.$sanitize(_vm.$t(alert.text))) },
+            }),
+            _vm._v(" "),
+            _vm._l(alert.buttonsSlot, function (btn, buttonIndex) {
+              return _c(
+                btn.component,
+                _vm._b(
+                  {
+                    key: buttonIndex,
+                    tag: "component",
+                    staticClass: "zd-alert-buttons",
+                  },
+                  "component",
+                  btn,
+                  false
+                )
+              )
+            }),
+          ],
+          2
+        )
+      }),
+      1
     )
   };
   var __vue_staticRenderFns__$1u = [];
@@ -38093,7 +38181,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1u = function (inject) {
       if (!inject) return
-      inject("data-v-5ed4af54_0", { source: ".zd-alert .v-snack__wrapper {\n  background: var(--v-grey-darken2);\n  border-radius: var(--border);\n}\n.zd-alert .v-snack__content {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n  padding: var(--spacing-4) var(--spacing-4);\n}\n.zd-alert .v-snack__content .v-btn.zd-alert-dismiss {\n  color: var(--v-primary-base);\n}\n.zd-alert-dismiss {\n  transition: none;\n}\n.zd-alert-dismiss .v-btn__content {\n  transition: none;\n}\n.zd-alert-dismiss-buttons {\n  margin-left: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-3f4c4dc6_0", { source: ".zd-alert-wrapper {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  z-index: 1000;\n}\n.zd-alert .v-snack__wrapper {\n  transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1), top 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n  background: var(--v-grey-darken2);\n  border-radius: var(--border);\n}\n.zd-alert .v-snack__content {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n  padding: var(--spacing-4) var(--spacing-4);\n}\n.zd-alert .v-snack__content .v-btn.zd-alert-dismiss {\n  color: var(--v-primary-base);\n}\n.zd-alert-dismiss {\n  transition: none;\n}\n.zd-alert-dismiss .v-btn__content {\n  transition: none;\n}\n.zd-alert-dismiss-buttons {\n  margin-left: var(--spacing-2) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -38176,7 +38264,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           parent.style.flexFlow = 'column';
           Array.from(parent.children).forEach((child) => {
               if (child === element) {
-                  child.style.flex = '1 1 auto';
+                  child.style.flex = '1 1 0';
                   child.style.overflowY = 'auto';
               }
               else {
@@ -38193,8 +38281,10 @@ 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 = this.updateChart;
           this.instance.setViewUpdate(updateFn);
@@ -38202,6 +38292,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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) => {
@@ -38225,6 +38326,17 @@ 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();
       }
@@ -38297,6 +38409,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),
@@ -38393,7 +38506,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-d97335de_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 });
+      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 */
@@ -41875,12 +41988,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ], ZdNumber.prototype, "align", void 0);
   __decorate([
       PropWatch({
-          default: () => (core.Config.masks.numberMask || {
-              decimalCharacter: ',',
-              decimalCharacterAlternative: '.',
-              decimalPlaces: 2,
-              digitGroupSeparator: '.',
-          }),
+          default: () => (core.Config.masks.numberMask || {}),
       }),
       __metadata("design:type", Object)
   ], ZdNumber.prototype, "mask", void 0);
@@ -41971,7 +42079,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   };
   __decorate([
       PropWatch({
-          default: () => (core.Config.masks.currencyMask),
+          default: () => (Object.assign(Object.assign({}, core.Config.masks.numberMask), core.Config.masks.currencyMask)),
       }),
       __metadata("design:type", Object)
   ], ZdCurrency.prototype, "mask", void 0);
@@ -42559,13 +42667,14 @@ 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;
@@ -42708,6 +42817,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);
@@ -42843,6 +42960,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           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
                       ),
@@ -42961,7 +43080,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-319c7690_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 */
@@ -43204,6 +43323,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);
@@ -43345,6 +43472,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           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
                       ),
@@ -43464,7 +43597,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-5f9ceeca_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 */
@@ -47895,8 +48028,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$10 = function (inject) {
       if (!inject) return
-      inject("data-v-04dca600_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-04dca600_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid 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-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-7baf3bdb_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-7baf3bdb_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-switch .v-input__slot {\n  margin-bottom: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon {\n  align-self: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid 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-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -53026,7 +53159,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   ref: "ZdMenu",
                   class: ["zd-menu", _vm.instance.cssClass],
                   style: _vm.instance.cssStyle,
-                  attrs: { name: _vm.instance.name },
+                  attrs: {
+                    name: _vm.instance.name,
+                    height: _vm.instance.app ? "100dvh" : "",
+                  },
                   model: {
                     value: _vm.instance.drawer,
                     callback: function ($$v) {
@@ -53155,7 +53291,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$z = function (inject) {
       if (!inject) return
-      inject("data-v-5d549a76_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
+      inject("data-v-167893d6_0", { source: ".zd-menu .v-list .v-list-item .v-list-item__title {\n  font-weight: var(--zd-font-body1-weight);\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n  text-align: left;\n}\n.zd-menu .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.selected .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-item.v-list-item--active:not(.focus-visible):not(:focus):not([data-focus-visible-added]):not(:hover):before {\n  opacity: 0;\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__title {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .v-list-group.selected > .v-list-group__header .v-list-item__icon .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-menu .v-list .zd-menu-top-slot {\n  margin-bottom: 10px;\n  display: block;\n}\n.zd-menu.v-navigation-drawer--mini-variant .v-list-item {\n  justify-content: inherit;\n}\n.zd-menu.v-navigation-drawer--is-mobile div > .zd-menu-top-slot {\n  display: block !important;\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__title {\n  color: var(--v--grey-lighten5);\n}\n.zd-menu.theme--dark .v-list .v-list-item .v-list-item__icon .v-icon {\n  color: var(--v--grey-lighten5);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -53691,7 +53827,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;
@@ -53704,11 +53840,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;
@@ -53716,26 +53869,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;
@@ -53745,8 +53907,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;
@@ -53761,8 +53924,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) {
@@ -53856,10 +54019,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)
                   },
                 },
               },
@@ -53923,7 +54086,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 */
@@ -57689,6 +57852,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([
@@ -57711,6 +57877,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)
@@ -57755,6 +57925,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,
@@ -57817,7 +57988,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) {
@@ -57844,7 +58019,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         },
                       ],
                       key: index,
-                      attrs: { value: index },
+                      attrs: { value: index, parent: tab },
                     },
                     "zd-tab-item",
                     {
@@ -57873,11 +58048,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-83547962_0", { source: ".zd-tabs[data-v-83547962] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar,\n.zd-tabs[data-v-83547962]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-83547962]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-83547962]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-83547962]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-83547962]  .v-tabs-items {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.zd-tabs[data-v-83547962]  .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-83547962";
     /* module identifier */
     const __vue_module_identifier__$c = undefined;
     /* functional template */
@@ -58068,7 +58243,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               return _c(
                 child.component,
                 _vm._b(
-                  { key: index, tag: "component" },
+                  { key: index, tag: "component", attrs: { parent: _vm.parent } },
                   "component",
                   child,
                   false
@@ -58090,11 +58265,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$a = function (inject) {
       if (!inject) return
-      inject("data-v-a94346d8_0", { source: ".zd-tabs-tab-item[data-v-a94346d8] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-a94346d8] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-a94346d8] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-a94346d8] {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-2fa11af6_0", { source: ".zd-tabs-tab-item[data-v-2fa11af6] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-2fa11af6] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-2fa11af6] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-2fa11af6] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$a = "data-v-a94346d8";
+    const __vue_scope_id__$a = "data-v-2fa11af6";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -58245,6 +58420,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([
@@ -58259,6 +58457,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 },
@@ -59203,8 +59405,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,
         },
@@ -59219,7 +59421,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 */