@globalpayments/vega 2.35.0 → 2.37.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/slimmers/controllers/vega-dropdown-scrollable-controller.js

@@ -7,11 +7,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { extractNumberFromString } from '../../../../utils/ui';
 import { LogUtility } from '../../../../utils/log';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 /**
  * The `VegaDropdownScrollableController` class in TypeScript manages the behavior of a scrollable dropdown component,
  * adjusting list container height and scrolling to specific indexes based on render mode and selected source key.
  */
 export class VegaDropdownScrollableController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-dropdown-shadow-root-scroll-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * Listen scrolling of dropdown content
+     */
+    this.onScroll = () => {
+      !this.renderModeController.isSourceRenderMode() &&
+        ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.renderer.getDropdownContentBoxRef(),
+        });
+    };
+  }
   /**
    * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
    * if the dropdown is shown in a certain render mode.

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

@@ -64,7 +64,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
     return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
-      }, ref: (ref) => (this.templateContainerRef = ref) },
+      }, ref: (ref) => (this.templateContainerRef = ref), onScroll: this.scrollableController.onScroll },
       h("slot", { name: "items" })));
   }
 }
@@ -98,6 +98,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "scrollableController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);

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-field-label/vega-field-label.js

@@ -100,7 +100,7 @@ export class VegaFieldLabel {
       "mutable": false,
       "complexType": {
         "original": "LabelSuffixButtonProps",
-        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
         "references": {
           "LabelSuffixButtonProps": {
             "location": "import",

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-flex/vega-flex.js

@@ -301,6 +301,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
           }],
         "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
       },
@@ -330,6 +333,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"
           }],
         "text": "Specifies the box's base size, defining its initial\n   width or height in a flex container."
       },
@@ -359,6 +365,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
           }],
         "text": "Specifies how the box grows to fill available space in a flex container."
       },
@@ -388,6 +397,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink"
           }],
         "text": "Specifies how much the box shrinks to fit within a flex container."
       },

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-input/vega-input.js

@@ -29,6 +29,7 @@ import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subj
 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';
 /**
  * @vegaVersion 1.0.5
  */
@@ -334,7 +335,10 @@ export class VegaInput {
    * releated issue: https://gitlab.com/heartland1/vega/tiger/-/issues/646
    */
   /* istanbul ignore next */
-  watchMaskChange() {
+  watchMaskChange(newValue, oldValue) {
+    if (Array.isArray(newValue) && Array.isArray(oldValue) && isArrayEqual(newValue, oldValue, true)) {
+      return;
+    }
     this.maskConfigController.setupStringFormatter(this.inputRef);
   }
   /**
@@ -435,7 +439,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "LabelSuffixButtonProps",
-        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
         "references": {
           "LabelSuffixButtonProps": {
             "location": "import",

package/dist/collection/components/vega-input-credit-card/test/share.js

@@ -9,7 +9,7 @@
  * the input field.
  */
 export const typeInputCreditCard = async (page, value) => {
-  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value);
+  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value, { delay: 10 });
 };
 /**
  * The function `clickCreditCardInput` clicks on the credit card input field on a web page.

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

@@ -153,7 +153,7 @@ export class VegaInputSelect {
      */
     this.placeholder = 'Please select';
     /**
-     * Provides partial properties for the dropdown component used
+     * Provides partial properties for the `vega-dropdown` component used
      *    in the input select element.
      *
      * You can specify custom properties and their corresponding values as needed.
@@ -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": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -531,7 +531,7 @@ export class VegaInputSelect {
             "name": "vegaVersion",
             "text": "1.3.0"
           }],
-        "text": "Provides partial properties for the dropdown component used\n   in the input select element.\n\nYou can specify custom properties and their corresponding values as needed."
+        "text": "Provides partial properties for the `vega-dropdown` component used\n   in the input select element.\n\nYou can specify custom properties and their corresponding values as needed."
       },
       "defaultValue": "{}"
     },

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-controller.js

@@ -0,0 +1,64 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Modal backdrop controller
+ */
+export class VegaModalBackdropController extends VegaSlimmer {
+  /**
+   * Get the backdropRef element or null.
+   *
+   * @returns {HTMLElement | null} - The backdropRef.
+   */
+  getBackdropRef() {
+    return this.backdropRef;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-color-default-e2e}
+   * @see{module:vega-modal-backdrop-color-semi-e2e}
+   * @see{module:vega-modal-backdrop-color-none-e2e}
+   * @see{module:vega-modal-default-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set backdrop of modal.
+   */
+  setBackdrop() {
+    if (this.backdrop === 'none')
+      return;
+    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add('modal-backdrop');
+      backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
+      document.querySelector('body').append(backdrop);
+    }
+    this.backdropRef = backdrop;
+  }
+  /**
+   * Removes the backdrop element if it exists.
+   */
+  removeBackdrop() {
+    this.backdropRef && this.backdropRef.remove();
+  }
+}
+VegaModalBackdropController.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdrop", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdropColor", void 0);