@globalpayments/vega 2.18.1 → 2.20.0

package/dist/esm/formFieldControllerSlimmer-ea050a17.js

@@ -1,1013 +0,0 @@
-import { a as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer, M as MapToComponentMethod } from './global-slimmer-registry-16fd7452.js';
-import { c as camelToDashCase } from './string-be824360.js';
-import { C as ChangeManager } from './changeManager-d60d98c8.js';
-import { d as domNodeSubjectFactory, O as Observer, D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { c as FORM_FIELD_PENDING_VALID_CHANGE, d as FORM_FIELD_ELEMENT_DISCONNECTED, b as FORM_ELEMENT_VALUE_CHANGE, e as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, f as FIELD_ERROR_MESSAGE_CHANGE, g as FORM_ELEMENT_VALIDATE } from './staticSubjectTitle-3b88939a.js';
-import { f as findParent, i as isElementVisible } from './ui-28499aab.js';
-import { i as isAsyncFunction, g as generateUUID } from './misc-c21a85c9.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-ef83e258.js';
-import { V as VegaInternalFieldErrorStateChange, a as VegaInternalValid } from './vegaInternalEventId-bde5d617.js';
-import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
-import { M as MutationObserverSlimmer } from './mutationObserverSlimmer-2355cedf.js';
-import { A as AttributeOldValueMutationFilter } from './mutationObserverFilters-243934f6.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: 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 = 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);
-    }
-  }
-}
-
-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 VegaSlimmer {
-  /**
-   * 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.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalFieldErrorStateChange), {
-        host: this.host,
-        showError: true,
-      });
-    }
-  }
-  /**
-   * Reset the input element's invalid UI
-   * TODO: Each component hides the error message and puts it in the code of the respective component.
-   * The ticket is https://gethired.atlassian.net/browse/VD-2508
-   */
-  resetInputInvalidUI() {
-    const inputContainer = this.getInputElementContainer();
-    if (inputContainer) {
-      const errorContainer = this.getErrorContainer(inputContainer);
-      errorContainer.classList.add('vega-hidden');
-      inputContainer.classList.remove('error');
-      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, 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) {
-    var _a;
-    let siblingContainer = inputContainer.nextSibling;
-    if (!siblingContainer || !((_a = siblingContainer.classList) === null || _a === void 0 ? void 0 : _a.contains('vega-error'))) {
-      siblingContainer = document.createElement('label');
-      siblingContainer.classList.add('vega-error');
-      // vega-table needs to hide error content.
-      siblingContainer.setAttribute('part', 'field-error-message');
-      inputContainer.after(siblingContainer);
-    }
-    return siblingContainer;
-  }
-}
-__decorate$4([
-  MapToComponentField()
-], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
-__decorate$4([
-  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 = createDynamicSlimmer(FormFieldController, 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() && 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.notify(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.notify(FORM_FIELD_ELEMENT_DISCONNECTED, {
-      host: this.host,
-    });
-    this.unregisterFormResetObserver();
-    ChangeManager.unregister(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.notify(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 findParent(this.host, 'vega-form') === input.host;
-  }
-  /**
-   * Unregister the form reset observer.
-   */
-  unregisterFormResetObserver() {
-    ChangeManager.unregister(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 Observer(this.isCurrentTarget.bind(this), () => this.updateIsModified(true));
-    ChangeManager.register(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(this.canAcceptFormResetOperation.bind(this), this.reset.bind(this));
-    ChangeManager.register(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 || 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.notify(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([
-  InjectVegaSlimmer()
-], FormFieldController.prototype, "fieldErrorUIController", void 0);
-__decorate$3([
-  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 VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
-    /**
-     * call the method when observer trigger
-     *
-     * @param {FieldErrorEventPayload} payload payload param
-     */
-    this.handleFieldErrorMessageUpdate = (payload) => {
-      const { message } = payload;
-      if (message) {
-        this.fieldErrorUIController.applyInputInvalidUI(message);
-      }
-      else {
-        this.fieldErrorUIController.resetInputInvalidUI();
-      }
-    };
-  }
-  /**
-   * register the observer when the slimmer method called
-   */
-  handleComponentWillLoadByFieldErrorSlimmer() {
-    this.fieldErrorMessageChangeObserver = new Observer(this.canAcceptFieldErrorMessageUpdate.bind(this), this.handleFieldErrorMessageUpdate);
-    ChangeManager.register(FIELD_ERROR_MESSAGE_CHANGE, this.fieldErrorMessageChangeObserver);
-  }
-  /**
-   * unregister the observer when the slimmer method called
-   */
-  handleUnregisterObserver() {
-    ChangeManager.unregister(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([
-  MapToComponentField()
-], FieldErrorControllerSlimmer.prototype, "host", void 0);
-__decorate$2([
-  MapToComponentField()
-], FieldErrorControllerSlimmer.prototype, "options", void 0);
-__decorate$2([
-  InjectVegaSlimmer()
-], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
-__decorate$2([
-  MapToComponentMethod('setInjectFormFieldHelper')
-], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
-__decorate$2([
-  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 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.addUniqueObserverToNode(this.host, VegaInternalValid, this.handleValidInvocation);
-  }
-  /**
-   * unregister the observer when the slimmer method called
-   */
-  handleUnregisterObserver() {
-    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalValid);
-  }
-}
-__decorate$1([
-  MapToComponentField()
-], FormFieldValidInvokeSlimmer.prototype, "host", void 0);
-__decorate$1([
-  MapToComponentField()
-], FormFieldValidInvokeSlimmer.prototype, "validator", void 0);
-__decorate$1([
-  MapToComponentMethod('setInjectFormFieldHelper')
-], FormFieldValidInvokeSlimmer.prototype, "registerValidInvocationObserver", null);
-__decorate$1([
-  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 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
-   */
-  watchValidationRulesByFormControllerSlimmer() {
-    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.notify(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({
-      options: {
-        attributeFilter: this.options.propertyRules.map((rule) => camelToDashCase(rule.propertyName)),
-        attributeOldValue: true,
-      },
-      mutationFilter: AttributeOldValueMutationFilter(),
-      callback: this.mutationObserverCallBack,
-    });
-  }
-}
-__decorate([
-  MapToComponentField()
-], FormFieldControllerSlimmer.prototype, "host", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], FormFieldControllerSlimmer.prototype, "validationRules", void 0);
-__decorate([
-  MapToComponentField()
-], FormFieldControllerSlimmer.prototype, "disabled", void 0);
-__decorate([
-  MapToComponentField()
-], FormFieldControllerSlimmer.prototype, "autoValidation", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], FormFieldControllerSlimmer.prototype, "isValid", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], FormFieldControllerSlimmer.prototype, "fieldErrorSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], FormFieldControllerSlimmer.prototype, "formFieldValidInvokeSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], FormFieldControllerSlimmer.prototype, "mutationObserverSlimmer", void 0);
-__decorate([
-  MapToComponentMethod('connectedCallback')
-], FormFieldControllerSlimmer.prototype, "connectedCallback", null);
-__decorate([
-  MapToComponentMethod('disconnectedCallback')
-], FormFieldControllerSlimmer.prototype, "disconnectedCallback", null);
-__decorate([
-  MapToComponentMethod('componentDidLoad')
-], FormFieldControllerSlimmer.prototype, "componentDidLoad", null);
-__decorate([
-  MapToComponentMethod('watchValidationRules')
-], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
-__decorate([
-  MapToComponentMethod('componentWillLoad')
-], FormFieldControllerSlimmer.prototype, "setInjectFormFieldHelper", null);
-
-export { FormFieldControllerSlimmer as F };