@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"six-sidebar.js","sourceRoot":"","sources":["../../../src/components/six-sidebar/six-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node: Element) => node.tagName.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n  tag: 'six-sidebar',\n  styleUrl: 'six-sidebar.scss',\n  shadow: true,\n})\nexport class SixSidebar {\n  willShow = false;\n  willHide = false;\n\n  sidebar: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether or not the sidebar is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** Sidebar width */\n  @Prop() width: string = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled: boolean = false;\n\n  /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n  @Event({ eventName: 'six-sidebar-show' }) sixShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar opens and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow: EventEmitter<EmptyPayload>;\n\n  /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n  @Event({ eventName: 'six-sidebar-hide' }) sixHide: EventEmitter<EmptyPayload>;\n\n  /** Emitted after the sidebar closes and all transitions are complete. */\n  @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide: EventEmitter<EmptyPayload>;\n\n  /**\n   * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n   * allow you to set it on a different element in the sidebar, such as an input or button.\n   */\n  @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus: EventEmitter<EmptyPayload>;\n\n  @Watch('open')\n  handleOpenChange() {\n    this.open ? this.show() : this.hide();\n  }\n\n  handleTransitionEnd = (event: TransitionEvent) => {\n    const target = event.target as HTMLElement;\n\n    // Ensure we only emit one event when the target element is no longer visible\n    if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n      this.resetTransitionVariables();\n    }\n  };\n\n  componentWillLoad() {\n    // Show on init if open\n    if (this.open) {\n      void this.show();\n      // if the sidebar is open by default we need to manually reset the\n      // transition variables since there will be no transition event\n      this.resetTransitionVariables();\n    }\n  }\n\n  componentDidRender() {\n    this.setupTogglableMenuItems();\n  }\n\n  disconnectedCallback() {\n    this.sidebar.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private closeSiblingDetailsOnShow = (event: CustomEvent<EmptyPayload>) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    scrollIntoView(clickedMenuItem, this.sidebar);\n\n    const closeAllSiblingsBySiblingProperty = (getSibling: (node: Element) => Element) => {\n      let node: Element = clickedMenuItem;\n\n      while (getSibling(node) !== null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          node.shadowRoot.querySelector('six-details').open = false;\n        }\n      }\n    };\n\n    // close all previous siblings\n    closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);\n    // close all further siblings\n    closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);\n  };\n\n  private setupTogglableMenuItems() {\n    if (!this.toggled) {\n      return;\n    }\n\n    this.markAllMenuItemsAsSelectableEmpty();\n\n    this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n  }\n\n  private markAllMenuItemsAsSelectableEmpty() {\n    // when you have a toggled menu you also want to close other menu items when you click on an item without children\n    // nice benefit this item will then also be highlighted\n    const slot = this.sidebar.querySelector('slot');\n    const nodes = slot.assignedElements();\n\n    // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n    // but also nested items we need to traverse the whole menu item tree\n    const menuItems = [];\n    while (nodes.length > 0) {\n      const node = nodes.pop();\n\n      // collect six-details in the current shadowDOM\n      const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n      menuItems.push(...menuItemsForCurrentNode);\n\n      // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n      const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n      nodes.push(...newItemGroups);\n    }\n\n    menuItems.forEach((details) => (details.selectableEmpty = true));\n  }\n\n  /** Toggles whether the sidebar should be shown or hidden */\n  @Method()\n  async toggle() {\n    if (this.willShow || this.willHide) {\n      return;\n    }\n\n    if (this.open) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  /** Shows the sidebar */\n  @Method()\n  async show() {\n    if (this.willShow) {\n      return;\n    }\n\n    const sixShow = this.sixShow.emit();\n    if (sixShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.willShow = true;\n    this.isVisible = true;\n    this.open = true;\n  }\n\n  /** Hides the sidebar */\n  @Method()\n  async hide() {\n    if (this.willHide) {\n      return;\n    }\n\n    const sixHide = this.sixHide.emit();\n    if (sixHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.willHide = true;\n    this.open = false;\n  }\n\n  /** Allows to select a menu item programmatically by index */\n  @Method()\n  async selectItemByIndex(index: number) {\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = slot\n      .assignedElements()\n      .map((el) => el.shadowRoot.querySelector('six-details'));\n\n    if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n      console.error(\n        `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n      );\n      return;\n    }\n\n    await menuItemsOnRootLevel[index].show();\n  }\n\n  /** Allows to select a menu item programmatically by name */\n  @Method()\n  async selectItemByName(value: string) {\n    const slot = this.sidebar.querySelector('slot');\n    const sidebarItemGroups = slot.assignedElements() as HTMLSixSidebarItemGroupElement[];\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups[indexOfSelectedElement].shadowRoot.querySelector('six-details');\n    await selectedItem.show();\n  }\n\n  private resetTransitionVariables() {\n    this.isVisible = this.open;\n    this.willShow = false;\n    this.willHide = false;\n    this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n  }\n\n  render() {\n    return (\n      <host class=\"six-sidebar\">\n        <div\n          class={{\n            sidebar__container: true,\n            'sidebar--visible': this.isVisible,\n            'sidebar--open': this.open,\n            'sidebar--left': this.position === 'left',\n            'sidebar--right': this.position === 'right',\n          }}\n          style={{\n            width: this.width,\n            [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n          }}\n          ref={(el) => (this.sidebar = el)}\n          aria-hidden={this.open ? 'false' : 'true'}\n          onTransitionEnd={this.handleTransitionEnd}\n        >\n          <slot />\n        </div>\n      </host>\n    );\n  }\n}\n"]}

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

@@ -1,89 +1,92 @@
-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"
-    }
-  }; }
-}
+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;
+  }
+  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"
+      }
+    };
+  }
+}
+//# 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;;iBAEQ,EAAE;oBAGC,KAAK;oBAGL,KAAK;;EAEzC,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,cAAc,EAAE,IAAI;QACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;QACvC,wBAAwB,EAAE,IAAI,CAAC,QAAQ;OACxC,EACD,IAAI,EAAC,UAAU,mBACA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAChC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;MAE/C,eAAa,CACT,CACP,CAAC;EACJ,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  render() {\n    return (\n      <div\n        class={{\n          'sidebar-item': true,\n          'sidebar-item--selected': this.selected,\n          'sidebar-item--disabled': this.disabled,\n        }}\n        role=\"menuitem\"\n        aria-selected={this.selected ? 'true' : 'false'}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,158 +1,159 @@
-import { Component, Element, h, Prop, State } from '@stencil/core';
-import { hasSlot } from '../../utils/slot';
-/**
- * @since 1.0
- * @status stable
- *
- * @slot - Used to define the nested side bar [group] items.
- */
-export class SixSidebarItemGroup {
-  constructor() {
-    this.hasItems = false;
-    /** Title of item group */
-    this.name = '';
-    /** Icon of the group */
-    this.icon = '';
-    /** 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. */
-    this.value = '';
-    this.open = false;
-    this.provideSlot = (name) => {
-      if (this.summaryIconHasContent) {
-        return (h("div", { slot: name },
-          h("slot", { name: name })));
-      }
-      return (h("slot", { name: name, onSlotchange: () => {
-          this.summaryIconHasContent =
-            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
-        } }));
-    };
-  }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
-  componentWillLoad() {
-    this.handleSlotChange();
-  }
-  handleSlotChange() {
-    this.hasItems = hasSlot(this.host);
-  }
-  isSubgroup() {
-    return !!this.host.parentElement.closest('six-sidebar-item-group');
-  }
-  render() {
-    return (h("six-details", { class: {
-        '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)));
-  }
-  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": ""
-      },
-      "attribute": "open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "summaryIcon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Custom summary icon name."
-      },
-      "attribute": "summary-icon",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "hasItems": {},
-    "summaryIconHasContent": {}
-  }; }
-  static get elementRef() { return "host"; }
-}
+import { h } from '@stencil/core';
+import { hasSlot } from '../../utils/slot';
+/**
+ * @since 1.0
+ * @status stable
+ *
+ * @slot - Used to define the nested side bar [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: () => {
+          this.summaryIconHasContent =
+            this.host.shadowRoot.querySelector(`slot[name="${name}"]`).assignedNodes().length > 0;
+        } }));
+    };
+    this.hasItems = false;
+    this.name = '';
+    this.icon = '';
+    this.value = '';
+    this.open = false;
+    this.summaryIcon = undefined;
+    this.summaryIconHasContent = undefined;
+  }
+  connectedCallback() {
+    this.handleSlotChange = this.handleSlotChange.bind(this);
+  }
+  componentWillLoad() {
+    this.handleSlotChange();
+  }
+  handleSlotChange() {
+    this.hasItems = hasSlot(this.host);
+  }
+  isSubgroup() {
+    return !!this.host.parentElement.closest('six-sidebar-item-group');
+  }
+  render() {
+    return (h("six-details", { class: {
+        '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)));
+  }
+  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": ""
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "summaryIcon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Custom summary icon name."
+        },
+        "attribute": "summary-icon",
+        "reflect": false
+      }
+    };
+  }
+  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;;IAqC9B,gBAAW,GAAG,CAAC,IAAY,EAAE,EAAE;MAC7B,IAAI,IAAI,CAAC,qBAAqB,EAAE;QAC9B,OAAO,CACL,WAAK,IAAI,EAAE,IAAI;UACb,YAAM,IAAI,EAAE,IAAI,GAAS,CACrB,CACP,CAAC;OACH;MAED,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,GAAG,EAAE;UACjB,IAAI,CAAC,qBAAqB;YACxB,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAkB,cAAc,IAAI,IAAI,CAAC,CAAC,aAAa,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;QAC3G,CAAC,GACK,CACT,CAAC;IACJ,CAAC,CAAC;oBApDkB,KAAK;gBAGV,EAAE;gBAGF,EAAE;iBAGgB,EAAE;gBAEH,KAAK;;;;EAKrC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EAC3D,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;EAC1B,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrC,CAAC;EAED,UAAU;IACR,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;EACrE,CAAC;EAwBD,MAAM;IACJ,OAAO,CACL,mBACE,KAAK,EAAE;QACL,mCAAmC,EAAE,CAAC,IAAI,CAAC,QAAQ;QACnD,kCAAkC,EAAE,IAAI,CAAC,UAAU,EAAE;OACtD,EACD,MAAM,EAAE,IAAI,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,IAAI,CAAC,WAAW,EAC9B,UAAU,EAAE,IAAI,CAAC,QAAQ;MAEzB,WAAK,IAAI,EAAC,SAAS;QACjB,WAAK,KAAK,EAAC,6BAA6B;UACrC,IAAI,CAAC,IAAI,IAAI,gBAAU,KAAK,EAAC,kCAAkC,IAAE,IAAI,CAAC,IAAI,CAAY;UACtF,IAAI,CAAC,IAAI,CACN,CACF;MACL,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC;MACjC,eAAQ,CACI,CACf,CAAC;EACJ,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 side bar [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  @Prop({ reflect: true }) open = false;\n\n  /** Custom summary icon name. */\n  @Prop() summaryIcon: string;\n\n  connectedCallback() {\n    this.handleSlotChange = this.handleSlotChange.bind(this);\n  }\n\n  componentWillLoad() {\n    this.handleSlotChange();\n  }\n\n  handleSlotChange() {\n    this.hasItems = hasSlot(this.host);\n  }\n\n  isSubgroup() {\n    return !!this.host.parentElement.closest('six-sidebar-item-group');\n  }\n\n  @State() summaryIconHasContent: boolean;\n\n  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          this.summaryIconHasContent =\n            this.host.shadowRoot.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`).assignedNodes().length > 0;\n        }}\n      ></slot>\n    );\n  };\n\n  render() {\n    return (\n      <six-details\n        class={{\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}\n"]}