@heartlandone/vega 2.78.0 → 2.80.0

package/dist/esm/string-format-strategy.abstract-ec6d627b.js

@@ -0,0 +1,61 @@
+import { i as isNonNullable } from './type-guard-23a08026.js';
+
+/**
+ * String format strategy abstract class
+ */
+class StringFormatStrategy {
+  constructor() {
+    this.overrideValue = false;
+  }
+  /**
+   * 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' || triggeredBy === 'change') {
+      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 === 'change' && (target === 'component' || 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 this.overrideValue;
+  }
+  /**
+   * 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.
+  }
+}
+
+export { StringFormatStrategy as S };

package/dist/esm/string-input-formatter-slimmer-959dff7a.js

@@ -0,0 +1,228 @@
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { i as isNonNullable } from './type-guard-23a08026.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+import { r as VegaInternalPasteEvent, s as VegaInternalComponentDidRender } from './vega-internal-event-id-70bd893d.js';
+import { w as waitForComponentDidRender } from './wait-for-component-did-render-03e7ccb2.js';
+
+var __decorate = (undefined && undefined.__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;
+};
+/** The `StringInputFormatterSlimmer` class in TypeScript is used to format input values based on specified strategies and handle events like keydown, blur, and focus. */
+class StringInputFormatterSlimmer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * restore input value
+     *
+     * @param {InputEvent} e - focus event
+     */
+    this.onFocus = (e) => {
+      if (this.host && this.host['value']) {
+        const target = e.target;
+        const rawValue = target.value;
+        const componentValue = this.host['value'];
+        if (rawValue !== componentValue) {
+          this.inputElement.value = componentValue;
+        }
+      }
+    };
+    /**
+     * A function updates the value of the input element by inputFormatStrategy output.
+     *
+     * @param {InputEvent} e - blur event
+     */
+    this.onBlur = (e) => {
+      if (this.blurFormatStrategy) {
+        const target = e.target;
+        const rawValue = target.value;
+        this.formatValue(rawValue, 'blur');
+      }
+    };
+    /**
+     * A function updates the value of the input element by inputFormatStrategy output.
+     *
+     * @param {InputEvent} e - input event
+     */
+    this.onKeyDown = (e) => {
+      const target = e.target;
+      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) {
+        this.formatValue(rawValue, 'input', {
+          caretPosition: e.inputType === 'insertFromPaste' ? undefined : caretPosition,
+        });
+        this.updateInputCaretPosition(rawValue, caretPosition);
+      }
+    };
+    /**
+     * A function to update the value of the input element by inputFormatStrategy output when paste is applied.
+     *
+     * @param {ClipboardEvent} e - paste event
+     */
+    this.onPaste = (e) => {
+      if (this.disableCopyPaste) {
+        e.preventDefault();
+      }
+      else {
+        ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalPasteEvent), e);
+      }
+    };
+  }
+  /**
+   * Component lifecycle - componentDidRender
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
+  /**
+   * The setup function initializes input element event listeners based on input and blur format strategies.
+   */
+  setup() {
+    this.destroy();
+    const inputElement = this.getInputElementRef();
+    if (inputElement) {
+      this.inputElement = inputElement;
+      this.inputFormatStrategy = this.getInputModeStrategy();
+      this.blurFormatStrategy = this.getBlurModeStrategy();
+      this.formatValueAfterSetup();
+      if (this.inputFormatStrategy) {
+        this.inputElement.addEventListener('input', this.onKeyDown, { capture: true });
+        this.inputElement.addEventListener('paste', this.onPaste, { capture: true });
+      }
+      if (this.blurFormatStrategy) {
+        this.inputElement.addEventListener('blur', this.onBlur, { capture: true });
+        this.inputElement.addEventListener('focus', this.onFocus, { capture: true });
+      }
+    }
+  }
+  /**
+   * It removes the event listener from the input element.
+   */
+  destroy() {
+    if (this.inputElement) {
+      if (this.inputFormatStrategy) {
+        this.inputElement.removeEventListener('input', this.onKeyDown, { capture: true });
+        this.inputElement.removeEventListener('paste', this.onPaste, { capture: true });
+      }
+      if (this.blurFormatStrategy) {
+        this.inputElement.removeEventListener('blur', this.onBlur, { capture: true });
+        this.inputElement.removeEventListener('focus', this.onFocus, { capture: true });
+      }
+    }
+  }
+  /**
+   * Format string and update input field
+   */
+  formatValueAfterValueChange() {
+    void waitForComponentDidRender(this.host).then(() => {
+      this.formatValue(this.inputElement.value, 'change');
+    });
+  }
+  /**
+   * Format the value by input strategy and blur strategy when formatter config change.
+   */
+  formatValueAfterSetup() {
+    void waitForComponentDidRender(this.host).then(() => {
+      this.formatValue(this.inputElement.value, 'init');
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
+   */
+  /**
+   * The function `isOnFocus` checks if the input element is currently focused.
+   *
+   * @returns {boolean} The method `isOnFocus()` is returning a `Nullable<boolean>`, which means it can return
+   * either a boolean value or null. The method checks if the `inputElement` is currently focused and
+   * returns true if it is focused, false if it is not focused, or null if the `inputElement` is not
+   * found.
+   */
+  isOnFocus() {
+    return this.inputElement.matches(':focus');
+  }
+  /**
+   * Update input value
+   *
+   * @param {string} rawValue - the original value
+   * @param {string} maskedValue - masked value
+   */
+  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
+    if (maskedValue !== rawValue) {
+      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
+   *
+   * @param {string} rawValue - The original input value
+   * @param {Nullable<number>} caretPosition - The current input caret position
+   */
+  updateInputCaretPosition(rawValue, caretPosition) {
+    var _a, _b, _c;
+    const newCaretPosition = (_c = (_b = (_a = this.inputFormatStrategy).calculateCaretPosition) === null || _b === void 0 ? void 0 : _b.call(_a, rawValue, caretPosition)) !== null && _c !== void 0 ? _c : caretPosition;
+    if (isNonNullable(newCaretPosition)) {
+      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()
+], StringInputFormatterSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], StringInputFormatterSlimmer.prototype, "componentDidRender", null);
+
+export { StringInputFormatterSlimmer as S };

package/dist/esm/string-mask-strategy-49be41f0.js

@@ -0,0 +1,201 @@
+import { S as StringFormatStrategy } from './string-format-strategy.abstract-ec6d627b.js';
+import { i as isNonNullable } from './type-guard-23a08026.js';
+
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+class StringMaskStrategy extends StringFormatStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {MaskConfig} maskConfig - MaskConfig
+   * @param {boolean} overrideValue - Whether to override the value after blur, default is false
+   */
+  constructor(maskConfig, overrideValue = false) {
+    super();
+    /**
+     * The insert mode means adding some special character in the input string, will replace part of input string if insertMode set to false.
+     *
+     * @example
+     * mask: ****9999
+     * slot: 9
+     * value = 12345678
+     *
+     * insertMode=true The mask value should be ****1234
+     * insertMode=false The mask value should be ****5678
+     */
+    this.insertMode = true;
+    this.maskConfig = maskConfig;
+    this.overrideValue = overrideValue;
+    this.slotRegex = new RegExp(maskConfig.slot);
+    this.acceptRegex = new RegExp(maskConfig.accept, 'g');
+    this.insertMode = maskConfig.insertMode === false ? false : true;
+  }
+  /**
+   * A static method that generates a phone mask strategy based on the provided mask configuration.
+   *
+   * @param {boolean} overrideValue - The `overrideValue` parameter determines whether the component value should be overridden on blur.
+   * @returns {StringMaskStrategy} Returns an instance of the `StringMaskStrategy` class.
+   */
+  static getPhoneMaskStrategy(overrideValue = false) {
+    return new StringMaskStrategy(this.DEFAULT_PHONE_MASK_CONFIG, overrideValue);
+  }
+  /**
+   * A static method that generates a zipcode mask strategy based on the provided mask configuration.
+   *
+   * @param {boolean} overrideValue - The `overrideValue` parameter determines whether the component value should be overridden on blur.
+   * @returns {StringMaskStrategy} Returns an instance of the `StringMaskStrategy` class.
+   */
+  static getZipcodeMaskStrategy(overrideValue = false) {
+    return new StringMaskStrategy(this.DEFAULT_ZIPCODE_MASK_CONFIG, overrideValue);
+  }
+  /**
+   * A static method that generates a tax ID mask strategy based on the provided mask configuration.
+   *
+   * @param {boolean} overrideValue - The `overrideValue` parameter determines whether the component value should be overridden on blur.
+   * @returns {StringMaskStrategy} Returns an instance of the `StringMaskStrategy` class.
+   */
+  static getTaxIdMaskStrategy(overrideValue = false) {
+    return new StringMaskStrategy(this.DEFAULT_TAX_ID_MASK_CONFIG, overrideValue);
+  }
+  /**
+   * Set the mask config
+   *
+   * @param {MaskConfig} maskConfig - MaskConfig
+   */
+  setMaskConfig(maskConfig) {
+    this.maskConfig = maskConfig;
+  }
+  /**
+   * @inheritDoc
+   */
+  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();
+      rawValueArr.splice(caretPosition - exceededLength, exceededLength);
+      return rawValueArr.join('');
+    }
+    return this.replaceMaskWithMatchedInputSlots(input, this.getMatchedInputSlotValue(input));
+  }
+  /**
+   * Get the position of
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current position of caret
+   * @returns {Nullable<number>} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    if (!isNonNullable(caretPosition))
+      return null;
+    if (input.length > this.getLengthLimit()) {
+      const exceededLength = input.length - this.getLengthLimit();
+      return caretPosition - exceededLength;
+    }
+    const startValue = input.substring(0, caretPosition);
+    const maskedStartValue = this.format(startValue);
+    return caretPosition + (maskedStartValue.length - startValue.length);
+  }
+  /**
+   * This TypeScript function determines whether a component value should be overridden based on the mask configuration.
+   *
+   * @returns {boolean} The result overrideValue controls whether the component value same as the internal input value after the input blur
+   * return false if property overrideValue is not exist or set to true, return false if maskConfig is not exist
+   */
+  shouldOverrideComponentValueAfterBlur() {
+    if (this.overrideValue)
+      return true;
+    if (!this.maskConfig || this.maskConfig.overrideValue !== true) {
+      return false;
+    }
+    else {
+      return true;
+    }
+  }
+  /**
+   * The function shouldTriggerAtInit returns true if the maskConfig is defined and its triggerAtInit
+   * property is set to true, otherwise it returns false.
+   *
+   * @returns {boolean} The function shouldTriggerAtInit() returns a boolean value. If the condition is met
+   * (this.maskConfig is truthy and this.maskConfig.triggerAtInit is true), it returns true. Otherwise,
+   * it returns false.
+   */
+  shouldTriggerAtInit() {
+    if (!this.maskConfig || this.maskConfig.triggerAtInit !== true) {
+      return false;
+    }
+    else {
+      return true;
+    }
+  }
+  /**
+   * Get the length limit by mask
+   *
+   * @returns {number} the max limit length
+   */
+  getLengthLimit() {
+    return this.maskConfig.mask.length;
+  }
+  /**
+   * Given a string, return an array of all the digits in that string
+   *
+   * @param {string} input - The input string to be parsed.
+   * @returns {string[]} - An array of strings.
+   */
+  getMatchedInputSlotValue(input) {
+    return input.match(this.acceptRegex) || [];
+  }
+  /**
+   * Replace the mask with the matched input slots
+   *
+   * @param {string} input - The input string that is being typed by the user.
+   * @param {string[]} matchedInputSlot - an array of the input slots that were matched by the mask.
+   * @returns {string} The result string builder.
+   */
+  replaceMaskWithMatchedInputSlots(input, matchedInputSlot) {
+    const resultStringBuilder = [];
+    let resultStringBuilderCursor = -1;
+    for (let i = 0; i < this.maskConfig.mask.length; i++) {
+      const maskChar = this.maskConfig.mask.charAt(i);
+      if (this.slotRegex.test(maskChar) && matchedInputSlot.length) {
+        const inputSlot = matchedInputSlot.shift();
+        if (inputSlot) {
+          resultStringBuilder.push(inputSlot);
+          resultStringBuilderCursor = i;
+        }
+      }
+      else {
+        if (!this.insertMode) {
+          matchedInputSlot.shift();
+        }
+        if (input.charAt(i) === maskChar) {
+          resultStringBuilderCursor = i;
+        }
+        resultStringBuilder.push(maskChar);
+      }
+    }
+    //The replaceMode result length should be the origin input length
+    const resultLength = this.insertMode ? resultStringBuilderCursor + 1 : input.length;
+    return resultStringBuilder.join('').slice(0, resultLength);
+  }
+}
+StringMaskStrategy.DEFAULT_PHONE_MASK_CONFIG = {
+  mask: '(999) 999-9999',
+  slot: '9',
+  accept: /\d/g,
+};
+StringMaskStrategy.DEFAULT_ZIPCODE_MASK_CONFIG = {
+  mask: '99999',
+  slot: '9',
+  accept: /\d/g,
+};
+StringMaskStrategy.DEFAULT_TAX_ID_MASK_CONFIG = {
+  mask: '99-9999999',
+  slot: '9',
+  accept: /\d/g,
+};
+
+export { StringMaskStrategy as S };

package/dist/esm/style-formatter-ad0b2bac.js

@@ -0,0 +1,32 @@
+import { i as isNonNullable } from './type-guard-23a08026.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-37d4d850.js';
+
+/**
+ * Fomatter flex styles.
+ *
+ * @param {Nullable<ResponsiveType<FlexType>>} flex - flex
+ * @param {Nullable<ResponsiveType<FlexGrowType>>} flexGrow - flex-grow
+ * @param {Nullable<ResponsiveType<FlexShrinkType>>} flexShrink - flex-shrink
+ * @param {Nullable<ResponsiveType<FlexBasisType>>} flexBasis - flex-basis
+ * @returns {FormattedStylesType} - formatted styles
+ */
+function formatFlexStyles(flex, flexGrow, flexShrink, flexBasis) {
+  if (isNonNullable(flex)) {
+    return { flex: `${ResponsiveFormatFacade.formatCustom(flex)}` };
+  }
+  else {
+    return {
+      flexGrow: isNonNullable(flexGrow)
+        ? `${ResponsiveFormatFacade.formatCustom(flexGrow)}`
+        : undefined,
+      flexShrink: isNonNullable(flexShrink)
+        ? `${ResponsiveFormatFacade.formatCustom(flexShrink)}`
+        : undefined,
+      flexBasis: isNonNullable(flexBasis)
+        ? `${ResponsiveFormatFacade.formatCustom(flexBasis)}`
+        : undefined,
+    };
+  }
+}
+
+export { formatFlexStyles as f };

package/dist/esm/sub-state-notify-slimmer-ee8c417b.js

@@ -0,0 +1,79 @@
+import { V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { k as VegaInternalSubStatePull, j as VegaInternalSubStatePush } from './vega-internal-event-id-70bd893d.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+
+/**
+ * Sub state notify slimmer
+ */
+class SubStateNotifySlimmerBase extends VegaSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor({ propName }) {
+    super();
+    /**
+     * Checks if the input `host` matches the current `host` and `stateName` matches the current `propName`.
+     *
+     * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+     * @returns {boolean} a boolean value indicating whether the input is an acceptable table observer.
+     */
+    this.isAcceptableObserverPayload = (input) => {
+      return input.host === this.host && input.stateName === this.propName;
+    };
+    this.propName = propName;
+  }
+  /**
+   * Register the observer in connectedCallback
+   */
+  connectedCallback() {
+    this.subStateObserver = new Observer(this.isAcceptableObserverPayload.bind(this), (payload) => {
+      payload.callback(this.propValue);
+    });
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalSubStatePull), this.subStateObserver);
+  }
+  /**
+   * unregister the observer in disconnectedCallback
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalSubStatePull), this.subStateObserver);
+  }
+  /**
+   * Notify the children component which prop has been changed in the parent component
+   */
+  subStateNotify() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalSubStatePush), {
+      host: this.host,
+      stateName: this.propName,
+      value: this.propValue,
+    });
+  }
+}
+
+/**
+ * Create dynamic subState notify slimmer
+ *
+ * @param {ClassPrototype} mapFromClass - It represents the class that you want to map from.
+ * @param {string} propName - The parent component prop name
+ * @param {string} watchMethodName - The watch method name of prop change
+ * @returns {SubStateNotifySlimmerBase} - SubState notify slimmer
+ */
+function createSubStateNotifySlimmer(mapFromClass, propName, watchMethodName) {
+  const methodsMap = [
+    { mapFrom: 'connectedCallback', mapTo: 'connectedCallback' },
+    { mapFrom: 'disconnectedCallback', mapTo: 'disconnectedCallback' },
+  ];
+  if (watchMethodName) {
+    methodsMap.push({ mapFrom: watchMethodName, mapTo: 'subStateNotify' });
+  }
+  return createDynamicSlimmer(mapFromClass, SubStateNotifySlimmerBase, [
+    { mapFrom: 'host', mapTo: 'host' },
+    { mapFrom: propName, mapTo: 'propValue' },
+  ], methodsMap, [
+    {
+      propName: propName,
+    },
+  ]);
+}
+
+export { createSubStateNotifySlimmer as c };