@globalpayments/vega 2.35.0 → 2.36.0

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer.js

@@ -0,0 +1,316 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { Icons } from '../../assets/icons';
+export class VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.startDropdownRef = {
+      month: null,
+      year: null,
+    };
+    this.endDropdownRef = {
+      month: null,
+      year: null,
+    };
+    /**
+     * When interacting with open vega-dropdown, prevent it from collapsing since is treated as outside element by litepicker
+     *
+     * @param {MouseEvent} event - Click event
+     */
+    this.onVegaDropdownContentBoxClick = (event) => {
+      const elementOnClick = event.target;
+      if (elementOnClick.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
+        this.datePickerCalendar.classList.remove('vega-force-hidden');
+        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+        this.datePickerCalendar.shadowRoot.querySelector('.litepicker').style.display =
+          'block';
+      }
+    };
+    /**
+     * Prevent collapsing of dropdown when selecting option. VD-5544
+     *
+     * @param {Event} event - Focus event
+     */
+    this.onVegaDropdownContentBoxActivate = (event) => {
+      const element = event.target;
+      if (element.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
+        this.isMonthsOrYearsDropdownContentBoxOnFocus = true;
+        element.classList.remove('vega-force-hidden');
+      }
+      else {
+        this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
+      }
+    };
+  }
+  /**
+   * This method creates months and years dropdowns and replaces the current default select elements of litepicker
+   *
+   * @param {Litepicker} datePicker - Litepicker instance
+   */
+  renderMonthYearDropdowns(datePicker) {
+    this.datePicker = datePicker;
+    this.datePickerCalendar = this.vegaDatePickerCalendarRenderer.getCalendarContainerRef();
+    this.renderMonthButton(this.datePicker.ui);
+    this.renderYearButton(this.datePicker.ui);
+    this.initSetup();
+  }
+  render() {
+    return (h("div", { class: "month-year-dropdown-container", style: { display: 'none' } },
+      h("div", { class: "start-date-month-year" },
+        this.renderDropdown('month', 'start'),
+        this.renderDropdown('year', 'start')),
+      h("div", { class: "end-date-month-year" },
+        this.renderDropdown('month', 'end'),
+        this.renderDropdown('year', 'end'))));
+  }
+  /**
+   * From default months select dropdowns, get passed options and create vega-dropdown component with months as options
+   *
+   * @param {HTMLElement} ui - Litepicker ui
+   */
+  renderMonthButton(ui) {
+    ui.querySelectorAll('select.month-item-name').forEach((item, index) => {
+      this.syncDropdownOptions('month', item, index);
+      const selectedOptionValue = this.getSelectedOptionFromSelect(item);
+      const value = VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(selectedOptionValue)];
+      const monthButton = document.createElement('span');
+      monthButton.classList.add('dropdown-current-value');
+      monthButton.innerText = `${this.translationSlimmer.t(value)}`;
+      this.appendDropdownIconToButton(monthButton);
+      if (item.parentNode) {
+        item.parentNode.replaceChild(monthButton, item);
+      }
+      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
+      if (dropdown) {
+        this.updateDropdownValueAndTarget(monthButton, dropdown, item.value);
+      }
+      monthButton.addEventListener('click', () => {
+        this.setDropdownAsActive(monthButton);
+      });
+    });
+  }
+  /**
+   * From default years select dropdowns, get passed options and create vega-dropdown component with years as options
+   *
+   * @param {HTMLElement} ui - Litepicker ui
+   */
+  renderYearButton(ui) {
+    ui.querySelectorAll('select.month-item-year').forEach((item, index) => {
+      this.syncDropdownOptions('year', item, index);
+      const value = this.getSelectedOptionFromSelect(item);
+      const yearButton = document.createElement('span');
+      yearButton.classList.add('dropdown-current-value');
+      yearButton.innerText = `${this.translationSlimmer.t(value)}`;
+      this.appendDropdownIconToButton(yearButton);
+      if (item.parentNode) {
+        item.parentNode.replaceChild(yearButton, item);
+      }
+      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
+      if (dropdown) {
+        this.updateDropdownValueAndTarget(yearButton, dropdown, item.value);
+      }
+      yearButton.addEventListener('click', () => {
+        this.setDropdownAsActive(yearButton);
+      });
+    });
+  }
+  getSelectedOptionFromSelect(select) {
+    const options = Array.from(select.querySelectorAll('option'));
+    const selectedOption = options.find((option) => option.selected);
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    return selectedOption.value;
+  }
+  /**
+   * Render vega-dropdown component
+   *
+   * @param {MonthOrYearType} type - Month or year dropdown
+   * @param {DateIndexType} dateIndex - start date index for both single or range and end date index for range date picker mode
+   */
+  renderDropdown(type, dateIndex) {
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", class: "vega-force-hidden", "match-target-width": "false", "max-height": "300", ref: (node) => {
+        this.onDropdownShowOrHide(node);
+        if (dateIndex === 'start') {
+          this.startDropdownRef[type] = node;
+        }
+        else {
+          this.endDropdownRef[type] = node;
+        }
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (input) => {
+          this.setDefaultViewValues(type, node);
+          this.monthYearDropdownClick(type, dateIndex, input.detail);
+        });
+      } },
+      h("span", null, type)));
+  }
+  /**
+   * When calendar opens, update sources for the vega-dropdown components for both months and years dropdown
+   *
+   * @param {MonthOrYearType} type - Month or year dropdown
+   * @param {HTMLSelectElement} select - Native select from litepicker ui
+   * @param {number} index - dropdown count
+   */
+  syncDropdownOptions(type, select, index) {
+    const options = select.querySelectorAll('option');
+    const dropdownOptions = Array.from(options).map((option) => ({
+      key: option.value,
+      label: this.translationSlimmer.t(option.text),
+      disabled: option.disabled ? true : false,
+    }));
+    if (type === 'month') {
+      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
+      if (dropdown) {
+        dropdown.source = dropdownOptions;
+      }
+    }
+    if (type === 'year') {
+      dropdownOptions.sort((a, b) => Number(a.key) - Number(b.key));
+      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
+      if (dropdown) {
+        dropdown.source = dropdownOptions;
+      }
+    }
+  }
+  /**
+   * Litepicker treats vega-dropdown-content-box as an external element that when dropdowns open and you click, it closes automaticall. This method is to initialize event listeners the moment months or years dropdown is opened to prevent litepicker from collpasing
+   *
+   * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
+   */
+  onDropdownShowOrHide(dropdown) {
+    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaShow', () => {
+      this.onDropdownShow();
+    });
+    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaHide', () => {
+      this.onDropdownHide();
+    });
+  }
+  setDefaultViewValues(type, node) {
+    if (type === 'month') {
+      const yearDropdown = node.nextElementSibling;
+      this.currentStartYearInView = parseInt(yearDropdown.selectedSourceKey);
+    }
+    else {
+      const monthDropdown = node.previousElementSibling;
+      this.currentStartMonthInView = parseInt(monthDropdown.selectedSourceKey);
+    }
+  }
+  appendDropdownIconToButton(parentElement) {
+    parentElement.innerHTML += `<vega-icon icon='${VegaInternalIconManager.getIconKey('caret-down')}'></vega-icon>`;
+    parentElement.tabIndex = 0;
+  }
+  monthYearDropdownClick(type, dateIndex, detail) {
+    const value = parseInt(detail);
+    this.updateDatePickerOnSelect(type, dateIndex, value);
+  }
+  updateDropdownValueAndTarget(target, dropdownRef, dropdownSelectedKey) {
+    const parentDiv = target.closest('div');
+    if (parentDiv) {
+      parentDiv.classList.add('dropdown-section');
+    }
+    dropdownRef.selectedSourceKey = dropdownSelectedKey;
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(dropdownRef, VegaInternalDropdownUpdateTarget), target);
+  }
+  updateDatePickerOnSelect(type, dateIndex, value) {
+    if (type === 'month') {
+      if (this.currentStartYearInView !== null) {
+        if (dateIndex === 'start') {
+          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value, 1));
+        }
+        if (dateIndex === 'end') {
+          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value - 1, 1));
+        }
+      }
+    }
+    else {
+      if (this.currentStartMonthInView !== null) {
+        if (dateIndex === 'start') {
+          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView, 1));
+        }
+        if (dateIndex === 'end') {
+          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView - 1, 1));
+        }
+      }
+    }
+  }
+  setDropdownAsActive(element) {
+    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
+    element.classList.add('active');
+  }
+  removeActiveDropdownClass() {
+    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
+  }
+  onDropdownShow() {
+    document.addEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
+    document.addEventListener('click', this.onVegaDropdownContentBoxClick);
+  }
+  onDropdownHide() {
+    this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
+    this.removeActiveDropdownClass();
+    document.removeEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
+    document.removeEventListener('click', this.onVegaDropdownContentBoxClick);
+  }
+  /**
+   * When you collapse date picker while vega-dropdown is still open, close vega-dropdown too
+   */
+  initSetup() {
+    const hideLitepicker = this.datePicker.hide.bind(this.datePicker);
+    this.datePicker.hide = async () => {
+      const activeElement = document.activeElement;
+      if (!this.isMonthsOrYearsDropdownContentBoxOnFocus &&
+        (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) !== 'VEGA-DROPDOWN-CONTENT-BOX') {
+        await this.closeOpenDropdowns();
+        hideLitepicker();
+      }
+    };
+  }
+  /**
+   * Close any open vega-dropdown when litepicker is collapse
+   */
+  async closeOpenDropdowns() {
+    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
+    await Promise.all(dropdowns
+      .flatMap((ref) => [ref.month, ref.year])
+      .filter(Boolean)
+      .map((dropdown) => {
+      if (dropdown) {
+        void dropdown.hide();
+      }
+    }));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'caret-down': Icons['caret-down'],
+  });
+})();
+VegaDatePickerMonthYearDropdownRenderer.monthName = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -12,7 +12,12 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.alterLitePickerHeader = (ui) => {
-      this.renderMonthName(ui);
+      if (this.showYearMonthDropdowns) {
+        this.monthYearDropdownRenderer.renderMonthYearDropdowns(this.datePicker);
+      }
+      else {
+        this.renderMonthName(ui);
+      }
       this.renderWeekdays(ui);
       this.renderPrevAndNextMonthButtons(ui);
     };
@@ -195,6 +200,12 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
   watchMode() {
     this.requireRefreshLitePicker = true;
   }
+  /**
+   * Update datePicker settings property if showYearMonthDropdowns is changed
+   */
+  watchShowYearMonthDropdowns() {
+    this.requireRefreshLitePicker = true;
+  }
   /**
    * get the reference of datePicker
    *
@@ -229,7 +240,8 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
    */
   renderMonthName(ui) {
     ui.querySelectorAll('.month-item-name').forEach((item) => {
-      item.innerText = this.translationSlimmer.t(item.innerText);
+      const currentMonthName = item.innerText;
+      item.innerText = this.translationSlimmer.t(currentMonthName);
     });
   }
   resetTodayByTimezone() {
@@ -326,6 +338,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerCalendarController", void 0);
@@ -347,6 +362,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthYearDropdownRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
@@ -386,3 +404,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchMode')
 ], VegaDatePickerCalendarRenderer.prototype, "watchMode", null);
+__decorate([
+  MapToComponentMethod('watchShowYearMonthDropdowns')
+], VegaDatePickerCalendarRenderer.prototype, "watchShowYearMonthDropdowns", null);

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

@@ -18,7 +18,11 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-prefix" },
         h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
           // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => this.focusInput() })));
+          onClick: () => {
+            if (!this.disabled) {
+              this.focusInput();
+            }
+          } })));
     };
     /**
      * return true if input is enabled, otherwise false
@@ -63,9 +67,11 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
         disabled: this.disabled,
       } },
       this.renderLabel(),
-      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) }, this.mode === 'range'
-        ? this.vegaDatePickerRangeInputRenderer.render()
-        : this.vegaDatePickerSingleInputRenderer.render())));
+      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) },
+        this.mode === 'range'
+          ? this.vegaDatePickerRangeInputRenderer.render()
+          : this.vegaDatePickerSingleInputRenderer.render(),
+        this.showYearMonthDropdowns && this.monthYearDropdownRenderer.render())));
   }
 }
 (() => {
@@ -95,6 +101,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "showYearMonthDropdowns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);
@@ -107,3 +116,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "monthYearDropdownRenderer", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -637,4 +637,28 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
 .button-previous-month svg {
   width: 12px;
   height: 16px;
+}
+
+.litepicker .month-item-header > div.dropdown-section {
+  display: flex;
+  gap: 12px;
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
+  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
+  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -29,6 +29,7 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
 /**
  * @vegaVersion 1.3.0
  */
@@ -86,6 +87,7 @@ export class VegaDatePicker {
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
     this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
+    this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -179,6 +181,13 @@ export class VegaDatePicker {
      * @vegaVersion 2.33.0
      */
     this.showClearIcon = true;
+    /**
+     * Determines whether to show months and years dropdown in date picker
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.showYearMonthDropdowns = false;
     /**
      * Specifies whether the date picker field is disabled.
      *
@@ -231,6 +240,9 @@ export class VegaDatePicker {
   watchAllowRepick() {
     methodPlaceholder();
   }
+  watchShowYearMonthDropdowns() {
+    methodPlaceholder();
+  }
   watchDisabled() {
     methodPlaceholder();
   }
@@ -641,6 +653,27 @@ export class VegaDatePicker {
       "reflect": false,
       "defaultValue": "true"
     },
+    "showYearMonthDropdowns": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Determines whether to show months and years dropdown in date picker\nIf set to true, date picker calendar will have months and years dropdown"
+      },
+      "attribute": "show-year-month-dropdowns",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -791,6 +824,9 @@ export class VegaDatePicker {
     }, {
       "propName": "allowRepick",
       "methodName": "watchAllowRepick"
+    }, {
+      "propName": "showYearMonthDropdowns",
+      "methodName": "watchShowYearMonthDropdowns"
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
@@ -853,6 +889,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);

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

@@ -6,6 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender-slimmer';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -16,20 +19,19 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    * 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.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget));
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -61,6 +63,37 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
       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.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget), (target) => {
+      this.target = target;
+      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
+    });
+  }
 }
 __decorate([
   MapToComponentField()
@@ -113,6 +146,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownAppenderController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
 __decorate([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);