@globalpayments/vega 2.17.0 → 2.18.0

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

@@ -0,0 +1,490 @@
+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 { Component, Element, Host, Prop, Watch, h, State, Event } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaInputPhoneNumberRenderer } from './slimmers/renderers/vega-input-phone-number-renderer';
+import { CountrySelectRenderer } from './slimmers/renderers/country-select-renderer';
+import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-input-renderer';
+import { getCountryCallingCode } from 'libphonenumber-js';
+import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/formFieldControllerSlimmer';
+import { ValidPhoneNumberRule } from '../../helpers/validator/rules/validPhoneNumberRule';
+import { CountrySelectController } from './slimmers/controllers/country-select-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { VegaChange, VegaCountryChange } from '../../helpers/event-manager/eventID/vegaEventId';
+import { InputPhoneNumberRequiredRule } from '../../helpers/validator/rules/inputPhoneNumberRequiredRule';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+export class VegaInputPhoneNumber {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.valueController = new VegaInputPhoneNumberValueController();
+    this.inputPhoneNumberRenderer = new VegaInputPhoneNumberRenderer();
+    this.countrySelectRenderer = new CountrySelectRenderer();
+    this.phoneNumberInputRenderer = new PhoneNumberInputRenderer();
+    this.countrySelectController = new CountrySelectController();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaChange);
+    this.countryChangeEventEmitter = createEventEmitSlimmer(VegaInputPhoneNumber, VegaCountryChange);
+    this.inputPhoneNumberEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host, true);
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired
+            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            : null,
+        },
+        {
+          propertyName: '',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+        {
+          propertyName: 'countryCode',
+          ruleFactory: () => new ValidPhoneNumberRule(() => this.countryCode),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '+1',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputPhoneNumberRenderer.getInputPhoneNumberContainerRef(),
+      touchableAreaGetter: () => [this.phoneNumberInputRenderer.getInputRef()],
+    });
+    this.countryCodeSearchString = '';
+    this.phoneNumberInputValue = '';
+    /**
+     * Specifies the label or title for the phone number input field.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the input field.
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the phone number input field.
+     */
+    this.size = 'default';
+    /**
+     * Determines whether the phone number input field is required.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Determines whether the phone number input field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Specifies the default country calling code using the two-letter uppercase country code.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.countryCode = CountrySelectController.defaultCountryCode;
+    /**
+     * Specifies the countries available for selection.
+     *
+     * 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.
+     */
+    this.allowedCountryCodes = CountrySelectController.defaultAllowedCountryCodes;
+    /**
+     * Specifies the value of the phone number input in [E.164]{@link https://en.wikipedia.org/wiki/E.164} format.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = `+${getCountryCallingCode(this.countryCode)}`;
+    /**
+     * Specifies custom validation rules for the phone number input field.
+     */
+    this.validationRules = [];
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether the phone number input field should undergo automatic validation
+     *    during the user's input.
+     */
+    this.autoValidation = true;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     */
+    this.hint = '';
+  }
+  watchCountryCode(newCountryCode, oldCountryCode) {
+    methodPlaceholder(newCountryCode, oldCountryCode);
+  }
+  watchValue(value) {
+    methodPlaceholder(value);
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.inputPhoneNumberRenderer.render()), this.host);
+  }
+  static get is() { return "vega-input-phone-number"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-input-phone-number.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-input-phone-number.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the label or title for the phone number input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'small'",
+        "resolved": "\"default\" | \"small\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the phone number input field."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is required."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "countryCode": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "VegaCountryCode",
+        "resolved": "\"AC\" | \"AD\" | \"AE\" | \"AF\" | \"AG\" | \"AI\" | \"AL\" | \"AM\" | \"AO\" | \"AR\" | \"AS\" | \"AT\" | \"AU\" | \"AW\" | \"AX\" | \"AZ\" | \"BA\" | \"BB\" | \"BD\" | \"BE\" | \"BF\" | \"BG\" | \"BH\" | \"BI\" | \"BJ\" | \"BL\" | \"BM\" | \"BN\" | \"BO\" | \"BQ\" | \"BR\" | \"BS\" | \"BT\" | \"BW\" | \"BY\" | \"BZ\" | \"CA\" | \"CC\" | \"CD\" | \"CF\" | \"CG\" | \"CH\" | \"CI\" | \"CK\" | \"CL\" | \"CM\" | \"CN\" | \"CO\" | \"CR\" | \"CU\" | \"CV\" | \"CW\" | \"CX\" | \"CY\" | \"CZ\" | \"DE\" | \"DJ\" | \"DK\" | \"DM\" | \"DO\" | \"DZ\" | \"EC\" | \"EE\" | \"EG\" | \"EH\" | \"ER\" | \"ES\" | \"ET\" | \"FI\" | \"FJ\" | \"FK\" | \"FM\" | \"FO\" | \"FR\" | \"GA\" | \"GB\" | \"GD\" | \"GE\" | \"GF\" | \"GG\" | \"GH\" | \"GI\" | \"GL\" | \"GM\" | \"GN\" | \"GP\" | \"GQ\" | \"GR\" | \"GT\" | \"GU\" | \"GW\" | \"GY\" | \"HK\" | \"HN\" | \"HR\" | \"HT\" | \"HU\" | \"ID\" | \"IE\" | \"IL\" | \"IM\" | \"IN\" | \"IO\" | \"IQ\" | \"IR\" | \"IS\" | \"IT\" | \"JE\" | \"JM\" | \"JO\" | \"JP\" | \"KE\" | \"KG\" | \"KH\" | \"KI\" | \"KM\" | \"KN\" | \"KP\" | \"KR\" | \"KW\" | \"KY\" | \"KZ\" | \"LA\" | \"LB\" | \"LC\" | \"LI\" | \"LK\" | \"LR\" | \"LS\" | \"LT\" | \"LU\" | \"LV\" | \"LY\" | \"MA\" | \"MC\" | \"MD\" | \"ME\" | \"MF\" | \"MG\" | \"MH\" | \"MK\" | \"ML\" | \"MM\" | \"MN\" | \"MO\" | \"MP\" | \"MQ\" | \"MR\" | \"MS\" | \"MT\" | \"MU\" | \"MV\" | \"MW\" | \"MX\" | \"MY\" | \"MZ\" | \"NA\" | \"NC\" | \"NE\" | \"NF\" | \"NG\" | \"NI\" | \"NL\" | \"NO\" | \"NP\" | \"NR\" | \"NU\" | \"NZ\" | \"OM\" | \"PA\" | \"PE\" | \"PF\" | \"PG\" | \"PH\" | \"PK\" | \"PL\" | \"PM\" | \"PR\" | \"PS\" | \"PT\" | \"PW\" | \"PY\" | \"QA\" | \"RE\" | \"RO\" | \"RS\" | \"RU\" | \"RW\" | \"SA\" | \"SB\" | \"SC\" | \"SD\" | \"SE\" | \"SG\" | \"SH\" | \"SI\" | \"SJ\" | \"SK\" | \"SL\" | \"SM\" | \"SN\" | \"SO\" | \"SR\" | \"SS\" | \"ST\" | \"SV\" | \"SX\" | \"SY\" | \"SZ\" | \"TA\" | \"TC\" | \"TD\" | \"TG\" | \"TH\" | \"TJ\" | \"TK\" | \"TL\" | \"TM\" | \"TN\" | \"TO\" | \"TR\" | \"TT\" | \"TV\" | \"TW\" | \"TZ\" | \"UA\" | \"UG\" | \"US\" | \"UY\" | \"UZ\" | \"VA\" | \"VC\" | \"VE\" | \"VG\" | \"VI\" | \"VN\" | \"VU\" | \"WF\" | \"WS\" | \"XK\" | \"YE\" | \"YT\" | \"ZA\" | \"ZM\" | \"ZW\"",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the default country calling code using the two-letter uppercase country code."
+      },
+      "attribute": "country-code",
+      "reflect": true,
+      "defaultValue": "CountrySelectController.defaultCountryCode"
+    },
+    "allowedCountryCodes": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaCountryCode[]",
+        "resolved": "CountryCode[]",
+        "references": {
+          "VegaCountryCode": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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."
+      },
+      "defaultValue": "CountrySelectController.defaultAllowedCountryCodes"
+    },
+    "value": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the value of the phone number input in [E.164]{@link https ://en.wikipedia.org/wiki/E.164} format."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "`+${getCountryCallingCode(this.countryCode)}`"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/formFieldValidationRule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies custom validation rules for the phone number input field."
+      },
+      "defaultValue": "[]"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the current value in the field is considered valid\n   based on the defined validation rules."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the phone number input field should undergo automatic validation\n   during the user's input."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field."
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "hint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
+      },
+      "attribute": "hint",
+      "reflect": false,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "countryCodeSearchString": {},
+    "phoneNumberInputValue": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a value change."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "vegaCountryChange",
+      "name": "vegaCountryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "countryChange",
+      "name": "countryChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying a country change."
+      },
+      "complexType": {
+        "original": "VegaCountryType",
+        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "references": {
+          "VegaCountryType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "countryCode",
+      "methodName": "watchCountryCode"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputPhoneNumber.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "valueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "phoneNumberInputRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countrySelectController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "inputPhoneNumberEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputPhoneNumber.prototype, "formFieldController", void 0);

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

@@ -210,10 +210,9 @@
 }
 
 :host .vega-input-select-prefix-icon {
-  width: 16px;
-  height: 16px;
+  text-align: center;
   color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
-  padding-bottom: 2px;
+  font-size: 0px;
 }
 
 :host .vega-input-select-toggle-icon {

package/dist/collection/constants/ui.js

@@ -69,6 +69,8 @@ export const VegaNativeEventName = [
   'actionClick',
   'eventClick',
   'dateDblClick',
+  'countryChange',
+  'actionButtonClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/event-manager/eventID/componentEventIdMap.js

@@ -1,8 +1,8 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaChange, VegaEventClick, VegaDateDblClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
-  ['vega-banner', [VegaClose]],
+  ['vega-banner', [VegaClose, VegaActionButtonClick]],
   ['vega-breadcrumb', [VegaClick]],
   ['vega-button', [VegaClick]],
   ['vega-button-circle', [VegaClick]],
@@ -26,6 +26,7 @@ const entries = [
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
   ['vega-input', [VegaChange, VegaFocus, VegaBlur]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
+  ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
   ['vega-input-select', [VegaChange, VegaSearch]],
   ['vega-item-toggle', [VegaToggleStatus]],

package/dist/collection/helpers/event-manager/eventID/vegaEventId.js

@@ -87,4 +87,6 @@ export const VegaDropdownSearch = new VegaEventID('vegaSearch', 'dropdownSearch'
 export const VegaActionClick = new VegaEventID('vegaActionClick', 'actionClick');
 export const VegaEventClick = new VegaEventID('vegaEventClick', 'eventClick');
 export const VegaDateDblClick = new VegaEventID('vegaDateDblClick', 'dateDblClick');
+export const VegaCountryChange = new VegaEventID('vegaCountryChange', 'countryChange');
+export const VegaActionButtonClick = new VegaEventID('vegaActionButtonClick', 'actionButtonClick');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur];

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -159,5 +159,10 @@ const FeatureFlagsMap = {
     createdTimestamp: 1719910557333,
     createdAtVersion: '2.12.0',
   },
+  'VEGA_BANNER_DEPRECATED_ACTION_BUTTON_PROP_VEGA_CLICK': {
+    description: `Feature flag to deprecated the vega-banner component property actionButtons property vegaClick`,
+    createdTimestamp: 1723449433833,
+    createdAtVersion: '2.20.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -0,0 +1,48 @@
+/**
+ * Used to format a string using a custom formatter.
+ */
+export class CustomFormatterStrategy {
+  /**
+   * The constructor function takes a CustomStringFormatter parameter and assigns it to the formatter
+   * property of the class.
+   *
+   * @param {CustomStringFormatter} formatter - The `formatter` parameter is an instance of a custom
+   * string formatter class that you are passing to the constructor of the class. This custom string
+   * formatter class likely contains methods or properties related to formatting strings in a specific
+   * way according to your requirements.
+   */
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+  /**
+   * The format function in TypeScript takes a string input and returns the formatted output using a
+   * formatter method.
+   *
+   * @param {string} input - The `format` function takes a string input and passes it to the `formatter`
+   * function to format it.
+   * @returns {string} The `format` function is returning the result of calling the `formatter` function with the
+   * `input` string as its argument.
+   */
+  format(input) {
+    return this.formatter(input);
+  }
+  /**
+   * The function calculates the caret position in a formatted input string.
+   *
+   * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
+   * that represents the text input where you want to calculate the caret position.
+   * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
+   * string.
+   */
+  calculateCaretPosition(input) {
+    return this.format(input).length;
+  }
+  /**
+   * Trigger the formatter at init
+   *
+   * @returns {boolean} true
+   */
+  shouldTriggerAtInit() {
+    return true;
+  }
+}

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -0,0 +1,7 @@
+import { CustomFormatterStrategy } from '../../string-formatter/custom-formatter-strategy';
+test('custom formatter strategy is working as expected', () => {
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  expect(customFormatterStrategy.format('test')).toBe('TEST');
+  expect(customFormatterStrategy.calculateCaretPosition('test')).toBe(4);
+  expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
+});

package/dist/collection/helpers/slimmers/element-appender-container/defaultWrapper.js

@@ -23,7 +23,9 @@ export class DefaultWrapper {
      */
     this.retrieve = () => {
       const container = document.body;
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }

package/dist/collection/helpers/slimmers/element-appender-container/positionRelativeToWrapper.js

@@ -26,7 +26,9 @@ export class PositionRelativeToWrapper {
      */
     this.retrieve = () => {
       const container = document.querySelector(this.showConfig.positionRelativeTo);
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }