@globalpayments/vega 2.24.2 → 2.26.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { Component, Host, h, Prop, Element } from '@stencil/core';
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { formatAndValidFlexBreakpoint, formatAndValidResponsiveToken } from '../../utils/design-token';
@@ -12,6 +12,8 @@ import { arrayToClassString } from '../../utils/ui';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaFlexRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-flex/runtime-metrics-payload-definition';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
 /**
  * @version 1.0.4
  */
@@ -19,6 +21,7 @@ export class VegaFlex {
   constructor() {
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaFlexRuntimeMetricsPayloadDefinition);
+    this.pageResizeSlimmer = new PageResizeObserverSlimmer();
     /**
      * Determines the breakpoint at which the flex direction transitions from
      *    row-based layout to column-based layout, or vice versa.
@@ -58,7 +61,8 @@ export class VegaFlex {
       classNames.push('vega-flex-None');
       classNames.push(formatAndValidResponsiveToken(this.direction, 'flexDirection'));
     }
-    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) },
+    const styles = formatFlexStyles(this.flex, this.flexGrow, this.flexShrink, this.flexBasis);
+    return sanitizeVegaComponent(h(Host, { style: styles, class: arrayToClassString(classNames) },
       h("slot", null)), this.host);
   }
   static get is() { return "vega-flex"; }
@@ -75,7 +79,7 @@ export class VegaFlex {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GapType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; M?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; L?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; XL?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; default?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: GapType; M?: GapType; L?: GapType; XL?: GapType; default?: GapType; } | { x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",
@@ -274,6 +278,122 @@ export class VegaFlex {
       "attribute": "flex-wrap",
       "reflect": false
     },
+    "flex": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<FlexType>",
+        "resolved": "FlexType | { S?: FlexType; M?: FlexType; L?: FlexType; XL?: FlexType; default?: FlexType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "FlexType": {
+            "location": "import",
+            "path": "../vega-box/interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
+      },
+      "attribute": "flex",
+      "reflect": false
+    },
+    "flexBasis": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<FlexBasisType>",
+        "resolved": "\"auto\" | \"content\" | \"fit-content\" | \"fix-content\" | \"inherit\" | \"initial\" | \"max-content\" | \"min-content\" | \"revert\" | \"revert-layer\" | \"unset\" | `${number}%` | `${number}em` | `${number}px` | { S?: FlexBasisType; M?: FlexBasisType; L?: FlexBasisType; XL?: FlexBasisType; default?: FlexBasisType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "FlexBasisType": {
+            "location": "import",
+            "path": "../vega-box/interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Specifies the box's base size, defining its initial\n   width or height in a flex container."
+      },
+      "attribute": "flex-basis",
+      "reflect": false
+    },
+    "flexGrow": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<FlexGrowType>",
+        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexGrowType; M?: FlexGrowType; L?: FlexGrowType; XL?: FlexGrowType; default?: FlexGrowType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "FlexGrowType": {
+            "location": "import",
+            "path": "../vega-box/interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Specifies how the box grows to fill available space in a flex container."
+      },
+      "attribute": "flex-grow",
+      "reflect": false
+    },
+    "flexShrink": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<FlexShrinkType>",
+        "resolved": "\"inherit\" | \"initial\" | \"revert\" | \"revert-layer\" | \"unset\" | number | { S?: FlexShrinkType; M?: FlexShrinkType; L?: FlexShrinkType; XL?: FlexShrinkType; default?: FlexShrinkType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "FlexShrinkType": {
+            "location": "import",
+            "path": "../vega-box/interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Specifies how much the box shrinks to fit within a flex container."
+      },
+      "attribute": "flex-shrink",
+      "reflect": false
+    },
     "useNativeFlex": {
       "type": "boolean",
       "mutable": false,
@@ -299,6 +419,9 @@ export class VegaFlex {
       "defaultValue": "true"
     }
   }; }
+  static get states() { return {
+    "currentBreakpoint": {}
+  }; }
   static get elementRef() { return "host"; }
 }
 __decorate([
@@ -307,3 +430,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFlex.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFlex.prototype, "pageResizeSlimmer", void 0);