fix(core/modal): fixes runtime error

packages/angular/src/components.ts

@@ -1638,7 +1638,8 @@ export class IxModalHeader {
 
 export declare interface IxModalHeader extends Components.IxModalHeader {
   /**
-   * Close icon is clicked
+   * Emits when close icon is clicked and closes the modal
+Can be prevented, in which case only the event is triggered, and the modal remains open
    */
   closeClick: EventEmitter<CustomEvent<MouseEvent>>;
 }

packages/core/component-doc.json

@@ -8133,7 +8133,7 @@
           "bubbles": true,
           "cancelable": true,
           "composed": true,
-          "docs": "Close icon is clicked",
+          "docs": "Emits when close icon is clicked and closes the modal\nCan be prevented, in which case only the event is triggered, and the modal remains open",
           "docsTags": []
         }
       ],

packages/core/src/components.d.ts

@@ -4622,7 +4622,7 @@ declare namespace LocalJSX {
          */
         "iconColor"?: string;
         /**
-          * Close icon is clicked
+          * Emits when close icon is clicked and closes the modal Can be prevented, in which case only the event is triggered, and the modal remains open
          */
         "onCloseClick"?: (event: IxModalHeaderCustomEvent<MouseEvent>) => void;
     }

packages/core/src/components/modal-content/modal-content.scss

@@ -15,4 +15,5 @@
   position: relative;
   overflow: auto;
   padding: 0.125rem 0.625rem 0.125rem 0.625rem;
+  max-content: 60vh;
 }

packages/core/src/components/modal-header/modal-header.tsx

@@ -17,6 +17,7 @@ import {
   Prop,
   Watch,
 } from '@stencil/core';
+import { closestPassShadow } from '../utils/shadow-dom';
 
 /**
  * @since 2.0.0
@@ -38,6 +39,7 @@ export class ModalHeader {
    * Icon of the Header
    */
   @Prop() icon: string;
+
   @Watch('icon')
   onIconChange(icon: string) {
     if (this.parentDialog) {
@@ -55,14 +57,18 @@ export class ModalHeader {
   @Prop() iconColor: string;
 
   /**
-   * Close icon is clicked
+   * Emits when close icon is clicked and closes the modal
+   * Can be prevented, in which case only the event is triggered, and the modal remains open
    */
   @Event() closeClick: EventEmitter<MouseEvent>;
 
   private parentDialog: HTMLIxModalElement;
 
   componentDidLoad() {
-    this.parentDialog = this.hostElement.closest('ix-modal');
+    this.parentDialog = closestPassShadow(
+      this.hostElement,
+      'ix-modal'
+    ) as HTMLIxModalElement;
     this.onIconChange(this.icon);
   }
 

packages/core/src/components/modal/modal.tsx

@@ -90,6 +90,29 @@ export class Modal {
     return this.hostElement.shadowRoot.querySelector('dialog');
   }
 
+  waitForDialog(): Promise<HTMLDialogElement> {
+    return new Promise((resolve) => {
+      const startTime = Date.now();
+
+      const checkDialog = () => {
+        const dialog = this.hostElement.shadowRoot.querySelector('dialog');
+
+        if (dialog) {
+          resolve(dialog);
+        } else {
+          if (Date.now() - startTime < 3000) {
+            setTimeout(checkDialog, 100);
+          } else {
+            console.error('Modal not found');
+            resolve(null);
+          }
+        }
+      };
+
+      checkDialog();
+    });
+  }
+
   private slideInModal() {
     const duration = this.animation ? Animation.mediumTime : 0;
 
@@ -142,7 +165,7 @@ export class Modal {
    */
   @Method()
   async showModal() {
-    setTimeout(() => this.dialog.showModal());
+    setTimeout(async () => (await this.waitForDialog()).showModal());
   }
 
   /**

packages/core/src/components/utils/shadow-dom.ts

@@ -36,3 +36,23 @@ export function containsElement(target: Element, element: Element) {
 
   return target.contains(element);
 }
+
+export function closestPassShadow(node: Node, selector: string) {
+  if (!node) {
+    return null;
+  }
+
+  if (node instanceof ShadowRoot) {
+    return closestPassShadow(node.host, selector);
+  }
+
+  if (node instanceof HTMLElement) {
+    if (node.matches(selector)) {
+      return node;
+    } else {
+      return closestPassShadow(node.parentNode, selector);
+    }
+  }
+
+  return closestPassShadow(node.parentNode, selector);
+}

packages/react-test-app/src/preview-examples/modal.tsx

@@ -30,7 +30,7 @@ function CustomModal() {
 
   return (
     <Modal ref={modalRef}>
-      <IxModalHeader onCloseClick={() => dismiss()}>
+      <IxModalHeader>
         Message headline
       </IxModalHeader>
       <IxModalContent>Message text lorem ipsum</IxModalContent>