@six-group/ui-library 0.0.0-insider.ebd822a → 0.0.0-insider.f015905

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

@@ -1,8 +1,8 @@
-import { 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';
+import { 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;
 /**
@@ -25,425 +25,429 @@ let id = 0;
  * @part footer - The drawer footer.
  */
 export class SixDrawer {
-  constructor() {
-    this.componentId = `drawer-${++id}`;
-    this.willShow = false;
-    this.willHide = false;
-    this.hasFooter = false;
-    this.isVisible = false;
-    this.open = false;
-    this.label = '';
-    this.placement = 'right';
-    this.contained = false;
-    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.contained ? null : this.panel.focus()),
-    });
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-    // Show on init if open
-    if (this.open) {
-      this.show();
-      // if the sidebar is open by default we need to manually reset the
-      // transition variables since there will be no transition event
-      this.resetTransitionVariables();
-    }
-  }
-  disconnectedCallback() {
-    unlockBodyScrolling(this.host);
-  }
-  /** Shows the drawer */
-  async show() {
-    if (this.willShow) {
-      return;
-    }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    constructor() {
+        this.componentId = `drawer-${++id}`;
+        this.willShow = false;
+        this.willHide = false;
+        this.handleCloseClick = () => {
+            this.hide();
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                this.hide();
+            }
+        };
+        this.handleOverlayClick = () => {
+            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
+            if (!sixOverlayDismiss.defaultPrevented) {
+                this.hide();
+            }
+        };
+        this.handleSlotChange = () => {
+            this.hasFooter = hasSlot(this.host, 'footer');
+        };
+        this.handleTransitionEnd = (event) => {
+            const target = event.target;
+            // Ensure we only emit one event when the target element is no longer visible
+            if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {
+                this.resetTransitionVariables();
+            }
+        };
+        this.hasFooter = false;
+        this.isVisible = false;
+        this.open = false;
+        this.label = '';
+        this.placement = 'right';
+        this.contained = false;
+        this.noHeader = false;
     }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-    // Lock body scrolling only if the drawer isn't contained
-    if (!this.contained) {
-      this.modal.activate();
-      lockBodyScrolling(this.host);
+    handleOpenChange() {
+        this.open ? this.show() : this.hide();
     }
-    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 });
-          }
+    connectedCallback() {
+        this.modal = new Modal(this.host, {
+            onFocusOut: () => { var _a; return (this.contained ? null : (_a = this.panel) === null || _a === void 0 ? void 0 : _a.focus()); },
         });
-      }
-      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.drawer.addEventListener('transitionend', () => {
-          const sixInitialFocus = this.sixInitialFocus.emit();
-          if (!sixInitialFocus.defaultPrevented) {
-            this.panel.focus();
-          }
-        }, { once: true });
-      }
-    }
-  }
-  /** Hides the drawer */
-  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();
+    componentWillLoad() {
+        this.handleSlotChange();
+        // Show on init if open
+        if (this.open) {
+            this.show();
+            // if the sidebar is open by default we need to manually reset the
+            // transition variables since there will be no transition event
+            this.resetTransitionVariables();
+        }
     }
-  }
-  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 === 'transform' && target.classList.contains('drawer__panel')) {
-      this.resetTransitionVariables();
+    disconnectedCallback() {
+        unlockBodyScrolling(this.host);
     }
-  }
-  resetTransitionVariables() {
-    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.drawer = el), part: "base", class: {
-        drawer: true,
-        'drawer--open': this.open,
-        'drawer--visible': this.isVisible,
-        'drawer--top': this.placement === 'top',
-        'drawer--right': this.placement === 'right',
-        'drawer--bottom': this.placement === 'bottom',
-        'drawer--left': this.placement === 'left',
-        'drawer--contained': this.contained,
-        'drawer--fixed': !this.contained,
-        'drawer--has-footer': this.hasFooter,
-      }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "drawer__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: "drawer__header" }, h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "drawer__close", name: "x", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
-  }
-  static get is() { return "six-drawer"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["six-drawer.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["six-drawer.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 drawer 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 drawer'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": "''"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'top' | 'right' | 'bottom' | 'left'",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The direction from which the drawer will open."
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'right'"
-      },
-      "contained": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."
-        },
-        "attribute": "contained",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "noHeader": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer."
-        },
-        "attribute": "no-header",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hasFooter": {},
-      "isVisible": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "sixShow",
-        "name": "six-drawer-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    /** Shows the drawer */
+    async show() {
+        if (this.willShow || this.modal == null || this.panel == null || this.drawer == null) {
+            return;
         }
-      }, {
-        "method": "sixAfterShow",
-        "name": "six-drawer-after-show",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the drawer opens and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        const panel = this.panel;
+        const sixShow = this.sixShow.emit();
+        if (sixShow.defaultPrevented) {
+            this.open = false;
+            return;
         }
-      }, {
-        "method": "sixHide",
-        "name": "six-drawer-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+        this.willShow = true;
+        this.isVisible = true;
+        this.open = true;
+        // Lock body scrolling only if the drawer isn't contained
+        if (!this.contained) {
+            this.modal.activate();
+            lockBodyScrolling(this.host);
         }
-      }, {
-        "method": "sixAfterHide",
-        "name": "six-drawer-after-hide",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted after the drawer closes and all transitions are complete."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
+        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) {
+                        panel.focus({ preventScroll: true });
+                    }
+                });
             }
-          }
-        }
-      }, {
-        "method": "sixInitialFocus",
-        "name": "six-drawer-initial-focus",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the drawer, such as an input or button."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
+            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.drawer.addEventListener('transitionend', () => {
+                    const sixInitialFocus = this.sixInitialFocus.emit();
+                    if (!sixInitialFocus.defaultPrevented) {
+                        panel.focus();
+                    }
+                }, { once: true });
             }
-          }
         }
-      }, {
-        "method": "sixOverlayDismiss",
-        "name": "six-drawer-overlay-dismiss",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing."
-        },
-        "complexType": {
-          "original": "EmptyPayload",
-          "resolved": "undefined",
-          "references": {
-            "EmptyPayload": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+    }
+    /** Hides the drawer */
+    async hide() {
+        if (this.willHide || this.modal == null) {
+            return;
         }
-      }];
-  }
-  static get methods() {
-    return {
-      "show": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Shows the drawer",
-          "tags": []
+        const sixHide = this.sixHide.emit();
+        if (sixHide.defaultPrevented) {
+            this.open = true;
+            return;
         }
-      },
-      "hide": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
+        this.willHide = true;
+        this.open = false;
+        this.modal.deactivate();
+        unlockBodyScrolling(this.host);
+    }
+    resetTransitionVariables() {
+        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.drawer = el), part: "base", class: {
+                drawer: true,
+                'drawer--open': this.open,
+                'drawer--visible': this.isVisible,
+                'drawer--top': this.placement === 'top',
+                'drawer--right': this.placement === 'right',
+                'drawer--bottom': this.placement === 'bottom',
+                'drawer--left': this.placement === 'left',
+                'drawer--contained': this.contained,
+                'drawer--fixed': !this.contained,
+                'drawer--has-footer': this.hasFooter,
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), h("div", { ref: (el) => (this.panel = el), part: "panel", class: "drawer__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: "drawer__header" }, h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), h("six-icon-button", { exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), h("div", { part: "body", class: "drawer__body" }, h("slot", null)), h("footer", { part: "footer", class: "drawer__footer" }, h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+    }
+    static get is() { return "six-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-drawer.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 the drawer 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 drawer'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": "''"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'right' | 'bottom' | 'left'",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The direction from which the drawer will open."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "contained": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\nits parent element, set this prop and add `position: relative` to the parent."
+                },
+                "attribute": "contained",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Removes the header. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the drawer."
+                },
+                "attribute": "no-header",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "Hides the drawer",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "open",
-        "methodName": "handleOpenChange"
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {},
+            "isVisible": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "sixShow",
+                "name": "six-drawer-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixAfterShow",
+                "name": "six-drawer-after-show",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the drawer opens and all transitions are complete."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixHide",
+                "name": "six-drawer-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixAfterHide",
+                "name": "six-drawer-after-hide",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted after the drawer closes and all transitions are complete."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixInitialFocus",
+                "name": "six-drawer-initial-focus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the drawer, such as an input or button."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }, {
+                "method": "sixOverlayDismiss",
+                "name": "six-drawer-overlay-dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing."
+                },
+                "complexType": {
+                    "original": "EmptyPayload",
+                    "resolved": "undefined",
+                    "references": {
+                        "EmptyPayload": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::EmptyPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Shows the drawer",
+                    "tags": []
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Hides the drawer",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "handleOpenChange"
+            }];
+    }
 }
 //# sourceMappingURL=six-drawer.js.map