@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/esm/{responsiveFormatFacade-949f8957.js → responsiveFormatFacade-e91e14ac.js}

@@ -1,7 +1,8 @@
-import { m as isResponsiveType, n as isBreakpointsForPrefixType, i as isSpacingTokenType, o as isDirectionalSpacingType, d as Spacing, p as isGridColumnType, q as isGridRowType, r as isTranslocationType, s as isFlexDirectionType, t as isFlexAlignItemType, u as isFlexJustifyContentType, v as isBoxDisplayType } from './typeGuard-b2943363.js';
+import { u as isResponsiveType, v as isBreakpointsForPrefixType, p as isSpacingTokenType, w as isDirectionalSpacingType, h as Spacing$1, x as isGridColumnType, y as isGridRowType, z as isTranslocationType, A as isFlexDirectionType, D as isFlexAlignItemType, E as isFlexJustifyContentType, G as isBoxDisplayType, q as isBorderRadiusTokenType, H as isDirectionalBorderRadiusType, B as BorderRadius } from './typeGuard-5e282437.js';
 import { L as LogUtility } from './log-a824be80.js';
-import { g as getCurrentBreakpoint, e as createCompleteResponsiveMap, F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as BoxDisplay } from './breakpoints-3152fa9c.js';
+import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './breakpoints-900a4c99.js';
 import { i as isValidPercentage } from './number-400b3bf2.js';
+import { F as FlexDirections, a as FlexAlignItem, b as FlexJustifyContent, c as BoxDisplay } from './ui-535c5fb3.js';
 
 /**
  * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
@@ -64,7 +65,7 @@ class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {
         .join(' ');
     }
     else {
-      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, Spacing);
+      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, Spacing$1);
       return '';
     }
   }
@@ -105,7 +106,7 @@ class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {
         .join(' ');
     }
     else {
-      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, Spacing);
+      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, Spacing$1);
       return '';
     }
   }
@@ -131,7 +132,7 @@ class ResponsiveGapFormatter extends ResponsiveClassStringFormatter {
       return `${prefix}v-gap-${input}`;
     }
     else {
-      LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, Spacing);
+      LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, Spacing$1);
       return '';
     }
   }
@@ -498,6 +499,128 @@ class ResponsiveBoxDisplayFormatter extends ResponsiveClassStringFormatter {
 }
 const ResponsiveBoxDisplayFormatter$1 = new ResponsiveBoxDisplayFormatter();
 
+/* This file is generated by vega-design 2.0.71 */ 
+const Spacing = {
+	"0": 0,
+	"size-4": 4,
+	"size-8": 8,
+	"size-12": 12,
+	"size-16": 16,
+	"size-20": 20,
+	"size-24": 24,
+	"size-32": 32,
+	"size-40": 40,
+	"size-48": 48,
+	"size-64": 64,
+	"size-72": 72,
+	"size-80": 80,
+	"size-112": 112,
+	"size-2": 2
+};
+
+/**
+ * A class for format WidthType and HeightType
+ *
+ * @augments ResponsiveWidthAndHeightFormatter
+ */
+class ResponsiveWidthAndHeightFormatter {
+  /**
+   * The function takes a responsive type input, determines the current breakpoint, and formats the width
+   * and height based on the breakpoint.
+   *
+   * @param {ResponsiveType<WidthType | HeightType>} input - The `input` parameter in the `format` function is of type `ResponsiveType<WidthType |
+   * HeightType>`. This means that it can accept values that are either of type `WidthType` or
+   * `HeightType` within a responsive context.
+   * @returns {string} The `format` function returns a string value.
+   */
+  format(input) {
+    const breakpoint = getCurrentBreakpoint();
+    if (isResponsiveType(input)) {
+      input = createCompleteResponsiveMap(input);
+      return this.formatWidthAndHeight(input[breakpoint]);
+    }
+    else {
+      return this.formatWidthAndHeight(input);
+    }
+  }
+  /**
+   * The function `formatWidthAndHeight` takes an input of type `WidthType` or `HeightType` and returns a
+   * string representation with 'px' appended if the input is a number or a string that can be converted
+   * to a number, otherwise it returns the input as is.
+   *
+   * @param {WidthType | HeightType} input - The `input` parameter in the `formatWidthAndHeight` function
+   * can be either a `number`, a `string` that can be converted to a number, or a key from the `Spacing`
+   * object.
+   * @returns {string} The `formatWidthAndHeight` function takes an input of type `WidthType` or `HeightType` and
+   * returns a string.
+   */
+  formatWidthAndHeight(input) {
+    if (!isNaN(Number(input))) {
+      return `${input}px`;
+    }
+    else if (Object.keys(Spacing).includes(input)) {
+      return `${Spacing[input]}px`;
+    }
+    else {
+      return input;
+    }
+  }
+}
+const ResponsiveWidthAndHeightFormatter$1 = new ResponsiveWidthAndHeightFormatter();
+
+const BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP = {
+  'top': 't',
+  'right': 'r',
+  'bottom': 'b',
+  'left': 'l',
+  'top-left': 'tl',
+  'top-right': 'tr',
+  'bottom-left': 'bl',
+  'bottom-right': 'br',
+};
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter {
+  /**
+   * Given a border-radius type, return a string of CSS classes that can be used to apply the border-radius to an element
+   *
+   * @param {CornersType} input - CornersType
+   * @param {BreakpointsForPrefixType} [breakpoint] - Breakpoints for prefix of the class
+   * @returns {string} - A string of CSS classes.
+   */
+  formatToken(input, breakpoint) {
+    const prefix = isBreakpointsForPrefixType(breakpoint) ? `${breakpoint}:` : '';
+    if (isBorderRadiusTokenType(input)) {
+      return `${prefix}v-${this.transformRoundedNoneAndFill(input)}`;
+    }
+    else if (isDirectionalBorderRadiusType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-rounded-${BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${this.transformRoundedNoneAndFill(input[direction]).replace('rounded-', '')}`;
+      })
+        .join(' ');
+    }
+    else {
+      LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, BorderRadius);
+      return '';
+    }
+  }
+  /**
+   * The function `transformRoundedNoneAndFill` replaces 'rounded-none' with 'rounded-0' and
+   * 'rounded-full' with 'rounded-9999'.
+   *
+   * @param {string} rounded - The `rounded` parameter is a string that represents a CSS class related to the rounding of elements
+   * @returns {string} The transformed value .
+   */
+  transformRoundedNoneAndFill(rounded) {
+    return rounded.replace('rounded-none', 'rounded-0').replace('rounded-full', 'rounded-9999');
+  }
+}
+const ResponsiveBorderRadiusFormatter$1 = new ResponsiveBorderRadiusFormatter();
+
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -542,6 +665,10 @@ class ResponsiveFormatFacade {
         return ResponsiveFlexJustifyContentFormatter$1.format(input);
       case 'boxDisplay':
         return ResponsiveBoxDisplayFormatter$1.format(input);
+      case 'widthAndHeight':
+        return ResponsiveWidthAndHeightFormatter$1.format(input);
+      case 'corners':
+        return ResponsiveBorderRadiusFormatter$1.format(input);
       default:
         throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
     }

package/dist/esm/{staticSubjectTitle-ba738b9d.js → staticSubjectTitle-bb1e9570.js}

@@ -20,7 +20,6 @@ class StaticSubject {
   }
 }
 
-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');
@@ -42,6 +41,5 @@ 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 FIELD_ERROR_STATE_CHANGE = new StaticSubject('FIELD_ERROR_STATE_CHANGE');
 
-export { ACCORDION_EXPAND_TOPIC as A, CHECKBOX_VALUE_CHANGE as C, DROPDOWN_ITEM_CLICK as D, FORM_SUBMIT as F, LEFT_NAV_LINK_SELECTED_TOPIC as L, RADIO_VALUE_CHANGE as R, SIDENAV_LINK_SELECTED_TOPIC as S, TAB_PANEL_ADD_OR_DEL_TO_GROUP as T, FORM_RESET as a, FIELD_ERROR_STATE_CHANGE as b, FORM_ELEMENT_VALUE_CHANGE as c, CHECKBOX_GROUP_DISABLED_CHANGE as d, RADIO_GROUP_DISABLED_CHANGE as e, TABLE_ROW_SELECTION as f, TABLE_ROW_SELECTION_ALL as g, TABLE_ROW_CLICK as h, FORM_FIELD_PENDING_VALID_CHANGE as i, FORM_FIELD_ELEMENT_DISCONNECTED as j, FORM_RESET_OPERATION_TRIGGERED as k, FIELD_ERROR_MESSAGE_CHANGE as l, FORM_ELEMENT_VALIDATE as m, TABLE_EXPAND_ROW as n, SUB_STATE_CHANGE as o };
+export { ACCORDION_EXPAND_TOPIC as A, CHECKBOX_VALUE_CHANGE as C, DROPDOWN_ITEM_CLICK as D, FORM_SUBMIT as F, LEFT_NAV_LINK_SELECTED_TOPIC as L, RADIO_VALUE_CHANGE as R, SUB_STATE_CHANGE as S, TAB_PANEL_ADD_OR_DEL_TO_GROUP as T, FORM_RESET as a, FORM_ELEMENT_VALUE_CHANGE as b, FORM_FIELD_PENDING_VALID_CHANGE as c, FORM_FIELD_ELEMENT_DISCONNECTED as d, FORM_RESET_OPERATION_TRIGGERED as e, FIELD_ERROR_MESSAGE_CHANGE as f, FORM_ELEMENT_VALIDATE as g, CHECKBOX_GROUP_DISABLED_CHANGE as h, RADIO_GROUP_DISABLED_CHANGE as i, TABLE_EXPAND_ROW as j, TABLE_ROW_SELECTION as k, TABLE_ROW_SELECTION_ALL as l, TABLE_ROW_CLICK as m };

package/dist/esm/stringMaskStrategy-c463fad7.js

@@ -0,0 +1,180 @@
+import { M as isNonNullable } from './typeGuard-5e282437.js';
+
+/**
+ * A class for formatting value of input element given the StringFormatStrategy
+ *
+ * @requires StringFormatStrategy
+ */
+class StringInputFormatter {
+  /**
+   * The constructor takes an input element and a format strategy
+   *
+   * @param {HTMLInputElement} inputElement - The input element that will be used to listen to the user's keystrokes.
+   * @param {StringFormatStrategy} formatStrategy - A strategy function that takes a string and returns a string.
+   */
+  constructor(inputElement, formatStrategy) {
+    /**
+     * A function update the value of the input element by formatStrategy 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
+      const maskedValue = this.formatStrategy.format(rawValue, caretPosition);
+      this.updateInputValue(rawValue, maskedValue);
+      this.updateInputCaretPosition(rawValue, caretPosition);
+    };
+    this.inputElement = inputElement;
+    this.formatStrategy = formatStrategy;
+    this.inputElement.addEventListener('input', this.onKeyDown, { capture: true });
+  }
+  /**
+   * It removes the event listener from the input element.
+   */
+  destroy() {
+    this.inputElement.removeEventListener('input', this.onKeyDown, { capture: true });
+  }
+  /**
+   * Update input value
+   *
+   * @param {string} rawValue - the original value
+   * @param {string} maskedValue - masked value
+   */
+  updateInputValue(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;
+    }
+  }
+  /**
+   * 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.formatStrategy).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);
+    }
+  }
+}
+
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+class StringMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {MaskConfig} maskConfig - MaskConfig
+   */
+  constructor(maskConfig) {
+    this.maskConfig = maskConfig;
+    this.slotRegex = new RegExp(maskConfig.slot);
+    this.acceptRegex = new RegExp(maskConfig.accept, 'g');
+  }
+  /**
+   * 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.
+   */
+  format(input, 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 {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);
+  }
+  /**
+   * 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 (input.charAt(i) === maskChar) {
+          resultStringBuilderCursor = i;
+        }
+        resultStringBuilder.push(maskChar);
+      }
+    }
+    return resultStringBuilder.join('').slice(0, resultStringBuilderCursor + 1);
+  }
+}
+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,
+});
+
+export { StringInputFormatter as S, StringMaskStrategy as a };

package/dist/esm/{subStateObserverSlimmer-7b44f3ec.js → subStateObserverSlimmer-450d79de.js}

@@ -1,10 +1,47 @@
-import { M as MapToComponentField, V as VegaSlimmer } from './vega-slimmer-d63e92d9.js';
-import { M as MapToComponentMethod } from './map-to-component-method-4e36ea1f.js';
-import './global-slimmer-registry-f1dec4a2.js';
-import { O as Observer } from './observer-3959f9dd.js';
+import './global-slimmer-registry-b91c742d.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-c8ad78de.js';
+import { V as VegaSlimmer, a as MapToComponentField, M as MapToComponentMethod } from './vega-slimmer-ce2e45d1.js';
 import { C as ChangeManager } from './changeManager-935d420b.js';
-import { o as SUB_STATE_CHANGE } from './staticSubjectTitle-ba738b9d.js';
-import { f as findParent } from './ui-608b4032.js';
+import { S as SUB_STATE_CHANGE } from './staticSubjectTitle-bb1e9570.js';
+import { O as Observer } from './eventEmitSlimmer-d605ac81.js';
+import { f as findParent } from './ui-6e5294cb.js';
+
+/**
+ * Sub state notify slimmer
+ */
+class SubStateNotifySlimmerBase extends VegaSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor({ propName }) {
+    super();
+    this.propName = propName;
+  }
+  /**
+   * Notify the children component which prop has been changed in the parent component
+   */
+  subStateNotify() {
+    ChangeManager.notify(SUB_STATE_CHANGE, {
+      host: this.host,
+      stateName: this.propName,
+      value: this.host[this.propName],
+    });
+  }
+}
+
+/**
+ * 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) {
+  return createDynamicSlimmer(mapFromClass, SubStateNotifySlimmerBase, [{ mapFrom: 'host', mapTo: 'host' }], [{ mapFrom: watchMethodName, mapTo: 'subStateNotify' }], [
+    {
+      propName: propName,
+    },
+  ]);
+}
 
 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;
@@ -97,4 +134,4 @@ __decorate([
   MapToComponentMethod('componentWillLoad')
 ], SubStateObserverSlimmer.prototype, "componentWillLoad", null);
 
-export { SubStateObserverSlimmer as S };
+export { SubStateObserverSlimmer as S, createSubStateNotifySlimmer as c };