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

package/dist/cjs/designToken-a55d5476.js

@@ -0,0 +1,460 @@
+'use strict';
+
+const typeGuard = require('./typeGuard-70b919b6.js');
+const breakpoints = require('./breakpoints-97c1f5c8.js');
+const log = require('./log-5d8066e0.js');
+const responsiveFormatFacade = require('./responsiveFormatFacade-8518443e.js');
+const typography = require('./typography-3d2ba97d.js');
+
+/**
+ * StateVariantFormatter: Format state token to CSS styles
+ */
+class StateVariantFormatter {
+  /**
+   * The function `format` takes an input state variant type and returns formatted CSS styles based on
+   * the input.
+   *
+   * @param {StateVariantType} input - The `format` function takes an `input` parameter of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that the `input` parameter
+   * should be an object that contains styles for different states, where the keys are state names and
+   * the values are the corresponding styles
+   * @returns {string} The `format` function returns a string that contains CSS styles based on the input
+   * provided. If the input is determined to be a state variant token type, the function generates CSS
+   * styles for each state in the input and returns them joined by newlines. If the input is not a state
+   * variant token type, the function generates CSS styles for the default state and returns them.
+   */
+  format(input) {
+    if (typeGuard.isStateVariantTokenType(input)) {
+      const stateStyles = [];
+      this.getStates().forEach((state) => {
+        const style = this.formatToken(input[state]);
+        if (style) {
+          stateStyles.push(`:host${state === 'default' ? '' : `(:${state})`}{\n\t${style}\n}`);
+        }
+      });
+      return stateStyles.join('\n');
+    }
+    else {
+      const style = this.formatToken(input);
+      return `:host{\n\t${style}\n}`;
+    }
+  }
+}
+
+/**
+ * The `StateBackgroundColorFormatter` class in TypeScript formats background color tokens
+ * and handles different CSS states.
+ */
+class StateBackgroundColorFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'hover', 'active', 'focus-visible'];
+  }
+  /**
+   * The function `formatToken` takes a `BackgroundColorsTokenType` input, checks if it is a valid
+   * background color token type, and returns the corresponding CSS background color value or logs a
+   * warning if the input is invalid.
+   *
+   * @param {BackgroundColorsTokenType} input - The `input` parameter is of type
+   * `BackgroundColorsTokenType`, which is used to represent different background color tokens.
+   * @returns {string} The `formatToken` function takes a `BackgroundColorsTokenType` input and checks if it is a
+   * valid background color token type. If it is valid, it retrieves the corresponding color value from
+   * the `BackgroundColorMap` and returns a CSS style string with the background color. If the input is
+   * not valid, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input) {
+    if (typeGuard.isBackgroundColorTokenType(input)) {
+      const tokenValue = typeGuard.BackgroundColorMap[input];
+      return `background-color: ${tokenValue};`;
+    }
+    else {
+      log.LogUtility.warn(`The backgroundColor value ${input} is invalid, it must be a value of: `, typeGuard.BackgroundColors);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of objects of type CssStatesType, which represents the states stored in the
+   * variable this.states.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBackgroundColorFormatter$1 = new StateBackgroundColorFormatter();
+
+/**
+ * The `StateBorderColorFormatter` class in TypeScript formats border color tokens based on
+ * input values and provides an array of CSS states.
+ */
+class StateBorderColorFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * The function `formatToken` takes a BorderColorsTokenType input, checks if it is a valid border
+   * color token type, and returns the corresponding CSS border-color value or logs a warning if the
+   * input is invalid.
+   *
+   * @param {BorderColorsTokenType} input - BorderColorsTokenType
+   * @returns {string} The `formatToken` function returns a string that represents a CSS style for border color
+   * based on the input `BorderColorsTokenType`. If the input is a valid border color token type, it
+   * retrieves the corresponding value from the `BorderColorMap` and returns a CSS style string with the
+   * border color value. If the input is not a valid border color token type, it logs a warning message
+   * and returns an
+   */
+  formatToken(input) {
+    if (typeGuard.isBorderColorTokenType(input)) {
+      const tokenValue = typeGuard.BorderColorMap[input];
+      return `border-color: ${tokenValue};`;
+    }
+    else {
+      log.LogUtility.warn(`The borderColor value ${input} is invalid, it must be a value of: `, typeGuard.BorderColors);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]} An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBorderColorFormatter$1 = new StateBorderColorFormatter();
+
+/**
+ * The `StateShadowFormatter` class in TypeScript formats a CSS `box-shadow` property based on a
+ * ShadowsTokenType input and provides an array of CssStatesType objects.
+ */
+class StateShadowFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover'];
+  }
+  /**
+   * The `formatToken` function in TypeScript takes a ShadowsTokenType input, validates it, and returns a
+   * formatted CSS box-shadow property string or logs a warning if the input is invalid.
+   *
+   * @param {ShadowsTokenType} input - ShadowsTokenType
+   * @returns {string} The `formatToken` function takes a `ShadowsTokenType` input and returns a CSS `box-shadow`
+   * property with the corresponding value from the `ShadowMap` object. If the input is not a valid
+   * `ShadowsTokenType`, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input) {
+    if (typeGuard.isShadowsTokenType(input)) {
+      const tokenValue = typeGuard.ShadowMap[input];
+      return `box-shadow: ${tokenValue};`;
+    }
+    else {
+      log.LogUtility.warn(`The shadow value ${input} is invalid, it must be a value of: `, typeGuard.Shadows);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]}An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateShadowFormatter$1 = new StateShadowFormatter();
+
+/**
+ * The `StateBorderFormatter` class in TypeScript formats border token values into CSS border properties
+ * and provides state information.
+ */
+class StateBorderFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover', 'active'];
+  }
+  /**
+   * The `formatToken` function in TypeScript formats a border token value into a CSS border property
+   * string or logs a warning if the input is invalid.
+   *
+   * @param {BordersTokenType} input - The `formatToken` function takes a `BordersTokenType` as input
+   * and returns a formatted string representing a CSS border property based on the input token value.
+   * If the input is a valid border token type, it retrieves the corresponding CSS value from the
+   * `BorderMap` and returns it in a `border
+   * @returns {string} The `formatToken` function returns a string that represents a CSS border property based on
+   * the input `BordersTokenType`. If the input is a valid border token type, it retrieves the
+   * corresponding value from the `BorderMap` and returns a CSS `border` property string. If the input
+   * is not a valid border token type, it logs a warning message using `LogUtility.warn` and returns an
+   * empty
+   */
+  formatToken(input) {
+    if (typeGuard.isBorderTokenType(input)) {
+      const tokenValue = typeGuard.BorderMap[input];
+      return `border: ${tokenValue};`;
+    }
+    else {
+      log.LogUtility.warn(`The border value ${input} is invalid, it must be a value of: `, typeGuard.Borders);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[] } An array of objects of type CssStatesType, which represents the states.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+const StateBorderFormatter$1 = new StateBorderFormatter();
+
+/**
+ * The `StateFormatFacade` class in TypeScript provides a method to format different types of
+ * state variants based on a specified flag.
+ */
+class StateFormatFacade {
+  /**
+   * The function `format` takes in an input and a flag, then formats the input based on the flag
+   * provided.
+   *
+   * @param {StateVariantType} input - The `input` parameter in the `format` function is of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that it expects an input value
+   * that corresponds to the specified flag and state. The `Flag` type is a key of
+   * `ManagedStateScopeInput
+   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `format` function is a key of the
+   * `ManagedStateScopeInput` type. It is used to determine which formatting logic to apply based on the
+   * specific flag provided. The function then switches on the flag value to select the appropriate
+   * formatting logic for that particular flag.
+   * @returns {string} The `format` function takes in an input of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>` and a flag of type `Flag`. It then switches
+   * on the flag value and returns a formatted string based on the flag value. The return value depends
+   * on the flag value:
+   */
+  format(input, flag) {
+    switch (flag) {
+      case 'backgroundColor':
+        return StateBackgroundColorFormatter$1.format(input);
+      case 'borderColor':
+        return StateBorderColorFormatter$1.format(input);
+      case 'shadow':
+        return StateShadowFormatter$1.format(input);
+      case 'border':
+        return StateBorderFormatter$1.format(input);
+      default:
+        throw new Error(`Invalid flag ${flag} passed into StateFormatFacade`);
+    }
+  }
+}
+const StateFormatFacade$1 = new StateFormatFacade();
+
+/**
+ * It logs a warning message to the console.
+ *
+ * @param {string} tokenType - The name of the token type.
+ * @param {unknown} value - The value that was passed into the token.
+ * @param {unknown} availableOptions - The available options for the token type.
+ */
+function logInvalidValueMessage(tokenType, value, availableOptions) {
+  log.LogUtility.warn(`The ${tokenType} value ${value} is invalid, it must be a value of: `, availableOptions);
+}
+/**
+ * Given a token and an array of modes, return a string with the token formatted with the appropriate mode
+ *
+ * @param {string} token - The name of the token.
+ * @param {TokenMode[]} modes - TokenMode[]
+ * @returns {string} The formatted token.
+ */
+function formatTokenWithModes(token, modes) {
+  let formattedToken = '';
+  if (modes.includes('dark')) {
+    formattedToken += ` dark:v-dark-${token}`;
+  }
+  return formattedToken;
+}
+/**
+ * If the token is a valid spacing token, return the CSS class string. Otherwise, log an error message
+ *
+ * @param {unknown} token - The value that was passed into the function.
+ * @returns {string} The the CSS class string of the padding token.
+ */
+function formatAndValidPadding(token) {
+  if (typeGuard.isSpacingTokenType(token)) {
+    return `v-p-${token}`;
+  }
+  else {
+    logInvalidValueMessage('padding', token, Object.keys(typeGuard.Spacing));
+  }
+}
+/**
+ * If the token is a valid border radius, return a string with the token prefixed with `v-rounded-`. Otherwise, log an
+ * error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {string} The the CSS class string of the border radius token.
+ */
+function formatAndValidBorderRadius(token) {
+  if (typeGuard.isBorderRadiusTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border-radius', token, Object.keys(typeGuard.BorderRadius));
+  }
+}
+/**
+ * If the token is a valid border color, return CSS class string of the border color. Otherwise, log an error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {string}  return the CSS class string of the border color
+ */
+function formatAndValidBorderColor(token) {
+  if (typeGuard.isBorderColorTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('border-color', token, typeGuard.Colors.filter(() => /^border-color-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid background color, return it with the v- prefix. Otherwise, log an error
+ *
+ * @param {unknown} token - The value of the token.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {string} CSS class string for the background color token with modes supported.
+ */
+function formatAndValidBackgroundColor(token, withModes = []) {
+  if (typeGuard.isBackgroundColorTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('background-color', token, typeGuard.Colors.filter(() => /^bg-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid text color, return the token prefixed with `v-` and formatted with the given modes. Otherwise,
+ * log an error
+ *
+ * @param {unknown} token - The token to format.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {string} A CSS class string that is either a valid color or a valid color with modes.
+ */
+function formatAndValidTextColor(token, withModes = []) {
+  if (typeGuard.isTextColorTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('text-color', token, typeGuard.Colors.filter(() => /^text-.+$/.test));
+  }
+}
+/**
+ * If the token is a valid breakpoint, return CSS class string for the flex breakpoint. Otherwise, log an error
+ *
+ * @param {unknown} token - The value of the breakpoint.
+ * @returns {string} CSS class string for the flex breakpoint.
+ */
+function formatAndValidFlexBreakpoint(token) {
+  if (typeGuard.isBreakpointsTokenType(token)) {
+    return `vega-flex-${token}`;
+  }
+  else {
+    logInvalidValueMessage('breakpoint', token, Object.keys(breakpoints.Breakpoints));
+  }
+}
+/**
+ * If the token is a breakpoint, return the breakpoint value. Otherwise, log an error and return 0
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {number} value of the breakpoint.
+ */
+function formatAndValidBreakpointSize(token) {
+  if (typeGuard.isBreakpointsTokenType(token)) {
+    return breakpoints.Breakpoints[token];
+  }
+  else {
+    logInvalidValueMessage('breakpoint', token, Object.keys(breakpoints.Breakpoints));
+  }
+}
+/**
+ * If the token is a valid spacing token, return a string with the token name prefixed with `v-gap-`. Otherwise, log an
+ * error message
+ *
+ * @param {unknown} token - The value passed in by the user.
+ * @returns {string} CSS class string for the given gap token.
+ */
+function formatAndValidGap(token) {
+  if (typeGuard.isSpacingTokenType(token)) {
+    return `v-gap-${token}`;
+  }
+  else {
+    logInvalidValueMessage('gap', token, Object.keys(typeGuard.Spacing));
+  }
+}
+/**
+ * If the token is a valid shadows token type, return the token with the prefix "v-". Otherwise, log an error message
+ *
+ * @param {string} token - The token to format.
+ * @param {TokenMode[]} withModes - TokenMode[] = []
+ * @returns {string} CSS class string of the shadow token with modes supported
+ */
+function formatAndValidShadow(token, withModes = []) {
+  if (typeGuard.isShadowsTokenType(token)) {
+    return `v-${token}` + formatTokenWithModes(token, withModes);
+  }
+  else {
+    logInvalidValueMessage('shadows', token, typeGuard.Shadows);
+  }
+}
+/**
+ * It takes a token and a flag, and returns a string
+ *
+ * @typedef Flag key of ManagedResponsiveScopeInput
+ * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} token - The token to format.
+ * @param {Flag} flag - The flag that the token is being formatted for.
+ * @returns {Nullable<string>} A nullable string
+ */
+function formatAndValidResponsiveToken(token, flag) {
+  if (token !== null && token !== undefined) {
+    return responsiveFormatFacade.ResponsiveFormatFacade.format(token, flag);
+  }
+}
+/**
+ * The function `formatAndValidTypographyToken` formats a typography token by adding a prefix and checks if it is a valid typography token.
+ *
+ * @param {string} token - The `token` parameter is a string that represents a typography token.
+ * @returns {string} a string value.
+ */
+function formatAndValidTypographyToken(token) {
+  if (typeGuard.isTypographyTokenType(token)) {
+    return `v-${token}`;
+  }
+  else {
+    logInvalidValueMessage('font', token, typography.TypographyKeys);
+  }
+}
+/**
+ * The function `formatAndValidStateToken` formats and validates a state token based on a specified flag.
+ *
+ * @param {StateVariantType} token - The `token` parameter is a value that represents a state variant for a specific flag
+ * in a managed state scope input.
+ * @param {Flag} flag - The `flag` parameter is a key of the `ManagedStateScopeInput` type.
+ * @returns {Nullable<string>} a formatted and validated state token as a string, or `null` if the input token is `null`
+ * or `undefined`.
+ */
+function formatAndValidStateToken(token, flag) {
+  if (token !== null && token !== undefined) {
+    return StateFormatFacade$1.format(token, flag);
+  }
+}
+
+exports.formatAndValidBackgroundColor = formatAndValidBackgroundColor;
+exports.formatAndValidBorderColor = formatAndValidBorderColor;
+exports.formatAndValidBorderRadius = formatAndValidBorderRadius;
+exports.formatAndValidBreakpointSize = formatAndValidBreakpointSize;
+exports.formatAndValidFlexBreakpoint = formatAndValidFlexBreakpoint;
+exports.formatAndValidGap = formatAndValidGap;
+exports.formatAndValidPadding = formatAndValidPadding;
+exports.formatAndValidResponsiveToken = formatAndValidResponsiveToken;
+exports.formatAndValidShadow = formatAndValidShadow;
+exports.formatAndValidStateToken = formatAndValidStateToken;
+exports.formatAndValidTextColor = formatAndValidTextColor;
+exports.formatAndValidTypographyToken = formatAndValidTypographyToken;

package/dist/cjs/{dynamic-slimmer-028b0e61.js → dynamic-slimmer-c718b7d9.js}

@@ -1,7 +1,6 @@
 'use strict';
 
-const vegaSlimmer = require('./vega-slimmer-f026897e.js');
-const mapToComponentMethod = require('./map-to-component-method-bdf875d3.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
 
 /**
  * The `createDynamicSlimmer` function creates an instance of a dynamically generated class based on
@@ -56,7 +55,7 @@ const createDynamicClass = (mapToClass, fieldsMap, methodsMap) => {
     vegaSlimmer.MapToComponentField(Object.assign(fieldEntry, { componentFieldName: fieldEntry.mapFrom }))(slimmerClass.prototype, fieldEntry.mapTo);
   });
   methodsMap.forEach((methodEntry) => {
-    mapToComponentMethod.MapToComponentMethod(methodEntry.mapFrom)(slimmerClass.prototype, methodEntry.mapTo);
+    vegaSlimmer.MapToComponentMethod(methodEntry.mapFrom)(slimmerClass.prototype, methodEntry.mapTo);
   });
   return slimmerClass;
 };

package/dist/cjs/{elementAppender-f0ebe01e.js → elementAppender-e585dbc9.js}

@@ -1,15 +1,15 @@
 'use strict';
 
 const log = require('./log-5d8066e0.js');
-const breakpoints = require('./breakpoints-96bd8c73.js');
-const typeGuard = require('./typeGuard-46915d8c.js');
-const responsiveFormatFacade = require('./responsiveFormatFacade-8bfed8eb.js');
-const ui = require('./ui-25a66a2a.js');
+const ui = require('./ui-ef822fe1.js');
+const typeGuard = require('./typeGuard-70b919b6.js');
+const responsiveFormatFacade = require('./responsiveFormatFacade-8518443e.js');
+const ui$1 = require('./ui-23cd9abb.js');
 const zIndexManager = require('./zIndexManager-de9aa352.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
-const dynamicSlimmer = require('./dynamic-slimmer-028b0e61.js');
-const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-f83ef66f.js');
-const vegaSlimmer = require('./vega-slimmer-f026897e.js');
+const dynamicSlimmer = require('./dynamic-slimmer-c718b7d9.js');
+const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-9751395d.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
 
 /**
  * Get the position of the element in the container according to the target element and the placement
@@ -92,14 +92,14 @@ function getTranslocationBox(originPlacement, placement, translocation) {
  */
 function getPlacements(placement) {
   if (typeof placement === 'string') {
-    const partial = breakpoints.Placements.filter((direction) => direction !== placement);
+    const partial = ui.Placements.filter((direction) => direction !== placement);
     return [placement, ...partial];
   }
   else if (Array.isArray(placement)) {
     return placement;
   }
   else {
-    return [...breakpoints.Placements];
+    return [...ui.Placements];
   }
 }
 /**
@@ -110,14 +110,14 @@ function getPlacements(placement) {
  */
 function getAlignments(alignment) {
   if (typeof alignment === 'string') {
-    const partial = breakpoints.Alignments.filter((item) => item !== alignment);
+    const partial = ui.Alignments.filter((item) => item !== alignment);
     return [alignment, ...partial];
   }
   else if (Array.isArray(alignment)) {
     return alignment;
   }
   else {
-    return [...breakpoints.Alignments];
+    return [...ui.Alignments];
   }
 }
 /**
@@ -469,7 +469,7 @@ class VegaModalWrapper {
      *
      * @returns {boolean} the boolean type.
      */
-    this.canRetrieve = () => !!ui.findParent(this.showConfig.target, 'vega-modal');
+    this.canRetrieve = () => !!ui$1.findParent(this.showConfig.target, 'vega-modal');
     /**
      * The retrieve function get the slot position of vega-modal element.
      *
@@ -500,7 +500,7 @@ class VegaModalWrapper {
    * @returns {HTMLElement} the `scrollContainer` element.
    */
   getVegaModalShowConfigContainer() {
-    const parentModal = ui.findParent(this.showConfig.target, 'vega-modal');
+    const parentModal = ui$1.findParent(this.showConfig.target, 'vega-modal');
     const modalContentScrollable = parentModal.shadowRoot.querySelector('.vega-modal-content-with-scroll');
     const modalDialog = parentModal.shadowRoot.querySelector('.modal-dialog');
     this.setElementSlot(parentModal, this.showConfig.appendableElement);
@@ -530,14 +530,14 @@ class VegaPopoverWrapper {
      *
      * @returns {boolean} the boolean type.
      */
-    this.canRetrieve = () => !!ui.findParent(this.showConfig.target, '.vega-popover');
+    this.canRetrieve = () => !!ui$1.findParent(this.showConfig.target, '.vega-popover');
     /**
      * The retrieve function get the element that if the target of showConfig does not have the class vega-popover, search upwards layer by layer until this element is found.
      *
      * @returns {HTMLElement} the element.
      */
     this.retrieve = () => {
-      const container = ui.findParent(this.showConfig.target, '.vega-popover');
+      const container = ui$1.findParent(this.showConfig.target, '.vega-popover');
       container.append(this.showConfig.appendableElement);
       return container;
     };
@@ -652,8 +652,8 @@ class ElementAppender {
         callback: /* istanbul ignore next */ () => {
           // while target and appendableElement are both visible, we can adjust position.
           // https://gethired.atlassian.net/browse/VD-1087
-          if (ui.isElementVisible(this.showConfig.target) &&
-            ui.isElementVisible(this.showConfig.appendableElement)) {
+          if (ui$1.isElementVisible(this.showConfig.target) &&
+            ui$1.isElementVisible(this.showConfig.appendableElement)) {
             this.adjustWidth();
             this.adjustHeight();
             this.adjustPosition();