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

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

@@ -27,7 +27,8 @@ export class VegaWatchMethodCancelSlimmer extends VegaSlimmer {
      * 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');
+    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;
   }
   /**

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/test/elementAppenderSlimmer.test.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
 import { triggerMouseEvent } from '../../../utils/testUtils';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../elementAppenderSlimmer';
 import { LogUtility } from '../../../utils/log';
@@ -49,7 +49,7 @@ describe('ElementAppender slimmer test suite', () => {
       super(() => ({
         target: this.target,
         appendableElement: this.appendableElement,
-      }), () => this.trigger);
+      }), () => this.trigger, 'isDropdownShow');
     }
   }
   __decorate([
@@ -216,5 +216,95 @@ describe('ElementAppender slimmer test suite', () => {
       mockedComponent.show();
       expect(LogUtility.error).toHaveBeenCalledWith(`No target element found, please add it at new elementAppender.`);
     });
+    test('should not throw error when disconnectedCallback before component loaded', () => {
+      const mockedComponent = new MockedComponent();
+      mockedComponent.target = new MockHTMLElement('body', 'div');
+      const element = new MockHTMLElement('body', 'div');
+      element.classList.add('vega-force-hidden');
+      mockedComponent.appendableElement = element;
+      expect(() => mockedComponent.disconnectedCallback()).not.toThrowError();
+    });
+    test('should hide dropdown while mouse leave dropdown and mouse enter button when disableInteractive is true', () => {
+      class MockedComponent {
+        constructor() {
+          this.isDropdownShow = false;
+          this.appenderController = new MockedAppenderController();
+        }
+        connectedCallback() {
+          mockedComponentConnectedCallbackMethod();
+        }
+        disconnectedCallback() {
+          mockedComponentDisconnectedCallbackMethod();
+        }
+        componentDidLoad() {
+          mockedComponentDidLoadMethod();
+        }
+        getElementAppender() {
+          return this.appenderController.getElementAppender();
+        }
+        show() {
+          this.appenderController.show();
+        }
+        hide() {
+          this.appenderController.hide();
+        }
+        destroy() {
+          this.appenderController.destroy();
+        }
+      }
+      __decorate([
+        InjectVegaSlimmer()
+      ], MockedComponent.prototype, "appenderController", void 0);
+      class MockedAppenderController extends ElementAppenderSlimmer {
+        constructor() {
+          super(() => ({
+            target: this.target,
+            appendableElement: this.appendableElement,
+          }), () => this.trigger, 'isDropdownShow', () => this.disableInteractive);
+        }
+      }
+      __decorate([
+        MapToComponentField()
+      ], MockedAppenderController.prototype, "trigger", void 0);
+      __decorate([
+        MapToComponentField({ writable: true })
+      ], MockedAppenderController.prototype, "isDropdownShow", void 0);
+      __decorate([
+        MapToComponentField()
+      ], MockedAppenderController.prototype, "target", void 0);
+      __decorate([
+        MapToComponentField()
+      ], MockedAppenderController.prototype, "appendableElement", void 0);
+      __decorate([
+        MapToComponentField()
+      ], MockedAppenderController.prototype, "disableInteractive", void 0);
+      const mockedComponent = new MockedComponent();
+      const target = new MockHTMLElement('body', 'div');
+      const appendableElement = new MockHTMLElement('body', 'div');
+      appendableElement.classList.add('vega-force-hidden');
+      mockedComponent.target = target;
+      mockedComponent.appendableElement = appendableElement;
+      mockedComponent.trigger = 'hover';
+      mockedComponent.componentDidLoad();
+      triggerMouseEvent(target, 'mouseenter');
+      jest.useFakeTimers();
+      expect(appendableElement).not.toHaveClass('vega-force-hidden');
+      triggerMouseEvent(target, 'mouseleave');
+      jest.advanceTimersByTime(60);
+      triggerMouseEvent(appendableElement, 'mouseenter');
+      jest.advanceTimersByTime(60);
+      expect(appendableElement).not.toHaveClass('vega-force-hidden');
+      jest.useRealTimers();
+      mockedComponent.disableInteractive = true;
+      triggerMouseEvent(target, 'mouseenter');
+      jest.useFakeTimers();
+      expect(appendableElement).not.toHaveClass('vega-force-hidden');
+      triggerMouseEvent(target, 'mouseleave');
+      jest.advanceTimersByTime(60);
+      triggerMouseEvent(appendableElement, 'mouseenter');
+      jest.advanceTimersByTime(60);
+      expect(appendableElement).toHaveClass('vega-force-hidden');
+      jest.useRealTimers();
+    });
   });
 });

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer } from 'vega-slimmer/core';
 import { MockedResizeObserver } from '../../../utils/testUtils';
 import { MockHTMLElement } from '@stencil/core/mock-doc';

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

@@ -10,8 +10,7 @@ import { FormFieldControllerSlimmer } from '../formFieldControllerSlimmer';
 import ChangeManager from '../../change-manager/changeManager';
 import { FORM_RESET_OPERATION_TRIGGERED } from '../../change-manager/subject/static-subject/staticSubjectTitle';
 import { RequiredFieldRule } from '../../../helpers/validator/rules/requiredFieldRule';
-import '../../../polyfill/testPolyfill';
-import { FeatureFlag } from '../../../helpers/feature-control/featureFlagController';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 describe('FormFieldControllerSlimmer test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();
@@ -54,6 +53,8 @@ describe('FormFieldControllerSlimmer test suite', () => {
           validationRulesName: 'validationRules',
           attributeGetter: (name) => this[name],
           defaultValue: '',
+          inputContainerGetter: () => this.host.querySelector('.vega-input-container'),
+          touchableAreaGetter: () => this.host.querySelectorAll('input'),
         });
       }
       connectedCallback() {
@@ -187,6 +188,8 @@ describe('FormFieldControllerSlimmer test suite', () => {
           attributeGetter: (name) => this[name],
           defaultValue: '',
           validationRulesName: 'validationRules',
+          inputContainerGetter: () => this.host.querySelector('.vega-input-container'),
+          touchableAreaGetter: () => this.host.querySelectorAll('input'),
         });
         this.isValid = false;
         this.disabled = false;
@@ -245,48 +248,6 @@ describe('FormFieldControllerSlimmer test suite', () => {
       expect(mockRule).toBeCalledWith(false, true);
     });
   });
-  //VEGA_INJECT_FORM_FIELD_CONTROLLER.ADD_DATA_VEGA_FORM_FILTER
-  describe('disable VEGA_INJECT_FORM_FIELD_CONTROLLER.ADD_DATA_VEGA_FORM_FILTER', () => {
-    class MockedComponent {
-      constructor() {
-        this.formFieldController = new FormFieldControllerSlimmer({
-          propertyRules: [],
-          inputContainerSelector: '.vega-checkbox-container',
-          attributeGetter: (name) => this[name],
-          defaultValue: '',
-          validationRulesName: 'validationRules',
-        });
-        this.isValid = false;
-        this.disabled = false;
-        this.validationRules = [];
-      }
-      disconnectedCallback() {
-        mockedComponentDisconnectedCallbackMethod();
-      }
-      componentWillLoad() {
-        mockedComponentWillLoadMethod();
-      }
-      componentDidLoad() {
-        mockedComponentDidLoadMethod();
-      }
-      watchValidationRules() {
-        methodPlaceholder();
-      }
-      valid() {
-        methodPlaceholder();
-      }
-    }
-    __decorate([
-      InjectVegaSlimmer()
-    ], MockedComponent.prototype, "formFieldController", void 0);
-    test('should not init validator and injectFormFieldHelper after component will load', () => {
-      FeatureFlag.disable('VEGA_INJECT_FORM_FIELD_CONTROLLER.ADD_DATA_VEGA_FORM_FILTER');
-      const mockedComponent = new MockedComponent();
-      mockedComponent.host = new MockHTMLElement('body', 'input');
-      mockedComponent.componentWillLoad();
-      expect(mockedComponent['formFieldController']['validator']).not.toEqual(undefined);
-    });
-  });
 });
 describe('FormFieldControllerSlimmer#isValidFormField', () => {
   test('isValidFormField should work proper', () => {

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

@@ -0,0 +1,106 @@
+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 { MockHTMLElement } from '@stencil/core/mock-doc';
+import { FormFieldControllerSlimmer } from '../formFieldControllerSlimmer';
+import ChangeManager from '../../change-manager/changeManager';
+import '../../../polyfill/test-polyfill/unit/index';
+import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import domNodeSubjectFactory from '../../change-manager/subject/dom-node-subject/domNodeSubjectFactory';
+import { VegaInternalValid } from '../../event-manager/eventID/vegaInternalEventId';
+describe('FormFieldValidInvokeSlimmer test suite', () => {
+  const mockedComponentDidLoadMethod = jest.fn();
+  const mockedComponentWillLoadMethod = jest.fn();
+  const mockedComponentDisconnectedCallbackMethod = jest.fn();
+  const mockedComponentConnectedCallbackMethod = jest.fn();
+  beforeEach(() => {
+    mockedComponentWillLoadMethod.mockClear();
+    mockedComponentDidLoadMethod.mockClear();
+    mockedComponentDisconnectedCallbackMethod.mockClear();
+    mockedComponentConnectedCallbackMethod.mockClear();
+  });
+  describe('init validator no need check data-vega-form attribute', () => {
+    class MockedComponent {
+      constructor() {
+        this.isValid = false;
+        this.required = false;
+        this.value = '';
+        this.disabled = false;
+        this.validationRules = [];
+        this.formFieldController = new FormFieldControllerSlimmer({
+          propertyRules: [],
+          validationRulesName: 'validationRules',
+          attributeGetter: (name) => this[name],
+          defaultValue: '',
+          inputContainerGetter: () => document.createElement('div'),
+          touchableAreaGetter: () => Array.from(this.host.querySelectorAll('input')),
+        });
+      }
+      connectedCallback() {
+        mockedComponentConnectedCallbackMethod();
+      }
+      disconnectedCallback() {
+        mockedComponentDisconnectedCallbackMethod();
+      }
+      componentWillLoad() {
+        mockedComponentWillLoadMethod();
+      }
+      componentDidLoad() {
+        mockedComponentDidLoadMethod();
+      }
+      watchValidationRules() {
+        methodPlaceholder();
+      }
+    }
+    __decorate([
+      InjectVegaSlimmer()
+    ], MockedComponent.prototype, "formFieldController", void 0);
+    test('should register call valid observer after component will load', () => {
+      const mockedComponent = new MockedComponent();
+      mockedComponent.host = new MockHTMLElement('body', 'input');
+      mockedComponent.host.setAttribute('data-vega-form', 'input');
+      mockedComponent.componentWillLoad();
+      expect(mockedComponent['formFieldController']['formFieldValidInvokeSlimmer']).not.toBeNull();
+    });
+    test('should unregister call valid observer after component disconnect', () => {
+      const mockedComponent = new MockedComponent();
+      mockedComponent.host = new MockHTMLElement('body', 'input');
+      mockedComponent.host.setAttribute('data-vega-form', 'input');
+      mockedComponent.componentWillLoad();
+      mockedComponent.componentDidLoad();
+      const num = ChangeManager['pubSubMap'].size;
+      mockedComponent.disconnectedCallback();
+      expect(ChangeManager['pubSubMap'].size).toEqual(num - 1);
+    });
+    test('should call valid correct when notify the element valid subject', async () => {
+      const mockedComponent = new MockedComponent();
+      mockedComponent.host = new MockHTMLElement('body', 'input');
+      mockedComponent.host.setAttribute('value', 'test');
+      mockedComponent.host.setAttribute('data-vega-form', 'input');
+      mockedComponent.host.setAttribute('class', 'vega-input-container');
+      mockedComponent.componentWillLoad();
+      mockedComponent.componentDidLoad();
+      const subject = domNodeSubjectFactory.getSubject(mockedComponent.host, VegaInternalValid);
+      const observer = ChangeManager['pubSubMap'].get(subject)[0];
+      spyOn(observer, 'listener').and.callThrough();
+      spyOn(mockedComponent['formFieldController']['validator'], 'validate');
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(document.createElement('input'), VegaInternalValid), {
+        host: mockedComponent.host,
+        message: false,
+      });
+      ChangeManager.notify(subject, {
+        host: mockedComponent.host,
+        message: false,
+      });
+      ChangeManager.notify(subject, {
+        host: mockedComponent.host,
+        message: false,
+        promiseResolve: jest.fn(),
+      });
+      expect(observer['listener']).toBeCalledTimes(2);
+    });
+  });
+});

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

@@ -75,4 +75,27 @@ describe('VegaWatchMethodCancelSlimmer', () => {
       expect(mockedComponentWatchSizeMethod).toHaveBeenCalledTimes(3);
     });
   });
+  describe('VEGA_FRAMEWORK.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD', () => {
+    beforeEach(() => {
+      FeatureFlag.disable('VEGA_FRAMEWORK.PREVENT_CALL_WATCH_METHOD_BEFORE_COMPONENT_LOAD');
+    });
+    test('should not set global slimmer', () => {
+      GlobalSlimmersRegistry.register([VegaWatchMethodCancelSlimmer]);
+      const mockedComponent = new MockedComponent();
+      mockedComponent.constructor['watchers'] = {
+        size: ['watchSize'],
+        width: ['watchSize'],
+      };
+      mockedComponent.connectedCallback();
+      mockedComponent.watchSize();
+      expect(mockedComponentWatchSizeMethod).toHaveBeenCalledTimes(1);
+      mockedComponent.componentDidLoad();
+      mockedComponent.watchSize();
+      expect(mockedComponentWatchSizeMethod).toHaveBeenCalledTimes(2);
+      mockedComponent.disconnectedCallback();
+      mockedComponent.connectedCallback();
+      mockedComponent.watchSize();
+      expect(mockedComponentWatchSizeMethod).toHaveBeenCalledTimes(3);
+    });
+  });
 });

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MockHTMLElement } from '@stencil/core/mock-doc';
-import '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import KeyboardManager from '../../keyboard/keyboardManager';
 import { InjectVegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { KeyboardManagerSlimmer } from '../keyboardManagerSlimmer';
@@ -78,5 +78,13 @@ describe('@InjectKeyboardManager() decorator test suite', () => {
       expect(mockedComponentConnectedCallbackMethod).toBeCalledTimes(1);
       mockedComponent.disconnectedCallback();
     });
+    test('should not throw error when disconnectedCallback before component loaded', () => {
+      const mockedComponent1 = new MockedComponent();
+      mockedComponent1.host = new MockHTMLElement('body', 'div');
+      mockedComponent1.componentDidLoad();
+      const mockedComponent2 = new MockedComponent();
+      mockedComponent2.host = new MockHTMLElement('body', 'div');
+      expect(() => mockedComponent2.disconnectedCallback()).not.toThrowError();
+    });
   });
 });

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 '../../../polyfill/testPolyfill';
+import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, MapToComponentField, methodPlaceholder } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../pageResizeObserverSlimmer';
 import { MockedResizeObserver } from '../../../utils/testUtils';

package/dist/collection/helpers/touch-helper/test/touchListener.test.js

@@ -1,5 +1,5 @@
 import { TouchDirection, TouchListener } from '../touchListener';
-import { createTouchEvent } from '../../../polyfill/testPolyfill';
+import { createTouchEvent } from '../../../polyfill/test-polyfill/unit/createTouchEvent';
 let spy;
 let listContainer;
 let touchInit;

package/dist/collection/helpers/validator/formFieldController.js

@@ -19,7 +19,6 @@ import { PageResizeObserverSlimmer } from '../slimmers/pageResizeObserverSlimmer
  * @property {FormFieldValidationRule<number | string | boolean>[] = []} defaultRules default rules used for validation
  * @property {FormFieldValidationRule<number | string | boolean>[]} additionalRules additional rules used for validation
  * @property {InputValidatorListener[]} listeners listeners monitoring on the validation result
- * @property {string} inputContainerSelector container that holds the input value
  * @property {unknown & { value?: number | string | boolean }} hostElement host element used to get the value for validation if input element is not present
  * @property {boolean} isTouched true if an element is touched
  * @property {boolean} isModified true if an element is modified
@@ -32,15 +31,14 @@ import { PageResizeObserverSlimmer } from '../slimmers/pageResizeObserverSlimmer
 export class FormFieldController {
   /**
    * This function is called when the component is created, and it sets up the observers that will be used to detect changes to the component's state.
-   * The first thing the constructor does is set the defaultRules, hostElement, inputContainerSelector, touchableArea, isTouched, isModified, and isDisabled properties
+   * The first thing the constructor does is set the defaultRules, hostElement, touchableArea, isTouched, isModified, and isDisabled properties
    *
    * @param {FormFieldValidationRule<number | string | boolean>[]} defaultRules - FormFieldValidationRule<T>[]
    * @param {FormFieldElement<number | string | boolean>} hostElement - The form field element that this validation manager is attached to.
    * @param {FormFieldDefaultValueType}  defaultValue - This is defualt value for value property of component.
    * @param {FormFieldOptionForSlimmer} options - The selector for the element that contains the input element.
-   * @param {string} [touchableArea=input] - This is the element that will be used to determine if the user has touched the field.
    */
-  constructor(defaultRules, hostElement, defaultValue, options, touchableArea = 'input') {
+  constructor(defaultRules, hostElement, defaultValue, options) {
     var _a, _b;
     this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
     this.resizeObserverSlimmer = createDynamicSlimmer(FormFieldController, PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
@@ -65,6 +63,7 @@ export class FormFieldController {
     this.isModified = false;
     this.isVisible = false;
     this.formFieldValidationRuleHandlerChain = new FormFieldValidationRuleHandlerChain();
+    this.hostChildAddedBlurEventMap = new WeakMap();
     /**
      * The function handles the validation result and updates the UI accordingly.
      *
@@ -101,9 +100,21 @@ export class FormFieldController {
       });
       return isValid;
     };
+    /**
+     * It adds a blur event listener to all elements that match the selector in the touchableArea property
+     */
+    this.setupTouchedListener = () => {
+      this.getTouchableAreaElements()
+        .filter((item) => this.hostChildAddedBlurEventMap.get(item) !== true)
+        .forEach((item) => {
+        item.addEventListener('blur', () => {
+          this.updateIsTouched(true);
+        });
+        this.hostChildAddedBlurEventMap.set(item, true);
+      });
+    };
     this.defaultRules = defaultRules || [];
     this.host = hostElement;
-    this.touchableArea = touchableArea;
     this.defaultValue = defaultValue;
     this.options = options;
     this.initDisabledAttrObserver();
@@ -112,6 +123,7 @@ export class FormFieldController {
     (_b = (_a = this.host).componentOnReady) === null || _b === void 0 ? void 0 : _b.call(_a).then(() => {
       this.didRender();
     });
+    this.setupModifiedListener();
     this.listenHostElementKeydown();
     this.updateValidationHandlers();
   }
@@ -167,6 +179,9 @@ export class FormFieldController {
     });
     this.unregisterFormResetObserver();
     ChangeManager.unregister(FORM_ELEMENT_VALUE_CHANGE, this.hostValueChangeObserver);
+    if (this.hostChildrenObserver) {
+      this.hostChildrenObserver.disconnect();
+    }
   }
   /**
    * It creates an observer that will watch the host element and set the isVisible property to true if
@@ -270,12 +285,20 @@ export class FormFieldController {
     ChangeManager.unregister(FORM_RESET_OPERATION_TRIGGERED, this.formResetTriggeredObserver);
   }
   /**
-   * It adds a blur event listener to all elements that match the selector in the touchableArea property
+   * monitor the host component touchable area elements update
    */
-  setupTouchedListener() {
-    this.getTouchableAreaElements().forEach((item) => item.addEventListener('blur', () => {
-      this.updateIsTouched(true);
-    }));
+  monitorTouchedListener() {
+    const inputContainer = this.getInputContainerElements();
+    if (inputContainer) {
+      this.hostChildrenObserver = new MutationObserver(() => {
+        this.setupTouchedListener();
+      });
+      this.hostChildrenObserver.observe(inputContainer, {
+        childList: true,
+        subtree: true,
+      });
+    }
+    this.setupTouchedListener();
   }
   /**
    * Get an array of HTMLElements that represent the touchable area elements based on the host's tag name.
@@ -283,9 +306,15 @@ export class FormFieldController {
    * @returns {HTMLElement[]} an array of HTMLElements.
    */
   getTouchableAreaElements() {
-    return this.options && this.options.touchableAreaGetter
-      ? this.options.touchableAreaGetter()
-      : Array.from(this.host.querySelectorAll(this.touchableArea));
+    return this.options && this.options.touchableAreaGetter ? this.options.touchableAreaGetter() : [];
+  }
+  /**
+   * Get the input container element based on the options provided.
+   *
+   * @returns {HTMLElement} the form field element input container element
+   */
+  getInputContainerElements() {
+    return this.options && this.options.inputContainerGetter ? this.options.inputContainerGetter() : null;
   }
   /**
    * It adds an event listener to the host element that listens for a custom event called `vegaChange`.
@@ -338,8 +367,7 @@ export class FormFieldController {
    * the input element, and sets up the listeners for the `touched` and `modified` events
    */
   didRender() {
-    this.setupTouchedListener();
-    this.setupModifiedListener();
+    this.monitorTouchedListener();
   }
   /**
    * This function registers an observer with the ChangeManager that will be notified when a form