@globalpayments/vega 2.44.0 → 2.46.0

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

@@ -6,45 +6,46 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { f as findParent, k as extractNumberFromString, l as containerScrollToItem } from './ui-ed1283bb.js';
 import { N as isArrayOfType, O as isDropdownSourceItemType } from './type-guard-158f6d7a.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-d661fc7c.js';
-import { f as VegaChange, d as domNodeSubjectFactory, m as VegaDropdownShow, n as VegaDropdownHide, b as VegaDropdownClick, k as VegaCreate, o as VegaDropdownSearch, p as VegaSearchTrigger, a as VegaClick } from './dom-node-subject-factory-286df025.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-809b0cf0.js';
+import { f as VegaChange, d as domNodeSubjectFactory, m as VegaDropdownShow, n as VegaDropdownHide, b as VegaDropdownClick, o as VegaReset, k as VegaCreate, p as VegaDropdownSearch, q as VegaSearchTrigger, a as VegaClick } from './dom-node-subject-factory-e8898f61.js';
 import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-6f5cb52a.js';
-import { E as ElementAppenderSlimmer } from './element-appender-slimmer-9d5d4108.js';
-import { r as remoteInvocationRegistry } from './remote-invocation-registry-0b330137.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-538e3117.js';
+import { r as remoteInvocationRegistry } from './remote-invocation-registry-dc7682d4.js';
 import { n as VegaInternalDropdownUpdateTarget, e as VegaInternalDropdownTemplateItemsChange, m as VegaDropdownSearchInternalOverridden, l as VegaDropdownRenderItemInternalOverridden, g as VegaInternalVirtualScrollToBottom } from './vega-internal-event-id-d7113cf7.js';
 import { i as isArrayEqual } from './array-3113609f.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-c7169226.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-7d0d98b4.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-6cef9549.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-acc7fbb7.js';
-import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-12d38571.js';
-import { S as SHADOW_ROOT_ELEMENT_SCROLLING, l as DROPDOWN_ITEM_CLICK } from './static-subject-title-249c76cd.js';
-import { T as TranslationSlimmer } from './translation-slimmer-7c37f252.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-aab1c019.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-1d3336d6.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-d56587c9.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-356d5c5e.js';
+import { S as SHADOW_ROOT_ELEMENT_SCROLLING, m as DROPDOWN_ITEM_CLICK } from './static-subject-title-97eb1f19.js';
+import { T as TranslationSlimmer } from './translation-slimmer-607ed804.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1571f1b2.js';
+import { C as ComponentGlobalStyleSlimmer } from './component-global-style-slimmer-000e0c11.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-da6cde6a.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './keyboard-manager-8c4ef91b.js';
-import './vega-skeleton-loader-controller-722a41c2.js';
+import './vega-skeleton-loader-controller-da0ed23d.js';
 import './create-public-api-runtime-metrics-slimmer-8ada793f.js';
 import './dynamic-slimmer-90b8af32.js';
 import './page-resize-observer-slimmer-15a84d26.js';
-import './internal-vega-event-manager-d2c962d2.js';
+import './internal-vega-event-manager-18379085.js';
 import './number-4398f2e1.js';
-import './responsive-format-facade-6e639588.js';
+import './responsive-format-facade-86cdc58c.js';
 import './pixel-f32c07ce.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-690eac1d.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './content-state-7e9f3421.js';
+import './content-state-8b844253.js';
 import './icon-manager-638dd4d4.js';
 import './wait-for-vega-handler-b18eb955.js';
-import './translation-fd7a290a.js';
+import './translation-2bdcfdb3.js';
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (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;
@@ -100,11 +101,9 @@ class VegaDropdownRenderer extends VegaSlimmer {
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
     return (h("vega-dropdown-content-box", { ref: (e) => (this.dropdownContentBoxRef = e), style: { maxHeight: `${this.maxHeight}px` }, "data-parent-ref": this.host, "data-vega-no-event-prevent": eventPreventFlag },
-      h("div", { ref: (e) => (this.dropdownRef = e), class: {
-          'vega-dropdown': true,
-          'vega-dropdown-with-searchable': this.searchable,
-        } },
+      h("div", { 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,
@@ -153,32 +152,35 @@ class VegaDropdownRenderer extends VegaSlimmer {
     }
   }
 }
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "host", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "maxHeight", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchable", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "searchRenderer", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "createRenderer", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "listRenderer", void 0);
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], VegaDropdownRenderer.prototype, "renderModeController", void 0);
-__decorate$s([
+__decorate$t([
+  MapToComponentField()
+], VegaDropdownRenderer.prototype, "resetRenderer", void 0);
+__decorate$t([
   MapToComponentMethod('componentDidRender')
 ], VegaDropdownRenderer.prototype, "componentDidRender", null);
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -226,26 +228,26 @@ class VegaDropdownSourceController extends VegaSlimmer {
       : [];
   }
 }
-__decorate$r([
+__decorate$s([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "source", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField({ writable: true })
 ], VegaDropdownSourceController.prototype, "sourceForRender", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "searchController", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], VegaDropdownSourceController.prototype, "renderModeController", void 0);
-__decorate$r([
+__decorate$s([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSourceController.prototype, "componentWillLoad", null);
-__decorate$r([
+__decorate$s([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSourceController.prototype, "watchSource", null);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -271,29 +273,29 @@ class VegaDropdownCreateRenderer extends VegaSlimmer {
       h("div", { class: "vega-dropdown-divider" }))));
   }
 }
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "searchString", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "dynamicOption", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "sourceForRender", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "appenderController", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "childrenController", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "renderModeController", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], VegaDropdownCreateRenderer.prototype, "createEventEmitter", void 0);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -361,44 +363,44 @@ class VegaDropdownListRenderer extends VegaSlimmer {
       h("slot", { name: "items" })));
   }
 }
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "host", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemLevelRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "scrollableController", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -412,29 +414,29 @@ class VegaDropdownItemLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "host", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "caseSensitive", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "searchString", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -449,7 +451,9 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
         this.searchInputRef.value = '';
     };
     this.onInputSearch = (node) => {
-      this.searchInputRef = node;
+      if (node) {
+        this.searchInputRef = node;
+      }
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
         this.search(input.detail, 'input');
       });
@@ -490,56 +494,58 @@ class VegaDropdownSearchRenderer extends VegaSlimmer {
     }
   }
   render() {
-    return (this.searchable && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
-        /*
-         * The below method is e2e-test covered in
-         * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
-         */
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onKeyDown: 
-        /* istanbul ignore next */ (e) => {
-          if (e.code === 'Enter') {
-            this.search(this.searchInputRef.value, 'enter');
-          }
-        } }))));
+    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$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchable", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField({ writable: true })
 ], VegaDropdownSearchRenderer.prototype, "searchString", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "source", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "useDefaultFilter", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchEventEmitter", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchTriggerEventEmitter", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "isDropdownShow", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "sourceController", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -604,26 +610,26 @@ class VegaDropdownKeyboardController extends KeyboardManagerSlimmer {
     };
   }
 }
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "host", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "trigger", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "isDropdownShow", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "renderer", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "appenderController", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaDropdownKeyboardController.prototype, "listRenderer", void 0);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -715,77 +721,77 @@ class VegaDropdownAppenderController extends ElementAppenderSlimmer {
     });
   }
 }
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "host", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "trigger", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField({ writable: true })
 ], VegaDropdownAppenderController.prototype, "isDropdownShow", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "positionRelativeTo", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchTargetWidth", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "matchContainerHeight", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "size", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "minWidth", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxWidth", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "translocation", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "maxHeight", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "placement", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "alignment", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "showEventEmitter", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownAppenderController.prototype, "connectedCallback", null);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('show')
 ], VegaDropdownAppenderController.prototype, "userShow", null);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('hide')
 ], VegaDropdownAppenderController.prototype, "userHide", null);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -796,14 +802,14 @@ class VegaDropdownGroupLevelRenderer extends VegaSlimmer {
     return (h("vega-dropdown-group", { label: item.label, key: item.key, divide: index < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "sourceForRender", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaDropdownGroupLevelRenderer.prototype, "itemLevelRenderer", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -891,26 +897,26 @@ class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "caseSensitive", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "useDefaultFilter", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchable", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1019,8 +1025,35 @@ class VegaDropdownSelectedController extends VegaSlimmer {
     }
     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
@@ -1029,7 +1062,8 @@ class VegaDropdownSelectedController extends VegaSlimmer {
    */
   isCurrentDropdown(item) {
     const appender = findParent(item, 'vega-dropdown-content-box');
-    return this.host === appender['data-parent-ref'];
+    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
@@ -1080,56 +1114,59 @@ class VegaDropdownSelectedController extends VegaSlimmer {
     return result;
   }
 }
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "host", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "selectType", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "source", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField({ writable: true })
 ], VegaDropdownSelectedController.prototype, "selectedSourceKey", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "vegaDropdownClick", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "appenderController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "childrenController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "renderModeController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDropdownSelectedController.prototype, "dropdownClickEventEmitter", void 0);
-__decorate$i([
+__decorate$j([
+  MapToComponentField()
+], VegaDropdownSelectedController.prototype, "resetEventEmitter", void 0);
+__decorate$j([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownSelectedController.prototype, "componentWillLoad", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('clearSelection')
 ], VegaDropdownSelectedController.prototype, "clearSelection", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('getSelection')
 ], VegaDropdownSelectedController.prototype, "getSelection", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('setSelection')
 ], VegaDropdownSelectedController.prototype, "watchSelectedRowKeySet", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('watchSelectType')
 ], VegaDropdownSelectedController.prototype, "watchSelectType", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('watchSelectedSourceKey')
 ], VegaDropdownSelectedController.prototype, "watchSelectedSourceKey", null);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('watchSource')
 ], VegaDropdownSelectedController.prototype, "watchSource", null);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1170,17 +1207,17 @@ class VegaDropdownRenderModeController extends VegaSlimmer {
     this.renderMode = parent.querySelector('[slot=items]') ? 'SLOT' : 'SOURCE';
   }
 }
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "host", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDropdownRenderModeController.prototype, "renderer", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownRenderModeController.prototype, "connectedCallback", null);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1311,40 +1348,40 @@ class VegaDropdownChildrenController extends VegaSlimmer {
     ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
   }
 }
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "source", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "sourceController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderModeController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "listRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "renderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDropdownChildrenController.prototype, "selectedController", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], VegaDropdownChildrenController.prototype, "mutationObserver", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDropdownChildrenController.prototype, "disconnectedCallback", null);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('componentWillLoad')
 ], VegaDropdownChildrenController.prototype, "componentWillLoad", null);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('componentDidLoad')
 ], VegaDropdownChildrenController.prototype, "componentDidLoad", null);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('watchSource')
 ], VegaDropdownChildrenController.prototype, "watchSource", null);
 
@@ -1375,7 +1412,7 @@ const VegaDropdownRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1413,6 +1450,19 @@ class VegaDropdownScrollableController extends VegaSlimmer {
       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.
    */
@@ -1446,7 +1496,7 @@ class VegaDropdownScrollableController extends VegaSlimmer {
       const ul = dropdownContent.shadowRoot.querySelector('ul');
       const ulRect = ul.getBoundingClientRect();
       const itemRect = selectedItem.getBoundingClientRect();
-      ul.scrollTop = itemRect.top - ulRect.top;
+      ul.scrollTop = itemRect.top - ulRect.top + ul.scrollTop;
     }
   }
   /**
@@ -1475,11 +1525,19 @@ class VegaDropdownScrollableController extends VegaSlimmer {
    */
   adjustListContainerMaxHeight() {
     const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    if (!dropdownRef)
+      return;
     const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
-    const excludeTop = this.searchable ? 59 : 8;
-    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
-    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
-    dropdownRef.style.maxHeight = 'unset';
+    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.");
@@ -1506,35 +1564,43 @@ class VegaDropdownScrollableController extends VegaSlimmer {
     }
   }
 }
-__decorate$f([
+VegaDropdownScrollableController.actionButtonContentHeight = 49; // actionHeight(40) + dividerHeight(paddingY + dividerHeight = 9);
+VegaDropdownScrollableController.dropdownLayoutSpaceHeight = 10; // paddingY + borderY;
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "selectType", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "searchable", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDropdownScrollableController.prototype, "renderer", void 0);
-__decorate$f([
+__decorate$g([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "resettable", void 0);
+__decorate$g([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);
+__decorate$g([
+  MapToComponentMethod('watchSelectedSourceKey')
+], VegaDropdownScrollableController.prototype, "watchSelectedSourceKey", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1578,13 +1644,42 @@ class VegaDropdownRemoteInvocationController extends VegaSlimmer {
     return null;
   }
 }
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('connectedCallback')
 ], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", 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 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$e([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "resettable", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "translationSlimmer", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedController", void 0);
+__decorate$e([
+  MapToComponentField()
+], VegaDropdownResetRenderer.prototype, "selectedSourceKey", void 0);
+
 const vegaDropdownCss = ":host{display:inline-block}";
 
 var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -1610,6 +1705,8 @@ const VegaDropdown = class {
     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 = {};
@@ -1619,6 +1716,7 @@ const VegaDropdown = class {
     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();
@@ -1640,6 +1738,7 @@ const VegaDropdown = class {
     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);
@@ -1799,13 +1898,18 @@ const VegaDropdown = class {
     /**
      * Determines whether the dropdown position is calculated relative to the screen.
      *
-     * @VegaWarning When enabled (set to true), it overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
-     *
-     * @VegaWarning Currently, when set to true, position calculation may be inaccurate if the dropdown is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
-     *
+     * @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;
   }
   watchIsDropdownShow() {
   }
@@ -1905,6 +2009,9 @@ __decorate$d([
 __decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetRenderer", void 0);
 __decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
@@ -1956,6 +2063,9 @@ __decorate$d([
 __decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate$d([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetEventEmitter", void 0);
 __decorate$d([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);
@@ -1973,7 +2083,9 @@ __decorate$d([
 ], VegaDropdown.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaDropdown.style = vegaDropdownCss;
 
-const vegaDropdownContentBoxCss = ":host{display:block;position:absolute}:host .vega-dropdown{box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding-top:8px;padding-bottom:8px;text-align:left;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;box-sizing:border-box;width:inherit}:host(.vega-force-hidden){display:none}:host .vega-dropdown.vega-dropdown-with-searchable{padding-top:0px}:host .vega-dropdown .vega-dropdown-container{overflow-y:auto;position:relative;min-width:100px;min-height:40px}:host .vega-dropdown .vega-dropdown-container>ul{padding-left:0px;margin:0px;list-style-type:none}:host .vega-dropdown .vega-dropdown-search{padding-top:16px;padding-left:12px;padding-right:12px;padding-bottom:12px;margin-bottom:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-width:0px;border-bottom-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container){padding:0px;border-width:0px;--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(prefix-icon-container){color:rgba(var(--v-text-secondary, 107, 116, 125, 1));width:16px;height:16px;padding-top:0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within{outline:none}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover{border-width:0px}:host .vega-dropdown .vega-dropdown-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host .v-hidden{display:none}:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item{padding-top:8px;padding-left:12px;padding-right:12px;padding-bottom:8px;margin-left:4px;margin-right:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));cursor:pointer;display:flex;gap:8px;align-items:center}:host .vega-dropdown .vega-dropdown-add-item>div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));outline:2px solid transparent;outline-offset:2px}:host .vega-dropdown .vega-dropdown-clear-icon{width:16px;height:16px;cursor:pointer}:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-divider{margin-top:4px;margin-bottom:4px;border-bottom:1px solid rgb(171, 198, 216)}";
+const nestVegaDropdownCss = "vega-dropdown-content-box vega-dropdown{display:block}";
+
+const vegaDropdownContentBoxCss = ":host{display:block;position:absolute}:host .vega-dropdown{box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding-top:4px;padding-bottom:4px;text-align:left;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;overflow:hidden;box-sizing:border-box;width:inherit}:host(.vega-force-hidden){display:none}:host .vega-dropdown .vega-dropdown-container{overflow-y:auto;position:relative;min-width:100px;min-height:40px}:host .vega-dropdown .vega-dropdown-container>ul{padding-left:0px;margin:0px;list-style-type:none}:host .vega-dropdown .vega-dropdown-search{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px}:host .vega-dropdown .vega-dropdown-search vega-input{display:block}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container){padding:0px;border-width:0px;--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(prefix-icon-container){color:rgba(var(--v-text-secondary, 107, 116, 125, 1));width:16px;height:16px;padding-top:0px}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within{outline:none}:host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover{border-width:0px}:host .vega-dropdown .vega-dropdown-loading{padding-left:16px;padding-right:16px;padding-top:8px;padding-bottom:8px}:host .v-hidden{display:none}:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-loading>vega-flex>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));cursor:pointer;display:flex;gap:8px;align-items:center}:host .vega-dropdown .vega-dropdown-add-item>div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-add-item>span{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-add-item:focus-visible{box-shadow:0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));outline:2px solid transparent;outline-offset:2px}:host .vega-dropdown .vega-dropdown-clear-icon{width:16px;height:16px;cursor:pointer}:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-dropdown .vega-dropdown-empty-list{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-dropdown .vega-dropdown-divider{margin-top:4px;margin-bottom:4px;border-bottom:1px solid rgb(171, 198, 216)}:host .vega-dropdown .vega-dropdown-reset{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;display:block;cursor:pointer}:host .vega-dropdown .vega-dropdown-reset:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host .vega-dropdown .vega-dropdown-reset:focus-visible{border:2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1))}";
 
 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;
@@ -1989,6 +2101,7 @@ const VegaDropdownContentBox = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.globalSlimmers = {};
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(nestVegaDropdownCss);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
   }
@@ -2000,6 +2113,9 @@ const VegaDropdownContentBox = class {
 __decorate$c([
   InjectVegaGlobalSlimmer()
 ], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
+__decorate$c([
+  InjectVegaSlimmer()
+], VegaDropdownContentBox.prototype, "componentGlobalStyleSlimmer", void 0);
 __decorate$c([
   InjectVegaSlimmer()
 ], VegaDropdownContentBox.prototype, "eventPrevent", void 0);