@globalpayments/vega 2.96.0 → 2.97.0

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/link-type-handler.js

@@ -0,0 +1,49 @@
+export const urlLinkTypeHandler = {
+  key: 'url',
+  defaultFallbackProtocol: undefined,
+  /** @inheritDoc */
+  getRequiredValue: (record) => { var _a; return (_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : ''; },
+  /** @inheritDoc */
+  getTextValue: (formValues) => formValues.text || '',
+  /** @inheritDoc */
+  getFallbackText: () => '',
+  /** @inheritDoc */
+  buildFinalUrl: (formValues, { normalizeUrl }) => normalizeUrl(formValues.url || ''),
+  /** @inheritDoc */
+  getInitialFormValues: (record, { normalizeUrl }) => {
+    var _a, _b;
+    return ({
+      text: (_a = record === null || record === void 0 ? void 0 : record.text) !== null && _a !== void 0 ? _a : '',
+      url: normalizeUrl((_b = record === null || record === void 0 ? void 0 : record.url) !== null && _b !== void 0 ? _b : ''),
+    });
+  },
+};
+export const emailLinkTypeHandler = {
+  key: 'email',
+  defaultFallbackProtocol: 'mailto:',
+  /** @inheritDoc */
+  getRequiredValue: (record, { parseMailtoUrl }) => {
+    var _a;
+    const { emailAddress } = parseMailtoUrl((_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : '');
+    return emailAddress;
+  },
+  /** @inheritDoc */
+  getTextValue: (formValues) => formValues.text || '',
+  /** @inheritDoc */
+  getFallbackText: (formValues) => formValues.emailAddress || '',
+  /** @inheritDoc */
+  buildFinalUrl: (formValues, { buildEmailUrl }) => buildEmailUrl(formValues.emailAddress || '', formValues.messageSubject || '', formValues.messageBody || ''),
+  /** @inheritDoc */
+  getInitialFormValues: (record, { parseMailtoUrl }) => {
+    var _a, _b;
+    const { emailAddress, subject, body } = parseMailtoUrl((_a = record === null || record === void 0 ? void 0 : record.url) !== null && _a !== void 0 ? _a : '');
+    return {
+      text: (_b = record === null || record === void 0 ? void 0 : record.text) !== null && _b !== void 0 ? _b : '',
+      emailAddress,
+      messageSubject: subject,
+      messageBody: body,
+    };
+  },
+};
+export const LINK_TYPE_HANDLERS = [urlLinkTypeHandler, emailLinkTypeHandler];
+export const LINK_TYPE_HANDLER_MAP = new Map(LINK_TYPE_HANDLERS.map((handler) => [handler.key, handler]));

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/renderers/vega-rich-text-link-editor-renderer.js

@@ -5,79 +5,80 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaClick, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import { VegaInternalComponentDidRender, VegaInternalPopoverUpdateTarget, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import ChangeManager from '../../../../../helpers/change-manager/change-manager';
-import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
-import { findParent } from '../../../../../utils/ui';
-import { VegaRTELinkExtension } from '../../../extensions/link/link-extension';
-import { normalizeUrlByDefaultProtocol } from '../../../extensions/link/utils';
+import { VegaClick, VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { RTE_EMAIL_LINK_TYPE_KEY } from '../../../constants/constant';
 export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.handleKeyDown = (e) => {
-      if (e.key === 'Enter') {
-        void this.formRef.getValue().then(({ text, url }) => {
-          const normalizedUrl = this.normalizeUrlByDefaultProtocol(url);
-          if (normalizedUrl.length > 0) {
-            this.changeEventEmitter.emit({
-              action: 'link',
-              payload: { text: text || normalizedUrl, url: normalizedUrl },
-            });
-            void this.popoverRef.hide();
+    this.handlePopoverRef = (ref) => {
+      this.popoverRef = ref;
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => this.linkEditorController.handlePopoverShow());
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+        this.linkEditorController.handlePopoverHide();
+      });
+    };
+    this.handleButtonGroupRef = (node) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
+        switch (detail) {
+          case 'edit': {
+            this.linkEditorController.handleEditAction();
+            return;
+          }
+          case 'unlink': {
+            void this.linkEditorController.handleUnlinkAction();
           }
-        });
+        }
+      });
+    };
+    this.handleFormRef = (ref) => {
+      this.formRef = ref;
+    };
+    this.handleUrlInputRef = (ref) => {
+      if (ref) {
+        this.urlInputRef = ref;
       }
     };
-  }
-  /**
-   * Component lifecycle - [componentDidLoad]{@link VegaRichTextLinkEditor.componentDidLoad}
-   */
-  componentDidLoad() {
-    this.updatePopoverTarget();
-  }
-  /**
-   * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
-   */
-  componentDidRender() {
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
-  }
-  watchStatusChange() {
-    if (this.status === 'linkEdit') {
-      setTimeout(() => {
-        void this.urlInputRef.doFocus();
+    this.handleTextInputRef = (ref) => {
+      this.textInputRef = ref;
+    };
+    this.handleLinkFieldKeyDown = (e) => {
+      this.linkEditorController.handleKeyDown(e);
+    };
+    this.handleUrlVegaChange = (e) => {
+      this.linkEditorController.handleUrlVegaChange(e);
+    };
+    this.handleLinkTypeSelectRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (payload) => {
+        void this.linkEditorController.handleLinkTypeChange(payload);
       });
-    }
-  }
-  watchTargetChange() {
-    this.updatePopoverTarget();
+    };
+    this.handleCancelButtonRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+        void this.getPopoverRef().hide();
+      });
+    };
+    this.handleSubmitButtonRef = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+        void this.linkEditorController.submitLink();
+      });
+    };
   }
   getPopoverRef() {
     return this.popoverRef;
   }
+  getFormRef() {
+    return this.formRef;
+  }
+  getUrlInputRef() {
+    return this.urlInputRef;
+  }
+  getTextInputRef() {
+    return this.textInputRef;
+  }
   render() {
-    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
-        this.popoverRef = ref;
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
-          var _a, _b, _c;
-          if (this.status === 'linkEdit') {
-            void this.urlInputRef.doFocus();
-          }
-          void this.formRef.setValue({
-            text: (_a = this.record) === null || _a === void 0 ? void 0 : _a.text,
-            url: this.normalizeUrlByDefaultProtocol((_c = (_b = this.record) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : ''),
-          });
-        });
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
-          void this.formRef.reset();
-          if (this.resetStatusAfterHide) {
-            this.status = 'editOrUnlinkSelection';
-          }
-        });
-      } },
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: this.handlePopoverRef },
       h("span", { slot: "popover-content" },
         h("slot", null)),
       h("div", { slot: "popover" },
@@ -86,71 +87,78 @@ export class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
   }
   renderLinkUnlinkContent() {
     return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
-      h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
-            switch (detail) {
-              case 'edit': {
-                this.status = 'linkEdit';
-                return;
-              }
-              case 'unlink': {
-                this.changeEventEmitter.emit({ action: 'unlink' });
-                void this.popoverRef.hide();
-              }
-            }
-          });
-        } },
+      h("vega-button-group", { size: "small", variant: "tertiary", ref: this.handleButtonGroupRef, onKeyDown: this.handleLinkFieldKeyDown },
         h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
         h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
   }
   renderLinkEditContent() {
     return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
-      h("vega-form", { ref: (ref) => (this.formRef = ref) },
-        h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
-          h("vega-input", { "data-vega-form": "url", ref: (ref) => {
-              this.urlInputRef = ref;
-            }, size: "small", label: this.translationSlimmer.t('URL'), onKeyDown: this.handleKeyDown }),
-          h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+      h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+        this.renderLinkTypeSelector(),
+        h("vega-form", { ref: this.handleFormRef },
+          h("vega-flex", { direction: "col", gap: "size-16" },
+            this.renderTextInput(),
+            this.renderCurrentLinkTypeEditFields())),
+        this.renderActionButtons())));
+  }
+  renderCurrentLinkTypeEditFields() {
+    switch (this.linkEditorStateManager.getSelectedLinkTypeKey()) {
+      case RTE_EMAIL_LINK_TYPE_KEY:
+        return this.renderEmailLinkEditFields();
+      default:
+        return this.renderUrlLinkEditFields();
+    }
+  }
+  renderTextInput() {
+    return (h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", ref: this.handleTextInputRef, onKeyDown: this.handleLinkFieldKeyDown }));
   }
-  updatePopoverTarget() {
-    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), this.target);
+  renderEmailLinkEditFields() {
+    return [
+      h("vega-input", { key: "emailAddress", "data-vega-form": "emailAddress", required: true, ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('E-Mail Address'), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
+      h("vega-input", { key: "messageSubject", size: "small", label: this.translationSlimmer.t('Message Subject'), "data-vega-form": "messageSubject", onKeyDown: this.handleLinkFieldKeyDown }),
+      h("vega-textarea", { key: "messageBody", label: this.translationSlimmer.t('Message Body'), "data-vega-form": "messageBody", rows: 4, resizable: false }),
+    ];
   }
-  normalizeUrlByDefaultProtocol(url) {
-    const rteHost = findParent(this.host, 'vega-rich-text-editor');
-    const linkConfig = VegaRTELinkExtension.configStore.get(rteHost) || {};
-    return normalizeUrlByDefaultProtocol(url, linkConfig.defaultProtocol);
+  renderUrlLinkEditFields() {
+    return [
+      h("vega-input", { key: "url", "data-vega-form": "url", ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('URL'), required: this.linkTypeConfigController.hasConfiguredLinkTypes(), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
+    ];
+  }
+  renderLinkTypeSelector() {
+    if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
+      return null;
+    }
+    return (h("vega-input-select", { label: this.translationSlimmer.t('Link Type'), size: "small", source: this.linkTypeConfigController
+        .getConfiguredLinkTypes()
+        .map((item) => ({
+        id: item.key,
+        displayName: this.translationSlimmer.t(item.label),
+      })), vegaDropdownProps: { searchable: false }, value: this.linkEditorStateManager.getSelectedLinkTypeKey(), ref: this.handleLinkTypeSelectRef }));
+  }
+  renderActionButtons() {
+    if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
+      return null;
+    }
+    return (h("vega-flex", { style: { width: '100%' }, gap: "size-8", alignItems: "center", justifyContent: "end" },
+      h("vega-button", { variant: "secondary", label: this.translationSlimmer.t('Cancel'), ref: this.handleCancelButtonRef }),
+      h("vega-button", { label: this.translationSlimmer.t('Submit'), disabled: this.linkEditorStateManager.getIsSubmitDisabled(), ref: this.handleSubmitButtonRef })));
   }
 }
 __decorate([
   MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
 __decorate([
-  MapToComponentField({ writable: true })
+  MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "linkEditorController", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
+], VegaRichTextLinkEditorRenderer.prototype, "linkTypeConfigController", void 0);
 __decorate([
   MapToComponentField()
-], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);
-__decorate([
-  MapToComponentMethod('componentDidLoad')
-], VegaRichTextLinkEditorRenderer.prototype, "componentDidLoad", null);
-__decorate([
-  MapToComponentMethod('componentDidRender')
-], VegaRichTextLinkEditorRenderer.prototype, "componentDidRender", null);
-__decorate([
-  MapToComponentMethod('watchStatusChange')
-], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
-__decorate([
-  MapToComponentMethod('watchTargetChange')
-], VegaRichTextLinkEditorRenderer.prototype, "watchTargetChange", null);
+], VegaRichTextLinkEditorRenderer.prototype, "linkEditorStateManager", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/slimmers/utils/link-url-normalizer.js

@@ -0,0 +1,80 @@
+import { normalizeUrlByDefaultProtocol as normalizeUrlByProtocol } from '../../../extensions/link/utils';
+/**
+ * Normalizes link URLs and mailto values for the link editor.
+ */
+export class LinkUrlNormalizer {
+  /**
+   * Normalizes a URL with the provided default protocol.
+   *
+   * @param {string} url - URL to normalize.
+   * @param {string} defaultProtocol - Default protocol to apply.
+   * @returns {string} The normalized URL.
+   */
+  normalizeUrlByDefaultProtocol(url, defaultProtocol) {
+    return normalizeUrlByProtocol(url, defaultProtocol);
+  }
+  /**
+   * Parses a mailto URL into its structured parts.
+   *
+   * @param {string} url - Mailto URL to parse.
+   * @returns {MailtoUrlParts} The parsed mailto parts.
+   */
+  parseMailtoUrl(url) {
+    var _a, _b;
+    if (!url) {
+      return { emailAddress: '', subject: '', body: '' };
+    }
+    const withoutProtocol = url.startsWith('mailto:') ? url.slice('mailto:'.length) : url;
+    const questionIndex = withoutProtocol.indexOf('?');
+    if (questionIndex === -1) {
+      return {
+        emailAddress: this.decodeURIComponentSafely(withoutProtocol),
+        subject: '',
+        body: '',
+      };
+    }
+    const emailAddress = this.decodeURIComponentSafely(withoutProtocol.slice(0, questionIndex));
+    const params = new URLSearchParams(withoutProtocol.slice(questionIndex + 1));
+    return {
+      emailAddress,
+      subject: (_a = params.get('subject')) !== null && _a !== void 0 ? _a : '',
+      body: (_b = params.get('body')) !== null && _b !== void 0 ? _b : '',
+    };
+  }
+  /**
+   * Builds a mailto URL from the provided fields.
+   *
+   * @param {string} emailAddress - Email address value.
+   * @param {string} subject - Subject value.
+   * @param {string} body - Body value.
+   * @returns {string} The generated mailto URL.
+   */
+  buildEmailLinkUrl(emailAddress, subject, body) {
+    const normalizedEmailAddress = (emailAddress || '').trim().replace(/^(mailto:)+/i, '');
+    if (normalizedEmailAddress.length === 0) {
+      return '';
+    }
+    const queryParams = [];
+    if ((subject || '').trim().length > 0) {
+      queryParams.push(`subject=${encodeURIComponent(subject.trim())}`);
+    }
+    if ((body || '').trim().length > 0) {
+      queryParams.push(`body=${encodeURIComponent(body.trim())}`);
+    }
+    return `mailto:${normalizedEmailAddress}${queryParams.length > 0 ? `?${queryParams.join('&')}` : ''}`;
+  }
+  /**
+   * Decodes a URI component without throwing on malformed input.
+   *
+   * @param {string} value - Encoded value.
+   * @returns {string} The decoded value.
+   */
+  decodeURIComponentSafely(value) {
+    try {
+      return decodeURIComponent(value);
+    }
+    catch (_a) {
+      return value;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/vega-rich-text-link-editor.js

@@ -9,6 +9,9 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaRichTextLinkEditorRenderer } from './slimmers/renderers/vega-rich-text-link-editor-renderer';
+import { LinkEditorController } from './slimmers/controllers/link-editor-controller';
+import { LinkTypeConfigController } from './slimmers/controllers/link-type-config-controller';
+import { LinkEditorStateManager } from './slimmers/controllers/link-editor-state-manager';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
@@ -24,6 +27,9 @@ export class VegaRichTextLinkEditor {
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();
+    this.linkEditorController = new LinkEditorController();
+    this.linkTypeConfigController = new LinkTypeConfigController();
+    this.linkEditorStateManager = new LinkEditorStateManager();
     this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextLinkEditor, VegaChange);
     /**
      * Specifies the status of the link editor
@@ -53,6 +59,15 @@ export class VegaRichTextLinkEditor {
   async show() {
     await this.renderer.getPopoverRef().show();
   }
+  /**
+   * Provide a method to hide the link editor popover
+   *
+   * @vegaVersion 2.97.0
+   */
+  async hide() {
+    var _a;
+    await ((_a = this.renderer.getPopoverRef()) === null || _a === void 0 ? void 0 : _a.hide());
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
@@ -96,7 +111,7 @@ export class VegaRichTextLinkEditor {
       "mutable": false,
       "complexType": {
         "original": "VegaRTELinkEditorRecord",
-        "resolved": "{ text: string; url: string; }",
+        "resolved": "{ linkType?: string; text: string; url: string; }",
         "references": {
           "VegaRTELinkEditorRecord": {
             "location": "import",
@@ -224,6 +239,25 @@ export class VegaRichTextLinkEditor {
             "text": "2.34.0"
           }]
       }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Provide a method to hide the link editor popover",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }]
+      }
     }
   }; }
   static get elementRef() { return "host"; }
@@ -247,6 +281,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextLinkEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkEditorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkTypeConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "linkEditorStateManager", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextLinkEditor.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-selection-chip/vega-selection-chip-group/vega-selection-chip-group.js

@@ -14,7 +14,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 /**
@@ -77,6 +77,14 @@ export class VegaSelectionChipGroup {
      * @vegaVersion 2.90.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 selection chip group field.
      *
@@ -247,6 +255,30 @@ export class VegaSelectionChipGroup {
       "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": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -14,7 +14,7 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager
 import { SELECTION_TILE_VALUE_CHANGE } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { VegaSelectionTileGroupValueController } from './slimmers/controllers/vega-selection-tile-group-value-controller';
 import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/required-field-rule';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaSelectionTileGroupItemsController } from './slimmers/controllers/vega-selection-tile-group-items-controller';
@@ -99,6 +99,14 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.89.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 selection tile group field.
      *
@@ -309,6 +317,30 @@ export class VegaSelectionTileGroup {
       "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": "''"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-signature-capture/vega-signature-capture.js

@@ -14,7 +14,7 @@ import { WrittenModeRenderer } from './slimmers/written-mode/renderers/written-m
 import { WrittenModeSvgController } from './slimmers/written-mode/controllers/written-mode-svg-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
@@ -81,6 +81,14 @@ export class VegaSignatureCapture {
      * @vegaVersion 2.89.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 = '';
     /**
      * Determines whether the clear button is displayed.
      *
@@ -264,6 +272,30 @@ export class VegaSignatureCapture {
       "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": "''"
+    },
     "showClearBtn": {
       "type": "boolean",
       "mutable": false,