@heartlandone/vega 1.44.2 → 1.45.0

package/dist/cjs/{changeManager-db6724a9.js → changeManager-d4738fdb.js}

@@ -38,6 +38,8 @@ const TABLE_EXPAND_ROW = new Subject('TABLE_EXPAND_ROW');
 const TABLE_ROW_SELECTION = new Subject('TABLE_ROW_SELECTION');
 const TABLE_ROW_SELECTION_ALL = new Subject('TABLE_ROW_SELECTION_ALL');
 const TABLE_ROW_CLICK = new Subject('TABLE_ROW_CLICK');
+const SUB_STATE_CHANGE = new Subject('SUB_STATE_CHANGE');
+const FIELD_ERROR_MESSAGE_CHANGE = new Subject('FIELD_ERROR_MESSAGE_CHANGE');
 
 /**
  * The ChangeManager is a class that allows observers to register themselves to a subject
@@ -107,6 +109,7 @@ const ChangeManager$1 = new ChangeManager();
 exports.ACCORDION_EXPAND_TOPIC = ACCORDION_EXPAND_TOPIC;
 exports.CHECKBOX_GROUP_DISABLED_CHANGE = CHECKBOX_GROUP_DISABLED_CHANGE;
 exports.ChangeManager = ChangeManager$1;
+exports.FIELD_ERROR_MESSAGE_CHANGE = FIELD_ERROR_MESSAGE_CHANGE;
 exports.FORM_FIELD_ELEMENT_DISCONNECTED = FORM_FIELD_ELEMENT_DISCONNECTED;
 exports.FORM_FIELD_PENDING_VALID_CHANGE = FORM_FIELD_PENDING_VALID_CHANGE;
 exports.FORM_RESET = FORM_RESET;
@@ -115,6 +118,7 @@ exports.FORM_SUBMIT = FORM_SUBMIT;
 exports.LEFT_NAV_LINK_SELECTED_TOPIC = LEFT_NAV_LINK_SELECTED_TOPIC;
 exports.RADIO_GROUP_DISABLED_CHANGE = RADIO_GROUP_DISABLED_CHANGE;
 exports.SIDENAV_LINK_SELECTED_TOPIC = SIDENAV_LINK_SELECTED_TOPIC;
+exports.SUB_STATE_CHANGE = SUB_STATE_CHANGE;
 exports.TABLE_EXPAND_ROW = TABLE_EXPAND_ROW;
 exports.TABLE_ROW_CLICK = TABLE_ROW_CLICK;
 exports.TABLE_ROW_SELECTION = TABLE_ROW_SELECTION;

package/dist/cjs/{formFieldControllerSlimmer-e59c7d68.js → formFieldControllerSlimmer-bb4530a5.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-const vegaSlimmer = require('./vega-slimmer-e47c8e62.js');
-const mapToComponentMethod = require('./map-to-component-method-59546991.js');
+const vegaSlimmer = require('./vega-slimmer-5503957a.js');
+const mapToComponentMethod = require('./map-to-component-method-a3eb6fe7.js');
 const featureFlagController = require('./featureFlagController-1ed087d2.js');
 const string = require('./string-21427167.js');
-const changeManager = require('./changeManager-db6724a9.js');
+const changeManager = require('./changeManager-d4738fdb.js');
 const observer = require('./observer-126f19d0.js');
 const ui = require('./ui-824caf47.js');
 const misc = require('./misc-3d30df91.js');
@@ -175,6 +175,83 @@ class FormFieldValidationRuleHandlerChain {
   }
 }
 
+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;
+  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
+   *
+   * @param {string} errorMessage - The error message to display.
+   */
+  applyInputInvalidUI(errorMessage) {
+    if (errorMessage) {
+      const inputContainer = this.getInputElementContainer();
+      const errorContainer = this.getErrorContainer();
+      errorContainer.innerHTML = errorMessage;
+      errorContainer.classList.remove('vega-hidden');
+      inputContainer.classList.add('error');
+    }
+  }
+  /**
+   * Reset the input element's invalid UI
+   */
+  resetInputInvalidUI() {
+    const inputContainer = this.getInputElementContainer();
+    const errorContainer = this.getErrorContainer();
+    errorContainer.classList.add('vega-hidden');
+    inputContainer.classList.remove('error');
+  }
+  /**
+   * Get the input element container
+   *
+   * @returns {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;
+  }
+  /**
+   * Get the error container, if it doesn't exist, create it
+   *
+   * @returns {HTMLElement} The error container.
+   */
+  getErrorContainer() {
+    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');
+      inputContainer.after(siblingContainer);
+    }
+    return siblingContainer;
+  }
+}
+__decorate$3([
+  vegaSlimmer.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
+__decorate$3([
+  vegaSlimmer.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "options", void 0);
+
+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 FormFieldController class is a class that validates the value of an input elements
  *
@@ -200,15 +277,15 @@ class FormFieldController {
    * @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 {string} [inputContainer=.vega-input-container] - The selector for the element that contains the input element.
+   * @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, inputContainer = '.vega-input-container', touchableArea = 'input') {
+  constructor(defaultRules, hostElement, defaultValue, options, touchableArea = 'input') {
     var _a, _b;
+    this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
     this.defaultRules = [];
     this.additionalRules = [];
     this.listeners = [];
-    this.inputContainerSelector = '';
     this.isTouched = false;
     this.isModified = false;
     this.isVisible = false;
@@ -228,34 +305,36 @@ class FormFieldController {
       if (invalidationResult) {
         if (showError === 'rule') {
           invalidationResult.shouldShowError
-            ? this.applyInputInvalidUI(invalidationResult.message)
-            : this.resetInputInvalidUI();
+            ? this.fieldErrorUIController.applyInputInvalidUI(invalidationResult.message)
+            : this.fieldErrorUIController.resetInputInvalidUI();
         }
         else {
-          showError ? this.applyInputInvalidUI(invalidationResult.message) : this.resetInputInvalidUI();
+          showError
+            ? this.fieldErrorUIController.applyInputInvalidUI(invalidationResult.message)
+            : this.fieldErrorUIController.resetInputInvalidUI();
         }
         isValid = false;
       }
       else {
-        this.resetInputInvalidUI();
+        this.fieldErrorUIController.resetInputInvalidUI();
       }
       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, {
-        host: this.hostElement,
+        host: this.host,
         detail: isValid,
       });
       return isValid;
     };
     this.defaultRules = defaultRules || [];
-    this.hostElement = hostElement;
-    this.inputContainerSelector = inputContainer;
+    this.host = hostElement;
     this.touchableArea = touchableArea;
     this.defaultValue = defaultValue;
+    this.options = options;
     this.initDisabledAttrObserver();
     this.initResizeObserver();
     this.initFormResetObserver();
-    (_b = (_a = this.hostElement).componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => {
+    (_b = (_a = this.host).componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => {
       this.didRender();
     });
     this.listenHostElementKeydown();
@@ -309,7 +388,7 @@ class FormFieldController {
    */
   destroy() {
     changeManager.ChangeManager.notify(changeManager.FORM_FIELD_ELEMENT_DISCONNECTED, {
-      host: this.hostElement,
+      host: this.host,
     });
     this.unregisterFormResetObserver();
   }
@@ -324,65 +403,14 @@ class FormFieldController {
    */
   async valid(triggerStatus, showError = 'rule') {
     const status = this.getStatus();
-    const input = this.hostElement.value;
+    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.hostElement, detail: null });
+      changeManager.ChangeManager.notify(changeManager.FORM_FIELD_PENDING_VALID_CHANGE, { host: this.host, detail: null });
     }
     const isValid = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
     return isValid;
   }
-  /**
-   * It takes an error message and displays it in the error container
-   *
-   * @param {string} errorMessage - The error message to display.
-   */
-  applyInputInvalidUI(errorMessage) {
-    if (errorMessage) {
-      const inputContainer = this.getInputElementContainer();
-      const errorContainer = this.getErrorContainer();
-      errorContainer.innerHTML = errorMessage;
-      errorContainer.classList.remove('vega-hidden');
-      inputContainer.classList.add('error');
-    }
-  }
-  /**
-   * Reset the input element's invalid UI
-   */
-  resetInputInvalidUI() {
-    const inputContainer = this.getInputElementContainer();
-    const errorContainer = this.getErrorContainer();
-    errorContainer.classList.add('vega-hidden');
-    inputContainer.classList.remove('error');
-  }
-  /**
-   * Get the input element container
-   *
-   * @returns {HTMLElement} The input element container.
-   */
-  getInputElementContainer() {
-    const inputContainer = this.hostElement.querySelector(this.inputContainerSelector);
-    if (!inputContainer) {
-      throw new Error(`Can't not find inputContainer with selector ${this.inputContainerSelector}`);
-    }
-    return inputContainer;
-  }
-  /**
-   * Get the error container, if it doesn't exist, create it
-   *
-   * @returns {HTMLElement} The error container.
-   */
-  getErrorContainer() {
-    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');
-      inputContainer.after(siblingContainer);
-    }
-    return siblingContainer;
-  }
   /**
    * Invoke all listeners with the given isValid value
    *
@@ -400,7 +428,7 @@ class FormFieldController {
     return {
       touched: this.isTouched,
       modified: this.isModified,
-      disabled: this.hostElement['disabled'],
+      disabled: this.host['disabled'],
       visible: this.isVisible,
     };
   }
@@ -438,7 +466,7 @@ class FormFieldController {
         void this.valid(['disabled']);
       }
     });
-    this.disabledAttrObserver.observe(this.hostElement, {
+    this.disabledAttrObserver.observe(this.host, {
       attributes: true,
       attributeFilter: ['disabled'],
     });
@@ -452,11 +480,11 @@ class FormFieldController {
       const prevVisible = this.isVisible;
       const currentVisible = entries[0].contentRect.height > 0;
       this.isVisible = currentVisible;
-      if (this.isAutoValidationEnabled() && ui.findParent(this.hostElement, 'vega-form')) {
+      if (this.isAutoValidationEnabled() && ui.findParent(this.host, 'vega-form')) {
         prevVisible !== currentVisible && this.valid(['visible']);
       }
     });
-    this.resizeObserver.observe(this.hostElement);
+    this.resizeObserver.observe(this.host);
   }
   /**
    * If the input form is a child of the current form, then the current form can accept the input form's reset operation
@@ -465,7 +493,7 @@ class FormFieldController {
    * @returns {boolean} A boolean value.
    */
   canAcceptFormResetOperation(input) {
-    return ui.findParent(this.hostElement, 'vega-form') === input.host;
+    return ui.findParent(this.host, 'vega-form') === input.host;
   }
   /**
    * Unregister the form reset observer.
@@ -477,7 +505,7 @@ class FormFieldController {
    * It adds a blur event listener to all elements that match the selector in the touchableArea property
    */
   setupTouchedListener() {
-    this.hostElement.querySelectorAll(this.touchableArea).forEach((item) => item.addEventListener('blur', () => {
+    this.host.querySelectorAll(this.touchableArea).forEach((item) => item.addEventListener('blur', () => {
       this.updateIsTouched(true);
     }));
   }
@@ -486,7 +514,7 @@ class FormFieldController {
    * When that event is fired, the `updateIsModified` function is called with the argument `true`
    */
   setupModifiedListener() {
-    this.hostElement.addEventListener('vegaChange', () => {
+    this.host.addEventListener('vegaChange', () => {
       this.updateIsModified(true);
     });
   }
@@ -497,18 +525,18 @@ class FormFieldController {
    */
   async reset(payload) {
     var _a, _b;
-    if (this.shouldVisitElement(this.hostElement, (_a = payload.option) === null || _a === void 0 ? void 0 : _a.skipDisabled, (_b = payload.option) === null || _b === void 0 ? void 0 : _b.skipInvisible)) {
+    if (this.shouldVisitElement(this.host, (_a = payload.option) === null || _a === void 0 ? void 0 : _a.skipDisabled, (_b = payload.option) === null || _b === void 0 ? void 0 : _b.skipInvisible)) {
       const defaultValueMap = payload.defaultValueMap;
-      const fieldName = this.hostElement.dataset['vegaForm'];
+      const fieldName = this.host.dataset['vegaForm'];
       const defaultValue = defaultValueMap[fieldName] === undefined || defaultValueMap[fieldName] === null
         ? this.getDefaultValue()
         : defaultValueMap[fieldName];
-      typeof this.hostElement['setValue'] === 'function'
-        ? await this.hostElement['setValue'](defaultValue)
-        : (this.hostElement.value = defaultValue);
+      typeof this.host['setValue'] === 'function'
+        ? await this.host['setValue'](defaultValue)
+        : (this.host.value = defaultValue);
       this.isTouched = false;
       this.isModified = false;
-      this.resetInputInvalidUI();
+      this.fieldErrorUIController.resetInputInvalidUI();
     }
   }
   /**
@@ -516,9 +544,7 @@ class FormFieldController {
    * the default value
    */
   getDefaultValue() {
-    return this.defaultValue instanceof Function
-      ? this.defaultValue(this.hostElement)
-      : this.defaultValue;
+    return this.defaultValue instanceof Function ? this.defaultValue(this.host) : this.defaultValue;
   }
   /**
    * This function is called after the component has been rendered. It re-attaches the invalid UI to
@@ -543,7 +569,7 @@ class FormFieldController {
    * @returns {boolean} A boolean value.
    */
   isAutoValidationEnabled() {
-    return this.hostElement.autoValidation !== false;
+    return this.host.autoValidation !== false;
   }
   /**
    * 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.
@@ -563,11 +589,11 @@ class FormFieldController {
    * notifies the ChangeManager that the form has been submitted
    */
   listenHostElementKeydown() {
-    this.hostElement.addEventListener('keydown', 
+    this.host.addEventListener('keydown', 
     /* istanbul ignore next */ (event) => {
       if (this.canSubmitFormByEvent(event)) {
         changeManager.ChangeManager.notify(changeManager.FORM_SUBMIT, {
-          host: this.hostElement,
+          host: this.host,
         });
       }
     });
@@ -584,7 +610,7 @@ class FormFieldController {
   canSubmitFormByEvent(event) {
     const isEnterKey = event.key === 'Enter' || event.keyCode === 13;
     const isSubmittedKey = isEnterKey && event.shiftKey;
-    switch (this.hostElement.tagName) {
+    switch (this.host.tagName) {
       case 'VEGA-TEXTAREA':
       case 'VEGA-DATE-PICKER':
       case 'VEGA-TIME-PICKER':
@@ -596,6 +622,79 @@ class FormFieldController {
     }
   }
 }
+__decorate$2([
+  vegaSlimmer.InjectVegaSlimmer()
+], FormFieldController.prototype, "fieldErrorUIController", void 0);
+
+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 `FieldBoxControllerSlimmer` class is a TypeScript class that extends the `VegaSlimmer` class and provides methods for handling error UI in a field error component. */
+class FieldErrorControllerSlimmer extends vegaSlimmer.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
+    /**
+     * call the method when observer trigger
+     *
+     * @param {FieldErrorEventPayload} payload payload param
+     */
+    this.handleFieldErrorMessageUpdate = (payload) => {
+      const { message } = payload;
+      if (message) {
+        this.fieldErrorUIController.applyInputInvalidUI(message);
+      }
+      else {
+        this.fieldErrorUIController.resetInputInvalidUI();
+      }
+    };
+  }
+  /**
+   * 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);
+  }
+  /**
+   * unregister the observer when the slimmer method called
+   */
+  handleUnregisterObserver() {
+    changeManager.ChangeManager.unregister(changeManager.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
+  }
+  /**
+   * The function checks if the host element is the parent of the field box.
+   *
+   * @param {FieldErrorEventPayload} payload - The payload parameter is of type FieldErrorEventPayload.
+   * @returns {boolean} a boolean value.
+   */
+  canAcceptFieldErrorMessageUpdate(payload) {
+    const { host } = payload;
+    const parentFieldBox = this.host.parentElement;
+    if (parentFieldBox && parentFieldBox === host) {
+      return true;
+    }
+    return false;
+  }
+}
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "host", void 0);
+__decorate$1([
+  vegaSlimmer.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "options", void 0);
+__decorate$1([
+  vegaSlimmer.InjectVegaSlimmer()
+], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
+__decorate$1([
+  mapToComponentMethod.MapToComponentMethod('setInjectFormFieldHelper')
+], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
+__decorate$1([
+  mapToComponentMethod.MapToComponentMethod('destroy')
+], FieldErrorControllerSlimmer.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;
@@ -619,6 +718,7 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
    */
   constructor(options) {
     super();
+    this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
     this.options = options;
   }
   /**
@@ -652,49 +752,38 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
   /**
    * listen the attributes change when connectedCallback method call
    */
-  connectedCallbackByFormFieldSlimmer() {
+  initialFormFieldHelper() {
     if (this.validator === null) {
       this.setInjectFormFieldHelper();
       this.observeDefaultRuleAttributes();
     }
   }
   /**
-   * destroy the form field helper when disconnectedCallback method call
-   */
-  disconnectedCallbackByFormFieldSlimmer() {
-    this.destroy();
-  }
-  /**
-   * inject form file help when componentWillLoad method call
+   * It destroys the validator and disconnects the observer
    */
-  componentWillLoadByFormFieldSlimmer() {
-    this.setInjectFormFieldHelper();
+  destroy() {
+    if (this.validator) {
+      this.validator.destroy();
+      this.formFieldAttributesObserver.disconnect();
+      this.validator = null;
+      this.formFieldAttributesObserver = null;
+    }
   }
   /**
    * listen the attributes change when componentDidLoad method call
    */
-  componentDidLoadByFormFieldSlimmer() {
+  createRuleObserve() {
     this.observeDefaultRuleAttributes();
   }
   /**
-   * "If the target is not disabled, then call the validate function on the target's validator
-   * property."
-   *
-   * The validator property is a property that we'll add to the target element. It's a property that
-   * will hold a reference to the validator object that we'll create
+   * inject form file help when componentWillLoad method call
    */
-  internalValidate() {
-    if (!this.disabled && this.validator) {
-      void this.validator.validate();
-    }
-  }
-  /* eslint-disable jsdoc/require-jsdoc */
   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, inputContainerSelector, touchableAreaSelector, } = this.options;
-      const validator = new FormFieldController(this.getPropertyRules(), this.host, defaultValue, inputContainerSelector, touchableAreaSelector);
+      const { defaultValue, touchableAreaSelector } = this.options;
+      const validator = new FormFieldController(this.getPropertyRules(), this.host, defaultValue, this.options, touchableAreaSelector);
       validator.addListener({
         /* eslint-disable jsdoc/require-jsdoc */
         callback: (isValid) => {
@@ -724,17 +813,6 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
       });
     }
   }
-  /**
-   * It destroys the validator and disconnects the observer
-   */
-  destroy() {
-    if (this.validator) {
-      this.validator.destroy();
-      this.formFieldAttributesObserver.disconnect();
-      this.validator = null;
-      this.formFieldAttributesObserver = null;
-    }
-  }
   /**
    * It sets the additional rules on the validator
    */
@@ -766,6 +844,18 @@ class FormFieldControllerSlimmer extends vegaSlimmer.VegaSlimmer {
       .map((rule) => rule.ruleFactory(attributeGetter(rule.propertyName), rule.dependence ? attributeGetter(rule.dependence) : null))
       .filter(Boolean);
   }
+  /**
+   * "If the target is not disabled, then call the validate function on the target's validator
+   * property."
+   *
+   * The validator property is a property that we'll add to the target element. It's a property that
+   * will hold a reference to the validator object that we'll create
+   */
+  internalValidate() {
+    if (!this.disabled && this.validator) {
+      void this.validator.validate();
+    }
+  }
 }
 __decorate([
   vegaSlimmer.MapToComponentField()
@@ -785,6 +875,9 @@ __decorate([
 __decorate([
   vegaSlimmer.MapToComponentField()
 ], FormFieldControllerSlimmer.prototype, "vegaValidate", void 0);
+__decorate([
+  vegaSlimmer.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "fieldErrorSlimmer", void 0);
 __decorate([
   mapToComponentMethod.MapToComponentMethod('watchValidationRules')
 ], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
@@ -793,15 +886,15 @@ __decorate([
 ], FormFieldControllerSlimmer.prototype, "validByFormControllerSlimmer", null);
 __decorate([
   mapToComponentMethod.MapToComponentMethod('connectedCallback')
-], FormFieldControllerSlimmer.prototype, "connectedCallbackByFormFieldSlimmer", null);
+], FormFieldControllerSlimmer.prototype, "initialFormFieldHelper", null);
 __decorate([
   mapToComponentMethod.MapToComponentMethod('disconnectedCallback')
-], FormFieldControllerSlimmer.prototype, "disconnectedCallbackByFormFieldSlimmer", null);
-__decorate([
-  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
-], FormFieldControllerSlimmer.prototype, "componentWillLoadByFormFieldSlimmer", null);
+], FormFieldControllerSlimmer.prototype, "destroy", null);
 __decorate([
   mapToComponentMethod.MapToComponentMethod('componentDidLoad')
-], FormFieldControllerSlimmer.prototype, "componentDidLoadByFormFieldSlimmer", null);
+], FormFieldControllerSlimmer.prototype, "createRuleObserve", null);
+__decorate([
+  mapToComponentMethod.MapToComponentMethod('componentWillLoad')
+], FormFieldControllerSlimmer.prototype, "setInjectFormFieldHelper", null);
 
 exports.FormFieldControllerSlimmer = FormFieldControllerSlimmer;

package/dist/cjs/index-0ca30e90.js

@@ -1825,6 +1825,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './vega-dialog.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'vega-field-error.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './vega-field-error.cjs.entry.js')); }).then(processMod, consoleError);
         case 'vega-header.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */