@zeedhi/vuetify 1.105.1 → 1.107.0

package/dist/zd-vuetify.umd.js

@@ -159,7 +159,7 @@
 
     beforeCreate() {
       if (!this.$vuetify || this.$vuetify === this.$root) {
-        throw new Error('Vuetify is not properly initialized, see https://v2.vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');
+        throw new Error('Vuetify is not properly initialized, see https://vuetifyjs.com/getting-started/quick-start#bootstrapping-the-vuetify-object');
       }
     },
 
@@ -1196,7 +1196,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     clear: 'fas fa-times-circle',
     success: 'fas fa-check-circle',
     info: 'fas fa-info-circle',
-    warning: 'fas fa-exclamation-circle',
+    warning: 'fas fa-exclamation',
     error: 'fas fa-exclamation-triangle',
     prev: 'fas fa-chevron-left',
     next: 'fas fa-chevron-right',
@@ -2212,7 +2212,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   }
   Vuetify.install = install$1;
   Vuetify.installed = false;
-  Vuetify.version = "2.6.16";
+  Vuetify.version = "2.6.13";
   Vuetify.config = {
     silent: false
   };
@@ -8397,10 +8397,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       const {
         children,
         listeners,
-        props,
-        data
+        props
       } = ctx;
-      const newData = mergeData({
+      const data = {
         staticClass: 'v-label',
         class: {
           'v-label--active': props.value,
@@ -8418,8 +8417,8 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           position: props.absolute ? 'absolute' : 'relative'
         },
         ref: 'label'
-      }, data);
-      return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, newData), children);
+      };
+      return h('label', Colorable.options.methods.setTextColor(props.focused && props.color, data), children);
     }
 
   });
@@ -10094,12 +10093,6 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             (_a = this.$refs.menu) === null || _a === void 0 ? void 0 : _a.updateDimensions();
           });
         }
-
-        if (this.hideSelected) {
-          this.$nextTick(() => {
-            this.onScroll();
-          });
-        }
       },
 
       isMenuActive(val) {
@@ -10328,18 +10321,19 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
       genMenu() {
         const props = this.$_menuProps;
-        props.activator = this.$refs['input-slot'];
-        if ('attach' in props) ;else if ( // TODO: make this a computed property or helper or something
+        props.activator = this.$refs['input-slot']; // Attach to root el so that
+        // menu covers prepend/append icons
+
+        if ( // TODO: make this a computed property or helper or something
         this.attach === '' || // If used as a boolean prop (<v-menu attach>)
         this.attach === true || // If bound to a boolean (<v-menu :attach="true">)
         this.attach === 'attach' // If bound as boolean prop in pug (v-menu(attach))
         ) {
-          // Attach to root el so that
-          // menu covers prepend/append icons
           props.attach = this.$el;
         } else {
           props.attach = this.attach;
         }
+
         return this.$createElement(VMenu, {
           attrs: {
             role: undefined
@@ -10453,7 +10447,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       },
 
       onKeyPress(e) {
-        if (this.multiple || !this.isInteractive || this.disableLookup || e.key.length > 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+        if (this.multiple || !this.isInteractive || this.disableLookup) return;
         const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
 
         const now = performance.now();
@@ -11770,7 +11764,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         if (!alreadyAtStart && scrollingUp) return true;
         if (!alreadyAtEnd && scrollingDown) return true;
 
-        if ((alreadyAtStart || alreadyAtEnd) && el.parentNode) {
+        if (alreadyAtStart || alreadyAtEnd) {
           return this.shouldScroll(el.parentNode, e);
         }
 
@@ -19553,13 +19547,13 @@ If you're seeing "$attrs is readonly", it's caused by this`);
 
     methods: {
       onKeyDown(e) {
-        this.shiftKeyDown = e.keyCode === keyCodes.shift || e.shiftKey;
+        if (e.keyCode !== keyCodes.shift) return;
+        this.shiftKeyDown = true;
       },
 
       onKeyUp(e) {
-        if (e.keyCode === keyCodes.shift || !e.shiftKey) {
-          this.shiftKeyDown = false;
-        }
+        if (e.keyCode !== keyCodes.shift) return;
+        this.shiftKeyDown = false;
       },
 
       toggleSelectAll(value) {
@@ -20855,8 +20849,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
         return this.$createElement(VSimpleTable, {
           props: simpleProps,
           class: {
-            'v-data-table--mobile': this.isMobile,
-            'v-data-table--selectable': this.showSelect
+            'v-data-table--mobile': this.isMobile
           }
         }, [this.proxySlot('top', getSlot(this, 'top', { ...props,
           isMobile: this.isMobile
@@ -31592,7 +31585,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     clear: 'fas fa-times-circle',
     success: 'fas fa-check-circle',
     info: 'fas fa-info-circle',
-    warning: 'fas fa-exclamation-circle',
+    warning: 'fas fa-exclamation',
     error: 'fas fa-exclamation-triangle',
     prev: 'fas fa-chevron-left',
     next: 'fas fa-chevron-right',
@@ -32011,23 +32004,23 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     badge: 'شارة',
     close: 'إغلاق',
     dataIterator: {
-      noResultsText: 'لم يتم إيجاد نتائج',
-      loadingText: 'يتم جلب العناصر...'
+      noResultsText: 'لا توجد سجلات مطابقة',
+      loadingText: 'تحميل العنصر...'
     },
     dataTable: {
-      itemsPerPageText: 'عدد الصفوف لكل صفحة:',
+      itemsPerPageText: 'الصفوف لكل صفحة:',
       ariaLabel: {
-        sortDescending: 'مرتب تنازلياً.',
-        sortAscending: 'مرتب تصاعدياً.',
-        sortNone: 'غير مرتب.',
-        activateNone: 'نشط لإزالة الترتيب.',
-        activateDescending: 'نشط للترتيب تنازلياً.',
-        activateAscending: 'نشط للترتيب تصاعدياً.'
+        sortDescending: 'مفروز تنازلي. تنشيط لإزالة الفرز.',
+        sortAscending: 'مفروز تصاعدي. تنشيط للفرز التنازلي.',
+        sortNone: 'غير مفروزة. تفعيل لفرز تصاعدي.',
+        activateNone: 'Activate to remove sorting.',
+        activateDescending: 'Activate to sort descending.',
+        activateAscending: 'Activate to sort ascending.'
       },
-      sortBy: 'رتب حسب'
+      sortBy: 'مفروزة حسب'
     },
     dataFooter: {
-      itemsPerPageText: 'عدد العناصر لكل صفحة:',
+      itemsPerPageText: 'العناصر لكل صفحة:',
       itemsPerPageAll: 'الكل',
       nextPage: 'الصفحة التالية',
       prevPage: 'الصفحة السابقة',
@@ -32036,18 +32029,18 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       pageText: '{0}-{1} من {2}'
     },
     datePicker: {
-      itemsSelected: 'تم تحديد {0}',
+      itemsSelected: '{0} مختارة',
       nextMonthAriaLabel: 'الشهر القادم',
       nextYearAriaLabel: 'العام القادم',
       prevMonthAriaLabel: 'الشهر الماضى',
       prevYearAriaLabel: 'السنة الماضية'
     },
-    noDataText: 'لا توجد بيانات',
+    noDataText: 'لا توجد بيانات متاحة',
     carousel: {
-      prev: 'المعروض السابق',
-      next: 'المعروض التالي',
+      prev: 'البصري السابق',
+      next: 'البصري التالي',
       ariaLabel: {
-        delimiter: 'المعروض رقم {0} من {1}'
+        delimiter: 'Carousel slide {0} of {1}'
       }
     },
     calendar: {
@@ -32063,16 +32056,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     },
     pagination: {
       ariaLabel: {
-        wrapper: 'الإنتقال بين الصفحات',
+        wrapper: 'ترقيم الصفحات الملاحة',
         next: 'الصفحة التالية',
         previous: 'الصفحة السابقة',
-        page: '{0} انتقل إلى الصفحة',
-        currentPage: '{0} الصفحة الحالية رقمها'
+        page: '{0} انتقل إلى صفحة',
+        currentPage: '{0} الصفحة الحالية ، الصفحة'
       }
     },
     rating: {
       ariaLabel: {
-        icon: 'القييم {0} من {1}'
+        icon: 'Rating {0} of {1}'
       }
     }
   };
@@ -36845,7 +36838,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   exports.default = Vuetify;
   Vuetify.install = install_1.install;
   Vuetify.installed = false;
-  Vuetify.version = "2.6.16";
+  Vuetify.version = "2.6.13";
   Vuetify.config = {
     silent: false
   };
@@ -40561,7 +40554,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       __metadata("design:type", String)
   ], ZdInput.prototype, "storePath", void 0);
   __decorate([
-      vuePropertyDecorator.Prop({ type: [Object, String], default: () => ({}) }),
+      vuePropertyDecorator.Prop({
+          type: [Object, String],
+          default: () => ({ required: false }),
+      }),
       __metadata("design:type", Object)
   ], ZdInput.prototype, "validations", void 0);
   __decorate([
@@ -42242,6 +42238,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                 "zd-no-border": !_vm.instance.showBorder,
                 "zd-no-helper":
                   !_vm.instance.showHelper &&
+                  !_vm.instance.persistentHint &&
                   !(
                     _vm.instance.alwaysShowError &&
                     _vm.$refs.instance &&
@@ -42379,7 +42376,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-28353e64_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-ecb32ef8_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 */
@@ -45981,6 +45978,10 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       vuePropertyDecorator.Prop({ type: [String, Boolean], default: () => { var _a; return ((_a = core.Config.iterableSearchVisibleOnly) !== null && _a !== void 0 ? _a : true); } }),
       __metadata("design:type", Object)
   ], ZdIterable.prototype, "searchVisibleOnly", void 0);
+  __decorate([
+      vuePropertyDecorator.Prop({ type: [String, Boolean], default: undefined }),
+      __metadata("design:type", Object)
+  ], ZdIterable.prototype, "searchIn", void 0);
   ZdIterable = __decorate([
       vuePropertyDecorator.Component
   ], ZdIterable);
@@ -52346,6 +52347,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           this.originalOnScroll = this.componentRef.onScroll;
           this.componentRef.onScroll = this.onScroll;
           this.applyAutofocus();
+          this.instance.viewCloseMenu = () => {
+              this.$refs.instance.isMenuActive = false;
+          };
       }
       mouseenter(event) {
           this.instance.mouseenter(event, this.$el);
@@ -52446,7 +52450,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       checkOverflow(element) {
           if (!element)
               return;
-          const overflow = element.clientWidth < element.scrollWidth;
+          const overflow = element.clientWidth < element.scrollWidth - 5;
           const tooltip = this.$refs.tooltip;
           if (overflow && tooltip) {
               tooltip.classList.add('zd-select-tooltip-show');
@@ -52563,6 +52567,40 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       setMenuVisibility(visibility) {
           this.componentRef.isMenuActive = visibility && visibility !== 'hide';
       }
+      get showModalButton() {
+          return this.instance.modalSelection
+              && this.instance.modalSelectionColumns
+              && this.instance.modalSelectionColumns.length > 0;
+      }
+      getSelectIconClickEvents() {
+          const events = {};
+          if (this.instance.events.appendIconClick || this.showModalButton) {
+              events['click:append'] = (event) => {
+                  this.appendIconClick(event);
+                  if (this.showModalButton) {
+                      this.instance.openModalSelection();
+                  }
+              };
+          }
+          if (this.instance.events.appendOuterIconClick) {
+              events['click:append-outer'] = this.appendOuterIconClick;
+          }
+          if (this.instance.events.prependOuterIconClick) {
+              events['click:prepend'] = this.prependOuterIconClick;
+          }
+          if (this.instance.events.prependIconClick) {
+              events['click:prepend-inner'] = this.prependIconClick;
+          }
+          return events;
+      }
+      getPlaceHolder() {
+          if (this.instance.placeholder)
+              return core.I18n.translate(this.instance.placeholder);
+          if (this.showModalButton) {
+              return core.I18n.translate('SELECT_MODAL_KEYMAP');
+          }
+          return '';
+      }
   };
   __decorate([
       PropWatch({ type: String, default: 'expand' }),
@@ -52656,6 +52694,14 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       PropWatch({ type: [String, Boolean], default: true }),
       __metadata("design:type", Boolean)
   ], ZdSelect.prototype, "closeOnScroll", void 0);
+  __decorate([
+      PropWatch({ type: [String, Boolean], default: false }),
+      __metadata("design:type", Boolean)
+  ], ZdSelect.prototype, "modalSelection", void 0);
+  __decorate([
+      PropWatch({ type: [String, Array], default: () => [] }),
+      __metadata("design:type", Array)
+  ], ZdSelect.prototype, "modalSelectionColumns", void 0);
   __decorate([
       vuePropertyDecorator.Watch('instance.closeOnScroll'),
       __metadata("design:type", Function),
@@ -52713,6 +52759,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               "zd-dense": _vm.instance.dense,
               "zd-select-autocomplete": _vm.instance.autocomplete,
               "zd-input-required": _vm.instance.validations.required,
+              "zd-select-modal-selection": _vm.showModalButton,
             },
             "zd-select-align-" +
               (_vm.instance.reverse ? "right" : _vm.instance.align),
@@ -52743,7 +52790,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             label: _vm.instance.showLabel
               ? _vm.$t(_vm.instance.label)
               : undefined,
-            placeholder: _vm.$t(_vm.instance.placeholder),
+            placeholder: _vm.getPlaceHolder(),
             hint: _vm.$t(_vm.instance.hint),
             persistentHint: _vm.instance.persistentHint,
             reverse: _vm.instance.reverse,
@@ -52760,7 +52807,9 @@ If you're seeing "$attrs is readonly", it's caused by this`);
               maxHeight: _vm.instance.menuMaxHeight,
             },
             "search-input": _vm.instance.search,
-            "append-icon": _vm.$getIcon(_vm.instance.appendIcon),
+            "append-icon": _vm.$getIcon(
+              _vm.showModalButton ? "tableSearch" : _vm.instance.appendIcon
+            ),
             "append-outer-icon": _vm.$getIcon(_vm.instance.appendOuterIcon),
             "prepend-icon": _vm.$getIcon(_vm.instance.prependOuterIcon),
             "prepend-inner-icon": _vm.$getIcon(_vm.instance.prependIcon),
@@ -53030,7 +53079,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
             expression: "instance.selectValue",
           },
         },
-        _vm.getIconClickEvents()
+        _vm.getSelectIconClickEvents()
       )
     )
   };
@@ -53040,7 +53089,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-f3af3d18_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 .v-input__control .v-input__slot .v-select__slot input {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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}\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  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.theme--light {\n  color: var(--zd-font-color);\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.zd-select-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-select-tooltip.zd-select-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n  max-height: 40vh !important;\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}\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}\n.zd-select-overflow {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}", map: undefined, media: undefined });
+      inject("data-v-0e3a3adf_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 .v-input__control .v-input__slot .v-select__slot input {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\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}\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  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.theme--light {\n  color: var(--zd-font-color);\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.zd-select.zd-select-modal-selection .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  margin-right: 2px !important;\n  transform: rotate(0) !important;\n}\n.zd-select-tooltip {\n  z-index: 10000;\n  position: fixed;\n  color: white;\n  background-color: var(--v-grey-lighten1);\n  border-radius: var(--border);\n  padding: var(--spacing-1) var(--spacing-2);\n  opacity: 0.9;\n  display: none;\n  font-size: 14px;\n  line-height: 22px;\n  text-transform: none;\n  width: auto;\n  pointer-events: none;\n  white-space: pre;\n}\n.zd-select-tooltip.zd-select-tooltip-show {\n  display: block;\n  white-space: normal;\n}\n.v-menu__content.zd-select-menu {\n  box-shadow: var(--shadow-2);\n  max-height: 40vh !important;\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}\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}\n.zd-select-overflow {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.zd-select-modal-selection-grid {\n  margin-top: 0 !important;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -54119,6 +54168,16 @@ If you're seeing "$attrs is readonly", it's caused by this`);
           super(...arguments);
           this.instanceType = common.Login;
       }
+      get socialLoginComponents() {
+          return (this.instance.socialLogin || []).map((item, index) => {
+              const defaultComponent = {
+                  name: `${this.instance.name}_social_login_${index}`,
+                  component: 'ZdImage',
+                  src: item.icon,
+              };
+              return Object.assign(Object.assign({}, defaultComponent), item);
+          });
+      }
   };
   __decorate([
       PropWatch({ type: String, default: '' }),
@@ -54268,18 +54327,29 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                   2
                 ),
                 _vm._v(" "),
-                _vm.instance.socialLogin.length
+                _vm.socialLoginComponents.length
                   ? _c(
                       "div",
                       { staticClass: "zd-login-card-actions" },
-                      _vm._l(_vm.instance.socialLogin, function (child, index) {
+                      _vm._l(_vm.socialLoginComponents, function (child, index) {
                         return _c(
-                          "div",
-                          { key: index, staticClass: "zd-login-social-buttons" },
-                          [_c("img", { attrs: { src: child.icon } })]
+                          child.component,
+                          _vm._b(
+                            {
+                              key: index,
+                              tag: "component",
+                              staticClass: "zd-login-social-buttons",
+                              attrs: { parent: _vm.instance },
+                            },
+                            "component",
+                            child,
+                            false
+                          ),
+                          [_vm._t("default")],
+                          2
                         )
                       }),
-                      0
+                      1
                     )
                   : _vm._e(),
                 _vm._v(" "),
@@ -54355,7 +54425,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     /* style */
     const __vue_inject_styles__$C = function (inject) {
       if (!inject) return
-      inject("data-v-2045fd32_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n.zd-login .zd-login-card {\n  z-index: 1;\n}\n.zd-login .zd-login-flat-card {\n  margin: 0px !important;\n  height: 100%;\n  border-radius: 0px !important;\n}\n.zd-login .zd-login-background-image {\n  z-index: 0;\n}\n.zd-login .background-div {\n  background-position-x: left !important;\n  background-size: cover !important;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by {\n  z-index: 1;\n}\n.zd-login .zd-login-powered-by-card {\n  z-index: 1;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .zd-login-flat-card {\n    margin: 0px !important;\n    height: 100% !important;\n    border-radius: 0px !important;\n}\n.zd-login .flex {\n    height: 100%;\n}\n.zd-login .background-div {\n    position: absolute;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-left .zd-login-background-image {\n  position: absolute;\n  right: 0px;\n  height: 100%;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right .zd-login-background-image {\n  position: absolute;\n  left: 0px;\n  height: 100%;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-center .backgroud-div {\n  position: absolute !important;\n}\n.zd-login .position-center .zd-login-background-image {\n  position: absolute;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
+      inject("data-v-53f58ebc_0", { source: ".zd-login {\n  height: 100vh;\n}\n.zd-login .zd-login-content {\n  height: 100%;\n  background-size: cover !important;\n}\n.zd-login .zd-login-card {\n  z-index: 1;\n}\n.zd-login .zd-login-flat-card {\n  margin: 0px !important;\n  height: 100%;\n  border-radius: 0px !important;\n}\n.zd-login .zd-login-background-image {\n  z-index: 0;\n}\n.zd-login .background-div {\n  background-position-x: left !important;\n  background-size: cover !important;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by {\n  z-index: 1;\n}\n.zd-login .zd-login-powered-by-card {\n  z-index: 1;\n}\n@media screen and (max-width: 730px) {\n.zd-login div.zd-login-card {\n    border-radius: unset;\n    width: 100% !important;\n    height: 90%;\n}\n.zd-login .zd-login-flat-card {\n    margin: 0px !important;\n    height: 100% !important;\n    border-radius: 0px !important;\n}\n.zd-login .flex {\n    height: 100%;\n}\n.zd-login .background-div {\n    position: absolute;\n}\n}\n@media screen and (max-width: 960px) {\n.zd-login .zd-login-powered-by {\n    display: none;\n}\n.zd-login .zd-login-powered-by-card {\n    display: block;\n}\n}\n.zd-login .zd-login-button {\n  width: 100%;\n}\n.zd-login .zd-login-powered-by-card-always-visible {\n  display: block !important;\n}\n.zd-login .v-card {\n  box-shadow: none;\n  margin: 20px;\n}\n.zd-login .position-left {\n  justify-content: flex-start;\n}\n.zd-login .position-left .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  right: 48px;\n}\n.zd-login .position-left .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-left .zd-login-background-image {\n  position: absolute;\n  right: 0px;\n  height: 100%;\n}\n.zd-login .position-right {\n  width: unset;\n  justify-content: flex-end;\n}\n.zd-login .position-right .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-right .v-sheet {\n  border-radius: 0px;\n}\n.zd-login .position-right .zd-login-background-image {\n  position: absolute;\n  left: 0px;\n  height: 100%;\n}\n.zd-login .position-center {\n  justify-content: center;\n}\n.zd-login .position-center .zd-login-powered-by {\n  position: absolute;\n  bottom: 48px;\n  left: 48px;\n}\n.zd-login .position-center .backgroud-div {\n  position: absolute !important;\n}\n.zd-login .position-center .zd-login-background-image {\n  position: absolute;\n  height: 100%;\n}\n.zd-login .zd-login-powered-by-card {\n  padding: 10px;\n  display: none;\n  margin-left: auto;\n  margin-right: auto;\n}\n.zd-login-card {\n  height: 90%;\n  padding: 40px;\n  background-color: #fff;\n}\n.zd-login-card .zd-login-message {\n  font-size: var(--zd-font-headline-size);\n  font-weight: var(--zd-font-headline-weight);\n  color: var(--zd-font-default-color);\n  line-height: 24px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-logo {\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-toolbar .v-card__title {\n  padding: 0;\n  align-items: center;\n  display: flex;\n  flex-wrap: wrap;\n}\n.zd-login-card .zd-login-card-actions {\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  margin-top: 20px;\n  margin-bottom: 20px;\n}\n.zd-login-card .zd-login-sign-in {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-top: solid var(--regular) #f5f5f5;\n  padding-top: 10px;\n  text-align: center;\n  font-size: var(--zd-font-body1-size);\n}\n.zd-login-card .zd-login-social-buttons {\n  padding: 10px;\n}\n.zd-login-card .zd-login-social-buttons > img {\n  border: solid var(--regular) #e0e0e0;\n  border-radius: 50%;\n  vertical-align: top;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  align-content: center;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -56903,11 +56973,68 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       constructor() {
           super(...arguments);
           this.instanceType = common.Search;
+          this.dropdownProps = {
+              openOnClick: true,
+              openOnHover: false,
+              openOnFocus: false,
+              offsetY: true,
+          };
+      }
+      selectSearchField({ component }) {
+          const searchField = component.userProperties.fieldName === '__ALL' ? undefined : component.userProperties.fieldName;
+          const changed = this.instance.iterableComponent.searchIn !== searchField;
+          this.instance.iterableComponent.searchIn = searchField;
+          this.$forceUpdate();
+          this.$nextTick(() => {
+              this.instance.hint = this.getHintText();
+              if (changed)
+                  this.instance.iterableComponent.setSearch(this.instance.value);
+          });
+      }
+      getHintText() {
+          return this.instance.iterableComponent.searchIn
+              ? this.instance.iterableComponent.getColumn(this.instance.iterableComponent.searchIn).label
+              : this.$t('ALL_FIELDS');
+      }
+      mounted() {
+          var _a;
+          if (!this.$refs.dropdown)
+              return;
+          const dropdown = this.$refs.dropdown.instance;
+          dropdown.children = [{
+                  name: `${this.instance.name}_search_all`,
+                  component: 'ZdButton',
+                  label: 'SEARCH_ALL_FIELDS',
+                  cssClass: 'zd-search-buttons',
+                  flat: true,
+                  events: { click: this.selectSearchField },
+                  fieldName: '__ALL',
+              }];
+          (_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.columns.forEach((column) => {
+              var _a;
+              if (!((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.isColumnSearchable(column)))
+                  return;
+              dropdown.children.push({
+                  name: `${this.instance.name}_search_${column.name}`,
+                  component: 'ZdButton',
+                  label: column.label,
+                  cssClass: 'zd-search-buttons',
+                  flat: true,
+                  events: { click: this.selectSearchField },
+                  fieldName: column.name,
+              });
+          });
       }
       getSearchValue() {
           var _a;
           return ((_a = this.instance.iterableComponent) === null || _a === void 0 ? void 0 : _a.datasource.search) || '';
       }
+      toggleDropdown() {
+          const dropdown = core.Metadata.getInstance(`${this.instance.name}_dropdown`);
+          if (!dropdown)
+              return;
+          dropdown.value = !dropdown.value;
+      }
   };
   __decorate([
       PropWatch({ type: String }),
@@ -56936,7 +57063,27 @@ If you're seeing "$attrs is readonly", it's caused by this`);
   ZdSearch = __decorate([
       vuePropertyDecorator.Component
   ], ZdSearch);
-  var script$j = ZdSearch;
+  var script$j = ZdSearch;
+  core.Messages.add({
+      'pt-BR': {
+          translation: {
+              ALL_FIELDS: 'Todos os Campos',
+              SEARCH_ALL_FIELDS: 'Todos os Campos',
+          },
+      },
+      'en-US': {
+          translation: {
+              ALL_FIELDS: 'All Fields',
+              SEARCH_ALL_FIELDS: 'All Fields',
+          },
+      },
+      'es-ES': {
+          translation: {
+              ALL_FIELDS: 'Todos los Campos',
+              SEARCH_ALL_FIELDS: 'Todos los Campos',
+          },
+      },
+  });
 
   /* script */
   const __vue_script__$m = script$j;
@@ -56946,21 +57093,34 @@ If you're seeing "$attrs is readonly", it's caused by this`);
     var _vm = this;
     var _h = _vm.$createElement;
     var _c = _vm._self._c || _h;
-    return _c("zd-text-input", {
-      class: ["zd-search", "zd-float-right", _vm.instance.cssClass],
-      style: _vm.instance.cssStyle,
-      attrs: {
-        id: _vm.instance.name,
-        name: "zdGridSearch",
-        value: _vm.getSearchValue(),
-        "instance-object": _vm.instance,
-      },
-      on: {
-        "update:value": function ($event) {
-          return _vm.instance.debounceSetSearch($event)
+    return _c(
+      "zd-dropdown",
+      _vm._b(
+        {
+          ref: "dropdown",
+          attrs: {
+            name: _vm.instance.name + "_dropdown",
+            activator: {
+              name: "zdGridSearch",
+              component: "ZdTextInput",
+              class: ["zd-search", "zd-float-right", _vm.instance.cssClass],
+              persistentHint: true,
+              hint: _vm.getHintText(),
+              style: _vm.instance.cssStyle,
+              value: _vm.getSearchValue(),
+              events: {
+                input: _vm.instance.debounceSetSearch,
+                appendIconClick: _vm.toggleDropdown,
+              },
+              "instance-object": _vm.instance,
+            },
+          },
         },
-      },
-    })
+        "zd-dropdown",
+        _vm.dropdownProps,
+        false
+      )
+    )
   };
   var __vue_staticRenderFns__$m = [];
   __vue_render__$m._withStripped = true;
@@ -56968,7 +57128,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-3a30d9cc_0", { source: ".zd-search {\n  width: 100%;\n}", map: undefined, media: undefined });
+      inject("data-v-7fb067f0_0", { source: ".zd-search {\n  width: 100%;\n}\n.zd-search.zd-input.v-input.zd-no-helper > .v-input__control > .v-text-field__details {\n  display: flex;\n}\n.zd-search .v-input__append-inner .v-input__icon--append .v-icon {\n  background-color: var(--v-primary-base) !important;\n  color: white !important;\n  border-radius: 3px !important;\n  margin-right: 2px !important;\n}\n.zd-search-buttons {\n  display: block;\n  width: 100%;\n  justify-content: left;\n}", map: undefined, media: undefined });
 
     };
     /* scoped */
@@ -57501,213 +57661,329 @@ If you're seeing "$attrs is readonly", it's caused by this`);
       "div",
       { staticClass: "zd-select-multiple-container" },
       [
-        _c(_vm.instance.autocomplete ? "v-autocomplete" : "v-select", {
-          directives: [
-            {
-              name: "show",
-              rawName: "v-show",
-              value: _vm.instance.isVisible,
-              expression: "instance.isVisible",
-            },
-          ],
-          ref: "instance",
-          tag: "component",
-          class: [
-            _vm.instance.cssClass,
-            "zd-input",
-            "zd-text-input",
-            "zd-select",
-            "zd-select-multiple",
+        _c(
+          _vm.instance.autocomplete ? "v-autocomplete" : "v-select",
+          _vm._g(
             {
-              "zd-no-label": !_vm.instance.showLabel,
-              "zd-no-helper":
-                !_vm.instance.showHelper &&
-                !(
-                  _vm.instance.alwaysShowError &&
-                  _vm.$refs.instance &&
-                  _vm.$refs.instance.errorBucket.length
+              directives: [
+                {
+                  name: "show",
+                  rawName: "v-show",
+                  value: _vm.instance.isVisible,
+                  expression: "instance.isVisible",
+                },
+              ],
+              ref: "instance",
+              tag: "component",
+              class: [
+                _vm.instance.cssClass,
+                "zd-input",
+                "zd-text-input",
+                "zd-select",
+                "zd-select-multiple",
+                {
+                  "zd-no-label": !_vm.instance.showLabel,
+                  "zd-no-helper":
+                    !_vm.instance.showHelper &&
+                    !(
+                      _vm.instance.alwaysShowError &&
+                      _vm.$refs.instance &&
+                      _vm.$refs.instance.errorBucket.length
+                    ),
+                  "zd-no-border": !_vm.instance.showBorder,
+                  "zd-dense": _vm.instance.dense,
+                  "zd-select-multiple-autocomplete": _vm.instance.autocomplete,
+                  "zd-input-required": _vm.instance.validations.required,
+                  "zd-select-modal-selection": _vm.showModalButton,
+                },
+                "zd-select-align-" +
+                  (_vm.instance.reverse ? "right" : _vm.instance.align),
+              ],
+              style: _vm.instance.cssStyle,
+              attrs: {
+                id: _vm.instance.name,
+                "return-object": "",
+                "validate-on-blur": "",
+                "no-data-text": _vm.$t("NO_DATA"),
+                multiple: "",
+                name: _vm.instance.name,
+                loading: _vm.instance.datasource.loading,
+                clearable:
+                  _vm.instance.clearable &&
+                  !_vm.instance.readonly &&
+                  !_vm.instance.disabled,
+                color: _vm.instance.color,
+                "item-color": _vm.instance.color,
+                dark: _vm.instance.dark,
+                disabled: _vm.instance.disabled,
+                readonly: _vm.instance.readonly,
+                items: _vm.formattedData,
+                "item-text": "text",
+                "item-value": "value",
+                "item-disabled": "disabled",
+                label: _vm.instance.showLabel
+                  ? _vm.$t(_vm.instance.label)
+                  : undefined,
+                placeholder: _vm.getPlaceHolder(),
+                hint: _vm.$t(_vm.instance.hint),
+                persistentHint: _vm.instance.persistentHint,
+                prependInnerIcon: _vm.$getIcon(_vm.instance.prependIcon),
+                reverse: _vm.instance.reverse,
+                rules: _vm.rules,
+                light: _vm.instance.light,
+                maxLength: _vm.instance.maxLength,
+                tabindex: _vm.instance.tabStop ? "" : "-1",
+                "menu-props": {
+                  contentClass:
+                    "zd-select-menu zd-select-align-" +
+                    (_vm.instance.reverse ? "right" : _vm.instance.align),
+                  dark: _vm.instance.dark,
+                  offsetY: true,
+                  offsetOverflow: true,
+                  fixed: true,
+                  "max-width": _vm.parentWidth,
+                  closeOnContentClick: false,
+                  maxHeight: _vm.instance.menuMaxHeight,
+                },
+                "search-input": _vm.instance.search,
+                "append-icon": _vm.$getIcon(
+                  _vm.showModalButton ? "tableSearch" : _vm.instance.appendIcon
                 ),
-              "zd-no-border": !_vm.instance.showBorder,
-              "zd-dense": _vm.instance.dense,
-              "zd-select-multiple-autocomplete": _vm.instance.autocomplete,
-              "zd-input-required": _vm.instance.validations.required,
-            },
-            "zd-select-align-" +
-              (_vm.instance.reverse ? "right" : _vm.instance.align),
-          ],
-          style: _vm.instance.cssStyle,
-          attrs: {
-            id: _vm.instance.name,
-            "return-object": "",
-            "validate-on-blur": "",
-            "no-data-text": _vm.$t("NO_DATA"),
-            multiple: "",
-            name: _vm.instance.name,
-            loading: _vm.instance.datasource.loading,
-            clearable:
-              _vm.instance.clearable &&
-              !_vm.instance.readonly &&
-              !_vm.instance.disabled,
-            color: _vm.instance.color,
-            "item-color": _vm.instance.color,
-            dark: _vm.instance.dark,
-            disabled: _vm.instance.disabled,
-            readonly: _vm.instance.readonly,
-            items: _vm.formattedData,
-            "item-text": "text",
-            "item-value": "value",
-            "item-disabled": "disabled",
-            label: _vm.instance.showLabel
-              ? _vm.$t(_vm.instance.label)
-              : undefined,
-            placeholder: _vm.$t(_vm.instance.placeholder),
-            hint: _vm.$t(_vm.instance.hint),
-            persistentHint: _vm.instance.persistentHint,
-            prependInnerIcon: _vm.$getIcon(_vm.instance.prependIcon),
-            reverse: _vm.instance.reverse,
-            rules: _vm.rules,
-            light: _vm.instance.light,
-            maxLength: _vm.instance.maxLength,
-            tabindex: _vm.instance.tabStop ? "" : "-1",
-            "menu-props": {
-              contentClass:
-                "zd-select-menu zd-select-align-" +
-                (_vm.instance.reverse ? "right" : _vm.instance.align),
-              dark: _vm.instance.dark,
-              offsetY: true,
-              offsetOverflow: true,
-              fixed: true,
-              "max-width": _vm.parentWidth,
-              closeOnContentClick: false,
-              maxHeight: _vm.instance.menuMaxHeight,
-            },
-            "search-input": _vm.instance.search,
-            "append-icon": _vm.$getIcon(_vm.instance.appendIcon),
-            "append-outer-icon": _vm.$getIcon(_vm.instance.appendOuterIcon),
-            "prepend-icon": _vm.$getIcon(_vm.instance.prependOuterIcon),
-            "prepend-inner-icon": _vm.$getIcon(_vm.instance.prependIcon),
-          },
-          on: {
-            "click:append": function ($event) {
-              return _vm.toggle()
-            },
-            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)
-            },
-            blur: function ($event) {
-              return _vm.selectBlur($event)
-            },
-            focus: function ($event) {
-              return _vm.selectFocus($event)
-            },
-            "update:search-input": [
-              function ($event) {
-                return _vm.selectInput($event)
+                "append-outer-icon": _vm.$getIcon(_vm.instance.appendOuterIcon),
+                "prepend-icon": _vm.$getIcon(_vm.instance.prependOuterIcon),
+                "prepend-inner-icon": _vm.$getIcon(_vm.instance.prependIcon),
               },
-              function ($event) {
-                return _vm.$set(_vm.instance, "search", $event)
+              on: {
+                "click:append": function ($event) {
+                  return _vm.toggle()
+                },
+                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)
+                },
+                blur: function ($event) {
+                  return _vm.selectBlur($event)
+                },
+                focus: function ($event) {
+                  return _vm.selectFocus($event)
+                },
+                "update:search-input": [
+                  function ($event) {
+                    return _vm.selectInput($event)
+                  },
+                  function ($event) {
+                    return _vm.$set(_vm.instance, "search", $event)
+                  },
+                ],
+                keyup: function ($event) {
+                  return _vm.instance.keyup($event)
+                },
+                keydown: function ($event) {
+                  return _vm.instance.keydown($event)
+                },
+                "update:searchInput": function ($event) {
+                  return _vm.$set(_vm.instance, "search", $event)
+                },
               },
-            ],
-            keyup: function ($event) {
-              return _vm.instance.keyup($event)
-            },
-            keydown: function ($event) {
-              return _vm.instance.keydown($event)
-            },
-            "update:searchInput": function ($event) {
-              return _vm.$set(_vm.instance, "search", $event)
-            },
-          },
-          scopedSlots: _vm._u(
-            [
-              _vm.instance.itemBeforeSlot.length || _vm.instance.showSelectAll
-                ? {
-                    key: "prepend-item",
-                    fn: function () {
-                      return [
-                        _vm.instance.showSelectAll
-                          ? [
-                              _c(
-                                "div",
-                                { staticClass: "zd-select-append-item" },
-                                [
+              scopedSlots: _vm._u(
+                [
+                  _vm.instance.itemBeforeSlot.length || _vm.instance.showSelectAll
+                    ? {
+                        key: "prepend-item",
+                        fn: function () {
+                          return [
+                            _vm.instance.showSelectAll
+                              ? [
                                   _c(
-                                    "v-list-item",
-                                    {
-                                      attrs: { ripple: "" },
-                                      on: {
-                                        click: function ($event) {
-                                          $event.stopPropagation();
-                                          return _vm.onSelectAll($event)
-                                        },
-                                      },
-                                    },
+                                    "div",
+                                    { staticClass: "zd-select-append-item" },
                                     [
                                       _c(
-                                        "v-list-item-action",
-                                        [
-                                          _c("v-checkbox", {
-                                            ref: "checkboxAll",
-                                            staticClass: "zd-checkbox-all",
-                                            attrs: {
-                                              "hide-details": "",
-                                              color: "primary",
-                                              readonly: "",
-                                              "on-icon":
-                                                _vm.$getIcon("checkboxOn"),
-                                              "off-icon":
-                                                _vm.$getIcon("checkboxOff"),
-                                              "indeterminate-icon": _vm.$getIcon(
-                                                "checkboxIndeterminate"
-                                              ),
-                                            },
-                                            model: {
-                                              value: _vm.allSelected,
-                                              callback: function ($$v) {
-                                                _vm.allSelected = $$v;
-                                              },
-                                              expression: "allSelected",
+                                        "v-list-item",
+                                        {
+                                          attrs: { ripple: "" },
+                                          on: {
+                                            click: function ($event) {
+                                              $event.stopPropagation();
+                                              return _vm.onSelectAll($event)
                                             },
-                                          }),
+                                          },
+                                        },
+                                        [
+                                          _c(
+                                            "v-list-item-action",
+                                            [
+                                              _c("v-checkbox", {
+                                                ref: "checkboxAll",
+                                                staticClass: "zd-checkbox-all",
+                                                attrs: {
+                                                  "hide-details": "",
+                                                  color: "primary",
+                                                  readonly: "",
+                                                  "on-icon":
+                                                    _vm.$getIcon("checkboxOn"),
+                                                  "off-icon":
+                                                    _vm.$getIcon("checkboxOff"),
+                                                  "indeterminate-icon":
+                                                    _vm.$getIcon(
+                                                      "checkboxIndeterminate"
+                                                    ),
+                                                },
+                                                model: {
+                                                  value: _vm.allSelected,
+                                                  callback: function ($$v) {
+                                                    _vm.allSelected = $$v;
+                                                  },
+                                                  expression: "allSelected",
+                                                },
+                                              }),
+                                            ],
+                                            1
+                                          ),
+                                          _vm._v(" "),
+                                          _c(
+                                            "v-list-item-content",
+                                            [
+                                              _c("v-list-item-title", [
+                                                _vm._v(
+                                                  "\n                  " +
+                                                    _vm._s(_vm.$t("SELECT_ALL")) +
+                                                    "\n                "
+                                                ),
+                                              ]),
+                                            ],
+                                            1
+                                          ),
                                         ],
                                         1
                                       ),
-                                      _vm._v(" "),
+                                    ],
+                                    1
+                                  ),
+                                  _vm._v(" "),
+                                  _c("v-divider"),
+                                ]
+                              : _vm._e(),
+                            _vm._v(" "),
+                            _vm.instance.itemBeforeSlot.length
+                              ? [
+                                  _c(
+                                    "div",
+                                    { staticClass: "zd-select-append-item" },
+                                    [
                                       _c(
-                                        "v-list-item-content",
+                                        "v-list-item",
                                         [
-                                          _c("v-list-item-title", [
-                                            _vm._v(
-                                              "\n                  " +
-                                                _vm._s(_vm.$t("SELECT_ALL")) +
-                                                "\n                "
-                                            ),
-                                          ]),
+                                          _c(
+                                            "v-list-item-content",
+                                            { staticClass: "v-list-item__title" },
+                                            [
+                                              !_vm.$slots.itemBeforeSlot
+                                                ? _vm._l(
+                                                    _vm.instance.itemBeforeSlot,
+                                                    function (child, index) {
+                                                      return _c(
+                                                        child.component,
+                                                        _vm._b(
+                                                          {
+                                                            key: index,
+                                                            ref: "itemBefore",
+                                                            refInFor: true,
+                                                            tag: "component",
+                                                            attrs: {
+                                                              parent:
+                                                                _vm.instance,
+                                                            },
+                                                          },
+                                                          "component",
+                                                          child,
+                                                          false
+                                                        )
+                                                      )
+                                                    }
+                                                  )
+                                                : _vm._e(),
+                                              _vm._v(" "),
+                                              _vm._t("itemBeforeSlot"),
+                                            ],
+                                            2
+                                          ),
                                         ],
                                         1
                                       ),
                                     ],
                                     1
                                   ),
-                                ],
-                                1
-                              ),
-                              _vm._v(" "),
-                              _c("v-divider"),
-                            ]
+                                  _vm._v(" "),
+                                  _c("v-divider"),
+                                ]
+                              : _vm._e(),
+                          ]
+                        },
+                        proxy: true,
+                      }
+                    : null,
+                  {
+                    key: "selection",
+                    fn: function (props) {
+                      return [
+                        _vm.isChipVisible(props.index)
+                          ? _c(
+                              "v-chip",
+                              {
+                                attrs: {
+                                  small: !_vm.instance.dense,
+                                  "x-small": _vm.instance.dense,
+                                  disabled: _vm.instance.disabled,
+                                  close: !_vm.instance.readonly,
+                                },
+                                on: {
+                                  "click:close": function ($event) {
+                                    return _vm.removeItem(props.item)
+                                  },
+                                },
+                              },
+                              [
+                                _c("div", { staticClass: "chip-text" }, [
+                                  _vm._v(
+                                    _vm._s(
+                                      _vm.formattedDataDiscreteText(
+                                        props.item.originalRow
+                                      )
+                                    )
+                                  ),
+                                ]),
+                              ]
+                            )
                           : _vm._e(),
                         _vm._v(" "),
-                        _vm.instance.itemBeforeSlot.length
+                        _vm.isMoreVisible(props.index)
+                          ? _c(
+                              "span",
+                              { staticClass: "more-items grey--text caption" },
+                              [_vm._v(_vm._s(_vm.moreItemsText))]
+                            )
+                          : _vm._e(),
+                      ]
+                    },
+                  },
+                  {
+                    key: "append-item",
+                    fn: function () {
+                      return [
+                        _vm.instance.itemAfterSlot.length ||
+                        !!_vm.$slots.itemAfterSlot
                           ? [
+                              _c("v-divider"),
+                              _vm._v(" "),
                               _c(
                                 "div",
                                 { staticClass: "zd-select-append-item" },
@@ -57719,17 +57995,15 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                         "v-list-item-content",
                                         { staticClass: "v-list-item__title" },
                                         [
-                                          !_vm.$slots.itemBeforeSlot
+                                          !_vm.$slots.itemAfterSlot
                                             ? _vm._l(
-                                                _vm.instance.itemBeforeSlot,
+                                                _vm.instance.itemAfterSlot,
                                                 function (child, index) {
                                                   return _c(
                                                     child.component,
                                                     _vm._b(
                                                       {
                                                         key: index,
-                                                        ref: "itemBefore",
-                                                        refInFor: true,
                                                         tag: "component",
                                                         attrs: {
                                                           parent: _vm.instance,
@@ -57744,7 +58018,7 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                               )
                                             : _vm._e(),
                                           _vm._v(" "),
-                                          _vm._t("itemBeforeSlot"),
+                                          _vm._t("itemAfterSlot"),
                                         ],
                                         2
                                       ),
@@ -57754,164 +58028,61 @@ If you're seeing "$attrs is readonly", it's caused by this`);
                                 ],
                                 1
                               ),
-                              _vm._v(" "),
-                              _c("v-divider"),
                             ]
                           : _vm._e(),
-                      ]
-                    },
-                    proxy: true,
-                  }
-                : null,
-              {
-                key: "selection",
-                fn: function (props) {
-                  return [
-                    _vm.isChipVisible(props.index)
-                      ? _c(
-                          "v-chip",
-                          {
-                            attrs: {
-                              small: !_vm.instance.dense,
-                              "x-small": _vm.instance.dense,
-                              disabled: _vm.instance.disabled,
-                              close: !_vm.instance.readonly,
-                            },
-                            on: {
-                              "click:close": function ($event) {
-                                return _vm.removeItem(props.item)
-                              },
-                            },
-                          },
-                          [
-                            _c("div", { staticClass: "chip-text" }, [
-                              _vm._v(
-                                _vm._s(
-                                  _vm.formattedDataDiscreteText(
-                                    props.item.originalRow
-                                  )
-                                )
-                              ),
-                            ]),
-                          ]
-                        )
-                      : _vm._e(),
-                    _vm._v(" "),
-                    _vm.isMoreVisible(props.index)
-                      ? _c(
-                          "span",
-                          { staticClass: "more-items grey--text caption" },
-                          [_vm._v(_vm._s(_vm.moreItemsText))]
-                        )
-                      : _vm._e(),
-                  ]
-                },
-              },
-              {
-                key: "append-item",
-                fn: function () {
-                  return [
-                    _vm.instance.itemAfterSlot.length ||
-                    !!_vm.$slots.itemAfterSlot
-                      ? [
-                          _c("v-divider"),
-                          _vm._v(" "),
-                          _c(
-                            "div",
-                            { staticClass: "zd-select-append-item" },
-                            [
+                        _vm._v(" "),
+                        _vm.instance.showLoadMore()
+                          ? [
+                              _c("v-divider"),
+                              _vm._v(" "),
                               _c(
-                                "v-list-item",
+                                "div",
+                                {
+                                  staticClass: "zd-select-append-item",
+                                  on: {
+                                    mousedown: function ($event) {
+                                      $event.preventDefault();
+                                      return _vm.loadMore()
+                                    },
+                                  },
+                                },
                                 [
                                   _c(
-                                    "v-list-item-content",
-                                    { staticClass: "v-list-item__title" },
+                                    "v-list-item",
+                                    { attrs: { link: "" } },
                                     [
-                                      !_vm.$slots.itemAfterSlot
-                                        ? _vm._l(
-                                            _vm.instance.itemAfterSlot,
-                                            function (child, index) {
-                                              return _c(
-                                                child.component,
-                                                _vm._b(
-                                                  {
-                                                    key: index,
-                                                    tag: "component",
-                                                    attrs: {
-                                                      parent: _vm.instance,
-                                                    },
-                                                  },
-                                                  "component",
-                                                  child,
-                                                  false
-                                                )
-                                              )
-                                            }
-                                          )
-                                        : _vm._e(),
-                                      _vm._v(" "),
-                                      _vm._t("itemAfterSlot"),
+                                      _c("v-list-item-content", [
+                                        _c("span", [
+                                          _vm._v(_vm._s(_vm.$t("LOAD_MORE"))),
+                                        ]),
+                                      ]),
                                     ],
-                                    2
+                                    1
                                   ),
                                 ],
                                 1
                               ),
-                            ],
-                            1
-                          ),
-                        ]
-                      : _vm._e(),
-                    _vm._v(" "),
-                    _vm.instance.showLoadMore()
-                      ? [
-                          _c("v-divider"),
-                          _vm._v(" "),
-                          _c(
-                            "div",
-                            {
-                              staticClass: "zd-select-append-item",
-                              on: {
-                                mousedown: function ($event) {
-                                  $event.preventDefault();
-                                  return _vm.loadMore()
-                                },
-                              },
-                            },
-                            [
-                              _c(
-                                "v-list-item",
-                                { attrs: { link: "" } },
-                                [
-                                  _c("v-list-item-content", [
-                                    _c("span", [
-                                      _vm._v(_vm._s(_vm.$t("LOAD_MORE"))),
-                                    ]),
-                                  ]),
-                                ],
-                                1
-                              ),
-                            ],
-                            1
-                          ),
-                        ]
-                      : _vm._e(),
-                  ]
+                            ]
+                          : _vm._e(),
+                      ]
+                    },
+                    proxy: true,
+                  },
+                ],
+                null,
+                true
+              ),
+              model: {
+                value: _vm.formattedValue,
+                callback: function ($$v) {
+                  _vm.formattedValue = $$v;
                 },
-                proxy: true,
+                expression: "formattedValue",
               },
-            ],
-            null,
-            true
-          ),
-          model: {
-            value: _vm.formattedValue,
-            callback: function ($$v) {
-              _vm.formattedValue = $$v;
             },
-            expression: "formattedValue",
-          },
-        }),
+            _vm.getSelectIconClickEvents()
+          )
+        ),
         _vm._v(" "),
         _vm.instance.showCheckboxAll
           ? _c("v-checkbox", {
@@ -57937,7 +58108,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-7bb88de0_0", { source: ".zd-select-multiple-container {\n  height: auto;\n  min-height: auto;\n  max-height: none;\n  display: flex;\n  flex: 0 0 100%;\n  flex-direction: row;\n}\n.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  min-width: 0 !important;\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}\n.zd-select-multiple--checkbox-all {\n  margin: 0;\n  padding: 0;\n}\n.zd-select-multiple--checkbox-all .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}", map: undefined, media: undefined });
+      inject("data-v-255ae888_0", { source: ".zd-select-multiple-container {\n  height: auto;\n  min-height: auto;\n  max-height: none;\n  display: flex;\n  flex: 0 0 100%;\n  flex-direction: row;\n}\n.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  min-width: 0 !important;\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}\n.zd-select-multiple--checkbox-all {\n  margin: 0;\n  padding: 0;\n}\n.zd-select-multiple--checkbox-all .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}", map: undefined, media: undefined });
 
     };
     /* scoped */