@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   --vega-litepicker-container-width: calc(var(--vega-litepicker-day-width) * 7);
   --vega-litepicker-day-width: 40px;

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -1,5 +1,15 @@
+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 { Component, Host, h } from '@stencil/core';
+import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 export class VegaDatePickerCalendar {
+  constructor() {
+    this.globalSlimmers = {};
+  }
   render() {
     return h(Host, null);
   }
@@ -12,3 +22,6 @@ export class VegaDatePickerCalendar {
     "$": ["vega-date-picker-calendar.css"]
   }; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
   width: 100%;

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -113,14 +113,6 @@ export class VegaDatePicker {
      * Specifies the size of the date picker field.
      */
     this.size = 'default';
-    /* Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582 */
-    /**
-     * Specifies whether updating the value of this attribute will
-     *    trigger a validation action for the form.
-     *
-     * @deprecated This property will be removed soon
-     */
-    this.formValidation = 0;
     /**
      * Specifies custom validation rules for the date picker field.
      */
@@ -179,14 +171,6 @@ export class VegaDatePicker {
   watchFormat(format) {
     methodPlaceholder(format);
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-click-form-valid}
-   */
-  /* istanbul ignore next */
-  watchFormValidation() {
-    void this.valid(true);
-  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -208,17 +192,6 @@ export class VegaDatePicker {
   watchDisabled() {
     methodPlaceholder();
   }
-  /**
-   * Invoke this method to validate the current value of the date picker.
-   * @deprecated This property will be removed soon
-   */
-  /* The below method is e2e-test covered in
-   * @see{module:vega-date-picker-click-call-valid}
-   * Linked issue: https://gitlab.com/heartland1/vega/tiger/-/issues/582
-   */
-  async valid(showError = true) {
-    return methodPlaceholder(showError);
-  }
   /**
    * Invoke this method to close the calendar dropdown
    *    associated with the date picker.
@@ -408,27 +381,6 @@ export class VegaDatePicker {
       "reflect": false,
       "defaultValue": "'default'"
     },
-    "formValidation": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }],
-        "text": "Specifies whether updating the value of this attribute will\n   trigger a validation action for the form."
-      },
-      "attribute": "form-validation",
-      "reflect": false,
-      "defaultValue": "0"
-    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,
@@ -621,55 +573,15 @@ export class VegaDatePicker {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "A native event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
+        "text": "An event emitter notifying the change of the value in the date picker,\n   whether triggered programmatically or through user interaction."
       },
       "complexType": {
         "original": "string | string[]",
         "resolved": "string | string[]",
         "references": {}
       }
-    }, {
-      "method": "vegaValidate",
-      "name": "vegaValidate",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "vegaValidate is only used to listen on the vega-form component."
-          }],
-        "text": "An event emitter notifying the change in the validation result."
-      },
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      }
     }]; }
   static get methods() { return {
-    "valid": {
-      "complexType": {
-        "signature": "(showError?: boolean | 'rule') => Promise<boolean>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<boolean>"
-      },
-      "docs": {
-        "text": "Invoke this method to validate the current value of the date picker.",
-        "tags": [{
-            "name": "deprecated",
-            "text": "This property will be removed soon"
-          }]
-      }
-    },
     "doClose": {
       "complexType": {
         "signature": "() => Promise<void>",
@@ -719,9 +631,6 @@ export class VegaDatePicker {
     }, {
       "propName": "format",
       "methodName": "watchFormat"
-    }, {
-      "propName": "formValidation",
-      "methodName": "watchFormValidation"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"

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

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host vega-modal {
   padding-left: 16px;
   padding-right: 16px;

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

@@ -68,7 +68,7 @@ export class VegaDialog {
         : isSmallScreen, size: this.modalProps.size || this.dialogDefaultSize, open: true, modalTitle: this.dialogTitle, backdrop: 'static' });
     return sanitizeVegaComponent(h(Host, null,
       h("vega-modal", Object.assign({}, mergedModalProps, { ref: (ref) => {
-          DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClose, () => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, () => {
             this.onModalClose();
           });
         } }),
@@ -76,12 +76,12 @@ export class VegaDialog {
         h("div", { slot: "modal-footer" },
           h("div", { class: "vega-dialog-actions-container" },
             this.showCancel && (h("vega-button", Object.assign({}, mergedCancelButtonProps, { ref: (ref) => {
-                DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClick, (input) => {
+                DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
                   this.handleCancelBtnClick(input);
                 });
               } }), ((_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.label) || 'Cancel')),
             h("vega-button", Object.assign({}, mergedOkButtonProps, { ref: (ref) => {
-                DomNodeSubjectObserverFactory.addObserverToNode(ref, VegaClick, (input) => {
+                DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
                   this.handleOkBtnClick(input);
                 });
               } }), ((_b = this.okButton) === null || _b === void 0 ? void 0 : _b.label) || 'OK'))))), this.host);

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

@@ -17,7 +17,7 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
      * The `syncUpDropdownCurrentDataBySlot` method is responsible for
      * synchronizing the current data in a dropdown based on the items present in the slot.
      */
-    this.syncUpDropdownCurrentDataBySlot = () => {
+    this.collectKeyAndLabelFromSlot = () => {
       const container = this.renderer.getDropdownRef() || this.host;
       Array.from(container.querySelectorAll('vega-dropdown-item')).forEach((item) => {
         item.label && this.labelSet.add(item.label);
@@ -75,23 +75,30 @@ export class VegaDropdownChildrenController extends VegaSlimmer {
   syncUpDropdownCurrentData() {
     this.clearDropdownCurrentData();
     if (this.renderModeController.isSourceRenderMode()) {
-      this.syncUpDropdownCurrentDataBySource();
+      this.collectKeyAndLabelFromSource(this.source);
     }
     else {
-      this.syncUpDropdownCurrentDataBySlot();
+      this.collectKeyAndLabelFromSlot();
     }
   }
   /**
-   * The function syncs up the current data in a dropdown based on the source data, by adding labels and
-   * keys to respective sets.
+   * The function collects unique labels and keys from a nested array of objects.
+   *
+   * @param {VegaDropdownSourceItem[]} items - An array of objects representing dropdown source items.
+   * Each object should have a "label" property representing the label of the dropdown option, and a
+   * "key" property representing the value of the dropdown option. Additionally, each object can have a
+   * "children" property which is an array of nested dropdown source items
    */
-  syncUpDropdownCurrentDataBySource() {
-    if (this.renderModeController.isSourceRenderMode()) {
-      this.source.forEach((item) => {
+  collectKeyAndLabelFromSource(items) {
+    items.forEach((item) => {
+      if (item['children']) {
+        this.collectKeyAndLabelFromSource(item['children']);
+      }
+      else {
         this.labelSet.add(item.label);
         this.keySet.add(item.key);
-      });
-    }
+      }
+    });
   }
   /* istanbul ignore next */
   /**

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

@@ -18,7 +18,7 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
     };
     this.onInputSearch = (node) => {
       this.searchInputRef = node;
-      DomNodeSubjectObserverFactory.addObserverToNode(node, VegaChange, (input) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
         this.search(input.detail);
       });
     };

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
   position: absolute;

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

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Element } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
-import { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaDropdownContentBox {
   constructor() {
+    this.globalSlimmers = {};
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
   }
   render() {
@@ -27,6 +28,9 @@ export class VegaDropdownContentBox {
   }; }
   static get elementRef() { return "host"; }
 }
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDropdownContentBox.prototype, "globalSlimmers", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdownContentBox.prototype, "eventPrevent", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-group/vega-dropdown-group.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

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

@@ -193,7 +193,7 @@ export class VegaDropdownItem {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying the dropdown item has been clicked."
+        "text": "An event emitter notifying the dropdown item has been clicked."
       },
       "complexType": {
         "original": "VegaDropdownItemClickEvent",

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

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
 }

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

@@ -727,7 +727,7 @@ export class VegaDropdown {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying that the dropdown has been displayed,\n   either programmatically or via user interaction. The name is not `show` because already has a method `show`."
+        "text": "An event emitter notifying that the dropdown has been displayed,\n   either programmatically or via user interaction. The name is not `show` because already has a method `show`."
       },
       "complexType": {
         "original": "string",
@@ -760,7 +760,7 @@ export class VegaDropdown {
             "name": "eventSemantics",
             "text": "namespace:native"
           }],
-        "text": "An native event emitter notifying that the dropdown has been dismissed,\n   either programmatically or via user interaction. The name is not `hide` because already has a method `hide`."
+        "text": "An event emitter notifying that the dropdown has been dismissed,\n   either programmatically or via user interaction. The name is not `hide` because already has a method `hide`."
       },
       "complexType": {
         "original": "string",

package/dist/collection/components/vega-field-error/vega-field-error.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: block;
 }

package/dist/collection/components/vega-field-label/vega-field-label.css

@@ -1,4 +1,4 @@
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: inline-block;
 }

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

@@ -2864,9 +2864,14 @@
     gap: 2px;
   }
 }
-/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
+/* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */ /* This file is generated by vega-design 2.0.71 */
 :host {
   display: flex;
+  flex-direction: column;
+}
+
+:host(.vega-flex-native-based:not([class*=v-flex-col], [class*=v-flex-row-reverse])) {
+  flex-direction: row;
 }
 
 :host > ::slotted(.vega-flex-grow) {
@@ -2951,6 +2956,75 @@
     flex-shrink: 0;
   }
 }
+:host(:not(.vega-flex-native-based)) > ::slotted(*:not([data-shrink="0"], [class*=vega-flex])) {
+  width: 100%;
+  display: block;
+}
+
+:host > ::slotted(*[data-shrink="0"]) {
+  min-width: 100%;
+  flex-shrink: 1;
+}
+
+@media (min-width: 320px) {
+  :host(.vega-flex-S) {
+    flex-direction: row;
+  }
+}
+@media (min-width: 320px) {
+  :host(.vega-flex-S) > ::slotted(*[data-shrink="0"]) {
+    flex-shrink: 0;
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+}
+@media (min-width: 768px) {
+  :host(.vega-flex-M) {
+    flex-direction: row;
+  }
+}
+@media (min-width: 768px) {
+  :host(.vega-flex-M) > ::slotted(*[data-shrink="0"]) {
+    flex-shrink: 0;
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.vega-flex-L) {
+    flex-direction: row;
+  }
+}
+@media (min-width: 1024px) {
+  :host(.vega-flex-L) > ::slotted(*[data-shrink="0"]) {
+    flex-shrink: 0;
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+}
+@media (min-width: 1440px) {
+  :host(.vega-flex-XL) {
+    flex-direction: row;
+  }
+}
+@media (min-width: 1440px) {
+  :host(.vega-flex-XL) > ::slotted(*[data-shrink="0"]) {
+    flex-shrink: 0;
+    min-width: -webkit-min-content;
+    min-width: -moz-min-content;
+    min-width: min-content;
+  }
+}
+:host(.vega-flex-None) > ::slotted(*[data-shrink="0"]) {
+  flex-shrink: 0;
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+
 :host(.v-flex-row) {
   flex-direction: row;
 }

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

@@ -5,26 +5,47 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Prop, Element } from '@stencil/core';
+import { FeatureFlag } from '../../helpers/feature-control/featureFlagController';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { formatAndValidResponsiveToken } from '../../utils/designToken';
+import { formatAndValidFlexBreakpoint, formatAndValidResponsiveToken } from '../../utils/designToken';
 import { arrayToClassString } from '../../utils/ui';
 import { InjectVegaGlobalSlimmer } from 'vega-slimmer/core';
 export class VegaFlex {
   constructor() {
     this.globalSlimmers = {};
+    /**
+     * Determines the breakpoint at which the flex direction transitions from
+     *    row-based layout to column-based layout, or vice versa.
+     *
+     * @deprecated Please use the `direction` property instead.
+     */
+    this.breakpoint = 'S';
     /**
      * Specifies the flex direction.
      */
     this.direction = 'row';
+    /**
+     * Specifies whether to use the native flex layout.
+     *
+     * @deprecated This property will be removed soon and vega-flex will only support native-based flex behaviors.
+     */
+    this.useNativeFlex = true;
   }
   render() {
     const classNames = [
       formatAndValidResponsiveToken(this.gap, 'gap'),
       formatAndValidResponsiveToken(this.margin, 'margin'),
+      this.breakpoint !== 'None' && !FeatureFlag.isEnabled('VEGA_FLEX.ENABLE_DIRECTION_ONLY')
+        ? formatAndValidFlexBreakpoint(this.breakpoint)
+        : '',
       formatAndValidResponsiveToken(this.alignItems, 'flexAlignItem'),
       formatAndValidResponsiveToken(this.justifyContent, 'flexJustifyContent'),
-      formatAndValidResponsiveToken(this.direction, 'flexDirection'),
+      this.useNativeFlex ? 'vega-flex-native-based' : '',
     ];
+    if (FeatureFlag.isEnabled('VEGA_FLEX.ENABLE_DIRECTION_ONLY') || this.breakpoint === 'None') {
+      classNames.push('vega-flex-None');
+      classNames.push(formatAndValidResponsiveToken(this.direction, 'flexDirection'));
+    }
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) },
       h("slot", null)), this.host);
   }
@@ -89,6 +110,32 @@ export class VegaFlex {
       "attribute": "margin",
       "reflect": false
     },
+    "breakpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BreakpointsTokenType | 'None'",
+        "resolved": "\"L\" | \"M\" | \"None\" | \"S\" | \"XL\" | \"default\"",
+        "references": {
+          "BreakpointsTokenType": {
+            "location": "import",
+            "path": "../../types/designToken.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "Please use the `direction` property instead."
+          }],
+        "text": "Determines the breakpoint at which the flex direction transitions from\n   row-based layout to column-based layout, or vice versa."
+      },
+      "attribute": "breakpoint",
+      "reflect": false,
+      "defaultValue": "'S'"
+    },
     "direction": {
       "type": "string",
       "mutable": false,
@@ -167,6 +214,27 @@ export class VegaFlex {
       },
       "attribute": "justify-content",
       "reflect": false
+    },
+    "useNativeFlex": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "This property will be removed soon and vega-flex will only support native-based flex behaviors."
+          }],
+        "text": "Specifies whether to use the native flex layout."
+      },
+      "attribute": "use-native-flex",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get elementRef() { return "host"; }