@globalpayments/vega 2.19.0 → 2.20.1

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

@@ -0,0 +1,1095 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const string = require('./string-21427167.js');
+const changeManager = require('./change-manager-ed04784c.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-465e5483.js');
+const staticSubjectTitle = require('./static-subject-title-41c88385.js');
+const ui = require('./ui-fa68545a.js');
+const misc = require('./misc-0197689b.js');
+const dynamicSlimmer = require('./dynamic-slimmer-d5ea4204.js');
+const vegaInternalEventId = require('./vega-internal-event-id-4d32e170.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-190f6217.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-a54ddfb1.js');
+const mutationObserverFilters = require('./mutation-observer-filters-95cb1596.js');
+const array = require('./array-6e559cde.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: misc.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<boolean>} 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);
+    return result ? false : true;
+  }
+  /**
+   * sets the processId to the UUID
+   *
+   * @returns {string} the UUID (string)
+   */
+  preProcess() {
+    const UUID = misc.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;
+  }
+}
+
+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 `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(...arguments);
+    this.fieldErrorUiControllerStrategies = [
+      new SiblingContainerNestedErrorContainerRetrievalStrategy(),
+      new SiblingContainerSelfRetrievalStrategy(),
+      new SiblingContainerErrorLabelContainerRetrievalStrategy(),
+    ];
+  }
+  /**
+   * 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) {
+    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(domNodeSubjectObserverFactory.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() {
+    const inputContainer = this.getInputElementContainer();
+    if (inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
+      errorContainer.classList.add('vega-hidden');
+      inputContainer.classList.remove('error');
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.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} The error container.
+   */
+  getErrorContainer(inputContainer) {
+    for (const strategy of this.fieldErrorUiControllerStrategies) {
+      const errorContainer = strategy.run(inputContainer);
+      if (errorContainer) {
+        return errorContainer;
+      }
+    }
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorUIControllerSlimmer.prototype, "options", 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 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.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 {boolean} A boolean 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
+   *
+   * @returns {FormFieldValidationRule<number | string | boolean>[]} An array of FormFieldValidationRule<T>
+   */
+  getRules() {
+    return [...this.defaultRules, ...this.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() {
+  }
+  /**
+   * 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 = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
+    return isValid;
+  }
+  /**
+   * 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.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 {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 domNodeSubjectObserverFactory.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 domNodeSubjectObserverFactory.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;
+      default:
+        return isEnterKey;
+    }
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldController.prototype, "fieldErrorUIController", void 0);
+__decorate$3([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FormFieldController.prototype, "resizeObserverSlimmer", 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 `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 globalSlimmerRegistry.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 domNodeSubjectObserverFactory.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$2([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "host", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], FieldErrorControllerSlimmer.prototype, "options", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('setInjectFormFieldHelper')
+], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], 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 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 isValid = await this.validator.validate(payload.message);
+        if (typeof payload.promiseResolve === 'function') {
+          payload.promiseResolve(isValid);
+        }
+      }
+    };
+  }
+  /**
+   * 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$1([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], FormFieldValidInvokeSlimmer.prototype, "validator", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('setInjectFormFieldHelper')
+], FormFieldValidInvokeSlimmer.prototype, "registerValidInvocationObserver", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], 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);
+  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.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)) {
+      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
+   *
+   * @returns {FormFieldValidationRule[]} 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.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;