@globalpayments/vega 2.25.0 → 2.27.0

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

@@ -13,8 +13,9 @@ import { VegaBoxStateStylesController } from './slimmers/controllers/vega-box-st
 import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
 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';
 /**
- * @version 1.27.0
+ * @vegaVersion 1.27.0
  */
 export class VegaBox {
   constructor() {
@@ -44,23 +45,7 @@ export class VegaBox {
       formatAndValidBorderStyle(this.borderStyle),
       responsiveFormatFacade.formatCustom(this.responsiveClass),
     ];
-    const styles = {
-      width: formatAndValidResponsiveToken(this.width, 'widthAndHeight'),
-      height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'),
-      minHeight: formatAndValidResponsiveToken(this.minHeight, 'widthAndHeight'),
-      maxHeight: formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight'),
-      order: this.order && `${responsiveFormatFacade.formatCustom(this.order)}`,
-      alignSelf: this.alignSelf && `${responsiveFormatFacade.formatCustom(this.alignSelf)}`,
-      justifySelf: this.justifySelf && `${responsiveFormatFacade.formatCustom(this.justifySelf)}`,
-    };
-    if (this.flex) {
-      styles.flex = `${responsiveFormatFacade.formatCustom(this.flex)}`;
-    }
-    else {
-      styles.flexBasis = this.flexBasis && `${responsiveFormatFacade.formatCustom(this.flexBasis)}`;
-      styles.flexGrow = this.flexGrow && `${responsiveFormatFacade.formatCustom(this.flexGrow)}`;
-      styles.flexShrink = this.flexShrink && `${responsiveFormatFacade.formatCustom(this.flexShrink)}`;
-    }
+    const styles = Object.assign({ width: formatAndValidResponsiveToken(this.width, 'widthAndHeight'), height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'), minHeight: formatAndValidResponsiveToken(this.minHeight, 'widthAndHeight'), maxHeight: formatAndValidResponsiveToken(this.maxHeight, 'widthAndHeight'), order: this.order && `${responsiveFormatFacade.formatCustom(this.order)}`, alignSelf: this.alignSelf && `${responsiveFormatFacade.formatCustom(this.alignSelf)}`, justifySelf: this.justifySelf && `${responsiveFormatFacade.formatCustom(this.justifySelf)}` }, formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis));
     if (this.gridArea) {
       styles.gridArea = `${responsiveFormatFacade.formatCustom(this.gridArea)}`;
     }
@@ -101,7 +86,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.27.0"
           }],
         "text": "Determines the spacing between the content and the edges of the box.\n   It can be set as a spacing value, such as `size-16` or `size-24`,\n   to apply the same padding on all sides.\n\nAlternatively, you can set the padding as a responsive map,\n   allowing you to define different padding values for different breakpoints.\n   The responsive map should follow the structure\n   `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.\n\nNote that the `default` value is required when using a responsive map\n   to provide a fallback padding value for breakpoints\n   that are not explicitly defined."
@@ -130,7 +115,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.27.0"
           }],
         "text": "Defines the spacing around the box.\n   You can set it as a single spacing value,\n   such as `size-16` or `size-24`, which will apply\n   the same margin on all sides of the box.\n\nAlternatively, you can set the padding as a responsive map,\n   allowing you to define different margin values for different breakpoints.\n   The responsive map should follow the structure\n   `{default: 'size-12', L: { top: 'size-24', bottom: 'size-24'}}`.\n\nNote that the `default` value is required when using a responsive map\n   to provide a fallback margin value for breakpoints\n   that are not explicitly defined."
@@ -143,7 +128,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<BoxDisplayType>",
-        "resolved": "\"block\" | \"none\" | { S?: \"none\" | \"block\"; M?: \"none\" | \"block\"; L?: \"none\" | \"block\"; XL?: \"none\" | \"block\"; default?: \"none\" | \"block\"; }",
+        "resolved": "\"block\" | \"inline-block\" | \"none\" | { S?: \"none\" | \"block\" | \"inline-block\"; M?: \"none\" | \"block\" | \"inline-block\"; L?: \"none\" | \"block\" | \"inline-block\"; XL?: \"none\" | \"block\" | \"inline-block\"; default?: \"none\" | \"block\" | \"inline-block\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -159,10 +144,10 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.38.0"
           }],
-        "text": "Defines the display behavior of the box, allowing you to choose from\n   standard display options like `block` and `none`."
+        "text": "Defines the display behavior of the box, allowing you to choose from\n   standard display options like `block`, `inline-block` and `none`."
       },
       "attribute": "display",
       "reflect": false
@@ -192,7 +177,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the border of the box.\n   It accepts a string value representing a valid\n   border token."
@@ -217,7 +202,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.7.0"
           }],
         "text": "Specifies the line style of the box border. *"
@@ -246,7 +231,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the box shadow of the box.\n   It accepts a string value representing a valid\n   box shadow token."
@@ -279,7 +264,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the border color of the box.\n   It accepts a string value representing a valid\n   border color token."
@@ -312,7 +297,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the background color of the box.\n   It accepts a string value representing a valid\n   background color token."
@@ -341,7 +326,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Specifies the width of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the width\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vw - 20px)' which allows for more complex calculations to\n   determine the width.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.hlprd.com/tokens/spacing to check the full list of spacing tokens."
@@ -370,7 +355,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Specifies the height of the box.\nIt accepts values in numeric, string and spacing token formats.\nFor numeric values, use a number to indicate the height\n   in pixels, e.g., 100 will be translated to 100px.\nFor string values, you can use CSS units like '%' or 'calc' expressions.\n   For example, '100%' and 'calc(100vh - 20px)' which allows for more complex calculations to\n   determine the height.\nFor spacing tokens, you can set 'size-2', 'size-16' and etc. Please refer to https://vega.hlprd.com/tokens/spacing to check the full list of spacing tokens."
@@ -399,7 +384,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.7.0"
           }],
         "text": "Specifies the minimum height of the box.\nIt accepts values in numeric, string and spacing token formats.\nNumeric values represent minimum heights in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units such as '%'\n   or keyword values like 'max-content'\n   (e.g., '100%' or 'max-content').\nSpacing tokens like 'size-2' or 'size-16' can also be used.\n   Please refer to https://vega.hlprd.com/tokens/spacing\n   to check the full list of spacing tokens."
@@ -428,7 +413,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.7.0"
           }],
         "text": "Specifies the maximum height of the box.\nIt accepts values in numeric, string and spacing token formats.\nNumeric values represent maximum heights in pixels\n   (e.g., 100 translates to 100px).\nString values allow the use of CSS units such as '%'\n   or keyword values like 'min-content'\n   (e.g., '100%' or 'min-content').\nSpacing tokens like 'size-2' or 'size-16' can also be used.\n   Please refer to https://vega.hlprd.com/tokens/spacing\n   to check the full list of spacing tokens."
@@ -453,7 +438,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the custom class name of the box."
@@ -482,7 +467,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "Defines the corner of the box.\n   It accepts a string value representing a valid\n   border radius token."
@@ -511,7 +496,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies the base size of the box."
@@ -540,7 +525,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies how the box is grow."
@@ -569,7 +554,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies how much the box shrinks."
@@ -598,7 +583,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies the display order of the box."
@@ -627,7 +612,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
@@ -656,7 +641,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies how the box aligns itself within its container."
@@ -685,7 +670,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.3.0"
           }],
         "text": "Specifies how a single box justifies its content along the main axis within its container."
@@ -714,7 +699,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Determines the placement of the item within the grid along the horizontal axis."
@@ -743,7 +728,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Determines the placement of the item within the grid along the vertical axis."
@@ -772,7 +757,7 @@ export class VegaBox {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Defines the area within the grid occupied by the item. It accepts CSS values and can be set as ResponsiveType."

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

@@ -16,7 +16,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.41.0
+ * @vegaVersion 1.41.0
  */
 export class VegaBreadcrumb {
   constructor() {
@@ -39,13 +39,13 @@ export class VegaBreadcrumb {
   
      * The minimum allowed value for this property is 4.
      *
-     * @version 1.41.0
+     * @vegaVersion 1.41.0
      */
     this.maxItems = 4;
     /**
      * Represents the individual elements within the `vega-breadcrumb` component.
      *
-     * @version 1.41.0
+     * @vegaVersion 1.41.0
      */
     this.items = [];
   }
@@ -78,7 +78,7 @@ export class VegaBreadcrumb {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.41.0"
           }],
         "text": "Determines the maximum number of visible items in the `vega-breadcrumb` component,\n   primarily in desktop mode.\n\nWhen the number of items exceeds this limit, the component automatically\n   collapses the center items, rendering only the first and last items visible.\n\nIf you set this value to `none`, all items will remain expanded.\n\nThe minimum allowed value for this property is 4."
@@ -104,7 +104,7 @@ export class VegaBreadcrumb {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.41.0"
           }],
         "text": "Represents the individual elements within the `vega-breadcrumb` component."
@@ -120,7 +120,7 @@ export class VegaBreadcrumb {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.41.0"
           }],
         "text": "An event emitter notifying that a breadcrumb item has been clicked."
@@ -146,7 +146,7 @@ export class VegaBreadcrumb {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "An event emitter notifying that a breadcrumb item has been clicked."

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

@@ -19,7 +19,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { VegaButtonLoadingRenderer } from './slimmers/renderers/vega-button-loading-renderer';
 import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
 /**
- * @version 1.0.0
+ * @vegaVersion 1.0.0
  */
 export class VegaButton {
   constructor() {
@@ -44,7 +44,7 @@ export class VegaButton {
     /**
      * Specifies the size of the button.
      *
-     * @version 1.0.0
+     * @vegaVersion 1.0.0
      */
     this.size = 'default';
     /**
@@ -52,47 +52,47 @@ export class VegaButton {
      *
      * It determines how the button will be presented to the user.
      *
-     * @version 1.0.0
+     * @vegaVersion 1.0.0
      */
     this.variant = 'primary';
     /**
      * Specifies the placement of the icon in relation to the button's label.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.iconAlign = 'left';
     /**
      * Specifies the text displayed on the button.
      *
-     * @version 1.0.3
+     * @vegaVersion 1.0.3
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.label = null;
     /**
      * Specifies whether the button element is disabled.
      *
-     * @version 1.0.3
+     * @vegaVersion 1.0.3
      */
     this.disabled = false;
     /**
      * Indicates the danger status of the button,
      *    typically used for destructive actions.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.danger = false;
     /**
      * Specifies whether the button should span the
      *    full width of its parent element.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.block = false;
     /**
      * Specifies the type of button and its behavior in relation to
      *    form submission and data reset.
      *
-     * @version 1.0.3
+     * @vegaVersion 1.0.3
      */
     this.type = 'button';
     /**
@@ -100,7 +100,7 @@ export class VegaButton {
      *     the button is disabled and an indeterminate loading indicator
      *     is displayed within the button.
      *
-     * @version 2.17.0
+     * @vegaVersion 2.17.0
      */
     this.loading = false;
     this.handleClick = (e) => {
@@ -198,7 +198,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.0"
           }],
         "text": "Specifies the size of the button."
@@ -224,7 +224,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.0"
           }],
         "text": "Specifies the visual style and prominence of the button.\n\nIt determines how the button will be presented to the user."
@@ -245,7 +245,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.3"
           }],
         "text": "Specifies the icon to be displayed on the button,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
@@ -270,7 +270,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the placement of the icon in relation to the button's label."
@@ -291,7 +291,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.3"
           }],
         "text": "Specifies the text displayed on the button."
@@ -312,7 +312,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.3"
           }],
         "text": "Specifies whether the button element is disabled."
@@ -333,7 +333,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Indicates the danger status of the button,\n   typically used for destructive actions."
@@ -359,7 +359,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the button should span the\n   full width of its parent element."
@@ -385,7 +385,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.3"
           }],
         "text": "Specifies the type of button and its behavior in relation to\n   form submission and data reset."
@@ -406,7 +406,7 @@ export class VegaButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.17.0"
           }],
         "text": "Specifies whether the button is in a loading state. When `true`,\n    the button is disabled and an indeterminate loading indicator\n    is displayed within the button."
@@ -427,7 +427,7 @@ export class VegaButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.11"
           }],
         "text": "An event emitter notifying the click event of the button."
@@ -448,7 +448,7 @@ export class VegaButton {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "An event emitter notifying the click event of the button."