@globalpayments/vega 2.34.1 → 2.36.0

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

@@ -2,45 +2,47 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const component = require('./component-63af66ea.js');
+const index = require('./index-09acd3c9.js');
+const component = require('./component-73a88c4e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-019d3c00.js');
-const ui = require('./ui-b5906704.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
+const ui = require('./ui-5fd9b267.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-9be2a880.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-0dd70e61.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-feba3a83.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-77f9c4a0.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-ff9af278.js');
+const vegaInternalEventId = require('./vega-internal-event-id-b12071ea.js');
 const array = require('./array-5adef7b2.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-73201c53.js');
-const mutationObserverSlimmer = require('./mutation-observer-slimmer-98bbbdf0.js');
-const changeManager = require('./change-manager-bda1d107.js');
-const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-a46bb411.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-03a3f79e.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-994eb848.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-be92f366.js');
 const staticSubjectTitle = require('./static-subject-title-d66b88fb.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-71a45468.js');
-const translationSlimmer = require('./translation-slimmer-90f9f71f.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e1a6e5ad.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-10c0d402.js');
+const translationSlimmer = require('./translation-slimmer-ec76c5a2.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-080a4bea.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./keyboard-manager-5afbc8f1.js');
-require('./internal-vega-z-index-manager-e24e4309.js');
+require('./keyboard-manager-2df53b2f.js');
+require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./number-4816603d.js');
-require('./dynamic-slimmer-dc30600a.js');
-require('./page-resize-observer-slimmer-e54fa9d4.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./page-resize-observer-slimmer-bb1eaebe.js');
 require('./breakpoints-17d6c4c7.js');
-require('./responsive-format-facade-74079f1b.js');
+require('./responsive-format-facade-4363a00d.js');
 require('./pixel-98f2a10c.js');
-require('./internal-vega-event-manager-d7643ec6.js');
-require('./translation-f6b7ee84.js');
-require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
+require('./internal-vega-event-manager-e5e4bcf4.js');
+require('./translation-b9be41e0.js');
+require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-e97b5f29.js');
+require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
 
@@ -85,7 +87,7 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
   render() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
+    return (index.h(index.Fragment, null,
       this.renderContentSlot(),
       this.renderDropdown()));
   }
@@ -93,22 +95,22 @@ class VegaDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer {
    * TODO: We will use no-named slot for both template and source render mode. And will deprecate slot dropdown-content
    */
   renderContentSlot() {
-    return this.renderModeController.isSourceRenderMode() ? (globalSlimmerRegistry.h("slot", null)) : (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
-      globalSlimmerRegistry.h("slot", { name: "dropdown-content" }),
-      globalSlimmerRegistry.h("slot", null)));
+    return this.renderModeController.isSourceRenderMode() ? (index.h("slot", null)) : (index.h(index.Fragment, null,
+      index.h("slot", { name: "dropdown-content" }),
+      index.h("slot", null)));
   }
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';
-    return (globalSlimmerRegistry.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 },
-      globalSlimmerRegistry.h("div", { ref: (e) => (this.dropdownRef = e), class: {
+    return (index.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 },
+      index.h("div", { ref: (e) => (this.dropdownRef = e), class: {
           'vega-dropdown': true,
           'vega-dropdown-with-searchable': this.searchable,
         } },
-        globalSlimmerRegistry.h("div", { class: "vega-dropdown-actions" },
+        index.h("div", { class: "vega-dropdown-actions" },
           this.searchRenderer.render(),
           this.createRenderer.render()),
-        globalSlimmerRegistry.h("div", null,
-          globalSlimmerRegistry.h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
+        index.h("div", null,
+          index.h("div", { class: "vega-dropdown-container" }, this.renderModeController.isSourceRenderMode()
             ? this.listRenderer.renderBySource()
             : this.listRenderer.renderBySlot())))));
   }
@@ -263,12 +265,12 @@ class VegaDropdownCreateRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const canRender = this.searchString &&
       this.dynamicOption &&
       !this.childrenController.isLabelExist(this.searchString);
-    return (canRender && (globalSlimmerRegistry.h("fragment", null,
-      globalSlimmerRegistry.h("div", { class: "vega-dropdown-add-item", onClick: this.onItemAdd, tabIndex: 0, role: "button", "aria-label": `Add ${this.searchString}`, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
-        globalSlimmerRegistry.h("div", null,
-          globalSlimmerRegistry.h("vega-icon", { icon: "plus-sign" })),
-        globalSlimmerRegistry.h("span", { class: "v-break-all" }, `Add "${this.searchString}"`)),
-      globalSlimmerRegistry.h("div", { class: "vega-dropdown-divider" }))));
+    return (canRender && (index.h("fragment", null,
+      index.h("div", { class: "vega-dropdown-add-item", onClick: this.onItemAdd, tabIndex: 0, role: "button", "aria-label": `Add ${this.searchString}`, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() },
+        index.h("div", null,
+          index.h("vega-icon", { icon: "plus-sign" })),
+        index.h("span", { class: "v-break-all" }, `Add "${this.searchString}"`)),
+      index.h("div", { class: "vega-dropdown-divider" }))));
   }
 }
 __decorate$q([
@@ -316,36 +318,36 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.templateContainerRef;
   }
   renderBySource() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
+    return (index.h(index.Fragment, null,
       this.renderLoading(),
       this.renderDropdownListBySource()));
   }
   renderBySlot() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
+    return (index.h(index.Fragment, null,
       this.renderLoading(),
       this.renderDropdownListBySlot()));
   }
   renderLoading() {
-    return (globalSlimmerRegistry.h("div", { class: {
+    return (index.h("div", { class: {
         'vega-dropdown-loading': true,
         'v-hidden': !this.isLoading,
       } },
-      globalSlimmerRegistry.h("vega-flex", { gap: "size-8", direction: "row" },
-        globalSlimmerRegistry.h("vega-loading-indicator", { size: "small" }),
-        globalSlimmerRegistry.h("span", null, "Loading"))));
+      index.h("vega-flex", { gap: "size-8", direction: "row" },
+        index.h("vega-loading-indicator", { size: "small" }),
+        index.h("span", null, "Loading"))));
   }
   renderDropdownListBySource() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
-      globalSlimmerRegistry.h("div", { class: {
+    return (index.h(index.Fragment, null,
+      index.h("div", { class: {
           'vega-dropdown-empty-list': true,
           'v-hidden': this.sourceForRender.length > 0,
         } }, this.searchString
         ? this.translationSlimmer.t('No results found')
         : this.translationSlimmer.t('No options')),
-      globalSlimmerRegistry.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+      index.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
           'v-hidden': this.sourceForRender.length === 0,
         } },
-        globalSlimmerRegistry.h("vega-virtual-scroll", { source: this.sourceForRender, 
+        index.h("vega-virtual-scroll", { source: this.sourceForRender, 
           /* eslint-disable-next-line react/jsx-no-bind */
           renderItem: (item, index, fixHeight) => {
             return item['children']
@@ -354,11 +356,11 @@ class VegaDropdownListRenderer extends globalSlimmerRegistry.VegaSlimmer {
           }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
   }
   renderDropdownListBySlot() {
-    return (globalSlimmerRegistry.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
+    return (index.h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
       }, ref: (ref) => (this.templateContainerRef = ref) },
-      globalSlimmerRegistry.h("slot", { name: "items" })));
+      index.h("slot", { name: "items" })));
   }
 }
 __decorate$p([
@@ -406,7 +408,7 @@ class VegaDropdownItemLevelRenderer extends globalSlimmerRegistry.VegaSlimmer {
     const renderResult = this.remoteInvocationController.callRemoteItemRender(item, fixHeight);
     if (renderResult)
       return renderResult;
-    return (globalSlimmerRegistry.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
+    return (index.h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
 __decorate$o([
@@ -447,7 +449,7 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
-      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaChange, (input) => {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectFactory.VegaChange, (input) => {
         this.search(input.detail, 'input');
       });
     };
@@ -487,8 +489,8 @@ class VegaDropdownSearchRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
   render() {
-    return (this.searchable && (globalSlimmerRegistry.h("div", { class: "vega-dropdown-search" },
-      globalSlimmerRegistry.h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+    return (this.searchable && (index.h("div", { class: "vega-dropdown-search" },
+      index.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}
@@ -636,20 +638,19 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
    * This constructor initializes a dropdown component with various configuration options.
    */
   constructor() {
-    super(() => ({
-      target: this.host,
-      appendableElement: this.renderer.getDropdownContentBoxRef(),
-      positionRelativeTo: this.positionRelativeTo,
-      matchTargetWidth: this.matchTargetWidth,
-      matchContainerHeight: this.matchContainerHeight,
-      size: this.size,
-      minWidth: this.minWidth,
-      maxWidth: this.maxWidth,
-      translocation: this.translocation,
-      maxHeight: this.maxHeight,
-      placement: this.placement,
-      alignment: this.alignment,
-    }), () => this.trigger);
+    super(() => this.generateShowConfigFactory(), () => this.trigger);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerRemoteMethod();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownUpdateTarget));
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -681,6 +682,37 @@ class VegaDropdownAppenderController extends elementAppenderSlimmer.ElementAppen
       this.hide();
     }
   }
+  /**
+   * Generate the show configuration for the dropdown.
+   *
+   * @returns {ElementAppenderShowConfig} The show configuration for the dropdown.
+   */
+  generateShowConfigFactory() {
+    return {
+      target: this.target || this.host,
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
+      positionRelativeTo: this.positionRelativeTo,
+      matchTargetWidth: this.matchTargetWidth,
+      matchContainerHeight: this.matchContainerHeight,
+      size: this.size,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      translocation: this.translocation,
+      maxHeight: this.maxHeight,
+      placement: this.placement,
+      alignment: this.alignment,
+      isScreenPosition: this.isScreenPosition,
+    };
+  }
+  /**
+   * Register a remote method to update the target element of the dropdown.
+   */
+  registerRemoteMethod() {
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownUpdateTarget), (target) => {
+      this.target = target;
+      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
+    });
+  }
 }
 __decorate$l([
   globalSlimmerRegistry.MapToComponentField()
@@ -733,6 +765,15 @@ __decorate$l([
 __decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaDropdownAppenderController.prototype, "connectedCallback", null);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
 __decorate$l([
   globalSlimmerRegistry.MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);
@@ -750,8 +791,8 @@ var __decorate$k = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDropdownGroupLevelRenderer extends globalSlimmerRegistry.VegaSlimmer {
-  render(item, index, fixHeight) {
-    return (globalSlimmerRegistry.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))));
+  render(item, index$1, fixHeight) {
+    return (index.h("vega-dropdown-group", { label: item.label, key: item.key, divide: index$1 < this.sourceForRender.length - 1 }, item.children.map((children) => this.itemLevelRenderer.render(children, fixHeight))));
   }
 }
 __decorate$k([
@@ -1266,7 +1307,7 @@ class VegaDropdownChildrenController extends globalSlimmerRegistry.VegaSlimmer {
    */
   notifyTemplateItemsChange() {
     const container = this.renderer.getDropdownContentBoxRef() || this.host;
-    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
+    changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
   }
 }
 __decorate$g([
@@ -1487,8 +1528,8 @@ class VegaDropdownRemoteInvocationController extends globalSlimmerRegistry.VegaS
    * Component lifecycle - connectedCallback
    */
   connectedCallback() {
-    this.remotePhoneNumberSearchSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownSearchInternalOverridden);
-    this.remotePhoneNumberItemRenderSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownRenderItemInternalOverridden);
+    this.remotePhoneNumberSearchSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownSearchInternalOverridden);
+    this.remotePhoneNumberItemRenderSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, vegaInternalEventId.VegaDropdownRenderItemInternalOverridden);
   }
   /**
    *  Call the search function in input-phone-number.
@@ -1540,19 +1581,19 @@ var __decorate$d = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaDropdown = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaDropdownClick = globalSlimmerRegistry.createEvent(this, "vegaDropdownClick", 7);
-    this.dropdownClick = globalSlimmerRegistry.createEvent(this, "dropdownClick", 7);
-    this.vegaShow = globalSlimmerRegistry.createEvent(this, "vegaShow", 7);
-    this.dropdownShow = globalSlimmerRegistry.createEvent(this, "dropdownShow", 7);
-    this.vegaHide = globalSlimmerRegistry.createEvent(this, "vegaHide", 7);
-    this.dropdownHide = globalSlimmerRegistry.createEvent(this, "dropdownHide", 7);
-    this.vegaCreate = globalSlimmerRegistry.createEvent(this, "vegaCreate", 7);
-    this.create = globalSlimmerRegistry.createEvent(this, "create", 7);
-    this.vegaSearch = globalSlimmerRegistry.createEvent(this, "vegaSearch", 7);
-    this.dropdownSearch = globalSlimmerRegistry.createEvent(this, "dropdownSearch", 7);
-    this.vegaSearchTrigger = globalSlimmerRegistry.createEvent(this, "vegaSearchTrigger", 7);
-    this.searchTrigger = globalSlimmerRegistry.createEvent(this, "searchTrigger", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaDropdownClick = index.createEvent(this, "vegaDropdownClick", 7);
+    this.dropdownClick = index.createEvent(this, "dropdownClick", 7);
+    this.vegaShow = index.createEvent(this, "vegaShow", 7);
+    this.dropdownShow = index.createEvent(this, "dropdownShow", 7);
+    this.vegaHide = index.createEvent(this, "vegaHide", 7);
+    this.dropdownHide = index.createEvent(this, "dropdownHide", 7);
+    this.vegaCreate = index.createEvent(this, "vegaCreate", 7);
+    this.create = index.createEvent(this, "create", 7);
+    this.vegaSearch = index.createEvent(this, "vegaSearch", 7);
+    this.dropdownSearch = index.createEvent(this, "dropdownSearch", 7);
+    this.vegaSearchTrigger = index.createEvent(this, "vegaSearchTrigger", 7);
+    this.searchTrigger = index.createEvent(this, "searchTrigger", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.renderer = new VegaDropdownRenderer();
@@ -1578,12 +1619,12 @@ const VegaDropdown = class {
     this.selectedSourceKeyNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
     this.itemClickObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.DROPDOWN_ITEM_CLICK, (payload) => this.selectedController.select(payload.detail.itemKey), this.selectedController.isAcceptableItemSelectionObserver.bind(this.selectedController));
-    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaDropdownShow);
-    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaDropdownHide);
-    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaDropdownClick);
-    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaCreate);
-    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaDropdownSearch);
-    this.searchTriggerEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectObserverFactory.VegaSearchTrigger);
+    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownShow);
+    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownHide);
+    this.dropdownClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownClick);
+    this.createEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaCreate);
+    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaDropdownSearch);
+    this.searchTriggerEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdown, domNodeSubjectFactory.VegaSearchTrigger);
     this.itemDisplayRuleNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
     this.searchString = null;
@@ -1737,6 +1778,16 @@ const VegaDropdown = class {
      * @vegaVersion 2.3.0
      */
     this.isLazyLoading = false;
+    /**
+     * 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).
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.isScreenPosition = false;
   }
   watchIsDropdownShow() {
   }
@@ -1803,10 +1854,10 @@ const VegaDropdown = class {
   async setSelection(keys) {
   }
   render() {
-    placeholder.slotPlaceholder(globalSlimmerRegistry.h("slot", null));
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "isDropdownShow": ["watchIsDropdownShow"],
     "source": ["watchSource", "watchItemDisplayRule"],
@@ -1918,15 +1969,15 @@ var __decorate$c = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaDropdownContentBox = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
-    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaClick], () => this.host, undefined, true);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, globalSlimmerRegistry.h("slot", null)), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, index.h("slot", null)), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$c([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -1947,20 +1998,20 @@ var __decorate$b = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
-    return (globalSlimmerRegistry.h("li", { class: "vega-dropdown-group" },
+    return (index.h("li", { class: "vega-dropdown-group" },
       this.renderLabel(),
       this.renderChildren(),
       this.renderDivide()));
   }
   renderLabel() {
-    return this.label && globalSlimmerRegistry.h("div", { class: "vega-dropdown-group-label" }, this.label);
+    return this.label && index.h("div", { class: "vega-dropdown-group-label" }, this.label);
   }
   renderChildren() {
-    return (globalSlimmerRegistry.h("ul", { class: "vega-dropdown-group-items" },
-      globalSlimmerRegistry.h("slot", null)));
+    return (index.h("ul", { class: "vega-dropdown-group-items" },
+      index.h("slot", null)));
   }
   renderDivide() {
-    return this.divide && globalSlimmerRegistry.h("div", { class: "vega-dropdown-group-divide" });
+    return this.divide && index.h("div", { class: "vega-dropdown-group-divide" });
   }
 }
 __decorate$b([
@@ -1984,7 +2035,7 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaDropdownGroup = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.renderer = new VegaDropdownGroupRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
@@ -1997,10 +2048,10 @@ const VegaDropdownGroup = class {
     this.divide = true;
   }
   render() {
-    placeholder.slotPlaceholder(globalSlimmerRegistry.h("slot", null));
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$a([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -2021,7 +2072,7 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
 };
 class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
-    return (globalSlimmerRegistry.h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
+    return (index.h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
         'vega-dropdown-item-selected': this.selected,
         'vega-dropdown-item-disabled': this.disabled,
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
@@ -2039,39 +2090,39 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderCounter()));
   }
   renderSelectIcon() {
-    return (this.selectType !== 'none' && (globalSlimmerRegistry.h("span", { class: "selected-prefix" },
+    return (this.selectType !== 'none' && (index.h("span", { class: "selected-prefix" },
       this.selectType === 'single' && this.renderSingleSelectIcon(),
       this.selectType === 'multiple' && this.renderMultipleSelectIcon())));
   }
   renderSingleSelectIcon() {
-    return this.selected && globalSlimmerRegistry.h("vega-icon", { icon: "checkmark", size: "size-16" });
+    return this.selected && index.h("vega-icon", { icon: "checkmark", size: "size-16" });
   }
   renderMultipleSelectIcon() {
-    return globalSlimmerRegistry.h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
+    return index.h("vega-checkbox", { size: "small", checked: this.selected, disabled: this.disabled });
   }
   renderPrefixIcon() {
-    return ((this.prefixIcon || this.prefixIconSlot) && (globalSlimmerRegistry.h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
+    return ((this.prefixIcon || this.prefixIconSlot) && (index.h("div", { class: "item-prefix" }, this.renderItemPrefixIcon())));
   }
   renderItemPrefixIcon() {
-    return this.prefixIcon && globalSlimmerRegistry.h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
+    return this.prefixIcon && index.h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
   }
   renderLabel() {
     // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
     // such as input select selected item display
     if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
-      return (globalSlimmerRegistry.h("span", { class: "vega-dropdown-item-label" },
-        globalSlimmerRegistry.h("slot", null)));
+      return (index.h("span", { class: "vega-dropdown-item-label" },
+        index.h("slot", null)));
     }
     else {
-      return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
-        globalSlimmerRegistry.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
-        globalSlimmerRegistry.h("span", { class: "v-hidden" },
-          globalSlimmerRegistry.h("slot", null))));
+      return (index.h(index.Fragment, null,
+        index.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        index.h("span", { class: "v-hidden" },
+          index.h("slot", null))));
     }
   }
   renderCounter() {
-    return (this.count > 0 && (globalSlimmerRegistry.h("div", { class: "item-counter" },
-      globalSlimmerRegistry.h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
+    return (this.count > 0 && (index.h("div", { class: "item-counter" },
+      index.h("vega-counter-badge", { count: this.count, color: "bg-action", offset: [10, 10] }))));
   }
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
@@ -2241,15 +2292,15 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
 };
 const VegaDropdownItem = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
-    this.vegaClick = globalSlimmerRegistry.createEvent(this, "vegaClick", 7);
-    this.click = globalSlimmerRegistry.createEvent(this, "click", 7);
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
     this.globalSlimmers = {};
     this.renderer = new VegaDropdownItemRenderer();
     this.vegaDropdownItemStateController = new VegaDropdownItemStateController();
     this.vegaDropdownItemClickController = new VegaDropdownItemClickController();
-    this.dropdownItemEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.host);
-    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdownItem, domNodeSubjectObserverFactory.VegaClick);
+    this.dropdownItemEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host);
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaDropdownItem, domNodeSubjectFactory.VegaClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * The placeholder of prefix icon, while other item have prefix icon but no in this item,
@@ -2280,10 +2331,10 @@ const VegaDropdownItem = class {
     this.danger = false;
   }
   render() {
-    placeholder.slotPlaceholder(globalSlimmerRegistry.h("slot", null));
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    placeholder.slotPlaceholder(index.h("slot", null));
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
 };
 __decorate$6([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
@@ -2590,7 +2641,7 @@ class VegaVirtualScrollScrollableController extends globalSlimmerRegistry.VegaSl
   checkIsScrollToBottom() {
     if (!this.isLoading &&
       (this.isScrollToBottomInVirtualMode() || this.isScrollToBottomInNormalMode())) {
-      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalVirtualScrollToBottom), {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalVirtualScrollToBottom), {
         endIndex: this.source.length - 1,
       });
     }
@@ -2685,23 +2736,23 @@ class VegaVirtualScrollRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.virtualScrollContainerRef;
   }
   render() {
-    return (globalSlimmerRegistry.h("div", { style: { maxHeight: `${this.viewportMaxHeight}px`, overflow: 'auto' }, class: "virtual-scroll-container", ref: (el) => (this.virtualScrollContainerRef = el) }, this.modeController.getMode() === 'normal'
+    return (index.h("div", { style: { maxHeight: `${this.viewportMaxHeight}px`, overflow: 'auto' }, class: "virtual-scroll-container", ref: (el) => (this.virtualScrollContainerRef = el) }, this.modeController.getMode() === 'normal'
       ? this.renderNormal()
       : this.renderVirtualScroll()));
   }
   renderNormal() {
-    return (globalSlimmerRegistry.h(globalSlimmerRegistry.Fragment, null,
+    return (index.h(index.Fragment, null,
       this.source.map((item, index) => {
         return this.renderItem(item, index);
       }),
       this.loadingRenderer.render()));
   }
   renderVirtualScroll() {
-    return (globalSlimmerRegistry.h("div", { style: {
+    return (index.h("div", { style: {
         height: `${this.source.length * this.approxItemHeight}px`,
         position: 'relative',
       } },
-      globalSlimmerRegistry.h("div", { class: "virtual-scroll-block", style: {
+      index.h("div", { class: "virtual-scroll-block", style: {
           transform: `translateY(${this.positionConfig.transformY}px)`,
         } },
         this.source
@@ -2821,10 +2872,10 @@ var __decorate$1 = (undefined && undefined.__decorate) || function (decorators,
  */
 class VegaVirtualScrollLoadingIndicatorRenderer extends globalSlimmerRegistry.VegaSlimmer {
   render() {
-    return (this.isLoading && (globalSlimmerRegistry.h("div", { class: "virtual-scroll-more-loading" },
-      globalSlimmerRegistry.h("vega-flex", { gap: "size-8", direction: "row" },
-        globalSlimmerRegistry.h("vega-loading-indicator", { size: "small" }),
-        globalSlimmerRegistry.h("vega-font", { variant: "font-field-value", color: "text-secondary" }, "Loading")))));
+    return (this.isLoading && (index.h("div", { class: "virtual-scroll-more-loading" },
+      index.h("vega-flex", { gap: "size-8", direction: "row" },
+        index.h("vega-loading-indicator", { size: "small" }),
+        index.h("vega-font", { variant: "font-field-value", color: "text-secondary" }, "Loading")))));
   }
 }
 __decorate$1([
@@ -2845,7 +2896,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 };
 const VegaVirtualScroll = class {
   constructor(hostRef) {
-    globalSlimmerRegistry.registerInstance(this, hostRef);
+    index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
     this.modeController = new VegaVirtualScrollModeController();
     this.positionController = new VegaVirtualScrollPositionController();
@@ -2903,9 +2954,9 @@ const VegaVirtualScroll = class {
   async scrollToIndex(index) {
   }
   render() {
-    return component.sanitizeVegaComponent(globalSlimmerRegistry.h(globalSlimmerRegistry.Host, null, this.renderer.render()), this.host);
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
   }
-  get host() { return globalSlimmerRegistry.getElement(this); }
+  get host() { return index.getElement(this); }
   static get watchers() { return {
     "scrollTop": ["watchScrollTop"],
     "source": ["watchSourceChange"],