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

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

@@ -1,36 +1,35 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-3e41c219.js';
-import { g as getActiveElement, s as sanitizeVegaComponent } from './component-ff56c5f5.js';
-import { I as InjectVegaSlimmer } from './global-slimmer-registry-f1dec4a2.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-c3505689.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
 import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
-import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-0e6dd982.js';
-import { M as MapToComponentField, V as VegaSlimmer } from './vega-slimmer-d63e92d9.js';
-import { M as MapToComponentMethod } from './map-to-component-method-4e36ea1f.js';
-import { f as findParent, e as extractNumberFromString } from './ui-608b4032.js';
-import { x as isArrayOfType, D as isDropdownSourceItemType } from './typeGuard-b2943363.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { a as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './vega-slimmer-ce2e45d1.js';
+import { f as findParent, k as extractNumberFromString, l as containerScrollToItem } from './ui-6e5294cb.js';
+import { J as isArrayOfType, K as isDropdownSourceItemType } from './typeGuard-5e282437.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { L as LogUtility } from './log-a824be80.js';
-import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-8aeac4b6.js';
-import { d as VegaChange, h as VegaDropdownShow, i as VegaDropdownHide, b as VegaDropdownClick, f as VegaCreate, j as VegaDropdownSearch } from './vegaEventId-78665c18.js';
-import { K as KeyboardManagerSlimmer, E as ElementAppenderSlimmer, c as createSubStateNotifySlimmer } from './subStateNotifySlimmer-afeceb8e.js';
-import { i as isArrayEqual, d as deleteItemsFromArray } from './array-195d7d64.js';
-import { c as createEventEmitSlimmer } from './eventEmitSlimmer-da1fd54e.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-616bfa28.js';
-import { D as DROPDOWN_ITEM_CLICK } from './staticSubjectTitle-ba738b9d.js';
-import './featureFlagController-5d7e64f1.js';
-import './breakpoints-3152fa9c.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { g as VegaChange, c as VegaDropdownShow, d as VegaDropdownHide, b as VegaDropdownClick, h as VegaCreate, r as VegaDropdownSearch, V as VegaClick } from './internalVegaEventManager-efa77ebb.js';
+import { K as KeyboardManagerSlimmer } from './keyboardManagerSlimmer-69d10dfc.js';
+import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-d4cbab06.js';
+import { b as isArrayEqual, d as deleteItemsFromArray } from './array-e1522673.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-450d79de.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-0d2eac09.js';
+import { D as DROPDOWN_ITEM_CLICK } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
 import './typography-03d285b4.js';
-import './changeManager-935d420b.js';
-import './observer-3959f9dd.js';
-import './elementAppender-d9abb547.js';
-import './responsiveFormatFacade-949f8957.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './keyboardManager-0a038e77.js';
+import './elementAppender-4e1e8de0.js';
+import './responsiveFormatFacade-e91e14ac.js';
 import './number-400b3bf2.js';
 import './zIndexManager-ea603c97.js';
-import './dynamic-slimmer-16826d2b.js';
-import './pageResizeObserverSlimmer-ee15d7fd.js';
-import './keyboardManager-73a24265.js';
-import './internalVegaEventManager-4ab886bc.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
 
-var __decorate$d = (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;
@@ -133,32 +132,32 @@ class VegaDropdownRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$d([
+__decorate$l([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$c = (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;
@@ -204,23 +203,23 @@ class VegaDropdownSourceController extends VegaSlimmer {
       : [];
   }
 }
-__decorate$c([
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$c([
+__decorate$k([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$c([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$c([
+__decorate$k([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$c([
+__decorate$k([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$b = (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;
@@ -246,29 +245,29 @@ class VegaDropdownCreateRenderer extends VegaSlimmer {
       h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$b([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$a = (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;
@@ -361,41 +360,41 @@ class VegaDropdownListRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$a([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderer", void 0);
 
-var __decorate$9 = (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;
@@ -406,17 +405,17 @@ class VegaDropdownItemLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$9([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$9([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$9([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
 
-var __decorate$8 = (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;
@@ -432,7 +431,7 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
     };
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
-      DomNodeSubjectObserverFactory.addObserverToNode(node, VegaChange, (input) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
         this.search(input.detail);
       });
     };
@@ -467,35 +466,35 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
       h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$8([
+__decorate$g([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$7 = (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;
@@ -560,26 +559,26 @@ class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
     };
   }
 }
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$7([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$6 = (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;
@@ -642,71 +641,71 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
     }
   }
 }
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$6([
+__decorate$e([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$6([
+__decorate$e([
   MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$6([
+__decorate$e([
   MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$5 = (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;
@@ -717,14 +716,14 @@ class VegaDropdownGroupLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-group", { label: item.label, key: item.key, divide: index < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
-__decorate$5([
+__decorate$d([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$5([
+__decorate$d([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$4 = (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;
@@ -799,14 +798,14 @@ class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$4([
+__decorate$c([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$4([
+__decorate$c([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", 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;
@@ -977,56 +976,56 @@ class VegaDropdownSelectedController extends VegaSlimmer {
     return result;
   }
 }
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$3([
+__decorate$b([
   MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$3([
+__decorate$b([
   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;
@@ -1063,14 +1062,14 @@ class VegaDropdownRenderModeController extends VegaSlimmer {
     this.renderMode = this.host.querySelector('[slot=items]') !== null ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$2([
+__decorate$a([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$2([
+__decorate$a([
   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;
@@ -1088,7 +1087,7 @@ class VegaDropdownChildrenController extends 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);
@@ -1146,23 +1145,30 @@ class VegaDropdownChildrenController extends 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 */
   /**
@@ -1190,43 +1196,43 @@ class VegaDropdownChildrenController extends VegaSlimmer {
     this.labelSet.clear();
   }
 }
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$1([
+__decorate$9([
   MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
 const vegaDropdownCss = ":host{display:inline-block}";
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
@@ -1451,78 +1457,626 @@ const VegaDropdown = class {
     "prefixIconSlot": ["watchPrefixIconSlot"]
   }; }
 };
-__decorate([
+__decorate$8([
   InjectVegaGlobalSlimmer()
 ], VegaDropdown.prototype, "globalSlimmers", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "sourceController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "keyboardController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "appenderController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemClickObserver", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "showEventEmitter", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "hideEventEmitter", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchEventEmitter", void 0);
-__decorate([
+__decorate$8([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
 VegaDropdown.style = vegaDropdownCss;
 
-export { VegaDropdown as vega_dropdown };
+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) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$7([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$7([
+  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 {
+  render() {
+    return (h("li", { class: "vega-dropdown-group" },
+      this.renderLabel(),
+      this.renderChildren(),
+      this.renderDivide()));
+  }
+  renderLabel() {
+    return h("div", { class: "vega-dropdown-group-label" }, this.label);
+  }
+  renderChildren() {
+    return (h("ul", { class: "vega-dropdown-group-items" },
+      h("slot", null)));
+  }
+  renderDivide() {
+    return this.divide && h("div", { class: "vega-dropdown-group-divide" });
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "label", void 0);
+__decorate$6([
+  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) {
+    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() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$5([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownGroup.prototype, "globalSlimmers", void 0);
+__decorate$5([
+  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 {
+  render() {
+    return (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': !!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: 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' && (h("span", { class: "selected-prefix" },
+      this.selectType === 'single' && this.renderSingleSelectIcon(),
+      this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
+  }
+  renderSingleSelectIcon() {
+    return this.selected && h("vega-icon", { icon: "checkmark", size: "size-16" });
+  }
+  renderMultipleSelectIcon() {
+    return h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+  }
+  renderPrefixIcon() {
+    return ((this.prefixIcon || this.prefixIconSlot) && (h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
+  }
+  renderItemPrefixIcon() {
+    return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
+  }
+  renderLabel() {
+    if (this.label) {
+      return (h(Fragment, null,
+        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        h("span", { class: "v-hidden" },
+          h("slot", null))));
+    }
+    else {
+      return (h("span", { class: "vega-dropdown-item-label" },
+        h("slot", null)));
+    }
+  }
+  renderCounter() {
+    return (this.count > 0 && (h("div", { class: "item-counter" },
+      h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
+  }
+  onSelect(e) {
+    this.vegaDropdownItemClickController.handleClick(e);
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "label", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "count", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "disabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selected", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selectType", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "height", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$4([
+  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 {
+  // 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 = findParent(this.host, 'vega-dropdown');
+        if (parent) {
+          return parent;
+        }
+        else {
+          const appender = 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([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selectType", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "itemKey", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selected", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);
+__decorate$3([
+  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 {
+  /**
+   * 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.notify(DROPDOWN_ITEM_CLICK, { host: this.host, detail: { itemKey: this.itemKey } });
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "itemKey", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "vegaClick", void 0);
+__decorate$2([
+  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) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownItemRenderer();
+    this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
+    this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
+    this.dropdownItemEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
+    this.clickEventEmitter = createEventEmitSlimmer(VegaDropdownItem, 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() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownItem.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "renderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemStateController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemClickController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "dropdownItemEventPrevent", void 0);
+__decorate$1([
+  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) {
+    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})`);
+        containerScrollToItem(this.virtualScrollContainerRef, selectedItem);
+      }
+      else {
+        this.scrollTop = index * this.approxItemHeight;
+      }
+    }
+  }
+  render() {
+    return (h(Host, null, 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 (h(Fragment, null, this.source.map((item, index) => {
+      return this.renderItem(item, index);
+    })));
+  }
+  renderVirtualScroll() {
+    return (h("div", { style: {
+        height: `${this.totalHeight}px`,
+        position: 'relative',
+      } }, 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 getElement(this); }
+  static get watchers() { return {
+    "scrollTop": ["watchScrollTop"],
+    "source": ["watchSourceChange"],
+    "approxItemHeight": ["watchToInitData"],
+    "viewportMaxHeight": ["watchToInitData"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaVirtualScroll.prototype, "globalSlimmers", void 0);
+
+export { VegaDropdown as vega_dropdown, VegaDropdownContentBox as vega_dropdown_content_box, VegaDropdownGroup as vega_dropdown_group, VegaDropdownItem as vega_dropdown_item, VegaVirtualScroll as vega_virtual_scroll };