SK-903 update code to consider element mounted only after element inp…

…ut is created.

src/core/constants.ts

@@ -43,6 +43,7 @@ export const ELEMENT_EVENTS_TO_CLIENT = {
   SUCCESS: 'SUCCESS',
   SUBMIT: 'SUBMIT',
   CREATED: 'CREATED',
+  MOUNTED: 'MOUNTED',
 };
 
 export const ELEMENT_EVENTS_TO_IFRAME = {

src/core/external/collect/collect-container.ts

@@ -162,6 +162,8 @@ class CollectContainer extends Container {
         //   options.elementName,
         // )}` : `${options.elementType}:${btoa(uuid())}`;
 
+        options.isMounted = false;
+
         if (
           options.elementType === ELEMENTS.radio.name
           || options.elementType === ELEMENTS.checkbox.name
@@ -205,6 +207,7 @@ class CollectContainer extends Container {
         {
           containerId: this.#containerId,
           isMounted: this.#isMounted,
+          type: this.type,
         },
         isSingleElementAPI,
         this.#destroyCallback,

src/core/external/collect/collect-element.ts

@@ -135,6 +135,20 @@ class CollectElement extends SkyflowElement {
     this.#groupEmitter?.on(ELEMENT_EVENTS_TO_CONTAINER.COLLECT_CONTAINER_MOUNTED, (data) => {
       if (data?.containerId === this.containerId) { this.#readyToMount = true; }
     });
+
+    this.#bus.on(ELEMENT_EVENTS_TO_CLIENT.MOUNTED, (data) => {
+      if (container.type === ContainerType.COMPOSABLE) {
+        this.#elements.forEach((element) => {
+          if (data.name === element.elementName) {
+            element.isMounted = true;
+            this.#mounted = true;
+          }
+        });
+      } else if (data.name === this.#elements[0].elementName) {
+        this.#elements[0].isMounted = true;
+        this.#mounted = true;
+      }
+    });
   }
 
   getID = () => this.#elementId;
@@ -168,7 +182,7 @@ class CollectElement extends SkyflowElement {
           ELEMENT_EVENTS_TO_IFRAME.FRAME_READY + this.containerId,
           sub,
         );
-        this.#mounted = true;
+        // this.#mounted = true;
         printLog(`${parameterizedString(logs.infoLogs.ELEMENT_MOUNTED, CLASS_NAME, getElementName(this.#iframe.name))} `, MessageType.LOG,
           this.#context.logLevel);
         this.#updateCallbacks.forEach((func) => func());

src/core/external/collect/compose-collect-container.ts

@@ -9,7 +9,9 @@ import { IUpsertOptions } from '../../../core-utils/collect';
 import EventEmitter from '../../../event-emitter';
 import iframer, { setAttributes, getIframeSrc, setStyles } from '../../../iframe-libs/iframer';
 import deepClone from '../../../libs/deep-clone';
-import { formatValidations, formatOptions, validateElementOptions } from '../../../libs/element-options';
+import {
+  formatValidations, formatOptions, validateElementOptions, getElements,
+} from '../../../libs/element-options';
 import SkyflowError from '../../../libs/skyflow-error';
 import uuid from '../../../libs/uuid';
 import properties from '../../../properties';
@@ -80,6 +82,8 @@ class ComposableContainer extends Container {
 
   #containerMounted: boolean = false;
 
+  #tempElements: any = {};
+
   constructor(options, metaData, skyflowElements, context) {
     super();
     this.#containerId = uuid();
@@ -161,8 +165,8 @@ class ComposableContainer extends Container {
     isSingleElementAPI: boolean = false,
   ) => {
     const elements: any[] = [];
-    const tempElements = deepClone(multipleElements);
-    tempElements.rows.forEach((row) => {
+    this.#tempElements = deepClone(multipleElements);
+    this.#tempElements.rows.forEach((row) => {
       row.elements.forEach((element) => {
         const options = element;
         const { elementType } = options;
@@ -172,16 +176,18 @@ class ComposableContainer extends Container {
         options.replacePattern = options.replacePattern || ELEMENTS[elementType].replacePattern;
         options.mask = options.mask || ELEMENTS[elementType].mask;
 
+        options.isMounted = false;
+
         options.label = element.label;
         options.skyflowID = element.skyflowID;
 
         elements.push(options);
       });
     });
 
-    tempElements.elementName = isSingleElementAPI
+    this.#tempElements.elementName = isSingleElementAPI
       ? elements[0].elementName
-      : `${FRAME_ELEMENT}:group:${btoa(tempElements.name)}`;
+      : `${FRAME_ELEMENT}:group:${btoa(this.#tempElements.name)}`;
 
     if (
       isSingleElementAPI
@@ -191,30 +197,31 @@ class ComposableContainer extends Container {
       throw new SkyflowError(SKYFLOW_ERROR_CODE.UNIQUE_ELEMENT_NAME, [`${elements[0].name}`], true);
     }
 
-    let element = this.#elements[tempElements.elementName];
+    let element = this.#elements[this.#tempElements.elementName];
     if (element) {
       if (isSingleElementAPI) {
         element.update(elements[0]);
       } else {
-        element.update(tempElements);
+        element.update(this.#tempElements);
       }
     } else {
       const elementId = uuid();
       element = new CollectElement(
         elementId,
-        tempElements,
+        this.#tempElements,
         this.#metaData,
         {
           containerId: this.#containerId,
           isMounted: this.#containerMounted,
+          type: this.type,
         },
         true,
         this.#destroyCallback,
         this.#updateCallback,
         this.#context,
         this.#eventEmitter,
       );
-      this.#elements[tempElements.elementName] = element;
+      this.#elements[this.#tempElements.elementName] = element;
       this.#skyflowElements[elementId] = element;
     }
     return element;
@@ -339,13 +346,19 @@ class ComposableContainer extends Container {
       if (!this.#isMounted) {
         throw new SkyflowError(SKYFLOW_ERROR_CODE.COMPOSABLE_CONTAINER_NOT_MOUNTED, [], true);
       }
-      const collectElements = Object.values(this.#elements);
-      collectElements.forEach((element) => {
-        if (!element.isMounted()) {
+
+      const containerElements = getElements(this.#tempElements);
+      containerElements.forEach((element:any) => {
+        if (!element?.isMounted) {
           throw new SkyflowError(SKYFLOW_ERROR_CODE.ELEMENTS_NOT_MOUNTED, [], true);
         }
+      });
+
+      const collectElements = Object.values(this.#elements);
+      collectElements.forEach((element) => {
         element.isValidElement();
       });
+
       if (options && options.tokens && typeof options.tokens !== 'boolean') {
         throw new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_TOKENS_IN_COLLECT, [], true);
       }

src/core/internal/index.ts

@@ -383,11 +383,10 @@ export class FrameElement {
 
     this.updateParentDiv(this.htmlDivElement);
 
-    // bus
-    //   .emit(ELEMENT_EVENTS_TO_IFRAME.INPUT_EVENT, {
-    //     name: this.iFrameFormElement.iFrameName,
-    //     event: ELEMENT_EVENTS_TO_CLIENT.CREATED,
-    //   });
+    bus
+      .emit(ELEMENT_EVENTS_TO_CLIENT.MOUNTED, {
+        name: this.iFrameFormElement.iFrameName,
+      });
 
     this.updateStyleClasses(this.iFrameFormElement.getStatus());
   };