@zeedhi/vuetify 1.63.0 → 1.65.0

package/dist/zd-vuetify.umd.js

@@ -37652,13 +37652,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                       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;
@@ -37743,6 +37766,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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) {
@@ -38352,7 +38381,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         _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(" "),
@@ -38367,7 +38399,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -38651,68 +38683,71 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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
@@ -38740,7 +38775,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1k = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -39069,63 +39104,66 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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(
@@ -39150,7 +39188,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1i = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -39932,79 +39970,82 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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
           )
         ),
       ],
@@ -40017,7 +40058,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1g = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -40305,78 +40346,81 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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
@@ -40408,7 +40452,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1e = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -40527,6 +40571,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         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(
@@ -40636,7 +40691,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1d = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -40712,31 +40767,28 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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(
@@ -40949,6 +41001,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   click: function ($event) {
                     return _vm.click($event)
                   },
+                  mouseenter: function ($event) {
+                    return _vm.mouseenter($event)
+                  },
+                  mouseleave: function ($event) {
+                    return _vm.mouseleave($event)
+                  },
                 },
                 scopedSlots: _vm._u(
                   [
@@ -41069,7 +41127,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$1b = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -41273,19 +41331,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               instanceRef.updateValue(true);
           }
       }
-      getMaskValue() {
-          let mask = '';
-          if (typeof this.instance.mask === 'function') {
-              mask = this.instance.mask(core.Mask.getValueWithoutMask(this.instance.value || ''));
-          }
-          else if (typeof this.instance.mask === 'string' || Array.isArray(this.instance.mask)) {
-              mask = this.instance.mask || '';
-          }
-          mask = core.Mask.getMaskArray(mask);
-          return mask;
-      }
       get maskProp() {
-          return () => this.getMaskValue();
+          return () => this.instance.getMaskValue();
       }
       mounted() {
           if (this.$el.querySelector) {
@@ -41314,11 +41361,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           }
           return events;
       }
-      setPlaceholder() {
+      setPlaceholder(htmlElment = 'input') {
           const placeholder = this.$t(this.instance.placeholder);
           if (placeholder !== '') {
               setTimeout(() => {
-                  const input = this.$el.getElementsByTagName('input')[0];
+                  const input = this.$el.getElementsByTagName(`${htmlElment}`)[0];
                   input.setAttribute('placeholder', placeholder);
               }, 0);
           }
@@ -41438,6 +41485,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 $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)
               },
@@ -41536,7 +41589,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -42251,19 +42304,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               }
           });
       }
-      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();
       }
@@ -42435,16 +42475,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 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
+                      )
+                    ),
                   ]
                 },
               },
@@ -42557,7 +42602,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -42647,7 +42692,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   if (!this.isPrintableKey(event.key) || core.Mask.isMaskDelimiter(event.key)) {
                       return;
                   }
-                  while (core.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);
@@ -42677,19 +42723,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               }
           });
       }
-      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();
       }
@@ -42863,16 +42896,21 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 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
+                      )
+                    ),
                   ]
                 },
               },
@@ -42984,7 +43022,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -43250,54 +43288,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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
    */
@@ -43318,12 +43308,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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 }),
@@ -43448,24 +43432,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           {
             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(" "),
@@ -43528,7 +43506,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -43752,6 +43730,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               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)
               },
@@ -43956,7 +43940,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$10 = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -47560,6 +47544,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           "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
@@ -47734,7 +47729,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$V = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -48147,13 +48142,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Icon;
       }
-      getIconClickEvents() {
-          const events = {};
-          if (this.instance.events.click) {
-              events.click = this.click;
-          }
-          return events;
-      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -48210,41 +48198,49 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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")]
     )
@@ -48383,42 +48379,45 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         !_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(),
@@ -48432,7 +48431,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -49009,27 +49008,20 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               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
+                  )
                 ),
               ]
             },
@@ -49077,7 +49069,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$M = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -49591,6 +49583,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         "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)
         },
@@ -49792,7 +49790,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$K = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -52706,6 +52704,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             click: function ($event) {
               return _vm.click($event)
             },
+            mouseenter: function ($event) {
+              return _vm.mouseenter($event)
+            },
+            mouseleave: function ($event) {
+              return _vm.mouseleave($event)
+            },
           },
         },
         "v-progress-linear",
@@ -52880,23 +52884,31 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       _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
           )
         )
       }),
@@ -52909,7 +52921,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -53104,6 +53116,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 _vm.$styleObject(_vm.instance.cssStyle),
               ],
               on: {
+                click: function ($event) {
+                  return _vm.click($event)
+                },
                 input: function ($event) {
                   return _vm.input($event)
                 },
@@ -53212,7 +53227,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -53280,29 +53295,26 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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(
@@ -53978,6 +53990,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         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)
         },
@@ -54282,7 +54300,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$k = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -54516,7 +54534,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
-        on: { click: _vm.click, focus: _vm.focus },
+        on: {
+          click: _vm.click,
+          focus: _vm.focus,
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
+          },
+        },
       },
       [
         _c(
@@ -54692,7 +54719,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$j = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -54794,7 +54821,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         ],
         style: _vm.instance.cssStyle,
         attrs: { id: _vm.instance.name, name: _vm.instance.name },
-        on: { click: _vm.click, focus: _vm.focus },
+        on: {
+          click: _vm.click,
+          focus: _vm.focus,
+          mouseenter: function ($event) {
+            return _vm.mouseenter($event)
+          },
+          mouseleave: function ($event) {
+            return _vm.mouseleave($event)
+          },
+        },
       },
       [
         _c(
@@ -54964,8 +55000,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$i = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -55073,10 +55109,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 return [
                   _c(
                     "span",
-                    _vm._g(
-                      {},
-                      Object.assign({}, _vm.$attrs["dropdown-activator"])
-                    ),
                     [
                       _c(
                         "zd-button",
@@ -55510,6 +55542,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         click: function ($event) {
           return _vm.mapClick($event)
         },
+        mouseenter: function ($event) {
+          return _vm.mouseenter($event)
+        },
+        mouseleave: function ($event) {
+          return _vm.mouseleave($event)
+        },
       },
     })
   };
@@ -55519,7 +55557,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -55579,10 +55617,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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",
@@ -55615,6 +55650,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 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)
                 },
@@ -55660,7 +55704,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$e = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -56336,33 +56380,36 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     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(
@@ -56471,7 +56518,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         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)
@@ -56483,19 +56538,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                         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))) },
+                      }),
                 ]
               }),
             ]
@@ -56529,11 +56576,11 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$8 = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -56565,6 +56612,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Textarea;
       }
+      mounted() {
+          this.setPlaceholder('textarea');
+      }
+      blur(event) {
+          this.instance.blur(event, this.$el);
+          this.setPlaceholder('textarea');
+      }
   };
   __decorate([
       PropWatch({ type: [Boolean, String], default: false }),
@@ -56603,11 +56657,17 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", Boolean)
   ], ZdTextarea.prototype, "rounded", void 0);
   __decorate([
-      PropWatch({ type: [Number, String], default: 24 }),
+      PropWatch({
+          type: [Number, String],
+          default: 24,
+      }),
       __metadata("design:type", Object)
   ], ZdTextarea.prototype, "rowHeight", void 0);
   __decorate([
-      PropWatch({ type: [Number, String], default: 5 }),
+      PropWatch({
+          type: [Number, String],
+          default: 5,
+      }),
       __metadata("design:type", Object)
   ], ZdTextarea.prototype, "rows", void 0);
   ZdTextarea = __decorate([
@@ -56673,6 +56733,12 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               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)
               },
@@ -56751,7 +56817,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* 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 */
@@ -57150,12 +57216,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           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 }),
@@ -57230,27 +57290,23 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               {
                 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)
                         )
                       )
                     }),
@@ -57292,7 +57348,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$5 = function (inject) {
       if (!inject) return
-      inject("data-v-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 */
@@ -60901,6 +60957,130 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       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([
+      vuePropertyDecorator.Component
+  ], 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([
+      vuePropertyDecorator.Component
+  ], ZdVTooltip);
+  var ZdVTooltip$1 = ZdVTooltip;
+
   // tslint:disable: variable-name
   const VueTreeSelect = require('@zeedhi/zd-vue-treeselect');
   const Hooper = require('hooper');
@@ -60960,7 +61140,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VListItemSubtitle,
                   VListItemTitle,
                   VMain,
-                  VMenu,
+                  VMenu: ZdVMenu$1,
                   VNavigationDrawer,
                   VOverlay,
                   VOtpInput,
@@ -60996,7 +61176,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   VTimeline,
                   VTimelineItem,
                   VTimePicker,
-                  VTooltip,
+                  VTooltip: ZdVTooltip$1,
                   VToolbar,
                   VToolbarItems,
                   VSimpleCheckbox,