@globalpayments/vega 2.36.0 → 2.37.1

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-marker-renderer.js

@@ -0,0 +1,164 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Render a red line that representing the current time
+ */
+export class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
+  /**
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
+   */
+  render(source) {
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    return (h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return h("div", { key: item.date, class: { active: item.isToday() } });
+      }))));
+  }
+  /**
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
+   */
+  updateTimeLine(viewMode) {
+    this.scrollToTargetTimeBlock(viewMode);
+    this.syncTimeMarkerPosition(viewMode);
+  }
+  /**
+   * remove setInterval when component destroy
+   */
+  clearTimer() {
+    clearInterval(this.timeMarkerPositionTimer);
+  }
+  /**
+   * Add the time mark position update logic if the component add back to page
+   */
+  updateTimeLineIfComponentAddBack() {
+    this.syncTimeMarkerPosition(this.viewMode);
+  }
+  /**
+   * Should display the current time block in the view if the default view mode is not month
+   */
+  displayCurrentTimeBlockByDefault() {
+    this.scrollToTargetTimeBlock(this.viewMode);
+  }
+  /**
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   *
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   */
+  getTimeMarkerPosition() {
+    const now = new Date();
+    const minutesOneDay = 24 * 60;
+    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  syncTimeMarkerPosition(viewMode) {
+    clearInterval(this.timeMarkerPositionTimer);
+    if (viewMode !== 'month') {
+      this.timeMarkerPositionTimer = setInterval(() => {
+        if (this.timeMarkerRef) {
+          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
+        }
+      }, 60 * 1000);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   * @see{module:vega-calendar-scroll-to-center-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  scrollToTargetTimeBlock(viewMode) {
+    if (viewMode !== 'month') {
+      // add setTimeout here to make sure call the scroll into view after time line rendered.
+      const oneFrame = 16;
+      setTimeout(() => {
+        const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
+        const top = Math.max(0, this.getViewCenterPosition());
+        if (calendarViewElement && top) {
+          calendarViewElement.scrollTo({ top });
+        }
+      }, oneFrame);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   * @see{module:vega-calendar-scroll-to-center-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Get the center position of the display area.
+   * <div class='calendar-view'>
+   *   <div class='calendar-view-title-container'></div>
+   *   <div class='display-view'>
+   *   <div class='empty-space'></div>
+   * 		<div class='time-marker'></div>
+   *   </div>
+   * </div>
+   *
+   * @returns {number}
+   */
+  getViewCenterPosition() {
+    const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
+    if (calendarViewElement) {
+      const fixedWeekHeader = calendarViewElement.querySelector('.calendar-view-title-container');
+      const weekHeaderHeight = fixedWeekHeader.offsetHeight;
+      const viewHeight = calendarViewElement.offsetHeight;
+      const displayViewHeight = Math.max(viewHeight - weekHeaderHeight, 0);
+      const halfDisplayViewHeight = displayViewHeight / 2;
+      const viewScrollHeight = calendarViewElement.scrollHeight;
+      const emptySpace = 16;
+      const timeMarkerTop = (Number(this.getTimeMarkerPosition().replace('%', '')) / 100) *
+        Math.max(viewScrollHeight - emptySpace - weekHeaderHeight, 0);
+      if (!isNaN(halfDisplayViewHeight) && timeMarkerTop && timeMarkerTop > halfDisplayViewHeight) {
+        return timeMarkerTop - halfDisplayViewHeight + emptySpace;
+      }
+    }
+    return 0;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarTimeMarkerRenderer.prototype, "displayCurrentTimeBlockByDefault", null);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.js

@@ -54,7 +54,7 @@ export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
             this.renderHourBlock(item)));
         })),
         this.dayViewTimedEventRenderer.render(),
-        this.timeLineRenderer.renderTimeMarker(source))));
+        this.timeMarkerRenderer.render(source))));
   }
   /**
    * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
@@ -89,6 +89,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);

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

@@ -30,6 +30,7 @@ import { VegaCalendarFullDayEventLayoutRenderer } from './slimmers/common/render
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaCalendarFullDayEventMoreButtonRenderer } from './slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaCalendarTimeMarkerRenderer } from './slimmers/day-view/renderers/vega-calendar-time-marker-renderer';
 /**
  * @vegaVersion 2.14.0
  */
@@ -44,8 +45,9 @@ export class VegaCalendar {
     this.monthViewRenderer = new VegaCalendarMonthViewRenderer();
     this.viewWithTimeRenderer = new VegaCalendarViewWithTimeRenderer();
     this.timeLineRenderer = new VegaCalendarTimeLineRenderer();
+    this.timeMarkerRenderer = new VegaCalendarTimeMarkerRenderer();
     this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
-    //The  current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
+    //The current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
@@ -230,7 +232,7 @@ export class VegaCalendar {
       "mutable": false,
       "complexType": {
         "original": "DropdownPropsForCalendar",
-        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"click\" | \"hover\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
+        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"hover\" | \"click\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
         "references": {
           "DropdownPropsForCalendar": {
             "location": "import",
@@ -532,6 +534,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeMarkerRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthEventRenderer", void 0);

package/dist/collection/components/vega-checkbox/vega-checkbox-group/vega-checkbox-group.js

@@ -265,7 +265,7 @@ export class VegaCheckboxGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<GapType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; gap?: ResponsiveType<GapType>; alignItems?: ResponsiveType<FlexAlignItemType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

package/dist/collection/components/vega-checkbox/vega-checkbox.css

@@ -83,7 +83,11 @@
   justify-content: center;
 }
 
-.vega-checkbox-container:hover {
+:host(.disabled) .vega-checkbox-container {
+  cursor: not-allowed;
+}
+
+:host(:not(.disabled)) .vega-checkbox-container {
   cursor: pointer;
 }
 

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

@@ -18,6 +18,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaCheckboxShowErrorController } from './slimmers/controllers/vega-checkbox-show-error-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 /**
  * @vegaVersion 1.0.7
  */
@@ -38,6 +39,11 @@ export class VegaCheckbox {
       touchableAreaGetter: () => [this.inputRef],
     });
     this.changeEventEmitter = createEventEmitSlimmer(VegaCheckbox, VegaChange);
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Indicates whether the parent checkbox group is disabled.
@@ -114,7 +120,6 @@ export class VegaCheckbox {
     /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
       this.checked = e.currentTarget.checked;
-      e.stopPropagation();
     };
     this.onSelectedIconClick = (e) => {
       e.stopPropagation();
@@ -473,6 +478,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCheckbox.prototype, "dropdownEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCheckbox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-combo-box/vega-combo-box.js

@@ -449,7 +449,7 @@ export class VegaComboBox {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForComboBox",
-        "resolved": "{ dynamicOption?: boolean; isLoading?: boolean; matchContainerHeight?: boolean; maxHeight?: number; positionRelativeTo?: string; }",
+        "resolved": "{ maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; dynamicOption?: boolean; isLoading?: boolean; }",
         "references": {
           "VegaDropdownPropsForComboBox": {
             "location": "import",

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

@@ -176,7 +176,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; disabled?: boolean; iconAlign?: VegaButtonIconAlign; variant?: VegaButtonVariant; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",
@@ -222,7 +222,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; disabled?: boolean; iconAlign?: VegaButtonIconAlign; variant?: VegaButtonVariant; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",
@@ -289,7 +289,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
-        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"hide\" | \"show\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<number>; handleClose?: () => boolean; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType>; showCloseButton?: boolean; }",
         "references": {
           "Partial": {
             "location": "global"

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

@@ -76,6 +76,7 @@ export class VegaImageUploader {
      * Specifies the allowed file types for upload.
      *
      * @vegaVersion 1.14.0
+     * @defaultValue .jpg,.png,.jpeg
      */
     this.accept = IMAGE_FILE_TYPES.map((type) => `.${type}`).join(',');
     /**
@@ -225,6 +226,9 @@ export class VegaImageUploader {
         "tags": [{
             "name": "vegaVersion",
             "text": "1.14.0"
+          }, {
+            "name": "defaultValue",
+            "text": ".jpg,.png,.jpeg"
           }],
         "text": "Specifies the allowed file types for upload."
       },

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

@@ -91,6 +91,7 @@ export class VegaInputPhoneNumber {
      * Specifies the default country calling code using the two-letter uppercase country code.
      *
      * @vegaVersion 2.18.0
+     * @defaultValue US
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.countryCode = CountrySelectController.defaultCountryCode;
@@ -100,6 +101,7 @@ export class VegaInputPhoneNumber {
      * Note: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes.
      *
      * @vegaVersion 2.18.0
+     * @defaultValue ['US', 'CN', ...]{@link VegaCountryCode}
      */
     this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
     /**
@@ -115,6 +117,7 @@ export class VegaInputPhoneNumber {
      *
      * @VegaWarning Note: The input phone number field will always have a value. If no phone number is entered, the default format is `+{default_country_code}`. For example, if the default country code is US, the default value will be `+1`.
      * @vegaVersion 2.18.0
+     * @defaultValue +1
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = `+${getCountryCallingCode(this.countryCode)}`;
@@ -274,6 +277,9 @@ export class VegaInputPhoneNumber {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.18.0"
+          }, {
+            "name": "defaultValue",
+            "text": "US"
           }],
         "text": "Specifies the default country calling code using the two-letter uppercase country code."
       },
@@ -300,6 +306,9 @@ export class VegaInputPhoneNumber {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.18.0"
+          }, {
+            "name": "defaultValue",
+            "text": "['US', 'CN', ...]{@link VegaCountryCode }"
           }],
         "text": "Specifies the countries available for selection.\n\nNote: By default, 245 codes are provided, but loading all of them may take time. To improve performance, it is recommended to include only the necessary codes."
       },
@@ -343,6 +352,9 @@ export class VegaInputPhoneNumber {
           }, {
             "name": "vegaVersion",
             "text": "2.18.0"
+          }, {
+            "name": "defaultValue",
+            "text": "+1"
           }],
         "text": "Specifies the value of the phone number input in [E.164]{@link https ://en.wikipedia.org/wiki/E.164} format."
       },

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; isScreenPosition?: 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; itemDisplayRule?: \"ellipsis\" | \"newline\"; }",
         "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-item-toggle/vega-item-toggle.js

@@ -29,12 +29,14 @@ export class VegaItemToggle {
      * @deprecated This property will be removed soon and replaced by prop statusMap
      *
      * @vegaVersion 1.3.0
+     * @defaultValue {unToggledIcon: 'plus-sign', toggledIcon: 'delete-bin', unToggledLabel: 'Add', togglingLabel: 'Added', toggledLabel: 'Remove', unTogglingLabel: 'Removed'}
      */
     this.itemToggleStatusMap = VegaItemToggle.defaultStatusMap;
     /**
      * Defines the labels and icons associated with the toggle states.
      *
      * @vegaVersion 2.2.0
+     * @defaultValue {unToggledIcon: 'plus-sign', toggledIcon: 'delete-bin', unToggledLabel: 'Add', togglingLabel: 'Added', toggledLabel: 'Remove', unTogglingLabel: 'Removed'}
      */
     this.statusMap = VegaItemToggle.defaultStatusMap;
     /**
@@ -141,6 +143,9 @@ export class VegaItemToggle {
           }, {
             "name": "vegaVersion",
             "text": "1.3.0"
+          }, {
+            "name": "defaultValue",
+            "text": "{unToggledIcon: 'plus-sign', toggledIcon: 'delete-bin', unToggledLabel: 'Add', togglingLabel: 'Added', toggledLabel: 'Remove', unTogglingLabel: 'Removed'}"
           }],
         "text": "Defines the labels and icons associated with the toggle states."
       },
@@ -165,6 +170,9 @@ export class VegaItemToggle {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.2.0"
+          }, {
+            "name": "defaultValue",
+            "text": "{unToggledIcon: 'plus-sign', toggledIcon: 'delete-bin', unToggledLabel: 'Add', togglingLabel: 'Added', toggledLabel: 'Remove', unTogglingLabel: 'Removed'}"
           }],
         "text": "Defines the labels and icons associated with the toggle states."
       },