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

package/dist/collection/collection-manifest.json

@@ -0,0 +1,69 @@
+{
+  "entries": [
+    "./components/six-item-picker/six-item-picker.js",
+    "./components/six-timepicker/six-timepicker.js",
+    "./components/six-datepicker/six-datepicker.js",
+    "./components/six-menu/six-menu.js",
+    "./components/six-dropdown/six-dropdown.js",
+    "./components/six-file-list-item/six-file-list-item.js",
+    "./components/six-file-upload/six-file-upload.js",
+    "./components/six-form/six-form.js",
+    "./components/six-header/six-header.js",
+    "./components/six-language-switcher/six-language-switcher.js",
+    "./components/six-stage-indicator/six-stage-indicator.js",
+    "./components/six-root/six-root.js",
+    "./components/six-search-field/six-search-field.js",
+    "./components/six-select/six-select.js",
+    "./components/six-tab-group/six-tab-group.js",
+    "./components/six-table-header-cell/six-table-header-cell.js",
+    "./components/six-alert/six-alert.js",
+    "./components/six-avatar/six-avatar.js",
+    "./components/six-badge/six-badge.js",
+    "./components/six-button/six-button.js",
+    "./components/six-card/six-card.js",
+    "./components/six-checkbox/six-checkbox.js",
+    "./components/six-details/six-details.js",
+    "./components/six-dialog/six-dialog.js",
+    "./components/six-drawer/six-drawer.js",
+    "./components/six-error-page/six-error-page.js",
+    "./components/six-file-list/six-file-list.js",
+    "./components/six-footer/six-footer.js",
+    "./components/six-group-label/six-group-label.js",
+    "./components/six-icon/six-icon.js",
+    "./components/six-icon-button/six-icon-button.js",
+    "./components/six-input/six-input.js",
+    "./components/six-layout-grid/six-layout-grid.js",
+    "./components/six-main-container/six-main-container.js",
+    "./components/six-menu-divider/six-menu-divider.js",
+    "./components/six-menu-item/six-menu-item.js",
+    "./components/six-menu-label/six-menu-label.js",
+    "./components/six-picto/six-picto.js",
+    "./components/six-progress-bar/six-progress-bar.js",
+    "./components/six-progress-ring/six-progress-ring.js",
+    "./components/six-radio/six-radio.js",
+    "./components/six-range/six-range.js",
+    "./components/six-sidebar/six-sidebar.js",
+    "./components/six-sidebar-item/six-sidebar-item.js",
+    "./components/six-sidebar-item-group/six-sidebar-item-group.js",
+    "./components/six-spinner/six-spinner.js",
+    "./components/six-switch/six-switch.js",
+    "./components/six-tab/six-tab.js",
+    "./components/six-tab-panel/six-tab-panel.js",
+    "./components/six-table/six-table.js",
+    "./components/six-table-cell/six-table-cell.js",
+    "./components/six-table-header/six-table-header.js",
+    "./components/six-table-row/six-table-row.js",
+    "./components/six-tag/six-tag.js",
+    "./components/six-textarea/six-textarea.js",
+    "./components/six-tile/six-tile.js",
+    "./components/six-tooltip/six-tooltip.js",
+    "./wrappers/set-attributes/set-attributes.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.14.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,109 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --box-shadow: The alert's box shadow.
+ */
+:host {
+  display: contents;
+  margin: 0;
+}
+
+.alert {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  background-color: var(--six-color-white);
+  border: solid 1px var(--six-color-web-rock-200);
+  border-top-width: 3px;
+  border-radius: var(--six-border-radius-medium);
+  box-shadow: var(--box-shadow);
+  font-family: var(--six-font-sans);
+  font-size: var(--six-font-size-small);
+  font-weight: var(--six-font-weight-normal);
+  line-height: 1.6;
+  color: var(--six-color-web-rock-700);
+  opacity: 0;
+  transform: scale(0.9);
+  transition: var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;
+  margin: inherit;
+}
+.alert:not(.alert--visible) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.alert--open {
+  opacity: 1;
+  transform: none;
+}
+
+.alert__icon {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: var(--six-font-size-large);
+}
+.alert__icon ::slotted(*) {
+  margin-left: var(--six-spacing-large);
+}
+
+.alert--primary {
+  border-top-color: var(--six-color-web-rock-900);
+}
+.alert--primary .alert__icon {
+  color: var(--six-color-web-rock-900);
+}
+
+.alert--success {
+  border-top-color: var(--six-color-success-600);
+}
+.alert--success .alert__icon {
+  color: var(--six-color-success-600);
+}
+
+.alert--info {
+  border-top-color: var(--six-color-action-500);
+}
+.alert--info .alert__icon {
+  color: var(--six-color-action-500);
+}
+
+.alert--warning {
+  border-top-color: var(--six-color-warning-800);
+}
+.alert--warning .alert__icon {
+  color: var(--six-color-warning-800);
+}
+
+.alert--danger {
+  border-top-color: var(--six-color-danger-900);
+}
+.alert--danger .alert__icon {
+  color: var(--six-color-danger-900);
+}
+
+.alert__message {
+  flex: 1 1 auto;
+  padding: var(--six-spacing-large);
+  overflow: hidden;
+}
+
+.alert__close {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  font-size: var(--six-font-size-large);
+  padding-right: var(--six-spacing-medium);
+}

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

@@ -0,0 +1,366 @@
+import { Component, Element, Event, Method, Prop, State, Watch, h } from '@stencil/core';
+const toastStack = Object.assign(document.createElement('div'), { className: 'six-toast-stack' });
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The alert's content.
+ * @slot icon - An icon to show in the alert.
+ *
+ * @part base - The component's base wrapper.
+ * @part icon - The container that wraps the alert icon.
+ * @part message - The alert message.
+ * @part close-button - The close button.
+ */
+export class SixAlert {
+  constructor() {
+    this.isVisible = false;
+    /** Indicates whether or not the alert is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Set to true to make the alert closable. */
+    this.closable = false;
+    /** The type of alert. */
+    this.type = 'primary';
+    /**
+     * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the
+     * alert before it closes (e.g. moves the mouse over it), the timer will restart.
+     */
+    this.duration = Infinity;
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  handleDurationChange() {
+    this.restartAutoHide();
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      this.show();
+    }
+  }
+  /** Shows the alert. */
+  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.isVisible = true;
+    this.open = true;
+    if (this.duration < Infinity) {
+      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  /** Hides the alert */
+  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;
+    }
+    clearTimeout(this.autoHideTimeout);
+    this.isVisible = false;
+    this.open = false;
+  }
+  /**
+   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when
+   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by
+   * calling this method again. The returned promise will resolve after the alert is hidden.
+   */
+  async toast() {
+    return new Promise((resolve) => {
+      if (!toastStack.parentElement) {
+        document.body.append(toastStack);
+      }
+      toastStack.append(this.host);
+      requestAnimationFrame(() => this.show());
+      this.host.addEventListener('six-alert-after-hide', () => {
+        this.host.remove();
+        resolve();
+        // Remove the toast stack from the DOM when there are no more alerts
+        if (toastStack.querySelector('six-alert') === null) {
+          toastStack.remove();
+        }
+      }, { once: true });
+    });
+  }
+  handleCloseClick() {
+    this.hide();
+  }
+  handleMouseMove() {
+    this.restartAutoHide();
+  }
+  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('alert')) {
+      this.isVisible = this.open;
+      this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+    }
+  }
+  restartAutoHide() {
+    clearTimeout(this.autoHideTimeout);
+    if (this.open && this.duration < Infinity) {
+      this.autoHideTimeout = setTimeout(() => this.hide(), this.duration);
+    }
+  }
+  render() {
+    return (h("div", { ref: (el) => (this.alert = el), part: "base", class: {
+        alert: true,
+        'alert--open': this.open,
+        'alert--visible': this.isVisible,
+        'alert--closable': this.closable,
+        'alert--primary': this.type === 'primary',
+        'alert--success': this.type === 'success',
+        'alert--info': this.type === 'info',
+        'alert--warning': this.type === 'warning',
+        'alert--danger': this.type === 'danger',
+      }, role: "alert", "aria-live": "assertive", "aria-atomic": "true", "aria-hidden": this.open ? 'false' : 'true', onMouseMove: this.handleMouseMove, onTransitionEnd: this.handleTransitionEnd },
+      h("span", { part: "icon", class: "alert__icon" },
+        h("slot", { name: "icon" })),
+      h("span", { part: "message", class: "alert__message" },
+        h("slot", null)),
+      this.closable && (h("span", { class: "alert__close" },
+        h("six-icon-button", { name: "clear", exportparts: "base:close-button", onClick: this.handleCloseClick })))));
+  }
+  static get is() { return "six-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-alert.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-alert.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 alert is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to make the alert closable."
+      },
+      "attribute": "closable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'success' | 'info' | 'warning' | 'danger'",
+        "resolved": "\"danger\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The type of alert."
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'primary'"
+    },
+    "duration": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the\nalert before it closes (e.g. moves the mouse over it), the timer will restart."
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "Infinity"
+    }
+  }; }
+  static get states() { return {
+    "isVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-alert-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the alert 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-alert-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the alert opens and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-alert-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the alert 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-alert-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the alert 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 alert.",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the alert",
+        "tags": []
+      }
+    },
+    "toast": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\ndismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\ncalling this method again. The returned promise will resolve after the alert is hidden.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }, {
+      "propName": "duration",
+      "methodName": "handleDurationChange"
+    }]; }
+}

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

@@ -0,0 +1,74 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --size: The size of the avatar.
+ */
+:host {
+  display: inline-block;
+  --size: 2rem;
+}
+
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  background-color: var(--six-avatar-background-color);
+  font-family: var(--six-font-sans);
+  font-size: calc(var(--size) * 0.5);
+  font-weight: var(--six-font-weight-normal);
+  color: var(--six-avatar-color);
+  overflow: hidden;
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  outline: none;
+}
+.avatar:hover {
+  box-shadow: var(--six-elevation-4dp);
+}
+
+.avatar--circle {
+  border-radius: var(--six-border-radius-circle);
+}
+
+.avatar--rounded {
+  border-radius: var(--six-border-radius-medium);
+}
+
+.avatar--square {
+  border-radius: 0;
+}
+
+.avatar__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar__initials {
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+.avatar__image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}