@globalpayments/vega 2.64.0 → 2.66.0

package/dist/cjs/vega-form.cjs.entry.js

@@ -3,42 +3,45 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-cceb5c79.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const observer = require('./observer-f49483e8.js');
-const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
-const array = require('./array-249289f2.js');
+const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const component = require('./component-1e352960.js');
-const ui = require('./ui-4ce1fa08.js');
-const immutableMap = require('./immutable-map-edf24b54.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-428d8802.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-4e96270e.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-58e3c010.js');
-const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-34ac3bfc.js');
-const vegaInternalEventId = require('./vega-internal-event-id-dfd8b802.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-52fa23af.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-90c26113.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d21a0935.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-eb803b14.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-f040608b.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-78682046.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-73aecfff.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-2a091912.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6d4a2c53.js');
+const observer = require('./observer-f49483e8.js');
+const ui = require('./ui-9e181079.js');
+const typeGuard = require('./type-guard-f12b5bae.js');
+const immutableMap = require('./immutable-map-edf24b54.js');
+const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-257fedb3.js');
+const array = require('./array-249289f2.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-4d1ce667.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./feature-flag-controller-ce2162c8.js');
+require('./index-4d7bce1a.js');
+require('./_commonjsHelpers-537d719a.js');
 require('./string-39438062.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./translation-ecfc704a.js');
+require('./translation-f5adcb9f.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
+require('./typography-4560e7f1.js');
 require('./number-4816603d.js');
-require('./internal-vega-event-manager-28b957c8.js');
-require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-ce2162c8.js');
-require('./index-4d7bce1a.js');
-require('./_commonjsHelpers-537d719a.js');
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__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;
@@ -61,14 +64,14 @@ class VegaFormNestStateController extends subStateObserverSlimmer.SubStateObserv
     });
   }
 }
-__decorate$3([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaFormNestStateController.prototype, "host", void 0);
-__decorate$3([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaFormNestStateController.prototype, "disableBlurValidation", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__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;
@@ -138,14 +141,14 @@ class VegaFormFieldValidationStateController extends globalSlimmerRegistry.VegaS
     changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALIDATE, { host: target, detail: isValid });
   }
 }
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaFormFieldValidationStateController.prototype, "host", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentMethod('setValidationStates')
 ], VegaFormFieldValidationStateController.prototype, "setValidationStates", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__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;
@@ -167,127 +170,212 @@ class NativeFormRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("slot", null)));
   }
 }
-__decorate$1([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], NativeFormRenderer.prototype, "method", void 0);
-__decorate$1([
+__decorate$4([
   globalSlimmerRegistry.MapToComponentField()
 ], NativeFormRenderer.prototype, "action", void 0);
 
-const vegaFormCss = ":host{display:block}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__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;
+  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;
 };
-const VegaForm = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.vegaValidate = index.createEvent(this, "vegaValidate", 7);
-    this.validate = index.createEvent(this, "validate", 7);
-    this.vegaFormSubmit = index.createEvent(this, "vegaFormSubmit", 7);
-    this.formSubmit = index.createEvent(this, "formSubmit", 7);
-    this.vegaFormReset = index.createEvent(this, "vegaFormReset", 7);
-    this.formReset = index.createEvent(this, "formReset", 7);
-    this.globalSlimmers = {};
-    this.submitEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaFormSubmit);
-    this.resetEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaFormReset);
-    this.validateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaValidate);
-    this.disableBlurValidationNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaForm, 'disableBlurValidation', 'watchDisableBlurValidation');
-    this.stateController = new VegaFormNestStateController();
-    this.childEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaFormSubmit, domNodeSubjectObserverFactory.VegaFormReset], () => this.host.querySelector('vega-form'), {
-      customPreventHandle: (e) => {
-        e.stopPropagation();
-      },
-    });
-    this.childFormValidateEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaValidate], () => this.host, {
-      customPreventHandle: (e) => {
-        e.stopPropagation();
-      },
+/**
+ * Controller responsible for handling form submission in the VegaForm component.
+ */
+class VegaFormSubmitController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback() {
+    this.registerFormSubmitChangeManager();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    this.unregisterFormSubmitChangeManager();
+  }
+  /**
+   * Submits the form using native HTML form submission with all current field values.
+   *
+   * This method collects all form field values, creates hidden input elements for each field,
+   * appends them to a container inside the native form, and then triggers the native
+   * `requestSubmit()` method to submit the form.
+   *
+   * The method ensures that the form data is available in the native form for submission,
+   * which is useful when `useNativeForm` is enabled.
+   *
+   * @returns {Promise<void>} Resolves when the form submission process is complete.
+   */
+  async submitWithFormData() {
+    if (!this.useNativeForm)
+      return;
+    const data = await this.host.getValue();
+    for (const dataKey in data) {
+      if (typeof data[dataKey] === 'object') {
+        // Use bracket notation for nested form object values
+        const bracketKeyMap = this.flattenObjectWithBrackets({
+          [dataKey]: data[dataKey],
+        });
+        for (const bracketKey in bracketKeyMap) {
+          const nestedHiddenInput = this.createHiddenInput(bracketKey, bracketKeyMap[bracketKey]);
+          this.nativeFormRenderer.getNativeFormRef().append(nestedHiddenInput);
+        }
+      }
+      else {
+        const hiddenInput = this.createHiddenInput(dataKey, data[dataKey]);
+        this.nativeFormRenderer.getNativeFormRef().append(hiddenInput);
+      }
+    }
+    this.nativeFormRenderer.getNativeFormRef().requestSubmit();
+  }
+  /**
+   * Creates a hidden input element with the specified name and value.
+   *
+   * @param {string} name - The name attribute for the hidden input.
+   * @param {unknown} value - The value attribute for the hidden input.
+   * @returns {HTMLInputElement} The created hidden input element.
+   */
+  createHiddenInput(name, value) {
+    const hiddenInput = tryGetDocument.tryGetDocument().createElement('input');
+    hiddenInput.type = 'hidden';
+    hiddenInput.name = name;
+    hiddenInput.value = typeGuard.isNonNullable(value) ? String(value) : '';
+    return hiddenInput;
+  }
+  /**
+   * Registers the form submit event observer with the ChangeManager.
+   */
+  registerFormSubmitChangeManager() {
+    var _a;
+    this.formSubmitEventObserver = new observer.Observer(this.canAcceptFormSubmitEvent.bind(this), this.handleSubmitEvents.bind(this));
+    const outerForm = (_a = ui.findParent(this.host, 'vega-form', { outerMost: true })) !== null && _a !== void 0 ? _a : this.host;
+    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(outerForm, vegaInternalEventId.VegaInternalFormSubmit), this.formSubmitEventObserver);
+  }
+  /**
+   * Unregister the form submit event observer from the ChangeManager.
+   */
+  unregisterFormSubmitChangeManager() {
+    var _a;
+    const outerForm = (_a = ui.findParent(this.host, 'vega-form', { outerMost: true })) !== null && _a !== void 0 ? _a : this.host;
+    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(outerForm, vegaInternalEventId.VegaInternalFormSubmit), this.formSubmitEventObserver);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-form-field-enter-to-submit-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Can accept handler for FORM_SUBMIT.
+   *
+   * @param {FormEventsPayload} payload - The payload containing the host element that triggered the submit event.
+   * @returns {boolean} True if the host element is part of the current form, false otherwise.
+   */
+  canAcceptFormSubmitEvent(payload) {
+    return this.vegaFormFieldController.isElementInCurrentForm(payload.host);
+  }
+  /**
+   * Handles the form submission process.
+   *
+   * @returns {Promise<void>} Resolves when the submission process is complete.
+   */
+  async handleSubmitEvents() {
+    const valid = await this.host.valid();
+    if (valid.isValid) {
+      const formValue = await this.host.getValue();
+      const submitEvent = this.submitEventEmitter.emit(formValue);
+      if (!submitEvent.defaultPrevented) {
+        await this.submitWithFormData();
+      }
+    }
+  }
+  /**
+   * Flattens a nested object into a single-level object with bracket notation for keys.
+   *
+   * @param {Record<string, unknown>} data - The nested object to be flattened.
+   * @param {string} [parentKey=''] - The prefix for the keys in the flattened object.
+   * @param {Record<string, unknown>} [out={}] - The output object that accumulates the flattened key-value pairs.
+   * @returns {Record<string, unknown>} The flattened object with bracket notation keys.
+   */
+  flattenObjectWithBrackets(data, parentKey = '', out = {}) {
+    Object.entries(data).forEach(([key, value]) => {
+      const currentKey = parentKey ? `${parentKey}[${key}]` : key;
+      if (Array.isArray(value)) {
+        // Recursively handle array items using index as key
+        value.forEach((item, index) => {
+          const arrayKey = `${currentKey}[${index}]`;
+          if (typeof item === 'object' && item !== null) {
+            // Recursively flatten objects inside the array
+            this.flattenObjectWithBrackets(item, arrayKey, out);
+          }
+          else {
+            out[arrayKey] = item;
+          }
+        });
+      }
+      else if (typeGuard.isNonNullable(value) && typeof value === 'object') {
+        this.flattenObjectWithBrackets(value, currentKey, out);
+      }
+      else {
+        out[currentKey] = value;
+      }
     });
+    return out;
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormSubmitController.prototype, "host", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormSubmitController.prototype, "useNativeForm", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormSubmitController.prototype, "nativeFormRenderer", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormSubmitController.prototype, "submitEventEmitter", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormSubmitController.prototype, "vegaFormFieldController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaFormSubmitController.prototype, "connectedCallback", null);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaFormSubmitController.prototype, "disconnectedCallback", null);
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+/**
+ * The form field controller for vega form to manage the form field states.
+ */
+class VegaFormFieldController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
     this.childNotifyObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.FORM_ELEMENT_VALIDATE, (input) => this.updateInternalValidStatus(input));
-    this.childNodeValueChangeObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, () => this.updateInternalTouchedStatus());
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.vegaFormFieldValidationStateController = new VegaFormFieldValidationStateController();
-    this.nativeFormRenderer = new NativeFormRenderer();
-    this.invalidFieldPathMap = new immutableMap.ImmutableMap(new Map(), (newMap) => {
-      this.invalidFieldPathMap = newMap;
-      this.updateIsValidFlag();
+    this.childNodeValueChangeObserver = new childNodesNotifyObserverSlimmer.ChildNodesNotifyObserverSlimmer(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, () => {
+      this.isTouched = true;
     });
-    // The form field element pending async valid map
-    this.pendingValidFieldPathMap = new immutableMap.ImmutableMap(new Map(), (newMap) => {
-      this.pendingValidFieldPathMap = newMap;
+    this._invalidFieldPathMap = new immutableMap.ImmutableMap(new Map(), (newMap) => {
+      this._invalidFieldPathMap = newMap;
       this.updateIsValidFlag();
     });
-    this.controlledFieldPathSet = new Set();
-    /**
-     * Indicates whether the current form-controlled elements are valid.
-     *
-     * Form-controlled elements are considered for validation if they
-     *    have the `data-vega-form` property.
-     *
-     * Disabled and invisible elements are excluded from validation.
-     *
-     * If the value is `undefined`, it means there are no
-     *    form-controlled elements that can be validated.
-     *
-     * **Additional Notes:**
-     *   1. When depending on `isValid` for form validation, it is advised
-     *      not to modify the following properties of the monitored DOM:
-     *      - `disabled` property
-     *      - Element visibility style
-     *   2. As this property relies heavily on the `VegaValidate` event emitted,
-     *      it is highly recommended to enable auto-validation for all
-     *      form-controlled elements to ensure that the value reflects
-     *      the most up-to-date form validation status.
-     *
-     * @vegaVersion 1.3.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.isValid = null;
-    /**
-     * Indicates whether the value of any current
-     *    form-controlled elements has been changed.
-     *
-     *   1. When the value of any form-controlled element is changed,
-     *      this parameter is set to `true`.
-     *   2. When resetting the form, this parameter is set to `false`.
-     *   3. When invoking the `setValue` method, this parameter is set to `false`.
-     *
-     * @vegaVersion 1.3.0
-     */
-    this.isTouched = false;
-    /**
-     * Specifies whether form validation should be disabled on blur events of form elements.
-     *
-     *  - This helps prevent validation on blur when clicking Submit inside an input,
-     *        avoiding error messages that shift the button and block the click.
-     *  - For nested forms, the parent form will override this property
-     *        to ensure consistent validation behavior.
-     *
-     * @vegaVersion 2.47.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.disableBlurValidation = false;
-    /**
-     * Determines whether the `vega-form` content is wrapped in a native HTML <form> element.
-     *
-     * @vegaVersion 2.64.0
-     */
-    this.useNativeForm = false;
     /**
-     * Specifies the HTTP method used for form submission.
-     *   This property takes effect only when {@link useNativeForm} is set to `true`.
-     *
-     * @vegaVersion 2.64.0
+     * The form field element pending async valid map
      */
-    this.method = 'get';
+    this._pendingValidFieldPathMap = new immutableMap.ImmutableMap(new Map(), (newMap) => {
+      this._pendingValidFieldPathMap = newMap;
+      this.updateIsValidFlag();
+    });
     /**
      * If the element is valid, remove it from the set of
      *    invalid elements. If the element is invalid,
@@ -311,44 +399,62 @@ const VegaForm = class {
       }
     };
   }
-  watchIsValid() {
-    this.validateEventEmitter.emit(this.isValid);
-    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALIDATE, { host: this.host, detail: this.isValid });
-  }
-  watchDisableBlurValidation() {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback() {
+    this.initFormFieldDisconnectedObserver();
+    this.registerFormFieldPendingValid();
   }
   /**
-   * When the vegaForm is deleted, it is necessary to notify
-   *    the parent's vegaForm to update its isValid status.
+   * When the vegaForm is deleted, it is necessary to notify the parent's vegaForm to update its isValid status.
    */
-  async disconnectedCallback() {
-    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_ELEMENT_DISCONNECTED, {
-      host: this.host,
-    });
+  disconnectedCallback() {
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_ELEMENT_DISCONNECTED, { host: this.host });
     changeManager.ChangeManager.unregister(staticSubjectTitle.FORM_FIELD_ELEMENT_DISCONNECTED, this.formFieldDisconnectedObserver);
     changeManager.ChangeManager.unregister(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, this.formFieldPendingValidObserver);
   }
-  async componentDidLoad() {
+  /**
+   * @inheritDoc
+   */
+  async getValue(option) {
+    const result = {};
     await this.navigateVegaFormChildren(async (element, isForm) => {
-      if (!isForm) {
-        this.controlledFieldPathSet.add(this.getFormFieldName(element, true));
+      const formFieldName = this.getFormFieldName(element);
+      if (isForm) {
+        result[formFieldName] = await element.getValue(option);
       }
-    });
-    this.initFormFieldDisconnectedObserver();
-    this.registerFormSubmitChangeManager();
-    this.registerFormResetChangeManager();
-    this.registerFormFieldPendingValidChangeManager();
+      else {
+        result[formFieldName] = this.getFormFieldValue(element);
+      }
+    }, option);
+    return (array.isObjectArrayLike(result) ? Object.values(result) : result);
   }
   /**
-   * Invoke this method asynchronously to retrieve the validation result for
-   *    all the vega field elements nested within the `vega-form`.
-   *
-   * If an element is a `vega-form` itself, it will recursively
-   *    invoke its `valid()` method.
-   *
-   * @param {boolean | 'rule'} showError determine whether the validation result should be reflected in UI
-   * @return {Promise<FormValidateResult> } validation result
-   * @vegaVersion 1.3.0
+   * @inheritDoc
+   */
+  async setValue(value, option) {
+    if (value) {
+      await this.navigateVegaFormChildren(async (element, isForm) => {
+        const formFieldName = this.getFormFieldName(element);
+        if (isForm) {
+          await element.setValue(value[formFieldName], option);
+        }
+        else {
+          await element.componentOnReady(); // Link issue https://gethired.atlassian.net/browse/GHUI-385
+          if (value[formFieldName] !== undefined) {
+            // If element have setValue method, we will directly call this method, otherwise we set the value to value property.
+            typeof element['setValue'] === 'function'
+              ? await element['setValue'](value[formFieldName])
+              : (element['value'] = value[formFieldName]);
+          }
+        }
+      }, option);
+      this.isTouched = false;
+    }
+  }
+  /**
+   * @inheritDoc
    */
   async valid(showError = true) {
     const result = { isValid: true, invalidFields: [] };
@@ -376,103 +482,46 @@ const VegaForm = class {
     return result;
   }
   /**
-   * Invoke this method asynchronously to retrieve the values for
-   *    all the available vega field elements nested within the `vega-form`.
+   * The getter for the {@link _invalidFieldPathMap}
    *
-   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
-   * @return {Promise<T>} object with key and field value as key-value pair
-   * @vegaVersion 1.3.0
+   * @returns {ImmutableMap<HTMLElement, string>} The map of invalid field elements and their paths
    */
-  async getValue(option) {
-    const result = {};
-    await this.navigateVegaFormChildren(async (element, isForm) => {
-      const formFieldName = this.getFormFieldName(element);
-      if (isForm) {
-        result[formFieldName] = await element.getValue(option);
-      }
-      else {
-        result[formFieldName] = VegaForm.getFormFieldValue(element);
-      }
-    }, option);
-    return (array.isObjectArrayLike(result) ? Object.values(result) : result);
+  get invalidFieldPathMap() {
+    return this._invalidFieldPathMap;
   }
   /**
-   * Invoke this method to prefill the `vega-form` with the given value.
+   * The getter for the {@link _pendingValidFieldPathMap}
    *
-   * This action will also set the `isTouched` property to `false`.
-   *
-   * @param value to prefill into the vega-form
-   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
-   * @vegaVersion 1.3.0
+   * @returns {ImmutableMap<HTMLElement, string>} The map of pending valid field elements and their paths
    */
-  async setValue(value, option) {
-    if (value) {
-      await this.navigateVegaFormChildren(async (element, isForm) => {
-        const formFieldName = this.getFormFieldName(element);
-        if (isForm) {
-          await element.setValue(value[formFieldName], option);
-        }
-        else {
-          await element.componentOnReady(); // Link issue https://gethired.atlassian.net/browse/GHUI-385
-          if (value[formFieldName] !== undefined) {
-            // If element have setValue method, we will directly call this method, otherwise we set the value to value property.
-            typeof element['setValue'] === 'function'
-              ? await element['setValue'](value[formFieldName])
-              : (element['value'] = value[formFieldName]);
-          }
-        }
-      }, option);
-      this.isTouched = false;
-    }
+  get pendingValidFieldPathMap() {
+    return this._pendingValidFieldPathMap;
   }
   /**
-   * Invoke this method to reset the vega field elements in the form to
-   *    the default value provided, or an empty string if
-   *    no default value is found.
-   *
-   * @param defaultValueMap map of the vega form field name to default value
-   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * Set the isTouched property of the form.
    *
-   * @vegaVersion 1.3.0
+   * @param {boolean} isTouched - The new value for isTouched.
    */
-  async reset(defaultValueMap = {}, option) {
-    await this.navigateVegaFormChildren(async (element, isForm) => {
-      const formFieldName = this.getFormFieldName(element);
-      if (isForm) {
-        await element.reset(defaultValueMap[formFieldName] || {}, option);
-      }
-    }, option);
-    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_RESET_OPERATION_TRIGGERED, {
-      host: this.host,
-      defaultValueMap,
-      option,
-    });
-    this.isTouched = false;
+  setIsTouched(isTouched) {
+    this.isTouched = isTouched;
   }
   /**
-   * Invoke this method to set validation states on specific form fields.
+   * It returns the value of data-vega-form that the given element is associated with.
    *
-   * @param {VegaFormFieldValidationState[]} states - An array of validation error objects.
-   *
-   * @vegaVersion 2.59.0
+   * @param {HTMLElement} element - The element that is being validated.
+   * @returns {string} The name of the field.
    */
-  async setValidationStates(states) {
-  }
-  static getFormFieldValue(element) {
-    return typeof element['value'] === 'undefined'
-      ? // use element.getAttribute since the value property is not available in unit testing
-        element.getAttribute('value')
-      : element['value'];
-  }
-  render() {
-    return component.sanitizeVegaComponent(index.h(index.Host, null, this.useNativeForm ? this.nativeFormRenderer.render() : index.h("slot", null)), this.host);
+  getFormFieldName(element) {
+    return element.dataset['vegaForm'];
   }
   /**
-   * If the value of any child elements have changed,
-   *    make 'isTouched' prop as false.
+   * Check if the given element is part of the current form.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} True if the element is part of the current form, false otherwise.
    */
-  updateInternalTouchedStatus() {
-    this.isTouched = true;
+  isElementInCurrentForm(element) {
+    return this.invalidFieldPathMap.has(element) || ui.isParent(element, this.host);
   }
   /**
    * Navigate the immediate child node under current vega form element with the following strategy
@@ -480,10 +529,10 @@ const VegaForm = class {
    *  - if a non-matched node found, it will call itself recursively and pass the node as the second parameter
    * Once the navigation is finished, it will wait for all the pending visitor/self-invocation promise finished before return
    *
-   * @param visitor async callback method that will be invoked if a matched vega field element found
+   * @param  {(element: HTMLElement, isForm: boolean) => Promise<void>} visitor async callback method that will be invoked if a matched vega field element found
    * @param {FormControlOption} [option] form control option to skip disabled/invisible components
-   * @param [startElementNode] element node that the navigation will be started from, default is the current host element
-   * @return {Promise<void>} return void wrapped with promise to notify the navigation is done
+   * @param {HTMLElement} [startElementNode=this.host] the element to start the navigation, default to current vega form host
+   * @returns {Promise<void>} return void wrapped with promise to notify the navigation is done
    */
   async navigateVegaFormChildren(visitor, option, startElementNode = this.host) {
     const promiseQueue = [];
@@ -500,53 +549,43 @@ const VegaForm = class {
     await Promise.all(promiseQueue);
   }
   /**
-   * Update the {@link isValid} property value based on the size of {@link invalidFieldPathSet}
+   * Update the {@link isValid} property value based on the size of {@link invalidFieldPathMap}
    * If the number of invalid elements is zero, then the form is valid.
    */
   updateIsValidFlag() {
     this.isValid = this.pendingValidFieldPathMap.size > 0 ? null : this.invalidFieldPathMap.size === 0;
   }
   /**
-   * It returns the value of data-vega-form that the given element is associated with, if child HTMLElements share the same data-vega-form property name
-   * in the same vega-form, then includePath has to be set to be true to get a complete path to avoid the confusion of isValid checking.
+   * Registers an observer with the ChangeManager that will be notified when a form field's pending validation state changes.
+   */
+  registerFormFieldPendingValid() {
+    this.formFieldPendingValidObserver = new observer.Observer(this.canAcceptFormFieldPendingValid.bind(this), this.handleFieldPendingValid.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, this.formFieldPendingValidObserver);
+  }
+  /**
+   * Can accept handler for FORM_FIELD_PENDING_VALID_CHANGE.
    *
-   * @param {HTMLElement} element - The element that is being validated.
-   * @param {boolean} [includePath] - If true, the field name will include the path to the field. For
-   * example, if the field is in a vega-form with the name "address", the field name will be "address ->
-   * street".
-   * @returns The name of the field.
-   */
-  getFormFieldName(element, includePath) {
-    let fieldName = element.dataset['vegaForm'];
-    if (includePath) {
-      let currentVegaForm = ui.findParent(element, 'vega-form');
-      /**
-       * The below method is e2e-test covered in
-       * @see {module:nested-vega-form-isValid-should-be-as-expected-when-value-changed}
-       */
-      /* istanbul ignore next */
-      while (currentVegaForm && currentVegaForm !== this.host) {
-        fieldName = currentVegaForm.dataset['vegaForm'] + ' -> ' + fieldName;
-        currentVegaForm = ui.findParent(currentVegaForm, 'vega-form');
-      }
-    }
-    return fieldName;
+   * @param {PendingValidPayload} payload - The payload containing the host element that triggered the pending valid change event.
+   * @returns {boolean} True if the host element is part of the current form, false otherwise.
+   */
+  canAcceptFormFieldPendingValid(payload) {
+    return this.isElementInCurrentForm(payload.host);
   }
   /**
-   * Return true if the HTMLElement has data-vega-form property and it's not disabled and not invisible if these two properties have to be checked.
+   * Handles the pending valid state change for a form field.
    *
-   * @param {HTMLElement} element - The HTMLElement to check.
-   * @param {boolean} skipDisabled - If true, then disabled form fields will be skipped.
-   * @param {boolean} skipInvisible - If true, only visible elements will be visited.
-   * @returns a boolean value.
+   * @param {PendingValidPayload} payload - The payload containing the host element and its pending valid state.
    */
-  shouldVisitElement(element, skipDisabled, skipInvisible) {
-    return (this.getFormFieldName(element) &&
-      (!skipDisabled || !element['disabled']) &&
-      (!skipInvisible || ui.isElementVisible(element)));
+  handleFieldPendingValid(payload) {
+    if (typeof payload.detail === 'boolean') {
+      this.pendingValidFieldPathMap.delete(payload.host);
+    }
+    else {
+      this.pendingValidFieldPathMap.set(payload.host, payload.host.dataset['vegaForm']);
+    }
   }
   /**
-   * This function registers an observer with the ChangeManager that will be notified when a element
+   * This function registers an observer with the ChangeManager that will be notified when an element
    * delete operation is triggered
    */
   initFormFieldDisconnectedObserver() {
@@ -564,87 +603,45 @@ const VegaForm = class {
   }
   /**
    * Get the fieldName of the deleted element in the current vegaForm, delete it from the invalidFieldPathSet array, and update isValid at the same time.
+   *
+   * @param {DisconnectedElementOperationPayload} payload - the delete element and vegaForm array.
    */
   async updateInvalidFieldPath(payload) {
     this.invalidFieldPathMap.delete(payload.host);
     this.pendingValidFieldPathMap.delete(payload.host);
   }
-  registerFormSubmitChangeManager() {
-    this.formEventsObserver = new observer.Observer(this.canAcceptFormSubmitEvent.bind(this), this.handleSubmitEvents.bind(this));
-    changeManager.ChangeManager.register(staticSubjectTitle.FORM_SUBMIT, this.formEventsObserver);
-  }
   /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-form-field-enter-to-submit-e2e}
+   * Return true if the HTMLElement has data-vega-form property, and it's not disabled and not invisible if these two properties have to be checked.
+   *
+   * @param {HTMLElement} element - The HTMLElement to check.
+   * @param {boolean} skipDisabled - If true, then disabled form fields will be skipped.
+   * @param {boolean} skipInvisible - If true, only visible elements will be visited.
+   * @returns {boolean} a boolean value.
    */
-  /* istanbul ignore next */
-  canAcceptFormSubmitEvent(payload) {
-    return this.isElementInCurrentForm(payload.host);
-  }
-  async handleSubmitEvents() {
-    const valid = await this.valid();
-    if (valid.isValid) {
-      const formValue = await this.getValue();
-      const submitEvent = this.submitEventEmitter.emit(formValue);
-      if (!submitEvent.defaultPrevented) {
-        await this.submitWithFormData();
-      }
-    }
+  shouldVisitElement(element, skipDisabled, skipInvisible) {
+    return (this.getFormFieldName(element) &&
+      (!skipDisabled || !element['disabled']) &&
+      (!skipInvisible || ui.isElementVisible(element)));
   }
   /**
-   * Submits the form using native HTML form submission with all current field values.
-   *
-   * This method collects all form field values, creates hidden input elements for each field,
-   * appends them to a container inside the native form, and then triggers the native
-   * `requestSubmit()` method to submit the form.
+   * It retrieves the value of a form field element.
    *
-   * The method ensures that the form data is available in the native form for submission,
-   * which is useful when `useNativeForm` is enabled.
-   *
-   * @returns {Promise<void>} Resolves when the form submission process is complete.
+   * @param {HTMLElement} element - The form field element.
+   * @returns {unknown} The value of the form field element.
    */
-  async submitWithFormData() {
-    if (!this.useNativeForm)
-      return;
-    const data = await this.getValue();
-    for (const dataKey in data) {
-      const hiddenInput = tryGetDocument.tryGetDocument().createElement('input');
-      hiddenInput.type = 'hidden';
-      hiddenInput.name = dataKey;
-      hiddenInput.value = data[dataKey];
-      this.nativeFormRenderer.getNativeFormRef().append(hiddenInput);
-    }
-    this.nativeFormRenderer.getNativeFormRef().requestSubmit();
-  }
-  registerFormResetChangeManager() {
-    this.formEventsObserver = new observer.Observer(this.canAcceptFormResetEvent.bind(this), this.handleResetEvents.bind(this));
-    changeManager.ChangeManager.register(staticSubjectTitle.FORM_RESET, this.formEventsObserver);
-  }
-  canAcceptFormResetEvent(payload) {
-    return this.isElementInCurrentForm(payload.host);
-  }
-  async handleResetEvents() {
-    await this.reset();
-    this.resetEventEmitter.emit();
-  }
-  registerFormFieldPendingValidChangeManager() {
-    this.formFieldPendingValidObserver = new observer.Observer(this.canAcceptFormFieldPendingValid.bind(this), this.handleFieldPendingValid.bind(this));
-    changeManager.ChangeManager.register(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, this.formFieldPendingValidObserver);
-  }
-  canAcceptFormFieldPendingValid(payload) {
-    return this.isElementInCurrentForm(payload.host);
-  }
-  handleFieldPendingValid(payload) {
-    if (typeof payload.detail === 'boolean') {
-      this.pendingValidFieldPathMap.delete(payload.host);
-    }
-    else {
-      this.pendingValidFieldPathMap.set(payload.host, payload.host.dataset['vegaForm']);
-    }
-  }
-  isElementInCurrentForm(element) {
-    return this.invalidFieldPathMap.has(element) || ui.isParent(element, this.host);
+  getFormFieldValue(element) {
+    return typeof element['value'] === 'undefined'
+      ? // use element.getAttribute since the value property is not available in unit testing
+        element.getAttribute('value')
+      : element['value'];
   }
+  /**
+   * It handles the validation of a child form field element.
+   *
+   * @param {HTMLElement} element - The form field element to validate.
+   * @param {boolean | 'rule'} showError - Whether to show error messages.
+   * @returns {Promise<EvaluateResultBase>} The validation result.
+   */
   async handleChildFormFieldElementValid(element, showError) {
     const subject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(element, vegaInternalEventId.VegaInternalValid);
     const { isValid, message } = await new Promise((resolve) => {
@@ -661,6 +658,303 @@ const VegaForm = class {
     });
     return { isValid, message };
   }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormFieldController.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaFormFieldController.prototype, "isValid", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaFormFieldController.prototype, "isTouched", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaFormFieldController.prototype, "childNotifyObserver", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaFormFieldController.prototype, "childNodeValueChangeObserver", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaFormFieldController.prototype, "connectedCallback", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaFormFieldController.prototype, "disconnectedCallback", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('getValue')
+], VegaFormFieldController.prototype, "getValue", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('setValue')
+], VegaFormFieldController.prototype, "setValue", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('valid')
+], VegaFormFieldController.prototype, "valid", null);
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/**
+ * Reset controller for handling form reset events in the VegaForm component.
+ */
+class VegaFormResetController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  connectedCallback() {
+    this.registerFormResetChangeManager();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    this.unregisterFormResetChangeManager();
+  }
+  /**
+   * @inheritDoc
+   */
+  async reset(defaultValueMap = {}, option) {
+    await this.vegaFormFieldController.navigateVegaFormChildren(async (element, isForm) => {
+      const formFieldName = this.vegaFormFieldController.getFormFieldName(element);
+      if (isForm) {
+        await element.reset(defaultValueMap[formFieldName] || {}, option);
+      }
+    }, option);
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_RESET_OPERATION_TRIGGERED, {
+      host: this.host,
+      defaultValueMap,
+      option,
+    });
+    this.vegaFormFieldController.setIsTouched(false);
+  }
+  /**
+   * Registers the form reset event observer with the ChangeManager.
+   */
+  registerFormResetChangeManager() {
+    var _a;
+    const outerForm = (_a = ui.findParent(this.host, 'vega-form', { outerMost: true })) !== null && _a !== void 0 ? _a : this.host;
+    this.formResetEventObserver = new observer.Observer(this.canAcceptFormResetEvent.bind(this), this.handleResetEvents.bind(this));
+    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(outerForm, vegaInternalEventId.VegaInternalFormReset), this.formResetEventObserver);
+  }
+  /**
+   * Unregister the form reset event observer from the ChangeManager.
+   */
+  unregisterFormResetChangeManager() {
+    var _a;
+    const outerForm = (_a = ui.findParent(this.host, 'vega-form', { outerMost: true })) !== null && _a !== void 0 ? _a : this.host;
+    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(outerForm, vegaInternalEventId.VegaInternalFormReset), this.formResetEventObserver);
+  }
+  /**
+   * Can accept form reset event.
+   *
+   * @param {FormEventsPayload} payload - The form events payload.
+   * @returns {boolean} True if the event can be accepted, false otherwise.
+   */
+  canAcceptFormResetEvent(payload) {
+    return this.vegaFormFieldController.isElementInCurrentForm(payload.host);
+  }
+  /**
+   * Handles reset events by resetting the form and emitting a reset event.
+   */
+  async handleResetEvents() {
+    await this.host.reset();
+    this.resetEventEmitter.emit();
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormResetController.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormResetController.prototype, "vegaFormFieldController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaFormResetController.prototype, "resetEventEmitter", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaFormResetController.prototype, "connectedCallback", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaFormResetController.prototype, "disconnectedCallback", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('reset')
+], VegaFormResetController.prototype, "reset", null);
+
+const vegaFormCss = ":host{display:block}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaForm = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaValidate = index.createEvent(this, "vegaValidate", 7);
+    this.validate = index.createEvent(this, "validate", 7);
+    this.vegaFormSubmit = index.createEvent(this, "vegaFormSubmit", 7);
+    this.formSubmit = index.createEvent(this, "formSubmit", 7);
+    this.vegaFormReset = index.createEvent(this, "vegaFormReset", 7);
+    this.formReset = index.createEvent(this, "formReset", 7);
+    this.globalSlimmers = {};
+    this.submitEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaFormSubmit);
+    this.resetEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaFormReset);
+    this.validateEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaForm, domNodeSubjectObserverFactory.VegaValidate);
+    this.disableBlurValidationNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaForm, 'disableBlurValidation', 'watchDisableBlurValidation');
+    this.stateController = new VegaFormNestStateController();
+    this.childEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaFormSubmit, domNodeSubjectObserverFactory.VegaFormReset], () => this.host.querySelector('vega-form'), {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
+    this.childFormValidateEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaValidate], () => this.host, {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaFormFieldValidationStateController = new VegaFormFieldValidationStateController();
+    this.nativeFormRenderer = new NativeFormRenderer();
+    this.vegaFormSubmitController = new VegaFormSubmitController();
+    this.vegaFormResetController = new VegaFormResetController();
+    this.vegaFormFieldController = new VegaFormFieldController();
+    /**
+     * Indicates whether the current form-controlled elements are valid.
+     *
+     * Form-controlled elements are considered for validation if they
+     *    have the `data-vega-form` property.
+     *
+     * Disabled and invisible elements are excluded from validation.
+     *
+     * If the value is `undefined`, it means there are no
+     *    form-controlled elements that can be validated.
+     *
+     * **Additional Notes:**
+     *   1. When depending on `isValid` for form validation, it is advised
+     *      not to modify the following properties of the monitored DOM:
+     *      - `disabled` property
+     *      - Element visibility style
+     *   2. As this property relies heavily on the `VegaValidate` event emitted,
+     *      it is highly recommended to enable auto-validation for all
+     *      form-controlled elements to ensure that the value reflects
+     *      the most up-to-date form validation status.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Indicates whether the value of any current
+     *    form-controlled elements has been changed.
+     *
+     *   1. When the value of any form-controlled element is changed,
+     *      this parameter is set to `true`.
+     *   2. When resetting the form, this parameter is set to `false`.
+     *   3. When invoking the `setValue` method, this parameter is set to `false`.
+     *
+     * @vegaVersion 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isTouched = false;
+    /**
+     * Specifies whether form validation should be disabled on blur events of form elements.
+     *
+     *  - This helps prevent validation on blur when clicking Submit inside an input,
+     *        avoiding error messages that shift the button and block the click.
+     *  - For nested forms, the parent form will override this property
+     *        to ensure consistent validation behavior.
+     *
+     * @vegaVersion 2.47.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.disableBlurValidation = false;
+    /**
+     * Determines whether the `vega-form` content is wrapped in a native HTML <form> element.
+     *
+     * @vegaVersion 2.64.0
+     */
+    this.useNativeForm = false;
+    /**
+     * Specifies the HTTP method used for form submission.
+     *   This property takes effect only when {@link useNativeForm} is set to `true`.
+     *
+     * @vegaVersion 2.64.0
+     */
+    this.method = 'get';
+  }
+  watchIsValid() {
+    this.validateEventEmitter.emit(this.isValid);
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALIDATE, { host: this.host, detail: this.isValid });
+  }
+  watchDisableBlurValidation() {
+  }
+  /**
+   * Invoke this method asynchronously to retrieve the validation result for
+   *    all the vega field elements nested within the `vega-form`.
+   *
+   * If an element is a `vega-form` itself, it will recursively
+   *    invoke its `valid()` method.
+   *
+   * @param {boolean | 'rule'} showError determine whether the validation result should be reflected in UI
+   * @return {Promise<FormValidateResult> } validation result
+   * @vegaVersion 1.3.0
+   */
+  async valid(showError = true) {
+    return placeholder.methodPlaceholder(showError);
+  }
+  /**
+   * Invoke this method asynchronously to retrieve the values for
+   *    all the available vega field elements nested within the `vega-form`.
+   *
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * @return {Promise<T>} object with key and field value as key-value pair
+   * @vegaVersion 1.3.0
+   */
+  async getValue(option) {
+    return placeholder.methodPlaceholder(option);
+  }
+  /**
+   * Invoke this method to prefill the `vega-form` with the given value.
+   *
+   * This action will also set the `isTouched` property to `false`.
+   *
+   * @param value to prefill into the vega-form
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * @vegaVersion 1.3.0
+   */
+  async setValue(value, option) {
+  }
+  /**
+   * Invoke this method to reset the vega field elements in the form to
+   *    the default value provided, or an empty string if
+   *    no default value is found.
+   *
+   * @param defaultValueMap map of the vega form field name to default value
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   *
+   * @vegaVersion 1.3.0
+   */
+  async reset(defaultValueMap = {}, option) {
+  }
+  /**
+   * Invoke this method to set validation states on specific form fields.
+   *
+   * @param {VegaFormFieldValidationState[]} states - An array of validation error objects.
+   *
+   * @vegaVersion 2.59.0
+   */
+  async setValidationStates(states) {
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.useNativeForm ? this.nativeFormRenderer.render() : index.h("slot", null)), this.host);
+  }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "isValid": ["watchIsValid"],
@@ -693,19 +987,22 @@ __decorate([
 ], VegaForm.prototype, "childFormValidateEventPrevent", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaForm.prototype, "childNotifyObserver", void 0);
+], VegaForm.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaForm.prototype, "vegaFormFieldValidationStateController", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaForm.prototype, "childNodeValueChangeObserver", void 0);
+], VegaForm.prototype, "nativeFormRenderer", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaForm.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+], VegaForm.prototype, "vegaFormSubmitController", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaForm.prototype, "vegaFormFieldValidationStateController", void 0);
+], VegaForm.prototype, "vegaFormResetController", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaForm.prototype, "nativeFormRenderer", void 0);
+], VegaForm.prototype, "vegaFormFieldController", void 0);
 VegaForm.style = vegaFormCss;
 
 exports.vega_form = VegaForm;