@globalpayments/vega 2.72.0 → 2.74.0

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

@@ -12,26 +12,24 @@ import { MinNumberRule } from '../../helpers/validator/rules/min-number-rule';
 import { MinStringLengthRule } from '../../helpers/validator/rules/min-string-length-rule';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaPaste, } from '../../helpers/event-manager/event-id/vega-event-id';
-import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
-import ChangeManager from '../../helpers/change-manager/change-manager';
 import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller';
 import { VegaInputPrefixSlotRenderer } from './slimmers/renderers/vega-input-prefix-slot-renderer';
 import { VegaInputMaskConfigController } from './slimmers/controllers/vega-input-mask-config-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input/runtime-metrics-payload-definition';
-import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaInputCompactWidthController } from './slimmers/controllers/vega-input-compact-width-controller';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaInputStateController } from './slimmers/controllers/vega-input-state-controller';
-import { isArrayEqual } from '../../utils/array';
-import { deepEqual } from '../../utils/object';
 import { VegaInputPasswordEyeRenderer } from './slimmers/renderers/vega-input-password-eye-renderer';
+import { VegaInputInputContainerRenderer } from './slimmers/renderers/vega-input-input-container-renderer';
+import { VegaInputInputRenderer } from './slimmers/renderers/vega-input-input-renderer';
+import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer';
+import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller';
 /**
  * @vegaVersion 1.0.5
  */
@@ -72,8 +70,8 @@ export class VegaInput {
       validationRulesName: 'validationRules',
       defaultValue: '',
       attributeGetter: (propertyName) => this[propertyName],
-      inputContainerGetter: () => this.inputContainerRef,
-      touchableAreaGetter: () => [this.inputRef],
+      inputContainerGetter: () => this.inputContainerRenderer.getInputContainerRef(),
+      touchableAreaGetter: () => [this.inputRenderer.getInputRef()],
     });
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
       /*
@@ -86,7 +84,11 @@ export class VegaInput {
     this.compactWidthController = new VegaInputCompactWidthController();
     this.stateController = new VegaInputStateController();
     this.maskConfigController = new VegaInputMaskConfigController();
+    this.valueController = new VegaInputValueController();
     this.prefixSlotRenderer = new VegaInputPrefixSlotRenderer();
+    this.renderer = new VegaInputRenderer();
+    this.inputContainerRenderer = new VegaInputInputContainerRenderer();
+    this.inputRenderer = new VegaInputInputRenderer();
     this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
     this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
     this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
@@ -263,71 +265,6 @@ export class VegaInput {
      * @vegaVersion 2.1.0
      */
     this.disableCopyPaste = false;
-    this.focusInput = () => {
-      this.inputRef.focus();
-    };
-    this.setInputRef = (inputRef) => {
-      if (inputRef && this.inputRef !== inputRef) {
-        this.inputRef = inputRef;
-        this.maskConfigController.setupStringFormatter(inputRef);
-      }
-    };
-    this.renderPrefixText = () => {
-      return this.prefixText && h("div", { class: "prefix-text" }, this.prefixText);
-    };
-    this.renderSuffixText = () => {
-      return this.suffixText && h("div", { class: "suffix-text" }, this.suffixText);
-    };
-    this.handleInputFocus = (e) => {
-      this.focusEventEmitter.emit(undefined, e);
-    };
-    this.handleInputBlur = (e) => {
-      this.blurEventEmitter.emit(undefined, e);
-    };
-    this.handleInputPaste = (e) => {
-      const event = this.pasteEventEmitter.emit(e.clipboardData);
-      /* istanbul ignore next */
-      if (event.defaultPrevented) {
-        e.preventDefault();
-      }
-    };
-    this.onClickClearIcon = () => {
-      this.value = '';
-    };
-    this.isClearIconVisible = () => {
-      return !this.disabled && Boolean(this.value);
-    };
-    this.onClearInputFocus = () => {
-      this.inputContainerRef.classList.add('no-focus');
-    };
-    this.onClearInputBlur = () => {
-      this.inputContainerRef.classList.remove('no-focus');
-    };
-    /**
-     * Handles input event and updates the value based on a specified trigger.
-     * The below method is e2e-test covered in
-     * @see{module:vega-input-on-value-input}
-     */
-    /* istanbul ignore next */
-    this.onInputHandler = (e) => {
-      if (this.valueUpdateTrigger !== 'change') {
-        this.value = e.target.value;
-      }
-    };
-    /**
-     * Handles input change events and updates the value based on a specified trigger.
-     * The below method is e2e-test covered in
-     * @see{module:vega-input-on-value-change}
-     */
-    /* istanbul ignore next */
-    this.inputChangeHandler = (e) => {
-      if (this.valueUpdateTrigger === 'change') {
-        this.value = e.target.value;
-      }
-    };
-    this.handleLabelButtonClick = () => {
-      this.labelButtonClickEventEmitter.emit();
-    };
   }
   watchSuffixText() {
     methodPlaceholder();
@@ -344,14 +281,7 @@ export class VegaInput {
    *    when the value changes, which needs to be updated manually.
    */
   watchValue(value) {
-    this.changeEventEmitter.emit(value);
-    if (this.inputRef.value !== this.value) {
-      this.inputRef.value = this.value;
-    }
-    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-      host: this.host,
-      detail: this.value,
-    });
+    methodPlaceholder(value);
   }
   /**
    * The below method is e2e-test covered in
@@ -359,9 +289,7 @@ export class VegaInput {
    */
   /* istanbul ignore next */
   watchTypeChange(newType, oldType) {
-    if (newType === 'number' || oldType === 'number') {
-      this.maskConfigController.setupStringFormatter(this.inputRef);
-    }
+    methodPlaceholder(newType, oldType);
   }
   watchValidationRules() {
     methodPlaceholder();
@@ -374,9 +302,7 @@ export class VegaInput {
    */
   /* istanbul ignore next */
   watchMaskChange(newValue, oldValue) {
-    if (this.areMaskConfigsEqual(newValue, oldValue))
-      return;
-    this.maskConfigController.setupStringFormatter(this.inputRef);
+    methodPlaceholder(newValue, oldValue);
   }
   /**
    * Invoke this method to focus the current input.
@@ -384,7 +310,7 @@ export class VegaInput {
    * @vegaVersion 1.12.0
    */
   async doFocus() {
-    this.focusInput();
+    methodPlaceholder();
   }
   /**
    * Invoke this method to blur the current input.
@@ -392,79 +318,11 @@ export class VegaInput {
    * @vegaVersion 1.12.0
    */
   async doBlur() {
-    this.inputRef.blur();
+    methodPlaceholder();
   }
   render() {
     slotPlaceholder(h("slot", null));
-    return sanitizeVegaComponent(h(Host, { class: this.type === 'hidden' ? 'vega-input-hidden' : 'vega-input-inline-block' }, this.groupDom()), this.host);
-  }
-  containerDom() {
-    return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onBlur: (e) => this.handleInputBlur(e), 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onFocus: (e) => this.handleInputFocus(e), onChange: this.inputChangeHandler, onInput: this.onInputHandler, 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onPaste: (e) => this.handleInputPaste(e) }, this.copyPasteController.getCopyPasteProps()))));
-  }
-  getInputType() {
-    switch (this.type) {
-      case 'number':
-        return 'text';
-      case 'password':
-        return this.isPasswordDisplay ? 'text' : 'password';
-      default:
-        return this.type;
-    }
-  }
-  groupDom() {
-    let containerClass = 'vega-input-container';
-    if (this.value) {
-      containerClass += ' with-value';
-    }
-    containerClass += this.size === 'small' ? ' vega-input-size-small' : ' vega-input-size-default';
-    containerClass += this.disabled ? ' vega-input-disabled' : '';
-    if (this.isCompactInputWidth)
-      containerClass += ' compact-input-width';
-    return (h("div", { class: "vega-input", part: "container-wrapper" },
-      this.renderLabelDom(),
-      h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: containerClass, onClick: this.focusInput, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-        this.prefixSlotRenderer.render(),
-        this.renderPrefixText(),
-        this.containerDom(),
-        this.renderSuffixText(),
-        this.type === 'password'
-          ? this.passwordEyeRenderer.render()
-          : this.showClearIcon && this.renderClearIcon()),
-      this.renderHintDom()));
-  }
-  renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
-      } }));
-  }
-  renderClearIcon() {
-    return (h("div", { class: {
-        'vega-input-clear-icon': true,
-        'invisible': !this.isClearIconVisible(),
-      }, tabIndex: !this.disabled ? 0 : -1, "aria-label": "clear input", role: "button", onClick: this.onClickClearIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), onFocusin: this.onClearInputFocus, onFocusout: this.onClearInputBlur },
-      h("vega-icon", { icon: "close" })));
-  }
-  renderHintDom() {
-    return this.hint !== '' ? (h("div", { class: "vega-hint" },
-      h("label", null, this.hint))) : null;
-  }
-  /**
-   * Compares two MaskConfigType objects or arrays for equality.
-   */
-  /* istanbul ignore next */
-  areMaskConfigsEqual(a, b) {
-    const arrA = Array.isArray(a) ? a : [a];
-    const arrB = Array.isArray(b) ? b : [b];
-    return isArrayEqual(arrA, arrB, true, (a, b) => {
-      return deepEqual(a, b) ? 0 : -1;
-    });
+    return sanitizeVegaComponent(h(Host, { class: this.type === 'hidden' ? 'vega-input-hidden' : 'vega-input-inline-block' }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-input"; }
   static get encapsulation() { return "shadow"; }
@@ -1350,9 +1208,21 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "maskConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "valueController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "prefixSlotRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "inputContainerRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "inputRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "changeEventEmitter", void 0);

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

@@ -39,7 +39,7 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
       h("vega-input", { size: this.size, disabled: this.disabled, placeholder: this.placeholder, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleInputChange.bind(this));
-        }, value: this.phoneNumberInputValue, maskConfig: {
+        }, inputmode: "numeric", value: this.phoneNumberInputValue, maskConfig: {
           type: 'custom',
           strategy: () => new VegaPhoneNumberInputStrategy(this.phoneNumberMaskFormatter),
         } })));

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

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/** The `VegaInputSelectItemController` class is a TypeScript React component that controls the state of selected item. */
+export 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([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputSelectItemController.prototype, "selectedItem", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemController.prototype, "vegaInputSelectValueController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputSelectItemController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchSelectType')
+], VegaInputSelectItemController.prototype, "watchSelectType", null);

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

@@ -19,6 +19,7 @@ export 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();
     };
   }
   /**
@@ -47,6 +48,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaInputSelectSourceController.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectSourceController.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   MapToComponentMethod('watchSource')
 ], VegaInputSelectSourceController.prototype, "handleSourceChange", void 0);

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

@@ -71,6 +71,7 @@ export class VegaInputSelectValueController extends VegaSlimmer {
   setValue(value) {
     if (this.valueGuard(value)) {
       this.value = value;
+      this.vegaInputSelectItemController.setSelectedItem();
     }
   }
   /**
@@ -106,6 +107,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "vegaDropdownProps", void 0);

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

@@ -27,7 +27,17 @@ export 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()
@@ -35,7 +45,10 @@ export 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)));
       }
@@ -44,15 +57,22 @@ export 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 selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, this.selectedItem);
+      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
+              this.selectedItem.displayName }, 
+            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+            this.selectedItem.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)));
@@ -150,15 +170,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "selectedItem", void 0);
 __decorate([
   MapToComponentMethod('watchVegaDropdownProps')
 ], VegaInputSelectDropdownRenderer.prototype, "watchVegaDropdownProps", null);

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -12,6 +12,7 @@ import { VegaInputSelectRenderer } from './slimmers/renderers/vega-input-select-
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaInputSelectDropdownController } from './slimmers/controllers/vega-input-select-dropdown-controller';
 import { VegaInputSelectValueController } from './slimmers/controllers/vega-input-select-value-controller';
+import { VegaInputSelectItemController } from './slimmers/controllers/vega-input-select-item-controller';
 import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input-select-dropdown-renderer';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
@@ -40,6 +41,7 @@ export class VegaInputSelect {
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
     this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
+    this.vegaInputSelectItemController = new VegaInputSelectItemController();
     this.formFieldControllerSlimmer = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -98,9 +100,13 @@ export class VegaInputSelect {
     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
      */
@@ -187,6 +193,9 @@ export class VegaInputSelect {
      */
     this.size = 'default';
   }
+  watchSelectType() {
+    methodPlaceholder();
+  }
   watchSource() {
     methodPlaceholder();
   }
@@ -313,12 +322,16 @@ export class VegaInputSelect {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "SelectedLabelType",
-        "resolved": "(value: string[]) => string",
+        "original": "SelectedLabelType | SelectedLabelTypeForAllModes",
+        "resolved": "((value: string[]) => string) | ({ single?: (value: string, selectedItem?: SelectSourceItem) => string; multiple?: (value: string[], selectedItem?: SelectSourceItem[]) => string; })",
         "references": {
           "SelectedLabelType": {
             "location": "import",
             "path": "./types"
+          },
+          "SelectedLabelTypeForAllModes": {
+            "location": "import",
+            "path": "./types"
           }
         }
       },
@@ -329,9 +342,9 @@ export class VegaInputSelect {
             "name": "vegaVersion",
             "text": "1.35.0"
           }],
-        "text": "Allows customization of the text displayed within the\n   select field when multiple items are selected.\n   The default format for the selected label is\n   `${number of selected items} Selected`."
+        "text": "Allows customization of the text displayed within the\n   select field when single or multiple items are selected.\n   The default format for the selected label is\n   `${number of selected items} Selected` for multiple mode only.\n\nTo enable all modes, use the `SelectedLabelTypeForAllModes` type.\n\t\tFor single mode, the default format is the `displayName` of the selected item if not set\n\t\tFor multiple mode, the default format is `${number of selected items} Selected` if not set"
       },
-      "defaultValue": "(value: string[]) => `${value.length} Selected`"
+      "defaultValue": "(value: string[]) =>\n\t\t`${value.length} Selected`"
     },
     "selectType": {
       "type": "string",
@@ -566,7 +579,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; resettable?: boolean; preserveValueIfNotInSource?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; resettable?: boolean; matchContainerHeight?: boolean; isScreenPosition?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; preserveValueIfNotInSource?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -642,7 +655,8 @@ export class VegaInputSelect {
   static get states() { return {
     "isDropdownShow": {},
     "currentBreakpoint": {},
-    "isLazyLoading": {}
+    "isLazyLoading": {},
+    "selectedItem": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -937,6 +951,9 @@ export class VegaInputSelect {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "selectType",
+      "methodName": "watchSelectType"
+    }, {
       "propName": "source",
       "methodName": "watchSource"
     }, {
@@ -977,6 +994,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);

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

@@ -97,9 +97,10 @@ export class VegaPopover {
    * Invoke this method to show the popover.
    *
    * @vegaVersion 1.22.0
+   * @param {boolean} refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover‘s styles (such as width, height, or position). The default value is false. Added in 2.73.0.
    */
-  async show() {
-    if (!this.isPopoverShow) {
+  async show(refresh = false) {
+    if (!this.isPopoverShow || refresh) {
       this.showPopover();
     }
   }
@@ -413,8 +414,14 @@ export class VegaPopover {
   static get methods() { return {
     "show": {
       "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
+        "signature": "(refresh?: boolean) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
+              }],
+            "text": "- Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
+          }],
         "references": {
           "Promise": {
             "location": "global"
@@ -427,6 +434,9 @@ export class VegaPopover {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.22.0"
+          }, {
+            "name": "param",
+            "text": "refresh - Determines whether the popover should be refreshed even when it is already visible. This is useful for updating the popover\u2018s styles (such as width, height, or position). The default value is false. Added in 2.73.0."
           }]
       }
     },