@uoguelph/web-components 1.1.3 → 1.2.0-rc.1

package/dist/collection/components/uofg-modal/uofg-modal.js

@@ -7,404 +7,411 @@ import { getAllFocusableElements } from "../../utils/utils";
  * @part dismiss-button - The button that closes the modal.
  */
 export class UofgModal {
-  constructor() {
-    this.inertElements = [];
-    this.label = undefined;
-    this.alertDialog = false;
-    this.centered = false;
-    this.staticBackdrop = false;
-    this.autoOpen = false;
-    this.isOpen = false;
-  }
-  connectedCallback() {
-    // Bind event handlers so that 'this' is always the component instance.
-    this.handleClick = this.handleClick.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-    this.handleFocusOut = this.handleFocusOut.bind(this);
-    if (this.autoOpen) {
-      this.isOpen = true;
+    constructor() {
+        this.inertElements = [];
+        this.label = undefined;
+        this.alertDialog = false;
+        this.centered = false;
+        this.staticBackdrop = false;
+        this.autoOpen = false;
+        this.isOpen = false;
     }
-  }
-  disconnectedCallback() {
-    // Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
-    for (const element of this.inertElements) {
-      element.removeAttribute('inert');
-    }
-  }
-  handleClick(e) {
-    if (!this.staticBackdrop && e.target === e.currentTarget) {
-      this.isOpen = false;
-    }
-  }
-  handleKeyUp(e) {
-    if (e.key === 'Escape') {
-      this.isOpen = false;
-    }
-  }
-  handleFocusOut(e) {
-    var _a;
-    if (!this.isOpen)
-      return; // Don't do anything if the modal is closed.
-    const relatedTarget = e.relatedTarget;
-    // If the focus is moving outside of the modal
-    if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
-      e.preventDefault();
-      // If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
-      if (e.target === this.dismissButton) {
-        const focusableElements = getAllFocusableElements(this.el);
-        (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-      else {
-        // Otherwise, focus the dismiss button.
-        this.dismissButton.focus();
-      }
-    }
-  }
-  handleIsOpenChange(newValue) {
-    if (newValue === true) {
-      window.requestAnimationFrame(() => {
-        window.requestAnimationFrame(() => {
-          window.requestAnimationFrame(() => {
-            // Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
-            this.container.focus();
-          });
-        });
-      });
-      // Mark outer elements as inert when the modal is open.
-      let current = this.el;
-      // We want to mark all elements outside of the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
-      while (current !== null && current !== document.body) {
-        const parent = current.parentElement;
-        // If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
-        if (parent === null) {
-          const root = current.getRootNode();
-          if (root instanceof ShadowRoot) {
-            current = root.host;
-            continue;
-          }
+    connectedCallback() {
+        // Bind event handlers so that 'this' is always the component instance.
+        this.handleClick = this.handleClick.bind(this);
+        this.handleKeyUp = this.handleKeyUp.bind(this);
+        this.handleFocusOut = this.handleFocusOut.bind(this);
+        if (this.autoOpen) {
+            this.isOpen = true;
         }
-        if (parent !== null) {
-          for (const child of parent.children) {
-            if (child !== current && !child.inert) {
-              // Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
-              child.inert = true;
-              this.inertElements.push(child);
-            }
-          }
-        }
-        current = parent;
-        this.opened.emit();
-      }
     }
-    else {
-      // Remove the inert attribute from all elements that we marked as inert when the modal was opened.
-      for (const element of this.inertElements) {
-        element.removeAttribute('inert');
-      }
-      // Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
-      this.inertElements = [];
-      this.closed.emit();
+    disconnectedCallback() {
+        // Just in case the modal is removed from the DOM before it is closed, make sure to remove the inert attribute from all elements that we marked as inert when the modal was opened.
+        for (const element of this.inertElements) {
+            element.removeAttribute('inert');
+        }
     }
-    // Prevent scrolling of the body when the modal is open.
-    document.body.style.overflow = newValue ? 'hidden' : '';
-  }
-  render() {
-    return (h("div", { id: "uofg-modal", class: { open: this.isOpen }, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, h("div", { id: "uofg-modal-content", part: "content", class: { centered: this.centered } }, h("button", { id: "uofg-modal-dismiss", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { icon: faTimes })), h("slot", null))));
-  }
-  /**
-   * Get the current state of the modal.
-   * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
-   */
-  async getState() {
-    return this.isOpen;
-  }
-  /**
-   * Set the state of the modal.
-   * @param value The new state, set it to true to open the modal, or false to close the modal.
-   */
-  async setState(value) {
-    this.isOpen = value;
-  }
-  /**
-   * Toggle the state of the modal.
-   * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
-   */
-  async toggle() {
-    this.isOpen = !this.isOpen;
-    return this.isOpen;
-  }
-  /**
-   * Closes the modal.
-   * @returns empty Promise.
-   */
-  async close() {
-    this.isOpen = false;
-  }
-  /**
-   * Opens the modal.
-   * @returns empty Promise.
-   */
-  async open() {
-    this.isOpen = true;
-  }
-  static get is() { return "uofg-modal"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["uofg-modal.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["uofg-modal.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label for the modal. It is recommended that you set this to describe the modal's content.\nThis is required for accessibility."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "alertDialog": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to determine whether the modal should be rendered as an alert dialog.\nThis is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.\nIf this is set to true, the modal will be rendered with a role of \"alertdialog\" instead of \"dialog\"."
-        },
-        "attribute": "alert-dialog",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "centered": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to determine whether the modal content is centered vertically."
-        },
-        "attribute": "centered",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "staticBackdrop": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to determine whether clicking on the backdrop of the modal will close the modal.\nIf this is set to true, clicking on the backdrop will NOT close the modal."
-        },
-        "attribute": "static-backdrop",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "autoOpen": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Used to determine whether the modal should open automatically when the component is first rendered.\nIt is important to ensure this is only set to true for ONE modal on the page."
-        },
-        "attribute": "auto-open",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "isOpen": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "opened",
-        "name": "opened",
-        "bubbles": false,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dispatched whenever the modal is opened whether by user interaction or or programmatically (e.g. open())."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+    handleClick(e) {
+        if (!this.staticBackdrop && e.target === e.currentTarget) {
+            this.isOpen = false;
         }
-      }, {
-        "method": "closed",
-        "name": "closed",
-        "bubbles": false,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Dispatched whenever the modal is closed whether by user interaction or programmatically (e.g. close())."
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+    }
+    handleKeyUp(e) {
+        if (e.key === 'Escape') {
+            this.isOpen = false;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "getState": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    handleFocusOut(e) {
+        var _a;
+        if (!this.isOpen)
+            return; // Don't do anything if the modal is closed.
+        const relatedTarget = e.relatedTarget;
+        // If the focus is moving outside the modal
+        if (!this.container.contains(relatedTarget) && !this.el.contains(relatedTarget)) {
+            e.preventDefault();
+            // If the focus is moving away from the dismiss button, focus the last focusable element in the modal.
+            if (e.target === this.dismissButton) {
+                const focusableElements = getAllFocusableElements(this.el);
+                (_a = focusableElements[focusableElements.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Get the current state of the modal.",
-          "tags": [{
-              "name": "returns",
-              "text": "A promise which will resolve to true when the modal is open, or false when the modal is closed."
-            }]
-        }
-      },
-      "setState": {
-        "complexType": {
-          "signature": "(value: boolean) => Promise<void>",
-          "parameters": [{
-              "tags": [{
-                  "name": "param",
-                  "text": "value The new state, set it to true to open the modal, or false to close the modal."
-                }],
-              "text": "The new state, set it to true to open the modal, or false to close the modal."
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+            else {
+                // Otherwise, focus the dismiss button.
+                this.dismissButton.focus();
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Set the state of the modal.",
-          "tags": [{
-              "name": "param",
-              "text": "value The new state, set it to true to open the modal, or false to close the modal."
-            }]
         }
-      },
-      "toggle": {
-        "complexType": {
-          "signature": "() => Promise<boolean>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+    }
+    handleIsOpenChange(newValue) {
+        if (newValue) {
+            window.requestAnimationFrame(() => {
+                window.requestAnimationFrame(() => {
+                    window.requestAnimationFrame(() => {
+                        // Focus the container element when the modal is opened, so that the screen reader's will announce the modal when it opens.
+                        this.container.focus();
+                    });
+                });
+            });
+            // Mark outer elements as inert when the modal is open.
+            let current = this.el;
+            // We want to mark all elements outside the modal as inert, so we need to traverse up the DOM tree until we reach the body element.
+            while (current !== null && current !== document.body) {
+                const parent = current.parentElement;
+                // If parent is null, then we may be inside a shadow root. If so, we get the host element and continue traversing up the DOM tree.
+                if (parent === null) {
+                    const root = current.getRootNode();
+                    if (root instanceof ShadowRoot) {
+                        current = root.host;
+                        continue;
+                    }
+                }
+                if (parent !== null) {
+                    for (const child of parent.children) {
+                        if (child !== current && !child.inert) {
+                            // Mark the element as inert and store it in an array so that we can remove the inert attribute when the modal closes.
+                            child.inert = true;
+                            this.inertElements.push(child);
+                        }
+                    }
+                }
+                current = parent;
+                this.opened.emit();
             }
-          },
-          "return": "Promise<boolean>"
-        },
-        "docs": {
-          "text": "Toggle the state of the modal.",
-          "tags": [{
-              "name": "returns",
-              "text": "A promise which will resolve to true (if the modal opened) or false (if the modal closed)."
-            }]
         }
-      },
-      "close": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        else {
+            // Remove the inert attribute from all elements that we marked as inert when the modal was opened.
+            for (const element of this.inertElements) {
+                element.removeAttribute('inert');
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Closes the modal.",
-          "tags": [{
-              "name": "returns",
-              "text": "empty Promise."
-            }]
+            // Clear the array of inert elements. This is important because we don't want to keep a reference to elements as they may be removed from the DOM and we could cause a memory leak.
+            this.inertElements = [];
+            this.closed.emit();
         }
-      },
-      "open": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        // Prevent scrolling of the body when the modal is open.
+        document.body.style.overflow = newValue ? 'hidden' : '';
+    }
+    render() {
+        return (h("div", { key: 'c66f0986068658cc29b9c12715381a0fd40678c9', class: {
+                'tw-visible tw-opacity-100': this.isOpen,
+                'tw-invisible tw-opacity-0': !this.isOpen,
+                'tw-fixed tw-left-0 tw-top-0 tw-z-[1000] tw-flex tw-h-screen tw-w-screen tw-bg-black tw-bg-opacity-50 tw-transition-[opacity,visibility]': true,
+            }, role: this.alertDialog ? 'alertdialog' : 'dialog', "aria-modal": this.isOpen ? 'true' : '', "aria-label": this.label, tabIndex: -1, onClick: this.handleClick, onKeyUp: this.handleKeyUp, onFocusout: this.handleFocusOut, ref: (el) => (this.container = el) }, h("div", { key: 'f6d05f9834e3d5398aa5cd0897605d5b16014c2e', part: "content", class: {
+                'tw-visible tw-opacity-100': this.isOpen,
+                'tw-translate-y-[calc(-50%_-_50px)]': !this.isOpen && this.centered,
+                'tw-translate-y-[-50px]': (!this.isOpen && !this.centered) || (this.isOpen && this.centered),
+                'tw-z-1 tw-absolute tw-left-1/2 tw-h-fit tw-max-h-full tw-w-fit tw-max-w-full -tw-translate-x-1/2 tw-overflow-auto tw-p-8 tw-transition-transform motion-reduce:tw-transition-none': true,
+            } }, h("button", { key: 'eecbcc13c724410cb085bec5e26f6a2a4c55c32a', class: "[&>svg]:h-[1em] tw-absolute tw-right-8 tw-top-8 tw-z-[2] tw-flex tw-h-12 tw-w-12 tw-items-center tw-justify-center tw-border-0 tw-bg-transparent tw-text-3xl tw-p-2 tw-text-[var(--uofg-modal-dismiss-color,white)] [&>svg]:tw-h-[1em] [&>svg]:tw-fill-current", part: "dismiss-button", "aria-label": "Close modal", ref: (el) => (this.dismissButton = el), onClick: () => (this.isOpen = false) }, h(FontAwesomeIcon, { key: '735ceec0b5bbace91a40db729d7b530767b8593a', icon: faTimes })), h("slot", { key: 'b3b156aa4d3859a1d827a9d826a8d91b8f379f18' }))));
+    }
+    /**
+     * Get the current state of the modal.
+     * @returns A promise which will resolve to true when the modal is open, or false when the modal is closed.
+     */
+    async getState() {
+        return this.isOpen;
+    }
+    /**
+     * Set the state of the modal.
+     * @param value The new state, set it to true to open the modal, or false to close the modal.
+     */
+    async setState(value) {
+        this.isOpen = value;
+    }
+    /**
+     * Toggle the state of the modal.
+     * @returns A promise which will resolve to true (if the modal opened) or false (if the modal closed).
+     */
+    async toggle() {
+        this.isOpen = !this.isOpen;
+        return this.isOpen;
+    }
+    /**
+     * Closes the modal.
+     * @returns empty Promise.
+     */
+    async close() {
+        this.isOpen = false;
+    }
+    /**
+     * Opens the modal.
+     * @returns empty Promise.
+     */
+    async open() {
+        this.isOpen = true;
+    }
+    static get is() { return "uofg-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["uofg-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["uofg-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label for the modal. It is recommended that you set this to describe the modal's content.\nThis is required for accessibility."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "alertDialog": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to determine whether the modal should be rendered as an alert dialog.\nThis is useful for when you want to use the modal to alert the user of something, rather than to ask the user to make a decision.\nIf this is set to true, the modal will be rendered with a role of \"alertdialog\" instead of \"dialog\"."
+                },
+                "attribute": "alert-dialog",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "centered": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to determine whether the modal content is centered vertically."
+                },
+                "attribute": "centered",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "staticBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to determine whether clicking on the backdrop of the modal will close the modal.\nIf this is set to true, clicking on the backdrop will NOT close the modal."
+                },
+                "attribute": "static-backdrop",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "autoOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Used to determine whether the modal should open automatically when the component is first rendered.\nIt is important to ensure this is only set to true for ONE modal on the page."
+                },
+                "attribute": "auto-open",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Opens the modal.",
-          "tags": [{
-              "name": "returns",
-              "text": "empty Promise."
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "isOpen",
-        "methodName": "handleIsOpenChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "opened",
+                "name": "opened",
+                "bubbles": false,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dispatched whenever the modal is opened whether by user interaction or programmatically (e.g. open())."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "closed",
+                "name": "closed",
+                "bubbles": false,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Dispatched whenever the modal is closed whether by user interaction or programmatically (e.g. close())."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getState": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Get the current state of the modal.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise which will resolve to true when the modal is open, or false when the modal is closed."
+                        }]
+                }
+            },
+            "setState": {
+                "complexType": {
+                    "signature": "(value: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean",
+                            "docs": "The new state, set it to true to open the modal, or false to close the modal."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the state of the modal.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value The new state, set it to true to open the modal, or false to close the modal."
+                        }]
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Toggle the state of the modal.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "A promise which will resolve to true (if the modal opened) or false (if the modal closed)."
+                        }]
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the modal.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "empty Promise."
+                        }]
+                }
+            },
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the modal.",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "empty Promise."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "handleIsOpenChange"
+            }];
+    }
 }