@globalpayments/vega 2.40.0 → 2.41.0

package/dist/esm/{responsive-format-facade-661193d7.js → responsive-format-facade-b3bc4db6.js}

@@ -1,9 +1,19 @@
 import { v as isResponsiveType, w as isBreakpointsForPrefixType, o as isSpacingTokenType, x as isDirectionalSpacingType, h as Spacing, y as isGridColumnsType, z as isGridRowsType, A as isTranslocationType, D as isFlexDirectionType, E as isFlexAlignItemType, G as isFlexJustifyContentType, H as isFlexWrapType, I as isBoxDisplayType, p as isBorderRadiusTokenType, J as isDirectionalBorderRadiusType, B as BorderRadius, K as isTextAlignType } from './type-guard-158f6d7a.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './breakpoints-91116111.js';
+import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './page-resize-observer-slimmer-bf715d05.js';
 import { i as isValidPercentage } from './number-4398f2e1.js';
 import { F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign } from './ui-8424715a.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
+import { B as Breakpoints } from './breakpoints-d9faf11c.js';
+import { s as sortAsExistArray } from './array-b668466e.js';
+import './vega-env-manager-8f8dc473.js';
+import './vega-skeleton-loader-controller-964db62f.js';
+import { F as FeatureFlag } from './feature-flag-controller-91e7eaa1.js';
+import './content-state-5646be9f.js';
+import './icon-manager-b889176b.js';
+import './wait-for-vega-handler-03a25866.js';
+import './ui-62e4be97.js';
+import './translation-c08f2274.js';
 
 /**
  * An abstract class for format {@link ManagedResponsiveScopeInput[Flag]} to CSS class string
@@ -43,6 +53,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 {
@@ -84,6 +95,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 {
@@ -578,6 +590,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 {
@@ -644,6 +657,190 @@ class ResponsiveTextAlignFormatter extends ResponsiveClassStringFormatter {
 }
 const ResponsiveTextAlignFormatter$1 = new ResponsiveTextAlignFormatter();
 
+/**
+ * Get the style text from the responsive property.
+ */
+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;
+  }
+}
+
+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 '';
+    }
+  }
+}
+const responsivePaddingStyleFormatter = new ResponsivePaddingStyleFormatter();
+
+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 '';
+    }
+  }
+}
+const responsiveMarginStyleFormatter = new ResponsiveMarginStyleFormatter();
+
+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;
+  }
+}
+const responsiveBorderRadiusStyleFormatter = new ResponsiveBorderRadiusStyleFormatter();
+
 /**
  * A facade class for delegating format input with different responsive formatters given the flag:
  *
@@ -696,6 +893,12 @@ class ResponsiveFormatFacade {
         return ResponsiveBorderRadiusFormatter$1.format(input);
       case 'textAlign':
         return ResponsiveTextAlignFormatter$1.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/esm/{rich-text-editor-required-rule-75cc2db0.js → rich-text-editor-required-rule-7a402a9c.js}

@@ -1,4 +1,4 @@
-import { a as VegaRTEContent } from './content-state-2edba4ec.js';
+import { a as VegaRTEContent } from './content-state-5646be9f.js';
 import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 
 /**

package/dist/esm/{string-input-formatter-slimmer-418b54f0.js → string-input-formatter-slimmer-1f74c6f3.js}

@@ -1,9 +1,9 @@
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
 import { b as VegaInternalComponentDidRender } from './vega-internal-event-id-f269c42f.js';
-import { a as waitForComponentDidRender } from './index-d172bafa.js';
+import { a as waitForComponentDidRender } from './index-88cfdf1a.js';
 
 /**
  * String format strategy abstract class

package/dist/esm/{style-formatter-4b857992.js → style-formatter-bdafdf22.js}

@@ -1,5 +1,5 @@
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-b3bc4db6.js';
 
 /**
  * Fomatter flex styles.

package/dist/esm/{sub-state-notify-slimmer-b36fd081.js → sub-state-notify-slimmer-e9489326.js}

@@ -1,9 +1,8 @@
 import { V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { O as Observer } from './observer-3959f9dd.js';
+import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
 import { h as VegaInternalSubStatePull, g as VegaInternalSubStatePush } from './vega-internal-event-id-f269c42f.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
 
 /**
  * Sub state notify slimmer

package/dist/esm/{sub-state-observer-slimmer-09452523.js → sub-state-observer-slimmer-7e99a677.js}

@@ -1,8 +1,7 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { O as Observer } from './observer-3959f9dd.js';
+import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { f as findParent } from './ui-62e4be97.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-97deb349.js';
 import { g as VegaInternalSubStatePush, h as VegaInternalSubStatePull } from './vega-internal-event-id-f269c42f.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/esm/vega-accordion.entry.js

@@ -3,31 +3,40 @@ import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod,
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
-import { f as formatAndValidResponsiveToken } from './design-token-e14b622b.js';
+import { f as formatAndValidResponsiveToken } from './design-token-a1bb9a99.js';
 import { a as arrayToClassString } from './ui-62e4be97.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
-import { a as VegaClick, V as VegaExpand } from './dom-node-subject-factory-97deb349.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { a as VegaClick, O as Observer, V as VegaExpand } from './dom-node-subject-factory-5831cdd4.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
-import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { A as ACCORDION_EXPAND_TOPIC } from './static-subject-title-8268945e.js';
 import { M as isAccordionObserverPayload } from './type-guard-158f6d7a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
 import './breakpoints-d9faf11c.js';
-import './responsive-format-facade-661193d7.js';
-import './breakpoints-91116111.js';
+import './responsive-format-facade-b3bc4db6.js';
+import './page-resize-observer-slimmer-bf715d05.js';
 import './ui-8424715a.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
-import './typography-396de03f.js';
-import './state-background-color-formatter-121ae7d3.js';
-import './icon-manager-b889176b.js';
+import './array-b668466e.js';
+import './vega-env-manager-8f8dc473.js';
+import './vega-skeleton-loader-controller-964db62f.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-07e1b3d9.js';
+import './feature-flag-controller-91e7eaa1.js';
+import './index-44c794b4.js';
+import './_commonjsHelpers-9943807e.js';
+import './content-state-5646be9f.js';
+import './vega-internal-event-id-f269c42f.js';
+import './icon-manager-b889176b.js';
+import './wait-for-vega-handler-03a25866.js';
+import './translation-c08f2274.js';
+import './typography-396de03f.js';
+import './state-background-color-formatter-121ae7d3.js';
 import './regex-dfe11abf.js';
-import './internal-vega-event-manager-0a01ba12.js';
 
 var __decorate$2 = (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;

package/dist/esm/vega-app-header-button.entry.js

@@ -1,19 +1,18 @@
 import { h, r as registerInstance, c as createEvent, f as forceUpdate, H as Host, g as getElement } from './index-187f71d1.js';
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { a as arrayToClassString } from './ui-62e4be97.js';
-import { d as formatAndValidBackgroundColor, i as formatAndValidTextColor } from './design-token-e14b622b.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-661193d7.js';
+import { d as formatAndValidBackgroundColor, i as formatAndValidTextColor } from './design-token-a1bb9a99.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-b3bc4db6.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { g as getCurrentBreakpoint } from './breakpoints-91116111.js';
+import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-bf715d05.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3220fa5b.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
-import { m as VegaDropdownShow, n as VegaDropdownHide, b as VegaDropdownClick, a as VegaClick } from './dom-node-subject-factory-97deb349.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-851ad927.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
+import { m as VegaDropdownShow, n as VegaDropdownHide, b as VegaDropdownClick, a as VegaClick } from './dom-node-subject-factory-5831cdd4.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
 import { c as chevronUp } from './chevron-up-b1989751.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
 import './type-guard-158f6d7a.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
@@ -22,16 +21,22 @@ import './typography-396de03f.js';
 import './state-background-color-formatter-121ae7d3.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
-import './internal-vega-event-manager-0a01ba12.js';
+import './array-b668466e.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-4b3fe6f8.js';
+import './vega-skeleton-loader-controller-964db62f.js';
+import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import './dynamic-slimmer-90b8af32.js';
+import './internal-vega-event-manager-07e1b3d9.js';
+import './feature-flag-controller-91e7eaa1.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './dynamic-slimmer-90b8af32.js';
+import './content-state-5646be9f.js';
 import './change-manager-6a7eb88c.js';
+import './vega-internal-event-id-f269c42f.js';
+import './static-subject-title-8268945e.js';
 import './icon-manager-b889176b.js';
-import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
-import './observer-3959f9dd.js';
+import './wait-for-vega-handler-03a25866.js';
+import './translation-c08f2274.js';
 
 var __decorate$2 = (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;

package/dist/esm/vega-banner.entry.js

@@ -5,18 +5,17 @@ import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { g as getDeviceType, D as DeviceType, a as arrayToClassString } from './ui-62e4be97.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
-import { a as VegaClick, c as VegaClose, e as VegaActionButtonClick } from './dom-node-subject-factory-97deb349.js';
-import { F as FeatureFlag } from './feature-flag-controller-4b3fe6f8.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { a as VegaClick, c as VegaClose, e as VegaActionButtonClick } from './dom-node-subject-factory-5831cdd4.js';
+import { F as FeatureFlag } from './feature-flag-controller-91e7eaa1.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
 import './icon-manager-b889176b.js';
 import './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import './dynamic-slimmer-90b8af32.js';
 import './change-manager-6a7eb88c.js';
-import './observer-3959f9dd.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './internal-vega-event-manager-0a01ba12.js';
+import './internal-vega-event-manager-07e1b3d9.js';
 
 var __decorate$3 = (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;