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

package/dist/collection/components/six-datepicker/test/six-datepicker.test-helpers.js

@@ -0,0 +1,16 @@
+export const getExpectedMonthString = () => {
+  return [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ][new Date().getMonth()];
+};

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

@@ -0,0 +1,118 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --hide-duration: The length of the hide transition.
+ * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.
+ * @prop --show-duration: The length of the show transition.
+ * @prop --show-timing-function: The timing function (easing) to use for the show transition.
+ */
+:host {
+  --hide-duration: var(--six-transition-medium);
+  --hide-timing-function: ease;
+  --show-duration: var(--six-transition-medium);
+  --show-timing-function: ease;
+  font-family: var(--six-font-family);
+  display: block;
+}
+
+.details {
+  border: solid var(--six-border-width) var(--six-input-border-color);
+  border-radius: var(--six-border-radius-medium);
+  color: var(--six-details-color);
+  overflow-anchor: none;
+  font-size: var(--six-input-font-size-medium);
+}
+.details:hover:not(.details--disabled):not(.details--open) {
+  border-color: var(--six-input-border-color-hover);
+}
+.details.inline {
+  border: none;
+  color: var(--six-sidebar-color);
+}
+.details.inline:hover {
+  background-color: var(--six-sidebar-hover-background-color);
+}
+.details.inline.details--open {
+  background-color: var(--six-color-web-rock-50);
+}
+.details.inline.details--open:hover {
+  border: none;
+  box-shadow: none;
+}
+.details.inline.details--open > .details__header {
+  color: var(--six-sidebar-color);
+  font-weight: var(--six-font-weight-bold);
+  background-color: var(--six-sidebar-header-background-color);
+}
+
+.details--disabled {
+  background-color: var(--six-input-background-color-disabled);
+  border-color: var(--six-input-border-color-disabled);
+  color: var(--six-input-color-disabled);
+}
+
+.details__header {
+  display: flex;
+  align-items: center;
+  border-radius: inherit;
+  padding: var(--six-spacing-medium);
+  user-select: none;
+  cursor: pointer;
+}
+.details__header:focus {
+  outline: none;
+}
+
+.details--disabled .details__header {
+  cursor: not-allowed;
+  border-width: 1px;
+}
+.details--disabled .details__header:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.details__summary {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+}
+
+.details__summary-icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: 1.2em;
+  transition: var(--six-transition-medium) transform ease;
+}
+
+.details--open .details__summary-icon--animate {
+  transform: rotate(-180deg);
+}
+
+.details--open:hover {
+  color: var(--six-input-color-focus);
+}
+
+.details__body {
+  height: 0;
+  overflow: hidden;
+  transition-property: height;
+  transition-duration: var(--hide-duration);
+  transition-timing-function: var(--hide-timing-function);
+}
+
+.details--open .details__body {
+  transition-duration: var(--show-duration);
+  transition-timing-function: var(--show-timing-function);
+}
+
+.details__content {
+  padding: var(--six-spacing-medium);
+}

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

@@ -0,0 +1,432 @@
+import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { focusVisible } from '../../utils/focus-visible';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The details' content.
+ * @slot summary - The details' summary. Alternatively, you can use the summary prop.
+ *
+ * @part base - The component's base wrapper.
+ * @part header - The summary header.
+ * @part summary - The details summary.
+ * @part summary-icon - The expand/collapse summary icon.
+ * @part content - The details content.
+ */
+export class SixDetails {
+  constructor() {
+    this.animateSummaryIcon = true;
+    this.componentId = `details-${++id}`;
+    this.isVisible = false;
+    /** Indicates whether or not the details is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */
+    this.summary = '';
+    /** The icon's size. */
+    this.summaryIconSize = 'inherit';
+    /** Set to true to prevent the user from toggling the details. */
+    this.disabled = false;
+    /** Set to true when you want to use six-details inline e.g. in a sidebar */
+    this.inline = false;
+    /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children  */
+    this.selectableEmpty = false;
+    this.hasContent = true;
+  }
+  handleOpenChange() {
+    if (this.body) {
+      this.open ? this.show() : this.hide();
+    }
+  }
+  connectedCallback() {
+    this.handleBodyTransitionEnd = this.handleBodyTransitionEnd.bind(this);
+    this.handleSummaryClick = this.handleSummaryClick.bind(this);
+    this.handleSummaryKeyDown = this.handleSummaryKeyDown.bind(this);
+  }
+  componentDidLoad() {
+    focusVisible.observe(this.details);
+    this.body.hidden = !this.open;
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  disconnectedCallback() {
+    focusVisible.unobserve(this.details);
+  }
+  /** Shows the detail body */
+  async show() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (this.isVisible) {
+      return;
+    }
+    const sixShow = this.sixShow.emit();
+    if (sixShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+    this.body.hidden = false;
+    if (this.body.scrollHeight === 0) {
+      // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open
+      // intiially, but not immediately visible (i.e. in a tab panel).
+      this.body.style.height = 'auto';
+      this.body.style.overflow = 'visible';
+    }
+    else {
+      this.body.style.height = `${this.body.scrollHeight}px`;
+      this.body.style.overflow = 'hidden';
+    }
+    this.isVisible = true;
+    this.open = true;
+  }
+  /** Hides the detail body */
+  async hide() {
+    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
+    if (!this.isVisible) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    // We can't transition out of `height: auto`, so let's set it to the current height first
+    this.body.style.height = `${this.body.scrollHeight}px`;
+    this.body.style.overflow = 'hidden';
+    requestAnimationFrame(() => {
+      // tslint:disable-next-line: no-unused-expression
+      this.body.clientWidth; // force a reflow
+      this.body.style.height = '0';
+    });
+    this.isVisible = false;
+    this.open = false;
+  }
+  handleBodyTransitionEnd(event) {
+    const target = event.target;
+    // Ensure we only emit one event when the target element is no longer visible
+    if (event.propertyName === 'height' && target.classList.contains('details__body')) {
+      this.body.style.overflow = this.open ? 'visible' : 'hidden';
+      this.body.style.height = this.open ? 'auto' : '0';
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+      this.body.hidden = !this.open;
+    }
+  }
+  handleSummaryClick() {
+    if (!this.disabled && (this.hasContent || this.selectableEmpty)) {
+      this.open ? this.hide() : this.show();
+      this.header.focus();
+    }
+  }
+  handleSummaryKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.open ? this.hide() : this.show();
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault();
+      this.hide();
+    }
+    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault();
+      this.show();
+    }
+  }
+  render() {
+    const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
+    return (h("div", { ref: (el) => (this.details = el), part: "base", class: {
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        inline: this.inline,
+      } },
+      h("header", { ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown },
+        h("div", { part: "summary", class: "details__summary" },
+          h("slot", { name: "summary" }, this.summary)),
+        h("span", { part: "summary-icon", class: {
+            'details__summary-icon': true,
+            'details__summary-icon--animate': this.animateSummaryIcon,
+          } },
+          h("slot", { name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && h("six-icon", { size: this.summaryIconSize }, summaryIcon)))),
+      h("div", { ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd },
+        h("div", { part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` },
+          h("slot", null)))));
+  }
+  static get is() { return "six-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-details.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-details.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 details is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "summary": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The summary to show in the details header. If you need to display HTML, use the `summary` slot instead."
+      },
+      "attribute": "summary",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "summaryIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead."
+      },
+      "attribute": "summary-icon",
+      "reflect": false
+    },
+    "summaryIconSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'inherit'\n    | 'xSmall'\n    | 'small'\n    | 'medium'\n    | 'large'\n    | 'xLarge'\n    | 'xxLarge'\n    | 'xxxLarge'",
+        "resolved": "\"inherit\" | \"large\" | \"medium\" | \"small\" | \"xLarge\" | \"xSmall\" | \"xxLarge\" | \"xxxLarge\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The icon's size."
+      },
+      "attribute": "summary-icon-size",
+      "reflect": true,
+      "defaultValue": "'inherit'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to prevent the user from toggling the details."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "inline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true when you want to use six-details inline e.g. in a sidebar"
+      },
+      "attribute": "inline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "selectableEmpty": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children"
+      },
+      "attribute": "selectable-empty",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hasContent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "has-content",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get states() { return {
+    "animateSummaryIcon": {}
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-details-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the details 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-details-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the details opens and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-details-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the details 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-details-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the details closes and all transitions are complete."
+      },
+      "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 detail body",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the detail body",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }]; }
+}

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

@@ -0,0 +1,123 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ */
+:host {
+  --width: 31rem;
+  display: contents;
+}
+
+.dialog {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: var(--six-z-index-dialog);
+  color: var(--six-color-web-rock-900);
+}
+.dialog:not(.dialog--visible) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.dialog__panel {
+  display: flex;
+  flex-direction: column;
+  z-index: 2;
+  width: var(--width);
+  max-width: calc(100% - var(--six-spacing-xx-large));
+  max-height: calc(100% - var(--six-spacing-xx-large));
+  background-color: var(--six-panel-background-color);
+  border-radius: var(--six-border-radius-medium);
+  box-shadow: var(--six-shadow-x-large);
+  opacity: 0;
+  transform: scale(0.8);
+  transition: var(--six-transition-medium) opacity, var(--six-transition-medium) transform;
+}
+.dialog__panel:focus {
+  outline: none;
+}
+
+@media screen and (max-width: 420px) {
+  .dialog__panel {
+    max-height: 80vh;
+  }
+}
+.dialog--open .dialog__panel {
+  display: flex;
+  opacity: 1;
+  transform: none;
+}
+
+.dialog__header {
+  flex: 0 0 auto;
+  display: flex;
+}
+
+.dialog__title {
+  flex: 1 1 auto;
+  font-size: var(--six-font-size-x-large);
+  font-weight: var(--six-font-weight-bold);
+  line-height: var(--six-line-height-dense);
+  padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);
+}
+
+.dialog__close {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: var(--six-font-size-x-large);
+  padding: 0 var(--six-spacing-x-small);
+}
+
+.dialog__body {
+  flex: 1 1 auto;
+  padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.dialog__footer {
+  flex: 0 0 auto;
+  text-align: right;
+  padding: var(--six-spacing-large);
+}
+.dialog__footer ::slotted(six-button:not(:first-of-type)) {
+  margin-left: var(--six-spacing-xx-small);
+}
+
+.dialog:not(.dialog--has-footer) .dialog__footer {
+  display: none;
+}
+
+.dialog__overlay {
+  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;
+}
+
+.dialog--open .dialog__overlay {
+  opacity: 0.8;
+}