@heartlandone/vega 2.0.0-temp-test-0.2 → 2.0.0

package/dist/cjs/{vega-dropdown.cjs.entry.js → vega-dropdown_5.cjs.entry.js}

@@ -2,93 +2,166 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4c1d8251.js');
-const component = require('./component-a411c045.js');
-const vegaSlimmer = require('./vega-slimmer-281f0079.js');
+const index = require('./index-1299d729.js');
+const component = require('./component-b50f0483.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const mapToComponentMethod = require('./map-to-component-method-ec6546f1.js');
-const typeGuard = require('./typeGuard-447fb5bd.js');
+const injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
+const ui = require('./ui-23cd9abb.js');
+const typeGuard = require('./typeGuard-70b919b6.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const ui = require('./ui-97068bc7.js');
 const log = require('./log-5d8066e0.js');
-const subStateNotifySlimmer = require('./subStateNotifySlimmer-0602d340.js');
-const array = require('./array-e1e5ed1d.js');
-const observer = require('./observer-126f19d0.js');
-const changeManager = require('./changeManager-91f1f24a.js');
-const misc = require('./misc-3d30df91.js');
-require('./featureFlagController-3b23a9cb.js');
-require('./breakpoints-b5eab9c2.js');
-require('./typography-358013af.js');
-require('./elementAppender-35b30be1.js');
-require('./responsiveFormatFacade-6cc0b6b2.js');
-require('./breakpoints-89055ccc.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const internalVegaEventManager = require('./internalVegaEventManager-cfb1df83.js');
+const keyboardManagerSlimmer = require('./keyboardManagerSlimmer-7d750268.js');
+const elementAppenderSlimmer = require('./elementAppenderSlimmer-853b7f89.js');
+const array = require('./array-5f977aa2.js');
+const subStateObserverSlimmer = require('./subStateObserverSlimmer-96ca747f.js');
+const childNodesNotifyObserverSlimmer = require('./childNodesNotifyObserverSlimmer-77d939be.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-4b96b18b.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
+require('./breakpoints-97c1f5c8.js');
+require('./ui-ef822fe1.js');
+require('./typography-3d2ba97d.js');
+require('./dynamic-slimmer-c718b7d9.js');
+require('./keyboardManager-1ea14f2e.js');
+require('./elementAppender-e585dbc9.js');
+require('./responsiveFormatFacade-8518443e.js');
 require('./number-7e7d9981.js');
 require('./zIndexManager-de9aa352.js');
-require('./dynamic-slimmer-e289eb0b.js');
-require('./pageResizeObserverSlimmer-a81a52b1.js');
-require('./keyboardManager-8084a0cf.js');
+require('./pageResizeObserverSlimmer-9751395d.js');
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDropdownRenderer extends vegaSlimmer.VegaSlimmer {
-  setVirtualContainer() {
-    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  componentDidRender() {
+    this.setVirtualContainer();
+    this.appendItemsToContentBox();
+    this.appendDropdownToContentBox();
   }
   getDropdownRef() {
     return this.dropdownRef;
   }
+  getDropdownContentBoxRef() {
+    return this.dropdownContentBoxRef;
+  }
   getVirtualContainerRef() {
     return this.virtualContainerRef;
   }
-  render(dropdownId) {
+  /* istanbul ignore next */
+  getNextActiveItem(code) {
+    const items = this.getAllItems();
+    const currentActiveItem = this.getCurrentActiveItem();
+    if (currentActiveItem) {
+      const currentIndex = items.findIndex((item) => item === currentActiveItem);
+      const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      const nextItem = items[nextIndex];
+      if (nextItem) {
+        return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+      }
+      else {
+        return null;
+      }
+    }
+    else {
+      return items[0];
+    }
+  }
+  render() {
     return (index.h(index.Fragment, null,
       this.renderContentSlot(),
-      this.renderDropdown(dropdownId)));
+      this.renderDropdown()));
   }
   renderContentSlot() {
     return this.renderModeController.isSourceRenderMode() ? index.h("slot", null) : index.h("slot", { name: "dropdown-content" });
   }
-  renderDropdown(dropdownId) {
-    return (index.h("div", { "data-parent-id": dropdownId, ref: (e) => (this.dropdownRef = e), class: {
-        'vega-dropdown': true,
-        'vega-dropdown-with-searchable': this.searchable,
-      }, style: { maxHeight: `${this.maxHeight}px` } },
-      index.h("div", { class: "vega-dropdown-actions" },
-        this.searchRenderer.render(),
-        this.createRenderer.render()),
-      index.h("div", null,
-        index.h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
-          ? this.listRenderer.renderBySource()
-          : this.listRenderer.renderBySlot()))));
+  renderDropdown() {
+    return (index.h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host },
+      index.h("div", { ref: (e) => (this.dropdownRef = e), class: {
+          'vega-dropdown': true,
+          'vega-dropdown-with-searchable': this.searchable,
+        } },
+        index.h("div", { class: "vega-dropdown-actions" },
+          this.searchRenderer.render(),
+          this.createRenderer.render()),
+        index.h("div", null,
+          index.h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
+            ? this.listRenderer.renderBySource()
+            : this.listRenderer.renderBySlot())))));
+  }
+  setVirtualContainer() {
+    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  }
+  appendItemsToContentBox() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      const itemsSlot = this.host.querySelector("[slot='items']");
+      if (!this.dropdownContentBoxRef.contains(itemsSlot) && itemsSlot) {
+        this.dropdownContentBoxRef.append(itemsSlot);
+      }
+    }
+  }
+  appendDropdownToContentBox() {
+    var _a, _b;
+    if (!((_a = this.dropdownContentBoxRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(this.dropdownRef))) {
+      (_b = this.dropdownContentBoxRef.shadowRoot) === null || _b === void 0 ? void 0 : _b.append(this.dropdownRef);
+    }
+  }
+  /* istanbul ignore next */
+  getAllItems() {
+    const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
+    const itemContainer = virtualScroll
+      ? virtualScroll.shadowRoot
+      : this.dropdownRef;
+    return Array.from(itemContainer.querySelectorAll('vega-dropdown-item'));
+  }
+  /* istanbul ignore next */
+  getCurrentActiveItem() {
+    return ui.findParent(component.getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
+  }
+  /* istanbul ignore next */
+  findNextCallFocusItem(items, currentIndex, code) {
+    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+    const nextItem = items[nextIndex];
+    if (nextItem) {
+      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+    }
+    else {
+      return null;
+    }
   }
 }
-__decorate$e([
+__decorate$l([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownRenderer.prototype, "host", void 0);
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$e([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$e([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$e([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$e([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$e([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$e([
-  mapToComponentMethod.MapToComponentMethod('componentDidRender')
-], VegaDropdownRenderer.prototype, "setVirtualContainer", null);
+__decorate$l([
+  vegaSlimmer.MapToComponentMethod('componentDidRender')
+], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -115,22 +188,15 @@ class VegaDropdownSourceController extends vegaSlimmer.VegaSlimmer {
    * The function sets the source for rendering by searching for a formatted source.
    */
   setRenderSource() {
-    this.sourceForRender = this.searchController.search(this.formattedSource);
+    this.sourceForRender = this.searchController.search(this.source);
   }
   /**
    * The function "handleSource" performs validation, formatting, and rendering of a source.
    */
   handleSource() {
     this.validSource();
-    this.formatSource();
     this.setRenderSource();
   }
-  /**
-   * The function "formatSource" formats the source code using a formatSourceController.
-   */
-  formatSource() {
-    this.formattedSource = this.formatSourceController.format();
-  }
   /**
    * The function "validSource" checks if the "source" variable is an array of "VegaDropdownSourceItem"
    * type, and if not, assigns an empty array to it.
@@ -141,26 +207,23 @@ class VegaDropdownSourceController extends vegaSlimmer.VegaSlimmer {
       : [];
   }
 }
-__decorate$d([
+__decorate$k([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$d([
+__decorate$k([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$d([
+__decorate$k([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$d([
-  vegaSlimmer.MapToComponentField()
-], VegaDropdownSourceController.prototype, "formatSourceController", void 0);
-__decorate$d([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+__decorate$k([
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$d([
-  mapToComponentMethod.MapToComponentMethod('watchSource')
+__decorate$k([
+  vegaSlimmer.MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -170,7 +233,7 @@ class VegaDropdownCreateRenderer extends vegaSlimmer.VegaSlimmer {
   constructor() {
     super(...arguments);
     this.onItemAdd = () => {
-      this.vegaCreate.emit(this.searchString);
+      this.createEventEmitter.emit(this.searchString);
       this.appenderController.hide();
     };
   }
@@ -186,29 +249,29 @@ class VegaDropdownCreateRenderer extends vegaSlimmer.VegaSlimmer {
       index.h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$c([
-  vegaSlimmer.MapToComponentField()
-], VegaDropdownCreateRenderer.prototype, "vegaCreate", void 0);
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$c([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
+__decorate$j([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -247,7 +310,7 @@ class VegaDropdownListRenderer extends vegaSlimmer.VegaSlimmer {
         'vega-dropdown-loading': true,
         'v-hidden': !this.isLoading,
       } },
-      index.h("vega-flex", { useNativeFlex: true, gap: "size-8", direction: "row" },
+      index.h("vega-flex", { gap: "size-8", direction: "row" },
         index.h("vega-loading-indicator", { size: "small" }),
         index.h("span", null, "Loading"))));
   }
@@ -256,9 +319,7 @@ class VegaDropdownListRenderer extends vegaSlimmer.VegaSlimmer {
       return (index.h("div", { class: "vega-dropdown-empty-list" }, this.searchString ? 'No results found' : 'No options'));
     }
     else {
-      return (index.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
-          [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
-        } },
+      return (index.h("ul", { role: "menu", "aria-label": "dropdown-ul" },
         index.h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
           renderItem: (item, index, fixHeight) => {
@@ -288,7 +349,7 @@ class VegaDropdownListRenderer extends vegaSlimmer.VegaSlimmer {
    */
   /* istanbul ignore next */
   adjustListContainerMaxHeight() {
-    const dropdownRef = this.renderer.getDropdownRef();
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
     const dropdownMaxHeight = ui.extractNumberFromString(dropdownRef.style.maxHeight);
     const excludeTop = this.searchable ? 59 : 8;
     const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
@@ -303,41 +364,41 @@ class VegaDropdownListRenderer extends vegaSlimmer.VegaSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$b([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderer", void 0);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -345,22 +406,20 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownItemLevelRenderer extends vegaSlimmer.VegaSlimmer {
   render(item, fixHeight) {
-    return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon || item.prefix, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onVegaClick: (e) => e.stopPropagation() })));
+    return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$a([
+__decorate$h([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$a([
+__decorate$h([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$a([
+__decorate$h([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -374,68 +433,72 @@ class VegaDropdownSearchRenderer extends vegaSlimmer.VegaSlimmer {
       if (this.searchInputRef)
         this.searchInputRef.value = '';
     };
-    this.onInputSearch = (e) => {
-      this.search(e.detail);
+    this.onInputSearch = (node) => {
+      this.searchInputRef = node;
+      eventEmitSlimmer.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, internalVegaEventManager.VegaChange, (input) => {
+        this.search(input.detail);
+      });
+    };
+    this.search = (input) => {
+      this.searchString = input;
+      if (this.renderModeController.isSourceRenderMode()) {
+        if (this.useDefaultFilter) {
+          this.sourceController.setRenderSource();
+          this.focus();
+        }
+        else if (this.isDropdownShow) {
+          this.searchEventEmitter.emit(input);
+        }
+      }
+      else {
+        this.searchEventEmitter.emit(input);
+      }
     };
   }
   userSearch(input) {
     this.search(input);
   }
   focus() {
-    var _a;
-    (_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.querySelector('input').focus();
+    if (this.searchInputRef) {
+      this.searchInputRef.shadowRoot.querySelector('input').focus();
+    }
   }
   render() {
     const canRender = this.searchable &&
       (this.renderModeController.isSourceRenderMode() ? this.source.length > 0 : true);
     return (canRender && (index.h("div", { class: "vega-dropdown-search" },
-      index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, onVegaChange: this.onInputSearch, ref: (e) => (this.searchInputRef = e) }))));
-  }
-  search(input) {
-    this.searchString = input;
-    if (this.renderModeController.isSourceRenderMode()) {
-      if (this.useDefaultFilter) {
-        this.sourceController.setRenderSource();
-        this.focus();
-      }
-      else if (this.isDropdownShow) {
-        this.vegaSearch.emit(input);
-      }
-    }
-    else {
-      this.vegaSearch.emit(input);
-    }
+      index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
-], VegaDropdownSearchRenderer.prototype, "vegaSearch", void 0);
-__decorate$9([
+], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$9([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$9([
-  mapToComponentMethod.MapToComponentMethod('search')
+__decorate$g([
+  vegaSlimmer.MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -445,7 +508,7 @@ var __decorate$8 = (undefined && undefined.__decorate) || function (decorators,
  * The `VegaDropdownKeyboardController` class is responsible for managing keyboard events
  * for a dropdown component.
  */
-class VegaDropdownKeyboardController extends subStateNotifySlimmer.KeyboardManagerSlimmer {
+class VegaDropdownKeyboardController extends keyboardManagerSlimmer.KeyboardManagerSlimmer {
   /**
    * The constructor function sets up keyboard event listeners for a dropdown component.
    */
@@ -495,66 +558,31 @@ class VegaDropdownKeyboardController extends subStateNotifySlimmer.KeyboardManag
      * @param {string} code - current keyboard code.
      */
     this.controlDirectionByKeyboard = (code) => {
-      const dropdownRef = this.renderer.getDropdownRef();
-      const items = Array.from(dropdownRef.querySelectorAll('vega-dropdown-item'));
-      const currentItem = ui.findParent(document.activeElement, 'vega-dropdown-item');
-      if (currentItem) {
-        const index = items.findIndex((item) => item === currentItem);
-        const nextItem = this.findNextCallFocusItem(items, index, code);
-        if (nextItem) {
-          nextItem.querySelector('li').focus();
-        }
-      }
-      else {
-        items[0].querySelector('li').focus({ preventScroll: true });
-      }
+      var _a;
+      (_a = this.renderer.getNextActiveItem(code)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('li').focus();
     };
   }
-  /* istanbul ignore next */
-  /**
-   * The function `findNextCallFocusItem` finds the next enabled item in a dropdown menu based on the
-   * current index and the direction of navigation. @see{module:vega-dropdown-keyboard-control-e2e}
-   *
-   * @param {HTMLElement[]} items - An array of HTMLVegaDropdownItemElement objects
-   * representing the dropdown items.
-   * @param {number} currentIndex - The current index of the item in the `items` array that is currently
-   * focused.
-   * @param {string} code - The `code` parameter represents the key code of the keyboard event that
-   * triggered the function. It is used to determine whether the user pressed the "ArrowDown" or
-   * "ArrowUp" key.
-   * @returns {Nullable<HTMLElement>} a nullable HTMLVegaDropdownItemElement.
-   */
-  findNextCallFocusItem(items, currentIndex, code) {
-    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
-    const nextItem = items[nextIndex];
-    if (nextItem) {
-      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
-    }
-    else {
-      return null;
-    }
-  }
 }
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$8([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -564,7 +592,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
  */
-class VegaDropdownAppenderController extends subStateNotifySlimmer.ElementAppenderSlimmer {
+class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppenderSlimmer {
   //TODO: make watchIsDropdownShow as a callback param to skip dropdown re-render.
   /**
    * This constructor initializes a dropdown component with various configuration options.
@@ -572,7 +600,7 @@ class VegaDropdownAppenderController extends subStateNotifySlimmer.ElementAppend
   constructor() {
     super(() => ({
       target: this.host,
-      appendableElement: this.renderer.getDropdownRef(),
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
       positionRelativeTo: this.positionRelativeTo,
       matchTargetWidth: this.matchTargetWidth,
       matchContainerHeight: this.matchContainerHeight,
@@ -592,11 +620,11 @@ class VegaDropdownAppenderController extends subStateNotifySlimmer.ElementAppend
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
       await this.renderer.listRenderer.scrollToIndex();
-      this.vegaShow.emit();
+      this.showEventEmitter.emit();
     }
     else {
       this.searchRenderer.clear();
-      this.vegaHide.emit();
+      this.hideEventEmitter.emit();
     }
   }
   /**
@@ -617,71 +645,71 @@ class VegaDropdownAppenderController extends subStateNotifySlimmer.ElementAppend
     }
   }
 }
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$7([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
-], VegaDropdownAppenderController.prototype, "vegaShow", void 0);
-__decorate$7([
+], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
+__decorate$e([
   vegaSlimmer.MapToComponentField()
-], VegaDropdownAppenderController.prototype, "vegaHide", void 0);
-__decorate$7([
-  mapToComponentMethod.MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate$e([
+  vegaSlimmer.MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$7([
-  mapToComponentMethod.MapToComponentMethod('show')
+__decorate$e([
+  vegaSlimmer.MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$7([
-  mapToComponentMethod.MapToComponentMethod('hide')
+__decorate$e([
+  vegaSlimmer.MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -692,14 +720,14 @@ class VegaDropdownGroupLevelRenderer extends vegaSlimmer.VegaSlimmer {
     return (index.h("vega-dropdown-group", { label: item.label, key: item.key, divide: index$1 < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
-__decorate$6([
+__decorate$d([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$6([
+__decorate$d([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -774,74 +802,14 @@ class VegaDropdownSearchController extends vegaSlimmer.VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$5([
+__decorate$c([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$5([
+__decorate$c([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * The `VegaDropdownFormatSourceController` class is responsible for formatting
- * the source property of a `VegaDropdown` object, either as is or converted to a group level source.
- */
-class VegaDropdownFormatSourceController extends vegaSlimmer.VegaSlimmer {
-  /**
-   * The format function returns the source property of a VegaDropdown object, either as is or converted
-   * to a group level source.
-   *
-   * @returns {VegaDropdown['source']} The `format()` method is returning the `source` property of the `VegaDropdown` object. If
-   * the `hasSetGroupProperty()` method returns `true`, then the `convertToGroupLevelSource()` method is
-   * called and its result is returned. Otherwise, the `source` property is returned as is.
-   */
-  format() {
-    if (this.hasSetGroupProperty()) {
-      return this.convertToGroupLevelSource();
-    }
-    else {
-      return this.source;
-    }
-  }
-  /**
-   * The function converts a source array into a grouped source array for a Vega dropdown component.
-   *
-   * @returns {VegaDropdown['source']} an array of DropdownSourceGroup objects.
-   */
-  convertToGroupLevelSource() {
-    const groups = {};
-    this.source.forEach((item) => {
-      const groupKey = item.group || 'Others';
-      groups[groupKey] || (groups[groupKey] = {
-        label: groupKey,
-        key: groupKey,
-        children: [],
-      });
-      const groupItem = Object.assign({}, item);
-      delete groupItem.group;
-      groups[groupKey].children.push(groupItem);
-    });
-    return Object.values(groups);
-  }
-  /**
-   * The function checks if the source array contains an item with a 'group' property.
-   *
-   * @returns { boolean } - a boolean value.
-   */
-  hasSetGroupProperty() {
-    return this.source.find((item) => item['group']) !== undefined;
-  }
-}
-__decorate$4([
-  vegaSlimmer.MapToComponentField()
-], VegaDropdownFormatSourceController.prototype, "source", void 0);
-
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -852,18 +820,6 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  * either adding them to an array or setting them as the only selected item.
  */
 class VegaDropdownSelectedController extends vegaSlimmer.VegaSlimmer {
-  /**
-   * Component lifecycle - connectedCallback
-   */
-  connectedCallback() {
-    this.initItemSelectionObserver();
-  }
-  /**
-   * Component lifecycle - disconnectedCallback
-   */
-  disconnectedCallback() {
-    changeManager.ChangeManager.unregister(changeManager.DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * Component lifecycle - componentWillLoad
    */
@@ -923,15 +879,6 @@ class VegaDropdownSelectedController extends vegaSlimmer.VegaSlimmer {
   watchSource() {
     this.checkSelectedSourceKey(this.selectedSourceKey);
   }
-  /**
-   * The function initializes a row click observer that handles row selection in a table.
-   */
-  initItemSelectionObserver() {
-    this.itemSelectionObserver = new observer.Observer(this.isAcceptableItemSelectionObserver.bind(this), (payload) => {
-      this.select(payload.itemKey);
-    });
-    changeManager.ChangeManager.register(changeManager.DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * The function checks if the input is an acceptable item selection observer.
    *
@@ -940,26 +887,11 @@ class VegaDropdownSelectedController extends vegaSlimmer.VegaSlimmer {
    */
   isAcceptableItemSelectionObserver(input) {
     if (input['host']['tagName'] === 'VEGA-DROPDOWN-ITEM') {
-      return this.host === this.getDropdownByItem(input['host']);
+      return this.isCurrentDropdown(input['host']);
     }
     /* istanbul ignore next */
     return false;
   }
-  /**
-   * The function `getDropdownByItem` returns the dropdown element associated with a given item element.
-   *
-   * @param {HTMLElement} item - The `item` parameter is an HTMLElement representing the item that was
-   * clicked or selected in the dropdown menu.
-   * @returns {Nullable<HTMLElement>} an HTMLElement or null.
-   */
-  getDropdownByItem(item) {
-    const appender = ui.findParent(item, '.vega-dropdown');
-    if (appender && appender.dataset['parentId']) {
-      return document.querySelector(`[data-id='${appender.dataset['parentId']}']`);
-    }
-    /* istanbul ignore next */
-    return null;
-  }
   /**
    * The select function handles the selection of a key, either adding it to the selectedSourceKey array
    * or setting it as the only selected key.
@@ -976,18 +908,27 @@ class VegaDropdownSelectedController extends vegaSlimmer.VegaSlimmer {
       else {
         this.selectedSourceKey = [...this.selectedSourceKey, key];
       }
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else if (this.selectType === 'single') {
       this.selectedSourceKey = key;
       this.appenderController.hide();
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else {
       this.appenderController.hide();
-      this.vegaClick.emit(key);
     }
-    this.vegaDropdownClick.emit(key);
+    this.dropdownClickEventEmitter.emit(key);
+  }
+  /**
+   * The function checks if the given item belongs to the current dropdown.
+   *
+   * @param {HTMLElement} item - The `item` parameter is an HTMLElement, which represents an element in
+   * the DOM (Document Object Model). It is the element that we want to check if it is currently in a
+   * dropdown.
+   * @returns {boolean} a boolean value.
+   */
+  isCurrentDropdown(item) {
+    const appender = ui.findParent(item, 'vega-dropdown-content-box');
+    return this.host === appender['data-parent-ref'];
   }
   /**
    * The function `checkSelectedSourceKey` checks if the selected source key is valid based on the select
@@ -1039,62 +980,56 @@ class VegaDropdownSelectedController extends vegaSlimmer.VegaSlimmer {
     return result;
   }
 }
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$3([
-  vegaSlimmer.MapToComponentField()
-], VegaDropdownSelectedController.prototype, "vegaClick", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$3([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('connectedCallback')
-], VegaDropdownSelectedController.prototype, "connectedCallback", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
-], VegaDropdownSelectedController.prototype, "disconnectedCallback", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+__decorate$b([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('clearSelection')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('getSelection')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('setSelection')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('watchSelectType')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('watchSelectedSourceKey')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('watchSource')
+__decorate$b([
+  vegaSlimmer.MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1131,14 +1066,14 @@ class VegaDropdownRenderModeController extends vegaSlimmer.VegaSlimmer {
     this.renderMode = this.host.querySelector('[slot=items]') !== null ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$2([
+__decorate$a([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$2([
-  mapToComponentMethod.MapToComponentMethod('connectedCallback')
+__decorate$a([
+  vegaSlimmer.MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1156,7 +1091,7 @@ class VegaDropdownChildrenController extends vegaSlimmer.VegaSlimmer {
      * The `syncUpDropdownCurrentDataBySlot` method is responsible for
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
-    this.syncUpDropdownCurrentDataBySlot = () => {
+    this.collectKeyAndLabelFromSlot = () => {
       const container = this.renderer.getDropdownRef() || this.host;
       Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
         item.label && this.labelSet.add(item.label);
@@ -1214,23 +1149,30 @@ class VegaDropdownChildrenController extends vegaSlimmer.VegaSlimmer {
   syncUpDropdownCurrentData() {
     this.clearDropdownCurrentData();
     if (this.renderModeController.isSourceRenderMode()) {
-      this.syncUpDropdownCurrentDataBySource();
+      this.collectKeyAndLabelFromSource(this.source);
     }
     else {
-      this.syncUpDropdownCurrentDataBySlot();
+      this.collectKeyAndLabelFromSlot();
     }
   }
   /**
-   * The function syncs up the current data in a dropdown based on the source data, by adding labels and
-   * keys to respective sets.
+   * The function collects unique labels and keys from a nested array of objects.
+   *
+   * @param {VegaDropdownSourceItem[]} items - An array of objects representing dropdown source items.
+   * Each object should have a "label" property representing the label of the dropdown option, and a
+   * "key" property representing the value of the dropdown option. Additionally, each object can have a
+   * "children" property which is an array of nested dropdown source items
    */
-  syncUpDropdownCurrentDataBySource() {
-    if (this.renderModeController.isSourceRenderMode()) {
-      this.source.forEach((item) => {
+  collectKeyAndLabelFromSource(items) {
+    items.forEach((item) => {
+      if (item['children']) {
+        this.collectKeyAndLabelFromSource(item['children']);
+      }
+      else {
         this.labelSet.add(item.label);
         this.keySet.add(item.key);
-      });
-    }
+      }
+    });
   }
   /* istanbul ignore next */
   /**
@@ -1258,41 +1200,43 @@ class VegaDropdownChildrenController extends vegaSlimmer.VegaSlimmer {
     this.labelSet.clear();
   }
 }
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$1([
+__decorate$9([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+__decorate$9([
+  vegaSlimmer.MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+__decorate$9([
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('componentDidLoad')
+__decorate$9([
+  vegaSlimmer.MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('watchSource')
+__decorate$9([
+  vegaSlimmer.MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+const vegaDropdownCss = ":host{display:inline-block}";
+
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -1305,13 +1249,17 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 const VegaDropdown = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.vegaClick = index.createEvent(this, "vegaClick", 7);
     this.vegaDropdownClick = index.createEvent(this, "vegaDropdownClick", 7);
+    this.dropdownClick = index.createEvent(this, "dropdownClick", 7);
     this.vegaShow = index.createEvent(this, "vegaShow", 7);
+    this.dropdownShow = index.createEvent(this, "dropdownShow", 7);
     this.vegaHide = index.createEvent(this, "vegaHide", 7);
+    this.dropdownHide = index.createEvent(this, "dropdownHide", 7);
     this.vegaCreate = index.createEvent(this, "vegaCreate", 7);
+    this.create = index.createEvent(this, "create", 7);
     this.vegaSearch = index.createEvent(this, "vegaSearch", 7);
-    this.dropdownId = misc.generateUUID();
+    this.dropdownSearch = index.createEvent(this, "dropdownSearch", 7);
+    this.globalSlimmers = {};
     this.renderer = new VegaDropdownRenderer();
     this.sourceController = new VegaDropdownSourceController();
     this.searchRenderer = new VegaDropdownSearchRenderer();
@@ -1322,13 +1270,19 @@ const VegaDropdown = class {
     this.keyboardController = new VegaDropdownKeyboardController();
     this.appenderController = new VegaDropdownAppenderController();
     this.searchController = new VegaDropdownSearchController();
-    this.formatSourceController = new VegaDropdownFormatSourceController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
     this.childrenController = new VegaDropdownChildrenController();
-    this.selectTypeNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
-    this.selectedSourceKeyNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
-    this.prefixIconSlotNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.selectTypeNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
+    this.selectedSourceKeyNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
+    this.prefixIconSlotNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.itemClickObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
+    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, internalVegaEventManager.VegaDropdownShow);
+    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, internalVegaEventManager.VegaDropdownHide);
+    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, internalVegaEventManager.VegaDropdownClick);
+    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, internalVegaEventManager.VegaCreate);
+    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, internalVegaEventManager.VegaDropdownSearch);
+    this.itemDisplayRuleNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.searchString = null;
     this.maxHeightOfItemsContainer = 400;
     this.isDropdownShow = false;
@@ -1451,6 +1405,8 @@ const VegaDropdown = class {
   }
   watchPrefixIconSlot() {
   }
+  watchItemDisplayRule() {
+  }
   /**
    * Invoke this method to programmatically display the dropdown menu.
    */
@@ -1494,67 +1450,641 @@ const VegaDropdown = class {
   }
   render() {
     placeholder.slotPlaceholder(index.h("slot", null));
-    return component.sanitizeVegaComponent(index.h(index.Host, { "data-id": this.dropdownId }, this.renderer.render(this.dropdownId)), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "isDropdownShow": ["watchIsDropdownShow"],
-    "source": ["watchSource"],
+    "source": ["watchSource", "watchItemDisplayRule"],
     "selectType": ["watchSelectType"],
     "selectedSourceKey": ["watchSelectedSourceKey"],
     "prefixIconSlot": ["watchPrefixIconSlot"]
   }; }
 };
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaDropdown.prototype, "globalSlimmers", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "sourceController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchRenderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createRenderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemLevelRenderer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "keyboardController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "appenderController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
-], VegaDropdown.prototype, "formatSourceController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemClickObserver", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "showEventEmitter", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "hideEventEmitter", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "createEventEmitter", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate$8([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
+VegaDropdown.style = vegaDropdownCss;
+
+const vegaDropdownContentBoxCss = ":host{display:block;position:absolute}:host .vega-dropdown{box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding-top:8px;padding-bottom:8px;text-align:left;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;box-sizing:border-box;width:inherit}:host(.vega-force-hidden){display:none}:host .vega-dropdown.vega-dropdown-with-searchable{padding-top:0px}:host .vega-dropdown .vega-dropdown-container{overflow-y:auto;position:relative;min-width:100px;min-height:40px}:host .vega-dropdown .vega-dropdown-container>ul{padding-left:0px;margin:0px;list-style-type:none}:host .vega-dropdown .vega-dropdown-search{padding-top:16px;padding-left:12px;padding-right:12px;padding-bottom:12px;margin-bottom:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-width:0px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container){padding:0px;border-width:0px;--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(prefix-icon-container){color:rgba(var(--v-text-secondary, 107, 116, 125, 1));width:16px;height:16px;padding-top:0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within{--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover{border-width:0px}:host .vega-dropdown .vega-dropdown-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host .vega-dropdown .vega-dropdown-loading.v-hidden{display:none}:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item{padding-top:8px;padding-left:12px;padding-right:12px;padding-bottom:8px;margin-left:4px;margin-right:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));cursor:pointer;display:flex;gap:8px;align-items:center}:host .vega-dropdown .vega-dropdown-add-item>div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));outline:2px solid transparent;outline-offset:2px}:host .vega-dropdown .vega-dropdown-clear-icon{width:16px;height:16px;cursor:pointer}:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-divider{margin-top:4px;margin-bottom:4px;border-bottom:1px solid rgb(171, 198, 216)}";
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdownContentBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([internalVegaEventManager.VegaClick], () => this.host);
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("slot", null)), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$7([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "eventPrevent", void 0);
+VegaDropdownContentBox.style = vegaDropdownContentBoxCss;
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownGroupRenderer extends vegaSlimmer.VegaSlimmer {
+  render() {
+    return (index.h("li", { class: "vega-dropdown-group" },
+      this.renderLabel(),
+      this.renderChildren(),
+      this.renderDivide()));
+  }
+  renderLabel() {
+    return index.h("div", { class: "vega-dropdown-group-label" }, this.label);
+  }
+  renderChildren() {
+    return (index.h("ul", { class: "vega-dropdown-group-items" },
+      index.h("slot", null)));
+  }
+  renderDivide() {
+    return this.divide && index.h("div", { class: "vega-dropdown-group-divide" });
+  }
+}
+__decorate$6([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "label", void 0);
+__decorate$6([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "divide", void 0);
+
+const vegaDropdownGroupCss = ":host{display:block}:host .vega-dropdown-group{padding:0px;margin:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));cursor:default;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown-group{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host .vega-dropdown-group-label{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:4px}:host .vega-dropdown-group-items{padding:0px;margin:0px}:host .vega-dropdown-group-divide{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-top:4px;margin-bottom:4px;height:1px}";
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdownGroup = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownGroupRenderer();
+    /**
+     * Determines whether to include a dividing line at
+     *      the bottom of the dropdown group.
+     */
+    this.divide = true;
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$5([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaDropdownGroup.prototype, "globalSlimmers", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownGroup.prototype, "renderer", void 0);
+VegaDropdownGroup.style = vegaDropdownGroupCss;
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownItemRenderer extends vegaSlimmer.VegaSlimmer {
+  render() {
+    return (index.h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
+        'vega-dropdown-item-selected': this.selected,
+        'vega-dropdown-item-disabled': this.disabled,
+        'vega-dropdown-item-in-group': !!ui.findParent(this.host, 'vega-dropdown-group'),
+        [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
+      }, tabIndex: this.disabled ? -1 : 0, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: (e) => this.onSelect(e), onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
+        height: `${this.height}px`,
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+      } },
+      this.renderSelectIcon(),
+      this.renderPrefixIcon(),
+      this.renderLabel(),
+      this.renderCounter()));
+  }
+  renderSelectIcon() {
+    return (this.selectType !== 'none' && (index.h("span", { class: "selected-prefix" },
+      this.selectType === 'single' && this.renderSingleSelectIcon(),
+      this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
+  }
+  renderSingleSelectIcon() {
+    return this.selected && index.h("vega-icon", { icon: "checkmark", size: "size-16" });
+  }
+  renderMultipleSelectIcon() {
+    return index.h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+  }
+  renderPrefixIcon() {
+    return ((this.prefixIcon || this.prefixIconSlot) && (index.h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
+  }
+  renderItemPrefixIcon() {
+    return this.prefixIcon && index.h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
+  }
+  renderLabel() {
+    if (this.label) {
+      return (index.h(index.Fragment, null,
+        index.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        index.h("span", { class: "v-hidden" },
+          index.h("slot", null))));
+    }
+    else {
+      return (index.h("span", { class: "vega-dropdown-item-label" },
+        index.h("slot", null)));
+    }
+  }
+  renderCounter() {
+    return (this.count > 0 && (index.h("div", { class: "item-counter" },
+      index.h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
+  }
+  onSelect(e) {
+    this.vegaDropdownItemClickController.handleClick(e);
+  }
+}
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "host", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "label", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "count", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selected", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selectType", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "height", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$4([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      parent: () => {
+        // we trigger this method in `componentWillLoad`.
+        // if dropdown is template mode, the `vega-dropdown-content-box` have not been rendered, but we can find dropdown directly.
+        // if dropdown is source mode, the `vega-dropdown-content-box` load before dropdown-item load, we can through `vega-dropdown-content-box` to find vega-dropdown
+        const parent = ui.findParent(this.host, 'vega-dropdown');
+        if (parent) {
+          return parent;
+        }
+        else {
+          const appender = ui.findParent(this.host, 'vega-dropdown-content-box');
+          /* istanbul ignore next */
+          // TODO: to add test for throw, since there is not better function to handle `componentWillLoad` in spec/e2e test.
+          if (appender && appender['data-parent-ref']) {
+            return appender['data-parent-ref'];
+          }
+          else {
+            throw new Error('Can not found parent vega-dropdown while synchronize properties from vega-dropdown to vega-dropdown-item');
+          }
+        }
+      },
+      subStates: [
+        {
+          subStateName: 'selectType',
+          parentStateName: 'selectType',
+        },
+        {
+          subStateName: 'prefixIconSlot',
+          parentStateName: 'prefixIconSlot',
+        },
+        {
+          subStateName: 'itemDisplayRule',
+          parentStateName: 'itemDisplayRule',
+        },
+        {
+          subStateName: 'selected',
+          parentStateName: 'selectedSourceKey',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (selectedSourceKey) => {
+            this.selected = Array.isArray(selectedSourceKey)
+              ? selectedSourceKey.includes(this.itemKey)
+              : selectedSourceKey === this.itemKey;
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate$3([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemStateController.prototype, "host", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selectType", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemStateController.prototype, "itemKey", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selected", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "itemDisplayRule", void 0);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemClickController extends vegaSlimmer.VegaSlimmer {
+  /**
+   * The handleClick function emits an event with the itemKey and notifies the ChangeManager with the
+   * dropdown item click event and the itemKey.
+   *
+   * @param {MouseEvent} e - MouseEvent - The event object that contains information about the mouse
+   * click event.
+   */
+  handleClick(e) {
+    this.clickEventEmitter.emit({ itemKey: this.itemKey }, e);
+    changeManager.ChangeManager.notify(staticSubjectTitle.DROPDOWN_ITEM_CLICK, { host: this.host, detail: { itemKey: this.itemKey } });
+  }
+}
+__decorate$2([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemClickController.prototype, "host", void 0);
+__decorate$2([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemClickController.prototype, "itemKey", void 0);
+__decorate$2([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemClickController.prototype, "vegaClick", void 0);
+__decorate$2([
+  vegaSlimmer.MapToComponentField()
+], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
+
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));pointer-events:none}:host li.vega-dropdown-item-disabled .item-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-in-group{padding-left:40px}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .v-hidden{display:none}";
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdownItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownItemRenderer();
+    this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
+    this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
+    this.dropdownItemEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([internalVegaEventManager.VegaChange], () => this.host);
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdownItem, internalVegaEventManager.VegaClick);
+    /**
+     * The placeholder of prefix icon, while other item have prefix icon but no in this item,
+     * if you want to keep those items align, you can set this placeholder as true.
+     */
+    this.prefixIconSlot = false;
+    /**
+     * Specifies the dropdown item's selected status.
+     */
+    this.selected = false;
+    /**
+     * Specifies the dropdown item's rule of display.
+     */
+    this.itemDisplayRule = 'newline';
+    /**
+     * Specifies the disabled status of the dropdown item.
+     */
+    this.disabled = false;
+  }
+  render() {
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$1([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaDropdownItem.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "renderer", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemStateController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemClickController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "dropdownItemEventPrevent", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "clickEventEmitter", void 0);
+VegaDropdownItem.style = vegaDropdownItemCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaVirtualScroll = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    /** Count of all items */
+    this.totalCount = 0;
+    /** Count of in viewport items */
+    this.viewportItemsCount = 0;
+    /** Count of extend items, we render those count items in header and footer of viewport */
+    this.extendItemsCount = 10;
+    /** This is the start index of items should be really rendered. */
+    this.startIndex = 0;
+    /** This is the end index of items should be really rendered. */
+    this.endIndex = 0;
+    /** This is the start index of viewport. */
+    this.viewportStartIndex = 0;
+    /** Height of all items, This is a rough estimate. We assume that each item is of equal height. */
+    this.totalHeight = 0;
+    /** When scrolling, we need to set this value to ensure that the viewport is always visible */
+    this.transformY = 0;
+    /** current scrollTop of container */
+    this.scrollTop = 0;
+    /** The all items of source */
+    this.source = [];
+    /** The approximate height of each item */
+    this.approxItemHeight = 40;
+    /** The max height of viewport */
+    this.viewportMaxHeight = 320;
+    /**
+     * The threshold of use virtual scroll,
+     * while the count of source over this value, we use virtual scroll,
+     * otherwise, we render items as normal*/
+    this.thresholdOfWork = 60;
+    /** We set this key to check the source is really change and should refresh virtual scroll */
+    this.sourceItemIdentifier = 'key';
+  }
+  watchScrollTop() {
+    this.virtualScrollContainerRef && (this.virtualScrollContainerRef.scrollTop = this.scrollTop);
+    this.setPositionByScrollTop();
+  }
+  watchSourceChange(newValue, oldValue) {
+    if (!this.isSameSource(newValue, oldValue)) {
+      this.initVirtualScroll();
+    }
+  }
+  watchToInitData() {
+    this.initVirtualScroll();
+  }
+  componentWillLoad() {
+    this.initVirtualScroll();
+  }
+  componentDidLoad() {
+    this.listenScrollContainer();
+  }
+  // While dropdown select a item and hide dropdown and show dropdown again, the virtual scroll will be re-render
+  // and dropdown will call scrollToIndex with same index param.
+  // In this time, the value of scrollTop not change, but container scrollTop is become 0 by the re-render of virtual scroll,
+  // so we should update container scrollTop to avoid inconsistencies between view and component.
+  componentDidRender() {
+    this.virtualScrollContainerRef.scrollTop = this.scrollTop;
+  }
+  /**
+   * Scroll to the index of the item in the list by setting the scrollTop property of the virtual scroll
+   * container to the index of the item multiplied by the approximate height of each item in the list.
+   */
+  async scrollToIndex(index) {
+    if (index >= 0) {
+      if (this.totalCount < this.thresholdOfWork) {
+        const selectedItem = this.virtualScrollContainerRef.querySelector(`:nth-child(${index + 1})`);
+        ui.containerScrollToItem(this.virtualScrollContainerRef, selectedItem);
+      }
+      else {
+        this.scrollTop = index * this.approxItemHeight;
+      }
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { style: { maxHeight: `${this.viewportMaxHeight}px`, overflow: 'auto' }, class: "virtual-scroll-container", ref: (el) => (this.virtualScrollContainerRef = el) }, this.totalCount < this.thresholdOfWork
+      ? this.renderNormal()
+      : this.renderVirtualScroll())));
+  }
+  renderNormal() {
+    return (index.h(index.Fragment, null, this.source.map((item, index) => {
+      return this.renderItem(item, index);
+    })));
+  }
+  renderVirtualScroll() {
+    return (index.h("div", { style: {
+        height: `${this.totalHeight}px`,
+        position: 'relative',
+      } }, index.h("div", { class: "virtual-scroll-block", style: {
+        transform: `translateY(${this.transformY}px)`,
+      } }, this.source
+      .slice(this.startIndex, this.viewportStartIndex)
+      .map((item, index) => {
+      return this.renderItem(item, this.startIndex + index, this.approxItemHeight);
+    }), this.source
+      .slice(this.viewportStartIndex, this.endIndex)
+      .map((item, index) => {
+      return this.renderItem(item, this.viewportStartIndex + index);
+    }))));
+  }
+  initVirtualScroll() {
+    this.totalCount = this.source.length;
+    this.totalHeight = this.totalCount * this.approxItemHeight;
+    this.viewportItemsCount = Math.ceil(this.viewportMaxHeight / this.approxItemHeight);
+    this.maxStartIndex = this.totalCount - this.viewportItemsCount - this.extendItemsCount;
+    this.startIndex = 0;
+    this.viewportStartIndex = 0;
+    this.endIndex = this.viewportItemsCount + this.extendItemsCount;
+    this.scrollTop = 0;
+    this.transformY = 0;
+  }
+  /* istanbul ignore next */
+  listenScrollContainer() {
+    this.virtualScrollContainerRef.addEventListener('scroll', () => {
+      this.scrollTop = this.virtualScrollContainerRef.scrollTop;
+    });
+  }
+  /**
+   * While scrollTop of container change, the startIndex, endIndex, viewPortStartIndex and transformY will be change.
+   * The following is the process of change:
+   *
+   *---scrollTop---startIndex---viewportStartIndex---endIndex---transformY
+   *---30----------0------------0--------------------18---------0
+   *---40----------0------------1--------------------19---------0
+   *---320---------0------------8--------------------26---------0
+   *---400---------0------------10-------------------28---------0
+   *---480---------2------------12-------------------30---------80
+   *---800---------10-----------20-------------------38---------400
+   */
+  setPositionByScrollTop() {
+    const currentIndex = Math.floor(this.scrollTop / this.approxItemHeight);
+    this.startIndex = Math.min(Math.max(currentIndex - this.extendItemsCount, 0), this.maxStartIndex);
+    this.viewportStartIndex =
+      this.startIndex === 0 ? currentIndex : this.startIndex + this.extendItemsCount;
+    this.endIndex = this.viewportStartIndex + this.viewportItemsCount + this.extendItemsCount;
+    this.transformY = Math.min(Math.max(this.scrollTop - this.extendItemsCount * this.approxItemHeight, 0), this.maxStartIndex * this.approxItemHeight);
+  }
+  isSameSource(first, second) {
+    if (first.length != second.length)
+      return false;
+    for (let i = 0; i < first.length; i++) {
+      if (first[i][this.sourceItemIdentifier] !== second[i][this.sourceItemIdentifier]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "scrollTop": ["watchScrollTop"],
+    "source": ["watchSourceChange"],
+    "approxItemHeight": ["watchToInitData"],
+    "viewportMaxHeight": ["watchToInitData"]
+  }; }
+};
+__decorate([
+  injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
+], VegaVirtualScroll.prototype, "globalSlimmers", void 0);
 
 exports.vega_dropdown = VegaDropdown;
+exports.vega_dropdown_content_box = VegaDropdownContentBox;
+exports.vega_dropdown_group = VegaDropdownGroup;
+exports.vega_dropdown_item = VegaDropdownItem;
+exports.vega_virtual_scroll = VegaVirtualScroll;