@six-group/ui-library 3.0.0-beta.1.7 → 3.0.0-beta.1.8

package/dist/collection/components/six-dialog/six-dialog.js

@@ -1,401 +1,401 @@
-import { Component, Element, Event, Method, Prop, State, Watch, h } from '@stencil/core';
-import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';
-import { hasSlot } from '../../utils/slot';
-import { isPreventScrollSupported } from '../../utils/support';
-import Modal from '../../utils/modal';
-const hasPreventScroll = isPreventScrollSupported();
-let id = 0;
-/**
- * @since 1.0
- * @status stable
- *
- * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
- *
- * @slot - The dialog's content.
- * @slot label - The dialog's label. Alternatively, you can use the label prop.
- * @slot footer - The dialog's footer, usually one or more buttons representing various options.
- *
- * @part base - The component's base wrapper.
- * @part overlay - The overlay.
- * @part panel - The dialog panel (where the dialog and its content is rendered).
- * @part header - The dialog header.
- * @part title - The dialog title.
- * @part close-button - The close button.
- * @part body - The dialog body.
- * @part footer - The dialog footer.
- *
- */
-export class SixDialog {
-  constructor() {
-    this.componentId = `dialog-${++id}`;
-    this.willShow = false;
-    this.willHide = false;
-    this.hasFooter = false;
-    this.isVisible = false;
-    /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /**
-     * The dialog's label as displayed in the header. You should always include a relevant label even when using
-     * `no-header`, as it is required for proper accessibility.
-     */
-    this.label = '';
-    /**
-     * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an
-     * easy, accessible way for users to dismiss the dialog.
-     */
-    this.noHeader = false;
-  }
-  handleOpenChange() {
-    this.open ? this.show() : this.hide();
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleOverlayClick = this.handleOverlayClick.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.modal = new Modal(this.host, {
-      onFocusOut: () => this.panel.focus(),
-    });
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    unlockBodyScrolling(this.host);
-  }
-  /** Shows the dialog */
-  async show() {
-    if (this.willShow) {
-      return;
-    }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
-    }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-    this.modal.activate();
-    lockBodyScrolling(this.host);
-    if (this.open) {
-      if (hasPreventScroll) {
-        // Wait for the next frame before setting initial focus so the dialog is technically visible
-        requestAnimationFrame(() => {
-          const sixInitialFocus = this.sixInitialFocus.emit();
-          if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus({ preventScroll: true });
-          }
-        });
-      }
-      else {
-        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
-        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
-        // out of view initially.
-        //
-        // Fiddle: https://jsfiddle.net/g6buoafq/1/
-        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
-        //
-        this.dialog.addEventListener('transitionend', () => {
-          const sixInitialFocus = this.sixInitialFocus.emit();
-          if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus();
-          }
-        }, { once: true });
-      }
-    }
-  }
-  /** Hides the dialog */
-  async hide() {
-    if (this.willHide) {
-      return;
-    }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
-    }
-    this.willHide = true;
-    this.open = false;
-    this.modal.deactivate();
-    unlockBodyScrolling(this.host);
-  }
-  handleCloseClick() {
-    this.hide();
-  }
-  handleKeyDown(event) {
-    if (event.key === 'Escape') {
-      this.hide();
-    }
-  }
-  handleOverlayClick() {
-    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-    if (!sixOverlayDismiss.defaultPrevented) {
-      this.hide();
-    }
-  }
-  handleSlotChange() {
-    this.hasFooter = hasSlot(this.host, 'footer');
-  }
-  handleTransitionEnd(event) {
-    const target = event.target;
-    // Ensure we only emit one event when the target element is no longer visible
-    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
-      this.isVisible = this.open;
-      this.willShow = false;
-      this.willHide = false;
-      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-    }
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.dialog = el), part: "base", class: {
-        dialog: true,
-        'dialog--open': this.open,
-        'dialog--visible': this.isVisible,
-        'dialog--has-footer': this.hasFooter,
-      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd },
-      h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }),
-      h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 },
-        !this.noHeader && (h("header", { part: "header", class: "dialog__header" },
-          h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` },
-            h("slot", { name: "label" }, this.label || String.fromCharCode(65279))),
-          h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))),
-        h("div", { part: "body", class: "dialog__body" },
-          h("slot", null)),
-        h("footer", { part: "footer", class: "dialog__footer" },
-          h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
-  }
-  static get is() { return "six-dialog"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["six-dialog.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["six-dialog.css"]
-  }; }
-  static get properties() { return {
-    "open": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods."
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "noHeader": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\neasy, accessible way for users to dismiss the dialog."
-      },
-      "attribute": "no-header",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "hasFooter": {},
-    "isVisible": {}
-  }; }
-  static get events() { return [{
-      "method": "sixShow",
-      "name": "six-dialog-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixAfterShow",
-      "name": "six-dialog-after-show",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the dialog opens and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixHide",
-      "name": "six-dialog-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixAfterHide",
-      "name": "six-dialog-after-hide",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted after the dialog closes and all transitions are complete."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixInitialFocus",
-      "name": "six-dialog-initial-focus",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the dialog, such as an input or button."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }, {
-      "method": "sixOverlayDismiss",
-      "name": "six-dialog-overlay-dismiss",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing."
-      },
-      "complexType": {
-        "original": "EmptyPayload",
-        "resolved": "undefined",
-        "references": {
-          "EmptyPayload": {
-            "location": "import",
-            "path": "../../utils/types"
-          }
-        }
-      }
-    }]; }
-  static get methods() { return {
-    "show": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Shows the dialog",
-        "tags": []
-      }
-    },
-    "hide": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Hides the dialog",
-        "tags": []
-      }
-    }
-  }; }
-  static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "open",
-      "methodName": "handleOpenChange"
-    }]; }
-}
+import { Component, Element, Event, Method, Prop, State, Watch, h } from '@stencil/core';
+import { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';
+import { hasSlot } from '../../utils/slot';
+import { isPreventScrollSupported } from '../../utils/support';
+import Modal from '../../utils/modal';
+const hasPreventScroll = isPreventScrollSupported();
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The dialog's content.
+ * @slot label - The dialog's label. Alternatively, you can use the label prop.
+ * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+ *
+ * @part base - The component's base wrapper.
+ * @part overlay - The overlay.
+ * @part panel - The dialog panel (where the dialog and its content is rendered).
+ * @part header - The dialog header.
+ * @part title - The dialog title.
+ * @part close-button - The close button.
+ * @part body - The dialog body.
+ * @part footer - The dialog footer.
+ *
+ */
+export class SixDialog {
+  constructor() {
+    this.componentId = `dialog-${++id}`;
+    this.willShow = false;
+    this.willHide = false;
+    this.hasFooter = false;
+    this.isVisible = false;
+    /** Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /**
+     * The dialog's label as displayed in the header. You should always include a relevant label even when using
+     * `no-header`, as it is required for proper accessibility.
+     */
+    this.label = '';
+    /**
+     * Set to true to disable the header. This will also remove the default close button, so please ensure you provide an
+     * easy, accessible way for users to dismiss the dialog.
+     */
+    this.noHeader = false;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleOverlayClick = this.handleOverlayClick.bind(this);
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+    this.modal = new Modal(this.host, {
+      onFocusOut: () => this.panel.focus(),
+    });
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    unlockBodyScrolling(this.host);
+  }
+  /** Shows the dialog */
+  async show() {
+    if (this.willShow) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.willShow = true;
+    this.isVisible = true;
+    this.open = true;
+    this.modal.activate();
+    lockBodyScrolling(this.host);
+    if (this.open) {
+      if (hasPreventScroll) {
+        // Wait for the next frame before setting initial focus so the dialog is technically visible
+        requestAnimationFrame(() => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus({ preventScroll: true });
+          }
+        });
+      }
+      else {
+        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to
+        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its
+        // out of view initially.
+        //
+        // Fiddle: https://jsfiddle.net/g6buoafq/1/
+        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583
+        //
+        this.dialog.addEventListener('transitionend', () => {
+          const sixInitialFocus = this.sixInitialFocus.emit();
+          if (!sixInitialFocus.defaultPrevented) {
+            this.panel.focus();
+          }
+        }, { once: true });
+      }
+    }
+  }
+  /** Hides the dialog */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+    this.modal.deactivate();
+    unlockBodyScrolling(this.host);
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleKeyDown(event) {
+    if (event.key === 'Escape') {
+      this.hide();
+    }
+  }
+  handleOverlayClick() {
+    const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+    if (!sixOverlayDismiss.defaultPrevented) {
+      this.hide();
+    }
+  }
+  handleSlotChange() {
+    this.hasFooter = hasSlot(this.host, 'footer');
+  }
+  handleTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {
+      this.isVisible = this.open;
+      this.willShow = false;
+      this.willHide = false;
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+    }
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.dialog = el), part: "base", class: {
+        dialog: true,
+        'dialog--open': this.open,
+        'dialog--visible': this.isVisible,
+        'dialog--has-footer': this.hasFooter,
+      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd },
+      h("div", { part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }),
+      h("div", { ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 },
+        !this.noHeader && (h("header", { part: "header", class: "dialog__header" },
+          h("span", { part: "title", class: "dialog__title", id: `${this.componentId}-title` },
+            h("slot", { name: "label" }, this.label || String.fromCharCode(65279))),
+          h("six-icon-button", { exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))),
+        h("div", { part: "body", class: "dialog__body" },
+          h("slot", null)),
+        h("footer", { part: "footer", class: "dialog__footer" },
+          h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+  }
+  static get is() { return "six-dialog"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-dialog.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-dialog.css"]
+  }; }
+  static get properties() { return {
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the dialog is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "noHeader": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\neasy, accessible way for users to dismiss the dialog."
+      },
+      "attribute": "no-header",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasFooter": {},
+    "isVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-dialog-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterShow",
+      "name": "six-dialog-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the dialog opens and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-dialog-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixAfterHide",
+      "name": "six-dialog-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the dialog closes and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixInitialFocus",
+      "name": "six-dialog-initial-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the dialog, such as an input or button."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixOverlayDismiss",
+      "name": "six-dialog-overlay-dismiss",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the dialog",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the dialog",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }]; }
+}