@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

package/dist/collection/helpers/formatter/state-formatter/stateFormatFacade.js

@@ -0,0 +1,42 @@
+import StateBackgroundColorFormatter from './stateBackgroundColorFormatter';
+import StateBorderColorFormatter from './stateBorderColorFormatter';
+import StateShadowFormatter from './stateShadowFormatter';
+import StateBorderFormatter from './stateBorderFormatter';
+/**
+ * The `StateFormatFacade` class in TypeScript provides a method to format different types of
+ * state variants based on a specified flag.
+ */
+class StateFormatFacade {
+  /**
+   * The function `format` takes in an input and a flag, then formats the input based on the flag
+   * provided.
+   *
+   * @param {StateVariantType} input - The `input` parameter in the `format` function is of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that it expects an input value
+   * that corresponds to the specified flag and state. The `Flag` type is a key of
+   * `ManagedStateScopeInput
+   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `format` function is a key of the
+   * `ManagedStateScopeInput` type. It is used to determine which formatting logic to apply based on the
+   * specific flag provided. The function then switches on the flag value to select the appropriate
+   * formatting logic for that particular flag.
+   * @returns {string} The `format` function takes in an input of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>` and a flag of type `Flag`. It then switches
+   * on the flag value and returns a formatted string based on the flag value. The return value depends
+   * on the flag value:
+   */
+  format(input, flag) {
+    switch (flag) {
+      case 'backgroundColor':
+        return StateBackgroundColorFormatter.format(input);
+      case 'borderColor':
+        return StateBorderColorFormatter.format(input);
+      case 'shadow':
+        return StateShadowFormatter.format(input);
+      case 'border':
+        return StateBorderFormatter.format(input);
+      default:
+        throw new Error(`Invalid flag ${flag} passed into StateFormatFacade`);
+    }
+  }
+}
+export default new StateFormatFacade();

package/dist/collection/helpers/formatter/state-formatter/stateShadowFormatter.js

@@ -0,0 +1,42 @@
+import { isShadowsTokenType } from '../../../types/typeGuard';
+import { LogUtility } from '../../../utils/log';
+import { StateVariantFormatter } from './stateVariantFormatter';
+import { ShadowMap, Shadows } from '../../../constants/publicApi';
+/**
+ * The `StateShadowFormatter` class in TypeScript formats a CSS `box-shadow` property based on a
+ * ShadowsTokenType input and provides an array of CssStatesType objects.
+ */
+class StateShadowFormatter extends StateVariantFormatter {
+  constructor() {
+    super(...arguments);
+    this.states = ['default', 'focus-visible', 'hover'];
+  }
+  /**
+   * The `formatToken` function in TypeScript takes a ShadowsTokenType input, validates it, and returns a
+   * formatted CSS box-shadow property string or logs a warning if the input is invalid.
+   *
+   * @param {ShadowsTokenType} input - ShadowsTokenType
+   * @returns {string} The `formatToken` function takes a `ShadowsTokenType` input and returns a CSS `box-shadow`
+   * property with the corresponding value from the `ShadowMap` object. If the input is not a valid
+   * `ShadowsTokenType`, it logs a warning message using `LogUtility.warn` and returns an empty string.
+   */
+  formatToken(input) {
+    if (isShadowsTokenType(input)) {
+      const tokenValue = ShadowMap[input];
+      return `box-shadow: ${tokenValue};`;
+    }
+    else {
+      LogUtility.warn(`The shadow value ${input} is invalid, it must be a value of: `, Shadows);
+      return '';
+    }
+  }
+  /**
+   * The function `getStates` returns an array of `CssStatesType` objects.
+   *
+   * @returns {CssStatesType[]}An array of CssStatesType objects is being returned.
+   */
+  getStates() {
+    return this.states;
+  }
+}
+export default new StateShadowFormatter();

package/dist/collection/helpers/formatter/state-formatter/stateVariantFormatter.js

@@ -0,0 +1,35 @@
+import { isStateVariantTokenType } from '../../../types/typeGuard';
+/**
+ * StateVariantFormatter: Format state token to CSS styles
+ */
+export class StateVariantFormatter {
+  /**
+   * The function `format` takes an input state variant type and returns formatted CSS styles based on
+   * the input.
+   *
+   * @param {StateVariantType} input - The `format` function takes an `input` parameter of type
+   * `StateVariantType<ManagedStateScopeInput[Flag], State>`. This means that the `input` parameter
+   * should be an object that contains styles for different states, where the keys are state names and
+   * the values are the corresponding styles
+   * @returns {string} The `format` function returns a string that contains CSS styles based on the input
+   * provided. If the input is determined to be a state variant token type, the function generates CSS
+   * styles for each state in the input and returns them joined by newlines. If the input is not a state
+   * variant token type, the function generates CSS styles for the default state and returns them.
+   */
+  format(input) {
+    if (isStateVariantTokenType(input)) {
+      const stateStyles = [];
+      this.getStates().forEach((state) => {
+        const style = this.formatToken(input[state]);
+        if (style) {
+          stateStyles.push(`:host${state === 'default' ? '' : `(:${state})`}{\n\t${style}\n}`);
+        }
+      });
+      return stateStyles.join('\n');
+    }
+    else {
+      const style = this.formatToken(input);
+      return `:host{\n\t${style}\n}`;
+    }
+  }
+}

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsiveBorderRadiusFormatter.test.js

@@ -0,0 +1,64 @@
+import { LogUtility } from '../../../../utils/log';
+import ResponsiveBorderRadiusFormatter from '../../responsive-map-formatter/responsiveBorderRadiusFomatter';
+test('should console warn when input not in string scope', () => {
+  spyOn(LogUtility, 'warn');
+  ResponsiveBorderRadiusFormatter.formatToken('99');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in border radius scope', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken('rounded-none');
+  expect(result).toEqual('v-rounded-0');
+});
+test('should return format when input in scope and with prefix not in scope', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken('rounded-full', 'default');
+  expect(result).toEqual('v-rounded-9999');
+});
+test('should return format when input in directional border radius scope', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ top: 'rounded-24' });
+  expect(result).toEqual('v-rounded-t-24');
+});
+test('should return format when input in directional border radius scope and with prefix', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ top: 'rounded-24' }, 'XL');
+  expect(result).toEqual('XL:v-rounded-t-24');
+});
+test('should return format when input in directional border radius scope and with prefix not in scope', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ top: 'rounded-24' }, 'test');
+  expect(result).toEqual('v-rounded-t-24');
+});
+test('should return format when input is left', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ left: 'rounded-16' });
+  expect(result).toEqual('v-rounded-l-16');
+});
+test('should return format when input is right', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ right: 'rounded-16' });
+  expect(result).toEqual('v-rounded-r-16');
+});
+test('should return format when input is top-left', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ 'top-left': 'rounded-16' });
+  expect(result).toEqual('v-rounded-tl-16');
+});
+test('should return format when input is top-right', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ 'top-right': 'rounded-16' });
+  expect(result).toEqual('v-rounded-tr-16');
+});
+test('should return format when input is bottom-left', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ 'bottom-left': 'rounded-16' });
+  expect(result).toEqual('v-rounded-bl-16');
+});
+test('should return format when input is bottom-right', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({ 'bottom-right': 'rounded-16' });
+  expect(result).toEqual('v-rounded-br-16');
+});
+test('should return format when input is all in directional border radius scope', () => {
+  const result = ResponsiveBorderRadiusFormatter.formatToken({
+    'top': 'rounded-16',
+    'bottom': 'rounded-16',
+    'left': 'rounded-16',
+    'right': 'rounded-16',
+    'top-left': 'rounded-16',
+    'top-right': 'rounded-16',
+    'bottom-left': 'rounded-16',
+    'bottom-right': 'rounded-16',
+  });
+  expect(result).toEqual('v-rounded-t-16 v-rounded-b-16 v-rounded-l-16 v-rounded-r-16 v-rounded-tl-16 v-rounded-tr-16 v-rounded-bl-16 v-rounded-br-16');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsiveFormatMediator.test.js

@@ -37,3 +37,7 @@ test('should return format when flag is display', () => {
   const result = ResponsiveFormatFacade.format(false, 'display');
   expect(result).toEqual('v-hidden');
 });
+test('should return format when flag is border-radius', () => {
+  const result = ResponsiveFormatFacade.format('rounded-24', 'corners');
+  expect(result).toEqual('v-rounded-24');
+});

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsiveWidthAndHeightFormatter.test.js

@@ -0,0 +1,20 @@
+import ResponsiveWidthAndHeightFormatter from '../../responsive-map-formatter/responsiveWidthAndHeightFormatter';
+test('should return proper when input a width and height type', () => {
+  const result = ResponsiveWidthAndHeightFormatter.format(100);
+  expect(result).toEqual('100px');
+  const result1 = ResponsiveWidthAndHeightFormatter.format('120px');
+  expect(result1).toEqual('120px');
+  const result2 = ResponsiveWidthAndHeightFormatter.format('150vw');
+  expect(result2).toEqual('150vw');
+  const result3 = ResponsiveWidthAndHeightFormatter.format('150vh');
+  expect(result3).toEqual('150vh');
+  const result4 = ResponsiveWidthAndHeightFormatter.format('size-2');
+  expect(result4).toEqual('2px');
+});
+test('should return proper when input a responsive translocation type', () => {
+  const result = ResponsiveWidthAndHeightFormatter.format({
+    M: '100px',
+    L: 200,
+  });
+  expect(result).toEqual('200px');
+});

package/dist/collection/helpers/formatter/test/state-formatter/stateBackgroundColorFormatter.test.js

@@ -0,0 +1,18 @@
+import { LogUtility } from '../../../../utils/log';
+import StateBackgroundColorFormatter from '../../state-formatter/stateBackgroundColorFormatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  StateBackgroundColorFormatter.formatToken('non');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  expect(StateBackgroundColorFormatter.formatToken('bg-action')).toEqual('background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));');
+});
+test('should return states when getStates called', () => {
+  expect(StateBackgroundColorFormatter.getStates()).toEqual([
+    'default',
+    'hover',
+    'active',
+    'focus-visible',
+  ]);
+});

package/dist/collection/helpers/formatter/test/state-formatter/stateBorderColorFormatter.test.js

@@ -0,0 +1,13 @@
+import { LogUtility } from '../../../../utils/log';
+import StateBorderColorFormatter from '../../state-formatter/stateBorderColorFormatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  StateBorderColorFormatter.formatToken('non');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  expect(StateBorderColorFormatter.formatToken('border-color-action')).toEqual('border-color: rgba(var(--v-border-color-action, 19, 98, 226, 1));');
+});
+test('should return states when getStates called', () => {
+  expect(StateBorderColorFormatter.getStates()).toEqual(['default', 'focus-visible', 'hover', 'active']);
+});

package/dist/collection/helpers/formatter/test/state-formatter/stateBorderFormatter.test.js

@@ -0,0 +1,13 @@
+import { LogUtility } from '../../../../utils/log';
+import StateBorderFormatter from '../../state-formatter/stateBorderFormatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  StateBorderFormatter.formatToken('non');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  expect(StateBorderFormatter.formatToken('border-secondary-btn')).toEqual('border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));');
+});
+test('should return states when getStates called', () => {
+  expect(StateBorderFormatter.getStates()).toEqual(['default', 'focus-visible', 'hover', 'active']);
+});

package/dist/collection/helpers/formatter/test/state-formatter/stateFormatFacade.test.js

@@ -0,0 +1,27 @@
+import StateFormatFacade from '../../state-formatter/stateFormatFacade';
+test('should return format when input is bg-action', () => {
+  expect(StateFormatFacade.format('bg-action', 'backgroundColor')).toEqual(`:host{
+	background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}`);
+});
+test('should return format when input is border-color-action', () => {
+  expect(StateFormatFacade.format('border-color-action', 'borderColor')).toEqual(`:host{
+	border-color: rgba(var(--v-border-color-action, 19, 98, 226, 1));
+}`);
+});
+test('should return format when input is border-secondary-btn', () => {
+  expect(StateFormatFacade.format('border-secondary-btn', 'border')).toEqual(`:host{
+	border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
+}`);
+});
+test('should return format when input is shadow-card', () => {
+  expect(StateFormatFacade.format('shadow-card', 'shadow')).toEqual(`:host{
+	box-shadow: var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02));
+}`);
+});
+test('should raise warn when input invalid flag', () => {
+  const testFunction = () => {
+    StateFormatFacade.format('bg-action', 'invalid');
+  };
+  expect(testFunction).toThrowError('Invalid flag invalid passed into StateFormatFacade');
+});

package/dist/collection/helpers/formatter/test/state-formatter/stateShadowFormatter.test.js

@@ -0,0 +1,13 @@
+import { LogUtility } from '../../../../utils/log';
+import StateShadowFormatter from '../../state-formatter/stateShadowFormatter';
+test('should console warn when input not in scope', () => {
+  spyOn(LogUtility, 'warn');
+  StateShadowFormatter.formatToken('non');
+  expect(LogUtility.warn).toHaveBeenCalled();
+});
+test('should return format when input in scope', () => {
+  expect(StateShadowFormatter.formatToken('shadow-card')).toEqual('box-shadow: var(--v-shadow-card, 0px 2px 8px 0px rgba(0, 0, 0, 0.04), 0px 2px 4px 0px rgba(0, 0, 0, 0.02));');
+});
+test('should return states when getStates called', () => {
+  expect(StateShadowFormatter.getStates()).toEqual(['default', 'focus-visible', 'hover']);
+});

package/dist/collection/helpers/keyboard/keyboardManager.js

@@ -1,4 +1,4 @@
-import { isParent } from '../../utils/ui';
+import { getDeepActiveElementInShadow, isParent } from '../../utils/ui';
 /**
  * It listens to the keyup event on the window and calls the appropriate method on the registered elements
  *
@@ -89,25 +89,13 @@ class KeyboardManager {
     }
     const isActiveElementInScope = listener.activeElementInScope
       ? activeElementInScope.some((element) => {
-        return isParent(this.getActiveElement(), element);
+        return isParent(getDeepActiveElementInShadow(), element);
       })
       : true;
     const isActiveElementOutScope = listener.activeElementOutScope
-      ? activeElementOutScope.every((element) => !isParent(this.getActiveElement(), element))
+      ? activeElementOutScope.every((element) => !isParent(getDeepActiveElementInShadow(), element))
       : true;
     return isKeyCodeAccepted && isActiveElementInScope && isActiveElementOutScope;
   }
-  /**
-   * If shadowRoot exists, it returns the activeElement in the shadowRoot. Otherwise, it returns the activeElement in the current scope.
-   *
-   *  @returns {HTMLElement} - The active element in the current scope.
-   */
-  getActiveElement() {
-    var _a;
-    if (document.activeElement) {
-      return (((_a = document.activeElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) ||
-        document.activeElement);
-    }
-  }
 }
 export default new KeyboardManager();

package/dist/collection/helpers/slimmers/elementAppenderSlimmer.js

@@ -8,19 +8,22 @@ import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { ElementAppender } from '../ui/elementAppender';
 import { findParent, isParent } from '../../utils/ui';
 export class ElementAppenderSlimmer extends VegaSlimmer {
-  constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow') {
+  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;
+      var _a, _b, _c, _d, _e, _f;
       this.unRegisterElementAppenderListener();
-      (_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.appendableElement) === null || _d === void 0 ? void 0 : _d.addEventListener('mouseenter', this.elementMouseEnterHandler);
-      (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseleave', this.elementMouseLeaveHandler);
+      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.targetMouseLeaveHandler);
+        (_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
@@ -49,7 +52,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     /* 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')) {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
         this.clearDelayHideTimer();
       }
     };
@@ -57,7 +60,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     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')) {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
         this.createDelayHideTimer();
       }
     };
@@ -68,6 +71,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       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')) {
@@ -102,6 +106,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     this.showConfigFactory = showConfigFactory;
     this.getTrigger = getTrigger;
     this.isDropdownShowName = isDropdownShowName;
+    this.disableInteractiveGetter = disableInteractiveGetter;
   }
   connectedCallback() {
     if (this.elementAppender === null) {
@@ -149,12 +154,15 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
    * It removes all event listeners that were added in the `register()` function
    */
   unRegisterElementAppenderListener() {
-    var _a, _b, _c, _d, _e;
-    (_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.appendableElement) === null || _d === void 0 ? void 0 : _d.removeEventListener('mouseenter', this.elementMouseEnterHandler);
-    (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
+    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);
   }
 }

package/dist/collection/helpers/slimmers/fieldErrorUiControllerSlimmer.js

@@ -6,75 +6,63 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField as MapToClassField, VegaSlimmer } from 'vega-slimmer/core';
 import ChangeManager from '../change-manager/changeManager';
-import { FIELD_ERROR_STATE_CHANGE } from '../change-manager/subject/static-subject/staticSubjectTitle';
-const DEFAULT_INPUT_CONTAINER_SELECTOR = '.vega-input-container';
+import DomNodeSubjectFactory from '../change-manager/subject/dom-node-subject/domNodeSubjectFactory';
+import { VegaInternalFieldErrorStateChange } from '../event-manager/eventID/vegaInternalEventId';
 /** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
 export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
   /**
-   * It takes an error message and displays it in the error container
+   * 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) {
-    if (errorMessage) {
-      const inputContainer = this.getInputElementContainer();
-      const errorContainer = this.getErrorContainer();
+    const inputContainer = this.getInputElementContainer();
+    if (errorMessage && inputContainer) {
+      const errorContainer = this.getErrorContainer(inputContainer);
       errorContainer.innerHTML = errorMessage;
       errorContainer.classList.remove('vega-hidden');
       inputContainer.classList.add('error');
-      /*
-       TODO: FieldErrorControllerSlimmer is separated from FormFieldControllerSlimmer and is bound by each component.
-       link: https://gethired.atlassian.net/jira/software/c/projects/VD/issues/VD-2508
-       */
-      ChangeManager.notify(FIELD_ERROR_STATE_CHANGE, { host: this.host, showError: true });
+      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();
-    const errorContainer = this.getErrorContainer();
-    errorContainer.classList.add('vega-hidden');
-    inputContainer.classList.remove('error');
-    ChangeManager.notify(FIELD_ERROR_STATE_CHANGE, { host: this.host, showError: false });
-  }
-  /**
-   * Get the input element container by selector
-   *
-   * @deprecated The method will be delete
-   * @returns {HTMLElement} The input element container.
-   */
-  getInputElementContainerBySelector() {
-    const inputContainerSelector = this.options && this.options.inputContainerSelector
-      ? this.options.inputContainerSelector
-      : DEFAULT_INPUT_CONTAINER_SELECTOR;
-    // TODO: while all component use shadow, there would be no need to use `this.host`
-    const container = this.host.shadowRoot || this.host;
-    const inputContainer = container.querySelector(inputContainerSelector);
-    if (!inputContainer) {
-      throw new Error(`Can't not find inputContainer with selector ${inputContainerSelector}`);
+    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,
+      });
     }
-    return inputContainer;
   }
   /**
    * Get the input element container
    *
-   * @returns {HTMLElement} The input element container.
+   * @returns {Nullable<HTMLElement>} The input element container.
    */
   getInputElementContainer() {
-    return this.options && this.options.inputContainerGetter
-      ? this.options.inputContainerGetter()
-      : this.getInputElementContainerBySelector();
+    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() {
+  getErrorContainer(inputContainer) {
     var _a;
-    const inputContainer = this.getInputElementContainer();
     let siblingContainer = inputContainer.nextSibling;
     if (!siblingContainer || !((_a = siblingContainer.classList) === null || _a === void 0 ? void 0 : _a.contains('vega-error'))) {
       siblingContainer = document.createElement('label');

package/dist/collection/helpers/slimmers/formFieldControllerSlimmer.js

@@ -5,12 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, InjectVegaSlimmer, VegaSlimmer } from 'vega-slimmer/core';
-import { FeatureFlag } from '../feature-control/featureFlagController';
 import { camelToDashCase } from '../../utils/string';
 import { FormFieldController } from '../validator/formFieldController';
 import { FieldErrorControllerSlimmer } from './fieldErrorControllerSilmmer';
 import changeManager from '../change-manager/changeManager';
 import { FORM_ELEMENT_VALIDATE } from '../change-manager/subject/static-subject/staticSubjectTitle';
+import { FormFieldValidInvokeSlimmer } from './formFieldValidInvokeSlimmer';
 /**
  * The `FormFieldControllerSlimmer` class is a TypeScript class that extends `VegaSlimmer` and provides functionality for managing form field components.
  * TODO:
@@ -28,6 +28,7 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
   constructor(options) {
     super();
     this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
+    this.formFieldValidInvokeSlimmer = new FormFieldValidInvokeSlimmer();
     this.options = options;
   }
   /**
@@ -48,16 +49,6 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
     this.setAdditionalRules();
     this.internalValidate();
   }
-  /**
-   * call the method when the component call valid method
-   *
-   * @param {boolean | 'rule'} showError show error message or not
-   * @returns {Promise<boolean>} the validation result
-   */
-  validByFormControllerSlimmer(showError = true) {
-    var _a;
-    return (_a = this.validator) === null || _a === void 0 ? void 0 : _a.validate(showError);
-  }
   /**
    * listen the attributes change when connectedCallback method call
    */
@@ -88,20 +79,15 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
    * inject form file help when componentWillLoad method call
    */
   setInjectFormFieldHelper() {
-    const isFeatureEnabled = FeatureFlag.isEnabled('VEGA_INJECT_FORM_FIELD_CONTROLLER.ADD_DATA_VEGA_FORM_FILTER');
-    if (!isFeatureEnabled ||
-      (isFeatureEnabled && FormFieldControllerSlimmer.isValidFormField(this.host))) {
-      const { defaultValue, touchableAreaSelector } = this.options;
-      const validator = new FormFieldController(this.getPropertyRules(), this.host, defaultValue, this.options, touchableAreaSelector);
+    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;
-            if (this.vegaValidate) {
-              this.vegaValidate.emit(isValid);
-              changeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: isValid });
-            }
+            changeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: isValid });
           }
         },
       });
@@ -191,18 +177,15 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], FormFieldControllerSlimmer.prototype, "isValid", void 0);
-__decorate([
-  MapToComponentField()
-], FormFieldControllerSlimmer.prototype, "vegaValidate", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], FormFieldControllerSlimmer.prototype, "fieldErrorSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], FormFieldControllerSlimmer.prototype, "formFieldValidInvokeSlimmer", void 0);
 __decorate([
   MapToComponentMethod('watchValidationRules')
 ], FormFieldControllerSlimmer.prototype, "watchValidationRulesByFormControllerSlimmer", null);
-__decorate([
-  MapToComponentMethod('valid')
-], FormFieldControllerSlimmer.prototype, "validByFormControllerSlimmer", null);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], FormFieldControllerSlimmer.prototype, "initialFormFieldHelper", null);