@zeedhi/vuetify 1.63.0 → 1.64.0

package/dist/zd-vuetify.esm.js

@@ -1,5 +1,5 @@
 import VueI18Next from '@panter/vue-i18next';
-import { Metadata, Mask, Config, I18n, DateHelper, Router, KeyMap, dayjs, VersionService } from '@zeedhi/core';
+import { Metadata, Config, I18n, Mask, DateHelper, Router, KeyMap, dayjs, VersionService } from '@zeedhi/core';
 import VueApexCharts from 'vue-apexcharts';
 import SlVueTree from 'sl-vue-tree';
 import 'sl-vue-tree/dist/sl-vue-tree-minimal.css';
@@ -37653,13 +37653,36 @@ let ZdComponent = ZdComponent_1 = class ZdComponent extends Vue {
                     parent = parent.$parent;
                 }
             }
-            this.instance = new this.instanceType(Object.assign(Object.assign({}, this.$props), { parent: (parent === null || parent === void 0 ? void 0 : parent.instance) || parent, events: Object.assign(Object.assign({}, this.$props.events), this.$listeners) }));
+            this.instance = new this.instanceType(Object.assign(Object.assign({}, this.$props), { parent: (parent === null || parent === void 0 ? void 0 : parent.instance) || parent, events: this.mergeEvents() }));
             this.instance.onCreated();
         }
         if ((_a = this.$vnode.data) === null || _a === void 0 ? void 0 : _a.style) {
             console.warn('You must use cssStyle property instead of style');
         }
     }
+    mergeEvents() {
+        const evtNames = Object.keys(this.$listeners);
+        const merged = {};
+        evtNames.forEach((evtName) => {
+            const eventCb = this.$props.events[evtName];
+            const listenerCb = this.$listeners[evtName];
+            if (Array.isArray(listenerCb)) {
+                merged[evtName] = listenerCb;
+            }
+            else {
+                merged[evtName] = [listenerCb];
+            }
+            if (!eventCb)
+                return;
+            if (Array.isArray(eventCb)) {
+                merged[evtName] = [...merged[evtName], ...eventCb];
+            }
+            else {
+                merged[evtName].push(eventCb);
+            }
+        });
+        return Object.assign(Object.assign({}, this.$props.events), merged);
+    }
     createDirectives() {
         var _a;
         const directives = (_a = this.$options.propsData) === null || _a === void 0 ? void 0 : _a.directives;
@@ -37744,6 +37767,12 @@ let ZdComponent = ZdComponent_1 = class ZdComponent extends Vue {
     blur(event) {
         this.instance.blur(event, this.$el);
     }
+    mouseenter(event) {
+        this.instance.mouseenter(event, this.$el);
+    }
+    mouseleave(event) {
+        this.instance.mouseleave(event, this.$el);
+    }
     superMethods(classObj) {
         let parent = this.constructor;
         while (parent.super.name !== classObj.name && parent.super.name !== ZdComponent_1.name) {
@@ -38353,7 +38382,10 @@ var __vue_render__$1m = function () {
       _vm._l(_vm.instance.children, function (child, index) {
         return _c(
           child.component,
-          _vm._b({ key: index, tag: "component" }, "component", child, false)
+          _vm._g(
+            _vm._b({ key: index, tag: "component" }, "component", child, false),
+            _vm.$listeners
+          )
         )
       }),
       _vm._v(" "),
@@ -38368,7 +38400,7 @@ __vue_render__$1m._withStripped = true;
   /* style */
   const __vue_inject_styles__$1m = function (inject) {
     if (!inject) return
-    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 });
+    inject("data-v-b09b8d98_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 */
@@ -38652,68 +38684,71 @@ var __vue_render__$1k = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-btn",
-    _vm._g(
-      _vm._b(
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.instance.isVisible,
-              expression: "instance.isVisible",
-            },
-          ],
-          class: [_vm.instance.cssClass, "zd-button"],
-          style: _vm.instance.cssStyle,
-          attrs: {
-            id: _vm.instance.name,
-            name: _vm.instance.name,
-            dark: _vm.instance.dark,
-            light: _vm.instance.light,
-            tabindex: _vm.instance.tabStop ? "" : "-1",
-          },
-          on: {
-            click: function ($event) {
-              return _vm.click($event)
-            },
-            focus: function ($event) {
-              return _vm.focus($event)
-            },
-            blur: function ($event) {
-              return _vm.blur($event)
-            },
+    _vm._b(
+      {
+        directives: [
+          {
+            name: "show",
+            rawName: "v-show",
+            value: _vm.instance.isVisible,
+            expression: "instance.isVisible",
           },
-        },
-        "v-btn",
-        {
-          absolute: _vm.instance.absolute,
-          block: _vm.instance.block,
-          bottom: _vm.instance.bottom,
-          color: _vm.instance.color,
+        ],
+        class: [_vm.instance.cssClass, "zd-button"],
+        style: _vm.instance.cssStyle,
+        attrs: {
+          id: _vm.instance.name,
+          name: _vm.instance.name,
           dark: _vm.instance.dark,
-          disabled: _vm.instance.disabled,
-          fab: _vm.instance.fab,
-          text: _vm.instance.flat && !_vm.instance.outline,
-          fixed: _vm.instance.fixed,
-          href: _vm.instance.href,
-          icon: _vm.instance.icon,
-          large: _vm.instance.large,
-          left: _vm.instance.left,
           light: _vm.instance.light,
-          outlined: _vm.instance.outline,
-          right: _vm.instance.right,
-          rounded: _vm.instance.round,
-          small: _vm.instance.small,
-          target: _vm.instance.target,
-          tile: _vm.instance.tile,
-          to: _vm.instance.to,
-          top: _vm.instance.top,
-          type: _vm.instance.type,
-          width: _vm.instance.width,
+          tabindex: _vm.instance.tabStop ? "" : "-1",
         },
-        false
-      ),
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
+        on: {
+          click: function ($event) {
+            return _vm.click($event)
+          },
+          focus: function ($event) {
+            return _vm.focus($event)
+          },
+          blur: function ($event) {
+            return _vm.blur($event)
+          },
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
+          },
+        },
+      },
+      "v-btn",
+      {
+        absolute: _vm.instance.absolute,
+        block: _vm.instance.block,
+        bottom: _vm.instance.bottom,
+        color: _vm.instance.color,
+        dark: _vm.instance.dark,
+        disabled: _vm.instance.disabled,
+        fab: _vm.instance.fab,
+        text: _vm.instance.flat && !_vm.instance.outline,
+        fixed: _vm.instance.fixed,
+        href: _vm.instance.href,
+        icon: _vm.instance.icon,
+        large: _vm.instance.large,
+        left: _vm.instance.left,
+        light: _vm.instance.light,
+        outlined: _vm.instance.outline,
+        right: _vm.instance.right,
+        rounded: _vm.instance.round,
+        small: _vm.instance.small,
+        target: _vm.instance.target,
+        tile: _vm.instance.tile,
+        to: _vm.instance.to,
+        top: _vm.instance.top,
+        type: _vm.instance.type,
+        width: _vm.instance.width,
+      },
+      false
     ),
     [
       _vm.instance.iconName && !_vm.instance.reverse
@@ -38741,7 +38776,7 @@ __vue_render__$1k._withStripped = true;
   /* style */
   const __vue_inject_styles__$1k = function (inject) {
     if (!inject) return
-    inject("data-v-b33744a8_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-1);\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-left: var(--spacing-1);\n}", map: undefined, media: undefined });
+    inject("data-v-44e2f37c_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-1);\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-left: var(--spacing-1);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -39070,63 +39105,66 @@ var __vue_render__$1i = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-card",
-    _vm._g(
-      {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        class: [
-          _vm.instance.cssClass,
-          "zd-card",
-          {
-            "zd-card-cursor-auto":
-              !_vm.instance.link &&
-              !_vm.instance.href &&
-              !_vm.instance.to &&
-              !_vm.instance.events.click,
-          },
-        ],
-        style: _vm.instance.cssStyle,
-        attrs: {
-          id: _vm.instance.name,
-          name: _vm.instance.name,
-          activeClass: _vm.instance.activeClass,
-          append: _vm.instance.append,
-          color: _vm.instance.color,
-          dark: _vm.instance.dark,
-          disabled: _vm.instance.disabled,
-          elevation: _vm.instance.elevation,
-          flat: _vm.instance.flat,
-          height: _vm.instance.height,
-          href: _vm.instance.href,
-          hover: _vm.instance.hover,
-          img: _vm.instance.img,
-          light: _vm.instance.light,
-          link: _vm.instance.link,
-          maxHeight: _vm.instance.maxHeight,
-          maxWidth: _vm.instance.maxWidth,
-          minHeight: _vm.instance.minHeight,
-          minWidth: _vm.instance.minWidth,
-          outlined: _vm.instance.outlined,
-          raised: _vm.instance.raised,
-          ripple: _vm.instance.ripple,
-          tile: _vm.instance.tile,
-          to: _vm.instance.to,
-          width: _vm.instance.width,
+    {
+      directives: [
+        {
+          name: "show",
+          rawName: "v-show",
+          value: _vm.instance.isVisible,
+          expression: "instance.isVisible",
         },
-        on: {
-          click: function ($event) {
-            return _vm.click($event)
-          },
+      ],
+      class: [
+        _vm.instance.cssClass,
+        "zd-card",
+        {
+          "zd-card-cursor-auto":
+            !_vm.instance.link &&
+            !_vm.instance.href &&
+            !_vm.instance.to &&
+            !_vm.instance.events.click,
         },
+      ],
+      style: _vm.instance.cssStyle,
+      attrs: {
+        id: _vm.instance.name,
+        name: _vm.instance.name,
+        activeClass: _vm.instance.activeClass,
+        append: _vm.instance.append,
+        color: _vm.instance.color,
+        dark: _vm.instance.dark,
+        disabled: _vm.instance.disabled,
+        elevation: _vm.instance.elevation,
+        flat: _vm.instance.flat,
+        height: _vm.instance.height,
+        href: _vm.instance.href,
+        hover: _vm.instance.hover,
+        img: _vm.instance.img,
+        light: _vm.instance.light,
+        link: _vm.instance.link,
+        maxHeight: _vm.instance.maxHeight,
+        maxWidth: _vm.instance.maxWidth,
+        minHeight: _vm.instance.minHeight,
+        minWidth: _vm.instance.minWidth,
+        outlined: _vm.instance.outlined,
+        raised: _vm.instance.raised,
+        ripple: _vm.instance.ripple,
+        tile: _vm.instance.tile,
+        to: _vm.instance.to,
+        width: _vm.instance.width,
       },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+      on: {
+        click: function ($event) {
+          return _vm.click($event)
+        },
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
+    },
     [
       _vm._l(_vm.instance.children, function (child, index) {
         return _c(
@@ -39151,7 +39189,7 @@ __vue_render__$1i._withStripped = true;
   /* style */
   const __vue_inject_styles__$1i = function (inject) {
     if (!inject) return
-    inject("data-v-5e1a8d4a_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
+    inject("data-v-0d2cd214_0", { source: ".zd-card {\n  padding: var(--spacing-4);\n  overflow: auto;\n}\n.zd-card::before {\n  content: none;\n}\n.zd-card.zd-card-cursor-auto {\n  cursor: auto;\n}\n.zd-card.v-sheet.v-card {\n  border-radius: var(--border);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined) {\n  box-shadow: var(--shadow-3);\n}\n.zd-card.v-sheet.v-card:not(.v-sheet--outlined).v-card--raised {\n  box-shadow: var(--shadow-9);\n}\n.zd-card.v-sheet.v-card--hover:focus, .zd-card.v-sheet.v-card--hover:hover {\n  box-shadow: var(--shadow-5);\n}\n.zd-card.v-sheet.v-card.v-sheet--outlined {\n  border: var(--regular) solid var(--v-secondary-base);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -39933,79 +39971,82 @@ var __vue_render__$1g = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "span",
-    _vm._g(
-      { attrs: { id: _vm.instance.name } },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+    { attrs: { id: _vm.instance.name } },
     [
       _c(
         "v-checkbox",
-        _vm._g(
-          _vm._b(
-            {
-              directives: [
-                {
-                  name: "show",
-                  rawName: "v-show",
-                  value: _vm.instance.isVisible,
-                  expression: "instance.isVisible",
-                },
-              ],
-              ref: "instance",
-              class: [
-                _vm.instance.cssClass,
-                "zd-checkbox",
-                {
-                  "zd-no-helper": !_vm.instance.showHelper,
-                  "zd-no-label": !_vm.instance.showLabel,
-                  "zd-input-required": _vm.instance.validations.required,
-                },
-              ],
-              style: _vm.instance.cssStyle,
-              attrs: {
-                "validate-on-blur": "",
-                name: _vm.instance.name,
-                color: _vm.instance.color,
-                dark: _vm.instance.dark,
-                light: _vm.instance.light,
-                tabindex: _vm.instance.tabStop ? "" : "-1",
-              },
-              on: {
-                focus: function ($event) {
-                  return _vm.focus($event)
-                },
-                blur: function ($event) {
-                  return _vm.blur($event)
-                },
-                change: function ($event) {
-                  return _vm.checkboxChange($event)
-                },
+        _vm._b(
+          {
+            directives: [
+              {
+                name: "show",
+                rawName: "v-show",
+                value: _vm.instance.isVisible,
+                expression: "instance.isVisible",
               },
-              model: {
-                value: _vm.instance.displayValue,
-                callback: function ($$v) {
-                  _vm.$set(_vm.instance, "displayValue", $$v);
-                },
-                expression: "instance.displayValue",
+            ],
+            ref: "instance",
+            class: [
+              _vm.instance.cssClass,
+              "zd-checkbox",
+              {
+                "zd-no-helper": !_vm.instance.showHelper,
+                "zd-no-label": !_vm.instance.showLabel,
+                "zd-input-required": _vm.instance.validations.required,
               },
-            },
-            "v-checkbox",
-            {
+            ],
+            style: _vm.instance.cssStyle,
+            attrs: {
+              "validate-on-blur": "",
+              name: _vm.instance.name,
+              color: _vm.instance.color,
               dark: _vm.instance.dark,
-              disabled: _vm.instance.disabled,
               light: _vm.instance.light,
-              label: _vm.instance.showLabel
-                ? _vm.$t(_vm.instance.label)
-                : undefined,
-              name: _vm.instance.name,
-              readonly: _vm.instance.readonly,
-              inputValue: _vm.instance.value,
-              falseValue: _vm.instance.falseValue,
-              trueValue: _vm.instance.trueValue,
+              tabindex: _vm.instance.tabStop ? "" : "-1",
             },
-            false
-          ),
-          Object.assign({}, _vm.$attrs["dropdown-activator"])
+            on: {
+              click: function ($event) {
+                return _vm.click($event)
+              },
+              mouseenter: function ($event) {
+                return _vm.mouseenter($event)
+              },
+              mouseleave: function ($event) {
+                return _vm.mouseleave($event)
+              },
+              focus: function ($event) {
+                return _vm.focus($event)
+              },
+              blur: function ($event) {
+                return _vm.blur($event)
+              },
+              change: function ($event) {
+                return _vm.checkboxChange($event)
+              },
+            },
+            model: {
+              value: _vm.instance.displayValue,
+              callback: function ($$v) {
+                _vm.$set(_vm.instance, "displayValue", $$v);
+              },
+              expression: "instance.displayValue",
+            },
+          },
+          "v-checkbox",
+          {
+            dark: _vm.instance.dark,
+            disabled: _vm.instance.disabled,
+            light: _vm.instance.light,
+            label: _vm.instance.showLabel
+              ? _vm.$t(_vm.instance.label)
+              : undefined,
+            name: _vm.instance.name,
+            readonly: _vm.instance.readonly,
+            inputValue: _vm.instance.value,
+            falseValue: _vm.instance.falseValue,
+            trueValue: _vm.instance.trueValue,
+          },
+          false
         )
       ),
     ],
@@ -40018,7 +40059,7 @@ __vue_render__$1g._withStripped = true;
   /* style */
   const __vue_inject_styles__$1g = function (inject) {
     if (!inject) return
-    inject("data-v-52304281_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-82aee8da_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 */
@@ -40306,78 +40347,81 @@ var __vue_render__$1e = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-chip",
-    _vm._g(
-      _vm._b(
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.instance.isVisible,
-              expression: "instance.isVisible",
-            },
-          ],
-          class: [
-            _vm.instance.cssClass,
-            {
-              "zd-chip-icon": _vm.instance.iconName,
-              "zd-chip-reverse": _vm.instance.reverse,
-            },
-          ],
-          style: _vm.instance.cssStyle,
-          attrs: { id: _vm.instance.name, name: _vm.instance.name },
-          on: {
-            click: function ($event) {
-              return _vm.click($event)
-            },
-            "click:close": function ($event) {
-              _vm.instance.isVisible = false;
-            },
-            focus: function ($event) {
-              return _vm.focus($event)
-            },
-            blur: function ($event) {
-              return _vm.blur($event)
-            },
+    _vm._b(
+      {
+        directives: [
+          {
+            name: "show",
+            rawName: "v-show",
+            value: _vm.instance.isVisible,
+            expression: "instance.isVisible",
           },
-          model: {
-            value: _vm.instance.value,
-            callback: function ($$v) {
-              _vm.$set(_vm.instance, "value", $$v);
-            },
-            expression: "instance.value",
+        ],
+        class: [
+          _vm.instance.cssClass,
+          {
+            "zd-chip-icon": _vm.instance.iconName,
+            "zd-chip-reverse": _vm.instance.reverse,
+          },
+        ],
+        style: _vm.instance.cssStyle,
+        attrs: { id: _vm.instance.name, name: _vm.instance.name },
+        on: {
+          click: function ($event) {
+            return _vm.click($event)
+          },
+          "click:close": function ($event) {
+            _vm.instance.isVisible = false;
+          },
+          focus: function ($event) {
+            return _vm.focus($event)
+          },
+          blur: function ($event) {
+            return _vm.blur($event)
+          },
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
           },
         },
-        "v-chip",
-        {
-          active: _vm.instance.active,
-          activeClass: _vm.instance.activeClass,
-          close: _vm.instance.closable,
-          closeIcon: _vm.$getIcon(_vm.instance.closeIcon),
-          color: _vm.instance.color,
-          dark: _vm.instance.dark,
-          disabled: _vm.instance.disabled,
-          draggable: _vm.instance.draggable,
-          href: _vm.instance.href,
-          icon: _vm.instance.icon,
-          label: !_vm.instance.round,
-          large: _vm.instance.large,
-          left: _vm.instance.left,
-          light: _vm.instance.light,
-          link: _vm.instance.link,
-          outlined: _vm.instance.outlined,
-          right: _vm.instance.right,
-          ripple: _vm.instance.ripple,
-          small: _vm.instance.small,
-          target: _vm.instance.target,
-          textColor: _vm.instance.textColor,
-          to: _vm.instance.to,
-          xLarge: _vm.instance.xLarge,
-          xSmall: _vm.instance.xSmall,
+        model: {
+          value: _vm.instance.value,
+          callback: function ($$v) {
+            _vm.$set(_vm.instance, "value", $$v);
+          },
+          expression: "instance.value",
         },
-        false
-      ),
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
+      },
+      "v-chip",
+      {
+        active: _vm.instance.active,
+        activeClass: _vm.instance.activeClass,
+        close: _vm.instance.closable,
+        closeIcon: _vm.$getIcon(_vm.instance.closeIcon),
+        color: _vm.instance.color,
+        dark: _vm.instance.dark,
+        disabled: _vm.instance.disabled,
+        draggable: _vm.instance.draggable,
+        href: _vm.instance.href,
+        icon: _vm.instance.icon,
+        label: !_vm.instance.round,
+        large: _vm.instance.large,
+        left: _vm.instance.left,
+        light: _vm.instance.light,
+        link: _vm.instance.link,
+        outlined: _vm.instance.outlined,
+        right: _vm.instance.right,
+        ripple: _vm.instance.ripple,
+        small: _vm.instance.small,
+        target: _vm.instance.target,
+        textColor: _vm.instance.textColor,
+        to: _vm.instance.to,
+        xLarge: _vm.instance.xLarge,
+        xSmall: _vm.instance.xSmall,
+      },
+      false
     ),
     [
       _vm.instance.iconName
@@ -40409,7 +40453,7 @@ __vue_render__$1e._withStripped = true;
   /* style */
   const __vue_inject_styles__$1e = function (inject) {
     if (!inject) return
-    inject("data-v-08d8a458_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
+    inject("data-v-5ff7d808_0", { source: ".v-chip:not(.zd-chip-reverse) .zd-chip-label {\n  margin: 0;\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:first-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip:not(.zd-chip-reverse) .zd-chip-label:not(:last-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:first-child) {\n  margin-right: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .zd-chip-label:not(:last-child) {\n  margin-left: var(--spacing-2);\n}\n.v-chip.zd-chip-reverse .v-chip__content .v-chip__close.v-icon,\n.v-chip.zd-chip-reverse .v-chip__content .v-avatar {\n  margin: 0;\n}\n.v-chip.v-size--default {\n  height: auto;\n  padding: 6px var(--spacing-2);\n  font-size: 12px;\n  line-height: normal;\n}\n.v-chip.v-size--default .v-chip__close.v-icon {\n  font-size: var(--spacing-4) !important;\n}\n.v-chip.v-size--default .v-chip__close.v-icon.v-icon--right, .v-chip.v-size--default .v-chip__close.v-icon.v-icon--left {\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar {\n  height: auto !important;\n  min-width: auto !important;\n  width: auto !important;\n  margin: 0;\n}\n.v-chip.zd-chip-icon .v-avatar .v-icon {\n  font-size: var(--spacing-4);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -40528,6 +40572,17 @@ var __vue_render__$1d = function () {
       ],
       style: _vm.instance.cssStyle,
       attrs: { id: _vm.instance.name },
+      on: {
+        click: function ($event) {
+          return _vm.click($event)
+        },
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
     },
     [
       _c(
@@ -40637,7 +40692,7 @@ __vue_render__$1d._withStripped = true;
   /* style */
   const __vue_inject_styles__$1d = function (inject) {
     if (!inject) return
-    inject("data-v-19dd4196_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  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  display: grid;\n  gap: 0.25rem;\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-2a2ade79_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  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  display: grid;\n  gap: 0.25rem;\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 */
@@ -40713,31 +40768,28 @@ var __vue_render__$1c = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-col",
-    _vm._g(
-      {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        class: _vm.instance.cssClass,
-        style: _vm.instance.cssStyle,
-        attrs: {
-          id: _vm.instance.name,
-          name: _vm.instance.name,
-          cols: _vm.instance.cols,
-          sm: _vm.instance.sm,
-          md: _vm.instance.md,
-          lg: _vm.instance.lg,
-          xl: _vm.instance.xl,
-          offset: _vm.instance.offset,
+    {
+      directives: [
+        {
+          name: "show",
+          rawName: "v-show",
+          value: _vm.instance.isVisible,
+          expression: "instance.isVisible",
         },
+      ],
+      class: _vm.instance.cssClass,
+      style: _vm.instance.cssStyle,
+      attrs: {
+        id: _vm.instance.name,
+        name: _vm.instance.name,
+        cols: _vm.instance.cols,
+        sm: _vm.instance.sm,
+        md: _vm.instance.md,
+        lg: _vm.instance.lg,
+        xl: _vm.instance.xl,
+        offset: _vm.instance.offset,
       },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+    },
     [
       _vm._l(_vm.instance.children, function (child) {
         return _c(
@@ -40950,6 +41002,12 @@ var __vue_render__$1b = function () {
                 click: function ($event) {
                   return _vm.click($event)
                 },
+                mouseenter: function ($event) {
+                  return _vm.mouseenter($event)
+                },
+                mouseleave: function ($event) {
+                  return _vm.mouseleave($event)
+                },
               },
               scopedSlots: _vm._u(
                 [
@@ -41070,7 +41128,7 @@ __vue_render__$1b._withStripped = true;
   /* style */
   const __vue_inject_styles__$1b = function (inject) {
     if (!inject) return
-    inject("data-v-83d4103c_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-08c944a4_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 */
@@ -41274,19 +41332,8 @@ let ZdTextInput = class ZdTextInput extends ZdInput$1 {
             instanceRef.updateValue(true);
         }
     }
-    getMaskValue() {
-        let mask = '';
-        if (typeof this.instance.mask === 'function') {
-            mask = this.instance.mask(Mask.getValueWithoutMask(this.instance.value || ''));
-        }
-        else if (typeof this.instance.mask === 'string' || Array.isArray(this.instance.mask)) {
-            mask = this.instance.mask || '';
-        }
-        mask = Mask.getMaskArray(mask);
-        return mask;
-    }
     get maskProp() {
-        return () => this.getMaskValue();
+        return () => this.instance.getMaskValue();
     }
     mounted() {
         if (this.$el.querySelector) {
@@ -41439,6 +41486,12 @@ var __vue_render__$19 = function () {
               $event.stopPropagation();
               return _vm.click($event)
             },
+            mouseenter: function ($event) {
+              return _vm.mouseenter($event)
+            },
+            mouseleave: function ($event) {
+              return _vm.mouseleave($event)
+            },
             focus: function ($event) {
               return _vm.focus($event)
             },
@@ -41537,7 +41590,7 @@ __vue_render__$19._withStripped = true;
   /* style */
   const __vue_inject_styles__$19 = function (inject) {
     if (!inject) return
-    inject("data-v-6c99bcf2_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.zd-input.v-input.v-input--is-readonly > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-input.v-input.v-input--is-readonly.theme--dark > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-darken2);\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-color-type > .v-input__control > .v-input__slot input {\n  padding: 0;\n  cursor: pointer;\n  max-height: 22px;\n}\n.v-input.zd-text-input.zd-color-type:not(.zd-dense) > .v-input__control > .v-input__slot input {\n  max-height: 34px;\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-0f471e6e_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.zd-input.v-input.v-input--is-readonly > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-input.v-input.v-input--is-readonly.theme--dark > .v-input__control > .v-input__slot {\n  background-color: var(--v-grey-darken2);\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-color-type > .v-input__control > .v-input__slot input {\n  padding: 0;\n  cursor: pointer;\n  max-height: 22px;\n}\n.v-input.zd-text-input.zd-color-type:not(.zd-dense) > .v-input__control > .v-input__slot input {\n  max-height: 34px;\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 */
@@ -42252,19 +42305,6 @@ let ZdDate = class ZdDate extends __vue_component__$19 {
             }
         });
     }
-    getEvents(on) {
-        const events = Object.assign({}, this.instance.events);
-        Object.keys(on).forEach((eventName) => {
-            const callback = this.instance.events[eventName];
-            events[eventName] = ({ event, component, element }) => {
-                if (callback && typeof callback === 'function') {
-                    callback({ event, component, element });
-                }
-                on[eventName](event);
-            };
-        });
-        return events;
-    }
     onPickerMousedown(event) {
         event.preventDefault();
     }
@@ -42436,16 +42476,21 @@ var __vue_render__$15 = function () {
               fn: function (ref) {
                 var on = ref.on;
                 return [
-                  _c("zd-text-input", {
-                    ref: "textInputInstance",
-                    attrs: {
-                      name: _vm.instance.name + "_text-input",
-                      mask: _vm.getDateMask,
-                      "instance-object": _vm.instance,
-                      events: _vm.getEvents(on),
-                      autofill: false,
-                    },
-                  }),
+                  _c(
+                    "zd-text-input",
+                    _vm._g(
+                      {
+                        ref: "textInputInstance",
+                        attrs: {
+                          name: _vm.instance.name + "_text-input",
+                          mask: _vm.getDateMask,
+                          "instance-object": _vm.instance,
+                          autofill: false,
+                        },
+                      },
+                      on
+                    )
+                  ),
                 ]
               },
             },
@@ -42558,7 +42603,7 @@ __vue_render__$15._withStripped = true;
   /* style */
   const __vue_inject_styles__$15 = function (inject) {
     if (!inject) return
-    inject("data-v-a20c4728_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-3eea2326_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-helper-values-option {\n  cursor: pointer;\n}\n.date-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -42648,7 +42693,8 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$19 {
                 if (!this.isPrintableKey(event.key) || Mask.isMaskDelimiter(event.key)) {
                     return;
                 }
-                while (Mask.isMaskDelimiter(value[start]) && value[start] !== ' ') {
+                const maskValue = this.instance.getMaskValue();
+                while (maskValue[start].toString() !== (/\d/).toString()) {
                     start += 1;
                 }
                 const firstSlice = value.substring(0, start);
@@ -42678,19 +42724,6 @@ let ZdDateRange = class ZdDateRange extends __vue_component__$19 {
             }
         });
     }
-    getEvents(on) {
-        const events = Object.assign({}, this.instance.events);
-        Object.keys(on).forEach((eventName) => {
-            const callback = this.instance.events[eventName];
-            events[eventName] = ({ event, component, element }) => {
-                if (callback && typeof callback === 'function') {
-                    callback({ event, component, element });
-                }
-                on[eventName](event);
-            };
-        });
-        return events;
-    }
     onPickerMousedown(event) {
         event.preventDefault();
     }
@@ -42864,16 +42897,21 @@ var __vue_render__$14 = function () {
               fn: function (ref) {
                 var on = ref.on;
                 return [
-                  _c("zd-text-input", {
-                    ref: "textInputInstance",
-                    attrs: {
-                      name: _vm.instance.name + "_text-input",
-                      mask: _vm.getDateMask,
-                      "instance-object": _vm.instance,
-                      events: _vm.getEvents(on),
-                      autofill: false,
-                    },
-                  }),
+                  _c(
+                    "zd-text-input",
+                    _vm._g(
+                      {
+                        ref: "textInputInstance",
+                        attrs: {
+                          name: _vm.instance.name + "_text-input",
+                          mask: _vm.getDateMask,
+                          "instance-object": _vm.instance,
+                          autofill: false,
+                        },
+                      },
+                      on
+                    )
+                  ),
                 ]
               },
             },
@@ -42985,7 +43023,7 @@ __vue_render__$14._withStripped = true;
   /* style */
   const __vue_inject_styles__$14 = function (inject) {
     if (!inject) return
-    inject("data-v-4fd04470_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
+    inject("data-v-7cad0609_0", { source: "div.v-picker--date .v-picker__body {\n  background: transparent;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header {\n  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value:not(.v-date-picker-header__value--disabled) > div button:not(:hover):not(:focus) {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-btn--icon {\n  height: var(--icon-size);\n  width: var(--icon-size);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-header .v-date-picker-header__value button {\n  padding: 0;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table {\n  margin-bottom: 12px;\n  padding: 0 var(--spacing-4);\n  height: 200px;\n  margin-bottom: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table .v-btn.v-btn--active {\n  color: var(--v-secondary-lighten4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--date .v-btn {\n  width: 24px;\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month {\n  padding-top: var(--spacing-4);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month .v-btn {\n  padding: 4px 0 7px 0;\n  height: 24px;\n  width: 56px;\n  min-width: 56px;\n  border-radius: var(--border);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month td {\n  height: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table.v-date-picker-table--month tr:not(:last-child) td {\n  padding-bottom: 24px;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table thead th {\n  color: var(--zd-font-disabled-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent--text {\n  color: var(--zd-primary-base) !important;\n}\ndiv.v-picker--date .v-picker__body .v-date-picker-table table tbody button.v-btn.accent {\n  background: var(--zd-primary-base) !important;\n  color: white !important;\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li {\n  color: var(--zd-font-default-color);\n}\ndiv.v-picker--date .v-picker__body ul.v-date-picker-years li.primary--text {\n  color: var(--zd-primary-base) !important;\n}\n.zd-date-menu-activator .v-menu__activator.v-menu__activator--disabled {\n  cursor: default;\n}\n.date-range-helper-values-button {\n  height: 24px !important;\n  margin-left: 5px;\n  margin-top: 0;\n}\n.date-range-helper-values-button.with-label {\n  margin-top: 20px;\n}\n.date-range-helper-values-option {\n  cursor: pointer;\n}\n.date-range-helper-values-option:hover {\n  background-color: rgba(0, 0, 0, 0.03);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -43251,54 +43289,6 @@ __vue_render__$12._withStripped = true;
     undefined
   );
 
-/**
- * This function was copied from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/activatable/index.ts
- * the only change was to consider ZdDropdown and ZdTooltip as activatable components
- */
-const getActivator = (e, comp) => {
-    // If we've already fetched the activator, re-use
-    if (comp.activatorElement)
-        return comp.activatorElement;
-    let activator = null;
-    if (comp.activator) {
-        const target = comp.internalActivator ? comp.$el : document;
-        if (typeof comp.activator === 'string') {
-            // Selector
-            activator = target.querySelector(comp.activator);
-        }
-        else if (comp.activator.$el) {
-            // Component (ref)
-            activator = comp.activator.$el;
-        }
-        else {
-            // HTMLElement | Element
-            activator = comp.activator;
-        }
-    }
-    else if (comp.activatorNode.length === 1 || (comp.activatorNode.length && !e)) {
-        // Use the contents of the activator slot
-        // There's either only one element in it or we
-        // don't have a click event to use as a last resort
-        const vm = comp.activatorNode[0].componentInstance;
-        const isActivatable = (vm.$options.mixins
-            && vm.$options.mixins.some((m) => m.options && ['activatable', 'menuable'].includes(m.options.name))) || ['ZdDropdown', 'ZdTooltip'].includes(vm.$options.name);
-        if (vm && isActivatable) {
-            // Activator is actually another activatible component, use its activator (#8846)
-            activator = vm.getActivator();
-        }
-        else {
-            activator = comp.activatorNode[0].elm;
-        }
-    }
-    else if (e) {
-        // Activated by a click or focus event
-        activator = (e.currentTarget || e.target);
-    }
-    // The activator should only be a valid element (Ignore comments and text nodes)
-    comp.activatorElement = (activator === null || activator === void 0 ? void 0 : activator.nodeType) === Node.ELEMENT_NODE ? activator : null;
-    return comp.activatorElement;
-};
-
 /**
  * Dropdown component
  */
@@ -43319,12 +43309,6 @@ let ZdDropdown = class ZdDropdown extends ZdComponentRender$1 {
         const { dropdown } = this.$refs;
         return (dropdown === null || dropdown === void 0 ? void 0 : dropdown.getActivator()) || null;
     }
-    mounted() {
-        const { dropdown } = this.$refs;
-        if (dropdown) {
-            dropdown.getActivator = (e) => getActivator(e, dropdown);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
@@ -43449,24 +43433,18 @@ var __vue_render__$11 = function () {
         {
           key: "activator",
           fn: function (ref) {
-            var dropdown = ref.on;
+            var on = ref.on;
             return [
               _c(
                 _vm.instance.activator.component,
-                _vm._b(
-                  {
-                    tag: "component",
-                    attrs: {
-                      "dropdown-activator": Object.assign(
-                        {},
-                        _vm.$attrs["dropdown-activator"],
-                        dropdown
-                      ),
-                    },
-                  },
-                  "component",
-                  _vm.instance.activator,
-                  false
+                _vm._g(
+                  _vm._b(
+                    { tag: "component" },
+                    "component",
+                    _vm.instance.activator,
+                    false
+                  ),
+                  Object.assign({}, on, _vm.$listeners)
                 )
               ),
               _vm._v(" "),
@@ -43529,7 +43507,7 @@ __vue_render__$11._withStripped = true;
   /* style */
   const __vue_inject_styles__$11 = function (inject) {
     if (!inject) return
-    inject("data-v-289939c3_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
+    inject("data-v-6f8750eb_0", { source: ".zd-dropdown {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n  padding: 2px;\n}\n.zd-dropdown .zd-dropdown-component {\n  padding: 6px 14px;\n  border-radius: var(--border);\n}\n.zd-dropdown-hover:hover {\n  background-color: var(--v-grey-lighten5);\n}\n.zd-dropdown-cursor {\n  cursor: var(--cursor);\n}\n.zd-dropdown-menu {\n  margin: 0 !important;\n  padding: 0 !important;\n  box-shadow: var(--shadow-8);\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -43753,6 +43731,12 @@ var __vue_render__$10 = function () {
             click: function ($event) {
               return _vm.click($event)
             },
+            mouseenter: function ($event) {
+              return _vm.mouseenter($event)
+            },
+            mouseleave: function ($event) {
+              return _vm.mouseleave($event)
+            },
             focus: function ($event) {
               return _vm.focus($event)
             },
@@ -43957,7 +43941,7 @@ __vue_render__$10._withStripped = true;
   /* style */
   const __vue_inject_styles__$10 = function (inject) {
     if (!inject) return
-    inject("data-v-5517e855_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 });
+    inject("data-v-7e6ae217_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 */
@@ -47561,6 +47545,17 @@ var __vue_render__$V = function () {
         "min-width": _vm.instance.minWidth,
         width: _vm.instance.width,
       },
+      on: {
+        click: function ($event) {
+          return _vm.click($event)
+        },
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
     },
     [
       _vm.instance.namedSlotsIsVisible
@@ -47735,7 +47730,7 @@ __vue_render__$V._withStripped = true;
   /* style */
   const __vue_inject_styles__$V = function (inject) {
     if (!inject) return
-    inject("data-v-5e6d683c_0", { source: ".zd-header.theme--light.v-app-bar.v-toolbar.v-sheet {\n  background-color: #fff;\n}\n.zd-header-slot {\n  display: flex;\n  padding: 0;\n  align-items: center;\n}\n.zd-header-slot-children {\n  padding-bottom: var(--spacing-2);\n}\n.zd-header-slot-left > *, .zd-header-slot-center > *, .zd-header-slot-right > * {\n  margin: 0 var(--spacing-1);\n  display: inline-flex;\n  vertical-align: middle;\n}\n.zd-header-slot-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-header-slot-right {\n  margin-left: auto;\n}\n.zd-header.padless > .v-toolbar__content {\n  padding: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-28313a58_0", { source: ".zd-header.theme--light.v-app-bar.v-toolbar.v-sheet {\n  background-color: #fff;\n}\n.zd-header-slot {\n  display: flex;\n  padding: 0;\n  align-items: center;\n}\n.zd-header-slot-children {\n  padding-bottom: var(--spacing-2);\n}\n.zd-header-slot-left > *, .zd-header-slot-center > *, .zd-header-slot-right > * {\n  margin: 0 var(--spacing-1);\n  display: inline-flex;\n  vertical-align: middle;\n}\n.zd-header-slot-center {\n  position: absolute;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.zd-header-slot-right {\n  margin-left: auto;\n}\n.zd-header.padless > .v-toolbar__content {\n  padding: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -48148,13 +48143,6 @@ let ZdIcon = class ZdIcon extends ZdComponentRender$1 {
         super(...arguments);
         this.instanceType = Icon;
     }
-    getIconClickEvents() {
-        const events = {};
-        if (this.instance.events.click) {
-            events.click = this.click;
-        }
-        return events;
-    }
 };
 __decorate([
     PropWatch({ type: String, default: '' }),
@@ -48211,41 +48199,49 @@ var __vue_render__$R = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-icon",
-    _vm._g(
-      _vm._b(
-        {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.instance.isVisible,
-              expression: "instance.isVisible",
-            },
-          ],
-          class: [_vm.instance.cssClass, "zd-icon"],
-          style: _vm.instance.cssStyle,
-          attrs: {
-            id: _vm.instance.name,
-            tabindex: _vm.instance.tabStop ? "" : "-1",
+    _vm._b(
+      {
+        directives: [
+          {
+            name: "show",
+            rawName: "v-show",
+            value: _vm.instance.isVisible,
+            expression: "instance.isVisible",
           },
+        ],
+        class: [_vm.instance.cssClass, "zd-icon"],
+        style: _vm.instance.cssStyle,
+        attrs: {
+          id: _vm.instance.name,
+          tabindex: _vm.instance.tabStop ? "" : "-1",
         },
-        "v-icon",
-        {
-          color: _vm.instance.color,
-          dark: _vm.instance.dark,
-          dense: _vm.instance.dense,
-          disabled: _vm.instance.disabled,
-          large: _vm.instance.large,
-          left: _vm.instance.left,
-          light: _vm.instance.light,
-          right: _vm.instance.right,
-          size: _vm.instance.size,
-          small: _vm.instance.small,
-          tag: _vm.instance.tag,
+        on: {
+          click: function ($event) {
+            return _vm.click($event)
+          },
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
+          },
         },
-        false
-      ),
-      _vm.getIconClickEvents()
+      },
+      "v-icon",
+      {
+        color: _vm.instance.color,
+        dark: _vm.instance.dark,
+        dense: _vm.instance.dense,
+        disabled: _vm.instance.disabled,
+        large: _vm.instance.large,
+        left: _vm.instance.left,
+        light: _vm.instance.light,
+        right: _vm.instance.right,
+        size: _vm.instance.size,
+        small: _vm.instance.small,
+        tag: _vm.instance.tag,
+      },
+      false
     ),
     [_vm._v("\n  " + _vm._s(_vm.$getIcon(_vm.instance.iconName)) + "\n")]
   )
@@ -48384,42 +48380,45 @@ var __vue_render__$Q = function () {
       !_vm.instance.errorImagePath || _vm.instance.validImage !== false
         ? _c(
             "img",
-            _vm._g(
-              _vm._b(
-                {
-                  directives: [
-                    {
-                      name: "show",
-                      rawName: "v-show",
-                      value:
-                        !_vm.instance.errorImagePath ||
-                        _vm.instance.validImage === true,
-                      expression:
-                        "!instance.errorImagePath || instance.validImage === true",
-                    },
-                  ],
-                  staticClass: "zd-image-valid",
-                  on: {
-                    load: function ($event) {
-                      return _vm.instance.loadImage()
-                    },
-                    error: function ($event) {
-                      return _vm.instance.errorImage()
-                    },
-                    click: function ($event) {
-                      return _vm.click($event)
-                    },
+            _vm._b(
+              {
+                directives: [
+                  {
+                    name: "show",
+                    rawName: "v-show",
+                    value:
+                      !_vm.instance.errorImagePath ||
+                      _vm.instance.validImage === true,
+                    expression:
+                      "!instance.errorImagePath || instance.validImage === true",
+                  },
+                ],
+                staticClass: "zd-image-valid",
+                on: {
+                  click: function ($event) {
+                    return _vm.click($event)
+                  },
+                  mouseenter: function ($event) {
+                    return _vm.mouseenter($event)
+                  },
+                  mouseleave: function ($event) {
+                    return _vm.mouseleave($event)
+                  },
+                  load: function ($event) {
+                    return _vm.instance.loadImage()
+                  },
+                  error: function ($event) {
+                    return _vm.instance.errorImage()
                   },
                 },
-                "img",
-                {
-                  src: _vm.instance.src,
-                  alt: _vm.instance.alt,
-                  style: _vm.instance.getStyle(),
-                },
-                false
-              ),
-              Object.assign({}, _vm.$attrs["dropdown-activator"])
+              },
+              "img",
+              {
+                src: _vm.instance.src,
+                alt: _vm.instance.alt,
+                style: _vm.instance.getStyle(),
+              },
+              false
             )
           )
         : _vm._e(),
@@ -48433,7 +48432,7 @@ __vue_render__$Q._withStripped = true;
   /* style */
   const __vue_inject_styles__$Q = function (inject) {
     if (!inject) return
-    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 });
+    inject("data-v-6f1e1cb8_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 */
@@ -49010,27 +49009,20 @@ var __vue_render__$M = function () {
             var on = ref.on;
             return [
               _c(
-                "span",
-                _vm._g({}, Object.assign({}, _vm.$attrs["dropdown-activator"])),
-                [
-                  _c(
-                    "zd-button",
-                    _vm._b(
-                      {
-                        attrs: {
-                          name: _vm.instance.name,
-                          "instance-object": _vm.instance,
-                        },
-                      },
-                      "zd-button",
-                      {
-                        events: _vm.getEvents(on),
-                      },
-                      false
-                    )
-                  ),
-                ],
-                1
+                "zd-button",
+                _vm._b(
+                  {
+                    attrs: {
+                      name: _vm.instance.name,
+                      "instance-object": _vm.instance,
+                    },
+                  },
+                  "zd-button",
+                  {
+                    events: _vm.getEvents(on),
+                  },
+                  false
+                )
               ),
             ]
           },
@@ -49078,7 +49070,7 @@ __vue_render__$M._withStripped = true;
   /* style */
   const __vue_inject_styles__$M = function (inject) {
     if (!inject) return
-    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 });
+    inject("data-v-13e9f9c3_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 */
@@ -49592,6 +49584,12 @@ var __vue_render__$K = function () {
       "click:append": function ($event) {
         return _vm.toggle()
       },
+      mouseenter: function ($event) {
+        return _vm.mouseenter($event)
+      },
+      mouseleave: function ($event) {
+        return _vm.mouseleave($event)
+      },
       click: function ($event) {
         return _vm.instance.click($event)
       },
@@ -49793,7 +49791,7 @@ __vue_render__$K._withStripped = true;
   /* style */
   const __vue_inject_styles__$K = function (inject) {
     if (!inject) return
-    inject("data-v-3b5a66dc_0", { source: ".zd-select {\n  display: inline-grid;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
+    inject("data-v-0b97233f_0", { source: ".zd-select .v-input__control .v-input__slot .v-select__slot {\n  position: static;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer {\n  margin-right: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-left: var(--spacing-1);\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-outer, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-outer {\n  margin-top: 5px;\n}\n.zd-select .v-input__control .v-input__slot .v-select__slot .v-input__append-inner, .zd-select .v-input__control .v-input__slot .v-select__slot .v-input__prepend-inner {\n  padding-left: 0;\n  padding-right: 0;\n}\n.zd-select.zd-select-align-left > .v-input__control > .v-input__slot input {\n  text-align: left;\n}\n.zd-select.zd-select-align-center > .v-input__control > .v-input__slot input {\n  text-align: center;\n}\n.zd-select.zd-select-align-right > .v-input__control > .v-input__slot input {\n  text-align: right;\n}\n.zd-select .v-select__selections {\n  padding: 0;\n  width: 172px;\n  overflow: hidden;\n  white-space: nowrap;\n  flex-wrap: nowrap;\n  text-overflow: ellipsis;\n}\n.zd-select .v-select__selections .v-select__selection {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  color: var(--zd-font-color);\n  margin: 0;\n  max-width: none;\n}\n.zd-select .v-select__selections .v-select__selection--disabled {\n  opacity: 0.5;\n}\n.zd-select.zd-dense .v-input__append-inner, .zd-select.zd-dense .v-input__prepend-inner {\n  margin-top: 0;\n}\n.zd-select-append-item .v-list-item__content {\n  font-size: var(--zd-font-body2-size);\n  font-weight: var(--zd-font-body2-size);\n  color: var(--v-primary-base);\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n}\n.v-menu__content.zd-select-menu .v-select-list {\n  padding: 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item {\n  height: auto;\n  min-height: 40px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__content {\n  padding: var(--spacing-2) 0;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item:not(.theme--dark) {\n  color: var(--zd-font-color);\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item__title {\n  font-size: var(--zd-font-body1-size);\n  font-weight: var(--zd-font-body1-weight);\n  height: auto;\n  line-height: unset;\n  white-space: unset;\n  overflow: auto;\n  text-overflow: unset;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled .v-list-item__title {\n  opacity: 0.5;\n}\n.v-menu__content.zd-select-menu .v-select-list .v-list-item.v-list-item--disabled.primary--text .v-list-item__title {\n  color: inherit;\n}\n.v-menu__content.zd-select-menu.zd-dense .v-list-item {\n  height: auto;\n  min-height: 24px;\n  padding: 0 var(--spacing-4);\n}\n.v-menu__content.zd-select-menu.zd-select-align-left .v-list-item__content .v-list-item__title {\n  text-align: left;\n}\n.v-menu__content.zd-select-menu.zd-select-align-center .v-list-item__content .v-list-item__title {\n  text-align: center;\n}\n.v-menu__content.zd-select-menu.zd-select-align-right .v-list-item__content .v-list-item__title {\n  text-align: right;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -52707,6 +52705,12 @@ var __vue_render__$q = function () {
           click: function ($event) {
             return _vm.click($event)
           },
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
+          },
         },
       },
       "v-progress-linear",
@@ -52881,23 +52885,31 @@ var __vue_render__$p = function () {
     _vm._l(_vm.instance.datasource.data, function (row) {
       return _c(
         "v-radio",
-        _vm._g(
-          _vm._b(
-            {
-              key: row[_vm.instance.dataValue],
-              attrs: { tabindex: _vm.instance.tabStop ? "" : "-1" },
-            },
-            "v-radio",
-            {
-              dark: _vm.instance.dark,
-              color: row[_vm.instance.dataColor] || _vm.instance.color,
-              label: row[_vm.$t(_vm.instance.dataLabel)],
-              light: _vm.instance.light,
-              value: row[_vm.instance.dataValue],
+        _vm._b(
+          {
+            key: row[_vm.instance.dataValue],
+            attrs: { tabindex: _vm.instance.tabStop ? "" : "-1" },
+            on: {
+              click: function ($event) {
+                return _vm.click($event)
+              },
+              mouseenter: function ($event) {
+                return _vm.mouseenter($event)
+              },
+              mouseleave: function ($event) {
+                return _vm.mouseleave($event)
+              },
             },
-            false
-          ),
-          Object.assign({}, _vm.$attrs["dropdown-activator"])
+          },
+          "v-radio",
+          {
+            dark: _vm.instance.dark,
+            color: row[_vm.instance.dataColor] || _vm.instance.color,
+            label: row[_vm.$t(_vm.instance.dataLabel)],
+            light: _vm.instance.light,
+            value: row[_vm.instance.dataValue],
+          },
+          false
         )
       )
     }),
@@ -52910,7 +52922,7 @@ __vue_render__$p._withStripped = true;
   /* style */
   const __vue_inject_styles__$p = function (inject) {
     if (!inject) return
-    inject("data-v-5f304d4b_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-cd8d9baa_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 */
@@ -53105,6 +53117,9 @@ var __vue_render__$o = function () {
               _vm.$styleObject(_vm.instance.cssStyle),
             ],
             on: {
+              click: function ($event) {
+                return _vm.click($event)
+              },
               input: function ($event) {
                 return _vm.input($event)
               },
@@ -53213,7 +53228,7 @@ __vue_render__$o._withStripped = true;
   /* style */
   const __vue_inject_styles__$o = function (inject) {
     if (!inject) return
-    inject("data-v-136b22b0_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-e3a5edf8_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 */
@@ -53281,29 +53296,26 @@ var __vue_render__$n = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "v-row",
-    _vm._g(
-      {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        class: _vm.instance.cssClass,
-        style: _vm.instance.cssStyle,
-        attrs: {
-          id: _vm.instance.name,
-          name: _vm.instance.name,
-          dense: _vm.instance.dense,
-          justify: _vm.instance.justify,
-          "no-gutters": _vm.instance.noGutters,
-          align: _vm.instance.align,
+    {
+      directives: [
+        {
+          name: "show",
+          rawName: "v-show",
+          value: _vm.instance.isVisible,
+          expression: "instance.isVisible",
         },
+      ],
+      class: _vm.instance.cssClass,
+      style: _vm.instance.cssStyle,
+      attrs: {
+        id: _vm.instance.name,
+        name: _vm.instance.name,
+        dense: _vm.instance.dense,
+        justify: _vm.instance.justify,
+        "no-gutters": _vm.instance.noGutters,
+        align: _vm.instance.align,
       },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+    },
     [
       _vm._l(_vm.instance.children, function (child) {
         return _c(
@@ -53979,6 +53991,12 @@ var __vue_render__$k = function () {
       click: function ($event) {
         return _vm.selectClick($event)
       },
+      mouseenter: function ($event) {
+        return _vm.mouseenter($event)
+      },
+      mouseleave: function ($event) {
+        return _vm.mouseleave($event)
+      },
       change: function ($event) {
         return _vm.selectChange($event)
       },
@@ -54283,7 +54301,7 @@ __vue_render__$k._withStripped = true;
   /* style */
   const __vue_inject_styles__$k = function (inject) {
     if (!inject) return
-    inject("data-v-5002d6fd_0", { source: ".zd-select-multiple .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n  position: relative;\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: 5px var(--spacing-1) 5px 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 input, .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.zd-dense.zd-input.v-input > .v-input__control > .v-input__slot input {\n  padding: 0 4px;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple.zd-dense.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-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-9abf9b82_0", { source: ".zd-select-multiple .v-select__slot .v-select__selections {\n  flex-wrap: wrap;\n  padding-bottom: 0 !important;\n}\n.zd-select-multiple .v-select__slot .v-select__selections .v-chip {\n  margin-bottom: 0.2rem;\n  margin-top: 0.2rem;\n}\n.zd-select-multiple .v-select__slot .v-select__selections input {\n  position: relative;\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: 5px var(--spacing-1) 5px 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 input, .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.zd-dense.zd-input.v-input > .v-input__control > .v-input__slot input {\n  padding: 0 4px;\n}\n.zd-select-multiple.zd-dense.zd-select-multiple-autocomplete.v-input:not(.v-input--is-focused) > .v-input__control > .v-input__slot > .v-select__slot input {\n  padding: 0;\n}\n.zd-select-multiple.zd-dense.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-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 */
@@ -54517,7 +54535,16 @@ var __vue_render__$j = function () {
       ],
       style: _vm.instance.cssStyle,
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
-      on: { click: _vm.click, focus: _vm.focus },
+      on: {
+        click: _vm.click,
+        focus: _vm.focus,
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
     },
     [
       _c(
@@ -54693,7 +54720,7 @@ __vue_render__$j._withStripped = true;
   /* style */
   const __vue_inject_styles__$j = function (inject) {
     if (!inject) return
-    inject("data-v-53278258_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 > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\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:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\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-073f22d6_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 > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\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:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\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 */
@@ -54795,7 +54822,16 @@ var __vue_render__$i = function () {
       ],
       style: _vm.instance.cssStyle,
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
-      on: { click: _vm.click, focus: _vm.focus },
+      on: {
+        click: _vm.click,
+        focus: _vm.focus,
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
     },
     [
       _c(
@@ -54965,8 +55001,8 @@ __vue_render__$i._withStripped = true;
   /* style */
   const __vue_inject_styles__$i = function (inject) {
     if (!inject) return
-    inject("data-v-4e97820d_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 > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\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:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\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-4e97820d_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: 0;\n  padding-bottom: 0;\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}\n.vue-treeselect__limit-tip {\n  padding-top: 0;\n}\n.vue-treeselect__limit-tip-text {\n  padding: 0;\n  margin: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-07eb5b8b_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 > * {\n  color: var(--zd-font-color) !important;\n  font-size: var(--zd-font-body1-size) !important;\n  font-family: var(--font-family) !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option {\n  display: flex !important;\n}\n.vue-treeselect__menu-container.has-search .vue-treeselect__option-arrow-container {\n  display: flex !important;\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:not(.vue-treeselect__option--hide) {\n  position: relative;\n  display: flex;\n}\n.vue-treeselect__menu-container .vue-treeselect__option-arrow-container:not(.vue-treeselect__option--hide) {\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-07eb5b8b_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: 0;\n  padding-bottom: 0;\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}\n.vue-treeselect__limit-tip {\n  padding-top: 0;\n}\n.vue-treeselect__limit-tip-text {\n  padding: 0;\n  margin: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -55074,10 +55110,6 @@ var __vue_render__$h = function () {
               return [
                 _c(
                   "span",
-                  _vm._g(
-                    {},
-                    Object.assign({}, _vm.$attrs["dropdown-activator"])
-                  ),
                   [
                     _c(
                       "zd-button",
@@ -55511,6 +55543,12 @@ var __vue_render__$f = function () {
       click: function ($event) {
         return _vm.mapClick($event)
       },
+      mouseenter: function ($event) {
+        return _vm.mouseenter($event)
+      },
+      mouseleave: function ($event) {
+        return _vm.mouseleave($event)
+      },
     },
   })
 };
@@ -55520,7 +55558,7 @@ __vue_render__$f._withStripped = true;
   /* style */
   const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
-    inject("data-v-6e440529_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
+    inject("data-v-05d125aa_0", { source: ".zd-svg-map svg {\n  width: 100%;\n  height: 100%;\n}\n.zd-svg-map:not(.no-area-color) path {\n  fill: var(--area-color) !important;\n}\n.zd-svg-map:not(.no-hover-color) path:hover {\n  fill: var(--area-hover-color) !important;\n}\n.zd-svg-map:not(.no-select-color) g.active path, .zd-svg-map:not(.no-select-color) path.active {\n  fill: var(--area-select-color) !important;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -55580,10 +55618,7 @@ var __vue_render__$e = function () {
   var _c = _vm._self._c || _h;
   return _c(
     "span",
-    _vm._g(
-      { attrs: { id: _vm.instance.name } },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+    { attrs: { id: _vm.instance.name } },
     [
       _c(
         "v-switch",
@@ -55616,6 +55651,15 @@ var __vue_render__$e = function () {
               tabindex: _vm.instance.tabStop ? "" : "-1",
             },
             on: {
+              click: function ($event) {
+                return _vm.click($event)
+              },
+              mouseenter: function ($event) {
+                return _vm.mouseenter($event)
+              },
+              mouseleave: function ($event) {
+                return _vm.mouseleave($event)
+              },
               focus: function ($event) {
                 return _vm.focus($event)
               },
@@ -55661,7 +55705,7 @@ __vue_render__$e._withStripped = true;
   /* style */
   const __vue_inject_styles__$e = function (inject) {
     if (!inject) return
-    inject("data-v-1cfc270e_0", { source: ".zd-switch {\n  margin: 0;\n  padding: 3px 0 0 0;\n}\n.zd-switch .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-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {\n  box-shadow: var(--shadow-1);\n}\n.zd-switch.zd-no-label .v-label {\n  display: none;\n}\n.zd-switch.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__track {\n  height: var(--icon-size);\n  top: calc(50% - var(--icon-size) / 2);\n}\n.zd-switch.v-input--switch--inset .v-input--selection-controls__ripple {\n  left: calc(-24px + var(--icon-size-small) / 2);\n}\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--selection-controls__ripple,\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--switch__thumb {\n  transform: translate(calc(48px - var(--icon-size-small) - 2 * var(--spacing-1))) !important;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__thumb {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  top: calc(50% - var(--icon-size) / 2 + var(--spacing-1));\n}", map: undefined, media: undefined });
+    inject("data-v-c800e3dc_0", { source: ".zd-switch {\n  margin: 0;\n  padding: 3px 0 0 0;\n}\n.zd-switch .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-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input {\n  margin-right: var(--spacing-2);\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input:hover .v-input--selection-controls__ripple::before {\n  display: none;\n}\n.zd-switch > .v-input__control > .v-input__slot .v-input--selection-controls__input .v-input--switch__thumb {\n  box-shadow: var(--shadow-1);\n}\n.zd-switch.zd-no-label .v-label {\n  display: none;\n}\n.zd-switch.zd-no-helper > .v-input__control > .v-messages {\n  display: none;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__track {\n  height: var(--icon-size);\n  top: calc(50% - var(--icon-size) / 2);\n}\n.zd-switch.v-input--switch--inset .v-input--selection-controls__ripple {\n  left: calc(-24px + var(--icon-size-small) / 2);\n}\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--selection-controls__ripple,\n.zd-switch.v-input--switch--inset.v-input--is-dirty .v-input--switch__thumb {\n  transform: translate(calc(48px - var(--icon-size-small) - 2 * var(--spacing-1))) !important;\n}\n.zd-switch.v-input--switch--inset .v-input--switch__thumb {\n  width: var(--icon-size-small);\n  height: var(--icon-size-small);\n  top: calc(50% - var(--icon-size) / 2 + var(--spacing-1));\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
@@ -56337,33 +56381,36 @@ var __vue_render__$9 = function () {
   var _c = _vm._self._c || _h;
   return _c(
     _vm.instance.tag,
-    _vm._g(
-      {
-        directives: [
-          {
-            name: "show",
-            rawName: "v-show",
-            value: _vm.instance.isVisible,
-            expression: "instance.isVisible",
-          },
-        ],
-        tag: "component",
-        class: _vm.instance.cssClass,
-        style: _vm.instance.cssStyle,
-        attrs: {
-          id: _vm.instance.name,
-          name: _vm.instance.name,
-          dark: _vm.instance.dark,
-          light: _vm.instance.light,
+    {
+      directives: [
+        {
+          name: "show",
+          rawName: "v-show",
+          value: _vm.instance.isVisible,
+          expression: "instance.isVisible",
         },
-        on: {
-          click: function ($event) {
-            return _vm.click($event)
-          },
+      ],
+      tag: "component",
+      class: _vm.instance.cssClass,
+      style: _vm.instance.cssStyle,
+      attrs: {
+        id: _vm.instance.name,
+        name: _vm.instance.name,
+        dark: _vm.instance.dark,
+        light: _vm.instance.light,
+      },
+      on: {
+        click: function ($event) {
+          return _vm.click($event)
+        },
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
         },
       },
-      Object.assign({}, _vm.$attrs["dropdown-activator"])
-    ),
+    },
     [
       _vm._l(_vm.instance.children, function (child) {
         return _c(
@@ -56472,7 +56519,15 @@ var __vue_render__$8 = function () {
       class: ["zd-text", _vm.instance.cssClass],
       style: _vm.instance.cssStyle,
       attrs: { id: _vm.instance.name, name: _vm.instance.name },
-      on: { click: _vm.click },
+      on: {
+        click: _vm.click,
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
+      },
     },
     [
       Array.isArray(_vm.instance.text)
@@ -56484,19 +56539,11 @@ var __vue_render__$8 = function () {
                       key: index,
                       attrs: { template: _vm.$t(p) },
                     })
-                  : _c(
-                      _vm.instance.tag,
-                      _vm._g(
-                        {
-                          key: index,
-                          tag: "component",
-                          domProps: {
-                            innerHTML: _vm._s(_vm.$t(_vm.$sanitize(p))),
-                          },
-                        },
-                        Object.assign({}, _vm.$attrs["dropdown-activator"])
-                      )
-                    ),
+                  : _c(_vm.instance.tag, {
+                      key: index,
+                      tag: "component",
+                      domProps: { innerHTML: _vm._s(_vm.$t(_vm.$sanitize(p))) },
+                    }),
               ]
             }),
           ]
@@ -56530,11 +56577,11 @@ __vue_render__$8._withStripped = true;
   /* style */
   const __vue_inject_styles__$8 = function (inject) {
     if (!inject) return
-    inject("data-v-f2049b36_0", { source: ".zd-text p[data-v-f2049b36] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
+    inject("data-v-5147c205_0", { source: ".zd-text p[data-v-5147c205] {\n  margin-bottom: 0;\n}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$8 = "data-v-f2049b36";
+  const __vue_scope_id__$8 = "data-v-5147c205";
   /* module identifier */
   const __vue_module_identifier__$8 = undefined;
   /* functional template */
@@ -56674,6 +56721,12 @@ var __vue_render__$7 = function () {
             click: function ($event) {
               return _vm.click($event)
             },
+            mouseenter: function ($event) {
+              return _vm.mouseenter($event)
+            },
+            mouseleave: function ($event) {
+              return _vm.mouseleave($event)
+            },
             focus: function ($event) {
               return _vm.focus($event)
             },
@@ -56752,7 +56805,7 @@ __vue_render__$7._withStripped = true;
   /* style */
   const __vue_inject_styles__$7 = function (inject) {
     if (!inject) return
-    inject("data-v-1c829b22_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-a0a0261e_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 */
@@ -57151,12 +57204,6 @@ let ZdTooltip = class ZdTooltip extends ZdComponentRender$1 {
         const { tooltip } = this.$refs;
         return (tooltip === null || tooltip === void 0 ? void 0 : tooltip.getActivator()) || null;
     }
-    mounted() {
-        const { tooltip } = this.$refs;
-        if (tooltip) {
-            tooltip.getActivator = (e) => getActivator(e, tooltip);
-        }
-    }
 };
 __decorate([
     PropWatch({ type: [Boolean, String], default: false }),
@@ -57231,27 +57278,23 @@ var __vue_render__$5 = function () {
             {
               key: "activator",
               fn: function (ref) {
-                var dropdown = ref.on;
+                var on = ref.on;
                 return [
                   _vm._l(_vm.instance.children, function (child, index) {
                     return _c(
                       child.component,
-                      _vm._b(
-                        {
-                          key: index,
-                          tag: "component",
-                          attrs: {
-                            "dropdown-activator": Object.assign(
-                              {},
-                              _vm.$attrs["dropdown-activator"],
-                              dropdown
-                            ),
-                            parent: _vm.instance.parent,
+                      _vm._g(
+                        _vm._b(
+                          {
+                            key: index,
+                            tag: "component",
+                            attrs: { parent: _vm.instance.parent },
                           },
-                        },
-                        "component",
-                        child,
-                        false
+                          "component",
+                          child,
+                          false
+                        ),
+                        Object.assign({}, on, _vm.$listeners)
                       )
                     )
                   }),
@@ -57293,7 +57336,7 @@ __vue_render__$5._withStripped = true;
   /* style */
   const __vue_inject_styles__$5 = function (inject) {
     if (!inject) return
-    inject("data-v-766faea4_0", { source: ".v-tooltip__content {\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n}\n.v-tooltip__content.menuable__content__active {\n  opacity: 0.9 !important;\n}", map: undefined, media: undefined });
+    inject("data-v-3489cb74_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 */
@@ -60902,6 +60945,130 @@ var onVisiblePlugin = (element, callback, root) => {
     return observer;
 };
 
+/**
+ * This function was copied from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/activatable/index.ts
+ * the only change was to consider ZdDropdown and ZdTooltip as activatable components
+ */
+const getActivator = (comp, e) => {
+    // If we've already fetched the activator, re-use
+    if (comp.activatorElement)
+        return comp.activatorElement;
+    let activator = null;
+    if (comp.activator) {
+        const target = comp.internalActivator ? comp.$el : document;
+        if (typeof comp.activator === 'string') {
+            // Selector
+            activator = target.querySelector(comp.activator);
+        }
+        else if (comp.activator.$el) {
+            // Component (ref)
+            activator = comp.activator.$el;
+        }
+        else {
+            // HTMLElement | Element
+            activator = comp.activator;
+        }
+    }
+    else if (comp.activatorNode.length === 1 || (comp.activatorNode.length && !e)) {
+        // Use the contents of the activator slot
+        // There's either only one element in it or we
+        // don't have a click event to use as a last resort
+        const vm = comp.activatorNode[0].componentInstance;
+        const isActivatable = vm && ((vm.$options.mixins
+            && vm.$options.mixins.some((m) => m.options && ['activatable', 'menuable'].includes(m.options.name))) || ['ZdDropdown', 'ZdTooltip', 'ZdVMenu', 'ZdVTooltip'].includes(vm.$options.name));
+        if (isActivatable) {
+            // Activator is actually another activatible component, use its activator (#8846)
+            activator = vm.getActivator();
+        }
+        else {
+            activator = comp.activatorNode[0].elm;
+        }
+    }
+    else if (e) {
+        // Activated by a click or focus event
+        activator = (e.currentTarget || e.target);
+    }
+    // The activator should only be a valid element (Ignore comments and text nodes)
+    comp.activatorElement = (activator === null || activator === void 0 ? void 0 : activator.nodeType) === Node.ELEMENT_NODE ? activator : null;
+    return comp.activatorElement;
+};
+/**
+ * This function was copied from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/activatable/index.ts
+ * the only change was to consider Zeedhi events
+ */
+const genActivatorListeners = (comp) => {
+    if (comp.disabled)
+        return {};
+    const listeners = {};
+    if (comp.openOnHover) {
+        listeners.mouseenter = (e) => {
+            const event = e instanceof Event ? e : e.event;
+            comp.getActivator(event);
+            comp.runDelay('open');
+        };
+        listeners.mouseleave = (e) => {
+            const event = e instanceof Event ? e : e.event;
+            comp.getActivator(event);
+            comp.runDelay('close');
+        };
+    }
+    else if (comp.openOnClick) {
+        listeners.click = (e) => {
+            const event = e instanceof Event ? e : e.event;
+            const activator = comp.getActivator(event);
+            if (activator)
+                activator.focus();
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            comp.isActive = !comp.isActive;
+            if (!(event instanceof MouseEvent))
+                return;
+            comp.absoluteX = event.clientX;
+            comp.absoluteY = event.clientY;
+        };
+    }
+    if (comp.openOnFocus) {
+        listeners.focus = (e) => {
+            const event = e instanceof Event ? e : e.event;
+            comp.getActivator(event);
+            event === null || event === void 0 ? void 0 : event.stopPropagation();
+            comp.isActive = !comp.isActive;
+        };
+    }
+    return listeners;
+};
+
+/**
+ * Override of VMenu to consider Zeedhi components/events
+ */
+let ZdVMenu = class ZdVMenu extends VMenu {
+    getActivator(e) {
+        return getActivator(this, e);
+    }
+    genActivatorListeners() {
+        return genActivatorListeners(this);
+    }
+};
+ZdVMenu = __decorate([
+    Component$1
+], ZdVMenu);
+var ZdVMenu$1 = ZdVMenu;
+
+/**
+ * Override of VTooltip to consider Zeedhi components/events
+ */
+let ZdVTooltip = class ZdVTooltip extends VTooltip {
+    getActivator(e) {
+        return getActivator(this, e);
+    }
+    genActivatorListeners() {
+        return genActivatorListeners(this);
+    }
+};
+ZdVTooltip = __decorate([
+    Component$1
+], ZdVTooltip);
+var ZdVTooltip$1 = ZdVTooltip;
+
 // tslint:disable: variable-name
 const VueTreeSelect = require('@zeedhi/zd-vue-treeselect');
 const Hooper = require('hooper');
@@ -60961,7 +61128,7 @@ const Zeedhi = {
                 VListItemSubtitle,
                 VListItemTitle,
                 VMain,
-                VMenu,
+                VMenu: ZdVMenu$1,
                 VNavigationDrawer,
                 VOverlay,
                 VOtpInput,
@@ -60997,7 +61164,7 @@ const Zeedhi = {
                 VTimeline,
                 VTimelineItem,
                 VTimePicker,
-                VTooltip,
+                VTooltip: ZdVTooltip$1,
                 VToolbar,
                 VToolbarItems,
                 VSimpleCheckbox,