@zeedhi/vuetify 1.43.0 → 1.44.0

package/dist/zd-vuetify.umd.js

@@ -30027,7 +30027,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1k = function (inject) {
       if (!inject) return
-      inject("data-v-2216f88a_0", { source: ".zd-apex-chart .apexcharts-toolbar {\n  z-index: 0;\n}\n.zd-apex-chart .apexcharts-tooltip {\n  z-index: 1;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-7fa8aa32_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 .apexcharts-tooltip {\n  z-index: 1;\n}\n.apexcharts-overlay {\n  z-index: 0 !important;\n}\n.apexcharts-container {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30132,7 +30132,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1j = function (inject) {
       if (!inject) return
-      inject("data-v-c9fb3210_0", { source: ".zd-badge.icon-with-badge .v-badge__badge {\n  top: 3px;\n  right: 3px;\n  min-height: var(--spacing-3);\n  min-width: var(--spacing-3);\n}\n.zd-badge.no-badge-counter .v-badge__badge > span {\n  font-size: 0px !important;\n}\n.zd-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.zd-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.zd-badge:not(.v-badge--dot) .v-badge__badge {\n  padding: 2px var(--spacing-1);\n  min-width: var(--spacing-4);\n  height: var(--spacing-4);\n}", map: undefined, media: undefined });
+      inject("data-v-756b0fdc_0", { source: ".zd-badge.icon-with-badge .v-badge__badge {\n  top: 3px;\n  right: 3px;\n  min-height: var(--spacing-3);\n  min-width: var(--spacing-3);\n}\n.zd-badge.no-badge-counter .v-badge__badge > span {\n  font-size: 0px !important;\n}\n.zd-badge .v-badge__badge {\n  font-size: var(--zd-font-caption-size);\n  font-weight: var(--zd-font-caption-weight);\n  line-height: 14px;\n  pointer-events: none;\n  background-color: var(--zd-badge-background-color) !important;\n}\n.zd-badge .v-badge__badge span {\n  color: var(--zd-badge-text-color) !important;\n}\n.zd-badge:not(.v-badge--dot) .v-badge__badge {\n  padding: 2px var(--spacing-1);\n  min-width: var(--spacing-4);\n  height: var(--spacing-4);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30264,7 +30264,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1i = function (inject) {
       if (!inject) return
-      inject("data-v-cf0640cc_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
+      inject("data-v-771f13b0_0", { source: ".v-breadcrumbs {\n  padding: 0;\n}\n.v-breadcrumbs li:nth-child(2n) {\n  padding: 0 var(--spacing-2);\n}\n.v-breadcrumbs.zd-breadcrumbs--small li {\n  font-size: var(--zd-font-caption-size);\n}\n.v-breadcrumbs li {\n  font-size: var(--zd-font-body1-size);\n}\n.v-breadcrumbs--large li {\n  font-size: var(--zd-font-body3-size);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30504,7 +30504,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1h = function (inject) {
       if (!inject) return
-      inject("data-v-34870b14_0", { source: ".v-btn.zd-button,\na.v-btn.zd-button,\nbutton.v-btn.zd-button {\n  letter-spacing: unset;\n  text-transform: none;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--fab),\na.v-btn.zd-button.v-btn:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--fab) {\n  box-shadow: none;\n}\n.v-btn.zd-button.v-size--default,\na.v-btn.zd-button.v-size--default,\nbutton.v-btn.zd-button.v-size--default {\n  min-width: 0;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\na.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: var(--border);\n  padding: var(--spacing-2) var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--default,\na.v-btn.zd-button.v-btn.v-size--default,\nbutton.v-btn.zd-button.v-btn.v-size--default {\n  min-height: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--default.v-btn--icon {\n  min-width: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab) {\n  height: auto;\n  width: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon {\n  padding: 0;\n  min-width: 24px;\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab) {\n  height: auto;\n  min-height: 56px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon {\n  min-width: 56px;\n}\n.v-btn.zd-button.v-btn--outlined,\na.v-btn.zd-button.v-btn--outlined,\nbutton.v-btn.zd-button.v-btn--outlined {\n  border: var(--regular) solid;\n}\n.v-btn.zd-button .v-btn__content .v-icon,\na.v-btn.zd-button .v-btn__content .v-icon,\nbutton.v-btn.zd-button .v-btn__content .v-icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n.v-btn.zd-button .v-btn__content .v-icon--left,\na.v-btn.zd-button .v-btn__content .v-icon--left,\nbutton.v-btn.zd-button .v-btn__content .v-icon--left {\n  margin-right: var(--spacing-2);\n  margin-left: 0;\n}\n.v-btn.zd-button .v-btn__content .v-icon--right,\na.v-btn.zd-button .v-btn__content .v-icon--right,\nbutton.v-btn.zd-button .v-btn__content .v-icon--right {\n  margin-right: 0;\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
+      inject("data-v-5c5a5758_0", { source: ".v-btn.zd-button,\na.v-btn.zd-button,\nbutton.v-btn.zd-button {\n  letter-spacing: unset;\n  text-transform: none;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--fab),\na.v-btn.zd-button.v-btn:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--fab) {\n  box-shadow: none;\n}\n.v-btn.zd-button.v-size--default,\na.v-btn.zd-button.v-size--default,\nbutton.v-btn.zd-button.v-size--default {\n  min-width: 0;\n}\n.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\na.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\nbutton.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: var(--border);\n  padding: var(--spacing-2) var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--default,\na.v-btn.zd-button.v-btn.v-size--default,\nbutton.v-btn.zd-button.v-btn.v-size--default {\n  min-height: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--default.v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--default.v-btn--icon {\n  min-width: var(--spacing-6);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab) {\n  height: auto;\n  width: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--small:not(.v-btn--fab).v-btn--icon {\n  padding: 0;\n  min-width: 24px;\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab),\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab) {\n  height: auto;\n  min-height: 56px;\n  padding: 0 var(--spacing-4);\n}\n.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\na.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon,\nbutton.v-btn.zd-button.v-btn.v-size--large:not(.v-btn--fab).v-btn--icon {\n  min-width: 56px;\n}\n.v-btn.zd-button.v-btn--outlined,\na.v-btn.zd-button.v-btn--outlined,\nbutton.v-btn.zd-button.v-btn--outlined {\n  border: var(--regular) solid;\n}\n.v-btn.zd-button .v-btn__content .v-icon,\na.v-btn.zd-button .v-btn__content .v-icon,\nbutton.v-btn.zd-button .v-btn__content .v-icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\n.v-btn.zd-button .v-btn__content .v-icon--left,\na.v-btn.zd-button .v-btn__content .v-icon--left,\nbutton.v-btn.zd-button .v-btn__content .v-icon--left {\n  margin-right: var(--spacing-2);\n  margin-left: 0;\n}\n.v-btn.zd-button .v-btn__content .v-icon--right,\na.v-btn.zd-button .v-btn__content .v-icon--right,\nbutton.v-btn.zd-button .v-btn__content .v-icon--right {\n  margin-right: 0;\n  margin-left: var(--spacing-2);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30697,7 +30697,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1g = function (inject) {
       if (!inject) return
-      inject("data-v-246722c8_0", { source: ".zd-button-group .v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group .btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group button.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: 0;\n}\n.zd-button-group button.v-btn.v-item--active.v-btn--active.v-btn--contained.theme--light.v-size--default.primary.zd-button {\n  color: lightgray;\n}\n.zd-button-group > .v-btn.v-btn:last-child {\n  border-top-right-radius: inherit !important;\n  border-bottom-right-radius: inherit !important;\n}\n.zd-button-group > .v-btn.v-btn:first-child {\n  border-top-left-radius: inherit !important;\n  border-bottom-left-radius: inherit !important;\n}\n.zd-button-group.v-btn-toggle--group > .v-btn.v-btn {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  margin: 4px;\n  min-width: auto;\n  color: rgba(0, 0, 0, 0.87) !important;\n}", map: undefined, media: undefined });
+      inject("data-v-687d3642_0", { source: ".zd-button-group .v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group .btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded),\n.zd-button-group button.v-btn.zd-button.v-btn:not(.v-btn--round, .v-btn--rounded) {\n  border-radius: 0;\n}\n.zd-button-group button.v-btn.v-item--active.v-btn--active.v-btn--contained.theme--light.v-size--default.primary.zd-button {\n  color: lightgray;\n}\n.zd-button-group > .v-btn.v-btn:last-child {\n  border-top-right-radius: inherit !important;\n  border-bottom-right-radius: inherit !important;\n}\n.zd-button-group > .v-btn.v-btn:first-child {\n  border-top-left-radius: inherit !important;\n  border-bottom-left-radius: inherit !important;\n}\n.zd-button-group.v-btn-toggle--group > .v-btn.v-btn {\n  background-color: transparent !important;\n  border-color: transparent !important;\n  margin: 4px;\n  min-width: auto;\n  color: rgba(0, 0, 0, 0.87) !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -30956,6 +30956,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       mounted() {
           this.carousel = this.$refs.carousel;
+          if (this.carousel) {
+              setTimeout(() => {
+                  this.carousel.updateWidth();
+              }, 200);
+          }
           core.Metadata.setEnabledConsole(true);
       }
       get paginationMode() {
@@ -31482,7 +31487,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1e = function (inject) {
       if (!inject) return
-      inject("data-v-6d92f6fe_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
+      inject("data-v-5d9a0ba9_0", { source: ".zd-carousel {\n  height: 100%;\n}\n.zd-carousel section.hooper {\n  outline: none;\n}\n.zd-carousel section.hooper * {\n  outline: none;\n}\n.zd-carousel section.hooper .hooper-list .hooper-slide {\n  align-self: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination {\n  padding: 0;\n  width: 100%;\n  height: 50px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators {\n  margin: 0 auto;\n  display: block;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li {\n  display: inline-block;\n  margin: 0 var(--spacing-2);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination .hooper-indicators li .hooper-indicator {\n  width: 18px;\n  height: 18px;\n  border-radius: 50%;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.show-background {\n  background: rgba(0, 0, 0, 0.3);\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator {\n  opacity: 0.25;\n  background-color: black;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator.is-active {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--light .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.4;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark {\n  color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator {\n  opacity: 0.5;\n  background-color: white;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator.is-active {\n  opacity: 0.8;\n}\n.zd-carousel section.hooper .hooper-list .hooper-pagination.theme--dark .hooper-indicator:hover:not(.is-active) {\n  opacity: 0.6;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-prev {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list button.hooper-next {\n  padding: 0;\n}\n.zd-carousel section.hooper .hooper-list .prev-button, .zd-carousel section.hooper .hooper-list .next-button {\n  transition: 0.1s;\n}\n.zd-carousel section.hooper .hooper-list ul.hooper-track, .zd-carousel section.hooper .hooper-list ol.hooper-indicators {\n  padding-left: 0;\n}\n.zd-carousel section.hooper .hooper-list .hooper-progress-inner {\n  background-color: var(--v-primary-base);\n}\n.zd-carousel.buttons-outside section.hooper {\n  width: calc(100% - 2 * var(--spacing-8));\n  margin-left: var(--spacing-8);\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-prev {\n  left: calc(-1 * var(--spacing-8));\n}\n.zd-carousel.buttons-outside section.hooper .hooper-list .hooper-navigation button.hooper-next {\n  right: calc(-1 * var(--spacing-8));\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -31773,7 +31778,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1d = function (inject) {
       if (!inject) return
-      inject("data-v-7b6a9f90_0", { source: ".zd-checkbox {\n  margin: 0;\n  padding: 0;\n}\n.zd-checkbox .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n  margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
+      inject("data-v-62abe910_0", { source: ".zd-checkbox {\n  margin: 0;\n  padding: 0;\n}\n.zd-checkbox .v-label {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n}\n.zd-checkbox > .v-input__control > .v-input__slot {\n  margin: 0;\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-checkbox > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-checkbox.zd-no-label .v-label {\n  display: none;\n}\n.zd-checkbox.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -32389,7 +32394,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-cc2ec848_0", { source: ".zd-code-editor {\n  position: relative;\n}\n.zd-code-editor-clipboard-button {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  height: 100%;\n  min-height: 45px;\n  width: 30px;\n  overflow: hidden;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
+      inject("data-v-1d788cee_0", { source: ".zd-code-editor {\n  position: relative;\n}\n.zd-code-editor-clipboard-button {\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  background-color: var(--v-grey-lighten5);\n  opacity: 0;\n  transition: 0.3s all ease-in;\n}\n.zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-base);\n  font-size: 18px;\n}\n.zd-code-editor:hover .zd-code-editor-clipboard-button {\n  opacity: 1;\n}\n.zd-code-editor-container {\n  position: relative;\n  background-color: var(--v-grey-lighten5);\n  min-height: 45px;\n  display: flex;\n  border: solid var(--regular) var(--v-grey-lighten5);\n  overflow: auto;\n}\n.zd-code-editor-container:focus-within {\n  border: solid var(--regular) var(--v-primary-base);\n}\n.zd-code-editor-container .zd-code-editor-line-numbers {\n  height: 100%;\n  min-height: 45px;\n  width: 30px;\n  overflow: hidden;\n  flex-shrink: 0;\n  margin-top: 0;\n  font-size: 0.9em;\n  padding: 10px 3px;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  background: var(--v-grey-lighten4);\n  color: var(--zd-font-color);\n  position: sticky;\n  top: 0;\n  left: 0;\n}\n.zd-code-editor-container .zd-code-editor-line-numbers .zd-code-editor-line-number {\n  text-align: right;\n  white-space: nowrap;\n}\n.zd-code-editor-container pre {\n  padding: 10px;\n  margin: 0;\n  background: transparent;\n  -moz-tab-size: 4;\n  -ms-flex-positive: 2;\n  -o-tab-size: 4;\n  -webkit-box-flex: 2;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  flex-grow: 2;\n  outline: none;\n  tab-size: 4;\n  font-weight: 500;\n  font-size: 0.9em;\n  font-family: Consolas, Monaco, \"Andale Mono\", \"Ubuntu Mono\", monospace;\n  overflow: hidden;\n  color: var(--zd-font-color);\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button {\n  background-color: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-clipboard-button .v-icon {\n  color: var(--v-grey-lighten4);\n  font-size: 18px;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container {\n  border: solid var(--regular) var(--v-grey-darken3);\n  background: #383838;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container .zd-code-editor-line-numbers {\n  background: var(--v-grey-darken3);\n  color: var(--v-grey-lighten4);\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre {\n  text-shadow: 0 1px #2c2c2c;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.property, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.tag, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.boolean, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.number, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.constant, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.symbol, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.deleted {\n  color: #ff6fd3;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.atrule, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-value, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.keyword {\n  color: #00acf6;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.function, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.class-name {\n  color: #ff7692;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.selector, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.attr-name, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.string, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.char, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.builtin, .zd-code-editor.theme--dark .zd-code-editor-container pre span.token.inserted {\n  color: #77b300;\n}\n.zd-code-editor.theme--dark .zd-code-editor-container pre span.token.operator {\n  background: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -32822,7 +32827,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$18 = function (inject) {
       if (!inject) return
-      inject("data-v-21936231_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
+      inject("data-v-10d8e3f9_0", { source: ".v-expansion-panels.tile, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--active, .v-expansion-panels.tile:not(.v-expansion-panels--accordion) > .v-expansion-panel--next-active {\n  border-radius: var(--border-tile);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: var(--shadow-3);\n  border-radius: var(--border);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active::before, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active::before {\n  box-shadow: none;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.outlined, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.outlined {\n  box-shadow: none;\n  border: var(--regular) solid var(--v-secondary-base);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active.raised, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active.raised {\n  box-shadow: var(--shadow-9);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-content__wrap, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-content__wrap {\n  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header {\n  border-bottom-left-radius: inherit;\n  border-bottom-right-radius: inherit;\n  min-height: 0;\n  padding: var(--spacing-4);\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon, .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header .v-expansion-panel-header__icon .v-btn .v-icon {\n  color: currentColor;\n}\n.v-expansion-panels > div:first-child.v-expansion-panel .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon), .v-expansion-panels > div:first-child.v-expansion-panel.v-expansion-panel--next-active .v-expansion-panel-header > :not(.v-expansion-panel-header__icon) {\n  padding-right: var(--spacing-4);\n}\n.v-expansion-panels--flat > div:first-child.v-expansion-panel, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--active, .v-expansion-panels--flat > div:first-child.v-expansion-panel.v-expansion-panel--next-active {\n  box-shadow: none;\n}\n.v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--active:focus, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:hover, .v-expansion-panels.v-expansion-panels--hover > div:first-child.v-expansion-panel.v-expansion-panel--next-active:focus {\n  box-shadow: var(--shadow-5);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -33245,6 +33250,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             name: _vm.instance.name,
             "persistent-hint": _vm.instance.persistentHint,
             placeholder: _vm.$t(_vm.instance.placeholder),
+            "persistent-placeholder": true,
             prefix: _vm.instance.prefix,
             "prepend-icon": _vm.$getIcon(_vm.instance.prependOuterIcon),
             "prepend-inner-icon": !_vm.instance.prefix
@@ -33268,7 +33274,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$16 = function (inject) {
       if (!inject) return
-      inject("data-v-0e7bd04b_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
+      inject("data-v-5429f074_0", { source: ".zd-text-input__affix, .v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix, .v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  font-weight: var(--zd-font-body2-weight);\n  color: var(--v-grey-lighten2);\n  font-size: var(--zd-font-body2-size);\n  line-height: 15px;\n  padding: 3px 0 4px 0;\n}\n.v-input.zd-text-input {\n  padding-top: var(--spacing-4);\n}\n.v-input.zd-text-input .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.v-input.zd-text-input .v-input__prepend-outer, .v-input.zd-text-input .v-input__append-outer {\n  margin-top: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--spacing-7) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input .v-input__append-inner, .v-input.zd-text-input .v-input__prepend-inner {\n  padding: 0;\n  margin: 0;\n  align-self: unset;\n}\n.v-input.zd-text-input .v-input__prepend-outer .v-icon, .v-input.zd-text-input .v-input__append-outer .v-icon, .v-input.zd-text-input .v-input__append-inner .v-icon, .v-input.zd-text-input .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__prefix {\n  padding-left: var(--spacing-2);\n}\n.v-input.zd-text-input > .v-input__control > .v-input__slot .v-text-field__slot {\n  position: static;\n}\n.v-input.zd-text-input.v-text-field--reverse > .v-input__control > .v-input__slot label {\n  left: auto !important;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append {\n  align-items: center;\n  display: inline-flex;\n  flex: 1 0 auto;\n  justify-content: center;\n}\n.v-input.zd-text-input.zd-text-input--suffix .v-input__append-inner > .zd-text-input__append .zd-text-input__append__suffix {\n  padding-right: var(--spacing-2);\n}\n.v-input.zd-text-input.zd-text-input--prepend-icon > .v-input__control > .v-input__slot > .v-input__prepend-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-input--append-icon > .v-input__control > .v-input__slot > .v-input__append-inner {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer, .v-input.zd-text-input.zd-dense .v-input__append-outer {\n  margin-top: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n  margin-bottom: calc(var(--icon-size) / 2 - var(--icon-size) / 2);\n}\n.v-input.zd-text-input.zd-dense .v-input__prepend-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-outer .v-icon, .v-input.zd-text-input.zd-dense .v-input__append-inner .v-icon, .v-input.zd-text-input.zd-dense .v-input__prepend-inner .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-text-input.zd-dense .v-input__slot .v-text-field__prefix {\n  height: auto;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__append-inner:last-child,\n.v-input.zd-text-input.zd-no-border:not(.error--text) .v-input__prepend-inner:first-child {\n  margin: 0;\n}\n.v-input.zd-text-input.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot input {\n  padding: 0;\n}\n.v-input.zd-text-input.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-text-input.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-text-input.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -33804,7 +33810,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$13 = function (inject) {
       if (!inject) return
-      inject("data-v-b6912b0a_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-1b943622_0", { source: ".zd-dashboard {\n  display: flex;\n  flex-direction: column;\n  cursor: auto;\n}\n.zd-dashboard .zd-header {\n  margin-bottom: 10px;\n}\n.zd-dashboard .zd-footer {\n  bottom: 0;\n  right: 20px;\n  position: absolute;\n  padding: 3px;\n}\n.zd-dashboard .zd-footer.theme--dark {\n  background: #1e1e1e;\n}\n.zd-dashboard .zd-footer.theme--light {\n  background: #fff;\n}\n.zd-dashboard .zd-icon {\n  bottom: 0;\n  right: 0;\n  position: absolute;\n  cursor: nw-resize;\n}\n.zd-dashboard .zd-dashboard-body {\n  justify-content: flex-start;\n  align-content: flex-start;\n  display: flex;\n  flex-wrap: wrap;\n  height: 100%;\n  min-height: 0;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col {\n  min-height: 70px;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div {\n  height: 100%;\n  position: relative;\n}\n.zd-dashboard .zd-dashboard-body .zd-dashboard-card-col .zd-dashboard-card-div > .zd-card {\n  height: 100%;\n}\n.ghost-drag {\n  border: 2px dashed #772583;\n  opacity: 0.5;\n  margin: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -35043,15 +35049,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.$el.addEventListener('dragover', this.inputFileDragOver);
           this.$el.addEventListener('dragleave', this.inputFileDragLeave);
           this.$el.addEventListener('drop', this.inputFileDrop);
-          this.setFileInputPlaceholder(this.$el);
       }
       blur(event) {
           this.instance.blur(event, this.$el);
-          this.setFileInputPlaceholder(this.$el);
       }
       focus(event) {
           this.instance.focus(event, this.$el);
-          this.removePlaceHolder(this.$el);
       }
       inputFileClick(event) {
           if (this.instance.showDragArea) {
@@ -35094,19 +35097,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               this.instance.change(event, this.$el);
           }
       }
-      setFileInputPlaceholder(el) {
-          const element = el.querySelector('.v-file-input__text--placeholder');
-          if (element) {
-              element
-                  .innerHTML = this.placeholder;
-          }
-      }
-      removePlaceHolder(el) {
-          const element = el.querySelector('.v-file-input__text--placeholder');
-          if (element) {
-              element.innerHTML = '';
-          }
-      }
       dragAreaClick(event) {
           event.stopPropagation();
       }
@@ -35203,6 +35193,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             class: [
               "zd-input zd-text-input zd-file-input",
               _vm.instance.cssClass,
+              { "theme--dark": _vm.$isDark(this) },
+              { "theme--light": _vm.$isLight(this) },
               {
                 "zd-dense": _vm.instance.dense,
                 "zd-no-border": !_vm.instance.showBorder,
@@ -35278,8 +35270,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                     {
                                       dragging: _vm.dragging,
                                     },
-                                    { "theme--dark": _vm.$isDark(this) },
-                                    { "theme--light": _vm.$isLight(this) },
                                   ],
                                 },
                                 [
@@ -35338,8 +35328,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                           _c(
                             "span",
                             {
-                              staticClass:
-                                "v-chip v-chip--no-color theme--light v-size--small",
+                              class: [
+                                "v-chip",
+                                "v-chip--no-color",
+                                "v-size--small",
+                              ],
                               on: {
                                 click: function ($event) {
                                   return _vm.chipClick($event, index)
@@ -35438,7 +35431,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-ff6b00ae_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: var(--border);\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.theme--dark {\n  background: #3c3c3c;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.theme--light {\n  background: #f8f8f8;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #f0f0f0;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}", map: undefined, media: undefined });
+      inject("data-v-f1ffac76_0", { source: ".zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text:not(.v-file-input__text--placeholder) {\n  color: var(--zd-font-color);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  border-radius: 8px;\n  padding: 0 var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip .chip-remove-icon {\n  font-size: var(--icon-size-small);\n  margin-left: var(--spacing-2);\n}\n.zd-file-input > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot {\n  min-height: 24px;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  padding: 0 var(--spacing-1);\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  height: 16px;\n  line-height: 15px;\n  font-size: 11px;\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-file-input.zd-dense > .v-input__control > .v-input__slot > .v-text-field__slot input {\n  padding: 0;\n}\n.zd-file-input.with-drag-area {\n  padding-top: calc(var(--drag-area-height) + 17px);\n}\n.zd-file-input.with-drag-area.zd-no-label {\n  padding-top: calc(var(--drag-area-height) + 5px);\n}\n.zd-file-input.with-drag-area.zd-no-label > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 5px);\n  top: calc(-5px - var(--drag-area-height));\n}\n.zd-file-input.with-drag-area.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  text-align: right;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label {\n  height: calc(var(--drag-area-height) + 25px);\n  top: calc(-25px - var(--drag-area-height));\n  right: 0 !important;\n  left: 0 !important;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-label {\n  height: 20px;\n  display: block;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area {\n  width: 100%;\n  height: var(--drag-area-height);\n  border: dashed var(--regular) #c4c4c4;\n  position: relative;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area.dragging {\n  background: #7c7c7c;\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content {\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n.zd-file-input.with-drag-area > .v-input__control > .v-input__slot > .v-text-field__slot .v-label .zd-file-input-drag-area .zd-file-input-drag-content > span {\n  display: block;\n}\n.zd-file-input.v-input--is-disabled > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  opacity: 0.5;\n}\n.zd-file-input.v-text-field--reverse > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text {\n  flex-direction: row-reverse;\n}\n.zd-file-input.theme--light > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background-color: #e0e0e0;\n  color: rgba(0, 0, 0, 0.87);\n}\n.zd-file-input.theme--dark > .v-input__control > .v-input__slot > .v-text-field__slot .v-file-input__text .v-chip {\n  background: #555;\n  color: #fff;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -36073,7 +36066,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$W = function (inject) {
       if (!inject) return
-      inject("data-v-78e60822_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
+      inject("data-v-a3dafc0a_0", { source: ".zd-frame {\n  height: inherit;\n  width: inherit;\n}\n.zd-frame .v-progress-circular {\n  left: 50%;\n  transform: translateX(-50%);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -36707,6 +36700,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-grid",
         _vm.instance.cssClass,
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
+        { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [
         _vm.cssColorVars,
@@ -36984,11 +36978,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   },
                                                   [
                                                     _vm._v(
-                                                      "\n                  " +
-                                                        _vm._s(
-                                                          _vm.$t(column.label)
-                                                        ) +
-                                                        "\n                "
+                                                      _vm._s(_vm.$t(column.label))
                                                     ),
                                                   ]
                                                 ),
@@ -37308,14 +37298,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                               },
                                               [
                                                 _vm._v(
-                                                  "\n                " +
-                                                    _vm._s(
-                                                      column.formatterByRow(
-                                                        item,
-                                                        cellProps
-                                                      )
-                                                    ) +
-                                                    "\n              "
+                                                  _vm._s(
+                                                    column.formatterByRow(
+                                                      item,
+                                                      cellProps
+                                                    )
+                                                  )
                                                 ),
                                               ]
                                             ),
@@ -37479,7 +37467,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-30c5a8ae_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined });
+      inject("data-v-51a553aa_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -37678,6 +37666,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-grid",
         _vm.instance.cssClass,
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
+        { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
@@ -37952,11 +37941,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   },
                                                   [
                                                     _vm._v(
-                                                      "\n                  " +
-                                                        _vm._s(
-                                                          _vm.$t(column.label)
-                                                        ) +
-                                                        "\n                "
+                                                      _vm._s(_vm.$t(column.label))
                                                     ),
                                                   ]
                                                 ),
@@ -38441,14 +38426,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   },
                                                   [
                                                     _vm._v(
-                                                      "\n                " +
-                                                        _vm._s(
-                                                          column.formatterByRow(
-                                                            item,
-                                                            cellProps
-                                                          )
-                                                        ) +
-                                                        "\n              "
+                                                      _vm._s(
+                                                        column.formatterByRow(
+                                                          item,
+                                                          cellProps
+                                                        )
+                                                      )
                                                     ),
                                                   ]
                                                 ),
@@ -38612,8 +38595,8 @@ 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-72417f9b_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-72417f9b_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-81027f46_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
+  ,inject("data-v-81027f46_1", { source: ".zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-grid table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-grid.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39647,7 +39630,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$N = function (inject) {
       if (!inject) return
-      inject("data-v-6ec874e8_0", { source: ".zd-image {\n  position: relative;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-4adcebfe_0", { source: ".zd-image {\n  position: relative;\n}\n.zd-image img.zd-image-not-found {\n  background-color: #f8f8f8;\n  object-fit: scale-down !important;\n  padding: 10px;\n}\n.zd-image .zd-image-error-text {\n  position: absolute;\n  bottom: var(--spacing-5);\n  width: 100%;\n  text-align: center;\n  font-style: normal;\n  font-size: 16px;\n  line-height: var(--zd-font-title-size);\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -39970,7 +39953,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-7df9cd1c_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
+      inject("data-v-643660f0_0", { source: ".zd-iterable-columns-button-option {\n  min-height: 32px;\n}\n.zd-iterable-columns-button-options {\n  max-height: 200px;\n  overflow: auto;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40173,7 +40156,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$J = function (inject) {
       if (!inject) return
-      inject("data-v-7791c13c_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  max-width: calc(100% - 200px);\n  margin-left: 0;\n}\n.zd-iterable-pagination .v-pagination {\n  width: auto;\n}\n.zd-iterable-pagination .v-pagination.theme--dark .v-pagination__item--active {\n  color: #fff;\n  background: #282828 !important;\n  border-color: #282828 !important;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  box-shadow: none;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  background-color: transparent;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation, .zd-iterable-pagination .v-pagination .v-pagination__more {\n  margin: 0 var(--spacing-1);\n  height: 36px;\n  width: 36px;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  border: solid var(--regular) var(--v-grey-lighten3);\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation .v-icon {\n  font-size: var(--icon-size);\n}\n.zd-iterable-pagination .v-pagination li:first-child .v-pagination__navigation {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-iterable-pagination .v-pagination li:last-child .v-pagination__navigation {\n  margin: 0 0 0 var(--spacing-1);\n}", map: undefined, media: undefined });
+      inject("data-v-7aa6664e_0", { source: ".zd-iterable-pagination {\n  padding: 0;\n  max-width: calc(100% - 200px);\n  margin-left: 0;\n}\n.zd-iterable-pagination .v-pagination {\n  width: auto;\n}\n.zd-iterable-pagination .v-pagination.theme--dark .v-pagination__item--active {\n  color: #fff;\n  background: #282828 !important;\n  border-color: #282828 !important;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  box-shadow: none;\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  background-color: transparent;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__item, .zd-iterable-pagination .v-pagination .v-pagination__navigation, .zd-iterable-pagination .v-pagination .v-pagination__more {\n  margin: 0 var(--spacing-1);\n  height: 36px;\n  width: 36px;\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation {\n  border: solid var(--regular) var(--v-grey-lighten3);\n}\n.zd-iterable-pagination .v-pagination .v-pagination__navigation .v-icon {\n  font-size: var(--icon-size);\n}\n.zd-iterable-pagination .v-pagination li:first-child .v-pagination__navigation {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-iterable-pagination .v-pagination li:last-child .v-pagination__navigation {\n  margin: 0 0 0 var(--spacing-1);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40791,7 +40774,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$H = function (inject) {
       if (!inject) return
-      inject("data-v-2144b958_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.theme--light {\n  background: white;\n}\n.zd-iterable-page-size.theme--dark {\n  background: #121212;\n}\n.zd-iterable-page-size.zd-input.zd-no-label {\n  margin: 0 0 0 var(--spacing-4);\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
+      inject("data-v-075271b2_0", { source: ".zd-iterable-page-size {\n  max-width: 80px;\n}\n.zd-iterable-page-size.theme--light {\n  background: white;\n}\n.zd-iterable-page-size.theme--dark {\n  background: #121212;\n}\n.zd-iterable-page-size.zd-input.zd-no-label {\n  margin: 0 0 0 var(--spacing-4);\n}\n.zd-iterable-page-size.v-input {\n  align-items: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -40865,7 +40848,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$G = function (inject) {
       if (!inject) return
-      inject("data-v-8f2a94b6_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
+      inject("data-v-54ebff05_0", { source: ".zd-iterable-page-info {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  white-space: nowrap;\n  margin-left: var(--spacing-4);\n  height: 24px;\n  line-height: 24px;\n  color: var(--zd-font-color);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -41114,7 +41097,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$E = function (inject) {
       if (!inject) return
-      inject("data-v-6cd27a94_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
+      inject("data-v-4bee83b8_0", { source: "\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42121,6 +42104,30 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.Menu;
+          this.navigationKeyMapping = {
+              down: {
+                  event: this.navigateNextItem.bind(this),
+                  stop: true,
+                  active: true,
+                  prevent: true,
+              },
+              up: {
+                  event: this.navigatePreviousItem.bind(this),
+                  stop: true,
+                  active: true,
+                  prevent: true,
+              },
+              left: {
+                  event: this.toogleGroup.bind(this, true),
+                  stop: true,
+                  active: true,
+              },
+              right: {
+                  event: this.toogleGroup.bind(this, false),
+                  stop: true,
+                  active: true,
+              },
+          };
           this.searchInputProps = {
               name: 'menuSearchInput',
               component: 'ZdTextInput',
@@ -42141,6 +42148,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       }
       mounted() {
           this.instance.urlChanged(core.Router.getCurrentRoute());
+          core.KeyMap.bind(this.navigationKeyMapping, this, this.$el);
+      }
+      beforeDestroy() {
+          core.KeyMap.unbind(this.navigationKeyMapping, this);
       }
       showSlotOnHover() {
           if (this.instance.miniState && this.$children.length >= 2 && this.$children[1].$el.matches(':hover')) {
@@ -42151,6 +42162,90 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       doSearch({ component }) {
           this.instance.search = component.value;
       }
+      findIndex(parentComp, comp) {
+          var _a;
+          return ((_a = parentComp === null || parentComp === void 0 ? void 0 : parentComp.items) === null || _a === void 0 ? void 0 : _a.findIndex((item) => item.name === (comp === null || comp === void 0 ? void 0 : comp.name))) || 0;
+      }
+      get parentComp() {
+          var _a, _b;
+          return (((_a = this.instance.currentItem) === null || _a === void 0 ? void 0 : _a.parentGroup) || ((_b = this.instance.currentItem) === null || _b === void 0 ? void 0 : _b.parentMenu));
+      }
+      navigateNextItem() {
+          let currentItemIndex = this.findIndex(this.parentComp, this.instance.currentItem);
+          if (currentItemIndex === -1 || !this.instance.currentItem
+              || !(this.parentComp && this.parentComp.items && this.parentComp.items.length))
+              return;
+          let nextItemName;
+          if (this.instance.currentItem
+              && this.instance.currentItem.component === 'ZdMenuGroup'
+              && this.instance.currentItem.opened) {
+              nextItemName = this.instance.currentItem.items[0].name;
+          }
+          else {
+              const lastItem = this.instance.currentItem;
+              const lastItemName = this.instance.currentItem.name;
+              while (this.parentComp
+                  && currentItemIndex === this.parentComp.items.length - 1) {
+                  this.instance.currentItem = this.parentComp;
+                  currentItemIndex = this.findIndex(this.parentComp, this.instance.currentItem);
+              }
+              if (this.instance.currentItem.component !== 'ZdMenu') {
+                  let newIndex;
+                  if (currentItemIndex < this.parentComp.items.length - 1) {
+                      newIndex = currentItemIndex + 1;
+                  }
+                  else {
+                      newIndex = currentItemIndex;
+                  }
+                  nextItemName = this.parentComp.items[newIndex].name;
+              }
+              else {
+                  this.instance.currentItem = lastItem;
+                  nextItemName = lastItemName;
+              }
+          }
+          const nextItem = core.Metadata.getInstance(nextItemName);
+          nextItem.setFocus();
+      }
+      navigatePreviousItem() {
+          const currentItemIndex = this.findIndex(this.parentComp, this.instance.currentItem);
+          if (currentItemIndex === -1
+              || !(this.parentComp && this.parentComp.items && this.parentComp.items.length))
+              return;
+          let nextItemName;
+          if (currentItemIndex === 0 && this.instance.currentItem) {
+              if (this.parentComp.component !== 'ZdMenu')
+                  this.instance.currentItem = this.parentComp;
+              nextItemName = this.instance.currentItem.name;
+          }
+          else {
+              let newIndex;
+              if (currentItemIndex >= 0) {
+                  newIndex = currentItemIndex - 1;
+              }
+              else {
+                  newIndex = currentItemIndex;
+              }
+              nextItemName = this.parentComp.items[newIndex].name;
+              let nextGroupInstance = core.Metadata.getInstance(nextItemName);
+              while (nextGroupInstance.opened && nextGroupInstance.items.length) {
+                  nextItemName = nextGroupInstance.items[nextGroupInstance.items.length - 1].name;
+                  nextGroupInstance = core.Metadata.getInstance(nextItemName);
+              }
+          }
+          const nextItem = core.Metadata.getInstance(nextItemName);
+          nextItem.setFocus();
+      }
+      toogleGroup(collapse) {
+          if (this.instance.currentItem && this.instance.currentItem.component === 'ZdMenuGroup') {
+              if (this.instance.currentItem.opened && collapse) {
+                  this.instance.currentItem.close();
+              }
+              else if (!collapse) {
+                  this.instance.currentItem.open();
+              }
+          }
+      }
   };
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
@@ -42361,11 +42456,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                               : _vm._e(),
                             _vm._v(" "),
                             !_vm.$slots.topSlot
-                              ? _vm._l(_vm.instance.topSlot, function (item) {
+                              ? _vm._l(_vm.instance.topSlot, function (item, i) {
                                   return _c(
                                     item.component,
                                     _vm._b(
-                                      { key: item.name, tag: "component" },
+                                      {
+                                        key: item.name,
+                                        tag: "component",
+                                        attrs: {
+                                          itemIndex: i,
+                                          parent: _vm.instance,
+                                        },
+                                      },
                                       "component",
                                       item,
                                       false
@@ -42415,7 +42517,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$x = function (inject) {
       if (!inject) return
-      inject("data-v-3a3668e0_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-368f7c97_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 */
@@ -42518,10 +42620,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name, to: _vm.instance.route, link: "" },
         on: {
+          mouseenter: _vm.mouseEnter,
+          focus: function ($event) {
+            return _vm.instance.focus($event)
+          },
           click: function ($event) {
             return _vm.instance.click($event)
           },
-          mouseenter: _vm.mouseEnter,
         },
       },
       [
@@ -42553,11 +42658,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$w = function (inject) {
       if (!inject) return
-      inject("data-v-43cb4ac7_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-43cb4ac7] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
+      inject("data-v-40772f76_0", { source: ".zd-menu-link .zd-menu-link-icon[data-v-40772f76] {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$w = "data-v-43cb4ac7";
+    const __vue_scope_id__$w = "data-v-40772f76";
     /* module identifier */
     const __vue_module_identifier__$w = undefined;
     /* functional template */
@@ -42669,7 +42774,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           id: _vm.instance.name,
           "prepend-icon": _vm.$getIcon(_vm.instance.icon),
         },
-        on: { mouseenter: _vm.mouseEnter },
+        on: {
+          mouseenter: _vm.mouseEnter,
+          click: function ($event) {
+            return _vm.instance.click($event)
+          },
+          focus: function ($event) {
+            return _vm.instance.focus($event)
+          },
+        },
         model: {
           value: _vm.instance.opened,
           callback: function ($$v) {
@@ -42739,7 +42852,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$v = function (inject) {
       if (!inject) return
-      inject("data-v-42e27f1e_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
+      inject("data-v-b3c5529a_0", { source: ".zd-menu-group .v-list-group__header .v-list-group__header__prepend-icon {\n  margin-right: var(--zd-default-padding);\n  margin-left: 2px;\n}\n.zd-menu-group .zd-menu-group-arrow-icon {\n  position: absolute;\n  top: 10px;\n  font-size: 18px;\n  transform: rotate(-90deg);\n}\n.zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-1 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 48px;\n}\n.zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-2 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 58px;\n}\n.zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-3 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 68px;\n}\n.zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-item, .zd-menu-group.zd-menu-item-level-4 .v-list-group__items .v-list-group .v-list-group__header {\n  padding-left: 78px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -42887,11 +43000,11 @@ 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-7486d969_0", { source: ".zd-menu-separator[data-v-7486d969] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
+      inject("data-v-1c5453c1_0", { source: ".zd-menu-separator[data-v-1c5453c1] {\n  margin-bottom: 4px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$t = "data-v-7486d969";
+    const __vue_scope_id__$t = "data-v-1c5453c1";
     /* module identifier */
     const __vue_module_identifier__$t = undefined;
     /* functional template */
@@ -42922,6 +43035,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.modals = [];
+          this.x = 0;
+          this.y = 0;
+          this.dragModal = null;
+          this.dragHandle = null;
       }
       created() {
           this.modals = common.ModalService.modals;
@@ -42932,6 +43049,74 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       getSizeClass(modal) {
           return !modal.fullscreen ? this.getGridClasses(modal.grid) : '';
       }
+      get currentModalEl() {
+          const current = this.modals.find((modal) => modal.isVisible);
+          if (!current)
+              return null;
+          const ref = this.$refs[current.name];
+          const el = (Array.isArray(ref) ? ref[0].$el : ref === null || ref === void 0 ? void 0 : ref.$el);
+          return el || null;
+      }
+      registerMousedown(modal) {
+          if (!this.currentModalEl)
+              return;
+          if (modal.dragHandle) {
+              this.dragHandle = this.currentModalEl.querySelector(modal.dragHandle);
+          }
+          else {
+              this.dragHandle = this.currentModalEl;
+          }
+          if (!this.dragHandle)
+              return;
+          this.dragHandle.addEventListener('mousedown', this.dragStart);
+      }
+      unregisterMousedown() {
+          if (!this.dragHandle)
+              return;
+          this.dragHandle.removeEventListener('mousedown', this.dragStart);
+      }
+      dragStart(event) {
+          var _a;
+          this.dragModal = ((_a = this.currentModalEl) === null || _a === void 0 ? void 0 : _a.parentElement) || null;
+          if (!this.dragModal)
+              return;
+          event.preventDefault();
+          this.x = event.clientX;
+          this.y = event.clientY;
+          document.addEventListener('mousemove', this.dragMove);
+          document.addEventListener('mouseup', this.dragEnd);
+      }
+      dragEnd() {
+          document.removeEventListener('mousemove', this.dragMove);
+          document.removeEventListener('mouseup', this.dragEnd);
+      }
+      dragMove(event) {
+          if (!this.dragModal)
+              return;
+          const dy = event.clientY - this.y;
+          const dx = event.clientX - this.x;
+          const toNum = (str) => Number(str.slice(0, -2));
+          const toPx = (num) => `${num}px`;
+          const threshold = 1;
+          if ((Math.abs(dy) + Math.abs(dx)) >= threshold) {
+              const top = toNum(this.dragModal.style.top);
+              this.dragModal.style.top = toPx(top + dy);
+              const left = toNum(this.dragModal.style.left);
+              this.dragModal.style.left = toPx(left + dx);
+              this.x = event.clientX;
+              this.y = event.clientY;
+          }
+      }
+      getContentClass(modal) {
+          const classes = [
+              'zd-modal-content',
+              this.getSizeClass(modal),
+              modal.cssClass,
+              modal.draggable ? 'zd-modal-draggable' : '',
+              modal.draggable && !modal.dragHandle ? 'zd-modal-draggable-handle' : '',
+          ];
+          return classes.join(' ');
+      }
   };
   ZdModal = __decorate([
       vuePropertyDecorator.Component
@@ -42960,11 +43145,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               fullscreen: modal.fullscreen,
               dark: modal.dark,
               light: modal.light,
-              "content-class":
-                "zd-modal-content " +
-                _vm.getSizeClass(modal) +
-                " " +
-                modal.cssClass,
+              "content-class": _vm.getContentClass(modal),
             },
             model: {
               value: modal.isVisible,
@@ -42977,7 +43158,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           [
             _c(
               "v-card",
-              { staticClass: "zd-modal-card" },
+              {
+                ref: modal.name,
+                refInFor: true,
+                staticClass: "zd-modal-card",
+                on: {
+                  "hook:mounted": function ($event) {
+                    modal.draggable && _vm.registerMousedown(modal);
+                  },
+                  "hook:destroyed": _vm.unregisterMousedown,
+                },
+              },
               [
                 modal.title
                   ? _c(
@@ -43038,7 +43229,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$s = function (inject) {
       if (!inject) return
-      inject("data-v-3ce1058e_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\n}\n.zd-modal-flex {\n  width: 100%;\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}", map: undefined, media: undefined });
+      inject("data-v-d2a8ca1c_0", { source: ".zd-modal-title {\n  padding-bottom: 0px;\n}\n.zd-modal-container {\n  padding: 0;\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}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43551,7 +43742,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$n = function (inject) {
       if (!inject) return
-      inject("data-v-8cea505e_0", { source: ".zd-radio {\n  margin: 0;\n  padding: 0;\n}\n.zd-radio .v-input--radio-group__input > .v-label {\n  width: 100%;\n}\n.zd-radio .v-label {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size) !important;\n  font-weight: var(--zd-font-body1-weight);\n}\n.zd-radio .v-input--selection-controls__input {\n  height: var(--icon-size);\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-radio.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 0 var(--spacing-2) 0;\n}\n.zd-radio.v-input--radio-group--row .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 var(--spacing-4) 0 0;\n}\n.zd-radio .v-input--selection-controls__ripple {\n  border-radius: 50%;\n  cursor: pointer;\n  height: 24px;\n  position: absolute;\n  transition: inherit;\n  width: 24px;\n  left: -7px;\n  top: calc(50% - 19px);\n  margin: 7px;\n}", map: undefined, media: undefined });
+      inject("data-v-77d02259_0", { source: ".zd-radio {\n  margin: 0;\n  padding: 0;\n}\n.zd-radio .v-input--radio-group__input > .v-label {\n  width: 100%;\n}\n.zd-radio .v-label {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size) !important;\n  font-weight: var(--zd-font-body1-weight);\n}\n.zd-radio .v-input--selection-controls__input {\n  height: var(--icon-size);\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-radio.v-input--radio-group--column .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 0 var(--spacing-2) 0;\n}\n.zd-radio.v-input--radio-group--row .v-radio:not(:last-child):not(:only-child) {\n  margin: 0 var(--spacing-4) 0 0;\n}\n.zd-radio .v-input--selection-controls__ripple {\n  border-radius: 50%;\n  cursor: pointer;\n  height: 24px;\n  position: absolute;\n  transition: inherit;\n  width: 24px;\n  left: -7px;\n  top: calc(50% - 19px);\n  margin: 7px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -43854,7 +44045,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$m = function (inject) {
       if (!inject) return
-      inject("data-v-692004ba_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
+      inject("data-v-bae09272_0", { source: ".v-input.v-input__slider.zd-range-slider {\n  margin-top: var(--spacing-1);\n  padding-top: var(--spacing-3);\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-messages {\n  display: none;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot {\n  margin: 0;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot label.v-label {\n  position: absolute !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider .v-slider__thumb:before {\n  left: -13px;\n  top: -13px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider.v-slider--horizontal {\n  min-height: 10px;\n}\n.v-input.v-input__slider.zd-range-slider .v-input__control .v-input__slot .v-slider__tick-label {\n  font-size: var(--zd-font-body1-size);\n  color: var(--zd-font-color);\n}\n.v-input.v-input__slider.zd-range-slider.v-input__slider--inverse-label .v-input__control .v-input__slot label.v-label {\n  left: auto !important;\n  right: 0 !important;\n}\n.v-input.v-input__slider.zd-range-slider .v-slider__thumb {\n  width: 10px;\n  height: 10px;\n  left: -5px;\n}\n.zd-range-limits {\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  font-size: 9px;\n  display: flex;\n  justify-content: space-between;\n  padding-top: var(--spacing-1);\n}\n.zd-thumb-no-customize .v-slider__thumb-container .v-slider__thumb-label-container .v-slider__thumb-label {\n  background-color: transparent !important;\n  color: var(--zd-font-color);\n  padding: 30px 0 0 30px;\n  width: max-content !important;\n  font-size: 9px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44232,7 +44423,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$j = function (inject) {
       if (!inject) return
-      inject("data-v-4e0cc00e_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
+      inject("data-v-463a5f31_0", { source: ".zd-list.v-list--dense .zd-list-group.v-list-item--three-line {\n  min-height: 76px;\n}\n.zd-list .v-list-item .v-list-item__icon {\n  flex-direction: column;\n  justify-content: center;\n  align-self: center;\n  height: auto;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__prepend-icon {\n  margin: 4px 16px 4px 0;\n}\n.zd-list .v-list-item .v-list-item__icon.v-list-group__header__append-icon {\n  margin: 4px 0 4px 16px;\n}\n.zd-list .zd-list-item-title {\n  font-size: var(--zd-font-body4-size);\n  font-weight: var(--zd-font-body4-weight);\n}\n.zd-list .zd-list-item-subtitle {\n  font-size: var(--zd-font-body3-size);\n  font-weight: var(--zd-font-body3-weight);\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -44878,7 +45069,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$i = function (inject) {
       if (!inject) return
-      inject("data-v-0f828f15_0", { source: ".zd-select-multiple--one-line .v-select__slot .v-select__selections {\n  flex-wrap: nowrap;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
+      inject("data-v-dfbdd716_0", { source: ".zd-select-multiple--one-line .v-select__slot .v-select__selections {\n  flex-wrap: nowrap;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple:not(.zd-select-multiple--one-line) .v-select__slot .v-select__selections input {\n  position: relative;\n  top: -2px;\n}\n.zd-select-multiple .v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple-autocomplete.v-input > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple .v-select__slot .v-select__selections {\n  padding: 0px 7px 0px 7px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin: 0 var(--spacing-1) 0 0;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small {\n  height: 15px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip.v-size--x-small .chip-text {\n  font-size: 12px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip--removable.v-size--x-small .v-chip__content .v-chip__close {\n  font-size: 14px !important;\n  margin-left: var(--spacing-2);\n  margin-right: -6px;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .more-items {\n  line-height: 15px;\n}\n.zd-select-multiple .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-input__slot {\n  min-height: 24px;\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections {\n  padding: 0 var(--spacing-1);\n}\n.zd-select-multiple.zd-dense .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple.v-input--is-focused .v-select__slot .v-select__selections .v-chip .v-chip__content .chip-text {\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.v-menu__content.zd-select-menu .v-select-list div.v-list-item__action {\n  margin: 0 var(--zd-default-padding) 0 0;\n}\n.v-menu__content.zd-select-menu .v-select-list > .v-list-item .v-input--selection-controls__ripple {\n  margin: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item--disabled .v-simple-checkbox .v-icon {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45084,7 +45275,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
-        on: { click: _vm.click },
+        on: { click: _vm.click, focus: _vm.focus },
       },
       [
         _c(
@@ -45260,7 +45451,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$h = function (inject) {
       if (!inject) return
-      inject("data-v-d344fa0e_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.zd-select-tree .theme--dark.vue-treeselect__menu-container > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.zd-select-tree .theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.zd-select-tree .theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.zd-select-tree .theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.zd-select-tree .theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.zd-select-tree .theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.zd-select-tree .theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.zd-select-tree .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.zd-select-tree .theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.zd-select-tree .theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.zd-select-tree .theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.zd-select-tree .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.zd-select-tree .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.zd-select-tree .vue-treeselect__option--selected .vue-treeselect__label {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .vue-treeselect__option {\n  position: relative;\n  display: flex;\n}\n.zd-select-tree .vue-treeselect__option-arrow-container {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}", map: undefined, media: undefined });
+      inject("data-v-9ac20d8e_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45308,6 +45499,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: [Number, String], default: Infinity }),
       __metadata("design:type", Object)
   ], ZdSelectTreeMultiple.prototype, "limit", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [String], default: 'LEAF_PRIORITY' }),
+      __metadata("design:type", String)
+  ], ZdSelectTreeMultiple.prototype, "valueConsistsOf", void 0);
   ZdSelectTreeMultiple = __decorate([
       vuePropertyDecorator.Component
   ], ZdSelectTreeMultiple);
@@ -45354,6 +45549,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
+        on: { click: _vm.click, focus: _vm.focus },
       },
       [
         _c(
@@ -45398,6 +45594,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 _c("vue-treeselect", {
                   ref: "instance",
                   attrs: {
+                    "menu-props": {
+                      cssClass: _vm.$isDark(this)
+                        ? "theme--dark"
+                        : _vm.$isLight(this)
+                        ? "theme--light"
+                        : "",
+                    },
                     clearable:
                       _vm.instance.clearable &&
                       !(
@@ -45422,6 +45625,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                     showCount: _vm.instance.showCount,
                     showCountOf: _vm.instance.showCountOf,
                     valueFormat: _vm.instance.returnObject ? "object" : "id",
+                    valueConsistsOf: _vm.instance.valueConsistsOf,
                   },
                   on: {
                     open: _vm.onOpen,
@@ -45442,7 +45646,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 _vm._v(" "),
                 !!_vm.instance.datasource && _vm.instance.datasource.loading
                   ? _c("v-progress-linear", {
-                      staticClass: "zd-select-tree-multiple-loading",
+                      staticClass: "zd-select-tree-loading",
                       attrs: {
                         active:
                           !!_vm.instance.datasource &&
@@ -45517,7 +45721,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$g = function (inject) {
       if (!inject) return
-      inject("data-v-48e7ea9a_0", { source: ".zd-select-tree-multiple-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__control .vue-treeselect__input {\n  color: #fff;\n}\n.zd-select-tree-multiple.theme--dark .vue-treeselect__menu {\n  background-color: #1e1e1e;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
+      inject("data-v-ca5e6a68_0", { source: ".zd-select-tree-loading {\n  margin-top: -1px;\n  width: calc(100% - 2px);\n  margin-left: 1px;\n}\n.zd-select-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-family: var(--font-family);\n  margin-top: var(--spacing-1);\n}\n.zd-select-tree.theme--dark .vue-treeselect__control {\n  background-color: #1e1e1e;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item {\n  background: #555;\n}\n.zd-select-tree.theme--dark .vue-treeselect__multi-value-item, .zd-select-tree.theme--dark .vue-treeselect__multi-value-item .vue-treeselect__value-remove {\n  color: #fff;\n}\n.zd-select-tree .vue-treeselect__control {\n  border-radius: var(--border);\n  height: 34px;\n}\n.zd-select-tree .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 32px;\n}\n.zd-select-tree .vue-treeselect__control-arrow-container svg {\n  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;\n}\n.zd-select-tree .zd-select-tree-label {\n  font-weight: var(--zd-font-body1-weight);\n  pointer-events: none;\n  line-height: 1rem;\n  position: relative;\n  top: -1px;\n}\n.zd-select-tree .zd-select-tree-label p {\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-select-tree.zd-select-tree-disabled {\n  opacity: 0.5;\n}\n.zd-select-tree .vue-treeselect__single-value, .zd-select-tree input {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  cursor: text;\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-label {\n  color: var(--v-error-base) !important;\n  animation: v-shake 0.6s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-details {\n  color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control {\n  border-color: var(--v-error-base) !important;\n}\n.zd-select-tree.zd-select-tree-error .vue-treeselect__control-arrow-container svg, .zd-select-tree.zd-select-tree-error .vue-treeselect__x-container svg {\n  color: var(--v-error-base);\n}\n.zd-select-tree.zd-select-tree-error .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-select-tree-error .zd-select-tree-append-outer-icon {\n  color: var(--v-error-base);\n}\n.zd-select-tree .vue-treeselect--focused .vue-treeselect__control-arrow-container svg, .zd-select-tree .vue-treeselect--focused .vue-treeselect__x-container svg {\n  color: var(--v-primary-base);\n}\n.zd-select-tree .zd-select-tree-details {\n  min-height: 13px;\n  font-size: 11px;\n  display: flex;\n  flex: 1 0 auto;\n  max-width: 100%;\n  overflow: hidden;\n  color: rgba(0, 0, 0, 0.6);\n  line-height: 1;\n  position: relative;\n  top: 1px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-details {\n  min-height: 11px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control {\n  height: 24px;\n}\n.zd-select-tree.zd-dense .vue-treeselect__control .vue-treeselect__single-value {\n  line-height: 22px;\n}\n.zd-select-tree.zd-dense .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense .zd-select-tree-append-outer-icon {\n  margin-top: 20px;\n}\n.zd-select-tree.zd-dense.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-dense.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 4px;\n}\n.zd-select-tree.zd-no-helper .zd-select-tree-details {\n  display: none;\n}\n.zd-select-tree.zd-no-border .vue-treeselect__control {\n  border: none !important;\n}\n.zd-select-tree .zd-select-tree-container {\n  display: flex;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon, .zd-select-tree .zd-select-tree-append-outer-icon {\n  font-size: var(--icon-size-small);\n  margin-top: 25px;\n  height: 16px;\n}\n.zd-select-tree .zd-select-tree-prepend-outer-icon {\n  margin-right: 8px;\n}\n.zd-select-tree.zd-no-label .zd-select-tree-prepend-outer-icon, .zd-select-tree.zd-no-label .zd-select-tree-append-outer-icon {\n  margin-top: 10px;\n}\n.zd-select-tree .zd-select-tree-append-outer-icon {\n  margin-left: 8px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}\n.vue-treeselect__label {\n  padding-left: 10px;\n}\n.vue-treeselect__menu-container .vue-treeselect__icon-warning {\n  display: none;\n}\n.vue-treeselect__menu-container .vue-treeselect__option--disabled {\n  opacity: 0.5;\n}\n.vue-treeselect__menu-container .vue-treeselect__option::before {\n  bottom: 0;\n  content: \"\";\n  left: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  right: 0;\n  top: 0;\n  box-sizing: inherit;\n  height: inherit;\n}\n.vue-treeselect__menu-container .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  background: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__label {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  font-family: var(--font-family);\n  color: var(--zd-font-color);\n}\n.vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__label-container .vue-treeselect__label, .vue-treeselect__menu-container .vue-treeselect__option--selected .vue-treeselect__option-arrow {\n  color: var(--v-primary-base);\n}\n.vue-treeselect__menu-container .vue-treeselect__option {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container {\n  align-items: center;\n  display: flex;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option::before {\n  background-color: #000;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__option:hover::before {\n  opacity: 0.04;\n}\n.vue-treeselect__menu-container.theme--light .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.1;\n}\n.vue-treeselect__menu-container.theme--dark > div {\n  background-color: #1e1e1e;\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__label {\n  color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--highlight {\n  background-color: transparent;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option::before {\n  background-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option:hover::before {\n  opacity: 0.08;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__list-item > div.vue-treeselect__option--selected::before {\n  opacity: 0.2;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__checkbox:not(.vue-treeselect__checkbox--checked):not(.vue-treeselect__checkbox--indeterminate) {\n  background-color: transparent;\n  border-color: #fff;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__option--selected .vue-treeselect__count {\n  opacity: 0.8;\n}\n.vue-treeselect__menu-container.theme--dark .vue-treeselect__menu {\n  border-color: #1e1e1e;\n}", map: undefined, media: undefined })
+  ,inject("data-v-ca5e6a68_1", { source: ".zd-select-tree-multiple .vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 1px 0;\n  line-height: 16px;\n}\n.zd-select-tree-multiple .vue-treeselect--multi .vue-treeselect__input {\n  padding-top: 2px;\n  padding-bottom: 2px;\n  line-height: 15px;\n}\n.vue-treeselect--searchable .vue-treeselect__multi-value-item-container {\n  margin-top: 3px;\n}\n.vue-treeselect--multi :not(.vue-treeselect--searchable) .vue-treeselect__multi-value-item-container {\n  margin: 3px 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -45925,11 +46130,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$e = function (inject) {
       if (!inject) return
-      inject("data-v-568f9116_0", { source: ".zd-stepper[data-v-568f9116] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-568f9116] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
+      inject("data-v-7b629196_0", { source: ".zd-stepper[data-v-7b629196] {\n  box-shadow: var(--shadow-3);\n}\n.zd-stepper.v-stepper--vertical[data-v-7b629196] .v-stepper__step__step {\n  margin: 0 var(--spacing-2) 0 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$e = "data-v-568f9116";
+    const __vue_scope_id__$e = "data-v-7b629196";
     /* module identifier */
     const __vue_module_identifier__$e = undefined;
     /* functional template */
@@ -46592,11 +46797,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-74f11808_0", { source: ".zd-tabs[data-v-74f11808] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-bar,\n.zd-tabs[data-v-74f11808]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-74f11808]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-74f11808]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-74f11808]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-74f11808]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-74f11808]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
+      inject("data-v-0214eb88_0", { source: ".zd-tabs[data-v-0214eb88] {\n  display: flex;\n  flex-direction: column;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar,\n.zd-tabs[data-v-0214eb88]  .v-tabs-items {\n  background-color: transparent;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar {\n  height: auto;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar .v-tabs-slider-wrapper {\n  bottom: -1px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-bar__content {\n  border-bottom: solid 1px var(--v-grey-lighten4);\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs {\n  margin-bottom: var(--spacing-4);\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__next,\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__prev {\n  flex-basis: 30px;\n  min-width: 30px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__next .v-icon,\n.zd-tabs[data-v-0214eb88]  .v-tabs .v-slide-group__prev .v-icon {\n  font-size: 18px;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs {\n  flex-grow: 0;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-items {\n  flex-grow: 1;\n}\n.zd-tabs[data-v-0214eb88]  .v-tabs-items .v-window__container {\n  height: 100% !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$a = "data-v-74f11808";
+    const __vue_scope_id__$a = "data-v-0214eb88";
     /* module identifier */
     const __vue_module_identifier__$a = undefined;
     /* functional template */
@@ -46800,11 +47005,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$8 = function (inject) {
       if (!inject) return
-      inject("data-v-92cd83f8_0", { source: ".zd-tabs-tab-item[data-v-92cd83f8] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-92cd83f8] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-92cd83f8] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-92cd83f8] {\n  height: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-8457e6f8_0", { source: ".zd-tabs-tab-item[data-v-8457e6f8] {\n  transition: none;\n}\n.zd-tabs-tab-item > .container[data-v-8457e6f8] {\n  padding: 0;\n}\n.zd-tabs .zd-tabs-tab-item[data-v-8457e6f8] {\n  height: 100%;\n}\n.zd-tabs .zd-tabs-tab-item .container[data-v-8457e6f8] {\n  height: 100%;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$8 = "data-v-92cd83f8";
+    const __vue_scope_id__$8 = "data-v-8457e6f8";
     /* module identifier */
     const __vue_module_identifier__$8 = undefined;
     /* functional template */
@@ -47048,11 +47253,11 @@ 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-73ff320e_0", { source: ".zd-text p[data-v-73ff320e] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-0be70f9e_0", { source: ".zd-text p[data-v-0be70f9e] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
-    const __vue_scope_id__$6 = "data-v-73ff320e";
+    const __vue_scope_id__$6 = "data-v-0be70f9e";
     /* module identifier */
     const __vue_module_identifier__$6 = undefined;
     /* functional template */
@@ -47266,7 +47471,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-11762f00_0", { source: ".v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+      inject("data-v-1d4fb0ec_0", { source: ".v-input.zd-textarea > .v-input__control > .v-input__slot {\n  height: auto;\n}\n.v-input.zd-textarea textarea {\n  margin: var(--spacing-2);\n  line-height: unset;\n}\n.v-input.zd-textarea.zd-text-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.v-input.zd-textarea.zd-text-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.v-input.zd-textarea.zd-text-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.v-input.zd-textarea .v-input__append-inner, .v-input.zd-textarea .v-input__prepend-inner {\n  align-self: flex-start;\n  margin-top: var(--spacing-2);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon {\n  height: var(--icon-size-small);\n  width: var(--icon-size-small);\n  min-width: var(--icon-size-small);\n}\n.v-input.zd-textarea .v-input__append-inner .v-input__icon .v-icon, .v-input.zd-textarea .v-input__prepend-inner .v-input__icon .v-icon {\n  font-size: var(--icon-size-small);\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__append-inner,\n.v-input.zd-textarea.zd-no-border:not(.error--text) .v-input__prepend-inner {\n  margin-top: 0;\n}\n.v-input.zd-textarea.zd-no-border:not(.error--text) > .v-input__control > .v-input__slot textarea {\n  margin-top: 0;\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -47608,7 +47813,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$4 = function (inject) {
       if (!inject) return
-      inject("data-v-03964b77_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-6f332373_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 */
@@ -47779,7 +47984,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$3 = function (inject) {
       if (!inject) return
-      inject("data-v-1e32e9cf_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-afab5fca_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 */
@@ -48177,7 +48382,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$2 = function (inject) {
       if (!inject) return
-      inject("data-v-652a6a36_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: #77258390;\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
+      inject("data-v-0df755fc_0", { source: ".zd-tree {\n  color: var(--zd-font-color);\n  font-size: var(--zd-font-body1-size);\n  font-weight: normal;\n}\n.zd-tree.theme--light .sl-vue-tree-title {\n  color: var(--zd-font-color);\n}\n.zd-tree.theme--dark .sl-vue-tree-title {\n  color: #fff;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node {\n  padding-top: 3px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-node-item {\n  height: 30px;\n  line-height: 30px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item {\n  background-color: #77258390;\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node.sl-vue-tree-selected > .sl-vue-tree-node-item .sl-vue-tree-toggle .v-icon {\n  color: var(--zd-font-color);\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-node .sl-vue-tree-toggle span .v-icon {\n  margin-right: -6px;\n}\n.zd-tree .sl-vue-tree-nodes-list .sl-vue-tree-gap {\n  width: 32px;\n}\n.zd-tree .item-title {\n  padding-left: 6px;\n}\n.zd-tree .item-title.has-children {\n  font-weight: 700;\n}\n.zd-tree .item-title.is-clickable {\n  cursor: pointer;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -48291,6 +48496,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
         { "theme--dark": _vm.$isDark(this) },
         { "theme--light": _vm.$isLight(this) },
+        { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
@@ -48900,7 +49106,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                                   ],
                                                   1
                                                 ),
-                                                _vm._v(" "),
                                                 _c("span", {
                                                   key: item.tree__searched
                                                     ? "a"
@@ -49082,8 +49287,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-49d795f2_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-49d795f2_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
+      inject("data-v-71cd7ad7_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
+  ,inject("data-v-71cd7ad7_1", { source: ".zd-tree-grid.theme--light tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-tree-grid.theme--dark tbody td.zd-table-cell {\n  color: #fff;\n}\n.zd-tree-grid tbody td.zd-table-cell.first {\n  padding-left: 5px !important;\n}\n.zd-tree-grid tbody td.zd-table-cell .zd-table-cell-text .search-result {\n  background: var(--v-grey-lighten4);\n}\n.zd-tree-grid .zd-tree-grid-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid .zd-tree-grid-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid .zd-tree-grid-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid .zd-tree-grid-expand.level10 {\n  width: 200px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -49282,6 +49487,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "zd-tree-grid-editable",
         _vm.instance.cssClass,
         { "zd-grid-flex": _vm.instance.gridHeight || _vm.instance.gridMaxHeight },
+        { "zd-grid-loading": _vm.instance.datasource.loading },
       ],
       style: [_vm.cssColorVars, _vm.instance.cssStyle],
       attrs: {
@@ -50244,8 +50450,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-01fa567e_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: nowrap;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: unset;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}", map: undefined, media: undefined })
-  ,inject("data-v-01fa567e_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
+      inject("data-v-535243ab_0", { source: ".zd-grid {\n  outline: none;\n}\n.zd-grid-flex {\n  display: flex;\n  flex-direction: column;\n}\n.zd-grid-flex .v-data-table__wrapper {\n  flex: 1;\n}\n.zd-grid.theme--light:active table th.zd-table-cell, .zd-grid.theme--light:focus table th.zd-table-cell, .zd-grid.theme--light:focus-within table th.zd-table-cell {\n  color: var(--v-primary-base) !important;\n}\n.zd-grid-toolbar {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: var(--spacing-4);\n  align-items: center;\n}\n.zd-grid-toolbar-slot {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n.zd-grid-search {\n  max-width: 200px;\n}\n.zd-grid table .zd-table-cell {\n  transition: height 0.1s ease;\n}\n.zd-grid table .zd-table-cell.selectable {\n  width: 40px !important;\n  padding-right: var(--spacing-2) !important;\n  max-width: 40px !important;\n  padding-bottom: 0 !important;\n}\n.zd-grid table .zd-table-cell.selectable > div.zd-grid-header-checkbox {\n  margin-top: -2px;\n}\n.zd-grid table .zd-grid-header-checkbox, .zd-grid table .zd-grid-row-checkbox {\n  margin-top: 0;\n  padding-top: 0;\n}\n.zd-grid table .zd-grid-header-checkbox .v-icon, .zd-grid table .zd-grid-row-checkbox .v-icon {\n  font-size: var(--icon-size-small);\n}\n.zd-grid table .zd-grid-header-checkbox .v-input--selection-controls__ripple::before, .zd-grid table .zd-grid-row-checkbox .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-weight);\n  white-space: nowrap;\n  height: 40px;\n  padding: 0 var(--spacing-4) var(--spacing-2) var(--spacing-4);\n  z-index: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-header-cell {\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-left .zd-table-header-cell {\n  justify-content: flex-start;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.text-right .zd-table-header-cell {\n  justify-content: flex-end;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort {\n  opacity: 0;\n  position: relative;\n  display: inline-block;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-icon {\n  position: relative;\n  transition: none;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order {\n  position: absolute;\n  font-size: 9px;\n  right: 2px;\n  color: var(--zd-font-color);\n  width: 12px;\n  text-align: center;\n  border-radius: 50%;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-sort .zd-table-cell-sort-order.left {\n  right: auto;\n  left: 2px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name {\n  opacity: 0.7;\n  white-space: pre;\n  display: inline-block;\n  vertical-align: bottom;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell .zd-table-cell-name.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.sortable {\n  cursor: pointer;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: -8px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.asc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: 6px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-icon {\n  top: 3px;\n  transform: rotate(180deg);\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell.active.desc .zd-table-cell-sort .zd-table-cell-sort-order {\n  top: -1px;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-name, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-name {\n  opacity: 1;\n}\n.zd-grid table .zd-grid-table-header th.zd-table-cell:hover .zd-table-cell-sort, .zd-grid table .zd-grid-table-header th.zd-table-cell.active .zd-table-cell-sort {\n  opacity: 1;\n}\n.zd-grid table thead tr th .zd-grid-resize-handle {\n  height: 100%;\n  width: 10px;\n  display: block;\n  position: absolute;\n  top: 0;\n  right: 0;\n  cursor: ew-resize;\n  font-size: 15px;\n  color: #ccc;\n  display: none;\n}\n.zd-grid table thead tr th:hover .zd-grid-resize-handle {\n  display: block;\n}\n.zd-grid table tbody tr td.zd-table-cell {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  padding: 0 var(--spacing-4);\n  height: 48px;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable {\n  overflow: hidden;\n}\n.zd-grid table tbody tr td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 0.7;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text {\n  display: block;\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  overflow-wrap: break-word;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-hidden {\n  text-overflow: unset;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-wrap {\n  white-space: pre-wrap;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp {\n  white-space: pre-wrap;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-2 {\n  -webkit-line-clamp: 2;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-3 {\n  -webkit-line-clamp: 3;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-4 {\n  -webkit-line-clamp: 4;\n}\n.zd-grid table tbody tr td.zd-table-cell .zd-table-cell-text.overflow-clamp.overflow-clamp-5 {\n  -webkit-line-clamp: 5;\n}\n.zd-grid table tbody tr:hover td.zd-table-cell.selectable .zd-grid-row-checkbox, .zd-grid table tbody tr.active td.zd-table-cell.selectable .zd-grid-row-checkbox {\n  opacity: 1;\n}\n.zd-grid table tbody tr.current {\n  background: var(--current-row-color);\n}\n.zd-grid table tbody tr.current:hover {\n  background: var(--current-row-hover-color) !important;\n}\n.zd-grid.v-data-table--dense table thead tr th.zd-table-cell {\n  padding: 0 var(--spacing-2) var(--spacing-1) var(--spacing-2);\n  height: 24px;\n}\n.zd-grid.v-data-table--dense table tbody tr td.zd-table-cell {\n  padding: 0 var(--spacing-2);\n  height: 29px;\n}\n.zd-grid.theme--light.v-data-table {\n  background-color: transparent;\n}\n.zd-grid.theme--light table thead th.zd-table-cell {\n  color: var(--zd-font-color) !important;\n}\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--indeterminate .v-icon,\n.zd-grid.theme--light table thead th.zd-table-cell.selectable .zd-grid-header-checkbox.v-input--is-label-active .v-icon {\n  color: var(--v-primary-base);\n}\n.zd-grid.theme--light table tbody td.zd-table-cell {\n  color: var(--zd-font-color);\n}\n.zd-grid.theme--light table tbody tr:not(:last-child) td:not(.v-data-table__mobile-row) {\n  border-bottom: solid var(--regular) var(--v-grey-lighten5);\n}\n.zd-grid.theme--light.v-data-table--fixed-header table thead th.zd-table-cell {\n  box-shadow: inset 0 -1px 0 var(--v-grey-lighten3);\n}\n.zd-grid-footer {\n  margin: 24px 0 0 0;\n  display: flex;\n  align-items: center;\n}\n.zd-grid .zd-skeleton-table-cell .v-skeleton-loader__table-cell {\n  height: auto;\n}\n.zd-grid .zd-grid-cell-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-grid .zd-grid-cell-tooltip.zd-grid-cell-tooltip-show {\n  display: block;\n}\n.zd-grid-loading {\n  pointer-events: none;\n}", map: undefined, media: undefined })
+  ,inject("data-v-535243ab_1", { source: ".zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-right .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-right .zd-table-cell-inline-edit {\n  justify-content: flex-end;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable.text-center .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable.text-center .zd-table-cell-inline-edit {\n  justify-content: center;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit {\n  display: flex;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-inline-edit .zd-table-cell-edit-icon .v-icon {\n  display: flex;\n  font-size: 18px;\n  margin-right: var(--spacing-1);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text {\n  padding: 0 8px;\n  position: relative;\n  display: block;\n  height: 20px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  content: \"\";\n  position: absolute;\n  width: 1px;\n  height: var(--spacing-1);\n  bottom: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:before {\n  left: 0;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-column-editable .zd-table-cell-text:after, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text:after {\n  right: 0px;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable {\n  cursor: pointer;\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable {\n  border-bottom: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:before, .zd-tree-grid-editable table tbody tr td.zd-table-cell.zd-table-cell-editable .zd-table-cell-text.zd-table-cell-text-editable:after {\n  border-left: solid var(--regular) var(--v-grey-lighten4);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand {\n  display: inline-block;\n  text-align: end;\n  vertical-align: baseline;\n  height: 10px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon {\n  transition: transform 0.3s ease;\n  -webkit-transition: transform 0.3s ease;\n  font-size: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon::after {\n  content: none;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand .v-icon.opened {\n  transform: rotate(90deg);\n  -webkit-transform: rotate(90deg);\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level1 {\n  width: 20px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level2 {\n  width: 40px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level3 {\n  width: 60px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level4 {\n  width: 80px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level5 {\n  width: 100px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level6 {\n  width: 120px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level7 {\n  width: 140px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level8 {\n  width: 160px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level9 {\n  width: 180px;\n}\n.zd-tree-grid-editable .zd-tree-grid-editable-expand.level10 {\n  width: 200px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot {\n  height: 22px;\n}\n.zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot input, .zd-tree-grid-editable.v-data-table--dense table tbody .zd-input.zd-text-input .v-input__slot .v-select__selections {\n  height: 22px;\n  max-height: 22px;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */