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

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

@@ -0,0 +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"
+    }]; }
+}

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

@@ -0,0 +1,166 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its
+ *   `placement`. Note that the drawer will shrink to accommodate smaller screens.
+ */
+: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;
+}