@globalpayments/vega 2.45.0 → 2.47.0

package/dist/cjs/rich-text-editor-required-rule-649ef4b4.js

@@ -0,0 +1,64 @@
+'use strict';
+
+const contentState = require('./content-state-605de6a3.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
+
+/**
+ * A rule that checks if the input range is empty or not
+ *
+ * @augments {InternalFormFieldValidationRule<string[]>}
+ */
+class RichTextEditorRequiredRule extends internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule {
+  /**
+   * It checks if the input is a valid value.
+   *
+   * @param {string[]} input - The value of the input field.
+   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    var _a, _b;
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Invalid value ${input} for rich text editor`);
+    }
+    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 1 || // isValid: true when the length is greater than 1 to keep the same behavior as vega-textarea
+      (((_b = input === null || input === void 0 ? void 0 : input.blocks) === null || _b === void 0 ? void 0 : _b.length) === 1 && input.blocks.some((block) => block.isNotEmpty()));
+    return {
+      isValid,
+      message: isValid ? '' : 'This field is required',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * If the input is undefined or null, return true, otherwise return true if the input is a VegaRTEContent.
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean.
+   */
+  isAcceptedInputType(input) {
+    if (input === undefined || input === null)
+      return true;
+    return input instanceof contentState.VegaRTEContent;
+  }
+}
+
+exports.RichTextEditorRequiredRule = RichTextEditorRequiredRule;

package/dist/cjs/static-subject-title-1d23c102.js

@@ -0,0 +1,79 @@
+'use strict';
+
+/**
+ * A subject class is used for register by observer
+ */
+class StaticSubject {
+  /**
+   * It takes a subject title and returns a SubjectTitle object
+   *
+   * @param {SubjectTitle} title - The title of the subject.
+   */
+  constructor(title) {
+    this.title = title;
+  }
+  /**
+   * Get the title of the subject
+   *
+   * @returns {string} The title of the subject.
+   */
+  getDescription() {
+    return this.title;
+  }
+}
+
+const SIDENAV_LINK_SELECTED_TOPIC = new StaticSubject('SIDENAV_LINK_SELECTED_TOPIC');
+const LEFT_NAV_LINK_SELECTED_TOPIC = new StaticSubject('LEFT_NAV_LINK_SELECTED_TOPIC');
+const ACCORDION_EXPAND_TOPIC = new StaticSubject('ACCORDION_EXPAND_TOPIC');
+const FORM_RESET_OPERATION_TRIGGERED = new StaticSubject('FORM_RESET_OPERATION_TRIGGERED');
+const FORM_FIELD_ELEMENT_DISCONNECTED = new StaticSubject('FORM_FIELD_ELEMENT_DISCONNECTED');
+const FORM_SUBMIT = new StaticSubject('FORM_SUBMIT');
+const FORM_RESET = new StaticSubject('FORM_RESET');
+const RADIO_GROUP_DISABLED_CHANGE = new StaticSubject('RADIO_GROUP_DISABLED_CHANGE');
+const CHECKBOX_GROUP_DISABLED_CHANGE = new StaticSubject('CHECKBOX_GROUP_DISABLED_CHANGE');
+const FORM_FIELD_PENDING_VALID_CHANGE = new StaticSubject('FORM_FIELD_PENDING_VALID_CHANGE');
+const TAB_PANEL_ADD_OR_DEL_TO_GROUP = new StaticSubject('TAB_PANEL_ADD_OR_DEL_TO_GROUP');
+const TABLE_EXPAND_ROW = new StaticSubject('TABLE_EXPAND_ROW');
+const TABLE_ROW_SELECTION = new StaticSubject('TABLE_ROW_SELECTION');
+const TABLE_ROW_SELECTION_ALL = new StaticSubject('TABLE_ROW_SELECTION_ALL');
+const TABLE_ROW_CLICK = new StaticSubject('TABLE_ROW_CLICK');
+const FIELD_ERROR_MESSAGE_CHANGE = new StaticSubject('FIELD_ERROR_MESSAGE_CHANGE');
+const DROPDOWN_ITEM_CLICK = new StaticSubject('DROPDOWN_ITEM_CLICK');
+const CHECKBOX_VALUE_CHANGE = new StaticSubject('CHECKBOX_VALUE_CHANGE');
+const RADIO_VALUE_CHANGE = new StaticSubject('RADIO_VALUE_CHANGE');
+const FORM_ELEMENT_VALUE_CHANGE = new StaticSubject('FORM_ELEMENT_VALUE_CHANGE');
+const FORM_ELEMENT_VALIDATE = new StaticSubject('FORM_EMEMENT_VALIDATE');
+const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');
+const UPDATE_TRANSLATION = new StaticSubject('UPDATE_TRANSLATION');
+const DARK_MODE_CHANGE = new StaticSubject('DARK_MODE_CHANGE');
+const SHADOW_ROOT_ELEMENT_SCROLLING = new StaticSubject('SHADOW_ROOT_ELEMENT_SCROLLING');
+const FLAG_ICON_LOADED = new StaticSubject('FLAG_ICON_LOADED');
+const GP_NEW_BRAND_CHANGE = new StaticSubject('GP_NEW_BRAND_CHANGE');
+
+exports.ACCORDION_EXPAND_TOPIC = ACCORDION_EXPAND_TOPIC;
+exports.CHECKBOX_GROUP_DISABLED_CHANGE = CHECKBOX_GROUP_DISABLED_CHANGE;
+exports.CHECKBOX_VALUE_CHANGE = CHECKBOX_VALUE_CHANGE;
+exports.DARK_MODE_CHANGE = DARK_MODE_CHANGE;
+exports.DROPDOWN_ITEM_CLICK = DROPDOWN_ITEM_CLICK;
+exports.FIELD_ERROR_MESSAGE_CHANGE = FIELD_ERROR_MESSAGE_CHANGE;
+exports.FLAG_ICON_LOADED = FLAG_ICON_LOADED;
+exports.FORM_ELEMENT_VALIDATE = FORM_ELEMENT_VALIDATE;
+exports.FORM_ELEMENT_VALUE_CHANGE = FORM_ELEMENT_VALUE_CHANGE;
+exports.FORM_FIELD_ELEMENT_DISCONNECTED = FORM_FIELD_ELEMENT_DISCONNECTED;
+exports.FORM_FIELD_PENDING_VALID_CHANGE = FORM_FIELD_PENDING_VALID_CHANGE;
+exports.FORM_RESET = FORM_RESET;
+exports.FORM_RESET_OPERATION_TRIGGERED = FORM_RESET_OPERATION_TRIGGERED;
+exports.FORM_SUBMIT = FORM_SUBMIT;
+exports.GP_NEW_BRAND_CHANGE = GP_NEW_BRAND_CHANGE;
+exports.LEFT_NAV_LINK_SELECTED_TOPIC = LEFT_NAV_LINK_SELECTED_TOPIC;
+exports.RADIO_GROUP_DISABLED_CHANGE = RADIO_GROUP_DISABLED_CHANGE;
+exports.RADIO_VALUE_CHANGE = RADIO_VALUE_CHANGE;
+exports.SELECTION_TILE_VALUE_CHANGE = SELECTION_TILE_VALUE_CHANGE;
+exports.SHADOW_ROOT_ELEMENT_SCROLLING = SHADOW_ROOT_ELEMENT_SCROLLING;
+exports.SIDENAV_LINK_SELECTED_TOPIC = SIDENAV_LINK_SELECTED_TOPIC;
+exports.TABLE_EXPAND_ROW = TABLE_EXPAND_ROW;
+exports.TABLE_ROW_CLICK = TABLE_ROW_CLICK;
+exports.TABLE_ROW_SELECTION = TABLE_ROW_SELECTION;
+exports.TABLE_ROW_SELECTION_ALL = TABLE_ROW_SELECTION_ALL;
+exports.TAB_PANEL_ADD_OR_DEL_TO_GROUP = TAB_PANEL_ADD_OR_DEL_TO_GROUP;
+exports.UPDATE_TRANSLATION = UPDATE_TRANSLATION;

package/dist/cjs/string-input-formatter-slimmer-56a2401f.js

@@ -0,0 +1,434 @@
+'use strict';
+
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const vegaInternalEventId = require('./vega-internal-event-id-dc866d43.js');
+const index = require('./index-ec9a1f36.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' && typeGuard.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 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.
+     *
+     * @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.slotRegex = new RegExp(maskConfig.slot);
+    this.acceptRegex = new RegExp(maskConfig.accept, 'g');
+    this.insertMode = maskConfig.insertMode === false ? false : true;
+  }
+  /**
+   * @inheritDoc
+   */
+  format(input, inputStatus) {
+    const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
+    if (input.length > this.getLengthLimit() && typeGuard.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 (!typeGuard.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.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.PHONE_MASK = new StringMaskStrategy({
+  mask: '(999) 999-9999',
+  slot: '9',
+  accept: /\d/g,
+});
+StringMaskStrategy.ZIPCODE_MASK = new StringMaskStrategy({
+  mask: '99999',
+  slot: '9',
+  accept: /\d/g,
+});
+StringMaskStrategy.TAX_ID_MASK = new StringMaskStrategy({
+  mask: '99-9999999',
+  slot: '9',
+  accept: /\d/g,
+});
+
+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 globalSlimmerRegistry.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.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalPasteEvent), e);
+      }
+    };
+  }
+  /**
+   * Component lifecycle - componentDidRender
+   */
+  componentDidRender() {
+    changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 the value by input strategy and blur strategy when formatter config change.
+   */
+  formatValueAfterSetup() {
+    void index.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 (typeGuard.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([
+  globalSlimmerRegistry.MapToComponentField()
+], StringInputFormatterSlimmer.prototype, "host", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], StringInputFormatterSlimmer.prototype, "componentDidRender", null);
+
+exports.StringFormatStrategy = StringFormatStrategy;
+exports.StringInputFormatterSlimmer = StringInputFormatterSlimmer;
+exports.StringMaskStrategy = StringMaskStrategy;

package/dist/cjs/style-formatter-b735d506.js

@@ -0,0 +1,34 @@
+'use strict';
+
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const responsiveFormatFacade = require('./responsive-format-facade-3542fc47.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 (typeGuard.isNonNullable(flex)) {
+    return { flex: `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(flex)}` };
+  }
+  else {
+    return {
+      flexGrow: typeGuard.isNonNullable(flexGrow)
+        ? `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(flexGrow)}`
+        : undefined,
+      flexShrink: typeGuard.isNonNullable(flexShrink)
+        ? `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(flexShrink)}`
+        : undefined,
+      flexBasis: typeGuard.isNonNullable(flexBasis)
+        ? `${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(flexBasis)}`
+        : undefined,
+    };
+  }
+}
+
+exports.formatFlexStyles = formatFlexStyles;

package/dist/cjs/sub-state-notify-slimmer-b16c9094.js

@@ -0,0 +1,81 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const observer = require('./observer-f49483e8.js');
+const vegaInternalEventId = require('./vega-internal-event-id-dc866d43.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+
+/**
+ * Sub state notify slimmer
+ */
+class SubStateNotifySlimmerBase extends globalSlimmerRegistry.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.Observer(this.isAcceptableObserverPayload.bind(this), (payload) => {
+      payload.callback(this.propValue);
+    });
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalSubStatePull), this.subStateObserver);
+  }
+  /**
+   * unregister the observer in disconnectedCallback
+   */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalSubStatePull), this.subStateObserver);
+  }
+  /**
+   * Notify the children component which prop has been changed in the parent component
+   */
+  subStateNotify() {
+    changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 dynamicSlimmer.createDynamicSlimmer(mapFromClass, SubStateNotifySlimmerBase, [
+    { mapFrom: 'host', mapTo: 'host' },
+    { mapFrom: propName, mapTo: 'propValue' },
+  ], methodsMap, [
+    {
+      propName: propName,
+    },
+  ]);
+}
+
+exports.createSubStateNotifySlimmer = createSubStateNotifySlimmer;