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

package/dist/collection/components/six-tab-group/six-tab-group.css

@@ -0,0 +1,155 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+/**
+ * @prop --tabs-border-color: The color of the border that separates tabs.
+ */
+:host {
+  --tabs-border-color: var(--six-tab-border-color);
+  display: block;
+}
+
+.tab-group {
+  display: flex;
+  border: solid 1px transparent;
+  border-radius: 0;
+}
+.tab-group .tab-group__tabs {
+  display: flex;
+  position: relative;
+}
+.tab-group .tab-group__active-tab-indicator {
+  position: absolute;
+  transition: var(--six-transition-fast) transform ease, var(--six-transition-fast) width ease;
+}
+.tab-group:not(.focus-visible) ::slotted(six-tab) {
+  --focus-ring: none;
+}
+
+.tab-group--has-scroll-controls .tab-group__nav-container {
+  position: relative;
+  padding: 0 var(--six-spacing-x-large);
+}
+
+.tab-group__scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--six-spacing-x-large);
+}
+
+.tab-group__scroll-button--left {
+  left: 0;
+}
+
+.tab-group__scroll-button--right {
+  right: 0;
+}
+
+.tab-group--top {
+  flex-direction: column;
+}
+.tab-group--top .tab-group__nav-container {
+  order: 1;
+}
+.tab-group--top .tab-group__nav {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tab-group--top .tab-group__nav::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.tab-group--top .tab-group__tabs {
+  flex: 1 1 auto;
+  position: relative;
+  flex-direction: row;
+  border-bottom: solid var(--six-tab-border-width) var(--tabs-border-color);
+}
+.tab-group--top .tab-group__active-tab-indicator {
+  bottom: -2px;
+  border-bottom: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);
+}
+.tab-group--top .tab-group__body {
+  order: 2;
+}
+
+.tab-group--bottom {
+  flex-direction: column;
+}
+.tab-group--bottom .tab-group__nav-container {
+  order: 2;
+}
+.tab-group--bottom .tab-group__nav {
+  display: flex;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tab-group--bottom .tab-group__nav::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+.tab-group--bottom .tab-group__tabs {
+  flex: 1 1 auto;
+  position: relative;
+  flex-direction: row;
+  border-top: solid var(--six-tab-border-width) var(--tabs-border-color);
+}
+.tab-group--bottom .tab-group__active-tab-indicator {
+  top: -2px;
+  border-top: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);
+}
+.tab-group--bottom .tab-group__body {
+  order: 1;
+}
+
+.tab-group--left {
+  flex-direction: row;
+}
+.tab-group--left .tab-group__nav-container {
+  order: 1;
+}
+.tab-group--left .tab-group__tabs {
+  flex: 0 0 auto;
+  flex-direction: column;
+  border-right: solid var(--six-tab-border-width) var(--tabs-border-color);
+}
+.tab-group--left .tab-group__active-tab-indicator {
+  right: -2px;
+  border-right: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);
+}
+.tab-group--left .tab-group__body {
+  flex: 1 1 auto;
+  order: 2;
+}
+
+.tab-group--right {
+  flex-direction: row;
+}
+.tab-group--right .tab-group__nav-container {
+  order: 2;
+}
+.tab-group--right .tab-group__tabs {
+  flex: 0 0 auto;
+  flex-direction: column;
+  border-left: solid var(--six-tab-border-width) var(--tabs-border-color);
+}
+.tab-group--right .tab-group__active-tab-indicator {
+  left: -2px;
+  border-left: solid var(--six-tab-border-width-active) var(--six-tab-border-color-active);
+}
+.tab-group--right .tab-group__body {
+  flex: 1 1 auto;
+  order: 1;
+}

package/dist/collection/components/six-tab-group/six-tab-group.js

@@ -0,0 +1,362 @@
+import { Component, Element, Event, Method, Prop, State, Watch, h } from '@stencil/core';
+import { getOffset } from '../../utils/offset';
+import { scrollIntoView } from '../../utils/scroll';
+import { focusVisible } from '../../utils/focus-visible';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot nav - Used for grouping tabs in the tab group.
+ * @slot - Used for grouping tab panels in the tab group.
+ *
+ * @part base - The component's base wrapper.
+ * @part nav - The tab group navigation container.
+ * @part tabs - The container that wraps the slotted tabs.
+ * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tabs container.
+ * @part body - The tab group body where tab panels are slotted in.
+ * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.
+ */
+export class SixTabGroup {
+  constructor() {
+    this.hasScrollControls = false;
+    /** The placement of the tabs. */
+    this.placement = 'top';
+    /** Disables the scroll arrows that appear when tabs overflow. */
+    this.noScrollControls = false;
+  }
+  handlePlacementChange() {
+    this.syncActiveTabIndicator();
+  }
+  handleNoScrollControlsChange() {
+    this.updateScrollControls();
+  }
+  connectedCallback() {
+    this.handleClick = this.handleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleScrollLeft = this.handleScrollLeft.bind(this);
+    this.handleScrollRight = this.handleScrollRight.bind(this);
+    this.syncActiveTabIndicator = this.syncActiveTabIndicator.bind(this);
+  }
+  componentDidLoad() {
+    // Set initial tab state when the tabs first become visible
+    const observer = new IntersectionObserver((entries, observer) => {
+      if (entries[0].intersectionRatio > 0) {
+        this.setAriaLabels();
+        this.setActiveTab(this.getActiveTab() || this.getAllTabs()[0], false);
+        observer.unobserve(entries[0].target);
+      }
+    });
+    observer.observe(this.host);
+    focusVisible.observe(this.tabGroup);
+    this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());
+    this.resizeObserver.observe(this.nav);
+    requestAnimationFrame(() => this.updateScrollControls());
+    // Update aria labels if the DOM changes
+    this.mutationObserver = new MutationObserver((mutations) => {
+      if (mutations.some((mutation) => {
+        return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName);
+      })) {
+        setTimeout(() => this.setAriaLabels());
+      }
+    });
+    this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    focusVisible.unobserve(this.tabGroup);
+    this.resizeObserver.unobserve(this.nav);
+  }
+  /** Shows the specified tab panel. */
+  async show(panel) {
+    const tabs = this.getAllTabs();
+    const tab = tabs.find((el) => el.panel === panel);
+    if (tab) {
+      this.setActiveTab(tab);
+    }
+  }
+  getAllTabs(includeDisabled = false) {
+    const slot = this.tabs.querySelector('slot');
+    return [...slot.assignedElements()].filter((el) => {
+      return includeDisabled
+        ? el.tagName.toLowerCase() === 'six-tab'
+        : el.tagName.toLowerCase() === 'six-tab' && !el.disabled;
+    });
+  }
+  getAllPanels() {
+    const slot = this.body.querySelector('slot');
+    return [...slot.assignedElements()].filter((el) => el.tagName.toLowerCase() === 'six-tab-panel');
+  }
+  getActiveTab() {
+    return this.getAllTabs().find((el) => el.active);
+  }
+  handleClick(event) {
+    const target = event.target;
+    const tab = target.closest('six-tab');
+    const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this.host) {
+      return false;
+    }
+    if (tab) {
+      this.setActiveTab(tab);
+    }
+  }
+  handleKeyDown(event) {
+    const target = event.target;
+    const tab = target.closest('six-tab');
+    const tabGroup = tab === null || tab === void 0 ? void 0 : tab.closest('six-tab-group');
+    // Ensure the target tab is in this tab group
+    if (tabGroup !== this.host) {
+      return false;
+    }
+    // Activate a tab
+    if (['Enter', ' '].includes(event.key)) {
+      if (tab) {
+        this.setActiveTab(tab);
+        event.preventDefault();
+      }
+    }
+    // Move focus left or right
+    if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {
+      const activeEl = document.activeElement;
+      if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {
+        const tabs = this.getAllTabs();
+        let index = tabs.indexOf(activeEl);
+        if (event.key === 'Home') {
+          index = 0;
+        }
+        else if (event.key === 'End') {
+          index = tabs.length - 1;
+        }
+        else if (event.key === 'ArrowLeft') {
+          index = Math.max(0, index - 1);
+        }
+        else if (event.key === 'ArrowRight') {
+          index = Math.min(tabs.length - 1, index + 1);
+        }
+        tabs[index].setFocus({ preventScroll: true });
+        if (['top', 'bottom'].includes(this.placement)) {
+          scrollIntoView(tabs[index], this.nav, 'horizontal');
+        }
+        event.preventDefault();
+      }
+    }
+  }
+  handleScrollLeft() {
+    this.nav.scroll({
+      left: this.nav.scrollLeft - this.nav.clientWidth,
+      behavior: 'smooth',
+    });
+  }
+  handleScrollRight() {
+    this.nav.scroll({
+      left: this.nav.scrollLeft + this.nav.clientWidth,
+      behavior: 'smooth',
+    });
+  }
+  updateScrollControls() {
+    this.hasScrollControls = this.noScrollControls
+      ? false
+      : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;
+  }
+  setActiveTab(tab, emitEvents = true) {
+    if (tab && tab !== this.activeTab && !tab.disabled) {
+      const previousTab = this.activeTab;
+      this.activeTab = tab;
+      // Sync tabs and panels
+      this.getAllTabs().map((el) => (el.active = el === this.activeTab));
+      this.getAllPanels().map((el) => (el.active = el.name === this.activeTab.panel));
+      this.syncActiveTabIndicator();
+      if (['top', 'bottom'].includes(this.placement)) {
+        scrollIntoView(this.activeTab, this.nav, 'horizontal');
+      }
+      // Emit events
+      if (emitEvents) {
+        if (previousTab) {
+          this.sixTabHide.emit({ name: previousTab.panel });
+        }
+        this.sixTabShow.emit({ name: this.activeTab.panel });
+      }
+    }
+  }
+  setAriaLabels() {
+    const tabs = this.getAllTabs();
+    const panels = this.getAllPanels();
+    // Link each tab with its corresponding panel
+    tabs.map((tab) => {
+      const panel = panels.find((el) => el.name === tab.panel);
+      if (panel) {
+        tab.setAttribute('aria-controls', panel.getAttribute('id'));
+        panel.setAttribute('aria-labelledby', tab.getAttribute('id'));
+      }
+    });
+  }
+  syncActiveTabIndicator() {
+    const tab = this.getActiveTab();
+    if (tab) {
+      this.activeTabIndicator.style.display = 'block';
+    }
+    else {
+      this.activeTabIndicator.style.display = 'none';
+      return;
+    }
+    const width = tab.clientWidth;
+    const height = tab.clientHeight;
+    const offset = getOffset(tab, this.nav);
+    const offsetTop = offset.top + this.nav.scrollTop;
+    const offsetLeft = offset.left + this.nav.scrollLeft;
+    switch (this.placement) {
+      case 'top':
+      case 'bottom':
+        this.activeTabIndicator.style.width = `${width}px`;
+        this.activeTabIndicator.style.height = null;
+        this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;
+        break;
+      case 'left':
+      case 'right':
+        this.activeTabIndicator.style.width = null;
+        this.activeTabIndicator.style.height = `${height}px`;
+        this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;
+        break;
+    }
+  }
+  render() {
+    return (h("div", { part: "base", ref: (el) => (this.tabGroup = el), class: {
+        'tab-group': true,
+        // Placements
+        'tab-group--top': this.placement === 'top',
+        'tab-group--bottom': this.placement === 'bottom',
+        'tab-group--left': this.placement === 'left',
+        'tab-group--right': this.placement === 'right',
+        'tab-group--has-scroll-controls': this.hasScrollControls,
+      }, onClick: this.handleClick, onKeyDown: this.handleKeyDown },
+      h("div", { class: "tab-group__nav-container" },
+        this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--left", exportparts: "base:scroll-button", name: "chevron_left", onClick: this.handleScrollLeft })),
+        h("div", { ref: (el) => (this.nav = el), key: "nav", part: "nav", class: "tab-group__nav" },
+          h("div", { ref: (el) => (this.tabs = el), part: "tabs", class: "tab-group__tabs", role: "tablist" },
+            h("div", { ref: (el) => (this.activeTabIndicator = el), part: "active-tab-indicator", class: "tab-group__active-tab-indicator" }),
+            h("slot", { name: "nav", onSlotchange: this.syncActiveTabIndicator }))),
+        this.hasScrollControls && (h("six-icon-button", { class: "tab-group__scroll-button tab-group__scroll-button--right", exportparts: "base:scroll-button", name: "chevron_right", onClick: this.handleScrollRight }))),
+      h("div", { ref: (el) => (this.body = el), part: "body", class: "tab-group__body" },
+        h("slot", { onSlotchange: this.syncActiveTabIndicator }))));
+  }
+  static get is() { return "six-tab-group"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-tab-group.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-tab-group.css"]
+  }; }
+  static get properties() { return {
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'top' | 'bottom' | 'left' | 'right'",
+        "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The placement of the tabs."
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "noScrollControls": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disables the scroll arrows that appear when tabs overflow."
+      },
+      "attribute": "no-scroll-controls",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasScrollControls": {}
+  }; }
+  static get events() { return [{
+      "method": "sixTabShow",
+      "name": "six-tab-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a tab is shown."
+      },
+      "complexType": {
+        "original": "SixTabShowPayload",
+        "resolved": "SixTabShowPayload",
+        "references": {
+          "SixTabShowPayload": {
+            "location": "local"
+          }
+        }
+      }
+    }, {
+      "method": "sixTabHide",
+      "name": "six-tab-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when a tab is hidden."
+      },
+      "complexType": {
+        "original": "SixTabHidePayload",
+        "resolved": "SixTabHidePayload",
+        "references": {
+          "SixTabHidePayload": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "show": {
+      "complexType": {
+        "signature": "(panel: string) => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Shows the specified tab panel.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "placement",
+      "methodName": "handlePlacementChange"
+    }, {
+      "propName": "noScrollControls",
+      "methodName": "handleNoScrollControlsChange"
+    }]; }
+}

package/dist/collection/components/six-tab-panel/six-tab-panel.css

@@ -0,0 +1,17 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: block;
+  font-family: var(--six-font-family);
+}
+
+.tab-panel {
+  border: solid 1px transparent;
+  padding: 20px 20px;
+}

package/dist/collection/components/six-tab-panel/six-tab-panel.js

@@ -0,0 +1,75 @@
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+let id = 0;
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @slot - The tab panel's content.
+ *
+ * @part base - The component's base wrapper.
+ */
+export class SixTabPanel {
+  constructor() {
+    this.componentId = `tab-panel-${++id}`;
+    /** The tab panel's name. */
+    this.name = '';
+    /** When true, the tab panel will be shown. */
+    this.active = false;
+  }
+  render() {
+    return (
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    h(Host, { id: this.host.id || this.componentId, style: { display: this.active ? 'block' : 'none' } },
+      h("div", { part: "base", class: "tab-panel", role: "tabpanel", "aria-selected": this.active ? 'true' : 'false', "aria-hidden": this.active ? 'false' : 'true' },
+        h("slot", null))));
+  }
+  static get is() { return "six-tab-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["six-tab-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["six-tab-panel.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The tab panel's name."
+      },
+      "attribute": "name",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, the tab panel will be shown."
+      },
+      "attribute": "active",
+      "reflect": true,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -0,0 +1,44 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: inherit;
+}
+
+:host {
+  display: table;
+  border-collapse: collapse;
+  user-select: none;
+  border: none;
+  width: 100%;
+  height: 100%;
+}
+
+:host([loading]) {
+  border-collapse: separate;
+}
+
+:host([striped]) six-table-row:nth-child(odd):not(:hover),
+:host([striped]) ::slotted(six-table-row:nth-child(odd):not(:hover)) {
+  background-color: var(--six-table-row-background-color);
+}
+
+:host(:not(striped)) ::slotted(six-table-row) {
+  border-bottom: solid 1px var(--six-table-row-border-color);
+}
+
+.loading {
+  position: absolute;
+  background-color: var(--six-table-background-color);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.loading six-spinner {
+  top: calc(50% - 0.5em);
+  left: 50%;
+  transform: scale(3);
+}