@globalpayments/vega 2.25.0 → 2.26.0

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

@@ -13,6 +13,7 @@ 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
  */
@@ -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)}`;
     }

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-remote-invocation-controller.js

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import { VegaDropdownRenderItemInternalOverridden, VegaDropdownSearchInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+/** Manager remote invocation */
+export class VegaDropdownRemoteInvocationController extends VegaSlimmer {
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.remotePhoneNumberSearchSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownSearchInternalOverridden);
+    this.remotePhoneNumberItemRenderSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(this.host, VegaDropdownRenderItemInternalOverridden);
+  }
+  /**
+   *  Call the search function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote search function
+   * @returns {VegaDropdownSourceItem[]} - searched items.
+   */
+  callRemoteSearch(...args) {
+    if (this.remotePhoneNumberSearchSubject) {
+      const searchResult = remoteInvocationRegistry.call(this.remotePhoneNumberSearchSubject, ...args);
+      if (searchResult)
+        return searchResult;
+    }
+    return null;
+  }
+  /**
+   * Call the item render function in input-phone-number.
+   *
+   * @param {unknown[]} args - arguments of remote item render function
+   * @returns {HTMLElement} - rendered item
+   */
+  callRemoteItemRender(...args) {
+    if (this.remotePhoneNumberItemRenderSubject) {
+      const renderResult = remoteInvocationRegistry.call(this.remotePhoneNumberItemRenderSubject, ...args);
+      if (renderResult)
+        return renderResult;
+    }
+    return null;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDropdownRemoteInvocationController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDropdownRemoteInvocationController.prototype, "connectedCallback", null);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-search-controller.js

@@ -5,8 +5,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_SEARCH_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -48,10 +46,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
    * @returns {VegaDropdownSourceItem[]} an array of VegaDropdownSourceItem objects.
    */
   searchSource(source, result) {
-    const searchResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_SEARCH_INTERNAL_OVERRIDEN, source, this.searchString, this.caseSensitive);
-    if (searchResult) {
+    const searchResult = this.remoteInvocationController.callRemoteSearch(source, this.searchString, this.caseSensitive);
+    if (searchResult)
       return searchResult;
-    }
     source.forEach((item) => {
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);
@@ -90,6 +87,9 @@ export class VegaDropdownSearchController extends VegaSlimmer {
     return label.replace(new RegExp(`(${this.searchString})`, 'g' + (this.caseSensitive ? '' : 'i')), `<b>$1</b>`);
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchString", void 0);
@@ -102,3 +102,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchController.prototype, "searchable", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchController.prototype, "remoteInvocationController", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-item-level-renderer.js

@@ -6,14 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
-import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 export class VegaDropdownItemLevelRenderer extends VegaSlimmer {
   render(item, fixHeight) {
-    const renderResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, item, fixHeight);
-    if (renderResult) {
+    const renderResult = this.remoteInvocationController.callRemoteItemRender(item, fixHeight);
+    if (renderResult)
       return renderResult;
-    }
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
@@ -35,3 +32,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "sourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "remoteInvocationController", void 0);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-search-renderer.js

@@ -19,7 +19,7 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
-        this.search(input.detail);
+        this.searchTriggerBy === 'input' && this.search(input.detail);
       });
     };
     this.search = (input) => {
@@ -48,7 +48,18 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
   }
   render() {
     return (this.searchable && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch }))));
+      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
+         */
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onKeyDown: 
+        /* istanbul ignore next */ (e) => {
+          if (this.searchTriggerBy === 'enter' && e.code === 'Enter') {
+            this.search(this.searchInputRef.value);
+          }
+        } }))));
   }
 }
 __decorate([
@@ -75,6 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownSearchRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownSearchRenderer.prototype, "searchTriggerBy", void 0);
 __decorate([
   MapToComponentMethod('search')
 ], VegaDropdownSearchRenderer.prototype, "userSearch", null);

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

@@ -28,6 +28,7 @@ import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDropdownRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-dropdown/runtime-metrics-payload-definition';
 import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller';
+import { VegaDropdownRemoteInvocationController } from './slimmers/controllers/vega-dropdown-remote-invocation-controller';
 /**
  * @version 1.3.0
  */
@@ -52,6 +53,7 @@ export class VegaDropdown {
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
     this.scrollableController = new VegaDropdownScrollableController();
+    this.remoteInvocationController = new VegaDropdownRemoteInvocationController();
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
@@ -214,6 +216,12 @@ export class VegaDropdown {
      * @version 2.3.0
      */
     this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown search is triggered by input or pressing the Enter key.
+     *
+     * @version 2.26.0
+     */
+    this.searchTriggerBy = 'input';
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -807,6 +815,32 @@ export class VegaDropdown {
       "attribute": "is-lazy-loading",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "searchTriggerBy": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaDropdownSearchTriggerByType",
+        "resolved": "\"enter\" | \"input\"",
+        "references": {
+          "VegaDropdownSearchTriggerByType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.26.0"
+          }],
+        "text": "Determines whether the dropdown search is triggered by input or pressing the Enter key."
+      },
+      "attribute": "search-trigger-by",
+      "reflect": false,
+      "defaultValue": "'input'"
     }
   }; }
   static get states() { return {
@@ -1204,6 +1238,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "scrollableController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "remoteInvocationController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);

package/dist/collection/components/vega-file-uploader/slimmers/controllers/vega-file-uploader-drop-file-filter-controller.js

@@ -0,0 +1,51 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** Used to filters files based on accepted file types specified in the `accept` property. */
+export class VegaFileUploaderDropFileFilterController extends VegaSlimmer {
+  /**
+   * Filters the files based on accepted file types if specified.
+   *
+   * @param {FileList|null} fileList - FileList is a FileList object
+   * @returns {File[]} An array of `File` objects after filtering based on the accepted file types specified in the `accept` property
+   */
+  process(fileList) {
+    const files = Array.from(fileList || []);
+    if (fileList && this.accept && this.accept !== '*' && this.accept !== '/*') {
+      const acceptFileTypes = this.accept.split(',');
+      return files.filter((file) => this.validateFileType(file, acceptFileTypes));
+    }
+    return files;
+  }
+  /**
+   * Checks if a given file matches any of the accepted file types based on file name, MIME type, or base type.
+   *
+   * @param {File} file - File object
+   * @param {string[]} acceptTypes - An array of strings that represent the file types that are accepted. These strings can have different formats:
+   * @returns {boolean} A boolean value, indicating whether the provided file matches any of the accepted file types specified in the `acceptTypes` array.
+   */
+  validateFileType(file, acceptTypes) {
+    const fileName = file.name;
+    const fileType = (file.type || '').toLowerCase();
+    const fileBaseType = fileType.replace(/\/.*$/, '');
+    return acceptTypes.some((acceptFileType) => {
+      acceptFileType = acceptFileType.trim().toLowerCase();
+      if (acceptFileType.startsWith('.')) {
+        return fileName.toLowerCase().endsWith(acceptFileType);
+      }
+      else if (acceptFileType.endsWith('/*')) {
+        return fileBaseType === acceptFileType.replace(/\/.*$/, '');
+      }
+      else {
+        return fileType === acceptFileType;
+      }
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderDropFileFilterController.prototype, "accept", void 0);

package/dist/collection/components/vega-file-uploader/slimmers/controllers/vega-file-uploader-value-controller.js

@@ -36,13 +36,13 @@ export class VegaFileUploaderValueController extends VegaSlimmer {
   }
 }
 __decorate([
-  MapToComponentField({ writable: true })
+  MapToComponentField()
 ], VegaFileUploaderValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaFileUploaderValueController.prototype, "value", void 0);
 __decorate([
-  MapToComponentField({ writable: true })
+  MapToComponentField()
 ], VegaFileUploaderValueController.prototype, "changeEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('watchValue')

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-container-renderer.js

@@ -50,9 +50,10 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
      * @param {DragEvent} e drag event object
      */
     this.dropHandler = (e) => {
+      var _a;
       e.preventDefault();
       if (!this.disabled) {
-        const files = this.getVegaFilesFromFileList(e.dataTransfer.files);
+        const files = this.getVegaFilesFromFileList(this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files));
         this.selectFileChangeEventEmitHandler(files);
       }
     };
@@ -115,14 +116,16 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     if (files && files.length) {
       const e = this.selectFileChangeEventEmitter.emit(files);
       if (!e.defaultPrevented) {
-        this.vegaFileUploaderValueController.setValue([].concat(this.value, files));
+        this.vegaFileUploaderValueController.setValue(this.value && this.value.length
+          ? new Array().concat(this.value, files)
+          : files);
       }
     }
   }
   /**
    * extracting the files from a file list object. It first initializes an empty array `result` to store the extracted files
    *
-   * @param {FileList} fileList file list object
+   * @param {FileList|File[]|null} fileList file list object
    * @returns {VegaFileUploaderFile[]} the vega file array
    */
   getVegaFilesFromFileList(fileList) {
@@ -160,3 +163,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "vegaFileUploaderValueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "dropFileFilterController", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -17,6 +17,7 @@ import { VegaChange, VegaPreview, VegaRemove, VegaRetry, VegaSelectFileChange, }
 import { VegaFileUploaderValueController } from './slimmers/controllers/vega-file-uploader-value-controller';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { FileUploaderRequiredRule } from '../../helpers/validator/rules/file-uploader-required-rule';
+import { VegaFileUploaderDropFileFilterController } from './slimmers/controllers/vega-file-uploader-drop-file-filter-controller';
 /**
  * @version 2.25.0
  */
@@ -42,6 +43,7 @@ export class VegaFileUploader {
     this.vegaFileUploaderFileListRenderer = new VegaFileUploaderFileListRenderer();
     this.vegaFileUploaderFileStatusRenderer = new VegaFileUploaderFileStatusRenderer();
     this.vegaFileUploaderValueController = new VegaFileUploaderValueController();
+    this.dropFileFilterController = new VegaFileUploaderDropFileFilterController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaChange);
     this.selectFileChangeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaSelectFileChange);
     this.removeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaRemove);
@@ -207,7 +209,7 @@ export class VegaFileUploader {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "VegaFileUploaderFile[]",
+        "original": "VegaFileUploaderFile[] | null",
         "resolved": "VegaFileUploaderFile[]",
         "references": {
           "VegaFileUploaderFile": {
@@ -318,7 +320,7 @@ export class VegaFileUploader {
       "type": "boolean",
       "mutable": true,
       "complexType": {
-        "original": "boolean",
+        "original": "boolean | null",
         "resolved": "boolean",
         "references": {}
       },
@@ -349,6 +351,9 @@ export class VegaFileUploader {
         "tags": [{
             "name": "version",
             "text": "2.25.0"
+          }, {
+            "name": "link",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept"
           }],
         "text": "Specifies the allowed file types for upload."
       },
@@ -635,6 +640,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "vegaFileUploaderValueController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "dropFileFilterController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "changeEventEmitter", void 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"; }
@@ -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);