@globalpayments/vega 2.45.0 → 2.47.0

package/dist/collection/components/vega-flag-icon/slimmers/controllers/vega-flag-icon-controller.js

@@ -0,0 +1,102 @@
+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 { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { LogUtility } from '../../../../utils/log';
+import { FLAG_ICON_LOADED } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../../../../helpers/change-manager/observer/observer';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import { forceUpdate } from '@stencil/core';
+/**
+ * The function `dynamicLoadTheCountryFlags` will dynamic import and register flags of all countries at once
+ */
+export async function dynamicLoadTheCountryFlags() {
+  try {
+    const countryFlags = (await import('../../assets/country-flags')).CountryFlags;
+    VegaInternalIconManager.register(countryFlags);
+    changeManager.notify(FLAG_ICON_LOADED, {});
+  }
+  catch (err) {
+    /* istanbul ignore next */
+    LogUtility.error(`Error loading flag module:`, err);
+  }
+}
+/**
+ * The `VegaFlagIconController` class in TypeScript manage country flag and
+ * country codes, dynamic import the flags of all countries and get the country icon by specific code.
+ */
+export class VegaFlagIconController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Determines whether the observer should accept changes.
+     *
+     * @returns {boolean} Always returns true in the current implementation.
+     */
+    this.isAcceptObserver = () => {
+      return true;
+    };
+    /**
+     * This function listens whether the logo icon is imported asynchronously.
+     */
+    this.listenerCallback = () => {
+      forceUpdate(this.host);
+    };
+  }
+  /**
+   * componentWillLoad
+   */
+  componentWillLoad() {
+    if (!this.country)
+      return;
+    const hasIcon = this.isFlagForCountryCodeLoaded(this.country);
+    if (!hasIcon)
+      this.registerObserver();
+  }
+  /**
+   * disconnectedCallback
+   */
+  unRegisterObserver() {
+    if (this.observer) {
+      changeManager.unregister(FLAG_ICON_LOADED, this.observer);
+      this.observer = null;
+    }
+  }
+  /**
+   * The function creates an observer to observe the subject of FLAG_ICON_LOADED.
+   */
+  registerObserver() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), this.listenerCallback.bind(this));
+    changeManager.register(FLAG_ICON_LOADED, this.observer);
+  }
+  /**
+   * Checks if the country icon exists by country code.
+   *
+   * @param {VegaCountryCode} countryCode - The `country` parameter is of type `VegaCountryCode`, which is likely a
+   * custom data type representing a country code.
+   * @returns {boolean} return the icon is exist or not.
+   */
+  isFlagForCountryCodeLoaded(countryCode) {
+    const icon = VegaInternalIconManager.getIconKey(countryCode);
+    return VegaInternalIconManager.hasIcon(icon);
+  }
+}
+(() => {
+  void dynamicLoadTheCountryFlags();
+})();
+__decorate([
+  MapToComponentField()
+], VegaFlagIconController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFlagIconController.prototype, "country", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaFlagIconController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaFlagIconController.prototype, "unRegisterObserver", null);

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

@@ -0,0 +1,28 @@
+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';
+import { h } from '@stencil/core';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaIconManager } from '../../../../helpers/icon/icon-manager';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
+export class VegaFlagIconRenderer extends VegaSlimmer {
+  render() {
+    const icon = VegaInternalIconManager.getIconKey(this.country);
+    const hasIcon = VegaIconManager.hasIcon(icon);
+    const height = formatAndValidResponsiveToken(this.size, 'widthAndHeight');
+    const width = `calc(${height} * 4 / 3)`;
+    if (!hasIcon)
+      return (h("vega-skeleton", { type: "image", corners: "rounded-2", height: height, width: width }));
+    return h("vega-icon", { icon: icon, size: this.size, style: { width: width } });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFlagIconRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFlagIconRenderer.prototype, "country", void 0);

package/dist/collection/components/vega-flag-icon/vega-flag-icon.css

@@ -0,0 +1,13 @@
+/* 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;
+}
+:host vega-icon,
+:host vega-skeleton,
+:host svg {
+  display: block;
+}

package/dist/collection/components/vega-flag-icon/vega-flag-icon.js

@@ -0,0 +1,106 @@
+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, Prop, h, Element, Host } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaFlagIconRenderer } from './slimmers/renderers/vega-flag-icon-renderer';
+import { VegaFlagIconController } from './slimmers/controllers/vega-flag-icon-controller';
+/**
+ * @vegaVersion 2.46.0
+ */
+export class VegaFlagIcon {
+  constructor() {
+    this.globalSlimmers = {};
+    this.renderer = new VegaFlagIconRenderer();
+    this.vegaFlagIconController = new VegaFlagIconController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Specifies the width and height of the icon.
+     *
+     * @vegaVersion 2.46.0
+     */
+    this.size = 'size-16';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  static get is() { return "vega-flag-icon"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-flag-icon.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-flag-icon.css"]
+  }; }
+  static get properties() { return {
+    "country": {
+      "type": "string",
+      "mutable": false,
+      "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/flag.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "Specifies the country code using the two-letter uppercase country code."
+      },
+      "attribute": "country",
+      "reflect": false
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "SpacingTokenType",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\"",
+        "references": {
+          "SpacingTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "Specifies the width and height of the icon."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'size-16'"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaFlagIcon.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "vegaFlagIconController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlagIcon.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-nest-state-controller.js

@@ -0,0 +1,31 @@
+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 } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+/**
+ * Sync data from parent vega form
+ */
+export class VegaFormNestStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-form',
+      subStates: [
+        {
+          subStateName: 'disableBlurValidation',
+          parentStateName: 'disableBlurValidation',
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFormNestStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFormNestStateController.prototype, "disableBlurValidation", void 0);

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

@@ -13,7 +13,7 @@ import { isObjectArrayLike } from '../../utils/array';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { isElementVisible, findParent, isParent } from '../../utils/ui';
 import { ImmutableMap } from '../../helpers/immutable/immutable-map';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaFormReset, VegaFormSubmit, VegaValidate, } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -21,6 +21,8 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/sl
 import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalValid } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { VegaFormNestStateController } from './slimmers/controllers/vega-form-nest-state-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -30,6 +32,8 @@ export class VegaForm {
     this.submitEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormSubmit);
     this.resetEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormReset);
     this.validateEventEmitter = createEventEmitSlimmer(VegaForm, VegaValidate);
+    this.disableBlurValidationNotifySlimmer = createSubStateNotifySlimmer(VegaForm, 'disableBlurValidation', 'watchDisableBlurValidation');
+    this.stateController = new VegaFormNestStateController();
     this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaFormSubmit, VegaFormReset], () => this.host.querySelector('vega-form'), {
       customPreventHandle: (e) => {
         e.stopPropagation();
@@ -90,6 +94,18 @@ export class VegaForm {
      * @vegaVersion 1.3.0
      */
     this.isTouched = false;
+    /**
+     * Specifies whether form validation should be disabled on blur events of form elements.
+     *
+     *  - This helps prevent validation on blur when clicking Submit inside an input,
+     *        avoiding error messages that shift the button and block the click.
+     *  - For nested forms, the parent form will override this property
+     *        to ensure consistent validation behavior.
+     *
+     * @vegaVersion 2.47.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.disableBlurValidation = false;
     /**
      * If the element is valid, remove it from the set of
      *    invalid elements. If the element is invalid,
@@ -117,6 +133,9 @@ export class VegaForm {
     this.validateEventEmitter.emit(this.isValid);
     ChangeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: this.isValid });
   }
+  watchDisableBlurValidation() {
+    methodPlaceholder();
+  }
   /**
    * When the vegaForm is deleted, it is necessary to notify
    *    the parent's vegaForm to update its isValid status.
@@ -475,6 +494,27 @@ export class VegaForm {
       "attribute": "is-touched",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "disableBlurValidation": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.47.0"
+          }],
+        "text": "Specifies whether form validation should be disabled on blur events of form elements.\n\n - This helps prevent validation on blur when clicking Submit inside an input,\n       avoiding error messages that shift the button and block the click.\n - For nested forms, the parent form will override this property\n       to ensure consistent validation behavior."
+      },
+      "attribute": "disable-blur-validation",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -790,6 +830,9 @@ export class VegaForm {
   static get watchers() { return [{
       "propName": "isValid",
       "methodName": "watchIsValid"
+    }, {
+      "propName": "disableBlurValidation",
+      "methodName": "watchDisableBlurValidation"
     }]; }
 }
 __decorate([
@@ -804,6 +847,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "validateEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "disableBlurValidationNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "stateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaForm.prototype, "childEventPrevent", void 0);

package/dist/collection/components/vega-image-uploader/vega-image-uploader.css

@@ -50,13 +50,21 @@
   color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
 }
 :host(:not(.disabled)) .vega-image-uploader-select .action-wrapper:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+  border-style: none;
 }
 :host(:not(.disabled)) .vega-image-uploader-select .actions-backdrop:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+  border-style: none;
 }
 :host(:not(.disabled)) .vega-image-uploader-select .error .action-wrapper:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 :host(.disabled) .vega-image-uploader-select .action-wrapper {
@@ -113,10 +121,6 @@
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
 }
 
-:host(:not(.disabled)) .vega-image-uploader-select:not(.error):focus-within {
-  border-color: rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
-}
-
 :host .image-preview-container {
   display: flex;
   align-items: center;
@@ -296,10 +300,16 @@
   border-color: rgba(var(--v-border-color-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .vega-image-uploader-select.error .action-wrapper:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  border-style: none;
 }
 :host .vega-image-uploader-select.error .actions-backdrop:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  border-style: none;
 }
 
 :host .vega-hidden {

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

@@ -57,7 +57,7 @@ vega-field-label {
 
 .vega-input-container:focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 
@@ -71,7 +71,7 @@ vega-field-label {
 
 .vega-input-container.error:focus-within {
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
-  outline-offset: 2px;
+  outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 

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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
-import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, getCountries, } from 'libphonenumber-js';
+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
@@ -24,17 +24,18 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
      */
     this.formatNationalNumber = (value) => {
       var _a;
-      const formatter = new AsYouType(this.countryCode);
-      formatter.input(value);
-      //VD-5616
-      //libphonenumber-js has an issue of defaulting to US when formatter.input(value) is called when number starts with +1, but there are other country codes starting with +1
-      //Keep currently selected in such a situation
-      let newCountry = (_a = formatter.country) !== null && _a !== void 0 ? _a : this.countryCode;
-      if (newCountry === 'US' && this.getCountriesWithSameCode('US').includes(this.countryCode)) {
-        newCountry = this.countryCode;
+      if (!this.countrySelectRenderer.getValueUpdatedByCountryCodeChange()) {
+        this.countrySelectRenderer.setValueUpdatedByCountryCodeChange(false);
+        const formatter = new AsYouType(this.countryCode);
+        formatter.input(value);
+        const newCountry = (_a = formatter.country) !== null && _a !== void 0 ? _a : this.countryCode;
+        this.countrySelectController.setCountryCode(newCountry);
+        return formatIncompletePhoneNumber(this.removeCallingCodePrefix(value, newCountry), newCountry);
+      }
+      else {
+        this.countrySelectRenderer.setValueUpdatedByCountryCodeChange(false);
+        return formatIncompletePhoneNumber(this.removeCallingCodePrefix(value, this.countryCode), this.countryCode);
       }
-      this.countrySelectController.setCountryCode(newCountry);
-      return formatIncompletePhoneNumber(this.removeCallingCodePrefix(value, newCountry), newCountry);
     };
   }
   /**
@@ -68,6 +69,14 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
       });
     }
   }
+  /**
+   * set value of vega-input-phone-number
+   *
+   * @param {string} value new value
+   */
+  setValue(value) {
+    this.value = value;
+  }
   /**
    * The function `getCallingCodePrefix` returns the calling code prefix for a given country code.
    *
@@ -100,31 +109,14 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
     this.phoneNumberInputValue = this.formatNationalNumber(newValue);
     this.trySetValue(this.phoneNumberInputValue, () => parseIncompletePhoneNumber(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.trySetValue(this.phoneNumberInputValue, () => this.formatValue(parseIncompletePhoneNumber(this.phoneNumberInputValue), newCountry));
-  }
-  /**
-   * The `formatValue` function concatenates a calling code prefix with a national number.
+   * Should set value of phone number to empty string
    *
-   * @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.
+   * @param {string} inputValue - The value of phone number input
+   * @returns {boolean} -
    */
-  formatValue(nationalNumber, countryCode) {
-    return `${this.getCallingCodePrefix(countryCode)}${nationalNumber}`;
+  shouldSetEmptyValue(inputValue) {
+    return !inputValue && this.emptyValueEnabled;
   }
   /**
    * The function removes the calling code prefix from a given value based on the specified country code.
@@ -153,25 +145,6 @@ export class VegaInputPhoneNumberValueController extends VegaSlimmer {
   trySetValue(inputValue, formatValue) {
     this.value = this.shouldSetEmptyValue(inputValue) ? '' : formatValue();
   }
-  /**
-   * Should set value of phone number to empty string
-   *
-   * @param {string} inputValue - The value of phone number input
-   * @returns {boolean} -
-   */
-  shouldSetEmptyValue(inputValue) {
-    return !inputValue && this.emptyValueEnabled;
-  }
-  /**
-   * Get list of country codes that have similar code prefix
-   *
-   * @param {VegaCountryCode} targetCountryCode - Target country code
-   * @returns {string[]} - array of countries with similar codes
-   */
-  getCountriesWithSameCode(targetCountryCode) {
-    const targetCode = getCountryCallingCode(targetCountryCode);
-    return getCountries().filter((country) => getCountryCallingCode(country) === targetCode);
-  }
 }
 __decorate([
   MapToComponentField()
@@ -194,6 +167,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputPhoneNumberValueController.prototype, "emptyValueEnabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberValueController.prototype, "countrySelectRenderer", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaInputPhoneNumberValueController.prototype, "componentWillLoad", null);