@heartlandone/vega-sandbox-pr-1500-dfc6da0e9fece0930d400728caaf238ee3458a29 2.28.0

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

@@ -0,0 +1,2920 @@
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-187f71d1.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-cae24190.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { f as findParent, k as extractNumberFromString, l as containerScrollToItem } from './ui-0132dbb5.js';
+import { N as isArrayOfType, O as isDropdownSourceItemType } from './type-guard-63caf78b.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-9461cd67.js';
+import { e as VegaChange, l as VegaDropdownShow, m as VegaDropdownHide, b as VegaDropdownClick, j as VegaCreate, n as VegaDropdownSearch, a as VegaClick } from './vega-event-id-7465a011.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-8723f20f.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-1172e2ea.js';
+import { i as isArrayEqual } from './array-506b88b9.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-8eff5559.js';
+import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-6cef9549.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { b as VegaInternalDropdownTemplateItemsChange, e as VegaDropdownSearchInternalOverridden, d as VegaDropdownRenderItemInternalOverridden, c as VegaInternalVirtualScrollToBottom } from './vega-internal-event-id-7e05cf4a.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-ed648d33.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-3d52b843.js';
+import { D as DROPDOWN_ITEM_CLICK } from './static-subject-title-6987a80b.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-1682b34e.js';
+import { T as TranslationSlimmer } from './translation-slimmer-79f9a9c9.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-f94315e2.js';
+import './breakpoints-36a3ed69.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+import './observer-3959f9dd.js';
+import './keyboard-manager-d1f9ddc1.js';
+import './responsive-format-facade-5a1329a7.js';
+import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
+import './internal-vega-z-index-manager-0553458e.js';
+import './dynamic-slimmer-90b8af32.js';
+import './page-resize-observer-slimmer-994c1e1b.js';
+import './internal-vega-event-manager-5aedd784.js';
+import './translation-0fa7cf77.js';
+import './create-public-api-runtime-metrics-slimmer-928ad7f0.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-5f973eb5.js';
+import './index-0863eec6.js';
+
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownRenderer extends VegaSlimmer {
+  componentDidRender() {
+    this.setVirtualContainer();
+    this.appendItemsToContentBox();
+    this.appendDropdownToContentBox();
+  }
+  getDropdownRef() {
+    return this.dropdownRef;
+  }
+  getDropdownContentBoxRef() {
+    return this.dropdownContentBoxRef;
+  }
+  getVirtualContainerRef() {
+    return this.virtualContainerRef;
+  }
+  /* istanbul ignore next */
+  getNextActiveItem(code) {
+    const items = this.getAllItems();
+    const currentActiveItem = this.getCurrentActiveItem();
+    if (currentActiveItem) {
+      const currentIndex = items.findIndex((item) => item === currentActiveItem);
+      const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+      const nextItem = items[nextIndex];
+      if (nextItem) {
+        return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+      }
+      else {
+        return null;
+      }
+    }
+    else {
+      return items[0];
+    }
+  }
+  render() {
+    return (h(Fragment, null,
+      this.renderContentSlot(),
+      this.renderDropdown()));
+  }
+  /**
+   * TODO: We will use no-named slot for both template and source render mode. And will deprecate slot dropdown-content
+   */
+  renderContentSlot() {
+    return this.renderModeController.isSourceRenderMode() ? (h("slot", null)) : (h(Fragment, null,
+      h("slot", { name: "dropdown-content" }),
+      h("slot", null)));
+  }
+  renderDropdown() {
+    const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
+    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
+      h("div", { ref: (e) => (this.dropdownRef = e), class: {
+          'vega-dropdown': true,
+          'vega-dropdown-with-searchable': this.searchable,
+        } },
+        h("div", { class: "vega-dropdown-actions" },
+          this.searchRenderer.render(),
+          this.createRenderer.render()),
+        h("div", null,
+          h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
+            ? this.listRenderer.renderBySource()
+            : this.listRenderer.renderBySlot())))));
+  }
+  setVirtualContainer() {
+    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  }
+  appendItemsToContentBox() {
+    if (!this.renderModeController.isSourceRenderMode()) {
+      const itemsSlot = this.host.querySelector("[slot='items']");
+      if (!this.dropdownContentBoxRef.contains(itemsSlot) && itemsSlot) {
+        this.dropdownContentBoxRef.append(itemsSlot);
+      }
+    }
+  }
+  appendDropdownToContentBox() {
+    var _a, _b;
+    if (!((_a = this.dropdownContentBoxRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(this.dropdownRef))) {
+      (_b = this.dropdownContentBoxRef.shadowRoot) === null || _b === void 0 ? void 0 : _b.append(this.dropdownRef);
+    }
+  }
+  /* istanbul ignore next */
+  getAllItems() {
+    const virtualScroll = this.dropdownRef.querySelector('vega-virtual-scroll');
+    const itemContainer = virtualScroll
+      ? virtualScroll.shadowRoot
+      : this.dropdownRef;
+    return Array.from(itemContainer.querySelectorAll('vega-dropdown-item'));
+  }
+  /* istanbul ignore next */
+  getCurrentActiveItem() {
+    return findParent(getActiveElement(this.dropdownContentBoxRef.shadowRoot), 'vega-dropdown-item');
+  }
+  /* istanbul ignore next */
+  findNextCallFocusItem(items, currentIndex, code) {
+    const nextIndex = code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+    const nextItem = items[nextIndex];
+    if (nextItem) {
+      return nextItem.disabled ? this.findNextCallFocusItem(items, nextIndex, code) : nextItem;
+    }
+    else {
+      return null;
+    }
+  }
+}
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "host", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "maxHeight", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "searchable", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "createRenderer", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "listRenderer", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "renderModeController", void 0);
+__decorate$s([
+  MapToComponentMethod('componentDidRender')
+], VegaDropdownRenderer.prototype, "componentDidRender", null);
+
+var __decorate$r = (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 `VegaDropdownSourceController` class is responsible for handling and formatting the source data
+ * for a dropdown component in a TypeScript application.
+ */
+class VegaDropdownSourceController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.handleSource();
+  }
+  /**
+   * The function "watchSource" calls the function "handleSource".
+   */
+  watchSource() {
+    this.handleSource();
+  }
+  /**
+   * The function sets the source for rendering by searching for a formatted source.
+   */
+  setRenderSource() {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.sourceForRender = this.searchController.search(this.source);
+    }
+  }
+  /**
+   * The function "handleSource" performs validation, formatting, and rendering of a source.
+   */
+  handleSource() {
+    this.validSource();
+    this.setRenderSource();
+  }
+  /**
+   * The function "validSource" checks if the "source" variable is an array of "VegaDropdownSourceItem"
+   * type, and if not, assigns an empty array to it.
+   */
+  validSource() {
+    this.source = isArrayOfType(this.source, isDropdownSourceItemType)
+      ? this.source
+      : [];
+  }
+}
+__decorate$r([
+  MapToComponentField({ writable: true })
+], VegaDropdownSourceController.prototype, "source", void 0);
+__decorate$r([
+  MapToComponentField({ writable: true })
+], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaDropdownSourceController.prototype, "searchController", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaDropdownSourceController.prototype, "renderModeController", void 0);
+__decorate$r([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownSourceController.prototype, "componentWillLoad", null);
+__decorate$r([
+  MapToComponentMethod('watchSource')
+], VegaDropdownSourceController.prototype, "watchSource", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownCreateRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.onItemAdd = () => {
+      this.createEventEmitter.emit(this.searchString);
+      this.appenderController.hide();
+    };
+  }
+  render() {
+    const canRender = this.searchString &&
+      this.dynamicOption &&
+      !this.childrenController.isLabelExist(this.searchString);
+    return (canRender && (h("fragment", null,
+      h("div", { class: "vega-dropdown-add-item", onClick: this.onItemAdd, tabIndex: 0, role: "button", "aria-label": `Add ${this.searchString}`, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+        h("div", null,
+          h("vega-icon", { icon: "plus-sign" })),
+        h("span", { class: "v-break-all" }, `Add "${this.searchString}"`)),
+      h("div", { class: "vega-dropdown-divider" }))));
+  }
+}
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownListRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.defaultMaxHeightOfItemsContainer = 400;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-keyboard-control-e2e}
+   */
+  /* istanbul ignore next */
+  getVirtualScrollRef() {
+    return this.virtualScrollRef;
+  }
+  getTemplateContainerRef() {
+    return this.templateContainerRef;
+  }
+  renderBySource() {
+    return (h(Fragment, null,
+      this.renderLoading(),
+      this.renderDropdownListBySource()));
+  }
+  renderBySlot() {
+    return (h(Fragment, null,
+      this.renderLoading(),
+      this.renderDropdownListBySlot()));
+  }
+  renderLoading() {
+    return (h("div", { class: {
+        'vega-dropdown-loading': true,
+        'v-hidden': !this.isLoading,
+      } },
+      h("vega-flex", { gap: "size-8", direction: "row" },
+        h("vega-loading-indicator", { size: "small" }),
+        h("span", null, "Loading"))));
+  }
+  renderDropdownListBySource() {
+    return (h(Fragment, null,
+      h("div", { class: {
+          'vega-dropdown-empty-list': true,
+          'v-hidden': this.sourceForRender.length > 0,
+        } }, this.searchString
+        ? this.translationSlimmer.t('No results found')
+        : this.translationSlimmer.t('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.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
+  }
+  renderDropdownListBySlot() {
+    return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+        [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
+        ['v-hidden']: this.isLoading,
+      }, ref: (ref) => (this.templateContainerRef = ref) },
+      h("slot", { name: "items" })));
+  }
+}
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "host", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isLoading", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "searchString", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownItemLevelRenderer extends VegaSlimmer {
+  render(item, fixHeight) {
+    const renderResult = this.remoteInvocationController.callRemoteItemRender(item, fixHeight);
+    if (renderResult)
+      return renderResult;
+    return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
+  }
+}
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "host", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "caseSensitive", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "searchString", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
+__decorate$o([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownSearchRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.clear = () => {
+      this.searchString = null;
+      if (this.searchInputRef)
+        this.searchInputRef.value = '';
+    };
+    this.onInputSearch = (node) => {
+      this.searchInputRef = node;
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
+        this.searchTriggerBy === 'input' && this.search(input.detail);
+      });
+    };
+    this.search = (input) => {
+      this.searchString = input;
+      if (this.renderModeController.isSourceRenderMode()) {
+        if (this.useDefaultFilter) {
+          this.sourceController.setRenderSource();
+          this.focus();
+        }
+        else if (this.isDropdownShow) {
+          this.searchEventEmitter.emit(input);
+        }
+      }
+      else {
+        this.searchEventEmitter.emit(input);
+      }
+    };
+  }
+  userSearch(input) {
+    this.search(input);
+  }
+  focus() {
+    if (this.searchInputRef) {
+      this.searchInputRef.shadowRoot.querySelector('input').focus();
+    }
+  }
+  render() {
+    return (this.searchable && (h("div", { class: "vega-dropdown-search" },
+      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
+         */
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onKeyDown: 
+        /* istanbul ignore next */ (e) => {
+          if (this.searchTriggerBy === 'enter' && e.code === 'Enter') {
+            this.search(this.searchInputRef.value);
+          }
+        } }))));
+  }
+}
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
+__decorate$n([
+  MapToComponentField({ writable: true })
+], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "source", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
+__decorate$n([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
+__decorate$n([
+  MapToComponentMethod('search')
+], VegaDropdownSearchRenderer.prototype, "userSearch", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownKeyboardController` class is responsible for managing keyboard events
+ * for a dropdown component.
+ */
+class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
+  /**
+   * The constructor function sets up keyboard event listeners for a dropdown component.
+   */
+  constructor() {
+    super((target) => {
+      const dropdownRef = this.renderer.getDropdownRef();
+      const virtualContainerRef = this.renderer.getVirtualContainerRef();
+      return [
+        {
+          keyCode: 'Tab',
+          activeElementInScope: [target.host],
+          callback: target.showDropdownIfHover,
+        },
+        {
+          keyCode: 'Escape',
+          activeElementInScope: [target.host, dropdownRef, virtualContainerRef],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.appenderController.hide(),
+        },
+        {
+          keyCode: ['ArrowUp', 'ArrowDown'],
+          activeElementInScope: [target.host, dropdownRef],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ (event) => target.controlDirectionByKeyboard(event.code),
+        },
+        {
+          keyCode: 'Tab',
+          activeElementOutScope: [target.host, dropdownRef, virtualContainerRef],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: /* istanbul ignore next */ () => target.isDropdownShow && target.appenderController.hide(),
+        },
+      ];
+    });
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     */
+    this.showDropdownIfHover = async () => {
+      if (this.trigger === 'hover') {
+        this.appenderController.show();
+      }
+    };
+    /* istanbul ignore next */
+    /**
+     * The below method is e2e-test covered in @see{module:vega-dropdown-keyboard-control-e2e}
+     *
+     * @param {string} code - current keyboard code.
+     */
+    this.controlDirectionByKeyboard = (code) => {
+      var _a;
+      (_a = this.renderer.getNextActiveItem(code)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('li').focus();
+    };
+  }
+}
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "host", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "trigger", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "renderer", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
+__decorate$m([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
+
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
+ * behavior of a dropdown component.
+ */
+class VegaDropdownAppenderController extends ElementAppenderSlimmer {
+  //TODO: make watchIsDropdownShow as a callback param to skip dropdown re-render.
+  /**
+   * This constructor initializes a dropdown component with various configuration options.
+   */
+  constructor() {
+    super(() => ({
+      target: this.host,
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
+      positionRelativeTo: this.positionRelativeTo,
+      matchTargetWidth: this.matchTargetWidth,
+      matchContainerHeight: this.matchContainerHeight,
+      size: this.size,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      translocation: this.translocation,
+      maxHeight: this.maxHeight,
+      placement: this.placement,
+      alignment: this.alignment,
+    }), () => this.trigger);
+  }
+  /**
+   * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
+   * based on the result.
+   */
+  async watchIsDropdownShow() {
+    if (this.isDropdownShow) {
+      this.showEventEmitter.emit();
+    }
+    else {
+      this.searchRenderer.clear();
+      this.hideEventEmitter.emit();
+    }
+  }
+  /**
+   * The function `userShow` checks if a dropdown is not already shown and then calls the `show`
+   * function.
+   */
+  userShow() {
+    if (!this.isDropdownShow) {
+      this.show();
+    }
+  }
+  /**
+   * The function `userHide` hides a dropdown if it is currently being shown.
+   */
+  userHide() {
+    if (this.isDropdownShow) {
+      this.hide();
+    }
+  }
+}
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "host", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "trigger", void 0);
+__decorate$l([
+  MapToComponentField({ writable: true })
+], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "size", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "minWidth", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "translocation", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "placement", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "alignment", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "renderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
+__decorate$l([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate$l([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
+__decorate$l([
+  MapToComponentMethod('show')
+], VegaDropdownAppenderController.prototype, "userShow", null);
+__decorate$l([
+  MapToComponentMethod('hide')
+], VegaDropdownAppenderController.prototype, "userHide", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownGroupLevelRenderer extends VegaSlimmer {
+  render(item, index, fixHeight) {
+    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$k([
+  MapToComponentField()
+], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
+__decorate$k([
+  MapToComponentField()
+], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
+ * and filtering dropdown items based on a search string.
+ */
+class VegaDropdownSearchController extends VegaSlimmer {
+  /**
+   * The search function returns the source array if there is no search string, otherwise it searches the
+   * nested list for matching items.
+   *
+   * @param {VegaDropdown['source']} source - The `source` parameter is of type `VegaDropdown['source']`, which means it is a
+   * property of the `VegaDropdown` object. It is expected to be an array of `VegaDropdownSourceItem`
+   * objects.
+   * @returns {VegaDropdownSourceItem[]} an array of `VegaDropdownSourceItem` objects.
+   */
+  search(source) {
+    return this.canSearch() ? this.searchSource(source, []) : source;
+  }
+  /**
+   * The function `canSearch` returns true if the conditions for searching are met.
+   *
+   * @returns {boolean} The method `canSearch()` returns a boolean value based on the conditions specified in the
+   * return statement. It returns `true` if `useDefaultFilter` is true, `searchable` is true, and
+   * `searchString` is not an empty string; otherwise, it returns `false`.
+   */
+  canSearch() {
+    return this.useDefaultFilter && !!this.searchString;
+  }
+  /**
+   * The function `searchSource` recursively searches through a nested list of `VegaDropdownSourceItem`
+   * objects, filtering out items that do not match a search string and modifying the labels of matching
+   * items.
+   *
+   * @param {VegaDropdownSourceItem[]} source - An array of objects of type VegaDropdownSourceItem. Each
+   * object represents a dropdown item and may have a "children" property which is an array of nested
+   * dropdown items.
+   * @param {VegaDropdownSourceItem[]} result - The `result` parameter is an array of
+   * `VegaDropdownSourceItem` objects. It is used to store the filtered items that match the search
+   * criteria.
+   * @returns {VegaDropdownSourceItem[]} an array of VegaDropdownSourceItem objects.
+   */
+  searchSource(source, result) {
+    const searchResult = this.remoteInvocationController.callRemoteSearch(source, this.searchString, this.caseSensitive);
+    if (searchResult)
+      return searchResult;
+    source.forEach((item) => {
+      if (item['children']) {
+        const filtered = this.searchSource(item['children'], []);
+        if (filtered.length > 0) {
+          result.push(Object.assign(Object.assign({}, item), { children: filtered }));
+        }
+      }
+      else if (this.isLabelIncludeSearchString(item.label)) {
+        result.push(Object.assign(Object.assign({}, item), { label: this.replaceLabelBySearchString(item.label) }));
+      }
+    });
+    return result;
+  }
+  /**
+   * The function checks if a given label includes a search string, taking into account case sensitivity.
+   *
+   * @param {string} label - A string representing the label to be checked for inclusion of the search
+   * string.
+   * @returns {boolean} a boolean value.
+   */
+  isLabelIncludeSearchString(label) {
+    return this.caseSensitive
+      ? label.includes(this.searchString)
+      : label.toLowerCase().includes(this.searchString.toLowerCase());
+  }
+  /**
+   * The function replaces occurrences of a search string in a label with bolded text.
+   *
+   * @param {string} label - The `label` parameter is a string that represents the label to be modified.
+   * @returns {string} a modified version of the input label string. The function uses the `replace` method with a
+   * regular expression pattern to find occurrences of the `searchString` within the label. It then
+   * replaces each occurrence with the same value wrapped in `<b>` tags. The modified label string is
+   * then returned.
+   */
+  replaceLabelBySearchString(label) {
+    return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
+  }
+}
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "host", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "searchString", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "useDefaultFilter", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "searchable", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownSelectedController` class handles the selection of items in a dropdown menu,
+ * either adding them to an array or setting them as the only selected item.
+ */
+class VegaDropdownSelectedController extends VegaSlimmer {
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.checkSelectedSourceKey(this.selectedSourceKey);
+  }
+  /**
+   * The function clears the selected source key based on the select type.
+   */
+  clearSelection() {
+    this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
+  }
+  /**
+   * The callback to handle [getSelection]{@link VegaTable.getSelection}
+   *
+   * @returns {string[]} The selected row keys array
+   */
+  getSelection() {
+    return this.selectedSourceKey;
+  }
+  /**
+   * The function `watchSelectedRowKeySet` sets the `selectedSourceKey` property based on the
+   * `selectType` and the provided `keys`.
+   *
+   * @param {string[] | string} keys - The parameter "keys" can be either a string or an array of
+   * strings.
+   * @returns {void} -.
+   */
+  watchSelectedRowKeySet(keys) {
+    this.checkSelectedSourceKey(keys);
+  }
+  /**
+   * The function `watchSelectType()` updates the value of `selectedSourceKey` based on the value of
+   * `selectType`.
+   *
+   * @returns {void} -.
+   */
+  watchSelectType() {
+    this.checkSelectedSourceKey(this.selectedSourceKey);
+  }
+  /**
+   * The function "watchSelectedSourceKey" assigns a value to the variable "selectedSourceKey" by calling
+   * the function "checkSelectedSourceKey" with the current value of "selectedSourceKey" as an argument.
+   *
+   * @param {string[] | string} newValue - new value.
+   * @param {string[] | string} oldValue - old value.
+   */
+  watchSelectedSourceKey(newValue, oldValue) {
+    if (Array.isArray(oldValue) && Array.isArray(newValue) && isArrayEqual(oldValue, newValue))
+      return;
+    this.checkSelectedSourceKey(newValue);
+  }
+  /**
+   * The function "watchSource" synchronizes the dropdown current data and checks the selected source
+   * key.
+   */
+  watchSource() {
+    this.checkSelectedSourceKey(this.selectedSourceKey);
+  }
+  /**
+   * The function checks if the input is an acceptable item selection observer.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+   * @returns {boolean} a boolean value.
+   */
+  isAcceptableItemSelectionObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-DROPDOWN-ITEM') {
+      return this.isCurrentDropdown(input['host']);
+    }
+    /* istanbul ignore next */
+    return false;
+  }
+  /**
+   * The select function handles the selection of a key, either adding it to the selectedSourceKey array
+   * or setting it as the only selected key.
+   *
+   * @param {string} key - The key parameter is a string that represents the selected item.
+   */
+  select(key) {
+    if (this.selectType === 'multiple') {
+      if (this.selectedSourceKey.includes(key)) {
+        this.selectedSourceKey = [
+          ...this.selectedSourceKey.filter((itemKey) => itemKey !== key),
+        ];
+      }
+      else {
+        this.selectedSourceKey = [...this.selectedSourceKey, key];
+      }
+    }
+    else if (this.selectType === 'single') {
+      this.selectedSourceKey = key;
+      this.appenderController.hide();
+    }
+    else {
+      this.appenderController.hide();
+    }
+    this.dropdownClickEventEmitter.emit(key);
+  }
+  /**
+   * The function checks if the given item belongs to the current dropdown.
+   *
+   * @param {HTMLElement} item - The `item` parameter is an HTMLElement, which represents an element in
+   * the DOM (Document Object Model). It is the element that we want to check if it is currently in a
+   * dropdown.
+   * @returns {boolean} a boolean value.
+   */
+  isCurrentDropdown(item) {
+    const appender = findParent(item, 'vega-dropdown-content-box');
+    return this.host === appender['data-parent-ref'];
+  }
+  /**
+   * The function `checkSelectedSourceKey` checks if the selected source key is valid based on the select
+   * type and returns the key or an empty array/string if it is invalid.
+   *
+   * @param {string | string[]} key - The `key` parameter can be either a string or an array of strings.
+   * @returns {void} The function `checkSelectedSourceKey` returns either a string or an array of strings.
+   */
+  checkSelectedSourceKey(key) {
+    if (this.renderModeController.isSourceRenderMode()) {
+      let result;
+      if (typeof key === 'string' &&
+        this.selectType === 'single' &&
+        this.childrenController.isKeyExist(key)) {
+        result = key;
+      }
+      else if (Array.isArray(key) && this.selectType === 'multiple') {
+        result = this.checkMultipleSelectedKeys(key);
+      }
+      else {
+        LogUtility.warn(`Invalid selectedSourceKey ${key} for ${this.selectType} mode`);
+        result = this.selectType === 'multiple' ? [] : '';
+      }
+      this.selectedSourceKey = result;
+    }
+    else {
+      this.selectedSourceKey = key;
+    }
+  }
+  /**
+   * The function checks if multiple selected keys exist and removes invalid keys, returning the valid
+   * keys.
+   *
+   * @param {string[]} keys - An array of strings representing the selected keys.
+   * @returns {string[]} an array of valid keys after removing any invalid keys from the input array.
+   */
+  checkMultipleSelectedKeys(keys) {
+    const invalidKeys = [];
+    const result = keys.filter((key) => {
+      const isExist = this.childrenController.isKeyExist(key);
+      if (!isExist)
+        invalidKeys.push(key);
+      return isExist;
+    });
+    if (invalidKeys.length > 0) {
+      LogUtility.warn(`Invalid selectedSourceKey ${keys} for ${this.selectType} mode`);
+    }
+    return result;
+  }
+}
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "host", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "selectType", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "source", void 0);
+__decorate$i([
+  MapToComponentField({ writable: true })
+], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "appenderController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "childrenController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$i([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
+__decorate$i([
+  MapToComponentMethod('clearSelection')
+], VegaDropdownSelectedController.prototype, "clearSelection", null);
+__decorate$i([
+  MapToComponentMethod('getSelection')
+], VegaDropdownSelectedController.prototype, "getSelection", null);
+__decorate$i([
+  MapToComponentMethod('setSelection')
+], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
+__decorate$i([
+  MapToComponentMethod('watchSelectType')
+], VegaDropdownSelectedController.prototype, "watchSelectType", null);
+__decorate$i([
+  MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
+__decorate$i([
+  MapToComponentMethod('watchSource')
+], VegaDropdownSelectedController.prototype, "watchSource", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownRenderModeController` class is responsible for determining
+ * the render mode of a dropdown component based on the presence of a specific element in the DOM.
+ */
+class VegaDropdownRenderModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderMode = 'SOURCE';
+  }
+  /**
+   * The `connectedCallback` function is called before the component is rendered and is used to set the
+   * render mode.
+   */
+  connectedCallback() {
+    this.setRenderMode();
+  }
+  /**
+   * The function checks if the render mode is set to 'SOURCE' and returns a boolean value.
+   *
+   * @returns { boolean }A boolean value indicating whether the render mode is set to 'SOURCE'.
+   */
+  isSourceRenderMode() {
+    return this.renderMode === 'SOURCE';
+  }
+  /**
+   * The function sets the render mode based on the presence of a specific element in the DOM.
+   * While component first connected, the items slot is in the host.
+   * While component connected after the first time, the items slot will apppend to vega-dropdown-content-box, so the parent changed.
+   *   code: VegaDropdownRenderer.appendItemsToContentBox
+   */
+  setRenderMode() {
+    const parent = this.renderer.getDropdownContentBoxRef() || this.host;
+    this.renderMode = parent.querySelector('[slot=items]') ? 'SLOT' : 'SOURCE';
+  }
+}
+__decorate$h([
+  MapToComponentField()
+], VegaDropdownRenderModeController.prototype, "host", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaDropdownRenderModeController.prototype, "renderer", void 0);
+__decorate$h([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The controller for the table children components.
+ */
+class VegaDropdownChildrenController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.renderer.getDropdownContentBoxRef(),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-dropdown-items-dom-change-e2e}
+       */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.syncUpDropdownCurrentData(),
+    });
+    this.labelSet = new Set();
+    this.keySet = new Set();
+    /**
+     * The `syncUpDropdownCurrentDataBySlot` method is responsible for
+     * synchronizing the current data in a dropdown based on the items present in the slot.
+     */
+    this.collectKeyAndLabelFromSlot = () => {
+      const container = this.renderer.getDropdownContentBoxRef() || this.host;
+      Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
+        item.label && this.labelSet.add(item.label);
+        item.itemKey && this.keySet.add(item.itemKey);
+      });
+    };
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  /* istanbul ignore next */
+  disconnectedCallback() {
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.syncUpDropdownCurrentData();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+  }
+  /**
+   * The function "watchSource" synchronizes the dropdown current data.
+   */
+  watchSource() {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.syncUpDropdownCurrentData();
+    }
+  }
+  /**
+   * The function checks if a given label exists in a label set.
+   *
+   * @param {string} label - A string representing the label to check if it exists.
+   * @returns {boolean} A boolean value is being returned.
+   */
+  isLabelExist(label) {
+    return this.labelSet.has(label);
+  }
+  /**
+   * The function checks if a given key exists in a set.
+   *
+   * @param {string} key - A string representing the key to check if it exists in the keySet.
+   * @returns {boolean} A boolean value indicating whether the given key exists in the keySet.
+   */
+  isKeyExist(key) {
+    return this.keySet.has(key);
+  }
+  /**
+   * The function syncs up the current data of a dropdown based on the render mode.
+   */
+  syncUpDropdownCurrentData() {
+    this.clearDropdownCurrentData();
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.collectKeyAndLabelFromSource(this.source);
+    }
+    else {
+      this.collectKeyAndLabelFromSlot();
+      this.notifyTemplateItemsChange();
+    }
+  }
+  /**
+   * 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
+   */
+  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 */
+  /**
+   * The below method is e2e-test covered in @see{module:vega-dropdown-items-dom-change-e2e}
+   */
+  clearDropdownCurrentData() {
+    this.keySet.clear();
+    this.labelSet.clear();
+  }
+  /**
+   * The function `notifyTemplateItemsChange` notifies changes to dropdown items within a container element.
+   */
+  notifyTemplateItemsChange() {
+    const container = this.renderer.getDropdownContentBoxRef() || this.host;
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
+  }
+}
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "host", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "source", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "sourceController", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "selectedController", void 0);
+__decorate$g([
+  InjectVegaSlimmer()
+], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
+__decorate$g([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
+__decorate$g([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
+__decorate$g([
+  MapToComponentMethod('componentDidLoad')
+], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
+__decorate$g([
+  MapToComponentMethod('watchSource')
+], VegaDropdownChildrenController.prototype, "watchSource", null);
+
+const VegaDropdownRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the dropdown',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the dropdown',
+    /**
+     * The function checks if the length `source` property of the `host` element is not equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length > 0,
+  },
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The `VegaDropdownScrollableController` class in TypeScript manages the behavior of a scrollable dropdown component,
+ * adjusting list container height and scrolling to specific indexes based on render mode and selected source key.
+ */
+class VegaDropdownScrollableController extends VegaSlimmer {
+  /**
+   * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
+   * if the dropdown is shown in a certain render mode.
+   */
+  async watchIsDropdownShow() {
+    if (this.isDropdownShow) {
+      this.adjustListContainerMaxHeight();
+      await this.scrollToSelectedIndex();
+    }
+  }
+  /**
+   * The function scrollToSelected asynchronously scrolls to a selected index based on the render mode.
+   */
+  async scrollToSelectedIndex() {
+    this.renderModeController.isSourceRenderMode()
+      ? await this.scrollToVirtualIndex()
+      : this.scrollToTemplateIndex();
+  }
+  /**
+   * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
+   * on the selected key.
+   */
+  async scrollToVirtualIndex() {
+    const index = this.sourceForRender.findIndex((item) => item.key === this.getSelectedKey());
+    index >= 0 && (await this.listRenderer.getVirtualScrollRef().scrollToIndex(index));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-single-template-e2e}
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-multiple-template-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
+   */
+  scrollToTemplateIndex() {
+    const scrolledKey = this.getSelectedKey();
+    if (scrolledKey) {
+      this.renderer
+        .getDropdownContentBoxRef()
+        .querySelector(`vega-dropdown-item[item-key='${scrolledKey}']`)
+        .scrollIntoView();
+    }
+  }
+  /**
+   * The function `getSelectedKey` returns the selected key based on the `selectType` condition.
+   *
+   * @returns {string} The `getSelectedKey` method returns a string value. If `this.selectType` is equal to
+   * 'multiple', it returns the first element of the `selectedSourceKey` array as a string. Otherwise, it
+   * returns the `selectedSourceKey` value as a string.
+   */
+  getSelectedKey() {
+    return this.selectType === 'multiple'
+      ? this.selectedSourceKey[0]
+      : this.selectedSourceKey;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-with-matchContainerHeight-e2e}
+   * @see{module:vega-dropdown-without-matchContainerHeight-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * we only calculate surplus space of bottom, we should calculate maxHeight more accurately here.
+   * such as minus the gap of dropdown, the dropdown padding top and bottom, the gap of bottom.
+   * if with searchable, we should minus the height of searchable.
+   * if the dropdown in the top of host, we should only minus top of distance from vega-dropdown to vega-dropdown-container.
+   */
+  adjustListContainerMaxHeight() {
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
+    const excludeTop = this.searchable ? 59 : 8;
+    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
+    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
+    dropdownRef.style.maxHeight = 'unset';
+    if (height <= 40) {
+      this.setItemsContainerMaxHeight(40);
+      LogUtility.error("There have no space on the bottom to display dropdown, if you want to adjust position, you should make 'match-container-height' as false.");
+    }
+    else {
+      this.setItemsContainerMaxHeight(height);
+    }
+  }
+  /**
+   * The function `setItemsContainerMaxHeight` adjusts the maximum height of the items container based on
+   * the render mode.
+   *
+   * @param {number} maxHeight - The `maxHeight` parameter is a number that represents the maximum height
+   * in pixels that the items container should have.
+   */
+  setItemsContainerMaxHeight(maxHeight) {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.listRenderer.getVirtualScrollRef().viewportMaxHeight = maxHeight;
+    }
+    else {
+      const templateContainerRef = this.listRenderer.getTemplateContainerRef();
+      templateContainerRef.style.overflowY = 'auto';
+      templateContainerRef.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+}
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectType", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "searchable", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate$f([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Manager remote invocation */
+class VegaDropdownRemoteInvocationController extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.remotePhoneNumberSearchSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownSearchInternalOverridden);
+    this.remotePhoneNumberItemRenderSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownRenderItemInternalOverridden);
+  }
+  /**
+   *  Call the search function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {VegaDropdownSourceItem[]} - searched items.
+   */
+  callRemoteSearch(...args) {
+    if (this.remotePhoneNumberSearchSubject) {
+      const searchResult = remoteInvocationRegistry.call(this.remotePhoneNumberSearchSubject, ...args);
+      if (searchResult)
+        return searchResult;
+    }
+    return null;
+  }
+  /**
+   * Call the item render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote item render function
+   * @returns {HTMLElement} - rendered item
+   */
+  callRemoteItemRender(...args) {
+    if (this.remotePhoneNumberItemRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberItemRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+}
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
+__decorate$e([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", null);
+
+const vegaDropdownCss = ":host{display:inline-block}";
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaDropdownClick = createEvent(this, "vegaDropdownClick", 7);
+    this.dropdownClick = createEvent(this, "dropdownClick", 7);
+    this.vegaShow = createEvent(this, "vegaShow", 7);
+    this.dropdownShow = createEvent(this, "dropdownShow", 7);
+    this.vegaHide = createEvent(this, "vegaHide", 7);
+    this.dropdownHide = createEvent(this, "dropdownHide", 7);
+    this.vegaCreate = createEvent(this, "vegaCreate", 7);
+    this.create = createEvent(this, "create", 7);
+    this.vegaSearch = createEvent(this, "vegaSearch", 7);
+    this.dropdownSearch = createEvent(this, "dropdownSearch", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new TranslationSlimmer();
+    this.renderer = new VegaDropdownRenderer();
+    this.sourceController = new VegaDropdownSourceController();
+    this.searchRenderer = new VegaDropdownSearchRenderer();
+    this.createRenderer = new VegaDropdownCreateRenderer();
+    this.listRenderer = new VegaDropdownListRenderer();
+    this.groupLevelRenderer = new VegaDropdownGroupLevelRenderer();
+    this.itemLevelRenderer = new VegaDropdownItemLevelRenderer();
+    this.keyboardController = new VegaDropdownKeyboardController();
+    this.appenderController = new VegaDropdownAppenderController();
+    this.searchController = new VegaDropdownSearchController();
+    /**
+     * childrenController should be defined before selectedController,
+     *     which can ensure collecting information before verifying it.
+     */
+    this.childrenController = new VegaDropdownChildrenController();
+    this.selectedController = new VegaDropdownSelectedController();
+    this.renderModeController = new VegaDropdownRenderModeController();
+    this.scrollableController = new VegaDropdownScrollableController();
+    this.remoteInvocationController = new VegaDropdownRemoteInvocationController();
+    this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
+    this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
+    this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.itemClickObserver = new ChildNodesNotifyObserverSlimmer(DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
+    this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
+    this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
+    this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownClick);
+    this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
+    this.itemDisplayRuleNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
+    this.searchString = null;
+    this.isDropdownShow = false;
+    /**
+     * Specifies the trigger mode for the dropdown.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.trigger = 'hover';
+    /**
+     * Specifies the position adjustment for the dropdown
+     *    relative to the target element.
+     *
+     * By default, the dropdown is displayed on the left-bottom of the target.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.translocation = {
+      X: 0,
+      Y: 8,
+    };
+    /**
+     * Sets the source array of items for the dropdown,
+     *    where each item must have a `key` and `label` property.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.source = [];
+    /**
+     * Controls the dropdown menu's selection. It accepts three values:
+     *
+     * - `none`:
+     *      After an item is selected, this option not only triggers the `vegaDropdownClick`
+     *      event but also conceals the dropdown menu immediately.
+     * - `single`:
+     *      Upon selection of an item whose key matches the `selectedSourceKey` property,
+     *      this setting both dispatches the `vegaDropdownClick` event and
+     *      hides the dropdown menu.
+     * - `multiple`:
+     *      When an item with a key found in the `selectedSourceKey` array is selected,
+     *      this mode releases the `vegaDropdownClick` event. Unlike the others, however,
+     *      Determines the selection mode for multiple item selection.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.selectType = 'none';
+    /**
+     * Represents the key corresponding to the selected item in the dropdown menu.
+     *    It becomes active only when `selectType` is set to `single` or `multiple`.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
+    /**
+     * Controls whether the prefix icon occupy a position, even if prefix has no value.
+     *
+     * @vegaVersion 1.47.0
+     */
+    this.prefixIconSlot = false;
+    /**
+     * Specifies the maximum height for the dropdown.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.maxHeight = 400;
+    /**
+     * Controls whether the dropdown list can be searched.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.searchable = false;
+    /**
+     * Determines whether the dropdown should have the
+     *    same width as the target element.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.matchTargetWidth = false;
+    /**
+     * Specifies the display rule for items in the dropdown.
+     *
+     * @vegaVersion 1.13.0
+     */
+    this.itemDisplayRule = 'newline';
+    /**
+     * Determines if the dropdown height should be automatically adjusted
+     *    to fit its container height.
+     *
+     * If set to `true`, the dropdown will always be positioned at
+     *    the bottom of the available space.
+     *
+     * @vegaVersion 1.3.0
+     */
+    this.matchContainerHeight = false;
+    /**
+     * Specifies whether the search source list is case-sensitive.
+     *
+     * Note that the default filter rules are fuzzy matching and case-insensitive.
+     *    This parameter only takes effect when `searchable` is set to `true`.
+     *
+     * @vegaVersion 1.4.0
+     */
+    this.caseSensitive = false;
+    /**
+     * Controls whether the dropdown can add a new item when
+     *    no proper item is available. It becomes active only when
+     *    `searchable` is set to `true`.
+     *
+     * @vegaVersion 1.16.0
+     */
+    this.dynamicOption = false;
+    /**
+     * Determines whether to enable source filtering based on input words.
+     *
+     * When set to 'false', the component will emit a `vegaSearch` event
+     *    when input words are provided. In this case, you are responsible for
+     *    managing the source, including adding, deleting, and updating the source.
+     *
+     * Note that the `dynamicOption` property will not work when
+     *    this property is set to `false`.
+     *
+     * @vegaVersion 1.24.0
+     */
+    this.useDefaultFilter = true;
+    /**
+     * Determines whether the dropdown displays a loading status.
+     *
+     * @vegaVersion 1.24.0
+     */
+    this.isLoading = false;
+    /**
+     * Specifies the vertical positioning of the dropdown
+     *    within its container or relative to a reference point.
+     *
+     * @vegaVersion 1.41.0
+     */
+    this.placement = ['bottom', 'top'];
+    /**
+     * Determines the horizontal positioning of the dropdown
+     *    within its container or relative to a reference point.
+     *
+     * @vegaVersion 1.41.0
+     */
+    this.alignment = 'start';
+    /**
+     * Determines whether the dropdown displays a lazy loading status.
+     *
+     * @vegaVersion 2.3.0
+     */
+    this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown search is triggered by input or pressing the Enter key.
+     *
+     * @vegaVersion 2.26.0
+     */
+    this.searchTriggerBy = 'input';
+  }
+  watchIsDropdownShow() {
+  }
+  watchSource() {
+  }
+  watchSelectType() {
+  }
+  watchSelectedSourceKey() {
+  }
+  watchPrefixIconSlot() {
+  }
+  watchItemDisplayRule() {
+  }
+  /**
+   * Invoke this method to programmatically display the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async show() {
+  }
+  /**
+   * Invoke this method to programmatically dismiss the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async hide() {
+  }
+  /**
+   * Invoke this method to set the search input value and
+   *    filter the list of items in the dropdown.
+   *
+   * This method is applicable only when the dropdown is searchable.
+   *
+   * @vegaVersion 1.11.0
+   */
+  async search(input) {
+  }
+  /**
+   * Invoke this method to clear the selected items keys,
+   *    removing any current selection.
+   *
+   * @vegaVersion 1.47.0
+   */
+  async clearSelection() {
+  }
+  /**
+   * Invoke this method to retrieve the selected items keys,
+   *    providing an key or list of the keys representing
+   *    the currently selected items.
+   *
+   * @vegaVersion 1.47.0
+   */
+  async getSelection() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to set the selected items keys,
+   *    specifying an array or list of keys to represent
+   *    the desired selected items.
+   *
+   * @param {string[]} keys - Row keys to be set as selected.
+   * @vegaVersion 1.47.0
+   */
+  async setSelection(keys) {
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "isDropdownShow": ["watchIsDropdownShow"],
+    "source": ["watchSource", "watchItemDisplayRule"],
+    "selectType": ["watchSelectType"],
+    "selectedSourceKey": ["watchSelectedSourceKey"],
+    "prefixIconSlot": ["watchPrefixIconSlot"]
+  }; }
+};
+__decorate$d([
+  InjectVegaGlobalSlimmer()
+], VegaDropdown.prototype, "globalSlimmers", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "translationSlimmer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "renderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "sourceController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "createRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "listRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "groupLevelRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemLevelRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "keyboardController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "appenderController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "childrenController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectedController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "renderModeController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "scrollableController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "remoteInvocationController", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemClickObserver", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "showEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "hideEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "createEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", 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{outline:none}: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$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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdownContentBox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$c([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$c([
+  InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "eventPrevent", void 0);
+__decorate$c([
+  InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaDropdownContentBox.style = vegaDropdownContentBoxCss;
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownGroupRenderer extends VegaSlimmer {
+  render() {
+    return (h("li", { class: "vega-dropdown-group" },
+      this.renderLabel(),
+      this.renderChildren(),
+      this.renderDivide()));
+  }
+  renderLabel() {
+    return this.label && h("div", { class: "vega-dropdown-group-label" }, this.label);
+  }
+  renderChildren() {
+    return (h("ul", { class: "vega-dropdown-group-items" },
+      h("slot", null)));
+  }
+  renderDivide() {
+    return this.divide && h("div", { class: "vega-dropdown-group-divide" });
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownGroupRenderer.prototype, "label", void 0);
+__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$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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDropdownGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownGroupRenderer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Determines whether to include a dividing line at
+     *      the bottom of the dropdown group.
+     *
+     * @vegaVersion 1.47.0
+     */
+    this.divide = true;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$a([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownGroup.prototype, "globalSlimmers", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaDropdownGroup.prototype, "renderer", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaDropdownGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaDropdownGroup.style = vegaDropdownGroupCss;
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDropdownItemRenderer extends VegaSlimmer {
+  render() {
+    return (h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
+        'vega-dropdown-item-selected': this.selected,
+        'vega-dropdown-item-disabled': this.disabled,
+        [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
+        'danger': this.danger && this.selectType === 'none',
+      }, tabIndex: this.disabled ? -1 : 0, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
+        height: `${this.height}px`,
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+      } },
+      this.renderSelectIcon(),
+      this.renderPrefixIcon(),
+      this.renderLabel(),
+      this.renderCounter()));
+  }
+  renderSelectIcon() {
+    return (this.selectType !== 'none' && (h("span", { class: "selected-prefix" },
+      this.selectType === 'single' && this.renderSingleSelectIcon(),
+      this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
+  }
+  renderSingleSelectIcon() {
+    return this.selected && h("vega-icon", { icon: "checkmark", size: "size-16" });
+  }
+  renderMultipleSelectIcon() {
+    return h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+  }
+  renderPrefixIcon() {
+    return ((this.prefixIcon || this.prefixIconSlot) && (h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
+  }
+  renderItemPrefixIcon() {
+    return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
+  }
+  renderLabel() {
+    // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
+    // such as input select selected item display
+    if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
+      return (h("span", { class: "vega-dropdown-item-label" },
+        h("slot", null)));
+    }
+    else {
+      return (h(Fragment, null,
+        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        h("span", { class: "v-hidden" },
+          h("slot", null))));
+    }
+  }
+  renderCounter() {
+    return (this.count > 0 && (h("div", { class: "item-counter" },
+      h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
+  }
+  onSelect(e) {
+    this.vegaDropdownItemClickController.handleClick(e);
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "label", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "count", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIcon", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "prefixIconSlot", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "disabled", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selected", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "selectType", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "height", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "danger", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownItemRenderer.prototype, "vegaDropdownItemClickController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      parent: () => {
+        // we trigger this method in `componentWillLoad`.
+        // if dropdown is template mode, the `vega-dropdown-content-box` have not been rendered, but we can find dropdown directly.
+        // if dropdown is source mode, the `vega-dropdown-content-box` load before dropdown-item load, we can through `vega-dropdown-content-box` to find vega-dropdown
+        const parent = findParent(this.host, 'vega-dropdown');
+        if (parent) {
+          return parent;
+        }
+        else {
+          const appender = findParent(this.host, 'vega-dropdown-content-box');
+          /* istanbul ignore next */
+          // TODO: to add test for throw, since there is not better function to handle `componentWillLoad` in spec/e2e test.
+          if (appender && appender['data-parent-ref']) {
+            return appender['data-parent-ref'];
+          }
+        }
+      },
+      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;
+          },
+        },
+      ],
+      pullStatesWhenReattached: true,
+    });
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selectType", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDropdownItemStateController.prototype, "itemKey", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "selected", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "prefixIconSlot", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDropdownItemStateController.prototype, "itemDisplayRule", void 0);
+
+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;
+};
+/**
+ * Controller for the vega dropdown item states
+ */
+class VegaDropdownItemClickController extends VegaSlimmer {
+  /**
+   * The handleClick function emits an event with the itemKey and notifies the ChangeManager with the
+   * dropdown item click event and the itemKey.
+   *
+   * @param {MouseEvent} e - MouseEvent - The event object that contains information about the mouse
+   * click event.
+   */
+  handleClick(e) {
+    this.clickEventEmitter.emit({ itemKey: this.itemKey }, e);
+    ChangeManager.notify(DROPDOWN_ITEM_CLICK, { host: this.host, detail: { itemKey: this.itemKey } });
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "itemKey", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "vegaClick", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
+
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:20px;padding-right:20px;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,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 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-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$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;
+};
+const VegaDropdownItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownItemRenderer();
+    this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
+    this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
+    this.dropdownItemEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
+    this.clickEventEmitter = createEventEmitSlimmer(VegaDropdownItem, VegaClick);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * 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.
+     *
+     * @vegaVersion 1.47.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether the dropdown item represents a danger action.
+     * 	  It highlights actions that may have critical consequences
+     * 	     when the select type is set to none.
+     *
+     * @vegaVersion 2.25.0
+     */
+    this.danger = false;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$6([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownItem.prototype, "globalSlimmers", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "renderer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemStateController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaDropdownItemClickController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "dropdownItemEventPrevent", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "clickEventEmitter", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaDropdownItem.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaDropdownItem.style = vegaDropdownItemCss;
+
+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;
+};
+/**
+ * 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;
+    this.viewportItemsCount = 0;
+  }
+  /**
+   * 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();
+    }
+  }
+  /**
+   * The function `watchApproxItemHeight` initializes virtual scrolling.
+   */
+  watchApproxItemHeight() {
+    this.initVirtualScroll();
+  }
+  /**
+   * The function `watchViewportMaxHeight` initializes virtual scrolling.
+   */
+  watchViewportMaxHeight() {
+    this.initVirtualScroll();
+  }
+  /**
+   * 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();
+  }
+  /**
+   * 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.renderer.getContainerRef().scrollTop = this.scrollTop;
+  }
+  /**
+   * The function `watchScrollTop` in TypeScript calls the `handleScroll` method.
+   */
+  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.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("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()));
+  }
+  renderNormal() {
+    return (h(Fragment, null,
+      this.source.map((item, index) => {
+        return this.renderItem(item, index);
+      }),
+      this.loadingRenderer.render()));
+  }
+  renderVirtualScroll() {
+    return (h("div", { style: {
+        height: `${this.source.length * this.approxItemHeight}px`,
+        position: 'relative',
+      } },
+      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())));
+  }
+}
+__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';
+  }
+  /**
+   * The componentWillLoad function is used to initialize mode.
+   */
+  componentWillLoad() {
+    this.setMode();
+  }
+  /**
+   * 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
+   *
+   * @returns {VirtualScrollMode} - mode
+   */
+  getMode() {
+    return this.mode;
+  }
+  /**
+   * 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();
+    }
+  }
+}
+__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.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.scrollTop = 0;
+    /** The all items of source *
+     * @vegaVersion 1.13.0
+     */
+    this.source = [];
+    /** The approximate height of each item *
+     * @vegaVersion 1.13.0
+     */
+    this.approxItemHeight = 40;
+    /** The max height of viewport *
+     * @vegaVersion 1.13.0
+     */
+    this.viewportMaxHeight = 320;
+    /**
+     * Determines whether the dropdown displays a loading status.
+     *
+     * @vegaVersion 2.3.0
+     */
+    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
+     *
+     * @vegaVersion 2.3.0
+     */
+    this.virtualizationThreshold = 60;
+    /** We set this key to check the source is really change and should refresh virtual scroll *
+     * @vegaVersion 1.26.0
+     */
+    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.
+   *
+   * @vegaVersion 1.13.0
+   */
+  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": ["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);
+__decorate([
+  InjectVegaSlimmer()
+], VegaVirtualScroll.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", 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 };