feat(modal): modals can now be used inline (#23341)

resolves #20117, resolves #20263

core/src/utils/framework-delegate.ts

@@ -45,3 +45,81 @@ export const detachComponent = (delegate: FrameworkDelegate | undefined, element
   }
   return Promise.resolve();
 };
+
+export const CoreDelegate = () => {
+  let BaseComponent: any;
+  let Reference: any;
+  const attachViewToDom = async (
+    parentElement: HTMLElement,
+    userComponent: any,
+    userComponentProps: any = {},
+    cssClasses: string[] = []
+  ) => {
+    BaseComponent = parentElement;
+    /**
+     * If passing in a component via the `component` props
+     * we need to append it inside of our overlay component.
+     */
+    if (userComponent) {
+      /**
+       * If passing in the tag name, create
+       * the element otherwise just get a reference
+       * to the component.
+       */
+      const el: any = (typeof userComponent === 'string')
+        ? BaseComponent.ownerDocument && BaseComponent.ownerDocument.createElement(userComponent)
+        : userComponent;
+
+      /**
+       * Add any css classes passed in
+       * via the cssClasses prop on the overlay.
+       */
+      cssClasses.forEach(c => el.classList.add(c));
+
+      /**
+       * Add any props passed in
+       * via the componentProps prop on the overlay.
+       */
+      Object.assign(el, userComponentProps);
+
+      /**
+       * Finally, append the component
+       * inside of the overlay component.
+       */
+      BaseComponent.appendChild(el);
+
+      await new Promise(resolve => componentOnReady(el, resolve));
+    }
+
+    /**
+     * Get the root of the app and
+     * add the overlay there.
+     */
+    const app = document.querySelector('ion-app') || document.body;
+
+    /**
+     * Create a placeholder comment so that
+     * we can return this component to where
+     * it was previously.
+     */
+    Reference = document.createComment('ionic teleport');
+    BaseComponent.parentNode.insertBefore(Reference, BaseComponent);
+
+    app.appendChild(BaseComponent);
+
+    return BaseComponent;
+  }
+
+  const removeViewFromDom = () => {
+    /**
+     * Return component to where it was previously in the DOM.
+     */
+    if (BaseComponent && Reference) {
+      Reference.parentNode.insertBefore(BaseComponent, Reference);
+      Reference.remove();
+    }
+    return Promise.resolve();
+  }
+
+  return { attachViewToDom, removeViewFromDom }
+}