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

package/dist/cjs/{formFieldControllerSlimmer-57d1a405.js → formFieldControllerSlimmer-69ea8396.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-const vegaSlimmer = require('./vega-slimmer-281f0079.js');
-const mapToComponentMethod = require('./map-to-component-method-ec6546f1.js');
-const featureFlagController = require('./featureFlagController-3b23a9cb.js');
+const vegaSlimmer = require('./vega-slimmer-af488dc3.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-58eee093.js');
 const string = require('./string-21427167.js');
-const changeManager = require('./changeManager-91f1f24a.js');
-const observer = require('./observer-126f19d0.js');
-const ui = require('./ui-97068bc7.js');
-const misc = require('./misc-3d30df91.js');
-const dynamicSlimmer = require('./dynamic-slimmer-e289eb0b.js');
-const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-a81a52b1.js');
+const changeManager = require('./changeManager-1dd5ac2a.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-f0546f9d.js');
+const staticSubjectTitle = require('./staticSubjectTitle-b02c917c.js');
+const ui = require('./ui-23cd9abb.js');
+const misc = require('./misc-0197689b.js');
+const dynamicSlimmer = require('./dynamic-slimmer-c718b7d9.js');
+const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-9751395d.js');
 
 /** The `FormFieldValidationRuleHandler` class is responsible for handling the validation rules for a form field. */
 class FormFieldValidationRuleHandler {
@@ -177,78 +177,108 @@ class FormFieldValidationRuleHandlerChain {
   }
 }
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/** The class VegaInternalEventID implements the VegaEventIDInterface and provides a method to get the current name. */
+class VegaInternalEventID {
+  /**
+   * This TypeScript constructor function takes a string parameter and assigns it to a private property called "name".
+   *
+   * @param {string} name - It is used to initialize an instance of the class with a specific name value.
+   */
+  constructor(name) {
+    this.name = name;
+  }
+  /**
+   * This TypeScript function returns the name stored in the object.
+   *
+   * @returns {string} The `name` property of the current object is being returned as a string.
+   */
+  getName() {
+    return this.name;
+  }
+}
+const VegaInternalValid = new VegaInternalEventID('valid');
+const VegaInternalFieldErrorStateChange = new VegaInternalEventID('fieldErrorStateChange');
+
+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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const DEFAULT_INPUT_CONTAINER_SELECTOR = '.vega-input-container';
 /** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
 class FieldErrorUIControllerSlimmer extends vegaSlimmer.VegaSlimmer {
   /**
-   * It takes an error message and displays it in the error container
+   * It takes an error message and displays it in the error container.
+   * TODO: Each component displays the error message and puts it in the code of the respective component.
+   * The ticket is https://gethired.atlassian.net/browse/VD-2508
    *
    * @param {string} errorMessage - The error message to display.
    */
   applyInputInvalidUI(errorMessage) {
-    if (errorMessage) {
-      const inputContainer = this.getInputElementContainer();
-      const errorContainer = this.getErrorContainer();
+    const inputContainer = this.getInputElementContainer();
+    if (errorMessage && inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
       errorContainer.innerHTML = errorMessage;
       errorContainer.classList.remove('vega-hidden');
       inputContainer.classList.add('error');
+      changeManager.ChangeManager.notify(eventEmitSlimmer.domNodeSubjectFactory.getSubject(this.host, VegaInternalFieldErrorStateChange), {
+        host: this.host,
+        showError: true,
+      });
     }
   }
   /**
    * Reset the input element's invalid UI
+   * TODO: Each component hides the error message and puts it in the code of the respective component.
+   * The ticket is https://gethired.atlassian.net/browse/VD-2508
    */
   resetInputInvalidUI() {
     const inputContainer = this.getInputElementContainer();
-    const errorContainer = this.getErrorContainer();
-    errorContainer.classList.add('vega-hidden');
-    inputContainer.classList.remove('error');
+    if (inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
+      errorContainer.classList.add('vega-hidden');
+      inputContainer.classList.remove('error');
+      changeManager.ChangeManager.notify(eventEmitSlimmer.domNodeSubjectFactory.getSubject(this.host, VegaInternalFieldErrorStateChange), {
+        host: this.host,
+        showError: false,
+      });
+    }
   }
   /**
    * Get the input element container
    *
-   * @returns {HTMLElement} The input element container.
+   * @returns {Nullable<HTMLElement>} The input element container.
    */
   getInputElementContainer() {
-    const inputContainerSelector = this.options && this.options.inputContainerSelector
-      ? this.options.inputContainerSelector
-      : DEFAULT_INPUT_CONTAINER_SELECTOR;
-    const inputContainer = this.host.querySelector(inputContainerSelector);
-    if (!inputContainer) {
-      throw new Error(`Can't not find inputContainer with selector ${inputContainerSelector}`);
-    }
-    return inputContainer;
+    return this.options && this.options.inputContainerGetter ? this.options.inputContainerGetter() : null;
   }
   /**
    * Get the error container, if it doesn't exist, create it
    *
+   * @param {HTMLElement} inputContainer - The input element container.
    * @returns {HTMLElement} The error container.
    */
-  getErrorContainer() {
+  getErrorContainer(inputContainer) {
     var _a;
-    const inputContainer = this.getInputElementContainer();
     let siblingContainer = inputContainer.nextSibling;
     if (!siblingContainer || !((_a = siblingContainer.classList) === null || _a === void 0 ? void 0 : _a.contains('vega-error'))) {
       siblingContainer = document.createElement('label');
       siblingContainer.classList.add('vega-error');
+      // vega-table needs to hide error content.
+      siblingContainer.setAttribute('part', 'field-error-message');
       inputContainer.after(siblingContainer);
     }
     return siblingContainer;
   }
 }
-__decorate$3([
+__decorate$4([
   vegaSlimmer.MapToComponentField()
 ], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
-__decorate$3([
+__decorate$4([
   vegaSlimmer.MapToComponentField()
 ], FieldErrorUIControllerSlimmer.prototype, "options", void 0);
 
-var __decorate$2 = (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;
@@ -261,7 +291,6 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
  * @property {FormFieldValidationRule<number | string | boolean>[] = []} defaultRules default rules used for validation
  * @property {FormFieldValidationRule<number | string | boolean>[]} additionalRules additional rules used for validation
  * @property {InputValidatorListener[]} listeners listeners monitoring on the validation result
- * @property {string} inputContainerSelector container that holds the input value
  * @property {unknown & { value?: number | string | boolean }} hostElement host element used to get the value for validation if input element is not present
  * @property {boolean} isTouched true if an element is touched
  * @property {boolean} isModified true if an element is modified
@@ -274,15 +303,14 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
 class FormFieldController {
   /**
    * This function is called when the component is created, and it sets up the observers that will be used to detect changes to the component's state.
-   * The first thing the constructor does is set the defaultRules, hostElement, inputContainerSelector, touchableArea, isTouched, isModified, and isDisabled properties
+   * The first thing the constructor does is set the defaultRules, hostElement, touchableArea, isTouched, isModified, and isDisabled properties
    *
    * @param {FormFieldValidationRule<number | string | boolean>[]} defaultRules - FormFieldValidationRule<T>[]
    * @param {FormFieldElement<number | string | boolean>} hostElement - The form field element that this validation manager is attached to.
    * @param {FormFieldDefaultValueType}  defaultValue - This is defualt value for value property of component.
    * @param {FormFieldOptionForSlimmer} options - The selector for the element that contains the input element.
-   * @param {string} [touchableArea=input] - This is the element that will be used to determine if the user has touched the field.
    */
-  constructor(defaultRules, hostElement, defaultValue, options, touchableArea = 'input') {
+  constructor(defaultRules, hostElement, defaultValue, options) {
     var _a, _b;
     this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
     this.resizeObserverSlimmer = dynamicSlimmer.createDynamicSlimmer(FormFieldController, pageResizeObserverSlimmer.PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
@@ -307,6 +335,7 @@ class FormFieldController {
     this.isModified = false;
     this.isVisible = false;
     this.formFieldValidationRuleHandlerChain = new FormFieldValidationRuleHandlerChain();
+    this.hostChildAddedBlurEventMap = new WeakMap();
     /**
      * The function handles the validation result and updates the UI accordingly.
      *
@@ -337,15 +366,27 @@ class FormFieldController {
       }
       this.invokeListeners(isValid);
       //change pending valid should be in last to solve the vegaValidate event emit issue
-      changeManager.ChangeManager.notify(changeManager.FORM_FIELD_PENDING_VALID_CHANGE, {
+      changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, {
         host: this.host,
         detail: isValid,
       });
       return isValid;
     };
+    /**
+     * It adds a blur event listener to all elements that match the selector in the touchableArea property
+     */
+    this.setupTouchedListener = () => {
+      this.getTouchableAreaElements()
+        .filter((item) => this.hostChildAddedBlurEventMap.get(item) !== true)
+        .forEach((item) => {
+        item.addEventListener('blur', () => {
+          this.updateIsTouched(true);
+        });
+        this.hostChildAddedBlurEventMap.set(item, true);
+      });
+    };
     this.defaultRules = defaultRules || [];
     this.host = hostElement;
-    this.touchableArea = touchableArea;
     this.defaultValue = defaultValue;
     this.options = options;
     this.initDisabledAttrObserver();
@@ -354,6 +395,7 @@ class FormFieldController {
     (_b = (_a = this.host).componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => {
       this.didRender();
     });
+    this.setupModifiedListener();
     this.listenHostElementKeydown();
     this.updateValidationHandlers();
   }
@@ -404,10 +446,14 @@ class FormFieldController {
    * The destroy function unregister the form reset observer
    */
   destroy() {
-    changeManager.ChangeManager.notify(changeManager.FORM_FIELD_ELEMENT_DISCONNECTED, {
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_ELEMENT_DISCONNECTED, {
       host: this.host,
     });
     this.unregisterFormResetObserver();
+    changeManager.ChangeManager.unregister(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, this.hostValueChangeObserver);
+    if (this.hostChildrenObserver) {
+      this.hostChildrenObserver.disconnect();
+    }
   }
   /**
    * It creates an observer that will watch the host element and set the isVisible property to true if
@@ -429,7 +475,7 @@ class FormFieldController {
     const input = this.host.value;
     const hasAsyncRules = this.formFieldValidationRuleHandlerChain.checkIncludesAsyncRuleHandler(input, status, triggerStatus);
     if (hasAsyncRules) {
-      changeManager.ChangeManager.notify(changeManager.FORM_FIELD_PENDING_VALID_CHANGE, { host: this.host, detail: null });
+      changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, { host: this.host, detail: null });
     }
     const isValid = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
     return isValid;
@@ -507,24 +553,57 @@ class FormFieldController {
    * Unregister the form reset observer.
    */
   unregisterFormResetObserver() {
-    changeManager.ChangeManager.unregister(changeManager.FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
+    changeManager.ChangeManager.unregister(staticSubjectTitle.FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
+  }
+  /**
+   * monitor the host component touchable area elements update
+   */
+  monitorTouchedListener() {
+    const inputContainer = this.getInputContainerElements();
+    if (inputContainer) {
+      this.hostChildrenObserver = new MutationObserver(() => {
+        this.setupTouchedListener();
+      });
+      this.hostChildrenObserver.observe(inputContainer, {
+        childList: true,
+        subtree: true,
+      });
+    }
+    this.setupTouchedListener();
   }
   /**
-   * It adds a blur event listener to all elements that match the selector in the touchableArea property
+   * Get an array of HTMLElements that represent the touchable area elements based on the host's tag name.
+   *
+   * @returns {HTMLElement[]} an array of HTMLElements.
    */
-  setupTouchedListener() {
-    this.host.querySelectorAll(this.touchableArea).forEach((item) => item.addEventListener('blur', () => {
-      this.updateIsTouched(true);
-    }));
+  getTouchableAreaElements() {
+    return this.options && this.options.touchableAreaGetter ? this.options.touchableAreaGetter() : [];
+  }
+  /**
+   * Get the input container element based on the options provided.
+   *
+   * @returns {HTMLElement} the form field element input container element
+   */
+  getInputContainerElements() {
+    return this.options && this.options.inputContainerGetter ? this.options.inputContainerGetter() : null;
   }
   /**
    * It adds an event listener to the host element that listens for a custom event called `vegaChange`.
    * When that event is fired, the `updateIsModified` function is called with the argument `true`
    */
   setupModifiedListener() {
-    this.host.addEventListener('vegaChange', () => {
-      this.updateIsModified(true);
-    });
+    this.hostValueChangeObserver = new eventEmitSlimmer.Observer(this.isCurrentTarget.bind(this), () => this.updateIsModified(true));
+    changeManager.ChangeManager.register(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, this.hostValueChangeObserver);
+  }
+  /**
+   * The function checks if the host of the input matches the host of the current target.
+   *
+   * @param {NotifyObserverPayload<unknown>} input - The `input` parameter is of type `NotifyObserverPayload<unknown>`.
+   * @returns {boolean} a boolean value, which indicates whether the `host` property of the current object is
+   * equal to the `host` property of the `input` object.
+   */
+  isCurrentTarget(input) {
+    return this.host === input.host;
   }
   /**
    * It resets the form field's status and then validates the form field with the current value
@@ -559,16 +638,15 @@ class FormFieldController {
    * the input element, and sets up the listeners for the `touched` and `modified` events
    */
   didRender() {
-    this.setupTouchedListener();
-    this.setupModifiedListener();
+    this.monitorTouchedListener();
   }
   /**
    * This function registers an observer with the ChangeManager that will be notified when a form
    * reset operation is triggered
    */
   initFormResetObserver() {
-    this.formResetTriggeredObserver = new observer.Observer(this.canAcceptFormResetOperation.bind(this), this.reset.bind(this));
-    changeManager.ChangeManager.register(changeManager.FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
+    this.formResetTriggeredObserver = new eventEmitSlimmer.Observer(this.canAcceptFormResetOperation.bind(this), this.reset.bind(this));
+    changeManager.ChangeManager.register(staticSubjectTitle.FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
   }
   /**
    * "If the host element's autoValidation property is not false, then return true."
@@ -600,7 +678,7 @@ class FormFieldController {
     this.host.addEventListener('keydown', 
     /* istanbul ignore next */ (event) => {
       if (this.canSubmitFormByEvent(event)) {
-        changeManager.ChangeManager.notify(changeManager.FORM_SUBMIT, {
+        changeManager.ChangeManager.notify(staticSubjectTitle.FORM_SUBMIT, {
           host: this.host,
         });
       }
@@ -630,14 +708,14 @@ class FormFieldController {
     }
   }
 }
-__decorate$2([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], FormFieldController.prototype, "fieldErrorUIController", void 0);
-__decorate$2([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], FormFieldController.prototype, "resizeObserverSlimmer", void 0);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -667,14 +745,14 @@ class FieldErrorControllerSlimmer extends vegaSlimmer.VegaSlimmer {
    * register the observer when the slimmer method called
    */
   handleComponentWillLoadByFieldErrorSlimmer() {
-    this.fieldErrorMessageChangeObserver = new observer.Observer(this.canAcceptFieldErrorMessageUpdate.bind(this), this.handleFieldErrorMessageUpdate);
-    changeManager.ChangeManager.register(changeManager.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
+    this.fieldErrorMessageChangeObserver = new eventEmitSlimmer.Observer(this.canAcceptFieldErrorMessageUpdate.bind(this), this.handleFieldErrorMessageUpdate);
+    changeManager.ChangeManager.register(staticSubjectTitle.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
   }
   /**
    * unregister the observer when the slimmer method called
    */
   handleUnregisterObserver() {
-    changeManager.ChangeManager.unregister(changeManager.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
+    changeManager.ChangeManager.unregister(staticSubjectTitle.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
   }
   /**
    * The function checks if the host element is the parent of the field box.
@@ -691,22 +769,75 @@ class FieldErrorControllerSlimmer extends vegaSlimmer.VegaSlimmer {
     return false;
   }
 }
-__decorate$1([
+__decorate$2([
   vegaSlimmer.MapToComponentField()
 ], FieldErrorControllerSlimmer.prototype, "host", void 0);
-__decorate$1([
+__decorate$2([
   vegaSlimmer.MapToComponentField()
 ], FieldErrorControllerSlimmer.prototype, "options", void 0);
-__decorate$1([
-  vegaSlimmer.InjectVegaSlimmer()
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('setInjectFormFieldHelper')
+__decorate$2([
+  vegaSlimmer.MapToComponentMethod('setInjectFormFieldHelper')
 ], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
-__decorate$1([
-  mapToComponentMethod.MapToComponentMethod('destroy')
+__decorate$2([
+  vegaSlimmer.MapToComponentMethod('destroy')
 ], FieldErrorControllerSlimmer.prototype, "handleUnregisterObserver", 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;
+};
+/** The FormFieldValidInvokeSlimmer class extends VegaSlimmer and handles validation calls for form elements. */
+class FormFieldValidInvokeSlimmer extends vegaSlimmer.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * call the component validate method, complete the promise and notify the parent form update the isValid property
+     *
+     * @param {CallValidPayloadType} payload The element, valid parameter and a promise resolve handle
+     */
+    this.handleValidInvocation = async (payload) => {
+      if (this.validator) {
+        if (payload.timerId !== undefined) {
+          clearTimeout(payload.timerId);
+        }
+        const isValid = await this.validator.validate(payload.message);
+        if (typeof payload.promiseResolve === 'function') {
+          payload.promiseResolve(isValid);
+        }
+      }
+    };
+  }
+  /**
+   * register the observer when the slimmer method called
+   */
+  registerValidInvocationObserver() {
+    eventEmitSlimmer.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalValid, this.handleValidInvocation);
+  }
+  /**
+   * unregister the observer when the slimmer method called
+   */
+  handleUnregisterObserver() {
+    eventEmitSlimmer.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalValid);
+  }
+}
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "host", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "validator", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentMethod('setInjectFormFieldHelper')
+], FormFieldValidInvokeSlimmer.prototype, "registerValidInvocationObserver", null);
+__decorate$1([
+  vegaSlimmer.MapToComponentMethod('destroy')
+], FormFieldValidInvokeSlimmer.prototype, "handleUnregisterObserver", null);
+
 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);
@@ -730,6 +861,7 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
   constructor(options) {
     super();
     this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
+    this.formFieldValidInvokeSlimmer = new FormFieldValidInvokeSlimmer();
     this.options = options;
   }
   /**
@@ -750,16 +882,6 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
     this.setAdditionalRules();
     this.internalValidate();
   }
-  /**
-   * call the method when the component call valid method
-   *
-   * @param {boolean | 'rule'} showError show error message or not
-   * @returns {Promise<boolean>} the validation result
-   */
-  validByFormControllerSlimmer(showError = true) {
-    var _a;
-    return (_a = this.validator) === null || _a === void 0 ? void 0 : _a.validate(showError);
-  }
   /**
    * listen the attributes change when connectedCallback method call
    */
@@ -790,17 +912,15 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
    * inject form file help when componentWillLoad method call
    */
   setInjectFormFieldHelper() {
-    const isFeatureEnabled = featureFlagController.FeatureFlag.isEnabled('VEGA_INJECT_FORM_FIELD_CONTROLLER.ADD_DATA_VEGA_FORM_FILTER');
-    if (!isFeatureEnabled ||
-      (isFeatureEnabled && FormFieldControllerSlimmer.isValidFormField(this.host))) {
-      const { defaultValue, touchableAreaSelector } = this.options;
-      const validator = new FormFieldController(this.getPropertyRules(), this.host, defaultValue, this.options, touchableAreaSelector);
+    if (FormFieldControllerSlimmer.isValidFormField(this.host)) {
+      const { defaultValue } = this.options;
+      const validator = new FormFieldController(this.getPropertyRules(), this.host, defaultValue, this.options);
       validator.addListener({
         /* eslint-disable jsdoc/require-jsdoc */
         callback: (isValid) => {
           if (this.isValid != isValid) {
             this.isValid = isValid;
-            this.vegaValidate && this.vegaValidate.emit(isValid);
+            changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALIDATE, { host: this.host, detail: isValid });
           }
         },
       });
@@ -891,28 +1011,27 @@ __decorate([
   vegaSlimmer.MapToComponentField({ writable: true })
 ], FormFieldControllerSlimmer.prototype, "isValid", void 0);
 __decorate([
-  vegaSlimmer.MapToComponentField()
-], FormFieldControllerSlimmer.prototype, "vegaValidate", void 0);
-__decorate([
-  vegaSlimmer.InjectVegaSlimmer()
+  globalSlimmerRegistry.InjectVegaSlimmer()
 ], FormFieldControllerSlimmer.prototype, "fieldErrorSlimmer", void 0);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('watchValidationRules')
-], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "formFieldValidInvokeSlimmer", void 0);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('valid')
-], FormFieldControllerSlimmer.prototype, "validByFormControllerSlimmer", null);
+  vegaSlimmer.MapToComponentMethod('watchValidationRules')
+], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('connectedCallback')
+  vegaSlimmer.MapToComponentMethod('connectedCallback')
 ], FormFieldControllerSlimmer.prototype, "initialFormFieldHelper", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
+  vegaSlimmer.MapToComponentMethod('disconnectedCallback')
 ], FormFieldControllerSlimmer.prototype, "destroy", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('componentDidLoad')
+  vegaSlimmer.MapToComponentMethod('componentDidLoad')
 ], FormFieldControllerSlimmer.prototype, "createRuleObserve", null);
 __decorate([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+  vegaSlimmer.MapToComponentMethod('componentWillLoad')
 ], FormFieldControllerSlimmer.prototype, "setInjectFormFieldHelper", null);
 
 exports.FormFieldControllerSlimmer = FormFieldControllerSlimmer;
+exports.VegaInternalFieldErrorStateChange = VegaInternalFieldErrorStateChange;
+exports.VegaInternalValid = VegaInternalValid;

package/dist/cjs/{vega-slimmer-281f0079.js → global-slimmer-registry-58eee093.js}

@@ -36,62 +36,6 @@ const SlimmerMappedMethod = Symbol('ProcessorInternalCallback');
 const SlimmerConsumedBy = Symbol('SlimmerConsumedBy');
 const ConsumerSlimmers = Symbol('ConsumerSlimmers');
 
-/**
- * Decorator to map a slimmer field to a component field, which means:
- * - If you get the slimmer field value, it will return the corresponding component field value.
- * - If you set the slimmer field to some value, it will set the corresponding component field to the same value (if not readonly).
- *
- * We will use the component field name as the default value for the slimmer field name.
- *
- * @param {MapToComponentFieldOptions} options The options for the decorator
- * @returns {Function} The decorator function
- */
-function MapToComponentField(options) {
-  return function (slimmerPrototype, propertyKey) {
-    Object.defineProperty(slimmerPrototype, propertyKey, {
-      get: createSlimmerMappingFieldGetter(propertyKey, options),
-      set: createSlimmerMappingFieldSetter(propertyKey, options),
-      configurable: true,
-    });
-  };
-}
-/**
- * Helper function to create a setter for a slimmer field that maps to the injecting component field.
- * We will use the component field name as the default value for the slimmer field name.
- *
- * @param {string} slimmerFieldName The name of the slimmer field
- * @param {MapToComponentFieldOptions} options The options of the slimmer field
- * @returns {Function} A setter for the slimmer field
- */
-function createSlimmerMappingFieldSetter(slimmerFieldName, options = {}) {
-  return function (value) {
-    var _a;
-    if (!options.writable) {
-      LogUtility.error(`${slimmerFieldName} is not writable`);
-      return;
-    }
-    const dependentComponent = this[SlimmerConsumedBy];
-    const fieldName = (_a = options.componentFieldName) !== null && _a !== void 0 ? _a : slimmerFieldName;
-    dependentComponent[fieldName] = value;
-  };
-}
-/**
- * Helper function to create a getter for a slimmer field that maps to the injecting component field.
- * We will use the component field name as the default value for the slimmer field name.
- *
- * @param {string} slimmerFieldName The name of the slimmer field
- * @param {MapToComponentFieldOptions} options The options of the slimmer field
- * @returns {Function} A getter for the slimmer field
- */
-function createSlimmerMappingFieldGetter(slimmerFieldName, options = {}) {
-  return function () {
-    const { componentFieldName } = options;
-    const dependentComponent = this[SlimmerConsumedBy];
-    const fieldName = componentFieldName !== null && componentFieldName !== void 0 ? componentFieldName : slimmerFieldName;
-    return dependentComponent[fieldName];
-  };
-}
-
 /**
  * This decorator is used to re-define a field in a vega component
  * which will be used for injecting the VegaSlimmer into the vega component.
@@ -163,7 +107,7 @@ function createRegisteredSlimMethod(component, slimmer, originalMethod, mapEntry
   return function (...args) {
     const result = originalMethod === null || originalMethod === void 0 ? void 0 : originalMethod.apply(component, args);
     if (result && typeof result.then === 'function') {
-      return result.then(() => (slimmer[mapEntry.slimmerMethodName].call(slimmer, ...args)));
+      return result.then(() => slimmer[mapEntry.slimmerMethodName].call(slimmer, ...args));
     }
     else {
       return slimmer[mapEntry.slimmerMethodName].call(slimmer, ...args);
@@ -171,13 +115,18 @@ function createRegisteredSlimMethod(component, slimmer, originalMethod, mapEntry
   };
 }
 
-/**
- * An abstract class VegaSlimmer
- */
-class VegaSlimmer {
+class GlobalSlimmersRegistry {
+  static register(slimmers) {
+    this.globalSlimmers = slimmers;
+  }
 }
+GlobalSlimmersRegistry.globalSlimmers = [];
 
+exports.ConsumerSlimmers = ConsumerSlimmers;
+exports.GlobalSlimmersRegistry = GlobalSlimmersRegistry;
 exports.InjectVegaSlimmer = InjectVegaSlimmer;
-exports.MapToComponentField = MapToComponentField;
+exports.LogUtility = LogUtility;
+exports.SlimmerConsumedBy = SlimmerConsumedBy;
 exports.SlimmerMappedMethod = SlimmerMappedMethod;
-exports.VegaSlimmer = VegaSlimmer;
+exports.createGetterForVegaSlimmerField = createGetterForVegaSlimmerField;
+exports.createSetterForVegaSlimmerField = createSetterForVegaSlimmerField;