@globalpayments/vega 2.73.0 → 2.76.0

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/click-trigger-strategy.js

@@ -0,0 +1,33 @@
+/**
+ * ClickTriggerStrategy handles 'targetClick' and 'globalMouseDown' events to toggle or hide the appendable element.
+ */
+export class ClickTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is 'targetClick' or 'globalMouseDown', otherwise false.
+   */
+  canEvaluate(type) {
+    return type === 'target-click' || type === 'click-outside';
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (context.eventType === 'target-click') {
+      return {
+        nextAction: context.currentState.isVisible ? 'hide' : 'show',
+      };
+    }
+    if (context.eventType === 'click-outside' && context.currentState.isVisible) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/hover-trigger-strategy.js

@@ -0,0 +1,42 @@
+/**
+ * HoverTriggerStrategy handles mouse enter and leave events on the target and appendable elements,
+ * as well as global mouse down events to show or hide the appendable element.
+ */
+export class HoverTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is related to hover actions or global mouse down, otherwise false.
+   */
+  canEvaluate(type) {
+    return [
+      'target-mouseenter',
+      'target-mouseleave',
+      'element-mouseenter',
+      'element-mouseleave',
+    ].includes(type);
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (['target-mouseenter', 'element-mouseenter'].includes(context.eventType)) {
+      return !context.currentState.isVisible
+        ? {
+          nextAction: 'show',
+        }
+        : {};
+    }
+    if (['target-mouseleave', 'element-mouseleave'].includes(context.eventType)) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    /* istanbul ignore next */
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/none-trigger-strategy.js

@@ -0,0 +1,22 @@
+/**
+ * NoneTriggerStrategy does not respond to any events and always indicates no action.
+ */
+export class NoneTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @returns {boolean} Always false as this strategy does not respond to any events.
+   */
+  canEvaluate() {
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Evaluates the trigger context and always indicates no action.
+   *
+   * @returns {VegaEATriggerResult} An object indicating no action (no show, hide, or toggle).
+   */
+  evaluate() {
+    return {};
+  }
+}

package/dist/collection/helpers/slimmers/element-appender/trigger-strategies/trigger-strategy.interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -14,6 +14,7 @@ import { SiblingContainerErrorLabelContainerRetrievalStrategy } from './field-er
 import { Observer } from '../change-manager/observer/observer';
 import { UPDATE_TRANSLATION } from '../change-manager/subject/static-subject/static-subject-title';
 import { FormFieldMessageTranslatorSlimmer } from './form-field-message-translator';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../utils/sanitize';
 /** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
 export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
   constructor() {
@@ -44,8 +45,7 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
       if (errorMessage) {
         this.errorMessage = errorMessage;
         const errorContainer = this.getErrorContainer(inputContainer);
-        errorContainer.innerHTML =
-          this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(errorMessage);
+        errorContainer.innerHTML = htmlSanitizer.sanitize(this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(errorMessage), labelSanitizeStrategy);
         errorContainer.classList.remove('vega-hidden');
       }
     }
@@ -101,8 +101,7 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
       if (inputContainer) {
         const errorContainer = this.getErrorContainer(inputContainer);
         if (errorContainer) {
-          errorContainer.innerHTML =
-            this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(this.errorMessage);
+          errorContainer.innerHTML = htmlSanitizer.sanitize(this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(this.errorMessage), labelSanitizeStrategy);
         }
       }
     });

package/dist/collection/helpers/slimmers/form-field-message-translator.js

@@ -1,5 +1,5 @@
 import { VegaSlimmer } from 'vega-slimmer/core';
-import { VegaInternalTranslation } from '../translation';
+import { VegaInternalTranslation } from '../translation/internal-translation-controller';
 /** The `FormFieldMessageTranslatorSlimmer` class is to get translated message */
 export class FormFieldMessageTranslatorSlimmer extends VegaSlimmer {
   /**

package/dist/collection/helpers/slimmers/global/vega-translate-observer-slimmer.js

@@ -9,7 +9,7 @@ import { UPDATE_TRANSLATION } from '../../change-manager/subject/static-subject/
 import ChangeManager from '../../change-manager/change-manager';
 import { Observer } from '../../change-manager/observer/observer';
 import { forceUpdate } from '@stencil/core';
-import { VegaInternalTranslation } from '../../translation';
+import { VegaInternalTranslation } from '../../translation/internal-translation-controller';
 /**
  * Class responsible for observing translation updates and triggering re-renders.
  */

package/dist/collection/helpers/slimmers/global/vega-watch-method-cancel-slimmer.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { FeatureFlag } from '../../public-api';
+import { FeatureFlag } from '../../feature-control/feature-flag-controller';
 /**
  * The `VegaWatchMethodCancelSlimmer` class is a TypeScript class that removes
  * the body of watch methods when a component is not fully instantiated and

package/dist/collection/helpers/slimmers/mutation-observer/aria-attributes-value-mapper.js

@@ -0,0 +1,128 @@
+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 { MapToComponentMethod } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from './mutation-observer-slimmer';
+import { LogUtility } from '../../../utils/log';
+/**
+ * Maps component attributes/properties to aria-XXX attributes on an inner native element.
+ * Observes attribute changes on host and updates the target element accordingly.
+ */
+export class AriaAttributesValueMapper extends MutationObserverSlimmer {
+  /**
+   * The constructor initializes a class instance with a targetGetter function and an ariaMap.
+   *
+   * @param {() => HTMLElement} targetGetter - a function that returns the target element to set aria attributes on
+   * @param {AriaAttributesMap} ariaMap - a map where the key is the aria attribute to set on the target element, and the value is an object that defines the dependencies (attributes/properties on host to check for value) and an optional default value
+   */
+  constructor(targetGetter, ariaMap) {
+    // Build attributeFilter from dependencies
+    const attrs = Array.from(new Set(Object.values(ariaMap).reduce((acc, cur) => acc.concat(cur.dependency), [])));
+    // create entry for MutationObserverSlimmer to observe host attributes (omit target so host is observed)
+    super({
+      options: { attributes: true, attributeFilter: attrs },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: (mutations) => {
+        this.handleMutations(mutations);
+      },
+    });
+    this.targetGetter = targetGetter;
+    this.ariaMap = ariaMap;
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    this.performMapping();
+    super.componentDidLoad && super.componentDidLoad();
+  }
+  /**
+   * Run mapping after each component render to ensure refs assigned and
+   * attributes/properties are up-to-date. This guarantees the mapper runs
+   * even when attribute changes are observed before the inner target ref
+   * is available.
+   */
+  componentDidRender() {
+    this.performMapping();
+  }
+  /**
+   * The `handleMutations` function processes an array of `MutationRecord` objects to determine which attributes have changed and then calls the `performMapping` function to update the corresponding aria attributes on the target element. It collects the names of the changed attributes into a set and passes it to the `performMapping` function, which uses this information to decide which aria attributes need to be updated based on their defined dependencies.
+   *
+   * @param {MutationRecord[]} mutations - an array of MutationRecord objects that represent the changes observed by the MutationObserver. Each MutationRecord contains information about the type of mutation, the target element that was mutated, and any relevant attribute names if the mutation was an attribute change.
+   */
+  handleMutations(mutations) {
+    const changedAttrs = new Set();
+    if (mutations && mutations.length) {
+      for (const m of mutations) {
+        if (m.attributeName)
+          changedAttrs.add(m.attributeName);
+      }
+    }
+    this.performMapping(changedAttrs.size ? changedAttrs : undefined);
+  }
+  /**
+   * The `performMapping` function updates the aria attributes on the target element based on the defined dependencies in the `ariaMap`. It checks which attributes have changed (if provided) and only updates the aria attributes that depend on those changed attributes. For each aria attribute defined in the `ariaMap`, it looks for the first non-empty value among its dependencies (checking both attributes and properties on the host element) and sets that as the value of the aria attribute on the target element. If all dependencies are empty or undefined, it uses the default value specified in the `ariaMap`. The function also includes error handling when setting attributes on the target element.
+   *
+   * @param {Set<string>} changedAttrs - a set of attribute names that have changed on the host element
+   */
+  performMapping(changedAttrs) {
+    const target = this.targetGetter ? this.targetGetter() : null;
+    if (!target)
+      return;
+    const host = this.host;
+    Object.keys(this.ariaMap).forEach((ariaAttr) => {
+      const { dependency, defaultValue } = this.ariaMap[ariaAttr];
+      // If no relevant dependency changed, skip updating this ariaAttr
+      if (changedAttrs && !dependency.some((item) => changedAttrs.has(item))) {
+        return;
+      }
+      let finalValue = null;
+      for (const item of dependency) {
+        // Try attribute first
+        let val = host.getAttribute(item);
+        if (val === null || val === undefined || val === '') {
+          // Try property on host if attribute not present or empty
+          // support dashed-name -> camelCase property (e.g. data-aria-label -> dataAriaLabel)
+          const camel = item.replace(/-([a-z])/g, (_m, p1) => p1.toUpperCase());
+          const p1 = host[item];
+          const p2 = host[camel];
+          if (p1 !== undefined && p1 !== null) {
+            val = String(p1);
+          }
+          else if (p2 !== undefined && p2 !== null) {
+            val = String(p2);
+          }
+        }
+        if (val !== null && val !== undefined && String(val).trim() !== '') {
+          finalValue = val;
+          break;
+        }
+      }
+      if (finalValue === null || finalValue === undefined || String(finalValue).trim() === '') {
+        finalValue = defaultValue !== null && defaultValue !== void 0 ? defaultValue : '';
+      }
+      try {
+        const existing = target.getAttribute(ariaAttr);
+        if (existing !== finalValue) {
+          target.setAttribute(ariaAttr, finalValue);
+        }
+      }
+      catch (e) {
+        LogUtility.warn('Errors occurred when setting aria attribute:', {
+          ariaAttr,
+          finalValue,
+          error: e,
+        });
+      }
+    });
+  }
+}
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], AriaAttributesValueMapper.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], AriaAttributesValueMapper.prototype, "componentDidRender", null);

package/dist/collection/helpers/slimmers/mutation-observer/test/aria-attributes-value-mapper.test.js

@@ -0,0 +1,196 @@
+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 { MockHTMLElement } from '@stencil/core/mock-doc';
+import { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { AriaAttributesValueMapper } from '../aria-attributes-value-mapper';
+import { MockedMutationObserver } from '../../../../utils/spec-utils';
+import { LogUtility } from '../../../../utils/log';
+describe('AriaAttributesValueMapper', () => {
+  const mockedConnectedCallback = jest.fn();
+  const mockedDisconnectedCallback = jest.fn();
+  const mockedComponentDidLoad = jest.fn();
+  beforeEach(() => {
+    // ensure MutationObserver is mocked
+    global.MutationObserver = MockedMutationObserver;
+    MockedMutationObserver.mockClear();
+  });
+  class MockedComponent {
+    constructor() {
+      this.host = new MockHTMLElement('body', 'mocked-component');
+    }
+    connectedCallback() {
+      mockedConnectedCallback();
+    }
+    disconnectedCallback() {
+      mockedDisconnectedCallback();
+    }
+    componentDidLoad() {
+      mockedComponentDidLoad();
+    }
+    setMapper(mapper) {
+      this.ariaAttributesValueMapper = mapper;
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponent.prototype, "ariaAttributesValueMapper", void 0);
+  it('should map initial attribute value to target aria attribute', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    // simulate lifecycle
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should update aria attribute when observed attribute changes', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'apple');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // change attribute and trigger mutation
+    comp.host.setAttribute('data-aria-label', 'banana');
+    MockedMutationObserver.mock.instances[0].trigger([
+      { attributeName: 'data-aria-label', oldValue: 'apple' },
+    ]);
+    expect(button.getAttribute('aria-label')).toBe('banana');
+  });
+  it('should respect dependency priority and not overwrite when higher-priority exists', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // higher priority present
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.host.setAttribute('label', 'initial');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('test');
+    // lower-priority 'label' changes
+    comp.host.setAttribute('label', 'apple');
+    MockedMutationObserver.mock.instances[0].trigger([{ attributeName: 'label', oldValue: 'initial' }]);
+    // should remain the higher-priority value
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should read camelCase host property when dashed attribute not present', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // set property instead of attribute
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    comp.host.dataAriaLabel = 'propVal';
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('propVal');
+  });
+  it('should use default value when dependencies are empty', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(button.getAttribute('aria-label')).toBe('No label');
+  });
+  it('should ignore unrelated attribute mutations', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // unrelated attribute changes should not affect mapping
+    comp.host.setAttribute('some-other-attr', 'val');
+    MockedMutationObserver.mock.instances[0].trigger([
+      { attributeName: 'some-other-attr', oldValue: null },
+    ]);
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+  it('should warn when setting aria attribute throws', () => {
+    const comp = new MockedComponent();
+    // create a target that throws when setAttribute is called
+    const target = {
+      getAttribute: () => null,
+      setAttribute: () => {
+        throw new Error('boom');
+      },
+    };
+    const warnSpy = jest.spyOn(LogUtility, 'warn').mockImplementation(() => {
+      return 'warn mock';
+    });
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => target, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    expect(warnSpy).toBeCalled();
+    warnSpy.mockRestore();
+  });
+  it('should be no-op when targetGetter returns null or targetGetter is null', () => {
+    const comp = new MockedComponent();
+    // Case 1: constructor targetGetter returns null
+    comp.setMapper(new AriaAttributesValueMapper(() => null, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    expect(() => {
+      comp.connectedCallback();
+      comp.componentDidLoad();
+    }).not.toThrow();
+    // Case 2: targetGetter property explicitly set to null after construction
+    const button = document.createElement('button');
+    const mapper = new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    });
+    // force targetGetter to null
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    mapper.targetGetter = null;
+    comp.setMapper(mapper);
+    expect(() => {
+      comp.connectedCallback();
+      comp.componentDidLoad();
+    }).not.toThrow();
+  });
+  it('should set empty string when no defaultValue provided', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    // no dependencies present on host and no defaultValue in map
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'] },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // should set attribute to empty string when no defaultValue provided
+    expect(button.getAttribute('aria-label')).toBe('');
+  });
+  it('should handle empty mutations array (pass undefined to performMapping)', () => {
+    const comp = new MockedComponent();
+    const button = document.createElement('button');
+    comp.host.setAttribute('data-aria-label', 'test');
+    comp.setMapper(new AriaAttributesValueMapper(() => button, {
+      'aria-label': { dependency: ['data-aria-label', 'label'], defaultValue: 'No label' },
+    }));
+    comp.connectedCallback();
+    comp.componentDidLoad();
+    // trigger with empty mutations array -> changedAttrs.size === 0 -> undefined passed
+    MockedMutationObserver.mock.instances[0].trigger([]);
+    expect(button.getAttribute('aria-label')).toBe('test');
+  });
+});