@globalpayments/vega 2.46.0 → 2.47.1

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);

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

@@ -9,15 +9,15 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { CountryFlags } from '../../assets/country-flags';
 import { getCountryCallingCode } from 'libphonenumber-js';
 import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
-import { VegaDropdownRenderItemInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    this.valueUpdatedByCountryCodeChange = false;
     /**
      * The `openSelectDropdown` function is an arrow function that is defined within the
      * `CountrySelectRenderer` class. It is responsible for triggering the `doOpen` method on the
@@ -33,7 +33,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
     this.renderDropdownItem = (item, fixHeight) => {
       return (h("vega-dropdown-item", { height: fixHeight, label: item.label, itemKey: item.key, key: item.key },
         h("vega-flex", { alignItems: "center", gap: "size-12" },
-          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(item.key), size: "size-16" }),
+          h("vega-flag-icon", { country: item.key }),
           h("vega-font", { variant: "font-field-value", color: "text-primary" }, COUNTRIES[item.key]),
           h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${item.label})`))));
     };
@@ -64,6 +64,20 @@ export class CountrySelectRenderer extends VegaSlimmer {
       name: CountrySelectRenderer.allCountries[newCountryCode],
     });
   }
+  /**
+   * set valueUpdatedByCountryCodeChange
+   *
+   * @param {boolean} valueUpdatedByCountryCodeChange state of valueUpdatedByCountryCodeChange
+   */
+  setValueUpdatedByCountryCodeChange(valueUpdatedByCountryCodeChange) {
+    this.valueUpdatedByCountryCodeChange = valueUpdatedByCountryCodeChange;
+  }
+  /**
+   * get valueUpdatedByCountryCodeChange
+   */
+  getValueUpdatedByCountryCodeChange() {
+    return this.valueUpdatedByCountryCodeChange;
+  }
   /**
    * 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:
@@ -89,8 +103,12 @@ export class CountrySelectRenderer extends VegaSlimmer {
             this.handleCountrySelectChange(e.detail);
           });
           remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaDropdownRenderItemInternalOverridden), this.renderDropdownItem.bind(this));
+          remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInputSelectRenderPrefixIconInternalOverridden), this.renderDropdownPrefixIconWithFlagIcon.bind(this));
         }, value: this.countryCode })));
   }
+  renderDropdownPrefixIconWithFlagIcon(prefixIcon) {
+    return h("vega-flag-icon", { country: prefixIcon.split(' ')[1] });
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-phone-number-country-select-change}
@@ -102,8 +120,15 @@ export class CountrySelectRenderer extends VegaSlimmer {
    *element of the component. Here's a breakdown of what it is doing:
    */
   handleCountrySelectChange(countryCode) {
+    this.valueUpdatedByCountryCodeChange = true;
     this.countrySelectController.setCountryCode(countryCode);
-    this.valueController.updateValueWithNewCountry(countryCode);
+    if (this.valueController.shouldSetEmptyValue(this.phoneNumberInputValue)) {
+      this.valueController.setValue('');
+    }
+    else {
+      this.valueController.setValue(`+${getCountryCallingCode(countryCode)}` + this.phoneNumberInputValue.replace(/\D/g, ''));
+    }
+    this.valueUpdatedByCountryCodeChange = false;
   }
   /**
    * The function `getCountrySelectOptions` returns an array of country options based on custom and
@@ -141,9 +166,6 @@ export class CountrySelectRenderer extends VegaSlimmer {
     return maxLength * 8.5 + 162;
   }
 }
-(() => {
-  VegaInternalIconManager.register(CountryFlags);
-})();
 CountrySelectRenderer.allCountries = COUNTRIES;
 __decorate([
   MapToComponentField()
@@ -169,6 +191,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], CountrySelectRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "phoneNumberInputValue", void 0);
+__decorate([
+  MapToComponentField()
+], CountrySelectRenderer.prototype, "value", void 0);
 __decorate([
   MapToComponentMethod('watchCountryCode')
 ], CountrySelectRenderer.prototype, "watchCountryCode", null);

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

@@ -71,9 +71,16 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
      * @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}`);
+    if (this.valueController.shouldSetEmptyValue(newInputValue)) {
+      this.valueController.setValue('');
+    }
+    else {
+      const value = newInputValue.startsWith('+')
+        ? newInputValue
+        : `${this.valueController.getCallingCodePrefix(this.countryCode)}` +
+          newInputValue.replace(/\D/g, '');
+      this.valueController.setValue(value);
+    }
   }
 }
 __decorate([

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

@@ -23,7 +23,7 @@
 }
 :host .vega-input-phone-number-container.error vega-input::part(input-container):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));
   box-shadow: 0 0 0;
 }

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

@@ -40,7 +40,7 @@ export class VegaInputPhoneNumber {
         {
           propertyName: 'required',
           ruleFactory: (isRequired) => isRequired
-            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputRenderer.getInputRef().value)
+            ? new InputPhoneNumberRequiredRule(() => this.phoneNumberInputValue)
             : null,
         },
         {

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

@@ -51,7 +51,7 @@
 }
 .vega-input-range-input-container vega-input::part(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));
   position: relative;
   box-shadow: 0 0 0;
@@ -105,7 +105,7 @@
 }
 .vega-input-range-container.error vega-input::part(input-container):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-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -15,14 +15,13 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.renderContainer = () => {
-      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
+      return (h("div", { role: 'button', class: "vega-input-select-container", ref: (ref) => (this.inputSelectContainer = ref), tabIndex: 0, "aria-disabled": `${this.disabled}`, onKeyDown: createEnterKeyHandlerToTriggerClick(), onBlur: this.preventBlur },
         this.renderPrefixIcon(),
         this.renderSelectContainer(),
         this.renderToggleIcon()));
     };
     this.renderPrefixIcon = () => {
-      return (this.prefixIcon && (h("div", { class: "vega-input-select-prefix-icon" },
-        h("vega-icon", { icon: this.prefixIcon, size: "size-16" }))));
+      return this.vegaInputSelectPrefixIconRenderer.render();
     };
     this.renderToggleIcon = () => {
       return (h("div", { class: "vega-input-select-toggle-icon" },
@@ -122,9 +121,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaDropdownProps", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "prefixIcon", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "placeholder", void 0);
@@ -137,9 +133,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "disabled", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-prefix-icon-renderer.js

@@ -0,0 +1,48 @@
+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 { h } from '@stencil/core';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInputSelectRenderPrefixIconInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+/** Manager remote invocation */
+export class VegaInputSelectPrefixIconRenderer extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.remotePhoneNumberPrefixIconRenderSubject =
+      domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaInputSelectRenderPrefixIconInternalOverridden);
+  }
+  /**
+   * Call the render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {Nullable<HTMLVegaFlagIconElement>} - returned vega-flag-icon.
+   */
+  callRemotePrefixIconRender(...args) {
+    if (this.remotePhoneNumberPrefixIconRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberPrefixIconRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+  render() {
+    const renderResult = this.callRemotePrefixIconRender(this.prefixIcon);
+    return (this.prefixIcon && (h("div", { class: "vega-input-select-prefix-icon" }, renderResult ? (renderResult) : (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputSelectPrefixIconRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectPrefixIconRenderer.prototype, "prefixIcon", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaInputSelectPrefixIconRenderer.prototype, "connectedCallback", null);

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

@@ -82,7 +82,7 @@
 }
 :host .vega-input-select-container:focus {
   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));
 }
 
@@ -94,7 +94,7 @@
 }
 :host .error .vega-input-select-container:focus {
   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-select/vega-input-select.js

@@ -24,6 +24,7 @@ import { VegaInputSelectRuntimeMetricsPayloadDefinition } from '../../constants/
 import { VegaInputSelectSourceController } from './slimmers/controllers/vega-input-select-source-controller';
 import { VegaInputSelectItemsSlotController } from './slimmers/controllers/vega-input-select-items-slot-controler';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaInputSelectPrefixIconRenderer } from './slimmers/renderers/vega-input-select-prefix-icon-renderer';
 /**
  * @vegaVersion 1.0.7
  */
@@ -33,6 +34,7 @@ export class VegaInputSelect {
     this.translationSlimmer = new TranslationSlimmer();
     this.sourceController = new VegaInputSelectSourceController();
     this.vegaInputSelectRenderer = new VegaInputSelectRenderer();
+    this.vegaInputSelectPrefixIconRenderer = new VegaInputSelectPrefixIconRenderer();
     this.vegaInputSelectDropdownController = new VegaInputSelectDropdownController();
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
@@ -870,6 +872,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectPrefixIconRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectDropdownController", void 0);

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/renderers/vega-left-nav-header-renderer.js

@@ -20,10 +20,19 @@ export class VegaLeftNavHeaderRenderer extends VegaSlimmer {
     const { title, subtitle } = this.headerConfig;
     return (h(Fragment, null,
       h("div", { class: "header-container" },
-        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('heartland-logo') })),
+        this.hasHeaderSlot ? (h("slot", { name: "header-slot" })) : title ? (h("div", { class: "header-title" }, title)) : (this.renderHeaderLogo()),
         subtitle && h("div", { class: "header-subtitle" }, subtitle)),
       h(VegaLeftNavSeparator, null)));
   }
+  renderHeaderLogo() {
+    if (this.currentBranding === 'gp') {
+      return h("vega-brand-logo", { name: "global-payments", size: "small" });
+    }
+    if (this.currentBranding === 'genius') {
+      return h("vega-brand-logo", { name: "genius", size: "small" });
+    }
+    return h("vega-icon", { icon: VegaInternalIconManager.getIconKey('heartland-logo') });
+  }
 }
 (() => {
   VegaInternalIconManager.register(Icons);
@@ -34,6 +43,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaLeftNavHeaderRenderer.prototype, "headerConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaLeftNavHeaderRenderer.prototype, "currentBranding", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaLeftNavHeaderRenderer.prototype, "componentWillLoad", null);

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.css

@@ -193,11 +193,6 @@ body.vega-overflow-hidden {
   overflow: hidden;
 }
 
-.header-container vega-icon {
-  width: 142px;
-  height: 26px;
-}
-
 .header-container vega-icon[icon="v-internal-icon heartland-logo"] + .header-subtitle {
   margin-top: 8px;
 }

package/dist/collection/components/vega-nav/vega-left-nav/vega-left-nav.js

@@ -21,6 +21,8 @@ import { VegaLeftNavAutoCollapseController } from './slimmers/controllers/vega-l
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaLeftNavRuntimeMetricsPayloadDefinition } from '../../../constants/runtime-metrics-payload-definition/vega-left-nav/runtime-metrics-payload-definition';
 import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { BrandSwitchControllerSlimmer } from '../../../helpers/slimmers/brand-switch-state-controller-slimmer';
+import { VegaInternalThemeManager } from '../../../helpers/theme/internal-theme-manager';
 /**
  * @vegaVersion 1.31.0
  */
@@ -38,6 +40,8 @@ export class VegaLeftNav {
     this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaLeftNavRuntimeMetricsPayloadDefinition);
     this.autoCollapseGroupsNotifySlimmer = createSubStateNotifySlimmer(VegaLeftNav, 'autoCollapseGroups', 'watchAutoCollapseGroups');
+    this.brandSwitchControllerSlimmer = new BrandSwitchControllerSlimmer();
+    this.currentBranding = VegaInternalThemeManager.getBranding();
     this.openState = 'close';
     /**
      * Determines whether the left navigation is expanded or collapsed.
@@ -274,6 +278,7 @@ export class VegaLeftNav {
     }
   }; }
   static get states() { return {
+    "currentBranding": {},
     "openState": {}
   }; }
   static get events() { return [{
@@ -388,3 +393,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaLeftNav.prototype, "autoCollapseGroupsNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaLeftNav.prototype, "brandSwitchControllerSlimmer", void 0);

package/dist/collection/components/vega-nav/vega-left-nav-group/vega-left-nav-group.css

@@ -46,7 +46,6 @@
   letter-spacing: 0px;
   cursor: pointer;
   text-decoration: none;
-  outline: none;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .vega-li-main > a {
@@ -76,7 +75,8 @@
   }
 }
 .vega-li-main > a: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: 0px;
 }
 .vega-li-main > a:hover {
   background-color: rgba(var(--v-bg-tertiary, 240, 243, 247, 1));

package/dist/collection/components/vega-nav/vega-left-nav-link/vega-left-nav-link.css

@@ -95,9 +95,7 @@
   background-color: rgba(var(--v-bg-tertiary, 240, 243, 247, 1));
 }
 
-:host > a {
-  outline: none;
-}
 :host > a: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: 0px;
 }

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

@@ -165,7 +165,8 @@
 }
 
 .vega-pagination .vega-pagination-item button:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
   border-radius: 9999px;
 }
 

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

@@ -214,6 +214,9 @@ export class VegaPopover {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "The value of this property should be an element that is\nthe parent of this component or an ancestor of the parent element.\nUsing any other element may lead to unexpected behavior."
+          }, {
             "name": "vegaVersion",
             "text": "1.19.0"
           }],

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -67,7 +67,8 @@
 }
 :host .vega-progress-step:focus-visible .vega-progress-step-icon-container {
   border-radius: 8px;
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
 }
 :host .vega-progress-step .vega-progress-step-icon-divider {
   display: flex;