@heartlandone/vega 2.2.0 → 2.3.0

package/dist/esm/vega-dropdown_5.entry.js

@@ -9,16 +9,17 @@ import { f as findParent, k as extractNumberFromString, l as containerScrollToIt
 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, c as createEventEmitSlimmer } from './eventEmitSlimmer-f34c2d7f.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-4d8f7e1d.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer, a as DomNodeSubjectFactory } from './eventEmitSlimmer-25555a18.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-b790d4e6.js';
 import { K as KeyboardManagerSlimmer } from './keyboardManagerSlimmer-416c3745.js';
-import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-bb2fc481.js';
+import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-16b1066d.js';
 import { b as isArrayEqual, d as deleteItemsFromArray } from './array-e1522673.js';
-import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-c204a78f.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-46f52e33.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-3b34ec0c.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-0f055a66.js';
 import { D as DROPDOWN_ITEM_CLICK } from './staticSubjectTitle-bb1e9570.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-6ec031ef.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-bef69563.js';
 import { C as ChangeManager } from './changeManager-935d420b.js';
+import { b as VegaInternalVirtualScrollToBottom } from './vegaInternalEventId-35e47bc7.js';
 import './breakpoints-900a4c99.js';
 import './ui-535c5fb3.js';
 import './typography-03d285b4.js';
@@ -26,10 +27,10 @@ import './dynamic-slimmer-16826d2b.js';
 import './keyboardManager-6df70f14.js';
 import './responsiveFormatFacade-e91e14ac.js';
 import './number-400b3bf2.js';
-import './zIndexManager-ea603c97.js';
-import './pageResizeObserverSlimmer-39d1d0ff.js';
+import './zIndexManager-4292318f.js';
+import './pageResizeObserverSlimmer-d5d5fc44.js';
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (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;
@@ -132,32 +133,32 @@ class VegaDropdownRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$l([
+__decorate$q([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (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;
@@ -203,23 +204,23 @@ class VegaDropdownSourceController extends VegaSlimmer {
       : [];
   }
 }
-__decorate$k([
+__decorate$p([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$k([
+__decorate$p([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$k([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$k([
+__decorate$p([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$k([
+__decorate$p([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (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;
@@ -245,29 +246,29 @@ class VegaDropdownCreateRenderer extends VegaSlimmer {
       h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$j([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (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;
@@ -311,19 +312,21 @@ class VegaDropdownListRenderer extends VegaSlimmer {
         h("span", null, "Loading"))));
   }
   renderDropdownListBySource() {
-    if (this.sourceForRender.length === 0) {
-      return (h("div", { class: "vega-dropdown-empty-list" }, this.searchString ? 'No results found' : 'No options'));
-    }
-    else {
-      return (h("ul", { role: "menu", "aria-label": "dropdown-ul" },
+    return (h(Fragment, null,
+      h("div", { class: {
+          'vega-dropdown-empty-list': true,
+          'v-hidden': this.sourceForRender.length > 0,
+        } }, this.searchString ? 'No results found' : 'No options'),
+      h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+          'v-hidden': this.sourceForRender.length === 0,
+        } },
         h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
           renderItem: (item, index, fixHeight) => {
             return item['children']
               ? this.groupLevelRenderer.render(item, index, fixHeight)
               : this.itemLevelRenderer.render(item, fixHeight);
-          }, viewportMaxHeight: this.maxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e) })));
-    }
+          }, viewportMaxHeight: this.maxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
   }
   renderDropdownListBySlot() {
     return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
@@ -360,41 +363,44 @@ class VegaDropdownListRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectType", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchable", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField({ writable: true })
 ], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$i([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderer", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (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;
@@ -405,17 +411,17 @@ class VegaDropdownItemLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$h([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$h([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$h([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
 
-var __decorate$g = (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;
@@ -466,35 +472,35 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
       h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$g([
+__decorate$l([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$f = (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;
@@ -559,26 +565,26 @@ class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
     };
   }
 }
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$f([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$e = (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;
@@ -641,71 +647,71 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
     }
   }
 }
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$e([
+__decorate$j([
   MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$e([
+__decorate$j([
   MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$d = (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;
@@ -716,14 +722,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$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$c = (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;
@@ -798,14 +804,14 @@ class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
 
-var __decorate$b = (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;
@@ -976,56 +982,56 @@ class VegaDropdownSelectedController extends VegaSlimmer {
     return result;
   }
 }
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$b([
+__decorate$g([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$a = (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;
@@ -1062,14 +1068,14 @@ class VegaDropdownRenderModeController extends VegaSlimmer {
     this.renderMode = this.host.querySelector('[slot=items]') !== null ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$a([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$a([
+__decorate$f([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$9 = (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;
@@ -1196,43 +1202,43 @@ class VegaDropdownChildrenController extends VegaSlimmer {
     this.labelSet.clear();
   }
 }
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$9([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$9([
+__decorate$e([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$9([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$9([
+__decorate$e([
   MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
 const vegaDropdownCss = ":host{display:inline-block}";
 
-var __decorate$8 = (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);
@@ -1390,6 +1396,10 @@ const VegaDropdown = class {
      *    within its container or relative to a reference point.
      */
     this.alignment = 'start';
+    /**
+     * Determines whether the dropdown displays a lazy loading status.
+     */
+    this.isLazyLoading = false;
   }
   watchIsDropdownShow() {
   }
@@ -1457,83 +1467,83 @@ const VegaDropdown = class {
     "prefixIconSlot": ["watchPrefixIconSlot"]
   }; }
 };
-__decorate$8([
+__decorate$d([
   InjectVegaGlobalSlimmer()
 ], VegaDropdown.prototype, "globalSlimmers", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "sourceController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchRenderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createRenderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemLevelRenderer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "keyboardController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "appenderController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "childrenController", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "itemClickObserver", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "showEventEmitter", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "hideEventEmitter", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);
-__decorate$8([
+__decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "searchEventEmitter", void 0);
-__decorate$8([
+__decorate$d([
   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)}";
+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 .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 __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);
@@ -1554,15 +1564,15 @@ const VegaDropdownContentBox = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$7([
+__decorate$c([
   InjectVegaGlobalSlimmer()
 ], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
-__decorate$7([
+__decorate$c([
   InjectVegaSlimmer()
 ], VegaDropdownContentBox.prototype, "eventPrevent", void 0);
 VegaDropdownContentBox.style = vegaDropdownContentBoxCss;
 
-var __decorate$6 = (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;
@@ -1586,16 +1596,16 @@ class VegaDropdownGroupRenderer extends VegaSlimmer {
     return this.divide && h("div", { class: "vega-dropdown-group-divide" });
   }
 }
-__decorate$6([
+__decorate$b([
   MapToComponentField()
 ], VegaDropdownGroupRenderer.prototype, "label", void 0);
-__decorate$6([
+__decorate$b([
   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 __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);
@@ -1622,15 +1632,15 @@ const VegaDropdownGroup = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$5([
+__decorate$a([
   InjectVegaGlobalSlimmer()
 ], VegaDropdownGroup.prototype, "globalSlimmers", void 0);
-__decorate$5([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDropdownGroup.prototype, "renderer", void 0);
 VegaDropdownGroup.style = vegaDropdownGroupCss;
 
-var __decorate$4 = (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;
@@ -1692,41 +1702,41 @@ class VegaDropdownItemRenderer extends VegaSlimmer {
     this.vegaDropdownItemClickController.handleClick(e);
   }
 }
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "host", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "label", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "count", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "disabled", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "selected", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "selectType", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "height", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$4([
+__decorate$9([
   MapToComponentField()
 ], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
 
-var __decorate$3 = (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);
   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;
@@ -1787,26 +1797,26 @@ class VegaDropdownItemStateController extends SubStateObserverSlimmer {
     });
   }
 }
-__decorate$3([
+__decorate$8([
   MapToComponentField()
 ], VegaDropdownItemStateController.prototype, "host", void 0);
-__decorate$3([
+__decorate$8([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "selectType", void 0);
-__decorate$3([
+__decorate$8([
   MapToComponentField()
 ], VegaDropdownItemStateController.prototype, "itemKey", void 0);
-__decorate$3([
+__decorate$8([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "selected", void 0);
-__decorate$3([
+__decorate$8([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);
-__decorate$3([
+__decorate$8([
   MapToComponentField({ writable: true })
 ], VegaDropdownItemStateController.prototype, "itemDisplayRule", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1828,22 +1838,22 @@ class VegaDropdownItemClickController extends VegaSlimmer {
     ChangeManager.notify(DROPDOWN_ITEM_CLICK, { host: this.host, detail: { itemKey: this.itemKey } });
   }
 }
-__decorate$2([
+__decorate$7([
   MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "host", void 0);
-__decorate$2([
+__decorate$7([
   MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "itemKey", void 0);
-__decorate$2([
+__decorate$7([
   MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "vegaClick", void 0);
-__decorate$2([
+__decorate$7([
   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 __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);
@@ -1888,195 +1898,635 @@ const VegaDropdownItem = class {
   }
   get host() { return getElement(this); }
 };
-__decorate$1([
+__decorate$6([
   InjectVegaGlobalSlimmer()
 ], VegaDropdownItem.prototype, "globalSlimmers", void 0);
-__decorate$1([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaDropdownItem.prototype, "renderer", void 0);
-__decorate$1([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaDropdownItem.prototype, "vegaDropdownItemStateController", void 0);
-__decorate$1([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaDropdownItem.prototype, "vegaDropdownItemClickController", void 0);
-__decorate$1([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaDropdownItem.prototype, "dropdownItemEventPrevent", void 0);
-__decorate$1([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaDropdownItem.prototype, "clickEventEmitter", void 0);
 VegaDropdownItem.style = vegaDropdownItemCss;
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
+  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 */
+/**
+ * The `VegaVirtualScrollPositionController` class in TypeScript implements virtual scrolling functionality
+ * by managing source data, item heights, viewport settings, and scroll positions.
+ */
+class VegaVirtualScrollPositionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.extendItemsCount = 10;
     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();
+  /**
+   * The componentWillLoad function is used to initialize virtual scrolling in a TypeScript component.
+   */
+  componentWillLoad() {
+    this.initVirtualScroll();
+    this.initPositionConfig();
   }
+  /**
+   * The function `watchSourceChange` initializes virtual scrolling if the source items have changed.
+   *
+   * @param {SourceItemType[]} newValue - newValue is an array of items of type SourceItemType that
+   * represents the new source data.
+   * @param {SourceItemType[]} oldValue - The `oldValue` parameter in the `watchSourceChange` function
+   * represents the previous value of the source items before the change occurred. It is used to compare
+   * with the new value (`newValue`) to determine if there has been a change in the source items.
+   */
   watchSourceChange(newValue, oldValue) {
     if (!this.isSameSource(newValue, oldValue)) {
       this.initVirtualScroll();
     }
   }
-  watchToInitData() {
+  /**
+   * The function `watchApproxItemHeight` initializes virtual scrolling.
+   */
+  watchApproxItemHeight() {
+    this.initVirtualScroll();
+  }
+  /**
+   * The function `watchViewportMaxHeight` initializes virtual scrolling.
+   */
+  watchViewportMaxHeight() {
     this.initVirtualScroll();
   }
-  componentWillLoad() {
+  /**
+   * Get maxStartIndex
+   *
+   * @returns {number} - maxStartIndex
+   */
+  getMaxStartIndex() {
+    return this.maxStartIndex;
+  }
+  /**
+   * 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() {
+    if (this.modeController.getMode() === 'virtual') {
+      const currentIndex = Math.floor(this.scrollTop / this.approxItemHeight);
+      const startIndex = Math.min(Math.max(currentIndex - this.extendItemsCount, 0), this.maxStartIndex);
+      const viewportStartIndex = startIndex === 0 ? currentIndex : startIndex + this.extendItemsCount;
+      const endIndex = viewportStartIndex + this.viewportItemsCount + this.extendItemsCount;
+      const transformY = Math.min(Math.max(this.scrollTop - this.extendItemsCount * this.approxItemHeight, 0), this.maxStartIndex * this.approxItemHeight);
+      this.positionConfig = { startIndex, viewportStartIndex, endIndex, transformY };
+    }
+  }
+  /**
+   * While mode change from `normal` to `virtual`, we should init virtual scroll and set the position.
+   */
+  changeModeFromNormalToVirtual() {
     this.initVirtualScroll();
+    this.setPositionByScrollTop();
+  }
+  /**
+   * The function `initVirtualScroll` initializes variables for a virtual scrolling feature in a
+   * TypeScript component.
+   */
+  initVirtualScroll() {
+    if (this.modeController.getMode() === 'virtual') {
+      this.totalCount = this.source.length;
+      this.viewportItemsCount = Math.ceil(this.viewportMaxHeight / this.approxItemHeight);
+      this.maxStartIndex = this.totalCount - this.viewportItemsCount - this.extendItemsCount;
+    }
+  }
+  /**
+   * Init positionConfig while componentWillLoad
+   */
+  initPositionConfig() {
+    this.positionConfig = {
+      startIndex: 0,
+      viewportStartIndex: 0,
+      endIndex: this.viewportItemsCount + this.extendItemsCount,
+      transformY: 0,
+    };
+    this.scrollableController.resetScrollTop();
+  }
+  /**
+   * The function `isSameSource` compares two arrays of objects based on a specific identifier and
+   * returns true if they are the same.
+   *
+   * @param {SourceItemType[]} first - `first` is an array of `SourceItemType` elements.
+   * @param {SourceItemType[]} second - The `second` parameter in the `isSameSource` method is an array
+   * of `SourceItemType` elements.
+   * @returns {boolean} The `isSameSource` method is returning a boolean value, either `true` or `false`. It checks
+   * if the `first` and `second` arrays of `SourceItemType` objects have the same length and if the
+   * `sourceItemIdentifier` property of each object at the same index in both arrays is equal. If all
+   * conditions are met, it returns `true`, otherwise it returns `
+   */
+  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;
+      }
+    }
+    /* istanbul ignore next */
+    return true;
   }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "sourceItemIdentifier", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "source", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "approxItemHeight", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "viewportMaxHeight", void 0);
+__decorate$5([
+  MapToComponentField({ writable: true })
+], VegaVirtualScrollPositionController.prototype, "positionConfig", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "scrollTop", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "scrollableController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaVirtualScrollPositionController.prototype, "modeController", void 0);
+__decorate$5([
+  MapToComponentMethod('componentWillLoad')
+], VegaVirtualScrollPositionController.prototype, "componentWillLoad", null);
+__decorate$5([
+  MapToComponentMethod('watchSourceChange')
+], VegaVirtualScrollPositionController.prototype, "watchSourceChange", null);
+__decorate$5([
+  MapToComponentMethod('watchApproxItemHeight')
+], VegaVirtualScrollPositionController.prototype, "watchApproxItemHeight", null);
+__decorate$5([
+  MapToComponentMethod('watchViewportMaxHeight')
+], VegaVirtualScrollPositionController.prototype, "watchViewportMaxHeight", null);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaVirtualScrollScrollableController` class in TypeScript manages virtual scrolling behavior
+ * by handling scroll events and scrolling to specific indexes within a container element.
+ */
+class VegaVirtualScrollScrollableController extends VegaSlimmer {
+  /**
+   * The `componentDidLoad` function in TypeScript listens for scroll events on a container.
+   */
   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.
+  /**
+   * The `componentDidRender` function sets the scroll position of a container element to a specified value.
+   * 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;
+    this.renderer.getContainerRef().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.
+   * The function `watchScrollTop` in TypeScript calls the `handleScroll` method.
    */
-  async scrollToIndex(index) {
+  watchScrollTop() {
+    this.handleScroll();
+  }
+  /**
+   * watchSourceChange
+   */
+  watchSourceChange() {
+    this.adjustScrollTopWhilePropChange();
+  }
+  /**
+   * watchApproxItemHeight
+   */
+  watchApproxItemHeight() {
+    this.adjustScrollTopWhilePropChange();
+  }
+  /**
+   * watchViewportMaxHeight
+   */
+  watchViewportMaxHeight() {
+    this.adjustScrollTopWhilePropChange();
+  }
+  /**
+   * The scrollToIndex function scrolls to a specific index within a container element either by
+   * directly scrolling to the item or by setting the scrollTop property based on the index and item
+   * height.
+   *
+   * @param {number} index - The `index` parameter is a number that represents the position of the item
+   * you want to scroll to within a list or container. It is used to determine which item should be
+   * scrolled into view.
+   */
+  scrollToIndex(index) {
+    const containerRef = this.renderer.getContainerRef();
     if (index >= 0) {
-      if (this.totalCount < this.thresholdOfWork) {
-        const selectedItem = this.virtualScrollContainerRef.querySelector(`:nth-child(${index + 1})`);
-        containerScrollToItem(this.virtualScrollContainerRef, selectedItem);
+      if (this.modeController.getMode() === 'normal') {
+        const selectedItem = containerRef.querySelector(`:nth-child(${index + 1})`);
+        containerScrollToItem(containerRef, selectedItem);
       }
       else {
         this.scrollTop = index * this.approxItemHeight;
       }
     }
   }
+  /**
+   * The function `resetScrollTop` sets the `scrollTop` property to 0.
+   */
+  resetScrollTop() {
+    this.scrollTop = 0;
+  }
+  /**
+   * The function `listenScrollContainer` listens for scroll events on a container element and updates
+   * the `scrollTop` property accordingly.
+   */
+  listenScrollContainer() {
+    this.renderer.getContainerRef().addEventListener('scroll', () => {
+      this.scrollTop = this.renderer.getContainerRef().scrollTop;
+    });
+  }
+  /**
+   * The handleScroll function sets the scrollTop property of a container element and updates the
+   * position based on the scroll top value.
+   */
+  handleScroll() {
+    const containerRef = this.renderer.getContainerRef();
+    containerRef && (containerRef.scrollTop = this.scrollTop);
+    this.positionController.setPositionByScrollTop();
+    this.checkIsScrollToBottom();
+  }
+  /**
+   * The function adjusts the scroll top position based on certain properties to ensure it stays within
+   * valid bounds.
+   */
+  adjustScrollTopWhilePropChange() {
+    this.scrollTop = Math.min((this.source.length - Math.floor(this.viewportMaxHeight / this.approxItemHeight)) *
+      this.approxItemHeight, this.scrollTop);
+  }
+  /**
+   * Checks if the page is at the bottom of the page and if so notifies the change manager
+   */
+  checkIsScrollToBottom() {
+    if (!this.isLoading &&
+      (this.isScrollToBottomInVirtualMode() || this.isScrollToBottomInNormalMode())) {
+      ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalVirtualScrollToBottom), {
+        endIndex: this.source.length - 1,
+      });
+    }
+  }
+  /**
+   * The function `isScrollToBottomInVirtualMode` checks if the `startIndex` is equal to `maxStartIndex`.
+   *
+   * @returns {boolean} The method `isScrollToBottomInVirtualMode()` is returning a boolean value based on the comparison of
+   * `this.startIndex` and `this.maxStartIndex`. If they are equal, it will return `true`, otherwise
+   * `false`.
+   */
+  isScrollToBottomInVirtualMode() {
+    return (this.modeController.getMode() === 'virtual' &&
+      this.positionConfig.startIndex === this.positionController.getMaxStartIndex());
+  }
+  /**
+   * The function `isScrollToBottomInNormalMode` checks if the virtual scroll container is scrolled to the bottom based
+   * on its scroll height, scroll top, and viewport max height.
+   *
+   * @returns {boolean} The function `isScrollToBottomInNormalMode()` is returning a boolean value based on the comparison of the
+   * sum of `this.virtualScrollContainerRef.scrollHeight` and `this.virtualScrollContainerRef.scrollTop`
+   * being equal to `this.viewportMaxHeight`.
+   */
+  isScrollToBottomInNormalMode() {
+    return (this.modeController.getMode() === 'normal' &&
+      this.source.length * this.approxItemHeight - this.scrollTop === this.viewportMaxHeight);
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "sourceItemIdentifier", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "source", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "viewportMaxHeight", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "approxItemHeight", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaVirtualScrollScrollableController.prototype, "scrollTop", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "positionConfig", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "isLoading", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "renderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "positionController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaVirtualScrollScrollableController.prototype, "modeController", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], VegaVirtualScrollScrollableController.prototype, "componentDidLoad", null);
+__decorate$4([
+  MapToComponentMethod('componentDidRender')
+], VegaVirtualScrollScrollableController.prototype, "componentDidRender", null);
+__decorate$4([
+  MapToComponentMethod('watchScrollTop')
+], VegaVirtualScrollScrollableController.prototype, "watchScrollTop", null);
+__decorate$4([
+  MapToComponentMethod('watchSourceChange')
+], VegaVirtualScrollScrollableController.prototype, "watchSourceChange", null);
+__decorate$4([
+  MapToComponentMethod('watchApproxItemHeight')
+], VegaVirtualScrollScrollableController.prototype, "watchApproxItemHeight", null);
+__decorate$4([
+  MapToComponentMethod('watchViewportMaxHeight')
+], VegaVirtualScrollScrollableController.prototype, "watchViewportMaxHeight", null);
+__decorate$4([
+  MapToComponentMethod('scrollToIndex')
+], VegaVirtualScrollScrollableController.prototype, "scrollToIndex", null);
+
+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;
+};
+class VegaVirtualScrollRenderer extends VegaSlimmer {
+  getContainerRef() {
+    return this.virtualScrollContainerRef;
+  }
   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
+    return (h("div", { style: { maxHeight: `${this.viewportMaxHeight}px`, overflow: 'auto' }, class: "virtual-scroll-container", ref: (el) => (this.virtualScrollContainerRef = el) }, this.modeController.getMode() === 'normal'
       ? this.renderNormal()
-      : this.renderVirtualScroll())));
+      : this.renderVirtualScroll()));
   }
   renderNormal() {
-    return (h(Fragment, null, this.source.map((item, index) => {
-      return this.renderItem(item, index);
-    })));
+    return (h(Fragment, null,
+      this.source.map((item, index) => {
+        return this.renderItem(item, index);
+      }),
+      this.loadingRenderer.render()));
   }
   renderVirtualScroll() {
     return (h("div", { style: {
-        height: `${this.totalHeight}px`,
+        height: `${this.source.length * this.approxItemHeight}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);
-    }))));
+      } },
+      h("div", { class: "virtual-scroll-block", style: {
+          transform: `translateY(${this.positionConfig.transformY}px)`,
+        } },
+        this.source
+          .slice(this.positionConfig.startIndex, this.positionConfig.viewportStartIndex)
+          .map((item, index) => {
+          return this.renderItem(item, this.positionConfig.startIndex + index, this.approxItemHeight);
+        }),
+        this.source
+          .slice(this.positionConfig.viewportStartIndex, this.positionConfig.endIndex)
+          .map((item, index) => {
+          return this.renderItem(item, this.positionConfig.viewportStartIndex + index);
+        }),
+        this.loadingRenderer.render())));
   }
-  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;
+}
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "source", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "renderItem", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "approxItemHeight", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "positionConfig", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "viewportMaxHeight", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "modeController", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaVirtualScrollRenderer.prototype, "loadingRenderer", 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;
+};
+/**
+ * The class is responsible for managing the visibility and behavior of the tooltip content box.
+ */
+class VegaVirtualScrollModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mode = 'normal';
   }
-  /* istanbul ignore next */
-  listenScrollContainer() {
-    this.virtualScrollContainerRef.addEventListener('scroll', () => {
-      this.scrollTop = this.virtualScrollContainerRef.scrollTop;
-    });
+  /**
+   * The componentWillLoad function is used to initialize mode.
+   */
+  componentWillLoad() {
+    this.setMode();
   }
   /**
-   * While scrollTop of container change, the startIndex, endIndex, viewPortStartIndex and transformY will be change.
-   * The following is the process of change:
+   * While watchVirtualizationThreshold changed, we should reset the mode.
+   */
+  watchVirtualizationThreshold() {
+    this.setMode();
+  }
+  /**
+   * While source changed, we should reset the mode.
+   */
+  watchSourceChange() {
+    this.setMode();
+  }
+  /**
+   * Get current mode
    *
-   *---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
+   * @returns {VirtualScrollMode} - mode
    */
-  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);
+  getMode() {
+    return this.mode;
   }
-  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;
-      }
+  /**
+   * Set the mode of the pager to virtual or normal depending on the length of
+   */
+  setMode() {
+    const originalMode = this.mode;
+    this.mode = this.source.length > this.virtualizationThreshold ? 'virtual' : 'normal';
+    if (originalMode === 'normal' && this.mode === 'virtual') {
+      this.positionController.changeModeFromNormalToVirtual();
     }
-    return true;
   }
-  get el() { return getElement(this); }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "source", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "virtualizationThreshold", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaVirtualScrollModeController.prototype, "positionController", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaVirtualScrollModeController.prototype, "componentWillLoad", null);
+__decorate$2([
+  MapToComponentMethod('watchVirtualizationThreshold')
+], VegaVirtualScrollModeController.prototype, "watchVirtualizationThreshold", null);
+__decorate$2([
+  MapToComponentMethod('watchSourceChange')
+], VegaVirtualScrollModeController.prototype, "watchSourceChange", null);
+
+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;
+};
+/**
+ * The class `VegaVirtualScrollMoreLoadingRenderer` extends `VegaSlimmer` and renders
+ * a loading indicator for virtual scrolling in a TypeScript React application.
+ */
+class VegaVirtualScrollLoadingIndicatorRenderer extends VegaSlimmer {
+  render() {
+    return (this.isLoading && (h("div", { class: "virtual-scroll-more-loading" },
+      h("vega-flex", { gap: "size-8", direction: "row" },
+        h("vega-loading-indicator", { size: "small" }),
+        h("vega-font", { variant: "font-field-value", color: "text-secondary" }, "Loading")))));
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaVirtualScrollLoadingIndicatorRenderer.prototype, "isLoading", void 0);
+
+const vegaVirtualScrollCss = ":host .virtual-scroll-more-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}";
+
+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 = {};
+    this.modeController = new VegaVirtualScrollModeController();
+    this.positionController = new VegaVirtualScrollPositionController();
+    this.scrollableController = new VegaVirtualScrollScrollableController();
+    this.renderer = new VegaVirtualScrollRenderer();
+    this.loadingRenderer = new VegaVirtualScrollLoadingIndicatorRenderer();
+    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;
+    /**
+     * Determines whether the dropdown displays a loading status.
+     */
+    this.isLoading = false;
+    /**
+     * The count of the source that will be used as the threshold for determining whether to use virtual scrolling.
+     * If the count of source exceeds this threshold, we employ virtual scrolling. Otherwise, normal item rendering is used
+     */
+    this.virtualizationThreshold = 60;
+    /** We set this key to check the source is really change and should refresh virtual scroll */
+    this.sourceItemIdentifier = 'key';
+  }
+  watchScrollTop() {
+  }
+  watchSourceChange(newValue, oldValue) {
+  }
+  watchApproxItemHeight() {
+  }
+  watchViewportMaxHeight() {
+  }
+  watchVirtualizationThreshold() {
+  }
+  /**
+   * 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) {
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
   static get watchers() { return {
     "scrollTop": ["watchScrollTop"],
     "source": ["watchSourceChange"],
-    "approxItemHeight": ["watchToInitData"],
-    "viewportMaxHeight": ["watchToInitData"]
+    "approxItemHeight": ["watchApproxItemHeight"],
+    "viewportMaxHeight": ["watchViewportMaxHeight"],
+    "virtualizationThreshold": ["watchVirtualizationThreshold"]
   }; }
 };
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaVirtualScroll.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "modeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "positionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "scrollableController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "loadingRenderer", void 0);
+VegaVirtualScroll.style = vegaVirtualScrollCss;
 
 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 };