@wise/dynamic-flow-client 5.25.1 → 5.25.2-experimental-a8a898e

package/build/main.js

@@ -1294,9 +1294,16 @@ var createModalContentComponent = (props, onComponentUpdate) => {
       return component.components;
     },
     close() {
+      component.stop();
       update(component, (draft) => {
         draft.open = false;
       });
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -1306,10 +1313,15 @@ var createModalContentComponent = (props, onComponentUpdate) => {
 var getRandomId = () => Math.random().toString(36).substring(2);
 
 // src/domain/components/AlertComponent.ts
-var createAlertComponent = (props) => __spreadValues({
+var createAlertComponent = (props) => __spreadProps(__spreadValues({
   type: "alert",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/handlers/dismissHandler.ts
 var makeDismissHandler = (onDismiss, mapperProps) => () => {
@@ -1524,13 +1536,22 @@ var alertLayoutToComponent = (uid, {
 });
 
 // src/domain/components/BoxComponent.ts
-var createBoxComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "box",
-  kind: "layout",
-  getChildren() {
-    return props.components;
-  }
-});
+var createBoxComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "box",
+    kind: "layout",
+    getChildren() {
+      return props.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/utils/layout-utils.ts
 var normaliseMarginInLastComponent = (container) => {
@@ -1817,6 +1838,13 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     control,
     margin,
     tags,
+    getChildren() {
+      var _a, _b, _c, _d;
+      return [
+        ...(_b = (_a = component.state) == null ? void 0 : _a.beforeSections) != null ? _b : [],
+        ...(_d = (_c = component.state) == null ? void 0 : _c.afterSections) != null ? _d : []
+      ];
+    },
     status: {
       type: "idle",
       loadMore: state.nextCursor ? () => query("pagination") : void 0
@@ -1824,7 +1852,13 @@ var createCollectionComponent = (props, onComponentUpdate, queryFunction, trackE
     state: __spreadProps(__spreadValues({}, state), {
       filters: mapFilters(state.filters),
       search: mapSearch(props.search)
-    })
+    }),
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
   };
   return component;
 };
@@ -2029,10 +2063,15 @@ var mapFilter = (filter) => {
 };
 
 // src/domain/components/ButtonComponent.ts
-var createButtonComponent = (props) => __spreadValues({
+var createButtonComponent = (props) => __spreadProps(__spreadValues({
   type: "button",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/buttonLayoutToComponent.ts
 var buttonLayoutToComponent = (uid, button, mapperProps) => {
@@ -2134,13 +2173,22 @@ var getButtonContext = ({ context, action }) => {
 };
 
 // src/domain/components/ColumnsComponent.ts
-var createColumnsComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "columns",
-  kind: "layout",
-  getChildren() {
-    return [...props.startComponents, ...props.endComponents];
-  }
-});
+var createColumnsComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "columns",
+    kind: "layout",
+    getChildren() {
+      return [...props.startComponents, ...props.endComponents];
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/columnsLayoutToComponent.ts
 var columnsLayoutToComponent = (uid, { control, left, right, bias, margin, analyticsId, tags }, mapperProps, schemaComponents) => createColumnsComponent({
@@ -2164,10 +2212,15 @@ var columnsLayoutToComponent = (uid, { control, left, right, bias, margin, analy
 });
 
 // src/domain/components/DecisionComponent.ts
-var createDecisionComponent = (props) => __spreadValues({
+var createDecisionComponent = (props) => __spreadProps(__spreadValues({
   type: "decision",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/utils/tags-utils.ts
 var mapTags = ({ tag, tags }) => tags != null ? tags : tag != null ? [tag] : void 0;
@@ -2208,10 +2261,15 @@ var mapOption = (option, mapperProps) => {
 };
 
 // src/domain/components/StatusListComponent.ts
-var createStatusListComponent = (props) => __spreadValues({
+var createStatusListComponent = (props) => __spreadProps(__spreadValues({
   type: "status-list",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/deprecatedListLayoutToComponent.ts
 var isDeprecatedListLayout = (layout) => {
@@ -2245,22 +2303,36 @@ var mapLegacyStatus = (status) => {
 };
 
 // src/domain/components/DividerComponent.ts
-var createDividerComponent = (props) => __spreadValues({
+var createDividerComponent = (props) => __spreadProps(__spreadValues({
   type: "divider",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/dividerLayoutToComponent.ts
 var dividerLayoutToComponent = (uid, { control, margin, analyticsId, tags }) => createDividerComponent({ uid, analyticsId, control, margin: margin != null ? margin : "md", tags });
 
 // src/domain/components/FormComponent.ts
-var createFormComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "form",
-  kind: "layout",
-  getChildren() {
-    return [props.schemaComponent];
-  }
-});
+var createFormComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "form",
+    kind: "layout",
+    getChildren() {
+      return [props.schemaComponent];
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/formLayoutToComponent.ts
 var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, control, margin, tags }, schemaComponents) => {
@@ -2287,10 +2359,15 @@ var formLayoutToComponent = (uid, { analyticsId, schemaId, schema: schemaRef, co
 };
 
 // src/domain/components/HeadingComponent.ts
-var createHeadingComponent = (props) => __spreadValues({
+var createHeadingComponent = (props) => __spreadProps(__spreadValues({
   type: "heading",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/headingLayoutToComponent.ts
 var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control, tags, text }) => createHeadingComponent({
@@ -2305,10 +2382,15 @@ var headingLayoutToComponent = (uid, { analyticsId, align, margin, size, control
 });
 
 // src/domain/components/ImageComponent.ts
-var createImageComponent = (props) => __spreadValues({
+var createImageComponent = (props) => __spreadProps(__spreadValues({
   type: "image",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/imageLayoutToComponent.ts
 var imageLayoutToComponent = (uid, {
@@ -2340,10 +2422,15 @@ var imageLayoutToComponent = (uid, {
 };
 
 // src/domain/components/MarkdownComponent.ts
-var createMarkdownComponent = (props) => __spreadValues({
+var createMarkdownComponent = (props) => __spreadProps(__spreadValues({
   type: "markdown",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/infoLayoutToComponent.ts
 var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdown: content, tags }) => createMarkdownComponent({
@@ -2358,10 +2445,15 @@ var infoLayoutToComponent = (uid, { analyticsId, align, control, margin, markdow
 });
 
 // src/domain/components/InstructionsComponent.ts
-var createInstructionsComponent = (props) => __spreadValues({
+var createInstructionsComponent = (props) => __spreadProps(__spreadValues({
   type: "instructions",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/instructionsLayoutToComponent.ts
 var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin, tags, title }) => createInstructionsComponent({
@@ -2378,10 +2470,15 @@ var instructionsLayoutToComponent = (uid, { analyticsId, control, items, margin,
 });
 
 // src/domain/components/ListComponent.ts
-var createListComponent = (props) => __spreadValues({
+var createListComponent = (props) => __spreadProps(__spreadValues({
   type: "list",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/listLayoutToComponent.ts
 var listLayoutToComponent = (uid, { analyticsId, callToAction, control, items, margin, tags, title }, mapperProps) => {
@@ -2439,10 +2536,15 @@ var mapSupportingValues = (item) => {
 };
 
 // src/domain/components/LoadingIndicatorComponent.ts
-var createLoadingIndicatorComponent = (props) => __spreadValues({
+var createLoadingIndicatorComponent = (props) => __spreadProps(__spreadValues({
   type: "loading-indicator",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/loadingIndicatorLayoutToComponent.ts
 var loadingIndicatorLayoutToComponent = (uid, { analyticsId, control, margin, size, tags }) => createLoadingIndicatorComponent({
@@ -2475,10 +2577,15 @@ var markdownLayoutToComponent = (uid, {
 });
 
 // src/domain/components/MediaComponent.ts
-var createMediaComponent = (props) => __spreadValues({
+var createMediaComponent = (props) => __spreadProps(__spreadValues({
   type: "media",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/mediaLayoutToComponent.ts
 var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media, size, tags }) => createMediaComponent({
@@ -2493,14 +2600,23 @@ var mediaLayoutToComponent = (uid, { analyticsId, align, control, margin, media,
 });
 
 // src/domain/components/ModalLayoutComponent.ts
-var createModalComponent = (props) => __spreadProps(__spreadValues({
-  type: "modal-layout",
-  kind: "layout"
-}, props), {
-  getChildren() {
-    return props.content.components;
-  }
-});
+var createModalComponent = (props) => {
+  const component = __spreadProps(__spreadValues({
+    type: "modal-layout",
+    kind: "layout"
+  }, props), {
+    getChildren() {
+      return props.content.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/modalLayoutToComponent.ts
 var modalLayoutToComponent = (uid, { analyticsId, content, control, margin, tags, trigger }, mapperProps, schemaComponents) => {
@@ -2522,10 +2638,15 @@ var modalLayoutToComponent = (uid, { analyticsId, content, control, margin, tags
 };
 
 // src/domain/components/ParagraphComponent.ts
-var createParagraphComponent = (props) => __spreadValues({
+var createParagraphComponent = (props) => __spreadProps(__spreadValues({
   type: "paragraph",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/paragraphLayoutToComponent.ts
 var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, size, tags, text }) => createParagraphComponent({
@@ -2540,10 +2661,15 @@ var paragraphLayoutToComponent = (uid, { analyticsId, align, control, margin, si
 });
 
 // src/domain/components/ProgressComponent.ts
-var createProgressComponent = (props) => __spreadValues({
+var createProgressComponent = (props) => __spreadProps(__spreadValues({
   type: "progress",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/progressLayoutToComponent.ts
 var progressLayoutToComponent = (uid, {
@@ -2572,10 +2698,15 @@ var progressLayoutToComponent = (uid, {
 });
 
 // src/domain/components/ReviewComponent.ts
-var createReviewComponent = (props) => __spreadValues({
+var createReviewComponent = (props) => __spreadProps(__spreadValues({
   type: "review",
   kind: "layout"
-}, props);
+}, props), {
+  start() {
+  },
+  stop() {
+  }
+});
 
 // src/domain/mappers/layout/reviewLayoutToComponent.ts
 var reviewLayoutToComponent = (uid, {
@@ -2726,6 +2857,10 @@ var createSearchComponent = (props, performSearch, onBehavior, onComponentUpdate
           url: value.url
         });
       }
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -2871,13 +3006,22 @@ var emptyInitialState = {
 };
 
 // src/domain/components/SectionComponent.ts
-var createSectionComponent = (props) => __spreadProps(__spreadValues({}, props), {
-  type: "section",
-  kind: "layout",
-  getChildren() {
-    return props.components;
-  }
-});
+var createSectionComponent = (props) => {
+  const component = __spreadProps(__spreadValues({}, props), {
+    type: "section",
+    kind: "layout",
+    getChildren() {
+      return props.components;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
+    }
+  });
+  return component;
+};
 
 // src/domain/mappers/layout/sectionLayoutToComponent.ts
 var sectionLayoutToComponent = (uid, {
@@ -2922,7 +3066,11 @@ var statusListLayoutToComponent = (uid, { analyticsId, control, items, margin, t
 // src/domain/components/TabsComponent.ts
 var createTabsComponent = (props) => __spreadProps(__spreadValues({}, props), {
   type: "tabs",
-  kind: "layout"
+  kind: "layout",
+  start() {
+  },
+  stop() {
+  }
 });
 
 // src/domain/mappers/layout/tabsLayoutToComponent.ts
@@ -2961,7 +3109,11 @@ var createUpsellComponent = (props, onComponentUpdate) => {
         draft.visible = false;
       });
       dismiss();
-    } : void 0
+    } : void 0,
+    start() {
+    },
+    stop() {
+    }
   });
   return component;
 };
@@ -3076,6 +3228,10 @@ var createExternalConfirmation = (uid, url, onLink, onComponentUpdate) => {
       update(component, (draft) => {
         draft.status = "dismissed";
       });
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -3176,6 +3332,9 @@ var createStepComponent = (props) => {
       });
     },
     showModal(modal) {
+      if (component.state === "started") {
+        modal.start();
+      }
       update(component, (draft) => {
         draft.modals = [...draft.modals, modal];
       });
@@ -3211,6 +3370,9 @@ var createStepComponent = (props) => {
       return stepDelays.start(delay);
     },
     addSubflow(subflow) {
+      if (component.state === "started") {
+        subflow.start();
+      }
       update(component, (draft) => {
         draft.subflow = subflow;
       });
@@ -3219,6 +3381,7 @@ var createStepComponent = (props) => {
       if (!component.subflow) {
         return;
       }
+      component.subflow.stop();
       update(component, (draft) => {
         draft.subflow = null;
       });
@@ -3233,12 +3396,14 @@ var createStepComponent = (props) => {
       stepPolling == null ? void 0 : stepPolling.start();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.start();
       stepPrefetch.start(component.getSubmittableValueSync());
+      getAllSubcomponents(component).forEach((child) => child.start());
     },
     stop() {
       stepPolling == null ? void 0 : stepPolling.stop();
       stepRefreshAfter == null ? void 0 : stepRefreshAfter.stop();
       stepDelays.stop();
       stepPrefetch.stop();
+      getAllSubcomponents(component).forEach((child) => child.stop());
       update(component, (draft) => {
         draft.state = "stopped";
         draft.modals = [];
@@ -3252,6 +3417,14 @@ var createStepComponent = (props) => {
   });
   return component;
 };
+var getAllSubcomponents = (component) => [
+  ...component.layoutComponents,
+  ...component.schemaComponents,
+  ...component.footerComponents,
+  ...component.externalConfirmation ? [component.externalConfirmation] : [],
+  ...component.modals,
+  ...component.subflow ? [component.subflow] : []
+];
 var validateInputComponent = (component, inputComponent, isStrict, logEvent) => {
   var _a;
   const isSchemaReferenced = component.referencedSchemaIds.includes((_a = inputComponent.schemaId) != null ? _a : "");
@@ -3868,7 +4041,7 @@ var createNumberInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "number",
     kind: "input",
     uid,
@@ -3920,7 +4093,12 @@ var createNumberInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -4531,6 +4709,12 @@ var createAllOfComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -4673,6 +4857,12 @@ var createRepeatableComponent = (props, onComponentUpdate) => {
         draft.errors = messages;
       });
       return messages.length === 0 && childComponentsValid;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -4851,7 +5041,7 @@ var createMultiUploadInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const getFileValidationErrors = getLocalValueValidator(fileChecks);
   const persist = performPersistAsync ? getComponentMultiPersistAsync(update, performPersistAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "multi-upload",
     kind: "input",
     uid,
@@ -4917,7 +5107,12 @@ var createMultiUploadInputComponent = (props, onComponentUpdate) => {
       });
       return errorMsgs.length === 0 && component.files.every(({ errors }) => errors.length === 0);
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5153,6 +5348,12 @@ var createMultiSelectComponent = (props, onComponentUpdate) => {
     },
     getSelectedChildren() {
       return component.selectedIndices.map((i) => component.children[i]);
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -5286,6 +5487,12 @@ var createTupleComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -5369,7 +5576,7 @@ var createUploadInputComponent = (props, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "upload",
     kind: "input",
     uid,
@@ -5423,7 +5630,12 @@ var createUploadInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   if (format === "base64" && value && !onPersistAsync) {
     void toBase64(value).then((base64Value) => {
       if (base64Value) {
@@ -5491,7 +5703,7 @@ var createBooleanInputComponent = (props, onComponentUpdate) => {
   ]);
   const update = getInputUpdateFunction(onComponentUpdate);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "boolean",
     kind: "input",
     uid,
@@ -5529,7 +5741,12 @@ var createBooleanInputComponent = (props, onComponentUpdate) => {
       return component.value;
     },
     validate: () => true
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5586,7 +5803,11 @@ var createConstComponent = (props) => {
     getSubmittableValue: async () => value,
     getSubmittableValueSync: () => value,
     getSummary: () => summary,
-    validate: () => true
+    validate: () => true,
+    start() {
+    },
+    stop() {
+    }
   };
 };
 
@@ -5640,7 +5861,7 @@ var createDateInputComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
   const getValidationErrors = getLocalValueValidator(checks);
   const validateAsync = performValidationAsync ? getComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "date",
     kind: "input",
     uid,
@@ -5694,7 +5915,12 @@ var createDateInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5813,7 +6039,7 @@ var createIntegerInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "integer",
     kind: "input",
     uid,
@@ -5866,7 +6092,12 @@ var createIntegerInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -5969,6 +6200,10 @@ var createFormattedValueComponent = (props, onComponentUpdate) => {
         draft.value = newValue;
       });
       void (schemaOnChange == null ? void 0 : schemaOnChange());
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -6032,7 +6267,7 @@ var createMoneyInputComponent = (props, onComponentUpdate) => {
   ]);
   const getValidationErrors = getLocalValueValidator(checks);
   const update = getInputUpdateFunction(onComponentUpdate);
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "money-input",
     kind: "input",
     id,
@@ -6088,7 +6323,12 @@ var createMoneyInputComponent = (props, onComponentUpdate) => {
     // noop
     onFocus() {
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -6159,6 +6399,12 @@ var createObjectComponent = (props) => {
     },
     validate() {
       return hidden ? true : validateComponents(component.getChildren());
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   };
   return component;
@@ -6425,6 +6671,12 @@ var createSelectInputComponent = (props, onComponentUpdate) => {
         draft.errors = errors;
       });
       return errors.length === 0 && validChild;
+    },
+    start() {
+      component.getChildren().forEach((child) => child.start());
+    },
+    stop() {
+      component.getChildren().forEach((child) => child.stop());
     }
   });
   return component;
@@ -6612,6 +6864,10 @@ var createPersistAsyncComponent = (props, performPersistAsync, schemaOnChange, o
         draft.status = "persisting";
       });
       return newSubmission;
+    },
+    start() {
+    },
+    stop() {
     }
   };
   return component;
@@ -6712,7 +6968,7 @@ var createTextInputComponent = (props, onComponentUpdate) => {
   const getValidationErrors = getLocalValueValidator(checks);
   const performOnChange = getDebouncedSchemaOnChange(schemaOnChange, getValidationErrors);
   const validateAsync = performValidationAsync ? getDebouncedComponentValidationAsync(update, performValidationAsync) : void 0;
-  const component = __spreadValues({
+  const component = __spreadProps(__spreadValues({
     type: "text",
     kind: "input",
     uid,
@@ -6767,7 +7023,12 @@ var createTextInputComponent = (props, onComponentUpdate) => {
       });
       return errors.length === 0;
     }
-  }, rest);
+  }, rest), {
+    start() {
+    },
+    stop() {
+    }
+  });
   return component;
 };
 
@@ -7439,20 +7700,30 @@ var createSubflowComponent = (props, onComponentUpdate) => {
 };
 var createDynamicSubflowComponent = (props, onComponentUpdate) => {
   const update = getInputUpdateFunction(onComponentUpdate);
-  return __spreadValues({
+  return __spreadProps(__spreadValues({
     uid: `subflow-dynamic-${getRandomId()}`,
     type: "subflow",
     subflowType: "dynamic",
     kind: "layout"
-  }, props);
+  }, props), {
+    start() {
+    },
+    stop() {
+    }
+  });
 };
 var createNativeSubflowComponent = (props) => {
-  return __spreadValues({
+  return __spreadProps(__spreadValues({
     uid: `subflow-native-${getRandomId()}`,
     type: "subflow",
     subflowType: "native",
     kind: "layout"
-  }, props);
+  }, props), {
+    start() {
+    },
+    stop() {
+    }
+  });
 };
 
 // src/controller/executeSubflow.ts