@globalpayments/vega 2.40.0 → 2.41.0

package/dist/collection/components/vega-box/vega-box.js

@@ -14,6 +14,7 @@ import responsiveFormatFacade from '../../helpers/formatter/responsive-map-forma
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
+import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-box-responsive-style-controller';
 /**
  * @vegaVersion 1.27.0
  */
@@ -23,6 +24,13 @@ export class VegaBox {
     this.pageResizeSlimmer = new PageResizeObserverSlimmer();
     this.stateStyleController = new VegaBoxStateStylesController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.responsiveStyleController = new VegaBoxResponsiveStyleController();
+  }
+  watchPaddingChange() {
+    methodPlaceholder();
+  }
+  watchMarginChange() {
+    methodPlaceholder();
   }
   watchBorder() {
     methodPlaceholder();
@@ -36,6 +44,9 @@ export class VegaBox {
   watchBackgroundColor() {
     methodPlaceholder();
   }
+  watchCornersChange() {
+    methodPlaceholder();
+  }
   render() {
     const hostClasses = [
       formatAndValidResponsiveToken(this.padding, 'padding'),
@@ -801,6 +812,12 @@ export class VegaBox {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "padding",
+      "methodName": "watchPaddingChange"
+    }, {
+      "propName": "margin",
+      "methodName": "watchMarginChange"
+    }, {
       "propName": "border",
       "methodName": "watchBorder"
     }, {
@@ -812,6 +829,9 @@ export class VegaBox {
     }, {
       "propName": "backgroundColor",
       "methodName": "watchBackgroundColor"
+    }, {
+      "propName": "corners",
+      "methodName": "watchCornersChange"
     }]; }
 }
 __decorate([
@@ -826,3 +846,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaBox.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaBox.prototype, "responsiveStyleController", void 0);

package/dist/collection/components/vega-dialog/vega-dialog.js

@@ -72,8 +72,8 @@ export class VegaDialog {
     const isSmallScreen = ['default', 'S'].includes(this.currentBreakpoint);
     const actionButtonSize = { default: 'default', M: 'small' };
     const isDanger = this.type === 'danger';
-    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize }, this.okButton), { block: isSmallScreen, danger: isDanger });
-    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary' }, this.cancelButton), { block: isSmallScreen, danger: isDanger });
+    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize, danger: isDanger }, this.okButton), { block: isSmallScreen });
+    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary', danger: isDanger }, this.cancelButton), { block: isSmallScreen });
     const mergedModalProps = Object.assign(Object.assign({}, this.modalProps), { isVerticallyCentered: this.modalProps.isVerticallyCentered !== undefined ||
         this.modalProps.isVerticallyCenter !== undefined
         ? this.modalProps.isVerticallyCentered || this.modalProps.isVerticallyCenter
@@ -176,7 +176,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",
@@ -222,7 +222,7 @@ export class VegaDialog {
       "mutable": false,
       "complexType": {
         "original": "VegaDialogActionButtonProps",
-        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
         "references": {
           "VegaDialogActionButtonProps": {
             "location": "import",

package/dist/collection/components/vega-time-picker/vega-time-picker-dropdown/vega-time-picker-dropdown.css

@@ -43,7 +43,7 @@
   overflow-y: auto;
 }
 
-.vega-time-picker-dropdown.mobile .vega-time-picker-dropdown-panel > ul {
+:host(.mobile) .vega-time-picker-dropdown-panel > ul {
   overflow-y: auto;
   overflow-x: hidden;
 }

package/dist/collection/components/vega-virtual-scroll/slimmers/controllers/vega-virtual-scroll-scrollable-controller.js

@@ -40,19 +40,19 @@ export class VegaVirtualScrollScrollableController extends VegaSlimmer {
    * watchSourceChange
    */
   watchSourceChange() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * watchApproxItemHeight
    */
   watchApproxItemHeight() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * watchViewportMaxHeight
    */
   watchViewportMaxHeight() {
-    this.adjustScrollTopWhilePropChange();
+    this.adjustScrollTopInVirtualMode();
   }
   /**
    * The scrollToIndex function scrolls to a specific index within a container element either by
@@ -104,7 +104,9 @@ export class VegaVirtualScrollScrollableController extends VegaSlimmer {
    * The function adjusts the scroll top position based on certain properties to ensure it stays within
    * valid bounds.
    */
-  adjustScrollTopWhilePropChange() {
+  adjustScrollTopInVirtualMode() {
+    if (this.modeController.getMode() === 'normal')
+      return;
     this.scrollTop = Math.min((this.source.length - Math.floor(this.viewportMaxHeight / this.approxItemHeight)) *
       this.approxItemHeight, this.scrollTop);
   }
@@ -139,8 +141,9 @@ export class VegaVirtualScrollScrollableController extends VegaSlimmer {
    * being equal to `this.viewportMaxHeight`.
    */
   isScrollToBottomInNormalMode() {
+    const containerRef = this.renderer.getContainerRef();
     return (this.modeController.getMode() === 'normal' &&
-      this.source.length * this.approxItemHeight - this.scrollTop === this.viewportMaxHeight);
+      containerRef.scrollHeight - this.scrollTop >= this.viewportMaxHeight);
   }
 }
 __decorate([

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

@@ -36,10 +36,10 @@ class VegaDialogController {
    */
   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/feature-control/feature-flags-map.js

@@ -191,5 +191,11 @@ const FeatureFlagsMap = {
     createdAtVersion: '2.32.0',
     disabledByDefault: false,
   },
+  '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/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/slimmers/element-appender-slimmer.js

@@ -85,7 +85,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       if (this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !findParent(currentTarget, '.vega-element-appender-appendable') &&
         !isParent(currentTarget, this.showConfig.target) &&
         findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();

package/dist/collection/helpers/ui/element-appender.js

@@ -212,6 +212,7 @@ export class ElementAppender {
     if (!this.showConfig.isScreenPosition) {
       this.initVisibleAppendElement();
     }
+    this.showConfig.appendableElement.classList.add('vega-element-appender-appendable');
     this.showConfig.appendableElement.style.boxSizing = 'border-box';
     this.positionCalculationController.setCalculationStrategy();
   }