@globalpayments/vega 2.46.0 → 2.47.1

package/dist/collection/constants/tokens/themes/v2-new-brand/light-mode-color-tokens.js

@@ -0,0 +1,184 @@
+/* This file is generated by vega-design 2.0.80 */
+export const LightModeColorTokens = {
+  'bg-brand': '51, 57, 61, 1',
+  'bg-page': '240, 243, 247, 1',
+  'bg-primary': '252, 252, 252, 1',
+  'bg-secondary': '245, 247, 247, 1',
+  'bg-tertiary': '240, 243, 247, 1',
+  'bg-quaternary': '241, 248, 251, 1',
+  'bg-inverted-primary': '4, 4, 28, 1',
+  'bg-inverted-secondary': '18, 18, 39, 1',
+  'bg-inverted-tertiary': '24, 24, 48, 1',
+  'bg-inverted-quaternary': '70, 71, 101, 1',
+  'bg-action': '38, 42, 255, 1',
+  'bg-action-hover': '61, 64, 255, 1',
+  'bg-action-focus': '38, 42, 255, 1',
+  'bg-action-active': '23, 26, 232, 1',
+  'bg-action-quaternary': '222, 225, 227, 1',
+  'bg-action-quaternary-hover': '239, 239, 239, 1',
+  'bg-action-quaternary-active': '205, 209, 211, 1',
+  'bg-action-secondary': '252, 252, 252, 1',
+  'bg-action-secondary-hover': '235, 235, 255, 1',
+  'bg-action-secondary-active': '219, 220, 255, 1',
+  'bg-action-tertiary': '0, 0, 0, 0',
+  'bg-action-tertiary-hover': '4, 4, 28, 0.05',
+  'bg-action-tertiary-active': '4, 4, 28, 0.1',
+  'bg-app-header': '240, 243, 247, 0.88',
+  'bg-backdrop-modal': '18, 18, 39, 0.85',
+  'bg-backdrop-popover': '32, 54, 69, 0.16',
+  'bg-backdrop-sidebar': '18, 18, 39, 0.85',
+  'bg-chip': '32, 54, 69, 0.06',
+  'bg-chip-hover': '32, 54, 69, 0.12',
+  'bg-chip-active': '32, 54, 69, 0.2',
+  'bg-danger': '189, 41, 71, 1',
+  'bg-danger-hover': '233, 71, 104, 1',
+  'bg-danger-focus': '189, 41, 71, 1',
+  'bg-danger-active': '230, 50, 87, 1',
+  'bg-danger-tertiary': '0, 0, 0, 0',
+  'bg-danger-tertiary-hover': '255, 87, 114, 0.2',
+  'bg-danger-tertiary-active': '189, 41, 71, 0.2',
+  'bg-disabled': '176, 180, 181, 1',
+  'bg-divider': '171, 198, 216, 1',
+  'bg-divider-secondary': '199, 217, 229, 1',
+  'bg-keypad-btn-active': '229, 239, 255, 1',
+  'bg-loading-progress': '153, 192, 255, 1',
+  'bg-loading-track': '229, 239, 255, 1',
+  'bg-segment-hover': '205, 209, 211, 1',
+  'bg-segment-control': '89, 96, 99, 0.1',
+  'bg-selected': '0, 151, 255, 0.3',
+  'bg-sidebar': '18, 18, 39, 1',
+  'bg-sidebar-icon': '188, 186, 213, 1',
+  'bg-sidebar-icon-hover': '18, 18, 39, 1',
+  'bg-sidebar-icon-selected': '252, 252, 252, 1',
+  'bg-sidebar-item-hover': '252, 252, 252, 1',
+  'bg-sidebar-item-selected': '19, 98, 226, 0.4',
+  'bg-site-footer': '51, 57, 61, 1',
+  'bg-site-footer-action': '171, 198, 216, 1',
+  'bg-site-footer-action-hover': '199, 217, 229, 1',
+  'bg-site-footer-action-active': '143, 179, 203, 1',
+  'bg-site-footer-field': '89, 96, 99, 1',
+  'bg-slider-handle': '252, 252, 252, 1',
+  'bg-status-error': '255, 110, 139, 1',
+  'bg-status-info': '205, 209, 211, 1',
+  'bg-status-success': '160, 233, 167, 1',
+  'bg-status-warning': '255, 220, 131, 1',
+  'bg-tab': '240, 243, 247, 1',
+  'bg-tab-hover': '245, 247, 247, 1',
+  'bg-tab-selected': '32, 54, 69, 1',
+  'bg-table-alt-row': '245, 247, 247, 1',
+  'bg-table-header': '240, 243, 247, 1',
+  'bg-table-row-hover': '241, 248, 251, 1',
+  'bg-table-row-selected-expanded': '229, 239, 255, 1',
+  'bg-table-selected-row': '204, 223, 255, 1',
+  'bg-textarea-count': '4, 4, 28, 0.6',
+  'bg-tile': '252, 252, 252, 1',
+  'bg-tile-hover': '245, 247, 247, 1',
+  'bg-tile-selected': '242, 247, 255, 1',
+  'bg-tile-selected-hover': '229, 239, 255, 1',
+  'bg-toggle-switch': '107, 116, 125, 0.7',
+  'bg-toggle-switch-hover': '107, 116, 125, 1',
+  'bg-toggle-switch-selected-disabled': '153, 192, 255, 1',
+  'bg-transparent': '0, 0, 0, 0',
+  'bg-accent1-primary': '115, 230, 220, 1',
+  'bg-accent1-secondary': '193, 244, 239, 1',
+  'bg-accent1-tertiary': '224, 249, 247, 1',
+  'bg-accent2-primary': '128, 107, 255, 1',
+  'bg-accent2-secondary': '199, 189, 255, 1',
+  'bg-accent2-tertiary': '227, 222, 255, 1',
+  'bg-accent3-primary': '255, 220, 131, 1',
+  'bg-accent3-secondary': '255, 239, 200, 1',
+  'bg-accent3-tertiary': '255, 247, 227, 1',
+  'bg-accent4-primary': '255, 149, 113, 1',
+  'bg-accent4-secondary': '255, 208, 192, 1',
+  'bg-accent4-tertiary': '255, 231, 223, 1',
+  'bg-accent5-primary': '0, 187, 255, 1',
+  'bg-accent5-secondary': '142, 223, 249, 1',
+  'bg-accent5-tertiary': '227, 247, 253, 1',
+  'bg-accent6-primary': '255, 130, 201, 1',
+  'bg-accent6-secondary': '255, 199, 231, 1',
+  'bg-accent6-tertiary': '255, 227, 243, 1',
+  'bg-accent7-primary': '37, 159, 159, 1',
+  'bg-accent7-secondary': '155, 212, 214, 1',
+  'bg-accent7-tertiary': '208, 239, 239, 1',
+  'bg-accent8-primary': '86, 61, 130, 1',
+  'bg-accent8-secondary': '199, 162, 204, 1',
+  'bg-accent8-tertiary': '230, 214, 234, 1',
+  'bg-accent9-primary': '255, 191, 63, 1',
+  'bg-accent9-secondary': '254, 215, 142, 1',
+  'bg-accent9-tertiary': '251, 226, 185, 1',
+  'bg-accent10-primary': '237, 122, 35, 1',
+  'bg-accent10-secondary': '241, 146, 85, 1',
+  'bg-accent10-tertiary': '245, 187, 148, 1',
+  'bg-date-picker-range': '229, 239, 255, 1',
+  'text-primary': '4, 4, 28, 0.95',
+  'text-secondary': '4, 4, 28, 0.64',
+  'text-inverted-primary': '252, 252, 254, 0.9',
+  'text-inverted-secondary': '252, 252, 254, 0.64',
+  'text-black': '4, 4, 28, 0.95',
+  'text-white': '252, 252, 254, 0.9',
+  'text-brand': '51, 57, 61, 1',
+  'text-danger-link': '230, 50, 87, 1',
+  'text-danger-link-hover': '233, 71, 104, 1',
+  'text-danger-link-active': '189, 41, 71, 1',
+  'text-danger-link-focus': '240, 52, 91, 1',
+  'text-danger-link-visited': '230, 50, 87, 1',
+  'text-disabled': '4, 4, 28, 0.35',
+  'text-error': '189, 41, 71, 1',
+  'text-input-disabled': '4, 4, 28, 0.35',
+  'text-input-placeholder': '4, 4, 28, 0.58',
+  'text-link': '38, 42, 255, 1',
+  'text-link-hover': '61, 64, 255, 1',
+  'text-link-active': '23, 26, 232, 1',
+  'text-link-focus': '38, 42, 255, 1',
+  'text-link-visited': '95, 56, 206, 1',
+  'text-on-action': '252, 252, 254, 0.9',
+  'text-on-danger': '252, 252, 254, 0.9',
+  'text-on-disabled': '252, 252, 254, 0.9',
+  'text-sidebar-link': '188, 186, 213, 1',
+  'text-sidebar-link-hover': '18, 18, 39, 1',
+  'text-sidebar-link-selected': '252, 252, 252, 1',
+  'text-site-footer-link': '171, 198, 216, 1',
+  'text-site-footer-link-hover': '199, 217, 229, 1',
+  'text-site-footer-link-active': '143, 179, 203, 1',
+  'text-success': '1, 128, 31, 1',
+  'text-inverted-success': '89, 217, 119, 1',
+  'text-accent1-primary': '115, 230, 220, 1',
+  'text-accent2-primary': '128, 107, 255, 1',
+  'text-accent3-primary': '255, 220, 131, 1',
+  'text-accent4-primary': '255, 149, 113, 1',
+  'text-accent5-primary': '0, 187, 255, 1',
+  'text-accent6-primary': '240, 52, 91, 1',
+  'text-accent7-primary': '37, 159, 159, 1',
+  'text-accent8-primary': '86, 61, 130, 1',
+  'text-accent9-primary': '255, 191, 63, 1',
+  'text-accent10-primary': '237, 122, 35, 1',
+  'border-color-action': '38, 42, 255, 1',
+  'border-color-action-hover': '61, 64, 255, 1',
+  'border-color-action-active': '23, 26, 232, 1',
+  'border-color-chip': '205, 209, 211, 1',
+  'border-color-danger': '230, 50, 87, 1',
+  'border-color-danger-hover': '255, 87, 114, 1',
+  'border-color-danger-active': '189, 41, 71, 1',
+  'border-color-divider': '171, 198, 216, 1',
+  'border-color-divider-secondary': '199, 217, 229, 1',
+  'border-color-input-field': '171, 198, 216, 1',
+  'border-color-input-field-hover': '115, 160, 190, 1',
+  'border-color-input-field-focus': '38, 42, 255, 1',
+  'border-color-input-field-danger': '230, 50, 87, 1',
+  'border-color-input-field-danger-hover': '255, 87, 114, 1',
+  'border-color-input-field-danger-focus': '233, 71, 104, 1',
+  'border-color-input-field-disabled': '222, 225, 227, 1',
+  'border-color-secondary-btn-disabled': '176, 180, 181, 1',
+  'border-color-sidebar-item-focus': '38, 42, 255, 1',
+  'border-color-slider-handle': '199, 217, 229, 1',
+  'border-color-success': '1, 128, 31, 1',
+  'border-color-table-divider': '171, 198, 216, 1',
+  'border-color-tile': '171, 198, 216, 1',
+  'border-color-tile-hover': '115, 160, 190, 1',
+  'border-color-tile-focus': '38, 42, 255, 1',
+  'border-color-tile-selected-focus': '38, 42, 255, 1',
+  'border-color-tile-selected': '38, 42, 255, 1',
+  'border-color-tile-selected-hover': '61, 64, 255, 1',
+  'border-color-notification-btn': '32, 54, 69, 1',
+  'border-color-notification-btn-dark': '32, 54, 69, 1',
+};

package/dist/collection/constants/tokens/themes/v2-new-brand/light-mode-shadow-tokens.js

@@ -0,0 +1,12 @@
+/* This file is generated by vega-design 2.0.80 */
+export const LightModeShadowTokens = {
+  'shadow-card': '0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02)',
+  'shadow-modal': '0px 6px 40px 0px rgba(2, 2, 15, 0.04), 0px 4px 24px 0px rgba(2, 2, 15, 0.08), 0px 8px 80px 0px rgba(2, 2, 15, 0.16)',
+  'shadow-popover': '0px 0px 88px 0px rgba(2, 2, 15, 0.01), 0px 0px 32px 0px rgba(2, 2, 15, 0.02), 0px 4px 72px 0px rgba(2, 2, 15, 0.06)',
+  'shadow-form-field': '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)',
+  'shadow-dropdown-menu': '0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)',
+  'shadow-app-header': '0px 1px 0px 0px rgba(45, 76, 97, 0.15)',
+  'shadow-modal-header': '0px 1px 0px 0px rgba(45, 76, 97, 0.15)',
+  'shadow-modal-footer': '0px -2px 8px 0px rgba(45, 76, 97, 0.2), 0px -1px 0px 0px rgba(45, 76, 97, 0.15)',
+  'shadow-modal-footer-no-scroll': '0px -1px 0px 0px rgba(45, 76, 97, 0.15)',
+};

package/dist/collection/global/scripts/before-vega-load.js

@@ -41,6 +41,7 @@ export default function () {
   injectVegaTranslationIntoGlobal();
   injectVegaRichTextEditorClassIntoGlobal();
   injectVegaPublicValidationRules();
+  applyBrandingFromClientGlobal();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -183,3 +184,11 @@ function injectVegaPublicValidationRules() {
     });
   });
 }
+/**
+ * Switch the Vega theme to a new brand theme from the client global defined options.
+ */
+function applyBrandingFromClientGlobal() {
+  if (globalThis['VegaThemeManagerApplyBranding']) {
+    VegaThemeManager.applyBranding(globalThis['VegaThemeManagerApplyBranding']);
+  }
+}

package/dist/collection/global/tests/before-vega-load.test.js

@@ -19,6 +19,7 @@ jest.mock('../../helpers/feature-control/feature-flags-map', () => {
   };
 });
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
+import { VegaThemeManager } from '../../helpers/theme/theme-manager';
 import BeforeVegaLoad from '../scripts/before-vega-load';
 const NOT_DEFAULT_DISABLED = 'NOT_DEFAULT_DISABLED';
 const DEFAULLT_DISABLED = 'DEFAULLT_DISABLED';
@@ -35,6 +36,12 @@ describe('beforeVegaLoad unit test', () => {
     BeforeVegaLoad();
     expect(FeatureFlag.isEnabled(NOT_DEFAULT_DISABLED)).toBeFalsy();
   });
+  it('applyBrandingFromClientGlobal() should be invoked without any issue', () => {
+    globalThis['VegaThemeManagerApplyBranding'] = 'gp';
+    jest.spyOn(VegaThemeManager, 'applyBranding');
+    BeforeVegaLoad();
+    expect(VegaThemeManager.applyBranding).toHaveBeenCalledWith('gp');
+  });
   it('should inject Vega typography in page head', () => {
     BeforeVegaLoad();
     expect(TypographyUrls).toEqual({

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -27,3 +27,4 @@ export const UPDATE_TRANSLATION = new StaticSubject('UPDATE_TRANSLATION');
 export const DARK_MODE_CHANGE = new StaticSubject('DARK_MODE_CHANGE');
 export const SHADOW_ROOT_ELEMENT_SCROLLING = new StaticSubject('SHADOW_ROOT_ELEMENT_SCROLLING');
 export const FLAG_ICON_LOADED = new StaticSubject('FLAG_ICON_LOADED');
+export const GP_BRAND_CHANGE = new StaticSubject('GP_BRAND_CHANGE');

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -30,6 +30,7 @@ export const VegaInternalTableRowSelect = new VegaInternalEventID('tableRowSelec
 export const VegaInternalTableRowSelectAll = new VegaInternalEventID('tableRowSelectAll');
 export const VegaInternalTableRowExpand = new VegaInternalEventID('tableRowExpand');
 export const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID('dropdownRenderItemInternalOverridden');
+export const VegaInputSelectRenderPrefixIconInternalOverridden = new VegaInternalEventID('dropdownRenderPrefixIconInternalOverridden');
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
 export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');
 export const VegaInternalLeftNavGroupExpand = new VegaInternalEventID('leftNavGroupExpand');

package/dist/collection/helpers/event-manager/slimmers/event-emit-slimmer.js

@@ -33,10 +33,15 @@ export class EventEmitSlimmerBase extends VegaSlimmer {
      * @returns {Nullable<Event>} The emitted event.
      */
     this.emit = (detail, e) => {
+      let isChangeManagerPrevented = false;
       ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, this.eventID), {
         host: this.host,
         detail: detail,
         eventName: this.eventName,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        preventDefault: () => {
+          isChangeManagerPrevented = true;
+        },
       });
       const eventSemantics = InternalVegaEventManager.getSemantics(this.host);
       let event;
@@ -46,6 +51,9 @@ export class EventEmitSlimmerBase extends VegaSlimmer {
           break;
         }
       }
+      if (event && isChangeManagerPrevented) {
+        event.preventDefault();
+      }
       return event;
     };
     /**

package/dist/collection/helpers/event-manager/test/event-emit-slimmer.test.js

@@ -4,10 +4,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { createEventEmitSlimmer } from '../slimmers/event-emit-slimmer';
+import { createEventEmitSlimmer, } from '../slimmers/event-emit-slimmer';
 import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { VegaClick } from '../event-id/vega-event-id';
 import InternalVegaEventManager from '../internal-vega-event-manager';
+import { DomNodeSubjectObserverFactory } from '../../change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 describe('EventEmitSlimmer ', () => {
   class MockedComponent {
     constructor() {
@@ -32,6 +33,16 @@ describe('EventEmitSlimmer ', () => {
   __decorate([
     InjectVegaSlimmer()
   ], MockedComponentForAlias.prototype, "eventEmitter", void 0);
+  class MockedComponentForEventPrevent {
+    constructor() {
+      this.mockEvent = new CustomEvent('vegaClick');
+      this.vegaClick = { emit: () => this.mockEvent };
+      this.eventEmitter = createEventEmitSlimmer(MockedComponentForEventPrevent, VegaClick);
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponentForEventPrevent.prototype, "eventEmitter", void 0);
   it('should call removeObserverFromHost when component disconnected', () => {
     const component = new MockedComponent();
     spyOn(component['eventEmitter'], 'removeObserverFromHost');
@@ -104,4 +115,20 @@ describe('EventEmitSlimmer ', () => {
     const jqueryEvent = component['eventEmitter'].emit(undefined, new CustomEvent('click', { bubbles: true, cancelable: true }));
     expect(jqueryEvent.type).toEqual('click');
   });
+  it('should call prevent the default properly', () => {
+    const component = new MockedComponentForEventPrevent();
+    const host = document.createElement('vega-button');
+    component['host'] = host;
+    spyOn(component['mockEvent'], 'preventDefault');
+    let click = jest.fn();
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(host, VegaClick, click);
+    component['eventEmitter'].emit();
+    expect(click).toBeCalledTimes(1);
+    expect(component['mockEvent'].preventDefault).toBeCalledTimes(0);
+    click = jest.fn((input) => input.preventDefault());
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(host, VegaClick, click);
+    component['eventEmitter'].emit();
+    expect(click).toBeCalledTimes(1);
+    expect(component['mockEvent'].preventDefault).toBeCalledTimes(1);
+  });
 });

package/dist/collection/helpers/slimmers/brand-switch-state-controller-slimmer.js

@@ -0,0 +1,46 @@
+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 { GP_BRAND_CHANGE } from '../change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../change-manager/observer/observer';
+import ChangeManager from '../change-manager/change-manager';
+/** The `BrandSwitchControllerSlimmer` class monitors brand changes and updates the color, logo and footer content accordingly. */
+export class BrandSwitchControllerSlimmer extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Register an observer to watch for current branding updates, which will cause the component to update.
+   */
+  connectedCallback() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), (currentBranding) => {
+      this.currentBranding = currentBranding;
+    });
+    ChangeManager.register(GP_BRAND_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    ChangeManager.unregister(GP_BRAND_CHANGE, this.observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], BrandSwitchControllerSlimmer.prototype, "currentBranding", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], BrandSwitchControllerSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], BrandSwitchControllerSlimmer.prototype, "disconnectResizeObserver", null);

package/dist/collection/helpers/slimmers/form-field-controller-slimmer.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, InjectVegaSlimmer, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { camelToDashCase } from '../../utils/string';
-import { FormFieldController } from '../validator/form-field-controller';
+import { FormFieldController, } from '../validator/form-field-controller';
 import { FieldErrorControllerSlimmer } from './field-error-controller-silmmer';
 import changeManager from '../change-manager/change-manager';
 import { FORM_ELEMENT_VALIDATE } from '../change-manager/subject/static-subject/static-subject-title';
@@ -14,6 +14,7 @@ import { FormFieldValidInvokeSlimmer } from './form-field-valid-invoke-slimmer';
 import { MutationObserverSlimmer } from './mutation-observer/mutation-observer-slimmer';
 import { AttributeOldValueMutationFilter } from './mutation-observer/mutation-observer-filters';
 import { isArrayEqual } from '../../utils/array';
+import { FormFieldStateControllerSlimmer } from './form-field-state-controller-slimmer';
 /**
  * The `FormFieldControllerSlimmer` class is a TypeScript class that extends `VegaSlimmer` and provides functionality for managing form field components.
  * TODO:
@@ -32,6 +33,7 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
     super();
     this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
     this.formFieldValidInvokeSlimmer = new FormFieldValidInvokeSlimmer();
+    this.formFormStateController = new FormFieldStateControllerSlimmer();
     this.mutationObserverCallBack = () => {
       if (this.validator) {
         this.setDefaultRules();
@@ -193,6 +195,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], FormFieldControllerSlimmer.prototype, "mutationObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "formFormStateController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], FormFieldControllerSlimmer.prototype, "connectedCallback", null);

package/dist/collection/helpers/slimmers/form-field-state-controller-slimmer.js

@@ -0,0 +1,45 @@
+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 } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../slimmers/sub-state/sub-state-observer-slimmer';
+/**
+ * Controller for the form field states
+ */
+export class FormFieldStateControllerSlimmer extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-form',
+      subStates: [
+        {
+          subStateName: 'disableBlurValidation',
+          parentStateName: 'disableBlurValidation',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (disableBlurValidation) => {
+            var _a;
+            (_a = this.validator) === null || _a === void 0 ? void 0 : _a.updateDisableBlurValidation(disableBlurValidation);
+          },
+        },
+      ],
+    });
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    super.componentWillLoad();
+  }
+}
+__decorate([
+  MapToComponentField()
+], FormFieldStateControllerSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], FormFieldStateControllerSlimmer.prototype, "validator", void 0);
+__decorate([
+  MapToComponentMethod('setInjectFormFieldHelper')
+], FormFieldStateControllerSlimmer.prototype, "componentWillLoad", null);

package/dist/collection/helpers/slimmers/test/brand-switch-state-controller-slimmer.test.js

@@ -0,0 +1,75 @@
+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 '../../../polyfill/test-polyfill/unit/index';
+import { InjectVegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+import { BrandSwitchControllerSlimmer } from '../brand-switch-state-controller-slimmer';
+import { VegaInternalThemeManager } from '../../theme/internal-theme-manager';
+describe('BrandSwitchControllerSlimmer', () => {
+  const mockedComponentConnectedCallbackMethod = jest.fn();
+  const mockedComponentDisconnectedCallbackMethod = jest.fn();
+  beforeEach(() => {
+    mockedComponentDisconnectedCallbackMethod.mockClear();
+    mockedComponentConnectedCallbackMethod.mockClear();
+  });
+  describe('BrandSwitchControllerSlimmer should work proper', () => {
+    class MockedBrandSwitchControllerSlimmer extends BrandSwitchControllerSlimmer {
+      constructor() {
+        super();
+      }
+    }
+    __decorate([
+      MapToComponentField({ writable: true })
+    ], MockedBrandSwitchControllerSlimmer.prototype, "currentBranding", void 0);
+    __decorate([
+      MapToComponentField()
+    ], MockedBrandSwitchControllerSlimmer.prototype, "host", void 0);
+    class MockedComponent {
+      constructor() {
+        this.currentBranding = 'heartland';
+        this.controller = new MockedBrandSwitchControllerSlimmer();
+      }
+      connectedCallback() {
+        mockedComponentConnectedCallbackMethod();
+      }
+      disconnectedCallback() {
+        mockedComponentDisconnectedCallbackMethod();
+      }
+    }
+    __decorate([
+      InjectVegaSlimmer()
+    ], MockedComponent.prototype, "controller", void 0);
+    test('should get brand name when apply branding to "gp"', () => {
+      const mockedComponent = new MockedComponent();
+      const host = new MockHTMLElement('body', 'div');
+      mockedComponent.host = host;
+      mockedComponent.connectedCallback();
+      expect(mockedComponentConnectedCallbackMethod).toBeCalledTimes(1);
+      expect(mockedComponent.currentBranding).toEqual('heartland');
+      VegaInternalThemeManager.applyBranding('gp');
+      expect(mockedComponent.currentBranding).toEqual('gp');
+    });
+    test('should get brand name when apply branding to "genius"', () => {
+      const mockedComponent = new MockedComponent();
+      const host = new MockHTMLElement('body', 'div');
+      mockedComponent.host = host;
+      mockedComponent.connectedCallback();
+      expect(mockedComponentConnectedCallbackMethod).toBeCalledTimes(1);
+      VegaInternalThemeManager.applyBranding('genius');
+      expect(mockedComponent.currentBranding).toEqual('genius');
+    });
+    test('should not get brand name when disconnectedCallback is called', () => {
+      const mockedComponent = new MockedComponent();
+      const host = new MockHTMLElement('body', 'div');
+      mockedComponent.host = host;
+      mockedComponent.disconnectedCallback();
+      expect(mockedComponentDisconnectedCallbackMethod).toBeCalledTimes(1);
+      VegaInternalThemeManager.applyBranding('genius');
+      expect(mockedComponent.currentBranding).toEqual('heartland');
+    });
+  });
+});

package/dist/collection/helpers/theme/controllers/brand-style-controller.js

@@ -0,0 +1,50 @@
+import { LightModeBorderTokens } from '../../../constants/tokens/themes/v2-new-brand/light-mode-border-tokens';
+import { LightModeShadowTokens } from '../../../constants/tokens/themes/v2-new-brand/light-mode-shadow-tokens';
+import { LightModeColorTokens } from '../../../constants/tokens/themes/v2-new-brand/light-mode-color-tokens';
+import { Observer } from '../../change-manager/observer/observer';
+import ChangeManager from '../../change-manager/change-manager';
+import { DARK_MODE_CHANGE, GP_BRAND_CHANGE, } from '../../change-manager/subject/static-subject/static-subject-title';
+import { VegaInternalThemeManager } from '../internal-theme-manager';
+import { StyleControllerAbstract } from './style-controller.abstract';
+/**
+ * Vega components brand style controller
+ */
+class BrandStyleController extends StyleControllerAbstract {
+  constructor() {
+    super();
+    this.tokens = {};
+    this.themeStyleContainerKey = 'vega-brand-theme';
+    this.observer = new Observer(this.isAcceptObserver.bind(this), (options) => {
+      if (options === 'heartland') {
+        this.reset(this.themeStyleContainerKey);
+      }
+      else {
+        this.generateThemeStyle();
+      }
+      const isDarkMode = VegaInternalThemeManager.isDarkMode();
+      if (isDarkMode) {
+        ChangeManager.notify(DARK_MODE_CHANGE, isDarkMode);
+      }
+    });
+    ChangeManager.register(GP_BRAND_CHANGE, this.observer);
+  }
+  /**
+   * It generates a CSS style for light mode to override the style.
+   */
+  generateThemeStyle() {
+    this.tokens = Object.assign(LightModeColorTokens, LightModeBorderTokens, LightModeShadowTokens);
+    const keys = Object.keys(this.tokens);
+    this.getStyleContainer(this.themeStyleContainerKey).innerHTML = `
+:root {
+\t\t${keys.map((key) => `--v-${key}: ${this.tokens[key]};`).join('\n\t\t')}}`;
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+export const VegaBrandStyleController = new BrandStyleController();