@globalpayments/vega 2.73.0 → 2.75.1

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

@@ -4,8 +4,8 @@ import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-8744cb44.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { a as arrayToClassString } from './ui-bb99c0c2.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-94897ae8.js';
-import { D as DomNodeSubjectObserverFactory, w as VegaLabelButtonClick, s as VegaDropdownShow, t as VegaDropdownHide, V as VegaDropdownClick, u as VegaDropdownSearch, v as VegaSearchTrigger, c as VegaReset, d as domNodeSubjectFactory, g as VegaChange, o as VegaSearch, K as VegaShow, L as VegaHide } from './dom-node-subject-observer-factory-1aaa1159.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-28ee2dbd.js';
+import { D as DomNodeSubjectObserverFactory, w as VegaLabelButtonClick, s as VegaDropdownShow, t as VegaDropdownHide, V as VegaDropdownClick, u as VegaDropdownSearch, v as VegaSearchTrigger, c as VegaReset, d as domNodeSubjectFactory, g as VegaChange, o as VegaSearch, M as VegaShow, N as VegaHide } from './dom-node-subject-observer-factory-064ee2b2.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
 import { j as VegaInternalDropdownTemplateItemsChange, k as VegaInternalVirtualScrollToBottom, l as VegaInputSelectRenderPrefixIconInternalOverridden } from './vega-internal-event-id-4a06d705.js';
 import { i as isArrayEqual } from './array-7888f339.js';
@@ -15,10 +15,11 @@ import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0f
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-257928c1.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-2d791d0e.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-e6f98de5.js';
-import { W as isArrayOfType, Y as isSelectSourceItemType } from './type-guard-b48aec98.js';
+import { s as sanitizeHtmlLabel } from './sanitize-fd0cb40d.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-5d9dc384.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-09827cec.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-e662bee2.js';
+import { W as isArrayOfType, Y as isSelectSourceItemType } from './type-guard-c65a227d.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import { T as TranslationSlimmer } from './translation-slimmer-c936cb1b.js';
@@ -30,16 +31,16 @@ import './try-get-document-bef0f526.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
 import './vega-env-manager-8f8dc473.js';
-import './function-extension-8b06c6f8.js';
+import './function-extension-e8c0e43e.js';
 import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import './dynamic-slimmer-90b8af32.js';
 import './dark-mode-style-controller-de88a117.js';
 import './observer-3959f9dd.js';
 import './_commonjsHelpers-9943807e.js';
 import './vega-nonce-manager-497e5eb5.js';
-import './internal-vega-event-manager-fdee2a0a.js';
-import './dto-renderer-manager-49ae5d56.js';
-import './code-block-666674d7.js';
+import './internal-vega-event-manager-efb6786e.js';
+import './dto-renderer-manager-ee1a5864.js';
+import './code-block-8ee34ab6.js';
 import './string-a953eafc.js';
 import './object-66c37948.js';
 import './translation-96e5debd.js';
@@ -47,10 +48,10 @@ import './base-renderer-101f6d04.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './wait-for-vega-handler-c2c07ac3.js';
-import './sub-state-observer-slimmer-41a1b380.js';
+import './sub-state-observer-slimmer-202ec7dc.js';
 import './typography-396de03f.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,32 +87,32 @@ class VegaInputSelectRenderer extends VegaSlimmer {
       } })));
   }
 }
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "disabled", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "size", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "hint", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "label", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "required", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "labelSuffixButtonConfig", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "labelButtonClickEventEmitter", void 0);
-__decorate$8([
+__decorate$9([
   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;
@@ -174,38 +175,38 @@ class VegaInputSelectDropdownController extends VegaSlimmer {
     });
   }
 }
-__decorate$7([
+__decorate$8([
   MapToComponentField({ writable: true })
 ], VegaInputSelectDropdownController.prototype, "isDropdownShow", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaSearch", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "searchEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "searchTriggerEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaInputSelectValueController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "sourceController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "source", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "showEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "hideEventEmitter", void 0);
-__decorate$7([
+__decorate$8([
   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;
@@ -273,6 +274,7 @@ class VegaInputSelectValueController extends VegaSlimmer {
   setValue(value) {
     if (this.valueGuard(value)) {
       this.value = value;
+      this.vegaInputSelectItemController.setSelectedItem();
     }
   }
   /**
@@ -293,28 +295,120 @@ class VegaInputSelectValueController extends VegaSlimmer {
     }
   }
 }
-__decorate$6([
+__decorate$7([
   MapToComponentField({ writable: true })
 ], VegaInputSelectValueController.prototype, "value", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "selectType", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "sourceController", void 0);
-__decorate$6([
+__decorate$7([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "vegaInputSelectItemController", void 0);
+__decorate$7([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "vegaDropdownProps", void 0);
-__decorate$6([
+__decorate$7([
   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 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([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "value", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "selectType", void 0);
+__decorate$6([
+  MapToComponentField({ writable: true })
+], VegaInputSelectItemController.prototype, "selectedItem", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "sourceController", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "vegaInputSelectValueController", void 0);
+__decorate$6([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputSelectItemController.prototype, "componentWillLoad", null);
+__decorate$6([
+  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);
@@ -338,7 +432,17 @@ class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-select-toggle-icon", part: "toggle-icon-container" },
         h("vega-icon", { part: "toggle-icon", icon: 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 (h("div", { class: "vega-input-select-select-container" },
         h("div", { class: "vega-input-select-selected-box" }, this.selectType === 'multiple'
           ? this.renderMultipleSelected()
@@ -346,7 +450,10 @@ class VegaInputSelectDropdownRenderer extends 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 (h("span", { class: "vega-input-select-selected" },
           h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
@@ -355,15 +462,26 @@ class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       }
     };
     this.renderSingleSelected = () => {
-      const item = this.sourceController.getItem(this.value);
-      if (item || (this.vegaDropdownProps.preserveValueIfNotInSource && this.value)) {
-        return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
-          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 = 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 (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            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 (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+            h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
+        }
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -461,15 +579,15 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "selectedItem", void 0);
 __decorate$5([
   MapToComponentMethod('watchVegaDropdownProps')
 ], VegaInputSelectDropdownRenderer.prototype, "watchVegaDropdownProps", null);
@@ -612,6 +730,7 @@ class VegaInputSelectSourceController extends VegaSlimmer {
     this.handleSourceChange = () => {
       this.host.dataset.source = JSON.stringify(this.source);
       this.source = isArrayOfType(this.source, isSelectSourceItemType) ? this.source : [];
+      this.vegaInputSelectItemController.setSelectedItem();
     };
   }
   /**
@@ -640,6 +759,9 @@ __decorate$3([
 __decorate$3([
   MapToComponentField({ writable: true })
 ], VegaInputSelectSourceController.prototype, "source", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaInputSelectSourceController.prototype, "vegaInputSelectItemController", void 0);
 __decorate$3([
   MapToComponentMethod('watchSource')
 ], VegaInputSelectSourceController.prototype, "handleSourceChange", void 0);
@@ -867,6 +989,7 @@ const VegaInputSelect = class {
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
     this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
+    this.vegaInputSelectItemController = new VegaInputSelectItemController();
     this.formFieldControllerSlimmer = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -925,9 +1048,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
      */
@@ -1014,6 +1141,8 @@ const VegaInputSelect = class {
      */
     this.size = 'default';
   }
+  watchSelectType() {
+  }
   watchSource() {
   }
   watchValue(newValue, oldValue) {
@@ -1054,6 +1183,7 @@ const VegaInputSelect = class {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "selectType": ["watchSelectType"],
     "source": ["watchSource"],
     "value": ["watchValue"],
     "validationRules": ["watchValidationRules"],
@@ -1087,6 +1217,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);