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

package/dist/collection/helpers/slimmers/element-appender-container/vegaModalWrapper.js

@@ -0,0 +1,62 @@
+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 { findParent } from '../../../utils/ui';
+import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
+/**
+ * This class is is used to get vega-modal element as a container and store the element appender element to slot.
+ *
+ * @property {HTMLElement} showConfig the show config
+ */
+export class VegaModalWrapper {
+  constructor() {
+    /**
+     * The canRetrieve function just determines whether the target of showConfig has the `vega-modal` element. If not, search upwards layer by layer.
+     *
+     * @returns {boolean} the boolean type.
+     */
+    this.canRetrieve = () => !!findParent(this.showConfig.target, 'vega-modal');
+    /**
+     * The retrieve function get the slot position of vega-modal element.
+     *
+     * @returns {HTMLElement} the element.
+     */
+    this.retrieve = () => this.getVegaModalShowConfigContainer();
+  }
+  /**
+   * This function `getVegaModalContentWithoutScroll` determines whether vega-modal has a slot whose name is `content` or `modal-content`. If there is a component rendered in the modal, the elementAppender added to the corresponding slot attribute is added. If not, the elementAppender is not directly appended to the root directory of vega-modal.
+   *
+   * @param {Nullable<HTMLElement>} parentModal The parentModal is vega-modal element.
+   * @param {Nullable<HTMLElement>} element The parentModal is vega-modal element.
+   */
+  setElementSlot(parentModal, element) {
+    var _a;
+    const slotName = (_a = Array.from(parentModal.children)
+      .find((item) => {
+      const slotName = item.getAttribute('slot');
+      return slotName && ['content', 'modal-content'].includes(slotName);
+    })) === null || _a === void 0 ? void 0 : _a.getAttribute('slot');
+    if (slotName) {
+      element.setAttribute('slot', slotName);
+    }
+  }
+  /**
+   * The function "getShowConfigContainer" returns the appended element container. If the modal content can be scrolled, the container is the div element that wraps the append element. Otherwise, the container is the modal dialog itself.
+   *
+   * @returns {HTMLElement} the `scrollContainer` element.
+   */
+  getVegaModalShowConfigContainer() {
+    const parentModal = findParent(this.showConfig.target, 'vega-modal');
+    const modalContentScrollable = parentModal.shadowRoot.querySelector('.vega-modal-content-with-scroll');
+    const modalDialog = parentModal.shadowRoot.querySelector('.modal-dialog');
+    this.setElementSlot(parentModal, this.showConfig.appendableElement);
+    parentModal.append(this.showConfig.appendableElement);
+    return modalContentScrollable ? modalContentScrollable : modalDialog;
+  }
+}
+__decorate([
+  MapToSlimmerField({ writable: true })
+], VegaModalWrapper.prototype, "showConfig", void 0);

package/dist/collection/helpers/slimmers/element-appender-container/vegaPopoverWrapper.js

@@ -0,0 +1,36 @@
+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 { findParent } from '../../../utils/ui';
+import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
+/**
+ * This class is used to get the class `vega-popover` as a container and store the element appender element.
+ *
+ * @property {HTMLElement} showConfig the show config
+ */
+export class VegaPopoverWrapper {
+  constructor() {
+    /**
+     * The canRetrieve function just determine whether the target of showConfig has the class `vega-popover`. If not, search upwards layer by layer.
+     *
+     * @returns {boolean} the boolean type.
+     */
+    this.canRetrieve = () => !!findParent(this.showConfig.target, '.vega-popover');
+    /**
+     * The retrieve function get the element that if the target of showConfig does not have the class vega-popover, search upwards layer by layer until this element is found.
+     *
+     * @returns {HTMLElement} the element.
+     */
+    this.retrieve = () => {
+      const container = findParent(this.showConfig.target, '.vega-popover');
+      container.append(this.showConfig.appendableElement);
+      return container;
+    };
+  }
+}
+__decorate([
+  MapToSlimmerField()
+], VegaPopoverWrapper.prototype, "showConfig", void 0);

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();
       }
     };
@@ -65,12 +68,13 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     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() &&
-        !isParent(e.target, this.showConfig.appendableElement) &&
-        !isParent(e.target, this.showConfig.target) &&
-        findParent(e.target, 'vega-modal') ===
-          findParent(this.showConfig.target, 'vega-modal')) {
+        this.showConfig &&
+        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !isParent(currentTarget, this.showConfig.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();
       }
     };
@@ -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/fieldErrorControllerSilmmer.js

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 '../observer/observer';
-import changeManager from '../observer/changeManager';
-import { FIELD_ERROR_MESSAGE_CHANGE } from '../observer/subject';
+import { Observer } from '../change-manager/observer/observer';
+import changeManager from '../change-manager/changeManager';
+import { FIELD_ERROR_MESSAGE_CHANGE } from '../change-manager/subject/static-subject/staticSubjectTitle';
 import { FieldErrorUIControllerSlimmer } from './fieldErrorUiControllerSlimmer';
 /** 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 {

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

@@ -5,59 +5,70 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField as MapToClassField, VegaSlimmer } from 'vega-slimmer/core';
-const DEFAULT_INPUT_CONTAINER_SELECTOR = '.vega-input-container';
+import ChangeManager from '../change-manager/changeManager';
+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');
+      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');
+    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 {HTMLElement} The input element container.
+   * @returns {Nullable<HTMLElement>} The input element container.
    */
   getInputElementContainer() {
-    const inputContainerSelector = this.options && this.options.inputContainerSelector
-      ? this.options.inputContainerSelector
-      : DEFAULT_INPUT_CONTAINER_SELECTOR;
-    const inputContainer = this.host.querySelector(inputContainerSelector);
-    if (!inputContainer) {
-      throw new Error(`Can't not find inputContainer with selector ${inputContainerSelector}`);
-    }
-    return inputContainer;
+    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');
       siblingContainer.classList.add('vega-error');
+      // vega-table needs to hide error content.
+      siblingContainer.setAttribute('part', 'field-error-message');
       inputContainer.after(siblingContainer);
     }
     return siblingContainer;

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

@@ -5,10 +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:
@@ -26,6 +28,7 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
   constructor(options) {
     super();
     this.fieldErrorSlimmer = new FieldErrorControllerSlimmer();
+    this.formFieldValidInvokeSlimmer = new FormFieldValidInvokeSlimmer();
     this.options = options;
   }
   /**
@@ -46,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
    */
@@ -86,17 +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;
-            this.vegaValidate && this.vegaValidate.emit(isValid);
+            changeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: isValid });
           }
         },
       });
@@ -186,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);

package/dist/collection/helpers/slimmers/formFieldValidInvokeSlimmer.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/eventID/vegaInternalEventId';
+import { DomNodeSubjectObserverFactory } from '../change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+/** 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('destroy')
+], FormFieldValidInvokeSlimmer.prototype, "handleUnregisterObserver", null);

package/dist/collection/helpers/slimmers/global/vegaWatchMethodCancelSlimmer.js

@@ -0,0 +1,98 @@
+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 { FeatureFlag } from '../../publicApi';
+/**
+ * The `VegaWatchMethodCancelSlimmer` class is a TypeScript class that removes
+ * the body of watch methods when a component is not fully instantiated and
+ * applies the original method body when the component is fully instantiated.
+ */
+export class VegaWatchMethodCancelSlimmer extends VegaSlimmer {
+  /**
+   * The constructor function takes a component object as a parameter and assigns it to the "component"
+   * property of the class.
+   *
+   * @param {GlobalSlimmerConfig} option - The `option` parameter is of type `GlobalSlimmerConfig`.
+   * It is an object that represents a component in a software system.
+   */
+  constructor(option) {
+    super();
+    this.originalWatchers = new Map();
+    /**
+     * while component reattached, the component will call `connectedCallback` but not call `componentDidLoad`,
+     * so we add this flag to skip empty the watch function in this case.
+     */
+    this.hasDisconnected = false;
+    this.isEnabled = FeatureFlag.isEnabled('VEGA_REACT.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD') &&
+      FeatureFlag.isEnabled('VEGA_FRAMEWORK.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD');
+    this.component = option.component;
+  }
+  /**
+   * The connectedCallback function removes the body of watch methods when the component is not fully
+   * instantiated.
+   */
+  connectedCallback() {
+    if (!this.isEnabled)
+      return;
+    if (this.hasDisconnected)
+      return;
+    const watchers = this.component.constructor['watchers'];
+    for (const propName in watchers) {
+      const watchMethodNames = watchers[propName];
+      watchMethodNames.forEach((methodName) => {
+        // while watch method listen by multiple property, we should skip make originalMethod as empty.
+        if (!this.originalWatchers.has(methodName)) {
+          const originalMethod = this.component[methodName];
+          this.originalWatchers.set(methodName, originalMethod);
+          /**
+           * Remove the watch method body when the component not fully instantiated.
+           */
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          this.component[methodName] = function () { };
+        }
+      });
+    }
+  }
+  /**
+   * The `@MapToComponentMethod('disconnectedCallback')` decorator is used to map the `disconnectedCallback` method
+   * to the corresponding method in the Stencil component.
+   */
+  disconnectedCallback() {
+    if (!this.isEnabled)
+      return;
+    this.hasDisconnected = true;
+  }
+  /**
+   * The `componentDidLoad` function applies the original method body to the component's watchers when
+   * the component is fully instantiated.
+   */
+  componentDidLoad() {
+    if (!this.isEnabled)
+      return;
+    this.originalWatchers.forEach((method, methodName) => {
+      const originalMethodBody = method;
+      /**
+       * Apply the watch original method body when the component fully instantiated.
+       *
+       * @param {...any} args - watch method args
+       * @returns {unknown} method results
+       */
+      this.component[methodName] = function (...args) {
+        return originalMethodBody.apply(this, args);
+      };
+    });
+  }
+}
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaWatchMethodCancelSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaWatchMethodCancelSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaWatchMethodCancelSlimmer.prototype, "componentDidLoad", null);

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

@@ -9,10 +9,11 @@ import KeyboardManager from '../keyboard/keyboardManager';
 export class KeyboardManagerSlimmer extends VegaSlimmer {
   constructor(listenersRetriever) {
     super();
+    this.keyboardEventListeners = [];
     this.listenersRetriever = listenersRetriever;
   }
   connectedCallback() {
-    this.keyboardEventListeners && KeyboardManager.register(this.keyboardEventListeners);
+    KeyboardManager.register(this.keyboardEventListeners);
   }
   disconnectedCallback() {
     KeyboardManager.deregister(this.keyboardEventListeners);

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

@@ -1,6 +1,6 @@
 import { VegaSlimmer } from 'vega-slimmer/core';
-import ChangeManager from '../observer/changeManager';
-import { SUB_STATE_CHANGE } from '../observer/subject';
+import ChangeManager from '../change-manager/changeManager';
+import { SUB_STATE_CHANGE } from '../change-manager/subject/static-subject/staticSubjectTitle';
 /**
  * Sub state notify slimmer
  */

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

@@ -5,9 +5,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { Observer } from '../observer/observer';
-import ChangeManager from '../observer/changeManager';
-import { SUB_STATE_CHANGE } from '../observer/subject';
+import { Observer } from '../change-manager/observer/observer';
+import ChangeManager from '../change-manager/changeManager';
+import { SUB_STATE_CHANGE } from '../change-manager/subject/static-subject/staticSubjectTitle';
 import { findParent } from '../../utils/ui';
 /**
  * The sub state observer that to sync up the parent state to the children components.

package/dist/collection/helpers/slimmers/test/componentGlobalStyleSlimmer.test.js

@@ -0,0 +1,63 @@
+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 { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+import { ComponentGlobalStyleSlimmer } from '../componentGlobalStyleSlimmer';
+describe('componentGlobalStyleSlimmer', () => {
+  const mockedComponentWillLoadMethod = jest.fn();
+  const connectedCallback = jest.fn();
+  const disconnectedCallback = jest.fn();
+  class MockedComponent {
+    constructor() {
+      this.host = new MockHTMLElement('body', 'mocked-component');
+      this.globalStyleSlimmer = new ComponentGlobalStyleSlimmer('.mocked-component { padding: 14px }');
+      this.connectedCallback();
+      this.componentWillLoad();
+    }
+    connectedCallback() {
+      connectedCallback();
+    }
+    disconnectedCallback() {
+      disconnectedCallback();
+    }
+    componentWillLoad() {
+      mockedComponentWillLoadMethod();
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponent.prototype, "globalStyleSlimmer", void 0);
+  it('should append component global style into document head', () => {
+    const component1 = new MockedComponent();
+    const component2 = new MockedComponent();
+    expect(component1).not.toBeNull();
+    expect(component2).not.toBeNull();
+    expect(document.head).toMatchInlineSnapshot(`
+		<head>
+		  <style id="MOCKED-COMPONENT-GLOBAL-STYLE">
+		    .mocked-component { padding: 14px }
+		  </style>
+		</head>
+	`);
+    component1.disconnectedCallback();
+    component2.disconnectedCallback();
+  });
+  it('should remove the style when all component removed', () => {
+    const component1 = new MockedComponent();
+    const component2 = new MockedComponent();
+    component1.disconnectedCallback();
+    expect(document.head).toMatchInlineSnapshot(`
+		<head>
+		  <style id="MOCKED-COMPONENT-GLOBAL-STYLE">
+		    .mocked-component { padding: 14px }
+		  </style>
+		</head>
+	`);
+    component2.disconnectedCallback();
+    expect(document.head).toMatchInlineSnapshot(`<head></head>`);
+  });
+});