@six-group/ui-library 0.0.0-insider.012ddb2

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

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested displayed text of the item.
+ */
+export class SixSidebarItem {
+    constructor() {
+        this.value = '';
+        this.selected = false;
+        this.disabled = false;
+        this.href = undefined;
+    }
+    render() {
+        const Tag = this.href != null ? 'a' : 'div';
+        return (h(Tag, { class: {
+                'sidebar-item': true,
+                'sidebar-item--selected': this.selected,
+                'sidebar-item--disabled': this.disabled,
+            }, role: "menuitem", href: this.href, "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"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provide if the item should be rendered as anchor tag.\nNote, that the href is added automatically when using routerLink in Angular."
+                },
+                "attribute": "href",
+                "reflect": true
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item/six-sidebar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;qBAEQ,EAAE;wBAGC,KAAK;wBAGL,KAAK;;;IAQzC,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,EAAC,GAAG,IACF,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;aACxC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,mBACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;YAE/C,eAAa,CACT,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested displayed text of the item.\n */\n\n@Component({\n  tag: 'six-sidebar-item',\n  styleUrl: 'six-sidebar-item.scss',\n  shadow: true,\n})\nexport class SixSidebarItem {\n  /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Set to true to draw the item in a selected state. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Set to true to draw the sidebar item in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  render() {\n    const Tag = this.href != null ? 'a' : 'div';\n    return (\n      <Tag\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        href={this.href}\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </Tag>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,50 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItem } from "../six-sidebar-item";
+describe('six-sidebar-item', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [SixSidebarItem],
+            html: `<six-sidebar-item></six-sidebar-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-sidebar-item value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+    });
+    it('render disabled attribute', async () => {
+        const page = await newSpecPage({
+            components: [SixSidebarItem],
+            html: `<six-sidebar-item disabled></six-sidebar-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-sidebar-item disabled="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="true" aria-selected="false" class="sidebar-item sidebar-item--disabled" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+    });
+    it('render selected attribute', async () => {
+        const page = await newSpecPage({
+            components: [SixSidebarItem],
+            html: `<six-sidebar-item selected></six-sidebar-item>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-sidebar-item selected="" value="">
+        <mock:shadow-root>
+          <div aria-disabled="false" aria-selected="true" class="sidebar-item sidebar-item--selected" role="menuitem">
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </six-sidebar-item>
+    `);
+    });
+});
+//# sourceMappingURL=six-sidebar-item.spec.js.map

package/dist/collection/components/six-sidebar-item/test/six-sidebar-item.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item/test/six-sidebar-item.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAErD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,uCAAuC;SAC9C,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,cAAc,CAAC;YAC5B,IAAI,EAAE,gDAAgD;SACvD,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItem } from '../six-sidebar-item';\n\ndescribe('six-sidebar-item', () => {\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"false\" class=\"sidebar-item\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n\n  it('render disabled attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item disabled></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item disabled=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"true\" aria-selected=\"false\" class=\"sidebar-item sidebar-item--disabled\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n\n  it('render selected attribute', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItem],\n      html: `<six-sidebar-item selected></six-sidebar-item>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item selected=\"\" value=\"\">\n        <mock:shadow-root>\n          <div aria-disabled=\"false\" aria-selected=\"true\" class=\"sidebar-item sidebar-item--selected\" role=\"menuitem\">\n            <slot></slot>\n          </div>\n        </mock:shadow-root>\n      </six-sidebar-item>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,43 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
+.six-sidebar-item-group {
+  --horizontal-padding: var(--six-spacing-x-large);
+}
+
+.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;
+}
+
+.six-sidebar-details__link {
+  text-decoration: none;
+  display: block;
+  color: inherit;
+  width: 100%;
+}

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

@@ -0,0 +1,191 @@
+import { h } from "@stencil/core";
+import { hasSlot } from "../../utils/slot";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested sidebar [group] items.
+ */
+export class SixSidebarItemGroup {
+    constructor() {
+        this.provideSlot = (name) => {
+            if (this.summaryIconHasContent) {
+                return (h("div", { slot: name }, h("slot", { name: name })));
+            }
+            return (h("slot", { name: name, onSlotchange: () => {
+                    var _a;
+                    const slot = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${name}"]`);
+                    if (slot != null) {
+                        this.summaryIconHasContent = slot.assignedNodes().length > 0;
+                    }
+                } }));
+        };
+        this.hasItems = false;
+        this.name = '';
+        this.icon = '';
+        this.value = '';
+        this.open = false;
+        this.summaryIcon = undefined;
+        this.summaryIconHasContent = false;
+        this.href = undefined;
+    }
+    connectedCallback() {
+        this.handleSlotChange = this.handleSlotChange.bind(this);
+    }
+    componentWillLoad() {
+        this.handleSlotChange();
+    }
+    handleSlotChange() {
+        this.hasItems = hasSlot(this.host);
+    }
+    isSubgroup() {
+        var _a;
+        return ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.closest('six-sidebar-item-group')) != null;
+    }
+    renderAsHref() {
+        return this.href != null && !this.hasItems;
+    }
+    render() {
+        const element = (h("six-details", { class: {
+                'six-sidebar-item-group': true,
+                'six-sidebar-item-group--childless': !this.hasItems,
+                'six-sidebar-item-group--subgroup': this.isSubgroup(),
+            }, inline: true, open: this.open, "summary-icon": this.summaryIcon, hasContent: this.hasItems }, h("div", { slot: "summary" }, h("div", { class: "six-sidebar-details__header" }, this.icon && h("six-icon", { class: "six-sidebar-details__header-icon" }, this.icon), this.name)), this.provideSlot('summary-icon'), h("slot", null)));
+        if (this.renderAsHref()) {
+            return (h("a", { class: "six-sidebar-details__link", href: this.href }, element));
+        }
+        else {
+            return element;
+        }
+    }
+    static get is() { return "six-sidebar-item-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-sidebar-item-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-sidebar-item-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Title of item group"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon of the group"
+                },
+                "attribute": "icon",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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 of the group label. This can be used as a way to identify sidebar items when selected."
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether the sidebar is shown"
+                },
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "summaryIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom summary icon name."
+                },
+                "attribute": "summary-icon",
+                "reflect": false
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provide if the item should be rendered as anchor tag.\nNote, that the href is added automatically when using routerLink in Angular."
+                },
+                "attribute": "href",
+                "reflect": true
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasItems": {},
+            "summaryIconHasContent": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=six-sidebar-item-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.js","sourceRoot":"","sources":["../../../src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAE3C;;;;;GAKG;AAOH,MAAM,OAAO,mBAAmB;;QAgDtB,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;YACrC,IAAI,IAAI,CAAC,qBAAqB,EAAE;gBAC9B,OAAO,CACL,WAAK,IAAI,EAAE,IAAI;oBACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,CACP,CAAC;aACH;YAED,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,GAAG,EAAE;;oBACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC;oBAC1F,IAAI,IAAI,IAAI,IAAI,EAAE;wBAChB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;qBAC9D;gBACH,CAAC,GACK,CACT,CAAC;QACJ,CAAC,CAAC;wBAjEkB,KAAK;oBAGV,EAAE;oBAGF,EAAE;qBAGgB,EAAE;oBAGH,KAAK;;qCAKJ,KAAK;;;IAQtC,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAEO,UAAU;;QAChB,OAAO,CAAA,MAAA,IAAI,CAAC,IAAI,CAAC,aAAa,0CAAE,OAAO,CAAC,wBAAwB,CAAC,KAAI,IAAI,CAAC;IAC5E,CAAC;IAEO,YAAY;QAClB,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC7C,CAAC;IAwBD,MAAM;QACJ,MAAM,OAAO,GAAG,CACd,mBACE,KAAK,EAAE;gBACL,wBAAwB,EAAE,IAAI;gBAC9B,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;gBACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;aACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ;YAEzB,WAAK,IAAI,EAAC,SAAS;gBACjB,WAAK,KAAK,EAAC,6BAA6B;oBACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY;oBACtF,IAAI,CAAC,IAAI,CACN,CACF;YACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;YACjC,eAAQ,CACI,CACf,CAAC;QAEF,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;YACvB,OAAO,CACL,SAAG,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,IACjD,OAAO,CACN,CACL,CAAC;SACH;aAAM;YACL,OAAO,OAAO,CAAC;SAChB;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar-item-group',\n  styleUrl: 'six-sidebar-item-group.scss',\n  shadow: true,\n})\nexport class SixSidebarItemGroup {\n  @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n  @State() hasItems = false;\n\n  /** Title of item group */\n  @Prop() name = '';\n\n  /** Icon of the group */\n  @Prop() icon = '';\n\n  /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n  @Prop({ reflect: true }) value = '';\n\n  /** Indicates whether the sidebar is shown */\n  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon?: string;\n\n  @State() summaryIconHasContent = false;\n\n  /**\n   * Provide if the item should be rendered as anchor tag.\n   * Note, that the href is added automatically when using routerLink in Angular.\n   */\n  @Prop({ reflect: true }) href: string | undefined;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  private handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  private isSubgroup() {\n    return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n  }\n\n  private renderAsHref(): boolean {\n    return this.href != null && !this.hasItems;\n  }\n\n  private provideSlot = (name: string) => {\n    if (this.summaryIconHasContent) {\n      return (\n        <div slot={name}>\n          <slot name={name}></slot>\n        </div>\n      );\n    }\n\n    return (\n      <slot\n        name={name}\n        onSlotchange={() => {\n          const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n          if (slot != null) {\n            this.summaryIconHasContent = slot.assignedNodes().length > 0;\n          }\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    const element = (\n      <six-details\n        class={{\n          'six-sidebar-item-group': true,\n          'six-sidebar-item-group--childless': !this.hasItems,\n          'six-sidebar-item-group--subgroup': this.isSubgroup(),\n        }}\n        inline={true}\n        open={this.open}\n        summary-icon={this.summaryIcon}\n        hasContent={this.hasItems}\n      >\n        <div slot=\"summary\">\n          <div class=\"six-sidebar-details__header\">\n            {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n            {this.name}\n          </div>\n        </div>\n        {this.provideSlot('summary-icon')}\n        <slot />\n      </six-details>\n    );\n\n    if (this.renderAsHref()) {\n      return (\n        <a class=\"six-sidebar-details__link\" href={this.href}>\n          {element}\n        </a>\n      );\n    } else {\n      return element;\n    }\n  }\n}\n"]}

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js

@@ -0,0 +1,53 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { SixSidebarItemGroup } from "../six-sidebar-item-group";
+import { SixSidebarItem } from "../../six-sidebar-item/six-sidebar-item";
+describe('six-sidebar-item-group', () => {
+    it('renders empty group', async () => {
+        const page = await newSpecPage({
+            components: [SixSidebarItemGroup],
+            html: `<six-sidebar-item-group></six-sidebar-item-group>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+      </six-sidebar-item-group>
+    `);
+    });
+    it('renders group with item', async () => {
+        const page = await newSpecPage({
+            components: [SixSidebarItemGroup, SixSidebarItem],
+            html: `<six-sidebar-item-group><six-sidebar-item value="data">Data</six-sidebar-item></six-sidebar-item-group>`,
+        });
+        await page.waitForChanges();
+        expect(page.root).toEqualHtml(`
+      <six-sidebar-item-group value="">
+        <mock:shadow-root>
+          <six-details class="six-sidebar-item-group six-sidebar-item-group--childless" inline="">
+            <div slot="summary">
+              <div class="six-sidebar-details__header"></div>
+            </div>
+            <slot name="summary-icon"></slot>
+            <slot></slot>
+          </six-details>
+        </mock:shadow-root>
+        <six-sidebar-item value="data">
+          <mock:shadow-root>
+            <div aria-disabled="false" aria-selected="false" class="sidebar-item" role="menuitem">
+              <slot></slot>
+            </div>
+          </mock:shadow-root>
+          Data
+        </six-sidebar-item>
+      </six-sidebar-item-group>
+    `);
+    });
+});
+//# sourceMappingURL=six-sidebar-item-group.spec.js.map

package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar-item-group.spec.js","sourceRoot":"","sources":["../../../../src/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAC;AAEzE,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;QACnC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,mBAAmB,CAAC;YACjC,IAAI,EAAE,mDAAmD;SAC1D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;KAY7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,yBAAyB,EAAE,KAAK,IAAI,EAAE;QACvC,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,mBAAmB,EAAE,cAAc,CAAC;YACjD,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;KAoB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixSidebarItemGroup } from '../six-sidebar-item-group';\nimport { SixSidebarItem } from '../../six-sidebar-item/six-sidebar-item';\n\ndescribe('six-sidebar-item-group', () => {\n  it('renders empty group', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup],\n      html: `<six-sidebar-item-group></six-sidebar-item-group>`,\n    });\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n      </six-sidebar-item-group>\n    `);\n  });\n\n  it('renders group with item', async () => {\n    const page = await newSpecPage({\n      components: [SixSidebarItemGroup, SixSidebarItem],\n      html: `<six-sidebar-item-group><six-sidebar-item value=\"data\">Data</six-sidebar-item></six-sidebar-item-group>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.root).toEqualHtml(`\n      <six-sidebar-item-group value=\"\">\n        <mock:shadow-root>\n          <six-details class=\"six-sidebar-item-group six-sidebar-item-group--childless\" inline=\"\">\n            <div slot=\"summary\">\n              <div class=\"six-sidebar-details__header\"></div>\n            </div>\n            <slot name=\"summary-icon\"></slot>\n            <slot></slot>\n          </six-details>\n        </mock:shadow-root>\n        <six-sidebar-item value=\"data\">\n          <mock:shadow-root>\n            <div aria-disabled=\"false\" aria-selected=\"false\" class=\"sidebar-item\" role=\"menuitem\">\n              <slot></slot>\n            </div>\n          </mock:shadow-root>\n          Data\n        </six-sidebar-item>\n      </six-sidebar-item-group>\n    `);\n  });\n});\n"]}

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

@@ -0,0 +1,79 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/**
+ * @prop --track-color: The color of the spinner's track.
+ * @prop --indicator-color: The color of the spinner's indicator.
+ * @prop --stroke-width: The width of the indicator.
+ */
+:host {
+  --track-color: var(--six-progress-track-color);
+  --indicator-color: var(--six-progress-indicator-color);
+  --stroke-width: 2px;
+  display: inline-flex;
+}
+
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border-radius: 50%;
+  border: solid var(--stroke-width) var(--track-color);
+  border-top-color: var(--indicator-color);
+  border-right-color: var(--indicator-color);
+  animation: 1s linear infinite spin;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.six-spinner {
+  width: auto;
+  height: auto;
+  position: relative;
+}
+.six-spinner .six-spinner__container {
+  margin: 0;
+  transform: translateX(0);
+}
+.six-spinner .six-spinner__container svg {
+  transform: translateX(0);
+}
+.six-spinner__container {
+  position: relative;
+  margin: 0 auto;
+  top: calc(50% - 20px);
+  z-index: 1;
+}
+.six-spinner__container, .six-spinner__container svg {
+  width: 40px;
+  height: 40px;
+  display: block;
+  transform: translateX(40px);
+}
+.six-spinner path {
+  stroke-dashoffset: 70px;
+  stroke-dasharray: 70, 444;
+  -webkit-animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
+  animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
+}
+@-webkit-keyframes six-spinner {
+  to {
+    stroke-dashoffset: -444;
+  }
+}
+@keyframes six-spinner {
+  to {
+    stroke-dashoffset: -444;
+  }
+}

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

@@ -0,0 +1,59 @@
+import { h } from "@stencil/core";
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
+ *
+ * @part base - The component's base wrapper.
+ * @part svg - The spinner icon
+ */
+export class SixSpinner {
+    constructor() {
+        this.six = false;
+    }
+    renderSIXLogo() {
+        return (h("span", { class: "six-spinner", "aria-busy": "true", "aria-live": "polite" }, h("div", { class: "six-spinner__container" }, h("svg", { viewBox: "0 0 40 40", part: "svg" }, h("path", { fill: "none", stroke: "#de3919", "stroke-width": "5", "stroke-linecap": "round", d: "M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42" })))));
+    }
+    renderSimple() {
+        return h("span", { part: "base", class: "spinner", "aria-busy": "true", "aria-live": "polite" });
+    }
+    render() {
+        return this.six ? this.renderSIXLogo() : this.renderSimple();
+    }
+    static get is() { return "six-spinner"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["six-spinner.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["six-spinner.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "six": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the spinner is shown as animated SIX logo or simple spinner."
+                },
+                "attribute": "six",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=six-spinner.js.map

package/dist/collection/components/six-spinner/six-spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"six-spinner.js","sourceRoot":"","sources":["../../../src/components/six-spinner/six-spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;GAQG;AAMH,MAAM,OAAO,UAAU;;mBAEP,KAAK;;IAEX,aAAa;QACnB,OAAO,CACL,YAAM,KAAK,EAAC,aAAa,eAAW,MAAM,eAAW,QAAQ;YAC3D,WAAK,KAAK,EAAC,wBAAwB;gBACjC,WAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,KAAK;oBACjC,YACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,EACtB,CAAC,EAAC,mHAAmH,GAC/G,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;IAEO,YAAY;QAClB,OAAO,YAAM,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,SAAS,eAAW,MAAM,eAAW,QAAQ,GAAG,CAAC;IAClF,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;IAC/D,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @part base - The component's base wrapper.\n * @part svg - The spinner icon\n */\n@Component({\n  tag: 'six-spinner',\n  styleUrl: 'six-spinner.scss',\n  shadow: true,\n})\nexport class SixSpinner {\n  /** Indicates if the spinner is shown as animated SIX logo or simple spinner. */\n  @Prop() six = false;\n\n  private renderSIXLogo() {\n    return (\n      <span class=\"six-spinner\" aria-busy=\"true\" aria-live=\"polite\">\n        <div class=\"six-spinner__container\">\n          <svg viewBox=\"0 0 40 40\" part=\"svg\">\n            <path\n              fill=\"none\"\n              stroke=\"#de3919\"\n              stroke-width=\"5\"\n              stroke-linecap=\"round\"\n              d=\"M 35 5 V 35 H 5 T 5 5 H 35 V 35 H 5 V 5 H 35 V 35 H -34 V 30 H 7 A 9 8 0 0 0 14 27 L 27 14 A 8 6 0 0 1 33 12 H 42\"\n            ></path>\n          </svg>\n        </div>\n      </span>\n    );\n  }\n\n  private renderSimple() {\n    return <span part=\"base\" class=\"spinner\" aria-busy=\"true\" aria-live=\"polite\" />;\n  }\n\n  render() {\n    return this.six ? this.renderSIXLogo() : this.renderSimple();\n  }\n}\n"]}