@globalpayments/vega 2.40.0 → 2.42.0

package/dist/collection/helpers/chart/input-processors/pie-chart-arc-path-input-processor.js

@@ -6,7 +6,7 @@ export class PieChartArchPathInputProcessor {
    *
    * @param {ChartOptions<PieChartSourceType>} input - The input parameter is an object containing chart options, including the data source, colors, layout, donut radius, and type of chart.
    * @param {PieChartRadiusProcessResultType} previousOutput - previous result from the other input process
-   * @returns {{ renderOptions: ChartArcOptions }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * @returns {ChartArcOptions} An object with a property `renderOptions` which contains an object with properties `data`,
    * `colors`, `outerRadius`, `donutRadius`, and `center`.
    */
   process(input, previousOutput) {

package/dist/collection/helpers/chart/input-processors/pie-chart-text-input-processor.js

@@ -4,7 +4,7 @@ export class PieChartTextInputProcessor {
    * This function processes input data to generate options for rendering a pie or donut chart with D3.js.
    *
    * @param {ChartArcOptions} input - chartArcPathInputProcessor process result
-   * @returns {{ renderOptions: TextInputType[] }} An object with a property `renderOptions` which contains an object with properties `data`,
+   * @returns {TextInputType[]} An object with a property `renderOptions` which contains an object with properties `data`,
    * `colors`, `outerRadius`, `donutRadius`, and `center`.
    */
   process(input) {

package/dist/collection/helpers/chart/input-processors/processor-chain.js

@@ -14,9 +14,10 @@ export class ProcessorChain {
   /**
    * This function processes input through a series of processors and returns the final output.
    *
+   * @typedef T generic type
    * @param {unknown} input - The input parameter is of type unknown, which means it can be any type of
    * value. It is the data that will be processed by the processors.
-   * @returns {unknown} the output of the last processor in the `this.processors` array.
+   * @returns {T} the output of the last processor in the `this.processors` array.
    */
   process(input) {
     let previousOutput;

package/dist/collection/helpers/chart/input-processors/y-axis-input-processor.js

@@ -34,7 +34,7 @@ export class YAxisInputProcessor {
    * @param {ChartDataSourceItem[]} data data source
    * @param {number[]} range svg scale range
    * @param {number} ticks the y-axis ticks
-   * @returns {AxisScale<AxisDomain>}y scale
+   * @returns {ScaleType}y scale
    */
   getScale(data, range, ticks) {
     const flatData = flatNestedArray(data);

package/dist/collection/helpers/dialog/test/vega-dialog-controller.test.js

@@ -52,6 +52,7 @@ describe('vegaDialogController', () => {
       size: 480,
       isVerticallyCentered: false,
       showCloseButton: true,
+      handleClose: jest.fn(),
     });
     const element = document.querySelector('vega-dialog');
     expect(document.body).toEqualHtml(`<vega-dialog id="vega-dialog-TEST_UUID"></vega-dialog>`);
@@ -63,7 +64,12 @@ describe('vegaDialogController', () => {
     expect(element.cancelButton).toEqual({ label: 'No' });
     expect(typeof element.handleCancel === 'function').toEqual(true);
     expect(element.showCancel).toEqual(true);
-    expect(element.modalProps).toEqual({ size: 480, isVerticallyCentered: false, showCloseButton: true });
+    expect(element.modalProps).toEqual({
+      size: 480,
+      isVerticallyCentered: false,
+      showCloseButton: true,
+      handleClose: expect.any(Function),
+    });
   });
   it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
     jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
@@ -93,4 +99,16 @@ describe('vegaDialogController', () => {
       });
     });
   });
+  it('should render a dialog with danger ok button', async () => {
+    VegaDialog.open({
+      title: 'Dialog Title',
+      content: 'Dialog Content',
+      okButton: { label: 'Yes', danger: true },
+      cancelButton: { label: 'No', danger: false },
+    });
+    const element = document.querySelector('vega-dialog');
+    expect(document.body).toEqualHtml(`<vega-dialog id="vega-dialog-TEST_UUID"></vega-dialog>`);
+    expect(element.okButton).toEqual({ label: 'Yes', danger: true });
+    expect(element.cancelButton).toEqual({ label: 'No', danger: false });
+  });
 });

package/dist/collection/helpers/dialog/vega-dialog-controller.js

@@ -31,15 +31,15 @@ class VegaDialogController {
    * It creates a new `vega-dialog` element, sets its properties, appends it to the DOM, and opens it
    *
    * @param {VegaDialogOption} options - VegaDialogOption
-   * @returns {HTMLElement} The dialog reference.
+   * @returns {HTMLVegaDialogElement} The dialog reference.
    * @vegaVersion 1.24.0
    */
   open(options) {
     const dialog = document.createElement('vega-dialog');
-    const { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, title } = options, dialogProps = __rest(options, ["isVerticallyCenter", "isVerticallyCentered", "showCloseButton", "size", "title"]);
+    const { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, title, handleClose } = options, dialogProps = __rest(options, ["isVerticallyCenter", "isVerticallyCentered", "showCloseButton", "size", "title", "handleClose"]);
     dialog.id = `vega-dialog-${generateUUID()}`;
     dialog.dialogTitle = title;
-    dialog.modalProps = { isVerticallyCenter, isVerticallyCentered, showCloseButton, size };
+    dialog.modalProps = { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, handleClose };
     Object.keys(dialogProps).forEach((propName) => {
       if (dialogProps[propName] !== undefined) {
         dialog[propName] = dialogProps[propName];

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -41,3 +41,5 @@ export const VegaInternalRichTextImageDeleteButtonClicked = new VegaInternalEven
 export const VegaInternalComponentDidRender = new VegaInternalEventID('componentDidRender');
 export const VegaInternalPopoverUpdateTarget = new VegaInternalEventID('popoverUpdateTarget');
 export const VegaInternalRichTextEditDeleteSelectedNodes = new VegaInternalEventID('richTextEditDeleteSelectedNodes');
+export const VegaInternalPaginationPageSizeChange = new VegaInternalEventID('paginationPageSizeChange');
+export const VegaInternalPaginationCurrentChange = new VegaInternalEventID('paginationCurrentChange');

package/dist/collection/helpers/event-manager/internal-vega-event-manager.js

@@ -45,7 +45,7 @@ class InternalVegaEventManager {
   /**
    * The function `getSemanticsInGlobal` returns the global event semantics configuration.
    *
-   * @returns {EventSemantics} The method is returning a nullable EventSemantics object.
+   * @returns {Nullable<EventSemantics>} The method is returning a nullable EventSemantics object.
    */
   getSemanticsInGlobal() {
     return this.config.global;

package/dist/collection/helpers/feature-control/feature-flags-map.js

@@ -191,5 +191,17 @@ const FeatureFlagsMap = {
     createdAtVersion: '2.32.0',
     disabledByDefault: false,
   },
+  'VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE': {
+    description: `Feature flag to enable responsive default values for the extensions property in vega-pagination.`,
+    createdTimestamp: 1744876233415,
+    createdAtVersion: '2.42.0',
+    disabledByDefault: true,
+  },
+  'VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR': {
+    description: `Feature flag that the component corners style weights are sorted according to the [0, 9999, 2, 4, 8, ..., 48]`,
+    createdTimestamp: 1744772429681,
+    createdAtVersion: '2.41.0',
+    disabledByDefault: true,
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/formatter/responsive-map-formatter/responsiv-border-radius-formatter.js

@@ -15,6 +15,7 @@ const BORDER_RADIUS_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsiveBorderRadiusStyleStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsiveBorderRadiusFormatter extends ResponsiveClassStringFormatter {

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-border-radius-style-formatter.js

@@ -0,0 +1,63 @@
+import { isBorderRadiusTokenType, isDirectionalBorderRadiusType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { BorderRadius } from '../../../constants/public-api';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+import { sortAsExistArray } from '../../../utils/array';
+import { FeatureFlag } from '../../public-api';
+const BORDER_RADIUS_DIRECTION_STYLE_MAP = {
+  'top': ['border-top-left-radius', 'border-top-right-radius'],
+  'right': ['border-top-right-radius', 'border-bottom-right-radius'],
+  'bottom': ['border-bottom-left-radius', 'border-bottom-right-radius'],
+  'left': ['border-top-left-radius', 'border-bottom-left-radius'],
+  'top-left': ['border-top-left-radius'],
+  'top-right': ['border-top-right-radius'],
+  'bottom-left': ['border-bottom-left-radius'],
+  'bottom-right': ['border-bottom-right-radius'],
+};
+/**
+ * A class for format BorderRadiusType with BreakpointsForPrefixType to CSS text string
+ *
+ * @augments ResponsiveClassStringFormatter
+ */
+class ResponsiveBorderRadiusStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * 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
+   * @returns {string} - A string of CSS text.
+   */
+  formatToken(input) {
+    if (isBorderRadiusTokenType(input)) {
+      return `border-radius:${BorderRadius[input]}px`;
+    }
+    else if (isDirectionalBorderRadiusType(input)) {
+      return this.getDirectionKeys(input)
+        .map((direction) => {
+        return BORDER_RADIUS_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${BorderRadius[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The border radius value ${input} is invalid, it must be a value of: `, BorderRadius);
+      return '';
+    }
+  }
+  /**
+   * Get the corners object keys. Order the keys as exist array if the feature flag enabled.
+   * The order affects the weight of the styles.
+   *
+   * @param {DirectionalBorderRadiusType} map - The corners input object.
+   * @returns {string[]} - The input object keys.
+   */
+  getDirectionKeys(map) {
+    const directionKeys = Object.keys(map);
+    return FeatureFlag.isEnabled('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR')
+      ? sortAsExistArray(directionKeys, (direction) => map[direction], undefined, Object.keys(BorderRadius))
+      : directionKeys;
+  }
+}
+export default new ResponsiveBorderRadiusStyleFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-css-text-formatter.js

@@ -0,0 +1,45 @@
+import { isResponsiveType } from '../../../types/type-guard';
+import { Breakpoints } from '../../../constants/public-api';
+/**
+ * Get the style text from the responsive property.
+ */
+export class ResponsiveCSSTextFormatter {
+  /**
+   * > It takes a `ResponsiveType<ManagedResponsiveScopeInput[Flag]>` and returns a string
+   *
+   * @typedef Flag key of ManagedResponsiveScopeInput
+   * @param {ResponsiveType<ManagedResponsiveScopeInput[Flag]>} input - ManagedResponsiveScopeInput[Flag]
+   * @returns {string} - CSS text string.
+   */
+  format(input) {
+    if (isResponsiveType(input)) {
+      return Object.keys(input)
+        .map((breakpoint) => {
+        const breakpointValue = input[breakpoint];
+        const breakPointFormatted = breakpoint !== 'default' ? breakpoint : undefined;
+        return this.generateCssText(this.formatToken(breakpointValue, breakPointFormatted), breakpoint);
+      })
+        .join(' ');
+    }
+    else {
+      return this.generateCssText(this.formatToken(input));
+    }
+  }
+  /**
+   * Create the complete style text with media query selector.
+   *
+   * @param {string} cssText - The style snippet.
+   * @param {BreakpointsTokenType} breakpoint - The screen breakpoint.
+   * @returns {string} - Style content with css selector.
+   */
+  generateCssText(cssText, breakpoint) {
+    let result = '';
+    if (cssText) {
+      result =
+        breakpoint && breakpoint !== 'default'
+          ? `@media (min-width:${Breakpoints[breakpoint]}px){:host{${cssText}}}`
+          : `:host{${cssText}}`;
+    }
+    return result;
+  }
+}

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-format-facade.js

@@ -15,6 +15,9 @@ import ResponsiveBoxDisplayFormatter from './responsive-box-display-formatter';
 import ResponsiveWidthAndHeightFormatter from './responsive-width-and-height-formatter';
 import ResponsiveBorderRadiusFormatter from './responsiv-border-radius-formatter';
 import ResponsiveTextAlignFormatter from './responsive-text-align-formatter';
+import responsivePaddingStyleFormatter from './responsive-padding-style-formatter';
+import responsiveMarginStyleFormatter from './responsive-margin-style-formatter';
+import responsiveBorderRadiusStyleFormatter from './responsive-border-radius-style-formatter';
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -67,6 +70,12 @@ class ResponsiveFormatFacade {
         return ResponsiveBorderRadiusFormatter.format(input);
       case 'textAlign':
         return ResponsiveTextAlignFormatter.format(input);
+      case 'paddingStyle':
+        return responsivePaddingStyleFormatter.format(input);
+      case 'marginStyle':
+        return responsiveMarginStyleFormatter.format(input);
+      case 'cornersStyle':
+        return responsiveBorderRadiusStyleFormatter.format(input);
       default:
         throw new Error(`Invalid flag ${flag} passed into ResponsiveFormatFacade`);
     }

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-margin-formatter.js

@@ -13,6 +13,7 @@ const MARGIN_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format MarginType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsiveMarginStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsiveMarginFormatter extends ResponsiveClassStringFormatter {

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-margin-style-formatter.js

@@ -0,0 +1,44 @@
+import { isSpacingTokenType, isDirectionalSpacingType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { Spacing } from '../../../constants/tokens/spacing';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+const MARGIN_DIRECTION_STYLE_MAP = {
+  top: ['margin-top'],
+  bottom: ['margin-bottom'],
+  left: ['margin-left'],
+  right: ['margin-right'],
+  x: ['margin-left', 'margin-right'],
+  y: ['margin-top', 'margin-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsiveMarginStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a margin type, return a string of style content that can be used to apply the margin to an element
+   *
+   * @param {MarginType} input - MarginType
+   * @returns {string} - A string of style content.
+   */
+  formatToken(input) {
+    if (isSpacingTokenType(input)) {
+      return `margin:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return MARGIN_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The margin value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+export default new ResponsiveMarginStyleFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-padding-formatter.js

@@ -13,6 +13,7 @@ const PADDING_DIRECTION_CLASS_PARTIAL_MAP = {
 /**
  * A class for format PaddingType with BreakpointsForPrefixType to CSS class string
  *
+ * @deprecated Please use the `ResponsivePaddingStyleFormatter` instead.
  * @augments ResponsiveClassStringFormatter
  */
 class ResponsivePaddingFormatter extends ResponsiveClassStringFormatter {

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-padding-style-formatter.js

@@ -0,0 +1,44 @@
+import { isSpacingTokenType, isDirectionalSpacingType } from '../../../types/type-guard';
+import { LogUtility } from '../../../utils/log';
+import { Spacing } from '../../../constants/tokens/spacing';
+import { ResponsiveCSSTextFormatter } from './responsive-css-text-formatter';
+const PADDING_DIRECTION_STYLE_MAP = {
+  top: ['padding-top'],
+  bottom: ['padding-bottom'],
+  left: ['padding-left'],
+  right: ['padding-right'],
+  x: ['padding-left', 'padding-right'],
+  y: ['padding-top', 'padding-bottom'],
+};
+/**
+ * Get the padding style content.
+ */
+class ResponsivePaddingStyleFormatter extends ResponsiveCSSTextFormatter {
+  /**
+   * Given a padding type, return the corresponding string of CSS text.
+   *
+   * @param {PaddingType} input - PaddingType
+   * @returns {string} - CSS text.
+   */
+  formatToken(input) {
+    if (isSpacingTokenType(input)) {
+      return `padding:${Spacing[input]}px`;
+    }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return PADDING_DIRECTION_STYLE_MAP[direction]
+          .map((item) => {
+          return `${item}:${Spacing[input[direction]]}px`;
+        })
+          .join(';');
+      })
+        .join(';');
+    }
+    else {
+      LogUtility.warn(`The padding value ${input} is invalid, it must be a value of: `, Spacing);
+      return '';
+    }
+  }
+}
+export default new ResponsivePaddingStyleFormatter();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-size-formatter.js

@@ -11,7 +11,7 @@ class ResponsiveSizeFormatter {
    * Given a responsive size, return the size according current window width
    *
    * @param {ResponsiveType<SizeType>} input - ResponsiveScope
-   * @returns {SizeType} - size.
+   * @returns {ResponsiveSizeType} - size.
    */
   format(input) {
     const breakpoint = getCurrentBreakpoint();

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-translocation-formatter.js

@@ -10,7 +10,7 @@ class ResponsiveTranslocationFormatter {
    * Given a responsive size, return the size according current window width
    *
    * @param {ResponsiveType<TranslocationType>} input - ResponsiveScope
-   * @returns {TranslocationType} - size.
+   * @returns {Nullable<TranslocationType>} - size.
    */
   format(input) {
     if (isTranslocationType(input)) {

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

@@ -55,7 +55,7 @@ export class NumberMaskStrategy extends StringFormatStrategy {
    *
    * @param {string} input - input number
    * @param {number} caretPosition - The current caret position
-   * @returns {number} The new position of caret
+   * @returns {Nullable<number>} The new position of caret
    */
   calculateCaretPosition(input, caretPosition) {
     if (isNonNullable(caretPosition)) {

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

@@ -48,7 +48,7 @@ export class StringMaskStrategy extends StringFormatStrategy {
    *
    * @param {string} input - The input string
    * @param {number} caretPosition - The current position of caret
-   * @returns {number} The new position of caret
+   * @returns {Nullable<number>} The new position of caret
    */
   calculateCaretPosition(input, caretPosition) {
     if (!isNonNullable(caretPosition))

package/dist/collection/helpers/formatter/style-formatter.js

@@ -7,7 +7,7 @@ import responsiveFormatFacade from './responsive-map-formatter/responsive-format
  * @param {Nullable<ResponsiveType<FlexGrowType>>} flexGrow - flex-grow
  * @param {Nullable<ResponsiveType<FlexShrinkType>>} flexShrink - flex-shrink
  * @param {Nullable<ResponsiveType<FlexBasisType>>} flexBasis - flex-basis
- * @returns {object} - formatted styles
+ * @returns {FormattedStylesType} - formatted styles
  */
 export function formatFlexStyles(flex, flexGrow, flexShrink, flexBasis) {
   if (isNonNullable(flex)) {

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-border-radius-style-formatter.test.js

@@ -0,0 +1,32 @@
+import { LogUtility } from '../../../../utils/log';
+import { FeatureFlag } from '../../../public-api';
+import ResponsiveCornersStyleFormatter from '../../responsive-map-formatter/responsive-border-radius-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveCornersStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsiveCornersStyleFormatter.formatToken('rounded-24');
+  expect(result).toEqual('border-radius:24px');
+});
+test('should return format when input in directional type', () => {
+  const result = ResponsiveCornersStyleFormatter.formatToken({
+    top: 'rounded-12',
+    bottom: 'rounded-16',
+    left: 'rounded-full',
+    right: 'rounded-none',
+  });
+  expect(result).toEqual('border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:0px;border-bottom-right-radius:0px');
+});
+test('should return format when input in directional type and enable feature flag', () => {
+  FeatureFlag.enable('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR');
+  const result = ResponsiveCornersStyleFormatter.formatToken({
+    top: 'rounded-12',
+    bottom: 'rounded-16',
+    left: 'rounded-full',
+    right: 'rounded-none',
+  });
+  expect(result).toEqual('border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-left-radius:12px;border-top-right-radius:12px;border-bottom-left-radius:16px;border-bottom-right-radius:16px');
+  FeatureFlag.disable('VEGA_COMPONENT.CORNERS_USE_OLD_BEHAVIOR');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-margin-style-formatter.test.js

@@ -0,0 +1,28 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsiveMarginStyleFormatter from '../../responsive-map-formatter/responsive-margin-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveMarginStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsiveMarginStyleFormatter.formatToken('size-24');
+  expect(result).toEqual('margin:24px');
+});
+test('should return format when input is directional type', () => {
+  const result = ResponsiveMarginStyleFormatter.formatToken({
+    top: 'size-12',
+    x: 'size-24',
+    bottom: 'size-8',
+  });
+  expect(result).toEqual('margin-top:12px;margin-left:24px;margin-right:24px;margin-bottom:8px');
+});
+test('should return format when input is responsive type', () => {
+  expect(ResponsiveMarginStyleFormatter.format('0')).toEqual(':host{margin:0px}');
+  const result = ResponsiveMarginStyleFormatter.format({
+    default: 'size-8',
+    S: 'size-12',
+    M: { top: 'size-12', x: 'size-24', bottom: 'size-8' },
+  });
+  expect(result).toEqual(':host{margin:8px} @media (min-width:320px){:host{margin:12px}} @media (min-width:768px){:host{margin-top:12px;margin-left:24px;margin-right:24px;margin-bottom:8px}}');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-padding-style-formatter.test.js

@@ -0,0 +1,28 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsivePaddingStyleFormatter from '../../responsive-map-formatter/responsive-padding-style-formatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsivePaddingStyleFormatter.formatToken('24');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in spacing scope', () => {
+  const result = ResponsivePaddingStyleFormatter.formatToken('size-24');
+  expect(result).toEqual('padding:24px');
+});
+test('should return format when input is directional type', () => {
+  const result = ResponsivePaddingStyleFormatter.formatToken({
+    top: 'size-12',
+    x: 'size-24',
+    bottom: 'size-8',
+  });
+  expect(result).toEqual('padding-top:12px;padding-left:24px;padding-right:24px;padding-bottom:8px');
+});
+test('should return format when input is responsive type', () => {
+  expect(ResponsivePaddingStyleFormatter.format('0')).toEqual(':host{padding:0px}');
+  const result = ResponsivePaddingStyleFormatter.format({
+    default: 'size-8',
+    S: 'size-12',
+    M: { top: 'size-12', x: 'size-24', bottom: 'size-8' },
+  });
+  expect(result).toEqual(':host{padding:8px} @media (min-width:320px){:host{padding:12px}} @media (min-width:768px){:host{padding-top:12px;padding-left:24px;padding-right:24px;padding-bottom:8px}}');
+});

package/dist/collection/helpers/icon/icon-manager.js

@@ -32,7 +32,7 @@ class IconManager {
    * Get an internal icon by name
    *
    * @param {string} name - The name of the icon
-   * @returns {Nullable<string>} returns the icon svg or null if not found
+   * @returns {Nullable<IconPayload>} returns the icon svg or null if not found
    * @vegaVersion 2.13.0
    */
   getIcon(name) {

package/dist/collection/helpers/immutable/immutable-map.js

@@ -33,7 +33,8 @@ export class ImmutableMap {
   /**
    * The function returns an iterator of the keys in a map.
    *
-   * @returns {IterableIterator<unknown>} The `keys()` method is returning an `IterableIterator` object that contains the keys of the `map`.
+   * @typedef K generic type
+   * @returns {IterableIterator<K>} The `keys()` method is returning an `IterableIterator` object that contains the keys of the `map`.
    */
   keys() {
     return this.map.keys();
@@ -41,9 +42,11 @@ export class ImmutableMap {
   /**
    * The `set` function adds a key-value pair to an immutable map.
    *
+   * @typedef K generic type
+   * @typedef V generic type
    * @param {unknown} key - The key parameter is the key of the entry that you want to add or update in the map. It is of type K, which represents the type of the keys in the map.
    * @param {unknown} value - The value parameter represents the value that you want to associate with the specified key in the ImmutableMap.
-   * @returns {ImmutableMap<unknown, unknown>} The method is returning an ImmutableMap<K, V>.
+   * @returns {ImmutableMap<K, V>} The method is returning an ImmutableMap<K, V>.
    */
   set(key, value) {
     return this.withMutation((map) => {
@@ -53,8 +56,9 @@ export class ImmutableMap {
   /**
    * The get function retrieves the value associated with a given key from a map.
    *
+   * @typedef V generic type
    * @param {unknown} key - The parameter "key" is of type "K", which means it can be any type.
-   * @returns {unknown} The value associated with the given key in the map.
+   * @returns {Nullable<V>} The value associated with the given key in the map.
    */
   get(key) {
     return this.map.get(key);
@@ -62,7 +66,8 @@ export class ImmutableMap {
   /**
    * The values() method of Map instances returns a new map iterator object that contains the values for each element in this map in insertion order.
    *
-   * @returns {IterableIterator<unknown>} An iterator of the values in the map.
+   * @typedef V generic type
+   * @returns {IterableIterator<V>} An iterator of the values in the map.
    */
   values() {
     return this.map.values();
@@ -70,8 +75,10 @@ export class ImmutableMap {
   /**
    * The `delete` function removes an entry from an ImmutableMap by deleting the corresponding key-value pair from the underlying Map.
    *
+   * @typedef K generic type
+   * @typedef V generic type
    * @param {unknown} key - The key parameter is the key of the entry that you want to delete from the ImmutableMap.
-   * @returns {ImmutableMap<unknown, unknown>} The method is returning an ImmutableMap<K, V>.
+   * @returns {ImmutableMap<K, V>} The method is returning an ImmutableMap<K, V>.
    */
   delete(key) {
     return this.withMutation((map) => {
@@ -81,7 +88,9 @@ export class ImmutableMap {
   /**
    * The `clear` function clears all key-value pairs from an ImmutableMap.
    *
-   * @returns {ImmutableMap<unknown, unknown>} The method is returning an ImmutableMap<K, V>.
+   * @typedef K generic type
+   * @typedef V generic type
+   * @returns {ImmutableMap<K, V>} The method is returning an ImmutableMap<K, V>.
    */
   clear() {
     return this.withMutation((map) => {
@@ -100,8 +109,10 @@ export class ImmutableMap {
   /**
    * The `withMutation` function takes a callback function that mutates a map and returns a new immutable map with the changes applied.
    *
+   * @typedef K generic type
+   * @typedef V generic type
    * @param {(map: Map<unknown, unknown>) => void} fn - A function that takes a map as its parameter and does some mutation on it.
-   * @returns {ImmutableMap<unknown, unknown>} a new instance of `ImmutableMap<K, V>`.
+   * @returns {ImmutableMap<K, V>} a new instance of `ImmutableMap<K, V>`.
    */
   withMutation(fn) {
     const newMap = new Map(this.map);

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

@@ -21,7 +21,7 @@ class VegaLoaderController {
    * Create a loading indicator and append it to the container
    *
    * @param {VegaLoaderIndicatorOptions} options - VegaLoaderOptions = {} options of the method
-   * @returns {string} The uuid of the loader.
+   * @returns {Nullable<string>} The uuid of the loader.
    * @vegaVersion 1.16.0
    */
   load(options = {}) {
@@ -65,7 +65,7 @@ class VegaLoaderController {
    * Find loader by id, if the id include '>>>' it will find inside shadowRoot
    *
    * @param {string} id - The id of the loader.
-   * @returns {string} The loader found by id.
+   * @returns {Nullable<HTMLElement>} The loader found by id.
    */
   findLoader(id) {
     var _a, _b;
@@ -98,7 +98,7 @@ class VegaLoaderController {
    * Create a loading indicator
    *
    * @param {VegaLoaderIndicatorOptions} indicatorOptions the props of vega loading indicator
-   * @returns {HTMLElement} vega-loading-indicator component template
+   * @returns {HTMLVegaLoadingIndicatorElement} vega-loading-indicator component template
    */
   createLoadingIndicator(indicatorOptions = {}) {
     const loadingIndicator = document.createElement('vega-loading-indicator');