@globalpayments/vega 2.73.0 → 2.76.0

package/dist/cjs/vega-input-select.cjs.entry.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-58ea899e.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const component = require('./component-1e352960.js');
-const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
+const breakpoints = require('./breakpoints-751d433a.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const ui = require('./ui-9e181079.js');
-const responsiveFormatFacade = require('./responsive-format-facade-96c5f598.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
+const ui = require('./ui-234ea151.js');
+const responsiveFormatFacade = require('./responsive-format-facade-ea59bdcd.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
+const vegaEventId = require('./vega-event-id-ee01d8dd.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
 const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 const array = require('./array-249289f2.js');
 const changeManager = require('./change-manager-a297e4d2.js');
@@ -18,43 +19,38 @@ const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const chevronUp = require('./chevron-up-21465cf7.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
-const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-6e3e14fd.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-6a591353.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-536d29fc.js');
-const typeGuard = require('./type-guard-69d2cf01.js');
+const internalIconManager = require('./internal-icon-manager-c989189a.js');
+const index$1 = require('./index-592b4052.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-102f37c7.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-7f065ee1.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-84435957.js');
+const typeGuard = require('./type-guard-407ba0b8.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
-const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
+const translationSlimmer = require('./translation-slimmer-4533bd67.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
-require('./try-get-document-c0ebd39a.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
-require('./vega-env-manager-23b8b23c.js');
-require('./function-extension-78ec27e0.js');
-require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./dark-mode-style-controller-c21172aa.js');
+require('./feature-flag-controller-04cb1e69.js');
+require('./index-f054eb5d.js');
 require('./observer-f49483e8.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./vega-nonce-manager-df69d3ed.js');
-require('./internal-vega-event-manager-d587a33c.js');
-require('./dto-renderer-manager-bd2bd447.js');
-require('./code-block-823cd481.js');
+require('./icon-manager-c12c6ea9.js');
+require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./misc-3d30df91.js');
+require('./try-get-document-c0ebd39a.js');
 require('./string-39438062.js');
-require('./object-e2e28e3d.js');
-require('./translation-5f9f9c0c.js');
-require('./base-renderer-0a3b62b7.js');
-require('./feature-flag-controller-ce2162c8.js');
-require('./index-4d7bce1a.js');
-require('./wait-for-vega-handler-5469ff80.js');
-require('./sub-state-observer-slimmer-6afa62f5.js');
+require('./internal-translation-controller-053eb0f1.js');
+require('./sub-state-observer-slimmer-1dfbc4c3.js');
+require('./internal-vega-event-manager-f7ecf3d4.js');
+require('./vega-env-manager-23b8b23c.js');
 require('./typography-4560e7f1.js');
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -86,36 +82,36 @@ class VegaInputSelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
   renderLabel() {
     return (this.label && (index.h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaLabelButtonClick, this.handleLabelButtonClick);
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.VegaLabelButtonClick, this.handleLabelButtonClick);
       } })));
   }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "disabled", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "size", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "hint", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "label", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "required", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "labelSuffixButtonConfig", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "labelButtonClickEventEmitter", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField({ componentFieldName: 'vegaInputSelectDropdownRenderer' })
 ], VegaInputSelectRenderer.prototype, "dropdownRenderer", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -140,21 +136,21 @@ class VegaInputSelectDropdownController extends globalSlimmerRegistry.VegaSlimme
    * @param {HTMLElement} dropdownRef - The `dropdownRef` parameter is a reference to the HTML element representing the dropdown component.
    */
   addDropdownObserver(dropdownRef) {
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownShow, (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaDropdownShow, (payload) => {
       this.onDropdownShow();
       this.showEventEmitter.emit(payload.detail);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownHide, (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaDropdownHide, (payload) => {
       this.onDropdownHide();
       this.hideEventEmitter.emit(payload.detail);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownClick, async (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaDropdownClick, async (payload) => {
       this.vegaInputSelectValueController.setValue(await payload.host.getSelection());
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownSearch, (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaDropdownSearch, (payload) => {
       this.searchEventEmitter.emit(payload.detail);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaSearchTrigger, (payload) => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaSearchTrigger, (payload) => {
       this.searchTriggerEventEmitter.emit(payload.detail);
     });
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaInternalEventId.VegaInternalDropdownTemplateItemsChange, 
@@ -173,43 +169,43 @@ class VegaInputSelectDropdownController extends globalSlimmerRegistry.VegaSlimme
       }));
       this.sourceController.appendSourceItems(addedItems);
     });
-    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaReset, async () => {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaReset, async () => {
       this.vegaInputSelectValueController.setValue(this.selectType === 'multiple' ? [] : '');
     });
   }
 }
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaInputSelectDropdownController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaSearch", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "searchEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "searchTriggerEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaInputSelectValueController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "sourceController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "source", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "showEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "hideEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "selectType", void 0);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -277,6 +273,7 @@ class VegaInputSelectValueController extends globalSlimmerRegistry.VegaSlimmer {
   setValue(value) {
     if (this.valueGuard(value)) {
       this.value = value;
+      this.vegaInputSelectItemController.setSelectedItem();
     }
   }
   /**
@@ -297,28 +294,120 @@ class VegaInputSelectValueController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaInputSelectValueController.prototype, "value", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectValueController.prototype, "selectType", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectValueController.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectValueController.prototype, "sourceController", void 0);
-__decorate$6([
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectValueController.prototype, "vegaInputSelectItemController", void 0);
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectValueController.prototype, "vegaDropdownProps", void 0);
-__decorate$6([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentMethod('watchValue')
 ], VegaInputSelectValueController.prototype, "handleValueChange", void 0);
 
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `VegaInputSelectItemController` class is a TypeScript React component that controls the state of selected item. */
+class VegaInputSelectItemController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Set initial the value of selected item
+   */
+  componentWillLoad() {
+    this.setSelectedItem();
+  }
+  /**
+   * Reset the value of selected item based on select type
+   */
+  watchSelectType() {
+    if (this.selectType === 'multiple') {
+      this.selectedItem = [];
+      this.vegaInputSelectValueController.setValue([]);
+    }
+    else {
+      this.selectedItem = null;
+      this.vegaInputSelectValueController.setValue('');
+    }
+  }
+  /**
+   * Synchronizes the controller's selectedItem with the current value and the source data.
+   */
+  setSelectedItem() {
+    var _a;
+    if (this.selectType === 'multiple') {
+      const updatedItem = this.value.map((itemValue) => this.sourceController.getItem(itemValue));
+      const originalItem = this.selectedItem
+        ? this.selectedItem.filter((item) => this.value.includes(item === null || item === void 0 ? void 0 : item.id))
+        : [];
+      this.selectedItem = this.updateSelectedItemUnderMultiple(originalItem, updatedItem);
+    }
+    else {
+      const updatedItem = this.sourceController.getItem(this.value);
+      if (!this.value || this.value !== ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.id)) {
+        this.selectedItem = null;
+      }
+      if (updatedItem) {
+        this.selectedItem = updatedItem;
+      }
+    }
+  }
+  /**
+   * Updates the selected items array under multiple selection mode.
+   *
+   * @param {SelectSourceItem[]} originalItem - the original selected items array.
+   * @param {SelectSourceItem[]} updatedItem - the updated selected items array.
+   * @returns {SelectSourceItem[]} The updated selected items array.
+   */
+  updateSelectedItemUnderMultiple(originalItem, updatedItem) {
+    const map = new Map(originalItem.map((obj) => [obj.id, obj]));
+    // Iterate through array2 and update the Map
+    updatedItem.forEach((item) => {
+      // If id exists, it replaces the old object; if not, it adds it
+      map.set(item === null || item === void 0 ? void 0 : item.id, item);
+    });
+    // Convert the Map values back into a standard array
+    return Array.from(map.values());
+  }
+}
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectItemController.prototype, "value", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectItemController.prototype, "selectType", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaInputSelectItemController.prototype, "selectedItem", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectItemController.prototype, "sourceController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectItemController.prototype, "vegaInputSelectValueController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaInputSelectItemController.prototype, "componentWillLoad", null);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentMethod('watchSelectType')
+], VegaInputSelectItemController.prototype, "watchSelectType", null);
+
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -342,7 +431,17 @@ class VegaInputSelectDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer
       return (index.h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
         index.h("vega-icon", { part: "toggle-icon", icon: internalIconManager.VegaInternalIconManager.getIconKey(this.isDropdownShow ? 'chevron-up' : 'chevron-down') })));
     };
+    /* istanbul ignore next */
     this.renderSelectContainer = () => {
+      var _a, _b;
+      if (typeof this.selectedLabel !== 'function') {
+        if (!((_a = this.selectedLabel) === null || _a === void 0 ? void 0 : _a.single)) {
+          this.selectedLabel.single = (_value, selectedItem) => selectedItem.displayName;
+        }
+        if (!((_b = this.selectedLabel) === null || _b === void 0 ? void 0 : _b.multiple)) {
+          this.selectedLabel.multiple = (value) => `${value.length} Selected`;
+        }
+      }
       return (index.h("div", { class: "vega-input-select-select-container" },
         index.h("div", { class: "vega-input-select-selected-box" }, this.selectType === 'multiple'
           ? this.renderMultipleSelected()
@@ -350,7 +449,10 @@ class VegaInputSelectDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer
     };
     this.renderMultipleSelected = () => {
       if (this.value.length > 0) {
-        const selectedLabelStr = this.selectedLabel(this.value);
+        const selectedLabelStr = typeof this.selectedLabel == 'function'
+          ? this.selectedLabel(this.value)
+          : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            this.selectedLabel.multiple(this.value, this.selectedItem);
         return (index.h("span", { class: "vega-input-select-selected" },
           index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
@@ -359,15 +461,26 @@ class VegaInputSelectDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer
       }
     };
     this.renderSingleSelected = () => {
-      const item = this.sourceController.getItem(this.value);
-      if (item || (this.vegaDropdownProps.preserveValueIfNotInSource && this.value)) {
-        return (index.h("span", { class: "vega-input-select-selected", part: "selected-box" },
-          index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: this.vegaDropdownProps.preserveValueIfNotInSource
-              ? this.value
-              : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-                item.displayName }, 
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          this.vegaDropdownProps.preserveValueIfNotInSource ? this.value : item.displayName)));
+      var _a, _b;
+      const selectedSourceItemItem = this.selectedItem;
+      if (selectedSourceItemItem === null || selectedSourceItemItem === void 0 ? void 0 : selectedSourceItemItem.displayName) {
+        selectedSourceItemItem.displayName = index$1.htmlSanitizer.sanitize(selectedSourceItemItem.displayName, index$1.labelSanitizeStrategy);
+      }
+      const selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, selectedSourceItemItem);
+      if ((typeof this.selectedLabel == 'function' && this.selectedItem) ||
+        (typeof this.selectedLabel != 'function' && selectedLabelStr)) {
+        if (typeof this.selectedLabel == 'function') {
+          return (index.h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: 
+              // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+              selectedSourceItemItem.displayName }, 
+            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            selectedSourceItemItem.displayName)));
+        }
+        else {
+          return (index.h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
+        }
       }
       else {
         return (index.h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -465,15 +578,15 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
-__decorate$5([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "selectedItem", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentMethod('watchVegaDropdownProps')
 ], VegaInputSelectDropdownRenderer.prototype, "watchVegaDropdownProps", null);
@@ -616,6 +729,7 @@ class VegaInputSelectSourceController extends globalSlimmerRegistry.VegaSlimmer
     this.handleSourceChange = () => {
       this.host.dataset.source = JSON.stringify(this.source);
       this.source = typeGuard.isArrayOfType(this.source, typeGuard.isSelectSourceItemType) ? this.source : [];
+      this.vegaInputSelectItemController.setSelectedItem();
     };
   }
   /**
@@ -644,6 +758,9 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaInputSelectSourceController.prototype, "source", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaInputSelectSourceController.prototype, "vegaInputSelectItemController", void 0);
 __decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('watchSource')
 ], VegaInputSelectSourceController.prototype, "handleSourceChange", void 0);
@@ -871,6 +988,7 @@ const VegaInputSelect = class {
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
     this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
+    this.vegaInputSelectItemController = new VegaInputSelectItemController();
     this.formFieldControllerSlimmer = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -892,16 +1010,16 @@ const VegaInputSelect = class {
     });
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.lazyLoadController = new VegaInputSelectLazyLoadController();
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaChange);
-    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaSearch);
-    this.searchTriggerEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaSearchTrigger);
-    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaShow);
-    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaHide);
-    this.labelButtonClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, domNodeSubjectObserverFactory.VegaLabelButtonClick);
-    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaSearch, domNodeSubjectObserverFactory.VegaSearchTrigger, domNodeSubjectObserverFactory.VegaShow, domNodeSubjectObserverFactory.VegaHide], () => this.host, true);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaChange);
+    this.searchEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaSearch);
+    this.searchTriggerEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaSearchTrigger);
+    this.showEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaShow);
+    this.hideEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaHide);
+    this.labelButtonClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputSelect, vegaEventId.VegaLabelButtonClick);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaSearch, vegaEventId.VegaSearchTrigger, vegaEventId.VegaShow, vegaEventId.VegaHide], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaInputSelectRuntimeMetricsPayloadDefinition);
     this.isDropdownShow = false;
-    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
+    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
     this.isLazyLoading = false;
     /**
      * Specifies the label or title for the input field.
@@ -929,9 +1047,13 @@ const VegaInputSelect = class {
     this.required = false;
     /**
      * Allows customization of the text displayed within the
-     *    select field when multiple items are selected.
+     *    select field when single or multiple items are selected.
      *    The default format for the selected label is
-     *    `${number of selected items} Selected`.
+     *    `${number of selected items} Selected` for multiple mode only.
+     *
+     *	To enable all modes, use the `SelectedLabelTypeForAllModes` type.
+     * 		For single mode, the default format is the `displayName` of the selected item if not set
+     * 		For multiple mode, the default format is `${number of selected items} Selected` if not set
      *
      * @vegaVersion 1.35.0
      */
@@ -1018,6 +1140,8 @@ const VegaInputSelect = class {
      */
     this.size = 'default';
   }
+  watchSelectType() {
+  }
   watchSource() {
   }
   watchValue(newValue, oldValue) {
@@ -1058,6 +1182,7 @@ const VegaInputSelect = class {
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
+    "selectType": ["watchSelectType"],
     "source": ["watchSource"],
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"],
@@ -1091,6 +1216,9 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);