@heartlandone/vega 2.72.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-dropdown.entry.js

@@ -0,0 +1,2136 @@
+import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, m as methodPlaceholder, L as LogUtility, a as InjectVegaSlimmer, d as slotPlaceholder, e as InjectVegaGlobalSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { f as findParent, j as extractNumberFromString } from './ui-5f775fd9.js';
+import { ad as isArrayOfType, ae as isDropdownSourceItemType } from './type-guard-09acedc9.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { h as VegaChange, t as VegaDropdownShow, u as VegaDropdownHide, V as VegaDropdownClick, e as VegaReset, o as VegaCreate, v as VegaDropdownSearch, w as VegaSearchTrigger } from './vega-event-id-61c8bd9f.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-a7b44d74.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-16a5ed3a.js';
+import { i as isArrayEqual } from './array-a1d98264.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-2c2e1a57.js';
+import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-7065c745.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { r as VegaInternalDropdownTemplateItemsChange, w as VegaDropdownSearchInternalOverridden, x as VegaDropdownRenderItemInternalOverridden } from './vega-internal-event-id-b65a01a3.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-06d0f833.js';
+import { S as SHADOW_ROOT_ELEMENT_SCROLLING, g as DROPDOWN_ITEM_CLICK } from './static-subject-title-6fdf8c8b.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-4219120b.js';
+import './index-9fdb7060.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './observer-3959f9dd.js';
+import './keyboard-manager-3c463777.js';
+import './internal-vega-z-index-manager-f0ca0975.js';
+import './number-4398f2e1.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './try-get-document-bef0f526.js';
+import './responsive-format-facade-d4abfdb9.js';
+import './pixel-f32c07ce.js';
+import './public-api-a77a0b33.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-event-manager-826279b7.js';
+import './feature-flag-controller-24b9f956.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+import './dark-mode-style-controller-e2a2f76c.js';
+import './vega-nonce-manager-497e5eb5.js';
+import './internal-icon-manager-9279071a.js';
+import './valid-credit-card-number-rule-04b032a6.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './index-b04c1ee0.js';
+import './content-state-fc9d98e0.js';
+import './code-block-b5f8fc8a.js';
+import './string-a953eafc.js';
+import './object-66c37948.js';
+import './dto-renderer-manager-12bc9121.js';
+import './base-renderer-101f6d04.js';
+import './column-operation-a1620c67.js';
+import './timer-9321173b.js';
+import './styles.constants-b320e4a7.js';
+import './range-429fb0e2.js';
+
+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;
+};
+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" },
+        h("div", { class: "vega-dropdown-actions" },
+          this.resetRenderer.render(),
+          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$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "host", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "maxHeight", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "searchable", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "createRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "listRenderer", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "renderModeController", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
+__decorate$g([
+  MapToComponentMethod('componentDidRender')
+], VegaDropdownRenderer.prototype, "componentDidRender", null);
+
+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 `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$f([
+  MapToComponentField({ writable: true })
+], VegaDropdownSourceController.prototype, "source", void 0);
+__decorate$f([
+  MapToComponentField({ writable: true })
+], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownSourceController.prototype, "searchController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDropdownSourceController.prototype, "renderModeController", void 0);
+__decorate$f([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownSourceController.prototype, "componentWillLoad", null);
+__decorate$f([
+  MapToComponentMethod('watchSource')
+], VegaDropdownSourceController.prototype, "watchSource", 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;
+};
+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$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
+
+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;
+};
+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.isLoading || this.sourceForRender.length > 0,
+        } }, this.searchString
+        ? this.translationSlimmer.t(this.searchNoResultsText)
+        : this.translationSlimmer.t('No options')),
+      h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+          'v-hidden': this.isLoading || 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, virtualizationThreshold: this.virtualizationThreshold }))));
+  }
+  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), onScroll: this.scrollableController.onScroll },
+      h("slot", { name: "items" })));
+  }
+}
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "host", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isLoading", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "searchString", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "searchNoResultsText", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "scrollableController", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);
+__decorate$d([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "virtualizationThreshold", void 0);
+
+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;
+};
+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$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "host", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "caseSensitive", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "searchString", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);
+
+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 VegaDropdownSearchRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.clear = () => {
+      this.searchString = null;
+      if (this.searchInputRef)
+        this.searchInputRef.value = '';
+    };
+    this.onInputSearch = (node) => {
+      if (node) {
+        this.searchInputRef = node;
+      }
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
+        this.search(input.detail, 'input');
+      });
+    };
+    this.search = (input, searchTrigger) => {
+      if (this.searchTriggerBy && this.searchTriggerBy !== searchTrigger) {
+        return;
+      }
+      this.searchString = input;
+      if (this.renderModeController.isSourceRenderMode()) {
+        if (this.useDefaultFilter) {
+          this.sourceController.setRenderSource();
+          this.focus();
+        }
+        else if (this.isDropdownShow) {
+          this.searchEventEmitter.emit(input);
+          this.searchTriggerEventEmitter.emit({
+            trigger: searchTrigger,
+            value: input,
+          });
+        }
+      }
+      else {
+        this.searchEventEmitter.emit(input);
+        this.searchTriggerEventEmitter.emit({
+          trigger: searchTrigger,
+          value: input,
+        });
+      }
+    };
+  }
+  userSearch(input) {
+    this.search(input, 'input');
+  }
+  focus() {
+    if (this.searchInputRef) {
+      this.searchInputRef.shadowRoot.querySelector('input').focus();
+    }
+  }
+  render() {
+    return (this.searchable && (h(Fragment, null,
+      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 (e.code === 'Enter') {
+              this.search(this.searchInputRef.value, 'enter');
+            }
+          } })),
+      h("vega-divider", { margin: { y: 'size-4' } }))));
+  }
+}
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
+__decorate$b([
+  MapToComponentField({ writable: true })
+], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "source", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerEventEmitter", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
+__decorate$b([
+  MapToComponentMethod('search')
+], VegaDropdownSearchRenderer.prototype, "userSearch", null);
+
+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;
+};
+/**
+ * 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$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "host", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "trigger", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "renderer", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
+
+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;
+};
+/**
+ * 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(() => this.generateShowConfigFactory(), () => this.trigger);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    methodPlaceholder();
+  }
+  /**
+   * 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();
+    }
+  }
+  /**
+   * Generate the show configuration for the dropdown.
+   *
+   * @returns {ElementAppenderShowConfig} The show configuration for the dropdown.
+   */
+  generateShowConfigFactory() {
+    return {
+      target: this.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,
+      isScreenPosition: this.isScreenPosition,
+    };
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "trigger", void 0);
+__decorate$9([
+  MapToComponentField({ writable: true })
+], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "size", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "minWidth", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "translocation", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "placement", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "alignment", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "renderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate$9([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownAppenderController.prototype, "connectedCallback", null);
+__decorate$9([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
+__decorate$9([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
+__decorate$9([
+  MapToComponentMethod('show')
+], VegaDropdownAppenderController.prototype, "userShow", null);
+__decorate$9([
+  MapToComponentMethod('hide')
+], VegaDropdownAppenderController.prototype, "userHide", null);
+
+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;
+};
+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$8([
+  MapToComponentField()
+], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", 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;
+};
+/**
+ * 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$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "searchString", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "useDefaultFilter", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "searchable", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);
+
+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;
+};
+/**
+ * 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[] | 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 reset action.
+   */
+  reset() {
+    this.selectedSourceKey = this.selectType === 'multiple' ? [] : '';
+    if (this.selectType !== 'multiple') {
+      this.appenderController.hide();
+    }
+    this.resetEventEmitter.emit();
+  }
+  /**
+   * The function checks if the given item belongs to the current dropdown.
+   * There have two cases:
+   *   <vega-dropdown trigger="click">
+   *      <div slot="items">
+   *          // Case 1:
+   *          // This item is in current vega-dropdown-content-box
+   *	        <vega-dropdown-item label="Item 1" item-key="item1"></vega-dropdown-item>
+   *          <vega-dropdown trigger="click">
+   *              // Case 2:
+   *              // This item is in current vega-dropdown-content-box, but it also in nest dropdown content slot
+   *              // and not the realy item of parent dropdown, So we should have filter it out.
+   *              <vega-dropdown-item label="Item 2" item-key="item2"></vega-dropdown-item>
+   *              <div slot="items">
+   *                 ...
+   *              </div>
+   *          </vega-dropdown>
+   *      </div>
+   *  <vega-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');
+    const isNestTriggerItem = item.parentElement.tagName === 'VEGA-DROPDOWN' || !!findParent(item, 'vega-dropdown');
+    return this.host === appender['data-parent-ref'] && !isNestTriggerItem;
+  }
+  /**
+   * 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() && !this.preserveValueIfNotInSource) {
+      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$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "selectType", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "source", void 0);
+__decorate$6([
+  MapToComponentField({ writable: true })
+], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "preserveValueIfNotInSource", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "appenderController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "childrenController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "resetEventEmitter", void 0);
+__decorate$6([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
+__decorate$6([
+  MapToComponentMethod('clearSelection')
+], VegaDropdownSelectedController.prototype, "clearSelection", null);
+__decorate$6([
+  MapToComponentMethod('getSelection')
+], VegaDropdownSelectedController.prototype, "getSelection", null);
+__decorate$6([
+  MapToComponentMethod('setSelection')
+], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
+__decorate$6([
+  MapToComponentMethod('watchSelectType')
+], VegaDropdownSelectedController.prototype, "watchSelectType", null);
+__decorate$6([
+  MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
+__decorate$6([
+  MapToComponentMethod('watchSource')
+], VegaDropdownSelectedController.prototype, "watchSource", null);
+
+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 `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$5([
+  MapToComponentField()
+], VegaDropdownRenderModeController.prototype, "host", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDropdownRenderModeController.prototype, "renderer", void 0);
+__decorate$5([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRenderModeController.prototype, "connectedCallback", 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 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() {
+    methodPlaceholder();
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    this.syncUpDropdownCurrentData();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    methodPlaceholder();
+  }
+  /**
+   * 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$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "source", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "sourceController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "renderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDropdownChildrenController.prototype, "selectedController", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
+__decorate$4([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
+__decorate$4([
+  MapToComponentMethod('componentWillLoad')
+], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
+__decorate$4([
+  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$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;
+};
+/**
+ * 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 {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-dropdown-shadow-root-scroll-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * Listen scrolling of dropdown content
+     */
+    this.onScroll = () => {
+      !this.renderModeController.isSourceRenderMode() &&
+        ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.renderer.getDropdownContentBoxRef(),
+        });
+    };
+  }
+  /**
+   * 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();
+    }
+  }
+  /**
+   * While resettable, we should listen selected key to decide adjust max height of list container.
+   *
+   * @param {string[] | string} newValue - new value.
+   * @param {string[] | string} oldValue - old value.
+   */
+  watchSelectedSourceKey(newValue, oldValue) {
+    if (this.resettable &&
+      ((newValue && newValue.length > 0 && (!oldValue || oldValue.length === 0)) ||
+        ((!newValue || newValue.length === 0) && oldValue && oldValue.length > 0))) {
+      this.adjustListContainerMaxHeight();
+    }
+  }
+  /**
+   * 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) {
+      const dropdownContent = this.renderer.getDropdownContentBoxRef();
+      const selectedItem = dropdownContent.querySelector(`vega-dropdown-item[item-key='${scrolledKey}']`);
+      if (selectedItem) {
+        const ul = dropdownContent.shadowRoot.querySelector('ul');
+        const ulRect = ul.getBoundingClientRect();
+        const itemRect = selectedItem.getBoundingClientRect();
+        ul.scrollTop = itemRect.top - ulRect.top + ul.scrollTop;
+      }
+    }
+  }
+  /**
+   * 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();
+    if (!dropdownRef)
+      return;
+    const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
+    const searchActionContentHeight = this.searchable
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const resetActionContentHeight = this.resettable && this.selectedSourceKey.length > 0
+      ? VegaDropdownScrollableController.actionButtonContentHeight
+      : 0;
+    const layoutSpaceSpace = dropdownRef.classList.contains('vega-placement-top')
+      ? 0
+      : VegaDropdownScrollableController.dropdownLayoutSpaceHeight;
+    const height = dropdownMaxHeight - searchActionContentHeight - layoutSpaceSpace - resetActionContentHeight;
+    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`;
+    }
+  }
+}
+VegaDropdownScrollableController.actionButtonContentHeight = 49; // actionHeight(40) + dividerHeight(paddingY + dividerHeight = 9);
+VegaDropdownScrollableController.dropdownLayoutSpaceHeight = 10; // paddingY + borderY;
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectType", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "searchable", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "resettable", void 0);
+__decorate$3([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+__decorate$3([
+  MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownScrollableController.prototype, "watchSelectedSourceKey", null);
+
+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;
+};
+/** 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 {Nullable<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 {Nullable<HTMLVegaDropdownItemElement>} - rendered item
+   */
+  callRemoteItemRender(...args) {
+    if (this.remotePhoneNumberItemRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberItemRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", 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;
+};
+class VegaDropdownResetRenderer extends VegaSlimmer {
+  render() {
+    return (this.resettable &&
+      this.selectedSourceKey.length > 0 && (h(Fragment, null,
+      h("vega-font", { variant: "font-field-value", color: "text-link", class: "vega-dropdown-reset", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onClick: () => this.selectedController.reset(), tabIndex: 0, role: "button", "aria-label": "Reset", onKeyDown: createEnterKeyHandlerToTriggerClick() }, this.translationSlimmer.t('Reset Selection')),
+      h("vega-divider", { margin: { y: 'size-4' } }))));
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "resettable", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedController", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedSourceKey", void 0);
+
+const vegaDropdownCss = ":host{display:inline-block}";
+
+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 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.vegaReset = createEvent(this, "vegaReset", 7);
+    this.reset = createEvent(this, "reset", 7);
+    this.vegaSearchTrigger = createEvent(this, "vegaSearchTrigger", 7);
+    this.searchTrigger = createEvent(this, "searchTrigger", 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.resetRenderer = new VegaDropdownResetRenderer();
+    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.resetEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaReset);
+    this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
+    this.searchTriggerEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaSearchTrigger);
+    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.
+     *
+     * @VegaWarning Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value.
+     * @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`.
+     *
+     * @VegaWarning Set `preserveValueIfNotInSource` to 'true' to get custom filter fully supported when 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 position is calculated relative to the screen.
+     *
+     * @VegaWarning - It will overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     * 			    - Currently, when set to true, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     * @vegaVersion 2.36.0
+     */
+    this.isScreenPosition = false;
+    /**
+     * Specifies whether the selected option in the dropdown can be cleared.
+     *    It allows users to reset the selectedSourceKey when a selection has already been made.
+     *
+     * @vegaVersion 2.46.0
+     */
+    this.resettable = 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
+     * If the value is 0, it means we will disable the virtualization all the time.
+     *
+     * @vegaVersion 2.54.0
+     */
+    this.virtualizationThreshold = 60;
+    /**
+     * Controls whether the value of selectedSourceKey is preserved when it does not exist in the source.
+     *
+     * @vegaVersion 2.69.0
+     */
+    this.preserveValueIfNotInSource = false;
+    /**
+     * Specifies the no search results text for the dropdown.
+     *
+     * @vegaVersion 2.74.0-RTE-table-preview
+     */
+    this.searchNoResultsText = 'No results found';
+  }
+  watchIsDropdownShow() {
+    methodPlaceholder();
+  }
+  watchSource() {
+    methodPlaceholder();
+  }
+  watchSelectType() {
+    methodPlaceholder();
+  }
+  watchSelectedSourceKey() {
+    methodPlaceholder();
+  }
+  watchPrefixIconSlot() {
+    methodPlaceholder();
+  }
+  watchItemDisplayRule() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to programmatically display the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async show() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to programmatically dismiss the dropdown menu.
+   *
+   * @vegaVersion 1.3.0
+   */
+  async hide() {
+    methodPlaceholder();
+  }
+  /**
+   * 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) {
+    methodPlaceholder(input);
+  }
+  /**
+   * Invoke this method to clear the selected items keys,
+   *    removing any current selection.
+   *
+   * @vegaVersion 1.47.0
+   */
+  async clearSelection() {
+    methodPlaceholder();
+  }
+  /**
+   * 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) {
+    methodPlaceholder(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"],
+    "selectType": ["watchSelectType"],
+    "selectedSourceKey": ["watchSelectedSourceKey"],
+    "prefixIconSlot": ["watchPrefixIconSlot"],
+    "itemDisplayRule": ["watchItemDisplayRule"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDropdown.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "sourceController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "createRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "listRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "groupLevelRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemLevelRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "keyboardController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "appenderController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "childrenController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectedController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "renderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "scrollableController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "remoteInvocationController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "selectedSourceKeyNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "prefixIconSlotNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemClickObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "showEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "hideEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "createEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchTriggerEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaDropdown.style = vegaDropdownCss;
+
+export { VegaDropdown as vega_dropdown };