@globalpayments/vega 2.70.0 → 2.75.1

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

@@ -8,10 +8,10 @@ const component = require('./component-1e352960.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const ui = require('./ui-9e181079.js');
-const responsiveFormatFacade = require('./responsive-format-facade-1d9c13a9.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-f040608b.js');
+const responsiveFormatFacade = require('./responsive-format-facade-d5dba942.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-b5e71bf6.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const vegaInternalEventId = require('./vega-internal-event-id-6d4a2c53.js');
+const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
 const array = require('./array-249289f2.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
@@ -19,10 +19,11 @@ 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-f865d397.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-7afe8d78.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f8840f1b.js');
-const typeGuard = require('./type-guard-f12b5bae.js');
+const sanitize = require('./sanitize-fb222510.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-aef2fb1e.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-2dacabbd.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-aca87dac.js');
+const typeGuard = require('./type-guard-a0f026d8.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
@@ -34,27 +35,27 @@ require('./try-get-document-c0ebd39a.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./function-extension-28a4d781.js');
+require('./function-extension-cfbbc57e.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./dark-mode-style-controller-c21172aa.js');
 require('./observer-f49483e8.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./vega-nonce-manager-df69d3ed.js');
-require('./internal-vega-event-manager-45d451de.js');
-require('./dto-renderer-manager-c917dade.js');
-require('./code-block-bb4cbafa.js');
+require('./internal-vega-event-manager-6befeb34.js');
+require('./dto-renderer-manager-03e1a038.js');
+require('./code-block-c1d2e6a8.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('./translation-5f9f9c0c.js');
-require('./sub-state-observer-slimmer-73aecfff.js');
+require('./sub-state-observer-slimmer-5d0b8ac3.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;
@@ -90,32 +91,32 @@ class VegaInputSelectRenderer extends globalSlimmerRegistry.VegaSlimmer {
       } })));
   }
 }
-__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;
@@ -178,38 +179,38 @@ class VegaInputSelectDropdownController extends globalSlimmerRegistry.VegaSlimme
     });
   }
 }
-__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 +278,7 @@ class VegaInputSelectValueController extends globalSlimmerRegistry.VegaSlimmer {
   setValue(value) {
     if (this.valueGuard(value)) {
       this.value = value;
+      this.vegaInputSelectItemController.setSelectedItem();
     }
   }
   /**
@@ -297,28 +299,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 +436,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 +454,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 +466,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 = sanitize.sanitizeHtmlLabel(selectedSourceItemItem.displayName);
+      }
+      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 +583,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 +734,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 +763,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 +993,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: [
         {
@@ -929,9 +1052,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 +1145,8 @@ const VegaInputSelect = class {
      */
     this.size = 'default';
   }
+  watchSelectType() {
+  }
   watchSource() {
   }
   watchValue(newValue, oldValue) {
@@ -1058,6 +1187,7 @@ const VegaInputSelect = class {
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
+    "selectType": ["watchSelectType"],
     "source": ["watchSource"],
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"],
@@ -1091,6 +1221,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);