@globalpayments/vega 2.96.0 → 2.98.0

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

@@ -14,6 +14,8 @@ import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-ob
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A divider is a vertical or horizontal line that separates content or actions on a page.
+ *
  * @vegaVersion 2.10.0
  */
 export class VegaDivider {

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

@@ -1 +1,11 @@
 export const VEGA_DROPDOWN_SELECT_ALL_KEY = '__SELECT_ALL__';
+export const VEGA_DROPDOWN_DEFAULT_CONFIG = {
+  alignment: 'start',
+  caseSensitive: false,
+  isLoading: false,
+  isScreenPosition: false,
+  itemDisplayRule: 'newline',
+  placement: ['bottom', 'top'],
+  positionRelativeTo: undefined,
+  searchNoResultsText: 'No results found',
+};

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

@@ -19,6 +19,7 @@ import { VegaDropdownGroupLevelRenderer } from './slimmers/renderers/vega-dropdo
 import { VegaDropdownSearchController } from './slimmers/controllers/vega-dropdown-search-controller';
 import { VegaDropdownSelectedController } from './slimmers/controllers/vega-dropdown-selected-controller';
 import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dropdown-render-mode-controller';
+import { VEGA_DROPDOWN_DEFAULT_CONFIG } from './constants';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
@@ -33,6 +34,8 @@ import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaDropdownResetRenderer } from './slimmers/renderers/vega-dropdown-reset-renderer';
 import { VegaDropdownSelectAllController } from './slimmers/controllers/vega-dropdown-select-all-controller';
 /**
+ * The dropdown menu component displays a menu with multiple actions or options, triggered by a button.
+ *
  * @vegaVersion 1.3.0
  */
 export class VegaDropdown {
@@ -163,9 +166,10 @@ export class VegaDropdown {
      * Specifies the display rule for items in the dropdown.
      *
      * @VegaWarning Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value.
+     * @defaultValue 'newline'
      * @vegaVersion 1.13.0
      */
-    this.itemDisplayRule = 'newline';
+    this.itemDisplayRule = VEGA_DROPDOWN_DEFAULT_CONFIG.itemDisplayRule;
     /**
      * Determines if the dropdown height should be automatically adjusted
      *    to fit its container height.
@@ -182,9 +186,10 @@ export class VegaDropdown {
      * Note that the default filter rules are fuzzy matching and case-insensitive.
      *    This parameter only takes effect when `searchable` is set to `true`.
      *
+     * @defaultValue false
      * @vegaVersion 1.4.0
      */
-    this.caseSensitive = false;
+    this.caseSensitive = VEGA_DROPDOWN_DEFAULT_CONFIG.caseSensitive;
     /**
      * Controls whether the dropdown can add a new item when
      *    no proper item is available. It becomes active only when
@@ -210,23 +215,26 @@ export class VegaDropdown {
     /**
      * Determines whether the dropdown displays a loading status.
      *
+     * @defaultValue false
      * @vegaVersion 1.24.0
      */
-    this.isLoading = false;
+    this.isLoading = VEGA_DROPDOWN_DEFAULT_CONFIG.isLoading;
     /**
      * Specifies the vertical positioning of the dropdown
      *    within its container or relative to a reference point.
      *
+     * @defaultValue ['bottom', 'top']
      * @vegaVersion 1.41.0
      */
-    this.placement = ['bottom', 'top'];
+    this.placement = VEGA_DROPDOWN_DEFAULT_CONFIG.placement;
     /**
      * Determines the horizontal positioning of the dropdown
      *    within its container or relative to a reference point.
      *
+     * @defaultValue 'start'
      * @vegaVersion 1.41.0
      */
-    this.alignment = 'start';
+    this.alignment = VEGA_DROPDOWN_DEFAULT_CONFIG.alignment;
     /**
      * Determines whether the dropdown displays a lazy loading status.
      *
@@ -261,9 +269,10 @@ export class VegaDropdown {
      *
      * @VegaWarning - Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.
      * 			    - Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     * @defaultValue false
      * @vegaVersion 2.36.0
      */
-    this.isScreenPosition = false;
+    this.isScreenPosition = VEGA_DROPDOWN_DEFAULT_CONFIG.isScreenPosition;
     /**
      * Specifies whether the selected option in the dropdown can be cleared.
      *    It allows users to reset the selectedSourceKey when a selection has already been made.
@@ -288,9 +297,10 @@ export class VegaDropdown {
     /**
      * Specifies the no search results text for the dropdown.
      *
+     * @defaultValue 'No results found'
      * @vegaVersion 2.74.0
      */
-    this.searchNoResultsText = 'No results found';
+    this.searchNoResultsText = VEGA_DROPDOWN_DEFAULT_CONFIG.searchNoResultsText;
     /**
      * Allows users to select or deselect all items in the dropdown.
      *    Only applicable when selectType is set to 'multiple'.
@@ -748,6 +758,9 @@ export class VegaDropdown {
         "tags": [{
             "name": "VegaWarning",
             "text": "Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value."
+          }, {
+            "name": "defaultValue",
+            "text": "'newline'"
           }, {
             "name": "vegaVersion",
             "text": "1.13.0"
@@ -756,7 +769,7 @@ export class VegaDropdown {
       },
       "attribute": "item-display-rule",
       "reflect": false,
-      "defaultValue": "'newline'"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.itemDisplayRule"
     },
     "itemTooltipProps": {
       "type": "unknown",
@@ -819,6 +832,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "defaultValue",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "1.4.0"
           }],
@@ -826,7 +842,7 @@ export class VegaDropdown {
       },
       "attribute": "case-sensitive",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.caseSensitive"
     },
     "dynamicOption": {
       "type": "boolean",
@@ -885,6 +901,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "defaultValue",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "1.24.0"
           }],
@@ -892,7 +911,7 @@ export class VegaDropdown {
       },
       "attribute": "is-loading",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.isLoading"
     },
     "placement": {
       "type": "string",
@@ -911,6 +930,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "defaultValue",
+            "text": "['bottom', 'top']"
+          }, {
             "name": "vegaVersion",
             "text": "1.41.0"
           }],
@@ -918,7 +940,7 @@ export class VegaDropdown {
       },
       "attribute": "placement",
       "reflect": false,
-      "defaultValue": "['bottom', 'top']"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.placement"
     },
     "alignment": {
       "type": "string",
@@ -937,6 +959,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "defaultValue",
+            "text": "'start'"
+          }, {
             "name": "vegaVersion",
             "text": "1.41.0"
           }],
@@ -944,7 +969,7 @@ export class VegaDropdown {
       },
       "attribute": "alignment",
       "reflect": false,
-      "defaultValue": "'start'"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.alignment"
     },
     "isLazyLoading": {
       "type": "boolean",
@@ -1006,6 +1031,9 @@ export class VegaDropdown {
         "tags": [{
             "name": "VegaWarning",
             "text": "- Setting this to `true` override the `positionRelativeTo` and `matchContainerHeight` properties, rendering them ineffective.\n- Currently, when set to `true`, the position calculation may be inaccurate if the popover is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+          }, {
+            "name": "defaultValue",
+            "text": "false"
           }, {
             "name": "vegaVersion",
             "text": "2.36.0"
@@ -1014,7 +1042,7 @@ export class VegaDropdown {
       },
       "attribute": "is-screen-position",
       "reflect": false,
-      "defaultValue": "false"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.isScreenPosition"
     },
     "resettable": {
       "type": "boolean",
@@ -1091,6 +1119,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "defaultValue",
+            "text": "'No results found'"
+          }, {
             "name": "vegaVersion",
             "text": "2.74.0"
           }],
@@ -1098,7 +1129,7 @@ export class VegaDropdown {
       },
       "attribute": "search-no-results-text",
       "reflect": false,
-      "defaultValue": "'No results found'"
+      "defaultValue": "VEGA_DROPDOWN_DEFAULT_CONFIG.searchNoResultsText"
     },
     "allowSelectAll": {
       "type": "boolean",

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

@@ -10,6 +10,8 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaFieldErrorMessageController } from './slimmers/controllers/vega-field-error-message-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * The Field Error component is a utility element used to independently manage the error state of form fields.
+ *
  * @vegaVersion 1.45.0
  */
 /** The VegaFieldBox class is a TypeScript React component that renders a box with a message and a slot for additional content. */

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

@@ -15,6 +15,18 @@ import { VegaClick } from '../../../../helpers/event-manager/event-id/vega-event
 export class VegaFileUploaderFileListRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    /**
+     * Determines whether delete should be disabled for a specific file.
+     */
+    this.isDeleteButtonDisabled = (file) => {
+      return this.disabled || (this.disableDeleteOnUpload && file.status === 'uploading');
+    };
+    /**
+     * Determines whether delete button should be hidden.
+     */
+    this.isDeleteButtonHidden = (file) => {
+      return this.hideDeleteButton || file.hideDeleteButton === true;
+    };
     /**
      * Used to trigger an event or action related to remove a specific file in the file uploader component
      *
@@ -57,6 +69,8 @@ export class VegaFileUploaderFileListRenderer extends VegaSlimmer {
         'vega-file-list-hidden': isFileListEmpty,
       } }, !isFileListEmpty &&
       this.value.map((file) => {
+        const isDeleteButtonDisabled = this.isDeleteButtonDisabled(file);
+        const isDeleteButtonHidden = this.isDeleteButtonHidden(file);
         return (h("vega-box", { key: file.key, class: "vega-file-uploader-file", padding: "size-8", corners: "rounded-8" },
           h("vega-flex", { alignItems: "start", justifyContent: "space-between" },
             h("vega-flex", { class: "vega-file-status-and-name", gap: "size-8", alignItems: "start" },
@@ -77,11 +91,11 @@ export class VegaFileUploaderFileListRenderer extends VegaSlimmer {
                     this.fileReUploadHandler(file);
                   });
                 } })),
-              h("vega-button-circle", { variant: "icon-only", size: "small", icon: VegaInternalIconManager.getIconKey('trash-can'), iconColor: "text-secondary", label: "Delete", tooltip: { disableInteractive: true }, disabled: this.disabled, ref: (button) => {
+              !isDeleteButtonHidden && (h("vega-button-circle", { variant: "icon-only", size: "small", icon: VegaInternalIconManager.getIconKey('trash-can'), iconColor: "text-secondary", label: "Delete", tooltip: { disableInteractive: true }, disabled: isDeleteButtonDisabled, ref: (button) => {
                   DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, () => {
                     this.fileRemoveHandler(file);
                   });
-                } })))));
+                } }))))));
       })));
   }
 }
@@ -97,6 +111,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "hideDeleteButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderFileListRenderer.prototype, "disableDeleteOnUpload", void 0);
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderFileListRenderer.prototype, "vegaFileUploaderFileStatusRenderer", void 0);

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

@@ -15,12 +15,14 @@ import { VegaFileUploaderFileStatusRenderer } from './slimmers/renderers/vega-fi
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaPreview, VegaRemove, VegaRetry, VegaSelectFileChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaFileUploaderValueController } from './slimmers/controllers/vega-file-uploader-value-controller';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { FileUploaderRequiredRule } from '../../helpers/validator/rules/file-uploader-required-rule';
 import { DropFileAcceptFilterSlimmer } from '../../helpers/slimmers/drop-file-accept-filter-slimmer';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaFileUploaderFileLimitController } from './slimmers/controllers/vega-file-uploader-file-limit-controller';
 /**
+ * The File Uploader allows users to select files for upload, either by dragging them into a drop area, or by opening files directly from their device.
+ *
  * @vegaVersion 2.25.0
  */
 export class VegaFileUploader {
@@ -91,6 +93,19 @@ export class VegaFileUploader {
      * @vegaVersion 2.25.0
      */
     this.disabled = false;
+    /**
+     * Specifies whether delete buttons for files should be hidden.
+     *
+     * @vegaVersion 2.98.0
+     */
+    this.hideDeleteButton = false;
+    /**
+     * Specifies whether delete buttons should be disabled only for files
+     *    that are currently uploading.
+     *
+     * @vegaVersion 2.98.0
+     */
+    this.disableDeleteOnUpload = false;
     /**
      * Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer.
      *
@@ -113,6 +128,14 @@ export class VegaFileUploader {
      * @vegaVersion 2.88.0
      */
     this.optional = false;
+    /**
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 2.97.0
+     */
+    this.name = '';
     /**
      * Defines custom validation rules for the File Uploader field.
      *
@@ -276,6 +299,48 @@ export class VegaFileUploader {
       "reflect": false,
       "defaultValue": "false"
     },
+    "hideDeleteButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.98.0"
+          }],
+        "text": "Specifies whether delete buttons for files should be hidden."
+      },
+      "attribute": "hide-delete-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableDeleteOnUpload": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.98.0"
+          }],
+        "text": "Specifies whether delete buttons should be disabled only for files\n   that are currently uploading."
+      },
+      "attribute": "disable-delete-on-upload",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "maxCount": {
       "type": "number",
       "mutable": false,
@@ -342,6 +407,30 @@ export class VegaFileUploader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
+      },
+      "attribute": "name",
+      "reflect": true,
+      "defaultValue": "''"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,
@@ -545,7 +634,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",
@@ -571,7 +660,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",
@@ -594,7 +683,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",
@@ -620,7 +709,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",
@@ -643,7 +732,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",
@@ -669,7 +758,7 @@ export class VegaFileUploader {
       },
       "complexType": {
         "original": "VegaFileUploaderFile",
-        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; }",
+        "resolved": "{ key: string; name: string; url: string | File; previewable?: boolean; status?: VegaFileUploaderFileStatus; errorMessage?: string; uploadingPercent?: number; hideDeleteButton?: boolean; }",
         "references": {
           "VegaFileUploaderFile": {
             "location": "import",

package/dist/collection/components/vega-flag-icon/vega-flag-icon.js

@@ -11,6 +11,8 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { VegaFlagIconRenderer } from './slimmers/renderers/vega-flag-icon-renderer';
 import { VegaFlagIconController } from './slimmers/controllers/vega-flag-icon-controller';
 /**
+ * The flag icon component can render flags of different countries.
+ *
  * @vegaVersion 2.46.0
  */
 export class VegaFlagIcon {

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

@@ -15,6 +15,8 @@ import { VegaFlexRuntimeMetricsPayloadDefinition } from '../../constants/runtime
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { formatFlexStyles } from '../../helpers/formatter/style-formatter';
 /**
+ * The Flex component is a low-level utility container that implements CSS Flexbox, and allows setting gap and margin values using predefined size tokens.
+ *
  * @vegaVersion 1.0.4
  */
 export class VegaFlex {

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

@@ -17,6 +17,8 @@ import { VegaFontRenderer } from './slimmers/renderers/vega-font-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaFontRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-font/runtime-metrics-payload-definition';
 /**
+ * The Font component functions much like an HTML font element, and is used to style text by applying typography and color tokens.
+ *
  * @vegaVersion 1.46.0
  */
 export class VegaFont {

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-field-controller.js

@@ -10,11 +10,11 @@ import { isElementVisible, isParent } from '../../../../utils/ui';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { FORM_ELEMENT_VALIDATE, FORM_ELEMENT_VALUE_CHANGE, FORM_FIELD_ELEMENT_DISCONNECTED, FORM_FIELD_PENDING_VALID_CHANGE, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { FormFieldControllerSlimmer } from '../../../../helpers/slimmers/form-field-controller-slimmer';
 import { ChildNodesNotifyObserverSlimmer, } from '../../../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { isObjectArrayLike } from '../../../../utils/array';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalValid } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { getFormFieldKey, isValidFormField } from '../../../../helpers/slimmers/form/utils/form-field-key';
 /**
  * The form field controller for vega form to manage the form field states.
  */
@@ -47,13 +47,12 @@ export class VegaFormFieldController extends VegaSlimmer {
       if (payload.host !== this.host) {
         const target = payload.host;
         const isElementValid = payload.detail;
-        if (FormFieldControllerSlimmer.isValidFormField(target) &&
-          this.shouldVisitElement(target, false, false)) {
+        if (isValidFormField(target) && this.shouldVisitElement(target, false, false)) {
           if (isElementValid) {
             this.invalidFieldPathMap.delete(target);
           }
           else {
-            this.invalidFieldPathMap.set(target, target.dataset['vegaForm']);
+            this.invalidFieldPathMap.set(target, getFormFieldKey(target));
           }
         }
       }
@@ -166,13 +165,14 @@ export class VegaFormFieldController extends VegaSlimmer {
     this.isTouched = isTouched;
   }
   /**
-   * It returns the value of data-vega-form that the given element is associated with.
+   * It returns the form field key that the given element is associated with.
+   * Returns the value of data-vega-form if present, otherwise returns the value of the name attribute.
    *
    * @param {HTMLElement} element - The element that is being validated.
-   * @returns {string} The name of the field.
+   * @returns {string} The form field key.
    */
   getFormFieldName(element) {
-    return element.dataset['vegaForm'];
+    return getFormFieldKey(element);
   }
   /**
    * Check if the given element is part of the current form.
@@ -197,7 +197,7 @@ export class VegaFormFieldController extends VegaSlimmer {
   async navigateVegaFormChildren(visitor, option, startElementNode = this.host) {
     const promiseQueue = [];
     Array.from(startElementNode.children).forEach((child) => {
-      if (FormFieldControllerSlimmer.isValidFormField(child)) {
+      if (isValidFormField(child)) {
         if (this.shouldVisitElement(child, option === null || option === void 0 ? void 0 : option.skipDisabled, option === null || option === void 0 ? void 0 : option.skipInvisible)) {
           promiseQueue.push(visitor(child, child.tagName === 'VEGA-FORM'));
         }
@@ -241,7 +241,7 @@ export class VegaFormFieldController extends VegaSlimmer {
       this.pendingValidFieldPathMap.delete(payload.host);
     }
     else {
-      this.pendingValidFieldPathMap.set(payload.host, payload.host.dataset['vegaForm']);
+      this.pendingValidFieldPathMap.set(payload.host, getFormFieldKey(payload.host));
     }
   }
   /**

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-field-validation-state-controller.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { FIELD_ERROR_MESSAGE_CHANGE, FORM_ELEMENT_VALIDATE, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { FormFieldControllerSlimmer } from '../../../../helpers/slimmers/form-field-controller-slimmer';
+import { isValidFormField } from '../../../../helpers/slimmers/form/utils/form-field-key';
 /**
  * The field error controller for vega form to set validation errors on form fields.
  */
@@ -19,8 +19,8 @@ export class VegaFormFieldValidationStateController extends VegaSlimmer {
    */
   setValidationStates(states) {
     if (states.length === 0) {
-      Array.from(this.host.querySelectorAll('[data-vega-form]'))
-        .filter((child) => FormFieldControllerSlimmer.isValidFormField(child))
+      Array.from(this.host.querySelectorAll('[data-vega-form], [name]'))
+        .filter((child) => isValidFormField(child))
         .forEach((fieldHost) => {
         this.updateFieldValidationState(fieldHost, { isValid: true });
       });
@@ -46,8 +46,8 @@ export class VegaFormFieldValidationStateController extends VegaSlimmer {
     const fields = fieldName.split('.');
     let currentHost = this.host;
     for (const fieldName of fields) {
-      const element = currentHost.querySelector(`[data-vega-form="${fieldName}"]`);
-      if (FormFieldControllerSlimmer.isValidFormField(element)) {
+      const element = currentHost.querySelector(`[data-vega-form="${fieldName}"], [name="${fieldName}"]`);
+      if (isValidFormField(element)) {
         currentHost = element;
       }
       else {

package/dist/collection/components/vega-form/slimmers/renderers/native-form-renderer.js

@@ -14,7 +14,7 @@ export class NativeFormRenderer extends VegaSlimmer {
     return this.nativeFormRef;
   }
   render() {
-    return (h("form", { action: this.action, method: this.method, ref: (ref) => {
+    return (h("form", { action: this.action, method: this.method, name: this.name, ref: (ref) => {
         if (ref) {
           this.nativeFormRef = ref;
         }
@@ -28,3 +28,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], NativeFormRenderer.prototype, "action", void 0);
+__decorate([
+  MapToComponentField()
+], NativeFormRenderer.prototype, "name", void 0);