@globalpayments/vega 2.19.0 → 2.20.1

package/dist/collection/helpers/slimmers/element-appender-slimmer.js

@@ -0,0 +1,186 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { ElementAppender } from '../ui/element-appender';
+import { findParent, isParent } from '../../utils/ui';
+export class ElementAppenderSlimmer extends VegaSlimmer {
+  constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
+    super();
+    /**
+     * It adds event listeners to the target and the appendable element
+     */
+    this.registerElementAppenderListener = () => {
+      var _a, _b, _c, _d, _e, _f;
+      this.unRegisterElementAppenderListener();
+      if (this.showConfig) {
+        (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.targetClickHandler);
+        (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.targetMouseEnterHandler);
+        (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+        (_d = this.showConfig.target) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', this.targetFocusoutHandler);
+        (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseenter', this.elementMouseEnterHandler);
+        (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseleave', this.elementMouseLeaveHandler);
+      }
+      window.addEventListener('mousedown', this.globalMouseDownHandler);
+    };
+    /* It's a function that listens to the click event on the dropdown. It checks if the trigger
+    property is equal to 'click'. If it is, then it toggles the dropdown. */
+    this.targetClickHandler = () => {
+      if (this.shouldListenerWork('click')) {
+        this.isShowing() ? this.hide() : this.show();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.targetMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.isShowing() === false && this.show();
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.targetMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* istanbul ignore next */
+    /* While focused element is in appendable element, like search input, we should not hide dropdown */
+    this.targetFocusoutHandler = (e) => {
+      var _a;
+      if (e.relatedTarget !== ((_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.appendableElement)) {
+        this.targetMouseLeaveHandler();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.elementMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.elementMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
+    and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
+    hides the dropdown. */
+    this.globalMouseDownHandler = (e) => {
+      const currentTarget = e.composedPath()[0];
+      if (this.shouldListenerWork('custom') &&
+        this.isShowing() &&
+        this.showConfig &&
+        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !isParent(currentTarget, this.showConfig.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
+        this.hide();
+      }
+    };
+    /* A timer that will hide the dropdown after a certain amount of time. */
+    this.createDelayHideTimer = () => {
+      this.delayHideTimer = setTimeout(() => {
+        this.hide();
+        clearTimeout(this.delayHideTimer);
+      }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
+    };
+    /* A function that clears the timer. */
+    this.clearDelayHideTimer = () => {
+      this.delayHideTimer && clearTimeout(this.delayHideTimer);
+    };
+    /* It's a function that checks if the listener should work or not. */
+    this.shouldListenerWork = (trigger) => {
+      const currentTrigger = this.getTrigger();
+      switch (trigger) {
+        case 'custom':
+          return currentTrigger !== 'none';
+        case 'click':
+          return currentTrigger === 'click';
+        case 'hover':
+          return currentTrigger === 'hover';
+      }
+      /* istanbul ignore next */
+      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
+    };
+    this.showConfigFactory = showConfigFactory;
+    this.getTrigger = getTrigger;
+    this.isDropdownShowName = isDropdownShowName;
+    this.disableInteractiveGetter = disableInteractiveGetter;
+  }
+  connectedCallback() {
+    if (this.elementAppender === null) {
+      this.setElementAppender();
+      this.registerElementAppenderListener();
+    }
+  }
+  disconnectedCallback() {
+    this.unRegisterElementAppenderListener();
+    if (this.elementAppender) {
+      this.elementAppender.destroy();
+      this.elementAppender = null;
+    }
+  }
+  componentDidLoad() {
+    this.setShowConfig();
+    this.setElementAppender();
+    this.registerElementAppenderListener();
+  }
+  getElementAppender() {
+    return this.elementAppender;
+  }
+  show() {
+    this.elementAppender && this.elementAppender.show();
+    this[this.isDropdownShowName] = true;
+  }
+  hide() {
+    this.elementAppender && this.elementAppender.hide();
+    this[this.isDropdownShowName] = false;
+  }
+  destroy() {
+    this.elementAppender = null;
+    this[this.isDropdownShowName] = false;
+  }
+  setElementAppender() {
+    this.elementAppender = new ElementAppender(this.showConfigFactory, this);
+  }
+  isShowing() {
+    return this[this.isDropdownShowName];
+  }
+  setShowConfig() {
+    this.showConfig = this.showConfigFactory();
+  }
+  /**
+   * It removes all event listeners that were added in the `register()` function
+   */
+  unRegisterElementAppenderListener() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.showConfig) {
+      (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.targetClickHandler);
+      (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+      (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+      (_d = this.showConfig.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', this.targetMouseLeaveHandler);
+      (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseenter', this.elementMouseEnterHandler);
+      (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
+    }
+    window.removeEventListener('mousedown', this.globalMouseDownHandler);
+  }
+}
+ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], ElementAppenderSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], ElementAppenderSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], ElementAppenderSlimmer.prototype, "componentDidLoad", null);

package/dist/collection/helpers/slimmers/field-error-controller-silmmer.js

@@ -0,0 +1,74 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField as MapToSlimmerField, MapToComponentMethod as MapToSlimmerMethod, VegaSlimmer, InjectVegaSlimmer, } from 'vega-slimmer/core';
+import { Observer } from '../change-manager/observer/observer';
+import changeManager from '../change-manager/change-manager';
+import { FIELD_ERROR_MESSAGE_CHANGE } from '../change-manager/subject/static-subject/static-subject-title';
+import { FieldErrorUIControllerSlimmer } from './field-error-ui-controller-slimmer';
+/** The `FieldBoxControllerSlimmer` class is a TypeScript class that extends the `VegaSlimmer` class and provides methods for handling error UI in a field error component. */
+export 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([
+  MapToSlimmerField()
+], FieldErrorControllerSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToSlimmerField()
+], FieldErrorControllerSlimmer.prototype, "options", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], FieldErrorControllerSlimmer.prototype, "fieldErrorUIController", void 0);
+__decorate([
+  MapToSlimmerMethod('setInjectFormFieldHelper')
+], FieldErrorControllerSlimmer.prototype, "handleComponentWillLoadByFieldErrorSlimmer", null);
+__decorate([
+  MapToSlimmerMethod('disconnectedCallback')
+], FieldErrorControllerSlimmer.prototype, "handleUnregisterObserver", null);

package/dist/collection/helpers/slimmers/field-error-ui-controller-slimmer.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField as MapToClassField, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../change-manager/change-manager';
+import DomNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFieldErrorStateChange } from '../event-manager/event-id/vega-internal-event-id';
+import { SiblingContainerNestedErrorContainerRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-nested-error-container-retrieval-strategy';
+import { SiblingContainerSelfRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-self-retrieval-strategy';
+import { SiblingContainerErrorLabelContainerRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-error-label-container-retrieval-strategy';
+/** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
+export class FieldErrorUIControllerSlimmer extends 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.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) {
+    for (const strategy of this.fieldErrorUiControllerStrategies) {
+      const errorContainer = strategy.run(inputContainer);
+      if (errorContainer) {
+        return errorContainer;
+      }
+    }
+  }
+}
+__decorate([
+  MapToClassField()
+], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToClassField()
+], FieldErrorUIControllerSlimmer.prototype, "options", void 0);

package/dist/collection/helpers/slimmers/form-field-controller-slimmer.js

@@ -0,0 +1,209 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, InjectVegaSlimmer, VegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { camelToDashCase } from '../../utils/string';
+import { FormFieldController } from '../validator/form-field-controller';
+import { FieldErrorControllerSlimmer } from './field-error-controller-silmmer';
+import changeManager from '../change-manager/change-manager';
+import { FORM_ELEMENT_VALIDATE } from '../change-manager/subject/static-subject/static-subject-title';
+import { FormFieldValidInvokeSlimmer } from './form-field-valid-invoke-slimmer';
+import { MutationObserverSlimmer } from './mutation-observer/mutation-observer-slimmer';
+import { AttributeOldValueMutationFilter } from './mutation-observer/mutation-observer-filters';
+import { isArrayEqual } from '../../utils/array';
+/**
+ * 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`
+ */
+export 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() {
+    methodPlaceholder();
+  }
+  /**
+   * "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 (!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.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);

package/dist/collection/helpers/slimmers/form-field-valid-invoke-slimmer.js

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField as MapToSlimmerField, MapToComponentMethod as MapToSlimmerMethod, VegaSlimmer, } from 'vega-slimmer/core';
+import { VegaInternalValid } from '../event-manager/event-id/vega-internal-event-id';
+import { DomNodeSubjectObserverFactory } from '../change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+/** The FormFieldValidInvokeSlimmer class extends VegaSlimmer and handles validation calls for form elements. */
+export 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([
+  MapToSlimmerField()
+], FormFieldValidInvokeSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToSlimmerField()
+], FormFieldValidInvokeSlimmer.prototype, "validator", void 0);
+__decorate([
+  MapToSlimmerMethod('setInjectFormFieldHelper')
+], FormFieldValidInvokeSlimmer.prototype, "registerValidInvocationObserver", null);
+__decorate([
+  MapToSlimmerMethod('disconnectedCallback')
+], FormFieldValidInvokeSlimmer.prototype, "handleUnregisterObserver", null);