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

package/dist/cjs/six-drawer.cjs.entry.js

@@ -2,184 +2,172 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-341df120.js');
-const scroll = require('./scroll-5b8676ba.js');
-const slot = require('./slot-8abe833c.js');
-const modal = require('./modal-a9679ddf.js');
+const index = require('./index-b3257a77.js');
+const scroll = require('./scroll-76e6f5d7.js');
+const slot = require('./slot-ad537f24.js');
+const modal = require('./modal-48d42228.js');
 
 const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";
 
-const hasPreventScroll = modal.isPreventScrollSupported();
-let id = 0;
-let SixDrawer = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.sixShow = index.createEvent(this, "six-drawer-show", 7);
-    this.sixAfterShow = index.createEvent(this, "six-drawer-after-show", 7);
-    this.sixHide = index.createEvent(this, "six-drawer-hide", 7);
-    this.sixAfterHide = index.createEvent(this, "six-drawer-after-hide", 7);
-    this.sixInitialFocus = index.createEvent(this, "six-drawer-initial-focus", 7);
-    this.sixOverlayDismiss = index.createEvent(this, "six-drawer-overlay-dismiss", 7);
-    this.componentId = `drawer-${++id}`;
-    this.willShow = false;
-    this.willHide = false;
-    this.hasFooter = false;
-    this.isVisible = false;
-    /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */
-    this.open = false;
-    /**
-     * The drawer'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 = '';
-    /** The direction from which the drawer will open. */
-    this.placement = 'right';
-    /**
-     * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of
-     * its parent element, set this prop and add `position: relative` to the parent.
-     */
-    this.contained = false;
-    /**
-     * Removes the header. This will also remove the default close button, so please ensure you provide an easy,
-     * accessible way for users to dismiss the drawer.
-     */
-    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.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() {
-    scroll.unlockBodyScrolling(this.host);
-  }
-  /** Shows the drawer */
-  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;
-    // Lock body scrolling only if the drawer isn't contained
-    if (!this.contained) {
-      this.modal.activate();
-      scroll.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.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();
-    scroll.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 = slot.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();
-    }
-  }
-  resetTransitionVariables() {
-    this.isVisible = this.open;
-    this.willShow = false;
-    this.willHide = false;
-    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
-  }
-  render() {
-    return (index.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 }, index.h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), index.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 && (index.h("header", { part: "header", class: "drawer__header" }, index.h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, index.h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { exportparts: "base:close-button", class: "drawer__close", name: "x", onClick: this.handleCloseClick }))), index.h("div", { part: "body", class: "drawer__body" }, index.h("slot", null)), index.h("footer", { part: "footer", class: "drawer__footer" }, index.h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
-  }
-  get host() { return index.getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-};
+const hasPreventScroll = modal.isPreventScrollSupported();
+let id = 0;
+const SixDrawer = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixShow = index.createEvent(this, "six-drawer-show", 7);
+    this.sixAfterShow = index.createEvent(this, "six-drawer-after-show", 7);
+    this.sixHide = index.createEvent(this, "six-drawer-hide", 7);
+    this.sixAfterHide = index.createEvent(this, "six-drawer-after-hide", 7);
+    this.sixInitialFocus = index.createEvent(this, "six-drawer-initial-focus", 7);
+    this.sixOverlayDismiss = index.createEvent(this, "six-drawer-overlay-dismiss", 7);
+    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.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() {
+    scroll.unlockBodyScrolling(this.host);
+  }
+  /** Shows the drawer */
+  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;
+    // Lock body scrolling only if the drawer isn't contained
+    if (!this.contained) {
+      this.modal.activate();
+      scroll.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.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();
+    scroll.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 = slot.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();
+    }
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (index.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 }, index.h("div", { part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), index.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 && (index.h("header", { part: "header", class: "drawer__header" }, index.h("span", { part: "title", class: "drawer__title", id: `${this.componentId}-title` }, index.h("slot", { name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { exportparts: "base:close-button", class: "drawer__close", name: "x", onClick: this.handleCloseClick }))), index.h("div", { part: "body", class: "drawer__body" }, index.h("slot", null)), index.h("footer", { part: "footer", class: "drawer__footer" }, index.h("slot", { name: "footer", onSlotchange: this.handleSlotChange })))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
 SixDrawer.style = sixDrawerCss;
 
 exports.six_drawer = SixDrawer;
+
+//# sourceMappingURL=six-drawer.cjs.entry.js.map

package/dist/cjs/six-drawer.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-drawer.entry.cjs.js","mappings":"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","names":["isPreventScrollSupported","Modal","unlockBodyScrolling","lockBodyScrolling","hasSlot","h"],"sources":["./src/components/six-drawer/six-drawer.scss?tag=six-drawer&encapsulation=shadow","./src/components/six-drawer/six-drawer.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n\n  &:not(.drawer--visible) {\n    @include hidden;\n  }\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--six-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--six-drawer-background-color);\n  color: var(--six-drawer-color);\n  box-shadow: var(--six-shadow-x-large);\n  transition: var(--six-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  // don't use translate here or it will cause problems with popovers inside the drawer e.g. dropdown, select etc.\n  transform: none;\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--six-font-size-large);\n  line-height: var(--six-line-height-dense);\n  padding: var(--six-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--six-font-size-x-large);\n  padding: 0 var(--six-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--six-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--six-spacing-large);\n\n  ::slotted(six-button:not(:last-of-type)) {\n    margin-right: var(--six-spacing-x-small);\n  }\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--six-overlay-background-color);\n  opacity: 0;\n  transition: var(--six-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 0.4;\n}\n","import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport { isPreventScrollSupported } from '../../utils/support';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nconst hasPreventScroll = isPreventScrollSupported();\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The drawer's content.\n * @slot label - The drawer's label. Alternatively, you can use the label prop.\n * @slot footer - The drawer's footer, usually one or more buttons representing various options.\n *\n * @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The drawer panel (where the drawer and its content is rendered).\n * @part header - The drawer header.\n * @part title - The drawer title.\n * @part close-button - The close button.\n * @part body - The drawer body.\n * @part footer - The drawer footer.\n */\n\n@Component({\n  tag: 'six-drawer',\n  styleUrl: 'six-drawer.scss',\n  shadow: true,\n})\nexport class SixDrawer {\n  componentId = `drawer-${++id}`;\n  drawer: HTMLElement;\n  modal: Modal;\n  panel: HTMLElement;\n  willShow = false;\n  willHide = false;\n\n  @Element() host: HTMLSixDrawerElement;\n\n  @State() hasFooter = false;\n  @State() isVisible = false;\n\n  /** Indicates whether or not the drawer is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /**\n   * 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.\n   */\n  @Prop() label = '';\n\n  /** The direction from which the drawer will open. */\n  @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'right';\n\n  /**\n   * By default, the drawer slides out of its containing block (usually the viewport). To make the drawer slide out of\n   * its parent element, set this prop and add `position: relative` to the parent.\n   */\n  @Prop() contained = false;\n\n  /**\n   * Removes the header. This will also remove the default close button, so please ensure you provide an easy,\n   * accessible way for users to dismiss the drawer.\n   */\n  @Prop() noHeader = false;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  /** Emitted when the drawer opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-drawer-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer opens and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the drawer closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-drawer-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the drawer closes and all transitions are complete. */\n  @Event({ eventName: 'six-drawer-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the drawer opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the drawer, such as an input or button.\n   */\n  @Event({ eventName: 'six-drawer-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the drawer from closing. */\n  @Event({ eventName: 'six-drawer-overlay-dismiss' }) sixOverlayDismiss: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);\n    this.handleKeyDown = this.handleKeyDown.bind(this);\n    this.handleOverlayClick = this.handleOverlayClick.bind(this);\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n\n    this.modal = new Modal(this.host, {\n      onFocusOut: () => (this.contained ? null : this.panel.focus()),\n    });\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n\n    // Show on init if open\n    if (this.open) {\n      this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  disconnectedCallback() {\n    unlockBodyScrolling(this.host);\n  }\n\n  /** Shows the drawer */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n\n    // Lock body scrolling only if the drawer isn't contained\n    if (!this.contained) {\n      this.modal.activate();\n      lockBodyScrolling(this.host);\n    }\n\n    if (this.open) {\n      if (hasPreventScroll) {\n        // Wait for the next frame before setting initial focus so the dialog is technically visible\n        requestAnimationFrame(() => {\n          const sixInitialFocus = this.sixInitialFocus.emit();\n          if (!sixInitialFocus.defaultPrevented) {\n            this.panel.focus({ preventScroll: true });\n          }\n        });\n      } else {\n        // Once Safari supports { preventScroll: true } we can remove this nasty little hack, but until then we need to\n        // wait for the transition to complete before setting focus, otherwise the panel may render in a buggy way its\n        // out of view initially.\n        //\n        // Fiddle: https://jsfiddle.net/g6buoafq/1/\n        // Safari: https://bugs.webkit.org/show_bug.cgi?id=178583\n        //\n        this.drawer.addEventListener(\n          'transitionend',\n          () => {\n            const sixInitialFocus = this.sixInitialFocus.emit();\n            if (!sixInitialFocus.defaultPrevented) {\n              this.panel.focus();\n            }\n          },\n          { once: true }\n        );\n      }\n    }\n  }\n\n  /** Hides the drawer */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n    this.modal.deactivate();\n\n    unlockBodyScrolling(this.host);\n  }\n\n  handleCloseClick() {\n    this.hide();\n  }\n\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape') {\n      this.hide();\n    }\n  }\n\n  handleOverlayClick() {\n    const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n    if (!sixOverlayDismiss.defaultPrevented) {\n      this.hide();\n    }\n  }\n\n  handleSlotChange() {\n    this.hasFooter = hasSlot(this.host, 'footer');\n  }\n\n  handleTransitionEnd(event: TransitionEvent) {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.propertyName === 'transform' && target.classList.contains('drawer__panel')) {\n      this.resetTransitionVariables();\n    }\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <div\n        ref={(el) => (this.drawer = el)}\n        part=\"base\"\n        class={{\n          drawer: true,\n          'drawer--open': this.open,\n          'drawer--visible': this.isVisible,\n          'drawer--top': this.placement === 'top',\n          'drawer--right': this.placement === 'right',\n          'drawer--bottom': this.placement === 'bottom',\n          'drawer--left': this.placement === 'left',\n          'drawer--contained': this.contained,\n          'drawer--fixed': !this.contained,\n          'drawer--has-footer': this.hasFooter,\n        }}\n        onKeyDown={this.handleKeyDown}\n        onTransitionEnd={this.handleTransitionEnd}\n      >\n        <div part=\"overlay\" class=\"drawer__overlay\" onClick={this.handleOverlayClick} tabIndex={-1} />\n\n        <div\n          ref={(el) => (this.panel = el)}\n          part=\"panel\"\n          class=\"drawer__panel\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={this.open ? 'false' : 'true'}\n          aria-label={this.noHeader ? this.label : null}\n          aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n          tabIndex={0}\n        >\n          {!this.noHeader && (\n            <header part=\"header\" class=\"drawer__header\">\n              <span part=\"title\" class=\"drawer__title\" id={`${this.componentId}-title`}>\n                <slot name=\"label\">\n                  {/* If there's no label, use an invisible character to prevent the heading from collapsing */}\n                  {this.label || String.fromCharCode(65279)}\n                </slot>\n              </span>\n              <six-icon-button\n                exportparts=\"base:close-button\"\n                class=\"drawer__close\"\n                name=\"x\"\n                onClick={this.handleCloseClick}\n              />\n            </header>\n          )}\n\n          <div part=\"body\" class=\"drawer__body\">\n            <slot />\n          </div>\n\n          <footer part=\"footer\" class=\"drawer__footer\">\n            <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}