@globalpayments/vega 2.16.0 → 2.18.0

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

@@ -0,0 +1,147 @@
+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';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
+import ChangeManager from '../../../../helpers/change-manager/changeManager';
+import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, } from 'libphonenumber-js';
+import { CountrySelectController } from './country-select-controller';
+/**
+ * The `VegaInputPhoneNumberValueController` class in TypeScript manages input phone number values and
+ * country codes, providing methods to watch, set, and retrieve calling code prefixes.
+ */
+export class VegaInputPhoneNumberValueController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Format value to nation number
+     *
+     * @param {string} value - value will be formatted
+     * @returns {string} formatted national number.Example: (302) 333-4444
+     */
+    this.formatNationalNumber = (value) => {
+      var _a;
+      const formatter = new AsYouType(this.countryCode);
+      formatter.input(value);
+      const newCountry = (_a = formatter.country) !== null && _a !== void 0 ? _a : (value === this.getCallingCodePrefix(CountrySelectController.defaultCountryCode)
+        ? CountrySelectController.defaultCountryCode
+        : this.countryCode);
+      this.countrySelectController.setCountryCode(newCountry);
+      return formatIncompletePhoneNumber(this.removeCallingCodePrefix(value, newCountry), newCountry);
+    };
+  }
+  /**
+   * componentWillLoad
+   */
+  componentWillLoad() {
+    this.updateValue(this.value);
+  }
+  /**
+   * The `watchValue` function emits a change event with the provided value and notifies the
+   * ChangeManager about the form element value change.
+   *
+   * @param {string} value - The `value` parameter is a string that represents the value being watched or
+   * monitored.
+   */
+  watchValue(value) {
+    this.updateValue(value);
+    this.changeEventEmitter.emit(value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: value,
+    });
+  }
+  /**
+   * The function `getCallingCodePrefix` returns the calling code prefix for a given country code.
+   *
+   * @param {VegaCountryCode} countryCode - VegaCountryCode
+   * @returns {string} The `getCallingCodePrefix` function returns a string that includes the country calling code
+   * prefix for the specified `VegaCountryCode`.
+   */
+  getCallingCodePrefix(countryCode) {
+    return `+${getCountryCallingCode(countryCode)}`;
+  }
+  /**
+   * The `updateValue` function in TypeScript parses and formats a phone number input, handles errors,
+   * and updates the value accordingly.
+   *
+   * @param {string} value - The `updateValue` function takes a `value` parameter of type string. This
+   * function is responsible for updating the phone number value based on the input provided.
+   */
+  updateValue(value) {
+    const newValue = parseIncompletePhoneNumber(value || this.formatValue('', this.countryCode));
+    this.value = parseIncompletePhoneNumber(newValue);
+    this.phoneNumberInputValue = this.formatNationalNumber(newValue);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-phone-number-country-select-change}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update value the new country code
+   *
+   * @param {VegaCountryCode} newCountry - new country code
+   */
+  updateValueWithNewCountry(newCountry) {
+    this.value = this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry);
+  }
+  /**
+   * The `formatValue` function concatenates a calling code prefix with a national number.
+   *
+   * @param {string} nationalNumber - The `nationalNumber` parameter is a string representing the phone
+   * number without the country code.
+   * @param {VegaCountryCode} countryCode - The `countryCode` parameter is of type `VegaCountryCode`, which likely
+   * represents the country code of a specific country.
+   * @returns {string} The `formatValue` method returns a string that concatenates the calling code prefix for the
+   * given country with the national number provided as arguments.
+   */
+  formatValue(nationalNumber, countryCode) {
+    return `${this.getCallingCodePrefix(countryCode)}${nationalNumber}`;
+  }
+  /**
+   * The function removes the calling code prefix from a given value based on the specified country code.
+   *
+   * @param {string} value - The `value` parameter is a string that represents a phone number with a
+   * calling code prefix.
+   * @param {VegaCountryCode} countryCode - VegaCountryCode
+   * @returns {string} The `removeCallingCodePrefix` function is returning a substring of the `value` string
+   * starting from the length of the calling code prefix for the specified `country`.
+   */
+  removeCallingCodePrefix(value, countryCode) {
+    const prefix = this.getCallingCodePrefix(countryCode);
+    if (value.startsWith(prefix)) {
+      return value.replace(this.getCallingCodePrefix(countryCode), '').trim();
+    }
+    else {
+      return value.replace('+', '').trim();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputPhoneNumberValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "countryCode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "countrySelectController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputPhoneNumberValueController.prototype, "phoneNumberInputValue", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputPhoneNumberValueController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], VegaInputPhoneNumberValueController.prototype, "watchValue", null);

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

@@ -0,0 +1,180 @@
+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';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange, VegaSearch } from '../../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { CountryFlags } from '../../assets/countryFlags';
+import { getCountryCallingCode } from 'libphonenumber-js';
+import { COUNTRIES } from '../../assets/countries';
+export class CountrySelectRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The `openSelectDropdown` function is an arrow function that is defined within the
+     * `CountrySelectRenderer` class. It is responsible for triggering the `doOpen` method on the
+     * `inputSelectRef` element, which is a reference to the HTMLVegaInputSelectElement.
+     */
+    this.openSelectDropdown = () => {
+      void this.inputSelectRef.doOpen();
+    };
+    /**
+     * This `renderOption` function is responsible for rendering a dropdown item for a specific country in
+     * the `VegaInputPhoneNumberCountryCodeRenderer` component.
+     */
+    this.renderOption = (countryType) => {
+      const { callingCode, countryCode, name } = countryType;
+      const callingCodeWithPrefix = `+${callingCode}`;
+      return (h("vega-dropdown-item", { label: callingCodeWithPrefix, itemKey: countryCode, key: countryCode },
+        h("vega-flex", { alignItems: "center", gap: "size-12" },
+          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(countryCode), size: "size-16" }),
+          h("vega-font", { variant: "font-field-value", color: "text-primary" }, name),
+          h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${callingCodeWithPrefix})`))));
+    };
+    /**
+     * The `private countrySearchFilter` function is a filter function defined within the
+     * `CountrySelectController` class. It takes a `VegaCountryType` object as input and returns a boolean
+     * value based on whether the country matches the search criteria specified by the `countryCodeSearchString`
+     * property of the class.
+     *
+     * @param {VegaCountryType} country - the country to be searched
+     * @returns {boolean} the boolean return value
+     */
+    this.countrySearchFilter = (country) => {
+      return this.countryCodeSearchString
+        ? `${country.name.toLowerCase()} +${country.callingCode}`.includes(this.countryCodeSearchString.toLowerCase())
+        : true;
+    };
+    /**
+     * The `private customCountriesFilter` function is a custom filter function used to filter out
+     * countries based on the `countries` property of the `CountrySelectController` class.
+     *
+     * @param {VegaCountryType} countryType - the country to be filtered
+     * @returns {boolean} the boolean return value
+     */
+    this.customCountriesFilter = (countryType) => {
+      return this.allowedCountryCodes.includes(countryType.countryCode);
+    };
+  }
+  /**
+   * The function `watchCountryCode` emits an event with the calling code, country code, and name of the
+   * selected country.
+   *
+   * @param {VegaCountryCode} newCountryCode - The `newCountryCode` parameter in the `watchCountryCode` function is
+   * of type `VegaCountryCode`. It is used to specify the country for which the function will perform
+   * some actions, such as emitting an event with information about the country like calling code, name,
+   * and the country code itself.
+   */
+  watchCountryCode(newCountryCode) {
+    this.countryChangeEventEmitter.emit({
+      callingCode: getCountryCallingCode(newCountryCode),
+      countryCode: newCountryCode,
+      name: CountrySelectRenderer.allCountries[newCountryCode],
+    });
+  }
+  /**
+   * The `render()` method in the `VegaInputPhoneNumberCountryCodeRenderer` class is responsible for
+   * rendering the JSX structure of the component. Here's a breakdown of what it is doing:
+   */
+  render() {
+    return (h("vega-box", null,
+      h("vega-input-select", { vegaDropdownProps: { matchTargetWidth: false }, size: this.size, prefixIcon: VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
+          this.inputSelectRef = inputSelect;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, VegaChange, 
+          /*
+           * The below method is e2e-test covered in
+           * @see{module:vega-input-phone-number-country-select-change}
+           */
+          /* istanbul ignore next */
+          (e) => {
+            this.handleCountrySelectChange(e.detail);
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, VegaSearch, (e) => {
+            this.countrySelectController.setCountryCodeSearchString(e.detail);
+          });
+        }, value: this.countryCode },
+        h("div", { slot: "items" },
+          h("div", null, this.getCountrySelectOptions().map((country) => this.renderOption(country)))))));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-phone-number-country-select-change}
+   */
+  /* istanbul ignore next */
+  /**
+   *The `handleCountrySelectChange` method in the `CountrySelectRenderer` class is a private function
+   *that is responsible for handling the change event when a country is selected in the input select
+   *element of the component. Here's a breakdown of what it is doing:
+   */
+  handleCountrySelectChange(countryCode) {
+    this.countrySelectController.setCountryCode(countryCode);
+    this.valueController.updateValueWithNewCountry(countryCode);
+  }
+  /**
+   * The function `getCountrySelectOptions` returns an array of country options based on custom and
+   * search filters.
+   *
+   * @returns {VegaCountryType[]} An array of `VegaCountryType` objects that have passed through the `customCountriesFilter` and
+   * `countrySearchFilter` filters.
+   */
+  getCountrySelectOptions() {
+    return this.constructCountryArray(CountrySelectRenderer.allCountries)
+      .filter(this.customCountriesFilter)
+      .filter(this.countrySearchFilter);
+  }
+  /**
+   * The function constructCountryArray takes a list of country names and returns an array of country
+   * objects with calling codes, country codes, and names.
+   *
+   * @param {VegaCountryNameType} countries - The `countries` parameter is of type
+   * `VegaCountryNameType`, which is an object containing country names with their corresponding country
+   * codes.
+   * @returns {VegaCountryType[]} An array of objects of type `VegaCountryType` is being returned. Each object in the array
+   * contains the properties `callingCode`, `countryCode`, and `name`. The values for these properties
+   * are obtained by mapping over the keys of the `countryNames` object and calling the
+   * `getCountryCallingCode` function with the country code as an argument.
+   */
+  constructCountryArray(countries) {
+    return Object.keys(countries).map((country) => ({
+      callingCode: getCountryCallingCode(country),
+      countryCode: country,
+      name: countries[country],
+    }));
+  }
+}
+(() => {
+  VegaInternalIconManager.register(CountryFlags);
+})();
+CountrySelectRenderer.allCountries = COUNTRIES;
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "countryCode", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "allowedCountryCodes", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "countryCodeSearchString", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "countrySelectController", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "countryChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentMethod('watchCountryCode')
+], CountrySelectRenderer.prototype, "watchCountryCode", null);

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

@@ -0,0 +1,101 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange } from '../../../../helpers/event-manager/eventID/vegaEventId';
+import { parseIncompletePhoneNumber } from 'libphonenumber-js';
+export class PhoneNumberInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.phoneNumberMaskFormatter = (rawValue) => {
+      const newValue = parseIncompletePhoneNumber(rawValue);
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-input-phone-number-input-delete}
+       */
+      /* istanbul ignore next */
+      /**
+       * work around for keyboard press Backspace
+       * (123) -> (123
+       */
+      if (newValue === parseIncompletePhoneNumber(this.phoneNumberInputValue) &&
+        this.phoneNumberInputValue.length > rawValue.length) {
+        return this.phoneNumberInputValue.slice(0, -1);
+      }
+      return this.valueController.formatNationalNumber(newValue);
+    };
+  }
+  /**
+   * The function `getInputRef` returns the HTML input element reference stored in the `inputRef`
+   * property.
+   * @returns {HTMLVegaInputElement} An HTMLVegaInputElement, specifically the inputRef.
+   */
+  getInputRef() {
+    return this.inputRef;
+  }
+  /**
+   * The render function returns a JSX element with a vega-box containing a vega-input element with
+   * various props and event handlers.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a vega-box element with a vega-input element inside. The
+   * vega-input element has various props such as size, disabled, placeholder, ref, value, and onKeyDown
+   * set with corresponding values or functions.
+   */
+  render() {
+    return (h("vega-box", { flexGrow: 1 },
+      h("vega-input", { size: this.size, disabled: this.disabled, placeholder: this.placeholder, ref: (ref) => {
+          this.inputRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleInputChange.bind(this));
+        }, value: this.phoneNumberInputValue, maskConfig: {
+          type: 'custom-formatter',
+          formatter: this.phoneNumberMaskFormatter,
+        } })));
+  }
+  /**
+   * The handleInputChange function updates the input value with a new value including the calling code
+   * prefix for a specific country.
+   *
+   * @param {CustomEvent} e - The parameter `e` in the `handleInputChange` function is a CustomEvent
+   * object. It seems to contain a `detail` property that holds the new input value as a string.
+   */
+  handleInputChange(e) {
+    const newInputValue = e.detail;
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-phone-number-input-prevent-non-number}
+     */
+    /* istanbul ignore next */
+    this.valueController.updateValue(newInputValue.startsWith('+')
+      ? newInputValue
+      : `${this.valueController.getCallingCodePrefix(this.countryCode)}${newInputValue}`);
+  }
+}
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "placeholder", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "countryCode", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "countrySelectController", void 0);
+__decorate([
+  MapToComponentField()
+], PhoneNumberInputRenderer.prototype, "phoneNumberInputValue", void 0);

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

@@ -0,0 +1,60 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
+  getInputPhoneNumberContainerRef() {
+    return this.inputPhoneNumberContainerRef;
+  }
+  render() {
+    return (h(Fragment, null,
+      this.renderLabel(),
+      h("vega-flex", { class: "vega-input-phone-number-container", gap: "size-12", ref: (dom) => (this.inputPhoneNumberContainerRef = dom) },
+        this.countrySelectRenderer.render(),
+        this.phoneNumberInputRenderer.render()),
+      this.renderHint()));
+  }
+  /**
+   * The `renderLabel` function returns a JSX element for a Vega field label with specific props.
+   *
+   * @returns {HTMLVegaFieldLabelElement} An HTMLVegaFieldLabelElement is being returned.
+   */
+  renderLabel() {
+    return (h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+  }
+  /**
+   * The function `renderHint` returns a label element with a hint text if the `hint` property is provided.
+   *
+   * @returns {HTMLElement|null} A `label` element with the class `vega-input-phone-number-hint` containing a `vega-font` element
+   * with the variant `font-footnote1-short` and color `text-secondary`, displaying the hint text stored
+   * in the `this.hint` property.
+   */
+  renderHint() {
+    if (this.hint) {
+      return (h("label", { class: "vega-input-phone-number-hint" },
+        h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" }, this.hint)));
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "hint", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "countrySelectRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "phoneNumberInputRenderer", void 0);

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

@@ -0,0 +1,89 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+  width: 100%;
+}
+
+:host .vega-input-phone-number-hint {
+  display: inline-block;
+  padding-top: 12px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+:host .vega-input-phone-number-container.error vega-input::part(input-container) {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+:host .vega-input-phone-number-container.error vega-input::part(input-container):hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+:host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  box-shadow: 0 0 0;
+}
+
+:host vega-field-label {
+  margin-bottom: 8px;
+}
+
+:host .vega-error {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+  display: block;
+  padding-top: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+:host .vega-hidden {
+  display: none;
+}
+
+.vega-input-phone-number-dropdown-item {
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.vega-input-phone-number-dropdown-icon {
+  text-align: center;
+  font-size: 0px;
+}