@globalpayments/vega 2.16.0 → 2.18.0

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -0,0 +1,490 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, Element, Host, Prop, Watch, h, State, Event } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaInputPhoneNumberRenderer } from './slimmers/renderers/vega-input-phone-number-renderer';
+import { CountrySelectRenderer } from './slimmers/renderers/country-select-renderer';
+import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-input-renderer';
+import { getCountryCallingCode } from 'libphonenumber-js';
+import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { ValidPhoneNumberRule } from '../../helpers/validator/rules/validPhoneNumberRule';
+import { CountrySelectController } from './slimmers/controllers/country-select-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange, VegaCountryChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { InputPhoneNumberRequiredRule } from '../../helpers/validator/rules/inputPhoneNumberRequiredRule';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+export class VegaInputPhoneNumber {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.valueController = new VegaInputPhoneNumberValueController();
+    this.inputPhoneNumberRenderer = new VegaInputPhoneNumberRenderer();
+    this.countrySelectRenderer = new CountrySelectRenderer();
+    this.phoneNumberInputRenderer = new PhoneNumberInputRenderer();
+    this.countrySelectController = new CountrySelectController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaChange);
+    this.countryChangeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaCountryChange);
+    this.inputPhoneNumberEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired
+            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            : null,
+        },
+        {
+          propertyName: '',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+        {
+          propertyName: 'countryCode',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '+1',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputPhoneNumberRenderer.getInputPhoneNumberContainerRef(),
+      touchableAreaGetter: () => [this.phoneNumberInputRenderer.getInputRef()],
+    });
+    this.countryCodeSearchString = '';
+    this.phoneNumberInputValue = '';
+    /**
+     * Specifies the label or title for the phone number input field.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input field.
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the phone number input field.
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the phone number input field is required.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Determines whether the phone number input field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Specifies the default country calling code using the two-letter uppercase country code.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.countryCode = CountrySelectController.defaultCountryCode;
+    /**
+     * Specifies the countries available for selection.
+     *
+     * Note: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes.
+     */
+    this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
+    /**
+     * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = `+${getCountryCallingCode(this.countryCode)}`;
+    /**
+     * Specifies custom validation rules for the phone number input field.
+     */
+    this.validationRules = [];
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the phone number input field should undergo automatic validation
+     *    during the user's input.
+     */
+    this.autoValidation = true;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     */
+    this.hint = '';
+  }
+  watchCountryCode(newCountryCode, oldCountryCode) {
+    methodPlaceholder(newCountryCode, oldCountryCode);
+  }
+  watchValue(value) {
+    methodPlaceholder(value);
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.inputPhoneNumberRenderer.render()), this.host);
+  }
+  static get is() { return "vega-input-phone-number"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input-phone-number.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input-phone-number.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the label or title for the phone number input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'small'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the phone number input field."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is required."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaCountryCode",
+        "resolved": "\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the default country calling code using the two-letter uppercase country code."
+      },
+      "attribute": "country-code",
+      "reflect": true,
+      "defaultValue": "CountrySelectController.defaultCountryCode"
+    },
+    "allowedCountryCodes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCountryCode[]",
+        "resolved": "CountryCode[]",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the countries available for selection.\n\nNote: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes."
+      },
+      "defaultValue": "CountrySelectController.defaultAllowedCountryCodes"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the value of the phone number input in [E.164]{@link https ://en.wikipedia.org/wiki/E.164} format."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "`+${getCountryCallingCode(this.countryCode)}`"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/formFieldValidationRule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies custom validation rules for the phone number input field."
+      },
+      "defaultValue": "[]"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the current value in the field is considered valid\n   based on the defined validation rules."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field should undergo automatic validation\n   during the user's input."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
+      },
+      "attribute": "hint",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "countryCodeSearchString": {},
+    "phoneNumberInputValue": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaCountryChange",
+      "name": "vegaCountryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "countryChange",
+      "name": "countryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "countryCode",
+      "methodName": "watchCountryCode"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputPhoneNumber.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "phoneNumberInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "formFieldController", 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 })

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

@@ -23,12 +23,9 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       if (this.selectType === 'multiple') {
         newValue = newValue;
         oldValue = oldValue;
-        const validValue = [];
-        this.source.forEach((sourceItem) => {
-          if (newValue.includes(sourceItem.id)) {
-            validValue.push(sourceItem.id);
-          }
-        });
+        const validValue = newValue
+          ? newValue.filter((value) => this.sourceController.getItem(value))
+          : [];
         if (!isArrayEqual(validValue, oldValue, true)) {
           this.setValue(validValue);
           this.changeEventEmitter.emit(validValue);
@@ -43,7 +40,7 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       }
       else {
         if (newValue !== oldValue) {
-          const sourceItem = this.source.find((sourceItem) => sourceItem.id === newValue);
+          const sourceItem = this.sourceController.getItem(newValue);
           this.setValue(sourceItem ? sourceItem.id : '');
           this.changeEventEmitter.emit(this.value);
           ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
@@ -89,15 +86,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "selectType", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectValueController.prototype, "source", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputSelectValueController.prototype, "handleValueChange", void 0);