@heartlandone/vega-sandbox-pr-1475-b1e358890f4e71c36ade3ba715f51e7030022002 2.26.0

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

@@ -0,0 +1,1276 @@
+var __decorate = (this && this.__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;
+};
+import { Component, Host, h, Element, Prop, Event, State, Method, Watch } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
+import { VegaDropdownRenderer } from './slimmers/renderers/vega-dropdown-renderer';
+import { VegaDropdownSourceController } from './slimmers/controllers/vega-dropdown-source-controller';
+import { VegaDropdownCreateRenderer } from './slimmers/renderers/vega-dropdown-create-renderer';
+import { VegaDropdownListRenderer } from './slimmers/renderers/vega-dropdown-list-renderer';
+import { VegaDropdownItemLevelRenderer } from './slimmers/renderers/vega-dropdown-item-level-renderer';
+import { VegaDropdownSearchRenderer } from './slimmers/renderers/vega-dropdown-search-renderer';
+import { VegaDropdownKeyboardController } from './slimmers/controllers/vega-dropdown-keyboard-conttroller';
+import { VegaDropdownAppenderController } from './slimmers/controllers/vega-dropdown-appender-controller';
+import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdown-group-level-renderer';
+import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller';
+import { VegaDropdownSelectedController } from './slimmers/controllers/vega-dropdown-selected-controller';
+import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dropdown-render-mode-controller';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
+import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaDropdownRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-dropdown/runtime-metrics-payload-definition';
+import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller';
+import { VegaDropdownRemoteInvocationController } from './slimmers/controllers/vega-dropdown-remote-invocation-controller';
+/**
+ * @version 1.3.0
+ */
+export class VegaDropdown {
+  constructor() {
+    this.globalSlimmers = {};
+    this.renderer = new VegaDropdownRenderer();
+    this.sourceController = new VegaDropdownSourceController();
+    this.searchRenderer = new VegaDropdownSearchRenderer();
+    this.createRenderer = new VegaDropdownCreateRenderer();
+    this.listRenderer = new VegaDropdownListRenderer();
+    this.groupLevelRenderer = new VegaDropdownGroupLevelRenderer();
+    this.itemLevelRenderer = new VegaDropdownItemLevelRenderer();
+    this.keyboardController = new VegaDropdownKeyboardController();
+    this.appenderController = new VegaDropdownAppenderController();
+    this.searchController = new VegaDropdownSearchController();
+    /**
+     * childrenController should be defined before selectedController,
+     *     which can ensure collecting information before verifying it.
+     */
+    this.childrenController = new VegaDropdownChildrenController();
+    this.selectedController = new VegaDropdownSelectedController();
+    this.renderModeController = new VegaDropdownRenderModeController();
+    this.scrollableController = new VegaDropdownScrollableController();
+    this.remoteInvocationController = new VegaDropdownRemoteInvocationController();
+    this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
+    this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
+    this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
+    this.itemClickObserver = new ChildNodesNotifyObserverSlimmer(DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
+    this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
+    this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
+    this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownClick);
+    this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
+    this.itemDisplayRuleNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
+    this.searchString = null;
+    this.isDropdownShow = false;
+    /**
+     * Specifies the trigger mode for the dropdown.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 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.
+     *
+     * @version 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`.
+     *
+     * @version 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.
+     *
+     * @version 1.47.0
+     */
+    this.prefixIconSlot = false;
+    /**
+     * Specifies the maximum height for the dropdown.
+     *
+     * @version 1.3.0
+     */
+    this.maxHeight = 400;
+    /**
+     * Controls whether the dropdown list can be searched.
+     *
+     * @version 1.3.0
+     */
+    this.searchable = false;
+    /**
+     * Determines whether the dropdown should have the
+     *    same width as the target element.
+     *
+     * @version 1.3.0
+     */
+    this.matchTargetWidth = false;
+    /**
+     * Specifies the display rule for items in the dropdown.
+     *
+     * @version 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.
+     *
+     * @version 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`.
+     *
+     * @version 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`.
+     *
+     * @version 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`.
+     *
+     * @version 1.24.0
+     */
+    this.useDefaultFilter = true;
+    /**
+     * Determines whether the dropdown displays a loading status.
+     *
+     * @version 1.24.0
+     */
+    this.isLoading = false;
+    /**
+     * Specifies the vertical positioning of the dropdown
+     *    within its container or relative to a reference point.
+     *
+     * @version 1.41.0
+     */
+    this.placement = ['bottom', 'top'];
+    /**
+     * Determines the horizontal positioning of the dropdown
+     *    within its container or relative to a reference point.
+     *
+     * @version 1.41.0
+     */
+    this.alignment = 'start';
+    /**
+     * Determines whether the dropdown displays a lazy loading status.
+     *
+     * @version 2.3.0
+     */
+    this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown search is triggered by input or pressing the Enter key.
+     *
+     * @version 2.26.0
+     */
+    this.searchTriggerBy = 'input';
+  }
+  watchIsDropdownShow() {
+    methodPlaceholder();
+  }
+  watchSource() {
+    methodPlaceholder();
+  }
+  watchSelectType() {
+    methodPlaceholder();
+  }
+  watchSelectedSourceKey() {
+    methodPlaceholder();
+  }
+  watchPrefixIconSlot() {
+    methodPlaceholder();
+  }
+  watchItemDisplayRule() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to programmatically display the dropdown menu.
+   *
+   * @version 1.3.0
+   */
+  async show() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to programmatically dismiss the dropdown menu.
+   *
+   * @version 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.
+   *
+   * @version 1.11.0
+   */
+  async search(input) {
+    methodPlaceholder(input);
+  }
+  /**
+   * Invoke this method to clear the selected items keys,
+   *    removing any current selection.
+   *
+   * @version 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.
+   *
+   * @version 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.
+   * @version 1.47.0
+   */
+  async setSelection(keys) {
+    methodPlaceholder(keys);
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-dropdown.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-dropdown.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<SizeType>",
+        "resolved": "`${number}%` | number | { S?: SizeType; M?: SizeType; L?: SizeType; XL?: SizeType; default?: SizeType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "SizeType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the size of the dropdown.\n   It can be provided as a number or a ResponsiveType.\n\nIf no size is set, the dropdown will default to fitting the item content width."
+      },
+      "attribute": "size",
+      "reflect": false
+    },
+    "trigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hover' | 'click' | 'none'",
+        "resolved": "\"click\" | \"hover\" | \"none\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the trigger mode for the dropdown."
+      },
+      "attribute": "trigger",
+      "reflect": false,
+      "defaultValue": "'hover'"
+    },
+    "translocation": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<TranslocationType>",
+        "resolved": "{ S?: TranslocationType; M?: TranslocationType; L?: TranslocationType; XL?: TranslocationType; default?: TranslocationType; } | { X: number; Y: number; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "TranslocationType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the position adjustment for the dropdown\n   relative to the target element.\n\nBy default, the dropdown is displayed on the left-bottom of the target."
+      },
+      "defaultValue": "{\n\t\tX: 0,\n\t\tY: 8,\n\t}"
+    },
+    "source": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaDropdownSourceItem[]",
+        "resolved": "VegaDropdownSourceItem[]",
+        "references": {
+          "VegaDropdownSourceItem": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Sets the source array of items for the dropdown,\n   where each item must have a `key` and `label` property."
+      },
+      "defaultValue": "[]"
+    },
+    "positionRelativeTo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the relative positioning of the dropdown menu\n   in relation to its container.\n\nIf not specified, the dropdown will be appended to the menu by default.\n   Adjust this property when facing scrolling positioning problems."
+      },
+      "attribute": "position-relative-to",
+      "reflect": false
+    },
+    "selectType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'none' | 'single' | 'multiple'",
+        "resolved": "\"multiple\" | \"none\" | \"single\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Controls the dropdown menu's selection. It accepts three values:\n\n- `none`:\n     After an item is selected, this option not only triggers the `vegaDropdownClick`\n     event but also conceals the dropdown menu immediately.\n- `single`:\n     Upon selection of an item whose key matches the `selectedSourceKey` property,\n     this setting both dispatches the `vegaDropdownClick` event and\n     hides the dropdown menu.\n- `multiple`:\n     When an item with a key found in the `selectedSourceKey` array is selected,\n     this mode releases the `vegaDropdownClick` event. Unlike the others, however,\n     Determines the selection mode for multiple item selection."
+      },
+      "attribute": "select-type",
+      "reflect": false,
+      "defaultValue": "'none'"
+    },
+    "selectedSourceKey": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | string[]",
+        "resolved": "string | string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Represents the key corresponding to the selected item in the dropdown menu.\n   It becomes active only when `selectType` is set to `single` or `multiple`."
+      },
+      "attribute": "selected-source-key",
+      "reflect": false,
+      "defaultValue": "this.selectType === 'multiple' ? [] : ''"
+    },
+    "prefixIconSlot": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.47.0"
+          }],
+        "text": "Controls whether the prefix icon occupy a position, even if prefix has no value."
+      },
+      "attribute": "prefix-icon-slot",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "maxHeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Specifies the maximum height for the dropdown."
+      },
+      "attribute": "max-height",
+      "reflect": false,
+      "defaultValue": "400"
+    },
+    "searchable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Controls whether the dropdown list can be searched."
+      },
+      "attribute": "searchable",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "matchTargetWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Determines whether the dropdown should have the\n   same width as the target element."
+      },
+      "attribute": "match-target-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "minWidth": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<SizeType>",
+        "resolved": "`${number}%` | number | { S?: SizeType; M?: SizeType; L?: SizeType; XL?: SizeType; default?: SizeType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "SizeType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "Specifies the minimum width of the dropdown. It can be provided as\n   a number or a ResponsiveType."
+      },
+      "attribute": "min-width",
+      "reflect": false
+    },
+    "maxWidth": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<SizeType>",
+        "resolved": "`${number}%` | number | { S?: SizeType; M?: SizeType; L?: SizeType; XL?: SizeType; default?: SizeType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "SizeType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "Specifies the maximum width of the dropdown. It can be provided as\n   a number or a ResponsiveType."
+      },
+      "attribute": "max-width",
+      "reflect": false
+    },
+    "itemDisplayRule": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'ellipsis' | 'newline'",
+        "resolved": "\"ellipsis\" | \"newline\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.13.0"
+          }],
+        "text": "Specifies the display rule for items in the dropdown."
+      },
+      "attribute": "item-display-rule",
+      "reflect": false,
+      "defaultValue": "'newline'"
+    },
+    "matchContainerHeight": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Determines if the dropdown height should be automatically adjusted\n   to fit its container height.\n\nIf set to `true`, the dropdown will always be positioned at\n   the bottom of the available space."
+      },
+      "attribute": "match-container-height",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "caseSensitive": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.4.0"
+          }],
+        "text": "Specifies whether the search source list is case-sensitive.\n\nNote that the default filter rules are fuzzy matching and case-insensitive.\n   This parameter only takes effect when `searchable` is set to `true`."
+      },
+      "attribute": "case-sensitive",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "dynamicOption": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.16.0"
+          }],
+        "text": "Controls whether the dropdown can add a new item when\n   no proper item is available. It becomes active only when\n   `searchable` is set to `true`."
+      },
+      "attribute": "dynamic-option",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "useDefaultFilter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Determines whether to enable source filtering based on input words.\n\nWhen set to 'false', the component will emit a `vegaSearch` event\n   when input words are provided. In this case, you are responsible for\n   managing the source, including adding, deleting, and updating the source.\n\nNote that the `dynamicOption` property will not work when\n   this property is set to `false`."
+      },
+      "attribute": "use-default-filter",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "isLoading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "Determines whether the dropdown displays a loading status."
+      },
+      "attribute": "is-loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ElementAppenderPlacementType",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\" | (\"left\" | \"right\" | \"top\" | \"bottom\")[]",
+        "references": {
+          "ElementAppenderPlacementType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.41.0"
+          }],
+        "text": "Specifies the vertical positioning of the dropdown\n   within its container or relative to a reference point."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "['bottom', 'top']"
+    },
+    "alignment": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ElementAppenderAlignmentType",
+        "resolved": "\"center\" | \"end\" | \"start\" | (\"center\" | \"start\" | \"end\")[]",
+        "references": {
+          "ElementAppenderAlignmentType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.41.0"
+          }],
+        "text": "Determines the horizontal positioning of the dropdown\n   within its container or relative to a reference point."
+      },
+      "attribute": "alignment",
+      "reflect": false,
+      "defaultValue": "'start'"
+    },
+    "isLazyLoading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.3.0"
+          }],
+        "text": "Determines whether the dropdown displays a lazy loading status."
+      },
+      "attribute": "is-lazy-loading",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "searchTriggerBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDropdownSearchTriggerByType",
+        "resolved": "\"enter\" | \"input\"",
+        "references": {
+          "VegaDropdownSearchTriggerByType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Determines whether the dropdown search is triggered by input or pressing the Enter key."
+      },
+      "attribute": "search-trigger-by",
+      "reflect": false,
+      "defaultValue": "'input'"
+    }
+  }; }
+  static get states() { return {
+    "searchString": {},
+    "isDropdownShow": {},
+    "sourceForRender": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaDropdownClick",
+      "name": "vegaDropdownClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }],
+        "text": "An event emitter notifying that a dropdown item has been clicked.\n\nThe event's `detail` property contains the key of the clicked item."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownClick",
+      "name": "dropdownClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying that a dropdown item has been clicked.\n\nThe event's `detail` property contains the key of the clicked item."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaShow",
+      "name": "vegaShow",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "An event emitter notifying that the dropdown has been displayed,\n   either programmatically or via user interaction."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownShow",
+      "name": "dropdownShow",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying that the dropdown has been displayed,\n   either programmatically or via user interaction. The name is not `show` because already has a method `show`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaHide",
+      "name": "vegaHide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
+        "text": "Event emitter notifying that the dropdown has been dismissed,\n   either programmatically or via user interaction."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownHide",
+      "name": "dropdownHide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying that the dropdown has been dismissed,\n   either programmatically or via user interaction. The name is not `hide` because already has a method `hide`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaCreate",
+      "name": "vegaCreate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.14.0"
+          }],
+        "text": "An event emitter notifying the addition of a new value\n   to the dropdown source list.\n\nThe event's `detail` property contains the new value.\n\nThe dropdown _does not_ automatically add the new value to the source list."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "create",
+      "name": "create",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the addition of a new value\n   to the dropdown source list.\n\nThe event's `detail` property contains the new value.\n\nThe dropdown _does not_ automatically add the new value to the source list."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaSearch",
+      "name": "vegaSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "1.24.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSearch",
+      "name": "dropdownSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`. The name is not `search` because already has a method `search`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to programmatically display the dropdown menu.",
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }]
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to programmatically dismiss the dropdown menu.",
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }]
+      }
+    },
+    "search": {
+      "complexType": {
+        "signature": "(input: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to set the search input value and\n   filter the list of items in the dropdown.\n\nThis method is applicable only when the dropdown is searchable.",
+        "tags": [{
+            "name": "version",
+            "text": "1.11.0"
+          }]
+      }
+    },
+    "clearSelection": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to clear the selected items keys,\n   removing any current selection.",
+        "tags": [{
+            "name": "version",
+            "text": "1.47.0"
+          }]
+      }
+    },
+    "getSelection": {
+      "complexType": {
+        "signature": "() => Promise<string[] | string>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<string | string[]>"
+      },
+      "docs": {
+        "text": "Invoke this method to retrieve the selected items keys,\n   providing an key or list of the keys representing\n   the currently selected items.",
+        "tags": [{
+            "name": "version",
+            "text": "1.47.0"
+          }]
+      }
+    },
+    "setSelection": {
+      "complexType": {
+        "signature": "(keys: string[] | string) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "keys - Row keys to be set as selected."
+              }],
+            "text": "- Row keys to be set as selected."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to set the selected items keys,\n   specifying an array or list of keys to represent\n   the desired selected items.",
+        "tags": [{
+            "name": "param",
+            "text": "keys - Row keys to be set as selected."
+          }, {
+            "name": "version",
+            "text": "1.47.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "isDropdownShow",
+      "methodName": "watchIsDropdownShow"
+    }, {
+      "propName": "source",
+      "methodName": "watchSource"
+    }, {
+      "propName": "selectType",
+      "methodName": "watchSelectType"
+    }, {
+      "propName": "selectedSourceKey",
+      "methodName": "watchSelectedSourceKey"
+    }, {
+      "propName": "prefixIconSlot",
+      "methodName": "watchPrefixIconSlot"
+    }, {
+      "propName": "source",
+      "methodName": "watchItemDisplayRule"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDropdown.prototype, "globalSlimmers", 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, "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, "createEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "searchEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "itemDisplayRuleNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);