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

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

@@ -2,39 +2,38 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ced28bc0.js');
-const component = require('./component-de54cd0d.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 injectVegaGlobalSlimmer = require('./inject-vega-global-slimmer-c81bb784.js');
-const vegaSlimmer = require('./vega-slimmer-f026897e.js');
-const mapToComponentMethod = require('./map-to-component-method-bdf875d3.js');
-const ui = require('./ui-25a66a2a.js');
-const typeGuard = require('./typeGuard-46915d8c.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 log = require('./log-5d8066e0.js');
-const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-8663ab4f.js');
-const vegaEventId = require('./vegaEventId-dfd382d2.js');
-const subStateNotifySlimmer = require('./subStateNotifySlimmer-d704ac90.js');
-const array = require('./array-e1e5ed1d.js');
-const eventEmitSlimmer = require('./eventEmitSlimmer-63a34620.js');
-const childNodesNotifyObserverSlimmer = require('./childNodesNotifyObserverSlimmer-cc6d9d8d.js');
-const staticSubjectTitle = require('./staticSubjectTitle-9a2a1b10.js');
-require('./featureFlagController-daf977be.js');
-require('./breakpoints-96bd8c73.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('./changeManager-1dd5ac2a.js');
-require('./observer-f49483e8.js');
-require('./elementAppender-f0ebe01e.js');
-require('./responsiveFormatFacade-8bfed8eb.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-028b0e61.js');
-require('./pageResizeObserverSlimmer-f83ef66f.js');
-require('./keyboardManager-e8331705.js');
-require('./internalVegaEventManager-a5ad4b61.js');
+require('./pageResizeObserverSlimmer-9751395d.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;
@@ -137,32 +136,32 @@ class VegaDropdownRenderer extends vegaSlimmer.VegaSlimmer {
     }
   }
 }
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$d([
+__decorate$l([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$d([
-  mapToComponentMethod.MapToComponentMethod('componentDidRender')
+__decorate$l([
+  vegaSlimmer.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;
@@ -208,23 +207,23 @@ class VegaDropdownSourceController extends vegaSlimmer.VegaSlimmer {
       : [];
   }
 }
-__decorate$c([
+__decorate$k([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$c([
+__decorate$k([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$c([
+__decorate$k([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$c([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+__decorate$k([
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$c([
-  mapToComponentMethod.MapToComponentMethod('watchSource')
+__decorate$k([
+  vegaSlimmer.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;
@@ -250,29 +249,29 @@ class VegaDropdownCreateRenderer extends vegaSlimmer.VegaSlimmer {
       index.h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$b([
+__decorate$j([
   vegaSlimmer.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;
@@ -365,41 +364,41 @@ class VegaDropdownListRenderer extends vegaSlimmer.VegaSlimmer {
     }
   }
 }
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$a([
+__decorate$i([
   vegaSlimmer.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;
@@ -410,17 +409,17 @@ class VegaDropdownItemLevelRenderer extends vegaSlimmer.VegaSlimmer {
     return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$9([
+__decorate$h([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$9([
+__decorate$h([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$9([
+__decorate$h([
   vegaSlimmer.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;
@@ -436,7 +435,7 @@ class VegaDropdownSearchRenderer extends vegaSlimmer.VegaSlimmer {
     };
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
-      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addObserverToNode(node, vegaEventId.VegaChange, (input) => {
+      eventEmitSlimmer.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, internalVegaEventManager.VegaChange, (input) => {
         this.search(input.detail);
       });
     };
@@ -471,35 +470,35 @@ class VegaDropdownSearchRenderer extends vegaSlimmer.VegaSlimmer {
       index.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$8([
+__decorate$g([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$8([
-  mapToComponentMethod.MapToComponentMethod('search')
+__decorate$g([
+  vegaSlimmer.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;
@@ -509,7 +508,7 @@ var __decorate$7 = (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.
    */
@@ -564,26 +563,26 @@ class VegaDropdownKeyboardController extends subStateNotifySlimmer.KeyboardManag
     };
   }
 }
-__decorate$7([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$7([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$7([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$7([
+__decorate$f([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$7([
+__decorate$f([
   vegaSlimmer.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;
@@ -593,7 +592,7 @@ var __decorate$6 = (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.
@@ -646,71 +645,71 @@ class VegaDropdownAppenderController extends subStateNotifySlimmer.ElementAppend
     }
   }
 }
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$6([
+__decorate$e([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$6([
-  mapToComponentMethod.MapToComponentMethod('watchIsDropdownShow')
+__decorate$e([
+  vegaSlimmer.MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$6([
-  mapToComponentMethod.MapToComponentMethod('show')
+__decorate$e([
+  vegaSlimmer.MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$6([
-  mapToComponentMethod.MapToComponentMethod('hide')
+__decorate$e([
+  vegaSlimmer.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;
@@ -721,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$5([
+__decorate$d([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$5([
+__decorate$d([
   vegaSlimmer.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;
@@ -803,14 +802,14 @@ class VegaDropdownSearchController extends vegaSlimmer.VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$4([
+__decorate$c([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$4([
+__decorate$c([
   vegaSlimmer.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;
@@ -981,56 +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([
+__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([
+__decorate$b([
   vegaSlimmer.MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$3([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+__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;
@@ -1067,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;
@@ -1092,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);
@@ -1150,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 */
   /**
@@ -1194,43 +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);
 
 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);
@@ -1267,16 +1273,16 @@ const VegaDropdown = class {
     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, vegaEventId.VegaDropdownShow);
-    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownHide);
-    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownClick);
-    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaCreate);
-    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, vegaEventId.VegaDropdownSearch);
-    this.itemDisplayRuleNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
+    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;
@@ -1455,78 +1461,630 @@ const VegaDropdown = class {
     "prefixIconSlot": ["watchPrefixIconSlot"]
   }; }
 };
-__decorate([
+__decorate$8([
   injectVegaGlobalSlimmer.InjectVegaGlobalSlimmer()
 ], VegaDropdown.prototype, "globalSlimmers", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "sourceController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchRenderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createRenderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemLevelRenderer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "keyboardController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "appenderController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemClickObserver", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "showEventEmitter", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "hideEventEmitter", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);
-__decorate([
+__decorate$8([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchEventEmitter", void 0);
-__decorate([
+__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;