@globalpayments/vega 2.13.0 → 2.50.0

package/dist/cjs/form-field-controller-slimmer-ff6d7dfc.js

@@ -0,0 +1,1258 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const string = require('./string-21427167.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const observer = require('./observer-f49483e8.js');
+const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const ui = require('./ui-13b42af0.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
+const translation = require('./translation-e5003a00.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
+const internalFormFieldValidationRule_abstract = require('./internal-form-field-validation-rule.abstract-07cdff46.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a7a3b196.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
+const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
+const array = require('./array-249289f2.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-66f3038c.js');
+
+/** The `FormFieldValidationRuleHandler` class is responsible for handling the validation rules for a form field. */
+class FormFieldValidationRuleHandler {
+  /**
+   * The constructor function takes a FormFieldValidationRule as a parameter.
+   *
+   * @param {FormFieldValidationRule<unknown>} rule - It is used to define the validation rule for a form field.
+   */
+  constructor(rule) {
+    this.rule = rule;
+  }
+  /**
+   * The function `getStatus` returns an object with properties `canEvaluate` and `isAsync` based on the input, status, and statusChanged parameters.
+   *
+   * @param {unknown} input - The input parameter represents the value that needs to be evaluated.
+   * @param {FormFieldStatusMeta} status - It represents the current status of a form field.
+   * @param {(keyof FormFieldStatusMeta)[]} statusChanged - It represents the fields whose status has changed.
+   * @returns {HandlerStatusType} an object of type HandlerStatusType.
+   */
+  getStatus(input, status, statusChanged) {
+    return {
+      canEvaluate: this.rule.canEvaluate(input, status, statusChanged),
+      isAsync: createPublicApiRuntimeMetricsSlimmer.isAsyncFunction(this.rule.evaluate),
+    };
+  }
+  /**
+   * The function shouldShowError determines whether an error should be shown based on the status and statusChanged parameters.
+   *
+   * @param {FormFieldStatusMeta} status - It contains information such as whether the field is valid, invalid, or untouched.
+   * @param {(keyof FormFieldStatusMeta)[]} statusChanged - It represents the fields that have changed their status.
+   * @returns {boolean} show error message or not
+   */
+  shouldShowError(status, statusChanged) {
+    try {
+      return this.rule.shouldShowError
+        ? this.rule.shouldShowError(status, statusChanged)
+        : this.defaultShouldShowError(status);
+    }
+    catch (e) {
+      return false;
+    }
+  }
+  /**
+   * The function takes an input of type T and evaluates it using a rule, returning an EvaluateResult or a Promise of EvaluateResult.
+   *
+   * @param {unknown} input - input field value
+   * @returns {EvaluateResult | Promise<EvaluateResult>} The method is returning either an `EvaluateResult` object or a `Promise` that resolves to an `EvaluateResult` object.
+   */
+  handle(input) {
+    try {
+      return this.rule.evaluate(input);
+    }
+    catch (e) {
+      return { isValid: true, message: '' };
+    }
+  }
+  /**
+   * If the field is not disabled, visible, and the field is touched or modified, then return true
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta - The status of the field.
+   * @returns {boolean} A function that takes in 3 parameters and returns a boolean.
+   */
+  defaultShouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+}
+
+/** The `FormFieldValidationRuleHandlerChain` class is responsible for handling a chain of form field validation rule handlers and processing the validation rules for a given input. */
+class FormFieldValidationRuleHandlerChain {
+  constructor() {
+    this.handlers = [];
+    this.processId = '';
+  }
+  /**
+   * The function checks if there is an async rule handler that can be evaluated for a given input and form field status.
+   *
+   * @param {unknown} input - The input parameter represents the value that needs to be validated.
+   * @param {FormFieldStatusMeta} status - It represents the current status of a form field.
+   * @param {(keyof FormFieldStatusMeta)[]} triggerStatus - It represents the status values that can trigger the validation rule handler.
+   * @returns {boolean} a boolean value. It returns true if there is an async rule handler found in the `handlers` array, and false otherwise.
+   */
+  checkIncludesAsyncRuleHandler(input, status, triggerStatus) {
+    const asyncRuleHandler = this.handlers.find((handles) => {
+      const handlesStatus = handles.getStatus(input, status, triggerStatus);
+      return handlesStatus.canEvaluate && handlesStatus.isAsync;
+    });
+    return asyncRuleHandler ? true : false;
+  }
+  /**
+   * The function initializes form field validation rule handlers based on the provided rules.
+   *
+   * @param {FormFieldValidationRule<unknown>[]} rules - An array of FormFieldValidationRule objects.
+   */
+  setHandlersByRules(rules) {
+    if (rules && rules.length) {
+      this.handlers = rules.map((rule) => {
+        return new FormFieldValidationRuleHandler(rule);
+      });
+    }
+    else {
+      this.handlers = [];
+    }
+  }
+  /**
+   * iterates through a list of handlers to evaluate and handle the input, returning a validation result and call the callback method
+   *
+   * @param {unknown} input - The input parameter represents the data that needs to be processed.
+   * @param {FormFieldStatusMeta} status - It represents the current status of a form field.
+   * @param {(keyof FormFieldStatusMeta)[]} triggerStatus - These keys represent the fields that have triggered a change in status.
+   * @param {boolean | 'rule'} showError - A boolean or string rule form method call, It's a param of callback.
+   * @param {ValidationCallBack} callback - The method should be call when validation result is not valid.
+   * @returns {Promise<EvaluateResult>} validate result.
+   */
+  async process(input, status, triggerStatus, showError, callback) {
+    const UUID = this.preProcess();
+    let result;
+    for (const ruleHandler of this.handlers) {
+      if (UUID !== this.processId)
+        break;
+      const handlersStatus = ruleHandler.getStatus(input, status, triggerStatus);
+      if (!handlersStatus.canEvaluate)
+        continue;
+      let evaluateResult;
+      if (handlersStatus.isAsync) {
+        try {
+          evaluateResult = await ruleHandler.handle(input);
+          // eslint-disable-next-line no-empty
+        }
+        catch (e) { }
+      }
+      else {
+        evaluateResult = ruleHandler.handle(input);
+      }
+      if (evaluateResult && !evaluateResult.isValid) {
+        const shouldShowError = ruleHandler.shouldShowError(status, triggerStatus);
+        result = Object.assign(Object.assign({}, evaluateResult), { shouldShowError });
+        break;
+      }
+    }
+    this.postProcess(UUID, showError, result, callback);
+    if (result) {
+      return { isValid: false, message: result.message };
+    }
+    else {
+      return { isValid: true, message: '' };
+    }
+  }
+  /**
+   * sets the processId to the UUID
+   *
+   * @returns {string} the UUID (string)
+   */
+  preProcess() {
+    const UUID = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+    this.processId = UUID;
+    return UUID;
+  }
+  /**
+   * call the method after get the validation result, such as send validation result to form, show or hide field error message
+   *
+   * @param {string} UUID the validate id
+   * @param {boolean | 'rule'} showError boolean value to show or not the error message
+   * @param {Nullable<ValidationResult>} validationResult the validation result
+   * @param {ValidationCallBack} callback the method need to call to handle the result
+   */
+  postProcess(UUID, showError, validationResult, callback) {
+    if (this.processId === UUID) {
+      callback(showError, validationResult);
+    }
+  }
+}
+
+/** This class retrieves a specific error container element nested within a sibling container of a given input element. */
+class SiblingContainerNestedErrorContainerRetrievalStrategy {
+  /**
+   * The function searches for an element with the class 'vega-error' in the next sibling of the
+   * inputContainer and returns it if found.
+   *
+   * @param {HTMLElement} inputContainer - The `inputContainer` parameter is an HTMLElement that
+   * represents the container element containing some input element.
+   * @returns { Nullable<HTMLElement>} An HTMLElement with the class 'vega-error' that is a sibling of the inputContainer, if
+   * it exists. Otherwise, null is returned.
+   */
+  run(inputContainer) {
+    const siblingContainer = inputContainer.nextElementSibling;
+    if (siblingContainer && siblingContainer.querySelector('.vega-error')) {
+      return siblingContainer.querySelector('.vega-error');
+    }
+    return null;
+  }
+}
+
+/** The class retrieves the next sibling element of an input container and creates a new error label if it does not already exist. */
+class SiblingContainerSelfRetrievalStrategy {
+  /**
+   * The function adds an error message container next to the input container if it doesn't already exist.
+   *
+   * @param {HTMLElement} inputContainer - The `inputContainer` parameter is an HTMLElement that
+   * represents the container element of an input field in the HTML document.
+   * @returns {HTMLElement} the `siblingContainer` HTMLElement that was either found as the next sibling of the
+   * `inputContainer` or created as a new `label` element with the class `vega-error` if it didn't
+   * exist before.
+   */
+  run(inputContainer) {
+    let siblingContainer = inputContainer.nextElementSibling;
+    if (siblingContainer && !siblingContainer.classList.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;
+  }
+}
+
+/** This class defines a strategy for retrieving or creating a sibling container element. */
+class SiblingContainerErrorLabelContainerRetrievalStrategy {
+  /**
+   * The function creates a sibling container element next to the input container if it doesn't
+   * already exist.
+   *
+   * @param {HTMLElement} inputContainer - This function retrieves the next sibling element of the
+   * `inputContainer` element. If the next sibling element does not exist, it creates a new `<label>`
+   * element with the class `vega-error`,
+   * @returns {HTMLElement} the `siblingContainer` element, which is either the next sibling element of the
+   * `inputContainer` or a newly created `<label>` element with the class `vega-error` and the
+   * attribute `part="field-error-message"` if no sibling element exists.
+   */
+  run(inputContainer) {
+    let siblingContainer = inputContainer.nextElementSibling;
+    if (!siblingContainer) {
+      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;
+  }
+}
+
+/** The `FormFieldMessageTranslatorSlimmer` class is to get translated message */
+class FormFieldMessageTranslatorSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Translates a given message based on its type.
+   *
+   * @param {EvaluateResult['message'] | EvaluateResultTranslation['message']} message - The message to be translated, which can be a string or a TranslationMessage.
+   * @returns {string} The translated message.
+   */
+  getTranslatedMessage(message) {
+    if (typeof message === 'string') {
+      return translation.VegaInternalTranslation.t(message);
+    }
+    return translation.VegaInternalTranslation.t(message.key, ...(message.args || []));
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
+class FieldErrorUIControllerSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super();
+    this.formFieldMessageTranslatorSlimmer = new FormFieldMessageTranslatorSlimmer();
+    this.fieldErrorUiControllerStrategies = [
+      new SiblingContainerNestedErrorContainerRetrievalStrategy(),
+      new SiblingContainerSelfRetrievalStrategy(),
+      new SiblingContainerErrorLabelContainerRetrievalStrategy(),
+    ];
+    this.initTranslationObserver();
+  }
+  /**
+   * 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 {EvaluateResult['message']} errorMessage - The error message to display.
+   */
+  applyInputInvalidUI(errorMessage) {
+    this.errorMessage = errorMessage;
+    const inputContainer = this.getInputElementContainer();
+    if (errorMessage && inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
+      errorContainer.innerHTML =
+        this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(errorMessage);
+      errorContainer.classList.remove('vega-hidden');
+      inputContainer.classList.add('error');
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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() {
+    this.errorMessage = '';
+    const inputContainer = this.getInputElementContainer();
+    if (inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
+      errorContainer.classList.add('vega-hidden');
+      inputContainer.classList.remove('error');
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalFieldErrorStateChange), {
+        host: this.host,
+        showError: false,
+      });
+    }
+  }
+  /**
+   * Get the input element container
+   *
+   * @returns {Nullable<HTMLElement>} The input element container.
+   */
+  getInputElementContainer() {
+    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 | undefined} The error container.
+   */
+  getErrorContainer(inputContainer) {
+    for (const strategy of this.fieldErrorUiControllerStrategies) {
+      const errorContainer = strategy.run(inputContainer);
+      if (errorContainer) {
+        return errorContainer;
+      }
+    }
+  }
+  /**
+   * Init translation observer of translation language changes
+   */
+  initTranslationObserver() {
+    const observer$1 = new observer.Observer(this.isAcceptableTranslationObserver.bind(this), () => {
+      if (!this.errorMessage)
+        return;
+      const inputContainer = this.getInputElementContainer();
+      if (inputContainer) {
+        const errorContainer = this.getErrorContainer(inputContainer);
+        if (errorContainer) {
+          errorContainer.innerHTML =
+            this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(this.errorMessage);
+        }
+      }
+    });
+    changeManager.ChangeManager.register(staticSubjectTitle.UPDATE_TRANSLATION, observer$1);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptableTranslationObserver() {
+    return true;
+  }
+}
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FieldErrorUIControllerSlimmer.prototype, "formFieldMessageTranslatorSlimmer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "options", void 0);
+
+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;
+};
+/**
+ * The FormFieldController class is a class that validates the value of an input elements
+ *
+ * @implements {Validator<number | string | boolean | null>}
+ * @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 {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
+ * @property {boolean} isVisible true if an element is visible
+ * @property {string} touchableArea define the area which listen to the blur event
+ * @property {MutationObserver} disabledAttrObserver reference to the MutationObserver
+ * @property {ResizeObserver} visibilityObserver reference to the ResizeObserver
+ * @property {Observer<boolean>} formResetTriggeredObserver reference to formResetTriggeredObserver
+ */
+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, 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.
+   */
+  constructor(defaultRules, hostElement, defaultValue, options) {
+    var _a, _b;
+    this.formFieldMessageTranslatorSlimmer = new FormFieldMessageTranslatorSlimmer();
+    this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
+    this.resizeObserverSlimmer = dynamicSlimmer.createDynamicSlimmer(FormFieldController, pageResizeObserverSlimmer.PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: (entries) => {
+          const prevVisible = this.isVisible;
+          const currentVisible = entries[0].contentRect.height > 0;
+          this.isVisible = currentVisible;
+          if (this.isAutoValidationEnabled() && ui.findParent(this.host, 'vega-form')) {
+            prevVisible !== currentVisible && this.valid(['visible']);
+          }
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        target: () => this.host,
+      },
+    ]);
+    this.defaultRules = [];
+    this.additionalRules = [];
+    this.listeners = [];
+    this.isTouched = false;
+    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.
+     *
+     * @param {boolean | 'rule'} showError - which indicates that the error message should only be shown if the `shouldShowError` property of the
+     * `validationResult` object is `true` or `rule`
+     * @param {ValidationResult} invalidationResult - The `validationResult` parameter is an object that
+     * represents the result of a validation process. It contains information about whether the validation
+     * was successful or not, and an optional error message.
+     * @returns {boolean} a boolean value, which represents whether the validation result is valid or not.
+     */
+    this.handleValidationResult = (showError, invalidationResult) => {
+      let isValid = true;
+      if (invalidationResult) {
+        if (showError === 'rule') {
+          invalidationResult.shouldShowError
+            ? this.fieldErrorUIController.applyInputInvalidUI(invalidationResult.message)
+            : this.fieldErrorUIController.resetInputInvalidUI();
+        }
+        else {
+          showError
+            ? this.fieldErrorUIController.applyInputInvalidUI(invalidationResult.message)
+            : this.fieldErrorUIController.resetInputInvalidUI();
+        }
+        isValid = false;
+      }
+      else {
+        this.fieldErrorUIController.resetInputInvalidUI();
+      }
+      this.invokeListeners(isValid);
+      //change pending valid should be in last to solve the vegaValidate event emit issue
+      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.defaultValue = defaultValue;
+    this.options = options;
+    this.initDisabledAttrObserver();
+    this.connectResizeObserver();
+    this.initFormResetObserver();
+    (_b = (_a = this.host).componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => {
+      this.didRender();
+    });
+    this.setupModifiedListener();
+    this.listenHostElementKeydown();
+    this.updateValidationHandlers();
+  }
+  /**
+   * It validates the input against the rules and returns a boolean indicating whether the input is valid or not
+   *
+   * @param {boolean} showError whether the validation result should be reflected in UI
+   * @returns {Promise<EvaluateResultBase>} A promise value.
+   */
+  async validate(showError) {
+    return await this.valid([], showError);
+  }
+  /**
+   * This function adds a listener to the listeners array.
+   *
+   * @param {InputValidatorListener} listener - The listener to add.
+   */
+  addListener(listener) {
+    this.listeners.push(listener);
+  }
+  /**
+   * It returns an array of all the validation rules for the field
+   *
+   * @typedef T generic type
+   * @returns {FormFieldValidationRule<T>[]} An array of FormFieldValidationRule<T>
+   */
+  getRules() {
+    const additionalRules = [...this.additionalRules];
+    const overriddenDefaultRules = this.defaultRules.map((rule) => {
+      return this.overrideDefaultRuleByAdditionalRule(rule, additionalRules);
+    });
+    return [...overriddenDefaultRules, ...additionalRules];
+  }
+  /**
+   * Set the default rules for the form field.
+   *
+   * @param {FormFieldValidationRule<number | string | boolean>[]} rules - FormFieldValidationRule<T>[]
+   */
+  setDefaultRules(rules) {
+    this.defaultRules = rules;
+    this.updateValidationHandlers();
+  }
+  /**
+   * This function sets the additional rules for the form field
+   *
+   * @param {FormFieldValidationRule<number | string | boolean>[]} rules - The rules that are required for the field to be valid.
+   */
+  setAdditionalRules(rules) {
+    this.additionalRules = rules;
+    this.updateValidationHandlers();
+  }
+  /**
+   * The destroy function unregister the form reset observer
+   */
+  destroy() {
+    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
+   * the element is visible.
+   */
+  connectResizeObserver() {
+  }
+  /**
+   * Updates the `disableBlurValidation.
+   *
+   * @param {boolean} disableBlurValidation - From parent vega form.
+   */
+  updateDisableBlurValidation(disableBlurValidation) {
+    this.disableBlurValidation = disableBlurValidation;
+  }
+  /**
+   * The function "updateValidationHandlers" initializes the validation rule handler chain with the rules obtained from the "getRules" function.
+   */
+  updateValidationHandlers() {
+    this.formFieldValidationRuleHandlerChain.setHandlersByRules(this.getRules());
+  }
+  /**
+   * valid function to validate the rules
+   */
+  async valid(triggerStatus, showError = 'rule') {
+    const status = this.getStatus();
+    const input = this.host.value;
+    const hasAsyncRules = this.formFieldValidationRuleHandlerChain.checkIncludesAsyncRuleHandler(input, status, triggerStatus);
+    if (hasAsyncRules) {
+      changeManager.ChangeManager.notify(staticSubjectTitle.FORM_FIELD_PENDING_VALID_CHANGE, { host: this.host, detail: null });
+    }
+    const { isValid, message } = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
+    const translatedMessage = this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(message);
+    return { isValid, message: translatedMessage };
+  }
+  /**
+   * Invoke all listeners with the given isValid value
+   *
+   * @param {boolean} isValid - boolean
+   */
+  invokeListeners(isValid) {
+    this.listeners.forEach((listener) => listener.callback(isValid));
+  }
+  /**
+   * It returns an object with the current status of the form field
+   *
+   * @returns {FormFieldStatusMeta} The status of the form field.
+   */
+  getStatus() {
+    return {
+      touched: this.isTouched,
+      modified: this.isModified,
+      disabled: this.host['disabled'],
+      visible: this.isVisible,
+    };
+  }
+  /**
+   * It updates the `isTouched` property and if auto validation is enabled, it validates the input
+   *
+   * @param {boolean} touched - boolean - whether the input is touched or not
+   */
+  updateIsTouched(touched) {
+    const prevIsTouched = this.isTouched;
+    this.isTouched = touched;
+    if (!this.disableBlurValidation && this.isAutoValidationEnabled()) {
+      void this.valid(prevIsTouched === touched ? [] : ['touched']);
+    }
+  }
+  /**
+   * "If the value of the `isModified` property has changed, then update the `isModified` property and if auto-validation is enabled, then validate the control."
+   *
+   * @param {boolean} modified - boolean - whether the value has been modified or not
+   */
+  updateIsModified(modified) {
+    const prevIsModified = this.isModified;
+    this.isModified = modified;
+    if (this.isAutoValidationEnabled()) {
+      void this.valid(prevIsModified === modified ? [] : ['modified']);
+    }
+  }
+  /**
+   * It creates a new MutationObserver that watches for changes to the disabled attribute of the host
+   * element, and when it detects a change, it validates the host element's value
+   */
+  initDisabledAttrObserver() {
+    this.disabledAttrObserver = new MutationObserver(() => {
+      if (this.isAutoValidationEnabled()) {
+        void this.valid(['disabled']);
+      }
+    });
+    this.disabledAttrObserver.observe(this.host, {
+      attributes: true,
+      attributeFilter: ['disabled'],
+    });
+  }
+  /**
+   * If the input form is a child of the current form, then the current form can accept the input form's reset operation
+   *
+   * @param {ResetOperationPayload} input - VegaForm - The form that is being reset.
+   * @returns {boolean} A boolean value.
+   */
+  canAcceptFormResetOperation(input) {
+    return ui.findParent(this.host, 'vega-form') === input.host;
+  }
+  /**
+   * Unregister the form reset observer.
+   */
+  unregisterFormResetObserver() {
+    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();
+  }
+  /**
+   * Get an array of HTMLElements that represent the touchable area elements based on the host's tag name.
+   *
+   * @returns {HTMLElement[]} an array of HTMLElements.
+   */
+  getTouchableAreaElements() {
+    return this.options && this.options.touchableAreaGetter ? this.options.touchableAreaGetter() : [];
+  }
+  /**
+   * Get the input container element based on the options provided.
+   *
+   * @returns {Nullable<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.hostValueChangeObserver = new observer.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
+   *
+   * @param {ResetOperationPayload} payload - ResetOperationPayload
+   */
+  async reset(payload) {
+    var _a, _b;
+    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.host.dataset['vegaForm'];
+      const defaultValue = defaultValueMap[fieldName] === undefined || defaultValueMap[fieldName] === null
+        ? this.getDefaultValue()
+        : defaultValueMap[fieldName];
+      typeof this.host['setValue'] === 'function'
+        ? await this.host['setValue'](defaultValue)
+        : (this.host.value = defaultValue);
+      this.isTouched = false;
+      this.isModified = false;
+      this.fieldErrorUIController.resetInputInvalidUI();
+    }
+  }
+  /**
+   * If the default value is a function, call it with the host element as the argument, otherwise return
+   * the default value
+   */
+  getDefaultValue() {
+    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
+   * the input element, and sets up the listeners for the `touched` and `modified` events
+   */
+  didRender() {
+    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(staticSubjectTitle.FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
+  }
+  /**
+   * "If the host element's autoValidation property is not false, then return true."
+   * The host element is the element that the directive is attached to. In this case, the host element is the input element
+   *
+   * @returns {boolean} A boolean value.
+   */
+  isAutoValidationEnabled() {
+    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.
+   *
+   * @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.
+   */
+  shouldVisitElement(element, skipDisabled, skipInvisible) {
+    return !!(element.dataset['vegaForm'] &&
+      (!skipDisabled || !element['disabled']) &&
+      (!skipInvisible || ui.isElementVisible(element)));
+  }
+  /**
+   * It listens for the keydown event on the host element, and if the key pressed is the enter key, it
+   * notifies the ChangeManager that the form has been submitted
+   */
+  listenHostElementKeydown() {
+    this.host.addEventListener('keydown', 
+    /* istanbul ignore next */ (event) => {
+      if (this.canSubmitFormByEvent(event)) {
+        changeManager.ChangeManager.notify(staticSubjectTitle.FORM_SUBMIT, {
+          host: this.host,
+        });
+      }
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * The function determines whether a form can be submitted based on the event type and the element's
+   * tag name.
+   *
+   * @param {KeyboardEvent} event - The event parameter is of type KeyboardEvent. It represents the
+   * keyboard event that occurred.
+   * @returns {boolean} a boolean value.
+   */
+  canSubmitFormByEvent(event) {
+    const isEnterKey = event.key === 'Enter' || event.keyCode === 13;
+    const isSubmittedKey = isEnterKey && event.shiftKey;
+    switch (this.host.tagName) {
+      case 'VEGA-TEXTAREA':
+      case 'VEGA-DATE-PICKER':
+      case 'VEGA-TIME-PICKER':
+        if (isSubmittedKey)
+          event.preventDefault();
+        return isSubmittedKey;
+      case 'VEGA-RICH-TEXT-EDITOR':
+        return false;
+      default:
+        return isEnterKey;
+    }
+  }
+  /**
+   * It overrides the default rule by checking if the additional rules contain a custom rule that overrides.
+   * If it does, it returns that additional rule, and the rule will be removed from the additional rules array.
+   * otherwise, it returns the default rule.
+   *
+   * @typedef T generic type
+   * @param {InternalFormFieldValidationRule} defaultRule - The rule to be overridden.
+   * @param {FormFieldValidationRule[]} additionalRules - The additional rules to be applied.
+   * @returns {FormFieldValidationRule<T>} The overridden rule.
+   */
+  overrideDefaultRuleByAdditionalRule(defaultRule, additionalRules) {
+    if (defaultRule && additionalRules) {
+      const customRuleIndex = additionalRules.findIndex((customRule) => {
+        return (customRule instanceof internalFormFieldValidationRule_abstract.InternalFormFieldValidationRule &&
+          customRule instanceof defaultRule.constructor &&
+          customRule.overrideDefault);
+      });
+      if (customRuleIndex > -1) {
+        return additionalRules.splice(customRuleIndex, 1)[0];
+      }
+    }
+    return defaultRule;
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldController.prototype, "formFieldMessageTranslatorSlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldController.prototype, "fieldErrorUIController", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldController.prototype, "resizeObserverSlimmer", void 0);
+
+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;
+};
+/**
+ * The current class is used to manually control the form element error message.
+ * The component `vega-field-error` is used to control the error messages for form fields. to implement the error message display, we needs to know the form field error message container, field element, and other necessary options,
+ * the `form-field-controller-slimmer` has the required options and will inject to the all form fields, so we create current slimmer class and inject to the `form-field-controller-slimmer` to get all options.
+ * When the property `message` of the vega-field-error component changed, the target form field will receive the special subject and update the error message.
+ */
+class FieldErrorControllerSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // The host element field error UI controller.
+    this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
+    /**
+     * This method called mean that the current form field element nest in a vega-field-error component and the parent component property `message` changed, we need to show or hide the error message.
+     *
+     * @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(staticSubjectTitle.FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
+  }
+  /**
+   * unregister the observer when the slimmer method called
+   */
+  handleUnregisterObserver() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.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$3([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "host", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "options", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('setInjectFormFieldHelper')
+], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], FieldErrorControllerSlimmer.prototype, "handleUnregisterObserver", 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 FormFieldValidInvokeSlimmer class extends VegaSlimmer and handles validation calls for form elements. */
+class FormFieldValidInvokeSlimmer extends globalSlimmerRegistry.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 validationResult = await this.validator.validate(payload.message);
+        if (validationResult) {
+          const { isValid, message } = validationResult;
+          if (typeof payload.promiseResolve === 'function') {
+            payload.promiseResolve({ isValid, message });
+          }
+        }
+      }
+    };
+  }
+  /**
+   * register the observer when the slimmer method called
+   */
+  registerValidInvocationObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalValid, this.handleValidInvocation);
+  }
+  /**
+   * unregister the observer when the slimmer method called
+   */
+  handleUnregisterObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalValid);
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "validator", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('setInjectFormFieldHelper')
+], FormFieldValidInvokeSlimmer.prototype, "registerValidInvocationObserver", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], FormFieldValidInvokeSlimmer.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;
+};
+/**
+ * Controller for the form field states
+ */
+class FormFieldStateControllerSlimmer extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-form',
+      subStates: [
+        {
+          subStateName: 'disableBlurValidation',
+          parentStateName: 'disableBlurValidation',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (disableBlurValidation) => {
+            var _a;
+            (_a = this.validator) === null || _a === void 0 ? void 0 : _a.updateDisableBlurValidation(disableBlurValidation);
+          },
+        },
+      ],
+    });
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    super.componentWillLoad();
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldStateControllerSlimmer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldStateControllerSlimmer.prototype, "validator", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('setInjectFormFieldHelper')
+], FormFieldStateControllerSlimmer.prototype, "componentWillLoad", 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);
+  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 `FormFieldControllerSlimmer` class is a TypeScript class that extends `VegaSlimmer` and provides functionality for managing form field components.
+ * TODO:
+ * 1.Apply formFieldController to slimmer
+ * 2.There should be a decorator or other type to access the component interface for the `attributeGetter`
+ */
+class FormFieldControllerSlimmer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * The constructor function initializes a FormFieldOptionForSlimmer object with the provided options.
+   *
+   * @param {FormFieldOptionForSlimmer<unknown>} options - The `options` parameter is an object of type `FormFieldOptionForSlimmer<T>`. It is used to
+   * provide additional configuration options for the form field. The specific properties and their
+   * types within the `FormFieldOptionForSlimmer` object would depend on the implementation of the `FormField` class.
+   */
+  constructor(options) {
+    super();
+    this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
+    this.formFieldValidInvokeSlimmer = new FormFieldValidInvokeSlimmer();
+    this.formFormStateController = new FormFieldStateControllerSlimmer();
+    this.mutationObserverCallBack = () => {
+      if (this.validator) {
+        this.setDefaultRules();
+        this.internalValidate();
+      }
+    };
+    this.options = options;
+    this.setMutationObserverSlimmer();
+  }
+  /**
+   * listen the attributes change when connectedCallback method call
+   */
+  connectedCallback() {
+    if (this.validator === null) {
+      this.setInjectFormFieldHelper();
+    }
+  }
+  /**
+   * It destroys the validator and disconnects the observer
+   */
+  disconnectedCallback() {
+    if (this.validator) {
+      this.validator.destroy();
+      this.validator = null;
+    }
+  }
+  /**
+   * listen the attributes change when componentDidLoad method call
+   */
+  componentDidLoad() {
+  }
+  /**
+   * "If the element exists and has a data-vega-form attribute, return true, otherwise return false."
+   * The function isValidFormField() is used to determine if an element is a form field
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} A function that takes an element and returns a boolean.
+   */
+  static isValidFormField(element) {
+    return element && Boolean(element.getAttribute('data-vega-form'));
+  }
+  /**
+   * watch the prop validationRules and call the valid method
+   * some components has not a prop validationRules
+   *
+   * @param {FormFieldValidationRule<unknown>[]} newRules the component property validationRules new value
+   * @param {FormFieldValidationRule<unknown>[]} oldRules the component property validationRules old value
+   */
+  watchValidationRulesByFormControllerSlimmer(newRules, oldRules) {
+    if (!array.isArrayEqual(newRules, oldRules, false, (a, b) => {
+      return a === b ? 0 : -1;
+    })) {
+      this.setAdditionalRules();
+      this.internalValidate();
+    }
+  }
+  /**
+   * inject form file help when componentWillLoad method call
+   */
+  setInjectFormFieldHelper() {
+    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;
+            changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALIDATE, { host: this.host, detail: isValid });
+          }
+        },
+      });
+      this.validator = validator;
+      this.setAdditionalRules();
+    }
+  }
+  /**
+   * It sets the additional rules on the validator
+   */
+  setAdditionalRules() {
+    if (this.options.validationRulesName &&
+      this.options.validationRulesName === 'validationRules' &&
+      this.validator) {
+      this.validator.setAdditionalRules(this.validationRules || []);
+    }
+  }
+  /**
+   * It creates a new rule for each property rule map option, and then sets the default rules on the
+   * target's validator
+   */
+  setDefaultRules() {
+    if (this.validator) {
+      this.validator.setDefaultRules(this.getPropertyRules());
+    }
+  }
+  /**
+   * It takes the property rules from the option, maps them to a function that returns a validation rule,
+   * and then filters out any falsy values
+   *
+   * @typedef T generic type
+   * @returns {FormFieldValidationRule<T>[]} An array of validation rules.
+   */
+  getPropertyRules() {
+    const { propertyRules, attributeGetter } = this.options;
+    return propertyRules
+      .map((rule) => {
+      const dependenceValue = rule.dependence && typeof rule.dependence === 'string'
+        ? [attributeGetter(rule.dependence)]
+        : Array.isArray(rule.dependence)
+          ? rule.dependence.map((item) => attributeGetter(item))
+          : [null];
+      return rule.ruleFactory(attributeGetter(rule.propertyName), ...dependenceValue);
+    })
+      .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();
+    }
+  }
+  setMutationObserverSlimmer() {
+    this.mutationObserverSlimmer = new mutationObserverSlimmer.MutationObserverSlimmer({
+      options: {
+        attributeFilter: this.options.propertyRules.map((rule) => string.camelToDashCase(rule.propertyName)),
+        attributeOldValue: true,
+      },
+      mutationFilter: mutationObserverFilters.AttributeOldValueMutationFilter(),
+      callback: this.mutationObserverCallBack,
+    });
+  }
+}
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldControllerSlimmer.prototype, "host", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], FormFieldControllerSlimmer.prototype, "validationRules", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldControllerSlimmer.prototype, "disabled", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldControllerSlimmer.prototype, "autoValidation", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], FormFieldControllerSlimmer.prototype, "isValid", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "fieldErrorSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "formFieldValidInvokeSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "mutationObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "formFormStateController", void 0);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], FormFieldControllerSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], FormFieldControllerSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], FormFieldControllerSlimmer.prototype, "componentDidLoad", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('watchValidationRules')
+], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
+__decorate([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], FormFieldControllerSlimmer.prototype, "setInjectFormFieldHelper", null);
+
+exports.FormFieldControllerSlimmer = FormFieldControllerSlimmer;