@heartlandone/vega 1.51.0 → 2.0.0-preview-2

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-children-controller.js

@@ -17,7 +17,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
      * The `syncUpDropdownCurrentDataBySlot` method is responsible for
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
-    this.collectKeyAndLabelFromSlot = () => {
+    this.syncUpDropdownCurrentDataBySlot = () => {
       const container = this.renderer.getDropdownRef() || this.host;
       Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
         item.label && this.labelSet.add(item.label);
@@ -75,30 +75,23 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
   syncUpDropdownCurrentData() {
     this.clearDropdownCurrentData();
     if (this.renderModeController.isSourceRenderMode()) {
-      this.collectKeyAndLabelFromSource(this.source);
+      this.syncUpDropdownCurrentDataBySource();
     }
     else {
-      this.collectKeyAndLabelFromSlot();
+      this.syncUpDropdownCurrentDataBySlot();
     }
   }
   /**
-   * 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
+   * The function syncs up the current data in a dropdown based on the source data, by adding labels and
+   * keys to respective sets.
    */
-  collectKeyAndLabelFromSource(items) {
-    items.forEach((item) => {
-      if (item['children']) {
-        this.collectKeyAndLabelFromSource(item['children']);
-      }
-      else {
+  syncUpDropdownCurrentDataBySource() {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.source.forEach((item) => {
         this.labelSet.add(item.label);
         this.keySet.add(item.key);
-      }
-    });
+      });
+    }
   }
   /* istanbul ignore next */
   /**

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-keyboard-conttroller.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboardManagerSlimmer';
 import { MapToComponentField } from 'vega-slimmer/core';
-import { findParent } from '../../../../utils/ui';
 /**
  * The `VegaDropdownKeyboardController` class is responsible for managing keyboard events
  * for a dropdown component.
@@ -61,45 +60,10 @@ export class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
      * @param {string} code - current keyboard code.
      */
     this.controlDirectionByKeyboard = (code) => {
-      const dropdownRef = this.renderer.getDropdownRef();
-      const items = Array.from(dropdownRef.querySelectorAll('vega-dropdown-item'));
-      const currentItem = findParent(document.activeElement, 'vega-dropdown-item');
-      if (currentItem) {
-        const index = items.findIndex((item) => item === currentItem);
-        const nextItem = this.findNextCallFocusItem(items, index, code);
-        if (nextItem) {
-          nextItem.querySelector('li').focus();
-        }
-      }
-      else {
-        items[0].querySelector('li').focus({ preventScroll: true });
-      }
+      var _a;
+      (_a = this.renderer.getNextActiveItem(code)) === null || _a === void 0 ? void 0 : _a.shadowRoot.querySelector('li').focus();
     };
   }
-  /* istanbul ignore next */
-  /**
-   * The function `findNextCallFocusItem` finds the next enabled item in a dropdown menu based on the
-   * current index and the direction of navigation. @see{module:vega-dropdown-keyboard-control-e2e}
-   *
-   * @param {HTMLElement[]} items - An array of HTMLVegaDropdownItemElement objects
-   * representing the dropdown items.
-   * @param {number} currentIndex - The current index of the item in the `items` array that is currently
-   * focused.
-   * @param {string} code - The `code` parameter represents the key code of the keyboard event that
-   * triggered the function. It is used to determine whether the user pressed the "ArrowDown" or
-   * "ArrowUp" key.
-   * @returns {Nullable<HTMLElement>} a nullable HTMLVegaDropdownItemElement.
-   */
-  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([
   MapToComponentField()

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-selected-controller.js

@@ -6,9 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { deleteItemsFromArray, isArrayEqual } from '../../../../utils/array';
-import { Observer } from '../../../../helpers/observer/observer';
-import ChangeManager from '../../../../helpers/observer/changeManager';
-import { DROPDOWN_ITEM_CLICK } from '../../../../helpers/observer/subject';
 import { findParent } from '../../../../utils/ui';
 import { LogUtility } from '../../../../utils/log';
 /**
@@ -16,18 +13,6 @@ import { LogUtility } from '../../../../utils/log';
  * either adding them to an array or setting them as the only selected item.
  */
 export class VegaDropdownSelectedController extends VegaSlimmer {
-  /**
-   * Component lifecycle - connectedCallback
-   */
-  connectedCallback() {
-    this.initItemSelectionObserver();
-  }
-  /**
-   * Component lifecycle - disconnectedCallback
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * Component lifecycle - componentWillLoad
    */
@@ -87,15 +72,6 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
   watchSource() {
     this.checkSelectedSourceKey(this.selectedSourceKey);
   }
-  /**
-   * The function initializes a row click observer that handles row selection in a table.
-   */
-  initItemSelectionObserver() {
-    this.itemSelectionObserver = new Observer(this.isAcceptableItemSelectionObserver.bind(this), (payload) => {
-      this.select(payload.itemKey);
-    });
-    ChangeManager.register(DROPDOWN_ITEM_CLICK, this.itemSelectionObserver);
-  }
   /**
    * The function checks if the input is an acceptable item selection observer.
    *
@@ -104,26 +80,11 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
    */
   isAcceptableItemSelectionObserver(input) {
     if (input['host']['tagName'] === 'VEGA-DROPDOWN-ITEM') {
-      return this.host === this.getDropdownByItem(input['host']);
+      return this.isCurrentDropdown(input['host']);
     }
     /* istanbul ignore next */
     return false;
   }
-  /**
-   * The function `getDropdownByItem` returns the dropdown element associated with a given item element.
-   *
-   * @param {HTMLElement} item - The `item` parameter is an HTMLElement representing the item that was
-   * clicked or selected in the dropdown menu.
-   * @returns {Nullable<HTMLElement>} an HTMLElement or null.
-   */
-  getDropdownByItem(item) {
-    const appender = findParent(item, '.vega-dropdown');
-    if (appender && appender.dataset['parentId']) {
-      return document.querySelector(`[data-id='${appender.dataset['parentId']}']`);
-    }
-    /* istanbul ignore next */
-    return null;
-  }
   /**
    * The select function handles the selection of a key, either adding it to the selectedSourceKey array
    * or setting it as the only selected key.
@@ -140,18 +101,27 @@ export class VegaDropdownSelectedController extends VegaSlimmer {
       else {
         this.selectedSourceKey = [...this.selectedSourceKey, key];
       }
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else if (this.selectType === 'single') {
       this.selectedSourceKey = key;
       this.appenderController.hide();
-      this.vegaClick.emit(this.selectedSourceKey);
     }
     else {
       this.appenderController.hide();
-      this.vegaClick.emit(key);
     }
-    this.vegaDropdownClick.emit(key);
+    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
@@ -215,9 +185,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownSelectedController.prototype, "vegaClick", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
@@ -231,11 +198,8 @@ __decorate([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
 __decorate([
-  MapToComponentMethod('connectedCallback')
-], VegaDropdownSelectedController.prototype, "connectedCallback", null);
-__decorate([
-  MapToComponentMethod('disconnectedCallback')
-], VegaDropdownSelectedController.prototype, "disconnectedCallback", null);
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-source-controller.js

@@ -27,22 +27,15 @@ export class VegaDropdownSourceController extends VegaSlimmer {
    * The function sets the source for rendering by searching for a formatted source.
    */
   setRenderSource() {
-    this.sourceForRender = this.searchController.search(this.formattedSource);
+    this.sourceForRender = this.searchController.search(this.source);
   }
   /**
    * The function "handleSource" performs validation, formatting, and rendering of a source.
    */
   handleSource() {
     this.validSource();
-    this.formatSource();
     this.setRenderSource();
   }
-  /**
-   * The function "formatSource" formats the source code using a formatSourceController.
-   */
-  formatSource() {
-    this.formattedSource = this.formatSourceController.format();
-  }
   /**
    * The function "validSource" checks if the "source" variable is an array of "VegaDropdownSourceItem"
    * type, and if not, assigns an empty array to it.
@@ -62,9 +55,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownSourceController.prototype, "formatSourceController", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-create-renderer.js

@@ -11,7 +11,7 @@ export class VegaDropdownCreateRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.onItemAdd = () => {
-      this.vegaCreate.emit(this.searchString);
+      this.createEventEmitter.emit(this.searchString);
       this.appenderController.hide();
     };
   }
@@ -36,9 +36,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownCreateRenderer.prototype, "vegaCreate", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
@@ -48,3 +45,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-item-level-renderer.js

@@ -8,9 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaDropdownItemLevelRenderer extends VegaSlimmer {
   render(item, fixHeight) {
-    return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon || item.prefix, 
-      /* eslint-disable-next-line react/jsx-no-bind */
-      onVegaClick: (e) => e.stopPropagation() })));
+    return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
 __decorate([

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-list-renderer.js

@@ -41,7 +41,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
         'vega-dropdown-loading': true,
         'v-hidden': !this.isLoading,
       } },
-      h("vega-flex", { useNativeFlex: true, gap: "size-8", direction: "row" },
+      h("vega-flex", { gap: "size-8", direction: "row" },
         h("vega-loading-indicator", { size: "small" }),
         h("span", null, "Loading"))));
   }
@@ -50,9 +50,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-dropdown-empty-list" }, this.searchString ? 'No results found' : 'No options'));
     }
     else {
-      return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
-          [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
-        } },
+      return (h("ul", { role: "menu", "aria-label": "dropdown-ul" },
         h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
           renderItem: (item, index, fixHeight) => {
@@ -82,7 +80,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
    */
   /* istanbul ignore next */
   adjustListContainerMaxHeight() {
-    const dropdownRef = this.renderer.getDropdownRef();
+    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;

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-renderer.js

@@ -6,38 +6,108 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h, Fragment } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { findParent } from '../../../../utils/ui';
+import { getActiveElement } from '../../../../utils/component';
 export class VegaDropdownRenderer extends VegaSlimmer {
-  setVirtualContainer() {
-    this.virtualContainerRef = this.dropdownRef.querySelector('.vega-dropdown-container');
+  componentDidRender() {
+    this.setVirtualContainer();
+    this.appendItemsToContentBox();
+    this.appendDropdownToContentBox();
   }
   getDropdownRef() {
     return this.dropdownRef;
   }
+  getDropdownContentBoxRef() {
+    return this.dropdownContentBoxRef;
+  }
   getVirtualContainerRef() {
     return this.virtualContainerRef;
   }
-  render(dropdownId) {
+  /* 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(dropdownId)));
+      this.renderDropdown()));
   }
   renderContentSlot() {
     return this.renderModeController.isSourceRenderMode() ? h("slot", null) : h("slot", { name: "dropdown-content" });
   }
-  renderDropdown(dropdownId) {
-    return (h("div", { "data-parent-id": dropdownId, ref: (e) => (this.dropdownRef = e), class: {
-        'vega-dropdown': true,
-        'vega-dropdown-with-searchable': this.searchable,
-      }, style: { maxHeight: `${this.maxHeight}px` } },
-      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()))));
+  renderDropdown() {
+    return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host },
+      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([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
@@ -58,4 +128,4 @@ __decorate([
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
-], VegaDropdownRenderer.prototype, "setVirtualContainer", null);
+], VegaDropdownRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-search-renderer.js

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange } from '../../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaDropdownSearchRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -14,37 +16,41 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
       if (this.searchInputRef)
         this.searchInputRef.value = '';
     };
-    this.onInputSearch = (e) => {
-      this.search(e.detail);
+    this.onInputSearch = (node) => {
+      this.searchInputRef = node;
+      DomNodeSubjectObserverFactory.addObserverToNode(node, VegaChange, (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() {
-    var _a;
-    (_a = this.searchInputRef) === null || _a === void 0 ? void 0 : _a.querySelector('input').focus();
+    if (this.searchInputRef) {
+      this.searchInputRef.shadowRoot.querySelector('input').focus();
+    }
   }
   render() {
     const canRender = this.searchable &&
       (this.renderModeController.isSourceRenderMode() ? this.source.length > 0 : true);
     return (canRender && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, onVegaChange: this.onInputSearch, ref: (e) => (this.searchInputRef = e) }))));
-  }
-  search(input) {
-    this.searchString = input;
-    if (this.renderModeController.isSourceRenderMode()) {
-      if (this.useDefaultFilter) {
-        this.sourceController.setRenderSource();
-        this.focus();
-      }
-      else if (this.isDropdownShow) {
-        this.vegaSearch.emit(input);
-      }
-    }
-    else {
-      this.vegaSearch.emit(input);
-    }
+      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
   }
 }
 __decorate([
@@ -61,7 +67,7 @@ __decorate([
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
 __decorate([
   MapToComponentField()
-], VegaDropdownSearchRenderer.prototype, "vegaSearch", void 0);
+], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);

package/dist/collection/components/vega-dropdown/test/share.js

@@ -0,0 +1,13 @@
+/**
+ * The function `typeDropdownSearch` is a TypeScript function that takes a web page and a value as
+ * input and types the value into a dropdown search input field.
+ *
+ * @param {E2EPage} page - The `page` parameter is an instance of the E2EPage class. It represents a
+ * browser page and provides methods to interact with the page's DOM and perform actions like clicking,
+ * typing, etc.
+ * @param {string} value - The `value` parameter is the string value that you want to type into the
+ * input field.
+ */
+export const typeDropdownSearch = async (page, value) => {
+  await (await page.evaluateHandle(`document.querySelector('vega-dropdown-content-box').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value);
+};