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

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

@@ -0,0 +1,47 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+  height: 100%;
+}
+
+.sidebar__container {
+  height: 100%;
+  overflow: auto;
+}
+.sidebar__container.sidebar--open {
+  box-shadow: var(--six-elevation-1dp);
+}
+.sidebar__container:not(.sidebar--visible) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+  pointer-events: none;
+  visibility: hidden;
+}
+.sidebar--left {
+  color: var(--six-sidebar-color);
+  background-color: var(--six-sidebar-background-color);
+  transition: var(--six-transition-medium) margin-left;
+  background-size: 300vw 70%;
+  background-position: bottom;
+  background-repeat: no-repeat;
+}
+.sidebar--right {
+  transition: var(--six-transition-medium) margin-right;
+}
+.sidebar--open.sidebar--left {
+  margin-right: 2px;
+}
+.sidebar--open.sidebar--right {
+  margin-left: 2px;
+}

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

@@ -0,0 +1,455 @@
+import { Component, Event, h, Method, Prop, State, Watch } from '@stencil/core';
+import { scrollIntoView } from '../../utils/scroll';
+const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested side bar [group] items.
+ */
+export class SixSidebar {
+  constructor() {
+    this.willShow = false;
+    this.willHide = false;
+    this.isVisible = false;
+    /** Sidebar position */
+    this.position = 'left';
+    /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */
+    this.open = false;
+    /** Sidebar width */
+    this.width = '16rem';
+    /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/
+    this.toggled = false;
+    this.handleTransitionEnd = (event) => {
+      const target = event.target;
+      // Ensure we only emit one event when the target element is no longer visible
+      if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {
+        this.resetTransitionVariables();
+      }
+    };
+    this.closeSiblingDetailsOnShow = (event) => {
+      const clickedMenuItem = event.target;
+      scrollIntoView(clickedMenuItem, this.sidebar);
+      const closeAllSiblingsBySiblingProperty = (getSibling) => {
+        let node = clickedMenuItem;
+        while (getSibling(node) !== null) {
+          node = getSibling(node);
+          if (isSidebarItemGroup(node)) {
+            node.shadowRoot.querySelector('six-details').open = false;
+          }
+        }
+      };
+      // close all previous siblings
+      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
+      // close all further siblings
+      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
+    };
+  }
+  handleOpenChange() {
+    this.open ? this.show() : this.hide();
+  }
+  componentWillLoad() {
+    // Show on init if open
+    if (this.open) {
+      void 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();
+    }
+  }
+  componentDidRender() {
+    this.setupTogglableMenuItems();
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  setupTogglableMenuItems() {
+    if (!this.toggled) {
+      return;
+    }
+    this.markAllMenuItemsAsSelectableEmpty();
+    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+  }
+  markAllMenuItemsAsSelectableEmpty() {
+    // when you have a toggled menu you also want to close other menu items when you click on an item without children
+    // nice benefit this item will then also be highlighted
+    const slot = this.sidebar.querySelector('slot');
+    const nodes = slot.assignedElements();
+    // since we don't just want to make the top level empty menuItems selectable in toggled mode,
+    // but also nested items we need to traverse the whole menu item tree
+    const menuItems = [];
+    while (nodes.length > 0) {
+      const node = nodes.pop();
+      // collect six-details in the current shadowDOM
+      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');
+      menuItems.push(...menuItemsForCurrentNode);
+      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too
+      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);
+      nodes.push(...newItemGroups);
+    }
+    menuItems.forEach((details) => (details.selectableEmpty = true));
+  }
+  /** Toggles whether the sidebar should be shown or hidden */
+  async toggle() {
+    if (this.willShow || this.willHide) {
+      return;
+    }
+    if (this.open) {
+      await this.hide();
+    }
+    else {
+      await this.show();
+    }
+  }
+  /** Shows the sidebar */
+  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;
+  }
+  /** Hides the sidebar */
+  async hide() {
+    if (this.willHide) {
+      return;
+    }
+    const sixHide = this.sixHide.emit();
+    if (sixHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+    this.willHide = true;
+    this.open = false;
+  }
+  /** Allows to select a menu item programmatically by index */
+  async selectItemByIndex(index) {
+    const slot = this.sidebar.querySelector('slot');
+    const menuItemsOnRootLevel = slot
+      .assignedElements()
+      .map((el) => el.shadowRoot.querySelector('six-details'));
+    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {
+      console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`);
+      return;
+    }
+    await menuItemsOnRootLevel[index].show();
+  }
+  /** Allows to select a menu item programmatically by name */
+  async selectItemByName(value) {
+    const slot = this.sidebar.querySelector('slot');
+    const sidebarItemGroups = slot.assignedElements();
+    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');
+    await selectedItem.show();
+  }
+  resetTransitionVariables() {
+    this.isVisible = this.open;
+    this.willShow = false;
+    this.willHide = false;
+    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
+  }
+  render() {
+    return (h("host", { class: "six-sidebar" },
+      h("div", { class: {
+          sidebar__container: true,
+          'sidebar--visible': this.isVisible,
+          'sidebar--open': this.open,
+          'sidebar--left': this.position === 'left',
+          'sidebar--right': this.position === 'right',
+        }, style: {
+          width: this.width,
+          [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,
+        }, ref: (el) => (this.sidebar = el), "aria-hidden": this.open ? 'false' : 'true', onTransitionEnd: this.handleTransitionEnd },
+        h("slot", null))));
+  }
+  static get is() { return "six-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-sidebar.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-sidebar.css"]
+  }; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right'",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sidebar position"
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'left'"
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "width": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sidebar width"
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "'16rem'"
+    },
+    "toggled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define whether sidebar is toggled meaning only one menu can be open at the same time"
+      },
+      "attribute": "toggled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "isVisible": {}
+  }; }
+  static get events() { return [{
+      "method": "sixShow",
+      "name": "six-sidebar-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the sidebar 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-sidebar-after-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the sidebar opens and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixHide",
+      "name": "six-sidebar-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the sidebar 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-sidebar-after-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted after the sidebar closes and all transitions are complete."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }, {
+      "method": "sixInitialFocus",
+      "name": "six-sidebar-initial-focus",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\nallow you to set it on a different element in the sidebar, such as an input or button."
+      },
+      "complexType": {
+        "original": "EmptyPayload",
+        "resolved": "undefined",
+        "references": {
+          "EmptyPayload": {
+            "location": "import",
+            "path": "../../utils/types"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Toggles whether the sidebar should be shown or hidden",
+        "tags": []
+      }
+    },
+    "show": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the sidebar",
+        "tags": []
+      }
+    },
+    "hide": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Hides the sidebar",
+        "tags": []
+      }
+    },
+    "selectItemByIndex": {
+      "complexType": {
+        "signature": "(index: number) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLSixDetailsElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Allows to select a menu item programmatically by index",
+        "tags": []
+      }
+    },
+    "selectItemByName": {
+      "complexType": {
+        "signature": "(value: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLSixSidebarItemGroupElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Allows to select a menu item programmatically by name",
+        "tags": []
+      }
+    }
+  }; }
+  static get watchers() { return [{
+      "propName": "open",
+      "methodName": "handleOpenChange"
+    }]; }
+}

package/dist/collection/components/six-sidebar-item/six-sidebar-item.css

@@ -0,0 +1,22 @@
+:host {
+  display: block;
+}
+
+.sidebar-item {
+  font-size: 0.9rem;
+  color: var(--six-sidebar-color);
+  cursor: pointer;
+  padding: 8px 8px 16px 16px;
+  font-family: var(--six-font-family);
+}
+.sidebar-item:hover:not(.sidebar-item--disabled) {
+  color: var(--six-color-web-rock-600);
+}
+.sidebar-item.sidebar-item--disabled {
+  outline: none;
+  color: var(--six-input-color-disabled);
+  cursor: not-allowed;
+}
+.sidebar-item.sidebar-item--selected {
+  font-weight: var(--six-font-weight-bold);
+}

package/dist/collection/components/six-sidebar-item/six-sidebar-item.js

@@ -0,0 +1,89 @@
+import { Component, h, Prop } from '@stencil/core';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested displayed text of the item.
+ */
+export class SixSidebarItem {
+  constructor() {
+    /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */
+    this.value = '';
+    /** Set to true to draw the item in a selected state. */
+    this.selected = false;
+    /** Set to true to draw the sidebar item in a disabled state. */
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: {
+        'sidebar-item': true,
+        'sidebar-item--selected': this.selected,
+        'sidebar-item--disabled': this.disabled,
+      }, role: "menuitem", "aria-selected": this.selected ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' },
+      h("slot", null)));
+  }
+  static get is() { return "six-sidebar-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-sidebar-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-sidebar-item.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "selected": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the item in a selected state."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set to true to draw the sidebar item in a disabled state."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.css

@@ -0,0 +1,32 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+}
+
+.six-sidebar-item-group--childless::part(content) {
+  padding: 0 !important;
+}
+
+.six-sidebar-item-group--subgroup::part(header) {
+  background-color: transparent !important;
+}
+
+.six-sidebar-item-group__header-icon {
+  margin-left: 16px;
+  transform: translate(0px, -3px);
+}
+
+.six-sidebar-details__header {
+  display: flex;
+}
+
+.six-sidebar-details__header-icon {
+  margin-right: 1em;
+}