@globalpayments/vega 2.16.0 → 2.17.0

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

@@ -14,7 +14,7 @@ import { VegaCalendarMonthViewRenderer } from './slimmers/month-view/renderers/v
 import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/vega-calendar-view-with-time-renderer';
 import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
-import { VegaChange, VegaEventClick } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaChange, VegaDateDblClick, VegaEventClick, } from '../../helpers/event-manager/eventID/vegaEventId';
 import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
 import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
@@ -51,6 +51,7 @@ export class VegaCalendar {
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
     this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
+    this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
     this.calendarEvents = [];
@@ -65,10 +66,13 @@ export class VegaCalendar {
     this.timeFormat = '24-hour';
   }
   /**
-   * watch the state calendar current period change
+   * Tracks changes to the current period state.
+   *
+   * @param {CalendarPeriod} newValue Specifies the new calendar period.
+   * @param {CalendarPeriod} oldValue Specifies the old calendar period.
    */
-  watchCurrentPeriodChange() {
-    methodPlaceholder();
+  watchCurrentPeriodChange(newValue, oldValue) {
+    methodPlaceholder(newValue, oldValue);
   }
   /**
    * Watch the view mode change
@@ -261,6 +265,46 @@ export class VegaCalendar {
           }
         }
       }
+    }, {
+      "method": "vegaDateDblClick",
+      "name": "vegaDateDblClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying that a calendar date item has been double-clicked."
+      },
+      "complexType": {
+        "original": "VegaCalendarDateClickInfo",
+        "resolved": "VegaCalendarDateType & { hour: number; }",
+        "references": {
+          "VegaCalendarDateClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "dateDblClick",
+      "name": "dateDblClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying that a calendar date item has been double-clicked."
+      },
+      "complexType": {
+        "original": "VegaCalendarDateClickInfo",
+        "resolved": "VegaCalendarDateType & { hour: number; }",
+        "references": {
+          "VegaCalendarDateClickInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -337,6 +381,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);

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

@@ -37,7 +37,6 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    */
   async watchIsDropdownShow() {
     if (this.isDropdownShow) {
-      await this.renderer.listRenderer.scrollToIndex();
       this.showEventEmitter.emit();
     }
     else {
@@ -105,9 +104,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "renderer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownAppenderController.prototype, "listRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "searchRenderer", void 0);

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

@@ -6,6 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutationObserverSlimmer';
+import ChangeManager from '../../../../helpers/change-manager/changeManager';
+import DomNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory';
+import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/eventID/vegaInternalEventId';
 /**
  * The controller for the table children components.
  */
@@ -63,7 +66,9 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
    * The function "watchSource" synchronizes the dropdown current data.
    */
   watchSource() {
-    this.syncUpDropdownCurrentData();
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.syncUpDropdownCurrentData();
+    }
   }
   /**
    * The function checks if a given label exists in a label set.
@@ -93,6 +98,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
     }
     else {
       this.collectKeyAndLabelFromSlot();
+      this.notifyTemplateItemsChange();
     }
   }
   /**
@@ -122,6 +128,13 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
     this.keySet.clear();
     this.labelSet.clear();
   }
+  /**
+   * The function `notifyTemplateItemsChange` notifies changes to dropdown items within a container element.
+   */
+  notifyTemplateItemsChange() {
+    const container = this.renderer.getDropdownContentBoxRef() || this.host;
+    ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownTemplateItemsChange), container.querySelectorAll('vega-dropdown-item'));
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -0,0 +1,142 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { extractNumberFromString } from '../../../../utils/ui';
+import { LogUtility } from '../../../../utils/log';
+/**
+ * The `VegaDropdownScrollableController` class in TypeScript manages the behavior of a scrollable dropdown component,
+ * adjusting list container height and scrolling to specific indexes based on render mode and selected source key.
+ */
+export class VegaDropdownScrollableController extends VegaSlimmer {
+  /**
+   * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
+   * if the dropdown is shown in a certain render mode.
+   */
+  async watchIsDropdownShow() {
+    if (this.isDropdownShow) {
+      this.adjustListContainerMaxHeight();
+      await this.scrollToSelectedIndex();
+    }
+  }
+  /**
+   * The function scrollToSelected asynchronously scrolls to a selected index based on the render mode.
+   */
+  async scrollToSelectedIndex() {
+    this.renderModeController.isSourceRenderMode()
+      ? await this.scrollToVirtualIndex()
+      : this.scrollToTemplateIndex();
+  }
+  /**
+   * The function scrollToVirtualIndex asynchronously scrolls to a specific index in a virtual list based
+   * on the selected key.
+   */
+  async scrollToVirtualIndex() {
+    const index = this.sourceForRender.findIndex((item) => item.key === this.getSelectedKey());
+    index >= 0 && (await this.listRenderer.getVirtualScrollRef().scrollToIndex(index));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-single-template-e2e}
+   * @see{module:vega-dropdown-scroll-to-selected-key-in-multiple-template-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function scrollToTemplateIndex scrolls the dropdown content box to the selected item key.
+   */
+  scrollToTemplateIndex() {
+    const scrolledKey = this.getSelectedKey();
+    if (scrolledKey) {
+      this.renderer
+        .getDropdownContentBoxRef()
+        .querySelector(`vega-dropdown-item[item-key='${scrolledKey}']`)
+        .scrollIntoView();
+    }
+  }
+  /**
+   * The function `getSelectedKey` returns the selected key based on the `selectType` condition.
+   *
+   * @returns {string} The `getSelectedKey` method returns a string value. If `this.selectType` is equal to
+   * 'multiple', it returns the first element of the `selectedSourceKey` array as a string. Otherwise, it
+   * returns the `selectedSourceKey` value as a string.
+   */
+  getSelectedKey() {
+    return this.selectType === 'multiple'
+      ? this.selectedSourceKey[0]
+      : this.selectedSourceKey;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-dropdown-with-matchContainerHeight-e2e}
+   * @see{module:vega-dropdown-without-matchContainerHeight-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * we only calculate surplus space of bottom, we should calculate maxHeight more accurately here.
+   * such as minus the gap of dropdown, the dropdown padding top and bottom, the gap of bottom.
+   * if with searchable, we should minus the height of searchable.
+   * if the dropdown in the top of host, we should only minus top of distance from vega-dropdown to vega-dropdown-container.
+   */
+  adjustListContainerMaxHeight() {
+    const dropdownRef = this.renderer.getDropdownContentBoxRef();
+    const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
+    const excludeTop = this.searchable ? 59 : 8;
+    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
+    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
+    dropdownRef.style.maxHeight = 'unset';
+    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.");
+    }
+    else {
+      this.setItemsContainerMaxHeight(height);
+    }
+  }
+  /**
+   * The function `setItemsContainerMaxHeight` adjusts the maximum height of the items container based on
+   * the render mode.
+   *
+   * @param {number} maxHeight - The `maxHeight` parameter is a number that represents the maximum height
+   * in pixels that the items container should have.
+   */
+  setItemsContainerMaxHeight(maxHeight) {
+    if (this.renderModeController.isSourceRenderMode()) {
+      this.listRenderer.getVirtualScrollRef().viewportMaxHeight = maxHeight;
+    }
+    else {
+      const templateContainerRef = this.listRenderer.getTemplateContainerRef();
+      templateContainerRef.style.overflowY = 'auto';
+      templateContainerRef.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "sourceForRender", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "selectedSourceKey", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "searchable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "listRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownScrollableController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentMethod('watchIsDropdownShow')
+], VegaDropdownScrollableController.prototype, "watchIsDropdownShow", null);

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

@@ -6,14 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { extractNumberFromString } from '../../../../utils/ui';
-import { LogUtility } from '../../../../utils/log';
 export class VegaDropdownListRenderer extends VegaSlimmer {
-  async scrollToIndex() {
-    this.adjustListContainerMaxHeight();
-    const index = this.sourceForRender.findIndex((item) => item.key ===
-      (this.selectType === 'multiple' ? this.selectedSourceKey[0] : this.selectedSourceKey));
-    index >= 0 && (await this.virtualScrollRef.scrollToIndex(index));
+  constructor() {
+    super(...arguments);
+    this.defaultMaxHeightOfItemsContainer = 400;
   }
   /**
    * The below method is e2e-test covered in
@@ -23,6 +19,9 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
   getVirtualScrollRef() {
     return this.virtualScrollRef;
   }
+  getTemplateContainerRef() {
+    return this.templateContainerRef;
+  }
   renderBySource() {
     return (h(Fragment, null,
       this.renderLoading(),
@@ -57,64 +56,28 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
             return item['children']
               ? this.groupLevelRenderer.render(item, index, fixHeight)
               : this.itemLevelRenderer.render(item, fixHeight);
-          }, viewportMaxHeight: this.maxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
+          }, viewportMaxHeight: this.defaultMaxHeightOfItemsContainer, ref: (e) => (this.virtualScrollRef = e), isLoading: this.isLazyLoading }))));
   }
   renderDropdownListBySlot() {
     return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
-      }, style: {
-        maxHeight: `${this.maxHeightOfItemsContainer}px`,
-      } },
+      }, ref: (ref) => (this.templateContainerRef = ref) },
       h("slot", { name: "items" })));
   }
-  /**
-   * we only calculate surplus space of bottom, we should calculate maxHeight more accurately here.
-   * such as minus the gap of dropdown, the dropdown padding top and bottom, the gap of bottom.
-   * if with searchable, we should minus the height of searchable.
-   * if the dropdown in the top of host, we should only minus top of distance from vega-dropdown to vega-dropdown-container.
-   * The below method is e2e-test covered in
-   * @see{module:vega-dropdown-with-matchContainerHeight-e2e}
-   * @see{module:vega-dropdown-without-matchContainerHeight-e2e}
-   */
-  /* istanbul ignore next */
-  adjustListContainerMaxHeight() {
-    const dropdownRef = this.renderer.getDropdownContentBoxRef();
-    const dropdownMaxHeight = extractNumberFromString(dropdownRef.style.maxHeight);
-    const excludeTop = this.searchable ? 59 : 8;
-    const paddingSpace = dropdownRef.classList.contains('vega-placement-top') ? 0 : 8 + 8;
-    const height = dropdownMaxHeight - excludeTop - 8 - paddingSpace;
-    dropdownRef.style.maxHeight = 'unset';
-    if (height <= 40) {
-      this.maxHeightOfItemsContainer = 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.");
-    }
-    else {
-      this.maxHeightOfItemsContainer = height;
-    }
-  }
 }
 __decorate([
   MapToComponentField()
-], VegaDropdownListRenderer.prototype, "isLoading", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownListRenderer.prototype, "searchString", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDropdownListRenderer.prototype, "selectType", void 0);
+], VegaDropdownListRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
-], VegaDropdownListRenderer.prototype, "searchable", void 0);
+], VegaDropdownListRenderer.prototype, "isLoading", void 0);
 __decorate([
   MapToComponentField()
-], VegaDropdownListRenderer.prototype, "selectedSourceKey", void 0);
+], VegaDropdownListRenderer.prototype, "searchString", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "itemDisplayRule", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaDropdownListRenderer.prototype, "maxHeightOfItemsContainer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "sourceForRender", void 0);
@@ -126,7 +89,10 @@ __decorate([
 ], VegaDropdownListRenderer.prototype, "groupLevelRenderer", void 0);
 __decorate([
   MapToComponentField()
-], VegaDropdownListRenderer.prototype, "renderer", void 0);
+], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
 __decorate([
   MapToComponentField()
-], VegaDropdownListRenderer.prototype, "isLazyLoading", void 0);
+], VegaDropdownListRenderer.prototype, "isDropdownShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "renderModeController", void 0);

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

@@ -47,8 +47,13 @@ export class VegaDropdownRenderer extends VegaSlimmer {
       this.renderContentSlot(),
       this.renderDropdown()));
   }
+  /**
+   * 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() ? h("slot", null) : h("slot", { name: "dropdown-content" });
+    return this.renderModeController.isSourceRenderMode() ? (h("slot", null)) : (h(Fragment, null,
+      h("slot", { name: "dropdown-content" }),
+      h("slot", null)));
   }
   renderDropdown() {
     const eventPreventFlag = this.host && this.host.dataset.vegaNoEventPrevent === 'true' ? 'true' : 'false';

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

@@ -56,6 +56,7 @@ export class VegaDropdownItemStateController extends SubStateObserverSlimmer {
           },
         },
       ],
+      pullStatesWhenReattached: true,
     });
   }
 }

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

@@ -43,16 +43,18 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
   }
   renderLabel() {
-    if (this.label) {
+    // 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 (h("span", { class: "vega-dropdown-item-label" },
+        h("slot", null)));
+    }
+    else {
       return (h(Fragment, null,
         h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
-    else {
-      return (h("span", { class: "vega-dropdown-item-label" },
-        h("slot", null)));
-    }
   }
   renderCounter() {
     return (this.count > 0 && (h("div", { class: "item-counter" },

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

@@ -86,7 +86,7 @@ export class VegaDropdownItem {
         "text": "Specifies the key for the dropdown item."
       },
       "attribute": "item-key",
-      "reflect": false
+      "reflect": true
     },
     "count": {
       "type": "number",

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

@@ -27,6 +27,7 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/sl
 import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaDropdownRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-dropdown/runtime-metrics-payload-definition';
+import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller';
 export class VegaDropdown {
   constructor() {
     this.globalSlimmers = {};
@@ -47,6 +48,7 @@ export class VegaDropdown {
     this.childrenController = new VegaDropdownChildrenController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
+    this.scrollableController = new VegaDropdownScrollableController();
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
@@ -59,7 +61,6 @@ export class VegaDropdown {
     this.itemDisplayRuleNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
     this.searchString = null;
-    this.maxHeightOfItemsContainer = 400;
     this.isDropdownShow = false;
     /**
      * Specifies the trigger mode for the dropdown.
@@ -693,7 +694,6 @@ export class VegaDropdown {
   }; }
   static get states() { return {
     "searchString": {},
-    "maxHeightOfItemsContainer": {},
     "isDropdownShow": {},
     "sourceForRender": {}
   }; }
@@ -1036,6 +1036,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "scrollableController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
 import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, } from '../../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/eventID/vegaInternalEventId';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
   constructor() {
@@ -38,6 +39,22 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownSearch, (payload) => {
       this.searchEventEmitter.emit(payload.detail);
     });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaInternalDropdownTemplateItemsChange, 
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-select-template-single-select-e2e}
+     * @see{module:vega-input-select-template-multiple-select-e2e}
+     */
+    /* istanbul ignore next */
+    (payload) => {
+      const addedItems = Array.from(payload)
+        .filter((item) => !this.source.find((sourceItem) => sourceItem.id === item.itemKey))
+        .map((item) => ({
+        id: item.itemKey,
+        displayName: item.label,
+      }));
+      this.sourceController.appendSourceItems(addedItems);
+    });
   }
 }
 __decorate([
@@ -52,3 +69,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaInputSelectValueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "source", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-items-slot-controler.js

@@ -0,0 +1,62 @@
+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 { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutationObserverSlimmer';
+import { TagNameMutationFilter } from '../../../../helpers/slimmers/mutation-observer/mutationObserverFilters';
+/**
+ * The class `VegaInputSelectItemsSlotController` extends `VegaSlimmer` and manages
+ * appending host items to a dropdown element.
+ */
+export class VegaInputSelectItemsSlotController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      mutationFilter: TagNameMutationFilter('VEGA-DROPDOWN-ITEM'),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-input-select-template-slot-change-e2e}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => this.appendHostItemsToDropdown(),
+    });
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    this.appendHostItemsToDropdown();
+  }
+  /**
+   * The function appends host items to a dropdown element.
+   */
+  appendHostItemsToDropdown() {
+    const items = this.host.querySelector('[slot=items]');
+    const itemsSlotRef = this.vegaInputSelectDropdownRenderer.getItemsSlotRef();
+    if (items && itemsSlotRef) {
+      itemsSlotRef.remove();
+      this.vegaInputSelectDropdownRenderer.getDropdownRef().append(items);
+    }
+  }
+}
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelectItemsSlotController.prototype, "mutationObserver", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemsSlotController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemsSlotController.prototype, "vegaInputSelectDropdownRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaInputSelectItemsSlotController.prototype, "componentDidLoad", null);

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

@@ -28,6 +28,17 @@ export class VegaInputSelectSourceController extends VegaSlimmer {
   appendSourceItems(items) {
     this.source = [...this.source, ...items];
   }
+  /**
+   * This TypeScript function retrieves an item from a source array based on its ID.
+   *
+   * @param {SelectValueType<SelectType>} id - The `id` parameter in the `getItem` function is of type `SelectValueType<SelectType>`,
+   * which means it can accept a value that corresponds to the `SelectType` defined in the function.
+   * @returns { Nullable<SelectSourceItem>} The `getItem` function is returning a `SelectSourceItem` object that matches the provided
+   * `id`, or `null` if no matching item is found in the `source` array.
+   */
+  getItem(id) {
+    return this.source.find((item) => item.id === id);
+  }
 }
 __decorate([
   MapToComponentField({ writable: true })