@globalpayments/vega 2.37.1 → 2.38.0

package/dist/collection/helpers/formatter/string-formatter/string-mask-strategy.js

@@ -1,16 +1,18 @@
+import { StringFormatStrategy } from './string-format-strategy.abstract';
 import { isNonNullable } from '../../../types/type-guard';
 /**
  * A class for formatting string with the given mask format
  *
  * @augments StringFormatStrategy
  */
-export class StringMaskStrategy {
+export class StringMaskStrategy extends StringFormatStrategy {
   /**
    * It creates a new instance of the Mask class.
    *
    * @param {MaskConfig} maskConfig - MaskConfig
    */
   constructor(maskConfig) {
+    super();
     /**
      * The insert mode means adding some special character in the input string, will replace part of input string if insertMode set to false.
      *
@@ -29,13 +31,10 @@ export class StringMaskStrategy {
     this.insertMode = maskConfig.insertMode === false ? false : true;
   }
   /**
-   * Given a string, it replaces the mask with the matched input slot value
-   *
-   * @param {string} input - The input string that needs to be formatted.
-   * @param {number} caretPosition - The current position of caret
-   * @returns {string} The formatted string.
+   * @inheritDoc
    */
-  format(input, caretPosition) {
+  format(input, inputStatus) {
+    const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
     if (input.length > this.getLengthLimit() && isNonNullable(caretPosition)) {
       const rawValueArr = [...input];
       const exceededLength = input.length - this.getLengthLimit();

package/dist/collection/helpers/formatter/string-formatter/thousand-comma-strategy.js

@@ -1,9 +1,10 @@
+import { StringFormatStrategy } from './string-format-strategy.abstract';
 /**
  * A class for formatting string with the "," as the thousand separator
  *
  * @augments StringFormatStrategy
  */
-export class ThousandCommaStrategy {
+export class ThousandCommaStrategy extends StringFormatStrategy {
   /**
    * If the input is a number, format it as a string
    *

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -3,7 +3,8 @@ test('custom formatter strategy is working as expected', () => {
   const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase(), true);
   expect(customFormatterStrategy.format('test')).toBe('TEST');
   expect(customFormatterStrategy.calculateCaretPosition('test', null)).toBe(4);
-  expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
+  expect(customFormatterStrategy.canFormat('init', 'component')).toBe(true);
+  expect(customFormatterStrategy.canFormat('init', 'native-input')).toBe(true);
 });
 test('custom formatter strategy method calculateCaretPosition is working as expected', () => {
   const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());

package/dist/collection/helpers/formatter/test/string-formatter/number-mask-strategy.test.js

@@ -89,4 +89,13 @@ describe('numberStrategy', () => {
     expect(numberStrategy.calculateCaretPosition('00.123', 6)).toBe(5);
     expect(numberStrategy.calculateCaretPosition('00.123', undefined)).toBe(undefined);
   });
+  it('canFormat should return as expect', () => {
+    const numberStrategy = new NumberMaskStrategy();
+    expect(numberStrategy.canFormat('init', 'component')).toBe(false);
+    expect(numberStrategy.canFormat('input', 'native-input')).toBe(true);
+    expect(numberStrategy.canFormat('blur', 'component', { isBlurred: true })).toBe(false);
+    expect(numberStrategy.canFormat('blur', 'component', { isBlurred: false })).toBe(false);
+    expect(numberStrategy.canFormat('blur', 'native-input', { isBlurred: true })).toBe(true);
+    expect(numberStrategy.canFormat('blur', 'native-input', { isBlurred: false })).toBe(false);
+  });
 });

package/dist/collection/helpers/formatter/test/string-formatter/string-mask-strategy.test.js

@@ -55,7 +55,7 @@ test('should work as expected when slot and accept is regex', () => {
   expect(mask5.format('456')).toBe('');
 });
 test('mask format with caretPosition', () => {
-  expect(StringMaskStrategy.ZIPCODE_MASK.format('123456', 3)).toBe('12456'); // |456 -> 12|456
+  expect(StringMaskStrategy.ZIPCODE_MASK.format('123456', { caretPosition: 3 })).toBe('12456'); // |456 -> 12|456
 });
 test('calculate caret position', () => {
   expect(StringMaskStrategy.PHONE_MASK.calculateCaretPosition('(123) 456-7890', null)).toEqual(null);
@@ -70,11 +70,11 @@ test('shouldOverrideComponentValueAfterBlur', () => {
     accept: /\d/g,
   };
   const mask1 = new StringMaskStrategy(maskConfig);
-  expect(mask1.shouldOverrideComponentValueAfterBlur()).toBeFalsy();
+  expect(mask1.canFormat('blur', 'component', { isBlurred: true })).toBeFalsy();
   const mask2 = new StringMaskStrategy(Object.assign(Object.assign({}, maskConfig), { overrideValue: true }));
-  expect(mask2.shouldOverrideComponentValueAfterBlur()).toBeTruthy();
+  expect(mask2.canFormat('blur', 'component', { isBlurred: true })).toBeTruthy();
   const mask3 = new StringMaskStrategy(Object.assign(Object.assign({}, maskConfig), { overrideValue: false }));
-  expect(mask3.shouldOverrideComponentValueAfterBlur()).toBeFalsy();
+  expect(mask3.canFormat('blur', 'component', { isBlurred: true })).toBeFalsy();
 });
 test('format in different insert mode', () => {
   const maskConfig = {
@@ -87,3 +87,61 @@ test('format in different insert mode', () => {
   const mask2 = new StringMaskStrategy(Object.assign(Object.assign({}, maskConfig), { insertMode: false }));
   expect(mask2.format('123456')).toEqual('***456');
 });
+describe('string-mask-strategy', () => {
+  test('canFormat should work as expect when setting triggerAtInit', () => {
+    const strategyTriggerAtInit = new StringMaskStrategy({
+      mask: '(999) 999-9999',
+      slot: '9',
+      accept: /\d/g,
+      triggerAtInit: true,
+    });
+    expect(strategyTriggerAtInit.canFormat('init', 'component')).toBeTruthy();
+    expect(strategyTriggerAtInit.canFormat('init', 'native-input')).toBeTruthy();
+    expect(strategyTriggerAtInit.canFormat('input', 'native-input')).toBeTruthy();
+    expect(strategyTriggerAtInit.canFormat('blur', 'component', { isBlurred: true })).toBeFalsy();
+    expect(strategyTriggerAtInit.canFormat('blur', 'component', { isBlurred: false })).toBeFalsy();
+    expect(strategyTriggerAtInit.canFormat('blur', 'native-input', { isBlurred: true })).toBeTruthy();
+    expect(strategyTriggerAtInit.canFormat('blur', 'native-input', { isBlurred: false })).toBeFalsy();
+    const strategyNotTriggerAtInit = new StringMaskStrategy({
+      mask: '(999) 999-9999',
+      slot: '9',
+      accept: /\d/g,
+      triggerAtInit: false,
+    });
+    expect(strategyNotTriggerAtInit.canFormat('init', 'component')).toBeFalsy();
+    expect(strategyNotTriggerAtInit.canFormat('init', 'native-input')).toBeFalsy();
+    expect(strategyNotTriggerAtInit.canFormat('input', 'native-input')).toBeTruthy();
+    expect(strategyNotTriggerAtInit.canFormat('blur', 'component', { isBlurred: true })).toBeFalsy();
+    expect(strategyNotTriggerAtInit.canFormat('blur', 'component', { isBlurred: false })).toBeFalsy();
+    expect(strategyNotTriggerAtInit.canFormat('blur', 'native-input', { isBlurred: true })).toBeTruthy();
+    expect(strategyNotTriggerAtInit.canFormat('blur', 'native-input', { isBlurred: false })).toBeFalsy();
+  });
+  test('canFormat should work as expect when setting overrideValue', () => {
+    const strategyOverrideValue = new StringMaskStrategy({
+      mask: '(999) 999-9999',
+      slot: '9',
+      accept: /\d/g,
+      overrideValue: true,
+    });
+    expect(strategyOverrideValue.canFormat('init', 'component')).toBeFalsy();
+    expect(strategyOverrideValue.canFormat('init', 'native-input')).toBeFalsy();
+    expect(strategyOverrideValue.canFormat('input', 'native-input')).toBeTruthy();
+    expect(strategyOverrideValue.canFormat('blur', 'component', { isBlurred: true })).toBeTruthy();
+    expect(strategyOverrideValue.canFormat('blur', 'component', { isBlurred: false })).toBeFalsy();
+    expect(strategyOverrideValue.canFormat('blur', 'native-input', { isBlurred: true })).toBeTruthy();
+    expect(strategyOverrideValue.canFormat('blur', 'native-input', { isBlurred: false })).toBeFalsy();
+    const strategyNotOverrideValue = new StringMaskStrategy({
+      mask: '(999) 999-9999',
+      slot: '9',
+      accept: /\d/g,
+      overrideValue: false,
+    });
+    expect(strategyNotOverrideValue.canFormat('init', 'component')).toBeFalsy();
+    expect(strategyNotOverrideValue.canFormat('init', 'native-input')).toBeFalsy();
+    expect(strategyNotOverrideValue.canFormat('input', 'native-input')).toBeTruthy();
+    expect(strategyNotOverrideValue.canFormat('blur', 'component', { isBlurred: true })).toBeFalsy();
+    expect(strategyNotOverrideValue.canFormat('blur', 'component', { isBlurred: false })).toBeFalsy();
+    expect(strategyNotOverrideValue.canFormat('blur', 'native-input', { isBlurred: true })).toBeTruthy();
+    expect(strategyNotOverrideValue.canFormat('blur', 'native-input', { isBlurred: false })).toBeFalsy();
+  });
+});

package/dist/collection/helpers/loading-indicator/tests/vega-loader-controller.test.js

@@ -120,7 +120,34 @@ describe('VegaLoaderController', () => {
     VegaLoader.close(loader);
     expect(document.querySelector('body')).toMatchInlineSnapshot(`
 		<body>
-		  <div data-vega-loader-origin-position id="container" style="position: static;">
+		  <div data-vega-loader-origin-position id="container" style="position: relative;">
+		    <mock:shadow-root></mock:shadow-root>
+		  </div>
+		</body>
+	`);
+  });
+  it('should restore original display position when loader closes', () => {
+    const container = document.createElement('div');
+    container.attachShadow({ mode: 'open' });
+    container.id = 'container';
+    container.style.position = `static`;
+    document.querySelector('body').append(container);
+    const loader = VegaLoader.load({ containerSelector: '#container' });
+    expect(document.querySelector('body')).toEqualHtml(`
+		<body>
+		  <div data-vega-loader-origin-position="static" id="container" style="position: relative;">
+		    <mock:shadow-root>
+		      <vega-loader-wrapper class="absolute-wrapper" data-container="#container" id="vega-loader-TEST_UUID">
+		        <vega-loading-indicator></vega-loading-indicator>
+		      </vega-loader-wrapper>
+		    </mock:shadow-root>
+		  </div>
+		</body>
+	`);
+    VegaLoader.close(loader);
+    expect(document.querySelector('body')).toMatchInlineSnapshot(`
+		<body>
+		  <div data-vega-loader-origin-position="static" id="container" style="position: static;">
 		    <mock:shadow-root></mock:shadow-root>
 		  </div>
 		</body>
@@ -143,7 +170,7 @@ describe('VegaLoaderController', () => {
     VegaLoader.close(loader);
     expect(document.querySelector('body')).toMatchInlineSnapshot(`
 		<body>
-		  <div data-vega-loader-origin-position id="container" style="position: static;"></div>
+		  <div data-vega-loader-origin-position id="container" style="position: relative;"></div>
 		</body>
 	`);
   });

package/dist/collection/helpers/loading-indicator/vega-loader-controller.js

@@ -25,8 +25,13 @@ class VegaLoaderController {
    * @vegaVersion 1.16.0
    */
   load(options = {}) {
-    const containerSelector = options.containerSelector || 'body';
-    const containerElement = document.querySelector(containerSelector);
+    let containerSelector = options.containerSelector || 'body';
+    let containerElement = document.querySelector(containerSelector);
+    if (containerElement &&
+      VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY.includes(containerElement.tagName)) {
+      containerSelector = 'body';
+      containerElement = document.querySelector('body');
+    }
     if (!containerElement) {
       LogUtility.error('Container is not found by selector: ', containerSelector);
       return null;
@@ -48,7 +53,9 @@ class VegaLoaderController {
       if (loader.dataset.container) {
         const container = document.querySelector(loader.dataset.container);
         if (container) {
-          container.style.position = container.dataset['vegaLoaderOriginPosition'] || 'static';
+          if (container.dataset['vegaLoaderOriginPosition']) {
+            container.style.position = container.dataset['vegaLoaderOriginPosition'];
+          }
         }
       }
       loader.remove();
@@ -118,6 +125,7 @@ class VegaLoaderController {
     }
   }
 }
+VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
 __decorate([
   InjectVegaTelemetrySlimmer()
 ], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);

package/dist/collection/helpers/slimmers/string-input-formatter-slimmer.js

@@ -30,7 +30,7 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       }
     };
     /**
-     * A function update the value of the input element by inputFormatStrategy output.
+     * A function updates the value of the input element by inputFormatStrategy output.
      *
      * @param {InputEvent} e - blur event
      */
@@ -38,17 +38,11 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       if (this.blurFormatStrategy) {
         const target = e.target;
         const rawValue = target.value;
-        const maskedValue = this.blurFormatStrategy.format(rawValue);
-        this.updateInputValue(rawValue, maskedValue);
-        if (this.host &&
-          this.blurFormatStrategy.shouldOverrideComponentValueAfterBlur &&
-          this.blurFormatStrategy.shouldOverrideComponentValueAfterBlur()) {
-          this.host['value'] = maskedValue;
-        }
+        this.formatValue(rawValue, 'blur');
       }
     };
     /**
-     * A function update the value of the input element by inputFormatStrategy output.
+     * A function updates the value of the input element by inputFormatStrategy output.
      *
      * @param {InputEvent} e - input event
      */
@@ -57,11 +51,9 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       const rawValue = target.value;
       const caretPosition = target.selectionStart; // selectionStart is nullable, link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-selectionstart
       if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue.replace(/\s/g, ''), 
-        // Paste input is difference with type input, it can set much characters at one time,
-        // so we should make caretPosition as undefined to format all value.
-        e.inputType === 'insertFromPaste' ? null : caretPosition);
-        this.updateInputValue(rawValue, maskedValue);
+        this.formatValue(rawValue.replace(/\s/g, ''), 'input', {
+          caretPosition: e.inputType === 'insertFromPaste' ? undefined : caretPosition,
+        });
         this.updateInputCaretPosition(rawValue, caretPosition);
       }
     };
@@ -123,22 +115,13 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
    */
   formatValueAfterSetup() {
     void waitForComponentDidRender(this.host).then(() => {
-      var _a, _b, _c, _d;
-      const rawValue = this.inputElement.value;
-      if ((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) {
-        this.host['value'] = this.inputFormatStrategy.format(rawValue);
-      }
-      if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus()) {
-        const maskedValue = this.blurFormatStrategy.format(rawValue);
-        this.updateInputValue(rawValue, maskedValue);
-      }
+      this.formatValue(this.inputElement.value, 'init');
     });
   }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-credit-card-dynamic-mask-e2e}
    */
-  /* istanbul ignore next */
   /**
    * The function `isOnFocus` checks if the input element is currently focused.
    *
@@ -156,7 +139,7 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
    * @param {string} rawValue - the original value
    * @param {string} maskedValue - masked value
    */
-  updateInputValue(rawValue, maskedValue) {
+  updateNativeInputValue(rawValue, maskedValue) {
     // link: https://stackoverflow.com/questions/52003841/why-doesnt-event-target-value-include-and-e-for-number-inputs
     // If the input value is '123.', '123' will be got from `target.value` when the input element type is number
     // '123.' will be formatted to '123', then `this.inputElement.value = 123`, '.' will never be filled in
@@ -164,6 +147,17 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.value = maskedValue;
     }
   }
+  /**
+   * Update the host value
+   *
+   * @param {string} rawValue - the original value
+   * @param {string} maskedValue - the masked value
+   */
+  updateComponentValue(rawValue, maskedValue) {
+    if (maskedValue !== rawValue) {
+      this.host['value'] = maskedValue;
+    }
+  }
   /**
    * Updated the input caret position after the mask format
    *
@@ -177,6 +171,40 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.setSelectionRange(newCaretPosition, newCaretPosition);
     }
   }
+  /**
+   * Format the value based on the input and blur format strategies.
+   *
+   * @param {string} rawValue - The original input value
+   * @param {FormatTrigger} triggeredBy - The trigger of the format
+   * @param {{ caretPosition?: number }} options - The options for the format
+   * @param {number} options.caretPosition - The current input caret position
+   */
+  formatValue(rawValue, triggeredBy, options) {
+    const isBlurred = !this.isOnFocus();
+    const caretPosition = options === null || options === void 0 ? void 0 : options.caretPosition;
+    if (this.inputFormatStrategy) {
+      if (this.inputFormatStrategy.canFormat(triggeredBy, 'component')) {
+        const formattedComponentValue = this.inputFormatStrategy.format(rawValue);
+        this.updateComponentValue(rawValue, formattedComponentValue);
+      }
+      if (this.inputFormatStrategy.canFormat(triggeredBy, 'native-input')) {
+        const formattedNativeInputValue = this.inputFormatStrategy.format(rawValue, {
+          caretPosition: caretPosition,
+        });
+        this.updateNativeInputValue(rawValue, formattedNativeInputValue);
+      }
+    }
+    if (this.blurFormatStrategy && isBlurred) {
+      if (this.blurFormatStrategy.canFormat(triggeredBy, 'component', { isBlurred })) {
+        const formattedComponentValue = this.blurFormatStrategy.format(rawValue);
+        this.updateComponentValue(rawValue, formattedComponentValue);
+      }
+      if (this.blurFormatStrategy.canFormat(triggeredBy, 'native-input', { isBlurred })) {
+        const formattedNativeInputValue = this.blurFormatStrategy.format(rawValue);
+        this.updateNativeInputValue(rawValue, formattedNativeInputValue);
+      }
+    }
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/helpers/slimmers/test/string-input-formatter-slimmer.test.js

@@ -9,6 +9,7 @@ import { InjectVegaSlimmer } from 'vega-slimmer/core';
 import { StringInputFormatterSlimmer } from '../string-input-formatter-slimmer';
 import { StringMaskStrategy } from '../../formatter/string-formatter/string-mask-strategy';
 import { ThousandCommaStrategy } from '../../formatter/string-formatter/thousand-comma-strategy';
+import { StringFormatStrategy } from '../../formatter/string-formatter/string-format-strategy.abstract';
 import { dispatchPasteEvent } from '../../../utils/spec-utils';
 const createMockedInput = () => {
   const inputEl = document.createElement('input');
@@ -197,7 +198,7 @@ describe('StringInputFormatterSlimmer test suite', () => {
     expect(inputEl.value).toEqual('(115) 902-4055');
   });
   test('should work proper while formatter have not implement calculateCaretPosition method', () => {
-    class FormatterSlimmer {
+    class FormatterSlimmer extends StringFormatStrategy {
       format(input) {
         return input;
       }

package/dist/esm/{app-globals-c1f2bea9.js → app-globals-4cca4a96.js}

@@ -1,5 +1,5 @@
 import { F as FeatureFlag } from './feature-flag-controller-4b3fe6f8.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, d as VegaSkeletonLoader } from './vega-skeleton-loader-controller-0044d77f.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, d as VegaSkeletonLoader } from './vega-skeleton-loader-controller-5aea7aeb.js';
 import { V as VegaThemeManager } from './node-annotation.abstract-b2e36bc4.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaDialog } from './vega-dialog-controller-34eb8967.js';

package/dist/esm/index.js

@@ -8,7 +8,7 @@ export { I as Icons, g as getIconFromToken } from './icons-8627925e.js';
 export { b as Typography, a as TypographyKeys, T as TypographyUrls } from './typography-396de03f.js';
 export { e as BoxDisplay, B as BreakpointKeys, C as CssStates, F as FlexDirections } from './ui-8424715a.js';
 export { F as FrameworkEnum, v as VegaEnvManager } from './vega-env-manager-8f8dc473.js';
-export { b as VegaEventManager, V as VegaLoader, a as VegaNotify, d as VegaSkeletonLoader, c as VegaZIndexManager } from './vega-skeleton-loader-controller-0044d77f.js';
+export { b as VegaEventManager, V as VegaLoader, a as VegaNotify, d as VegaSkeletonLoader, c as VegaZIndexManager } from './vega-skeleton-loader-controller-5aea7aeb.js';
 export { F as FeatureFlag } from './feature-flag-controller-4b3fe6f8.js';
 export { M as ModifyContentAction, R as RTENode, V as VegaThemeManager } from './node-annotation.abstract-b2e36bc4.js';
 export { V as VegaDialog } from './vega-dialog-controller-34eb8967.js';

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
 import { p as promiseResolve, b as bootstrapLazy } from './index-187f71d1.js';
-import { g as globalScripts } from './app-globals-c1f2bea9.js';
+import { g as globalScripts } from './app-globals-4cca4a96.js';
 import './feature-flag-controller-4b3fe6f8.js';
 import './global-slimmer-registry-17c4efd4.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './vega-skeleton-loader-controller-0044d77f.js';
+import './vega-skeleton-loader-controller-5aea7aeb.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import './dynamic-slimmer-90b8af32.js';
 import './ui-62e4be97.js';

package/dist/esm/{string-input-formatter-slimmer-930f1125.js → string-input-formatter-slimmer-d4132497.js}

@@ -5,18 +5,71 @@ import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.
 import { a as VegaInternalComponentDidRender } from './vega-internal-event-id-d0690d0d.js';
 import { a as waitForComponentDidRender } from './index-6e05b241.js';
 
+/**
+ * String format strategy abstract class
+ */
+class StringFormatStrategy {
+  /**
+   * Check if the {@link format} should be applied
+   *
+   * @param {FormatTrigger} triggeredBy - The trigger of the format
+   * @param {FormatTarget} target - The target of the format
+   * @param {InputStatus} inputStatus - The status of the input
+   * @returns {boolean} - Whether the format should be applied
+   */
+  canFormat(triggeredBy, target, inputStatus) {
+    if (triggeredBy === 'init') {
+      if (target === 'component' && isNonNullable(inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.isBlurred)) {
+        return false;
+      }
+      if (this.shouldTriggerAtInit()) {
+        return true;
+      }
+    }
+    if (triggeredBy === 'input' && target === 'native-input') {
+      return true;
+    }
+    if (triggeredBy === 'blur' && (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.isBlurred)) {
+      if (target === 'component' && this.shouldOverrideComponentValueAfterBlur()) {
+        return true;
+      }
+      if (target === 'native-input') {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Determines whether a component value should be overridden based on the mask configuration.
+   *
+   * @returns {boolean} - Whether the component value should be overridden.
+   */
+  shouldOverrideComponentValueAfterBlur() {
+    return false;
+  }
+  /**
+   * Determines whether the format should be triggered at init.
+   *
+   * @returns {boolean} - Whether the format should be triggered at init.
+   */
+  shouldTriggerAtInit() {
+    return false; // TODO: trigger at init feature is not implemented to all strategies. To keep the same behavior as before so set false here as default.
+  }
+}
+
 /**
  * A class for formatting string with the given mask format
  *
  * @augments StringFormatStrategy
  */
-class StringMaskStrategy {
+class StringMaskStrategy extends StringFormatStrategy {
   /**
    * It creates a new instance of the Mask class.
    *
    * @param {MaskConfig} maskConfig - MaskConfig
    */
   constructor(maskConfig) {
+    super();
     /**
      * The insert mode means adding some special character in the input string, will replace part of input string if insertMode set to false.
      *
@@ -35,13 +88,10 @@ class StringMaskStrategy {
     this.insertMode = maskConfig.insertMode === false ? false : true;
   }
   /**
-   * Given a string, it replaces the mask with the matched input slot value
-   *
-   * @param {string} input - The input string that needs to be formatted.
-   * @param {number} caretPosition - The current position of caret
-   * @returns {string} The formatted string.
+   * @inheritDoc
    */
-  format(input, caretPosition) {
+  format(input, inputStatus) {
+    const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
     if (input.length > this.getLengthLimit() && isNonNullable(caretPosition)) {
       const rawValueArr = [...input];
       const exceededLength = input.length - this.getLengthLimit();
@@ -191,7 +241,7 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       }
     };
     /**
-     * A function update the value of the input element by inputFormatStrategy output.
+     * A function updates the value of the input element by inputFormatStrategy output.
      *
      * @param {InputEvent} e - blur event
      */
@@ -199,17 +249,11 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       if (this.blurFormatStrategy) {
         const target = e.target;
         const rawValue = target.value;
-        const maskedValue = this.blurFormatStrategy.format(rawValue);
-        this.updateInputValue(rawValue, maskedValue);
-        if (this.host &&
-          this.blurFormatStrategy.shouldOverrideComponentValueAfterBlur &&
-          this.blurFormatStrategy.shouldOverrideComponentValueAfterBlur()) {
-          this.host['value'] = maskedValue;
-        }
+        this.formatValue(rawValue, 'blur');
       }
     };
     /**
-     * A function update the value of the input element by inputFormatStrategy output.
+     * A function updates the value of the input element by inputFormatStrategy output.
      *
      * @param {InputEvent} e - input event
      */
@@ -218,11 +262,9 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       const rawValue = target.value;
       const caretPosition = target.selectionStart; // selectionStart is nullable, link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-selectionstart
       if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue.replace(/\s/g, ''), 
-        // Paste input is difference with type input, it can set much characters at one time,
-        // so we should make caretPosition as undefined to format all value.
-        e.inputType === 'insertFromPaste' ? null : caretPosition);
-        this.updateInputValue(rawValue, maskedValue);
+        this.formatValue(rawValue.replace(/\s/g, ''), 'input', {
+          caretPosition: e.inputType === 'insertFromPaste' ? undefined : caretPosition,
+        });
         this.updateInputCaretPosition(rawValue, caretPosition);
       }
     };
@@ -284,22 +326,13 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
    */
   formatValueAfterSetup() {
     void waitForComponentDidRender(this.host).then(() => {
-      var _a, _b, _c, _d;
-      const rawValue = this.inputElement.value;
-      if ((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) {
-        this.host['value'] = this.inputFormatStrategy.format(rawValue);
-      }
-      if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus()) {
-        const maskedValue = this.blurFormatStrategy.format(rawValue);
-        this.updateInputValue(rawValue, maskedValue);
-      }
+      this.formatValue(this.inputElement.value, 'init');
     });
   }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-credit-card-dynamic-mask-e2e}
    */
-  /* istanbul ignore next */
   /**
    * The function `isOnFocus` checks if the input element is currently focused.
    *
@@ -317,7 +350,7 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
    * @param {string} rawValue - the original value
    * @param {string} maskedValue - masked value
    */
-  updateInputValue(rawValue, maskedValue) {
+  updateNativeInputValue(rawValue, maskedValue) {
     // link: https://stackoverflow.com/questions/52003841/why-doesnt-event-target-value-include-and-e-for-number-inputs
     // If the input value is '123.', '123' will be got from `target.value` when the input element type is number
     // '123.' will be formatted to '123', then `this.inputElement.value = 123`, '.' will never be filled in
@@ -325,6 +358,17 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.value = maskedValue;
     }
   }
+  /**
+   * Update the host value
+   *
+   * @param {string} rawValue - the original value
+   * @param {string} maskedValue - the masked value
+   */
+  updateComponentValue(rawValue, maskedValue) {
+    if (maskedValue !== rawValue) {
+      this.host['value'] = maskedValue;
+    }
+  }
   /**
    * Updated the input caret position after the mask format
    *
@@ -338,6 +382,40 @@ class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.setSelectionRange(newCaretPosition, newCaretPosition);
     }
   }
+  /**
+   * Format the value based on the input and blur format strategies.
+   *
+   * @param {string} rawValue - The original input value
+   * @param {FormatTrigger} triggeredBy - The trigger of the format
+   * @param {{ caretPosition?: number }} options - The options for the format
+   * @param {number} options.caretPosition - The current input caret position
+   */
+  formatValue(rawValue, triggeredBy, options) {
+    const isBlurred = !this.isOnFocus();
+    const caretPosition = options === null || options === void 0 ? void 0 : options.caretPosition;
+    if (this.inputFormatStrategy) {
+      if (this.inputFormatStrategy.canFormat(triggeredBy, 'component')) {
+        const formattedComponentValue = this.inputFormatStrategy.format(rawValue);
+        this.updateComponentValue(rawValue, formattedComponentValue);
+      }
+      if (this.inputFormatStrategy.canFormat(triggeredBy, 'native-input')) {
+        const formattedNativeInputValue = this.inputFormatStrategy.format(rawValue, {
+          caretPosition: caretPosition,
+        });
+        this.updateNativeInputValue(rawValue, formattedNativeInputValue);
+      }
+    }
+    if (this.blurFormatStrategy && isBlurred) {
+      if (this.blurFormatStrategy.canFormat(triggeredBy, 'component', { isBlurred })) {
+        const formattedComponentValue = this.blurFormatStrategy.format(rawValue);
+        this.updateComponentValue(rawValue, formattedComponentValue);
+      }
+      if (this.blurFormatStrategy.canFormat(triggeredBy, 'native-input', { isBlurred })) {
+        const formattedNativeInputValue = this.blurFormatStrategy.format(rawValue);
+        this.updateNativeInputValue(rawValue, formattedNativeInputValue);
+      }
+    }
+  }
 }
 __decorate([
   MapToComponentField()
@@ -346,4 +424,4 @@ __decorate([
   MapToComponentMethod('componentDidRender')
 ], StringInputFormatterSlimmer.prototype, "componentDidRender", null);
 
-export { StringInputFormatterSlimmer as S, StringMaskStrategy as a };
+export { StringFormatStrategy as S, StringInputFormatterSlimmer as a, StringMaskStrategy as b };