@globalpayments/vega 2.34.1 → 2.36.0

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-appender-controller.js

@@ -6,6 +6,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender-slimmer';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDropdownUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The `VegaDropdownAppenderController` class is responsible for managing the visibility and
  * behavior of a dropdown component.
@@ -16,20 +19,19 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
    * This constructor initializes a dropdown component with various configuration options.
    */
   constructor() {
-    super(() => ({
-      target: this.host,
-      appendableElement: this.renderer.getDropdownContentBoxRef(),
-      positionRelativeTo: this.positionRelativeTo,
-      matchTargetWidth: this.matchTargetWidth,
-      matchContainerHeight: this.matchContainerHeight,
-      size: this.size,
-      minWidth: this.minWidth,
-      maxWidth: this.maxWidth,
-      translocation: this.translocation,
-      maxHeight: this.maxHeight,
-      placement: this.placement,
-      alignment: this.alignment,
-    }), () => this.trigger);
+    super(() => this.generateShowConfigFactory(), () => this.trigger);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerRemoteMethod();
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaPopover.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget));
   }
   /**
    * The function `watchIsDropdownShow` checks if the dropdown is shown and performs certain actions
@@ -61,6 +63,37 @@ export class VegaDropdownAppenderController extends ElementAppenderSlimmer {
       this.hide();
     }
   }
+  /**
+   * Generate the show configuration for the dropdown.
+   *
+   * @returns {ElementAppenderShowConfig} The show configuration for the dropdown.
+   */
+  generateShowConfigFactory() {
+    return {
+      target: this.target || this.host,
+      appendableElement: this.renderer.getDropdownContentBoxRef(),
+      positionRelativeTo: this.positionRelativeTo,
+      matchTargetWidth: this.matchTargetWidth,
+      matchContainerHeight: this.matchContainerHeight,
+      size: this.size,
+      minWidth: this.minWidth,
+      maxWidth: this.maxWidth,
+      translocation: this.translocation,
+      maxHeight: this.maxHeight,
+      placement: this.placement,
+      alignment: this.alignment,
+      isScreenPosition: this.isScreenPosition,
+    };
+  }
+  /**
+   * Register a remote method to update the target element of the dropdown.
+   */
+  registerRemoteMethod() {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDropdownUpdateTarget), (target) => {
+      this.target = target;
+      super.updateShowConfigFactory(this.generateShowConfigFactory.bind(this));
+    });
+  }
 }
 __decorate([
   MapToComponentField()
@@ -113,6 +146,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownAppenderController.prototype, "hideEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownAppenderController.prototype, "isScreenPosition", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownAppenderController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDropdownAppenderController.prototype, "disconnectedCallback", null);
 __decorate([
   MapToComponentMethod('watchIsDropdownShow')
 ], VegaDropdownAppenderController.prototype, "watchIsDropdownShow", null);

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

@@ -219,6 +219,16 @@ export class VegaDropdown {
      * @vegaVersion 2.3.0
      */
     this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown position is calculated relative to the screen.
+     *
+     * @VegaWarning When enabled (set to true), it overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     *
+     * @VegaWarning Currently, when set to true, position calculation may be inaccurate if the dropdown is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.isScreenPosition = false;
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -837,6 +847,33 @@ export class VegaDropdown {
       },
       "attribute": "search-trigger-by",
       "reflect": false
+    },
+    "isScreenPosition": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "VegaWarning",
+            "text": "When enabled (set to true), it overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective."
+          }, {
+            "name": "VegaWarning",
+            "text": "Currently, when set to true, position calculation may be inaccurate if the dropdown is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+          }, {
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Determines whether the dropdown position is calculated relative to the screen."
+      },
+      "attribute": "is-screen-position",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-file-uploader/slimmers/controllers/vega-file-uploader-file-limit-controller.js

@@ -0,0 +1,35 @@
+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';
+/**
+ * Controller class for managing the file upload limit in the Vega file uploader component.
+ */
+export class VegaFileUploaderFileLimitController extends VegaSlimmer {
+  /**
+   * Determines if the file uploader is in single mode.
+   *
+   * @returns {boolean} `true` if the maximum file count is 1, otherwise `false`.
+   */
+  isSingleMode() {
+    return Number(this.maxCount) === 1;
+  }
+  /**
+   * Checks if the `maxCount` property is valid. If `maxCount` is less than 1 and not `null`, it will be set to `null`.
+   */
+  checkMaxCount() {
+    if (this.maxCount !== null && this.maxCount < 1) {
+      this.maxCount = null;
+    }
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderFileLimitController.prototype, "maxCount", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad'),
+  MapToComponentMethod('watchMaxCount')
+], VegaFileUploaderFileLimitController.prototype, "checkMaxCount", null);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-container-renderer.js

@@ -23,7 +23,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
      */
     this.handleDropAreaClick = (e) => {
       e.stopPropagation();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         this.triggerFileInputClick();
       }
     };
@@ -41,7 +41,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.inputChangeHandler = (e) => {
       e.stopPropagation();
       const files = this.getVegaFilesFromFileList(e.target.files);
-      this.selectFileChangeEventEmitHandler(files);
+      this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       this.inputElementRef.value = '';
     };
     /**
@@ -52,9 +52,9 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.dropHandler = (e) => {
       var _a;
       e.preventDefault();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         const files = this.getVegaFilesFromFileList(this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files));
-        this.selectFileChangeEventEmitHandler(files);
+        this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       }
     };
   }
@@ -72,7 +72,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    */
   render() {
     return (h("div", { class: "vega-file-uploader-container", ref: (ref) => (this.uploaderContainerRef = ref) },
-      h("input", { onChange: this.inputChangeHandler, type: "file", multiple: true, accept: this.accept, style: { display: 'none' }, ref: (node) => (this.inputElementRef = node) }),
+      h("input", { onChange: this.inputChangeHandler, type: "file", multiple: !this.fileLimitController.isSingleMode(), accept: this.accept, style: { display: 'none' }, ref: (node) => (this.inputElementRef = node) }),
       this.variant === 'uploadButton' ? this.renderUploadButton() : this.renderUploadDropArea()));
   }
   /**
@@ -81,7 +81,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    * @returns {HTMLElement} html element
    */
   renderUploadButton() {
-    return (h("vega-button", { label: "Upload Document", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line'), variant: "secondary", size: "small", disabled: this.disabled, ref: (button) => {
+    return (h("vega-button", { label: "Upload Document", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line'), variant: "secondary", size: "small", disabled: this.shouldDisableUploadButton(), ref: (button) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.triggerFileInputClick);
       } }));
   }
@@ -93,7 +93,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
   renderUploadDropArea() {
     return (h("vega-box", { class: {
         'vega-file-upload-area': true,
-        'disabled': this.disabled,
+        'disabled': this.shouldDisableUploadButton(),
       }, padding: "size-24", border: "border-input-field", borderStyle: "dashed", backgroundColor: "bg-tertiary", corners: "rounded-8", tabIndex: 0, onDrop: this.dropHandler, onDragEnter: this.preventDefaultBehavior, onDragOver: this.preventDefaultBehavior, onClick: this.handleDropAreaClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       h("vega-flex", { gap: "size-8", alignItems: "center", justifyContent: "center" },
         h("vega-icon", { color: "text-link", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line') }),
@@ -141,6 +141,29 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     }
     return result;
   }
+  /**
+   * Determines if the upload button should be disabled based on the component's state.
+   *
+   * @returns {boolean} True if the upload button should be disabled, otherwise false.
+   */
+  shouldDisableUploadButton() {
+    return this.disabled || !!(this.value && this.maxCount && this.value.length >= this.maxCount);
+  }
+  /**
+   * Filters the selected files to ensure the total number of files does not exceed the maximum count.
+   *
+   * @param {VegaFileUploaderFile[]} selectedFiles - The files selected by the user.
+   * @returns {VegaFileUploaderFile[]} The filtered list of files that do not exceed the maximum count.
+   */
+  filterExceedLimitFiles(selectedFiles) {
+    const maxCount = Number(this.maxCount);
+    if (!isNaN(maxCount) && maxCount && selectedFiles.length) {
+      const existFileCount = this.value ? this.value.length : 0;
+      const availableFileCount = Math.max(0, maxCount - existFileCount);
+      return selectedFiles.slice(0, availableFileCount);
+    }
+    return selectedFiles;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ 'arrow-up-from-line': arrowUpFromLine });
@@ -169,3 +192,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "fileLimitController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "maxCount", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -19,6 +19,7 @@ import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-co
 import { ObjectArrayRequiredRule } from '../../helpers/validator/rules/object-array-required-rule';
 import { VegaFileUploaderDropFileFilterController } from './slimmers/controllers/vega-file-uploader-drop-file-filter-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaFileUploaderFileLimitController } from './slimmers/controllers/vega-file-uploader-file-limit-controller';
 /**
  * @vegaVersion 2.25.0
  */
@@ -46,6 +47,7 @@ export class VegaFileUploader {
     this.vegaFileUploaderFileStatusRenderer = new VegaFileUploaderFileStatusRenderer();
     this.vegaFileUploaderValueController = new VegaFileUploaderValueController();
     this.dropFileFilterController = new VegaFileUploaderDropFileFilterController();
+    this.fileLimitController = new VegaFileUploaderFileLimitController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaChange);
     this.selectFileChangeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaSelectFileChange);
     this.removeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaRemove);
@@ -89,6 +91,12 @@ export class VegaFileUploader {
      * @vegaVersion 2.25.0
      */
     this.disabled = false;
+    /**
+     * Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer.
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.maxCount = null;
     /**
      * Specifies whether uploading a file is mandatory.
      *
@@ -124,6 +132,12 @@ export class VegaFileUploader {
   watchValue(newValue) {
     methodPlaceholder(newValue);
   }
+  /**
+   * Watches the maxCount change.
+   */
+  watchMaxCount() {
+    methodPlaceholder();
+  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -252,6 +266,27 @@ export class VegaFileUploader {
       "reflect": false,
       "defaultValue": "false"
     },
+    "maxCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | null",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer."
+      },
+      "attribute": "max-count",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,
@@ -613,6 +648,9 @@ export class VegaFileUploader {
   static get watchers() { return [{
       "propName": "value",
       "methodName": "watchValue"
+    }, {
+      "propName": "maxCount",
+      "methodName": "watchMaxCount"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"
@@ -648,6 +686,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "dropFileFilterController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "fileLimitController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-font/slimmers/renderers/vega-font-renderer.js

@@ -10,7 +10,14 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaFontRenderer extends VegaSlimmer {
   render(hostClasses) {
     const tagName = this.asController.getTagNameFromPropAs();
-    return tagName ? h(tagName, { className: hostClasses }, [h("slot", null)]) : h("slot", null);
+    if (tagName) {
+      const Tag = tagName;
+      return (h(Tag, { class: hostClasses },
+        h("slot", null)));
+    }
+    else {
+      return h("slot", null);
+    }
   }
 }
 __decorate([

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

@@ -158,13 +158,18 @@ export class VegaForm {
         if (!nestedFormValidationResult.isValid) {
           result.isValid = false;
           result.invalidFields.push(...nestedFormValidationResult.invalidFields);
+          result.invalidFieldsErrorMessages = Object.assign(Object.assign({}, result.invalidFieldsErrorMessages), nestedFormValidationResult.invalidFieldsErrorMessages);
         }
       }
       else {
-        const isValid = await this.handleChildFormFieldElementValid(element, showError);
+        const { isValid, message } = await this.handleChildFormFieldElementValid(element, showError);
         if (!isValid) {
           result.isValid = false;
           result.invalidFields.push(this.getFormFieldName(element));
+          if (!result.invalidFieldsErrorMessages) {
+            result.invalidFieldsErrorMessages = {};
+          }
+          result.invalidFieldsErrorMessages[this.getFormFieldName(element)] = message;
         }
       }
     });
@@ -406,10 +411,10 @@ export class VegaForm {
   }
   async handleChildFormFieldElementValid(element, showError) {
     const subject = domNodeSubjectFactory.getSubject(element, VegaInternalValid);
-    const isValid = await new Promise((resolve) => {
+    const { isValid, message } = await new Promise((resolve) => {
       //This setTimeout method here to avoid the dom node subject observer not existing and blocks the promise status
       const timerId = setTimeout(() => {
-        resolve(true);
+        resolve({ isValid: true, message: '' });
       }, 2000);
       ChangeManager.notify(subject, {
         host: element,
@@ -418,7 +423,7 @@ export class VegaForm {
         timerId,
       });
     });
-    return isValid;
+    return { isValid, message };
   }
   static get is() { return "vega-form"; }
   static get encapsulation() { return "shadow"; }
@@ -614,6 +619,10 @@ export class VegaForm {
           },
           "HTMLVegaFormElement": {
             "location": "global"
+          },
+          "EvaluateResultBase": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/validation-rule"
           }
         },
         "return": "Promise<FormValidateResult>"

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

@@ -37,6 +37,12 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
   componentWillLoad() {
     this.updateValue(this.value);
   }
+  /**
+   * watch emptyValueEnabled change
+   */
+  watchEmptyValueEnabled() {
+    this.updateValue(this.value);
+  }
   /**
    * The `watchValue` function updates a value and emits change events based on certain conditions.
    *
@@ -48,7 +54,7 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
    */
   watchValue(newValue, oldValue) {
     this.updateValue(newValue);
-    if (oldValue && oldValue !== this.value) {
+    if ((oldValue || (this.emptyValueEnabled && oldValue === '')) && oldValue !== this.value) {
       this.changeEventEmitter.emit(this.value);
       ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
         host: this.host,
@@ -74,14 +80,19 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
    * function is responsible for updating the phone number value based on the input provided.
    */
   updateValue(value) {
+    if (this.shouldSetEmptyValue(value)) {
+      this.value = '';
+      this.phoneNumberInputValue = '';
+      return;
+    }
     if (!value) {
       this.countrySelectController.setCountryCode(CountrySelectController.defaultCountryCode);
       this.value = `+${getCountryCallingCode(CountrySelectController.defaultCountryCode)}`;
       return;
     }
     const newValue = parseIncompletePhoneNumber(value);
-    this.value = parseIncompletePhoneNumber(newValue);
     this.phoneNumberInputValue = this.formatNationalNumber(newValue);
+    this.trySetValue(this.phoneNumberInputValue, () => parseIncompletePhoneNumber(newValue));
   }
   /*
    * The below method is e2e-test covered in
@@ -94,7 +105,7 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
    * @param {VegaCountryCode} newCountry - new country code
    */
   updateValueWithNewCountry(newCountry) {
-    this.value = this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry);
+    this.trySetValue(this.phoneNumberInputValue, () => this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry));
   }
   /**
    * The `formatValue` function concatenates a calling code prefix with a national number.
@@ -127,6 +138,24 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
       return value.replace('+', '').trim();
     }
   }
+  /**
+   * Set value
+   *
+   * @param {string} inputValue - The value of phone number input.
+   * @param {Function} formatValue - Format value callback
+   */
+  trySetValue(inputValue, formatValue) {
+    this.value = this.shouldSetEmptyValue(inputValue) ? '' : formatValue();
+  }
+  /**
+   * Should set value of phone number to empty string
+   *
+   * @param {string} inputValue - The value of phone number input
+   * @returns {boolean} -
+   */
+  shouldSetEmptyValue(inputValue) {
+    return !inputValue && this.emptyValueEnabled;
+  }
 }
 __decorate([
   MapToComponentField()
@@ -146,9 +175,15 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaInputPhoneNumberValueController.prototype, "phoneNumberInputValue", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "emptyValueEnabled", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaInputPhoneNumberValueController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchEmptyValueEnabled')
+], VegaInputPhoneNumberValueController.prototype, "watchEmptyValueEnabled", null);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputPhoneNumberValueController.prototype, "watchValue", null);

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

@@ -102,6 +102,14 @@ export class VegaInputPhoneNumber {
      * @vegaVersion 2.18.0
      */
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
+    /**
+     * Specifies whether the phone number input field can be set to an empty value.
+     *   When set to true, the value of phoneNumber is cleared when the input field is empty.
+     *   When set to false, the value of phoneNumber is always composed of the country code and phone number, even if the input field is empty.
+     *
+     * @vegaVersion 2.35.0
+     */
+    this.emptyValueEnabled = false;
     /**
      * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
      *
@@ -142,6 +150,9 @@ export class VegaInputPhoneNumber {
   watchCountryCode(newCountryCode, oldCountryCode) {
     methodPlaceholder(newCountryCode, oldCountryCode);
   }
+  watchEmptyValueEnabled() {
+    methodPlaceholder();
+  }
   watchValue(newValue, oldValue) {
     methodPlaceholder(newValue, oldValue);
   }
@@ -294,6 +305,27 @@ export class VegaInputPhoneNumber {
       },
       "defaultValue": "CountrySelectController.defaultAllowedCountryCodes"
     },
+    "emptyValueEnabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.35.0"
+          }],
+        "text": "Specifies whether the phone number input field can be set to an empty value.\n  When set to true, the value of phoneNumber is cleared when the input field is empty.\n  When set to false, the value of phoneNumber is always composed of the country code and phone number, even if the input field is empty."
+      },
+      "attribute": "empty-value-enabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -522,6 +554,9 @@ export class VegaInputPhoneNumber {
   static get watchers() { return [{
       "propName": "countryCode",
       "methodName": "watchCountryCode"
+    }, {
+      "propName": "emptyValueEnabled",
+      "methodName": "watchEmptyValueEnabled"
     }, {
       "propName": "value",
       "methodName": "watchValue"

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

@@ -516,7 +516,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
+        "resolved": "{ caseSensitive?: boolean; isScreenPosition?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-pagination/internal/vega-pagination-page-size-selector.js

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
-export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onChange, translationSlimmer, }) => {
+export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, }) => {
   const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
   const handleChange = (input) => {
     // Because input-select use single mode, so the detail is always a string type
@@ -14,7 +14,7 @@ export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptio
       h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
           id: option.toString(),
           displayName: option.toString(),
-        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: { matchTargetWidth: false, searchable: false }, 
+        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);

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

@@ -91,7 +91,7 @@ export class VegaPagination {
           const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
             ? this.pageSizeSelectorOptions
             : [...this.pageSizeSelectorOptions, this.pageSize];
-          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
         }
         case 'pageSelector':
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
@@ -285,6 +285,29 @@ export class VegaPagination {
         "text": "Specifies the options available for the page size selector\n   in the pagination component."
       },
       "defaultValue": "[10, 20, 50, 100]"
+    },
+    "dropdownProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DropdownPropsForPagination",
+        "resolved": "{ isScreenPosition?: boolean; }",
+        "references": {
+          "DropdownPropsForPagination": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Specifies the properties of the vega-dropdown component\n   used to configure the dropdown for the\n   page size selector in pagination."
+      }
     }
   }; }
   static get states() { return {