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

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

@@ -1,181 +1,181 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a2605a62.js';
-import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-99b214c2.js';
-import { h as hasSlot } from './slot-5253e199.js';
-import { i as isPreventScrollSupported, M as Modal } from './modal-e5709f6b.js';
+import { u as unlockBodyScrolling, l as lockBodyScrolling } from './scroll-180b53fd.js';
+import { h as hasSlot } from './slot-6f3984c7.js';
+import { i as isPreventScrollSupported, M as Modal } from './modal-5ebdc320.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 = isPreventScrollSupported();
-let id = 0;
-let SixDrawer = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixShow = createEvent(this, "six-drawer-show", 7);
-    this.sixAfterShow = createEvent(this, "six-drawer-after-show", 7);
-    this.sixHide = createEvent(this, "six-drawer-hide", 7);
-    this.sixAfterHide = createEvent(this, "six-drawer-after-hide", 7);
-    this.sixInitialFocus = createEvent(this, "six-drawer-initial-focus", 7);
-    this.sixOverlayDismiss = 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(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;
-    }
-    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);
-    }
-    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();
-    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 === '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 (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 })))));
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-};
+const hasPreventScroll = isPreventScrollSupported();
+let id = 0;
+let SixDrawer = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixShow = createEvent(this, "six-drawer-show", 7);
+    this.sixAfterShow = createEvent(this, "six-drawer-after-show", 7);
+    this.sixHide = createEvent(this, "six-drawer-hide", 7);
+    this.sixAfterHide = createEvent(this, "six-drawer-after-hide", 7);
+    this.sixInitialFocus = createEvent(this, "six-drawer-initial-focus", 7);
+    this.sixOverlayDismiss = 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(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;
+    }
+    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);
+    }
+    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();
+    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 === '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 (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 })))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "open": ["handleOpenChange"]
+  }; }
+};
 SixDrawer.style = sixDrawerCss;
 
 export { SixDrawer as six_drawer };