@six-group/ui-library 0.0.0-insider.9277796 → 0.0.0-insider.98c4058

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

@@ -1,46 +1,52 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as proxyCustomElement, H, h } from './p-BAe7gBEi.js';
 
-const sixSidebarItemCss = ":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)}";
+const sixSidebarItemCss = ":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;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)}.sidebar-item:focus{outline:none}.sidebar-item:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}";
 
-const SixSidebarItem$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebarItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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 style() { return sixSidebarItemCss; }
+const SixSidebarItem$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebarItem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** 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() {
+        const Tag = this.href != null ? 'a' : 'div';
+        return (h(Tag, { key: '3e8b2d8fa4d3c5bb22f78be9ebd7af7ebd1b713c', 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", { key: 'fdf9de5e93a2a97714db69d1ebbc48dc7de6bdcc' })));
+    }
+    static get style() { return sixSidebarItemCss; }
 }, [1, "six-sidebar-item", {
-    "value": [513],
-    "selected": [516],
-    "disabled": [516]
-  }]);
+        "value": [513],
+        "selected": [516],
+        "disabled": [516],
+        "href": [513]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-sidebar-item"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-sidebar-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixSidebarItem$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-sidebar-item"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-sidebar-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixSidebarItem$1);
+            }
+            break;
+    } });
 }
 
 const SixSidebarItem = SixSidebarItem$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixSidebarItem, defineCustomElement };
+//# sourceMappingURL=six-sidebar-item.js.map
 
 //# sourceMappingURL=six-sidebar-item.js.map

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

@@ -1 +1 @@
-{"file":"six-sidebar-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,6aAA6a;;MCc1bA,gBAAc;;;;;iBAEQ,EAAE;oBAGC,KAAK;oBAGL,KAAK;;EAEzC,MAAM;IACJ,QACE,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,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IAE/C,eAAa,CACT,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSidebarItem"],"sources":["./src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","./src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.sidebar-item {\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\n  padding: 8px 8px 16px 16px;\n  font-family: var(--six-font-family);\n\n  &:hover:not(.sidebar-item--disabled) {\n    color: var(--six-color-web-rock-600);\n  }\n\n  &.sidebar-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &.sidebar-item--selected {\n    font-weight: var(--six-font-weight-bold);\n  }\n}\n","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"],"version":3}
+{"file":"six-sidebar-item.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ylBAAylB;;MCctmBA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAAC,CAAA,CAAA;AAL3B,IAAA,WAAA,GAAA;;;;;AAO2B,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE;;AAGV,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;;AAGhB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA0B1C;IAlBC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,GAAG,GAAG,GAAG,KAAK;QAC3C,QACE,CAAA,CAAC,GAAG,EAAA,EAAA,GAAA,EAAA,0CAAA,EACF,KAAK,EAAE;AACL,gBAAA,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,EACA,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,eAAA,EAChC,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAA,EAE/C,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["SixSidebarItem","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\na {\n  text-decoration: none;\n  display: block;\n}\n\n.sidebar-item {\n  padding: 8px 8px 16px 16px;\n  font-size: 0.9rem;\n  color: var(--six-sidebar-color);\n  cursor: pointer;\n  font-family: var(--six-font-family);\n\n  &:hover:not(.sidebar-item--disabled) {\n    color: var(--six-color-web-rock-600);\n  }\n\n  &.sidebar-item--disabled {\n    outline: none;\n    color: var(--six-input-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &.sidebar-item--selected {\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus-visible {\n    outline: var(--six-focus-ring);\n    outline-offset: var(--six-focus-ring-offset);\n  }\n}\n","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"],"version":3}

package/dist/components/six-sidebar.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixSidebar extends Components.SixSidebar, HTMLElement {}
 export const SixSidebar: {
-  prototype: SixSidebar;
-  new (): SixSidebar;
+    prototype: SixSidebar;
+    new (): SixSidebar;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-sidebar.js

@@ -1,205 +1,233 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { s as scrollIntoView } from './scroll.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { s as scrollIntoView } from './p-BY6hIEFX.js';
 
-const sixSidebarCss = ":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}";
+const sixSidebarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{border-right:1px solid var(--six-color-web-rock-300)}.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}";
 
-const isSidebarItemGroup = (node) => node.tagName.toLowerCase() === 'six-sidebar-item-group';
-const SixSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebar extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sixShow = createEvent(this, "six-sidebar-show", 7);
-    this.sixAfterShow = createEvent(this, "six-sidebar-after-show", 7);
-    this.sixHide = createEvent(this, "six-sidebar-hide", 7);
-    this.sixAfterHide = createEvent(this, "six-sidebar-after-hide", 7);
-    this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus", 7);
-    this.willShow = false;
-    this.willHide = 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;
-          }
+const isSidebarItemGroup = (node) => { var _a; return ((_a = node === null || node === void 0 ? void 0 : node.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'six-sidebar-item-group'; };
+const SixSidebar$1 = /*@__PURE__*/ proxyCustomElement(class SixSidebar extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.sixShow = createEvent(this, "six-sidebar-show");
+        this.sixAfterShow = createEvent(this, "six-sidebar-after-show");
+        this.sixHide = createEvent(this, "six-sidebar-hide");
+        this.sixAfterHide = createEvent(this, "six-sidebar-after-hide");
+        this.sixInitialFocus = createEvent(this, "six-sidebar-initial-focus");
+        this.willShow = false;
+        this.willHide = false;
+        this.isVisible = false;
+        /** Sidebar position */
+        this.position = 'left';
+        /** Indicates whether 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;
+            if (this.sidebar != null) {
+                scrollIntoView(clickedMenuItem, this.sidebar);
+            }
+            const closeAllSiblingsBySiblingProperty = (getSibling) => {
+                var _a;
+                let node = clickedMenuItem;
+                while (getSibling(node) != null) {
+                    node = getSibling(node);
+                    if (isSidebarItemGroup(node)) {
+                        const detailsElement = (_a = node === null || node === void 0 ? void 0 : node.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
+                        if (detailsElement != null) {
+                            detailsElement.open = false;
+                        }
+                    }
+                }
+            };
+            // close all previous siblings
+            closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : node.previousElementSibling);
+            // close all further siblings
+            closeAllSiblingsBySiblingProperty((node) => node === null || node === void 0 ? void 0 : 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();
         }
-      };
-      // close all previous siblings
-      closeAllSiblingsBySiblingProperty((node) => node.previousElementSibling);
-      // close all further siblings
-      closeAllSiblingsBySiblingProperty((node) => node.nextElementSibling);
-    };
-    this.isVisible = false;
-    this.position = 'left';
-    this.open = false;
-    this.width = '16rem';
-    this.toggled = false;
-  }
-  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;
+    componentDidRender() {
+        this.setupTogglableMenuItems();
     }
-    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);
+    disconnectedCallback() {
+        var _a;
+        (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);
     }
-    menuItems.forEach((details) => (details.selectableEmpty = true));
-  }
-  /** Toggles whether the sidebar should be shown or hidden */
-  async toggle() {
-    if (this.willShow || this.willHide) {
-      return;
+    setupTogglableMenuItems() {
+        if (!this.toggled || this.sidebar == null)
+            return;
+        this.markAllMenuItemsAsSelectableEmpty();
+        this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);
+    }
+    markAllMenuItemsAsSelectableEmpty() {
+        var _a;
+        // 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 = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const nodes = (slot === null || slot === void 0 ? void 0 : 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();
+            if ((node === null || node === void 0 ? void 0 : node.shadowRoot) == null) {
+                continue;
+            }
+            // 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));
     }
-    if (this.open) {
-      await this.hide();
+    /** 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();
+        }
     }
-    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;
     }
-  }
-  /** Shows the sidebar */
-  async show() {
-    if (this.willShow) {
-      return;
+    /** 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;
     }
-    const sixShow = this.sixShow.emit();
-    if (sixShow.defaultPrevented) {
-      this.open = false;
-      return;
+    /** Allows to select a menu item programmatically by index */
+    async selectItemByIndex(index) {
+        if (this.sidebar == null)
+            return;
+        const slot = this.sidebar.querySelector('slot');
+        const menuItemsOnRootLevel = ((slot === null || slot === void 0 ? void 0 : slot.assignedElements()) || []).flatMap((el) => {
+            var _a;
+            const detailsElement = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('six-details');
+            if (detailsElement == null) {
+                return [];
+            }
+            return [detailsElement];
+        });
+        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();
     }
-    this.willShow = true;
-    this.isVisible = true;
-    this.open = true;
-  }
-  /** Hides the sidebar */
-  async hide() {
-    if (this.willHide) {
-      return;
+    /** Allows to select a menu item programmatically by name */
+    async selectItemByName(value) {
+        var _a, _b, _c;
+        const slot = (_a = this.sidebar) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const sidebarItemGroups = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+        if (sidebarItemGroups == null) {
+            return;
+        }
+        const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => (el === null || el === void 0 ? void 0 : el.name) === value);
+        const selectedItem = (_c = (_b = sidebarItemGroups.at(indexOfSelectedElement)) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('six-details');
+        await (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.show());
     }
-    const sixHide = this.sixHide.emit();
-    if (sixHide.defaultPrevented) {
-      this.open = true;
-      return;
+    resetTransitionVariables() {
+        this.isVisible = this.open;
+        this.willShow = false;
+        this.willHide = false;
+        this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
-    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;
+    render() {
+        return (h("host", { key: 'd6f8f2a691dd7f27e77f22b7f2573838d6b2cf69', class: "six-sidebar" }, h("div", { key: 'a3e77edcaf638583bf453318348cd6264db508be', 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", { key: 'b44803e4c77c5fc27ed0d25a61b4b9e028b22cf7' }))));
     }
-    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 watchers() { return {
-    "open": ["handleOpenChange"]
-  }; }
-  static get style() { return sixSidebarCss; }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+    static get style() { return sixSidebarCss; }
 }, [1, "six-sidebar", {
-    "position": [1],
-    "open": [1540],
-    "width": [1],
-    "toggled": [4],
-    "isVisible": [32],
-    "toggle": [64],
-    "show": [64],
-    "hide": [64],
-    "selectItemByIndex": [64],
-    "selectItemByName": [64]
-  }]);
+        "position": [1],
+        "open": [1540],
+        "width": [1],
+        "toggled": [4],
+        "isVisible": [32],
+        "toggle": [64],
+        "show": [64],
+        "hide": [64],
+        "selectItemByIndex": [64],
+        "selectItemByName": [64]
+    }, undefined, {
+        "open": ["handleOpenChange"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["six-sidebar"];
-  components.forEach(tagName => { switch (tagName) {
-    case "six-sidebar":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SixSidebar$1);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["six-sidebar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "six-sidebar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SixSidebar$1);
+            }
+            break;
+    } });
 }
 
 const SixSidebar = SixSidebar$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixSidebar, defineCustomElement };
+//# sourceMappingURL=six-sidebar.js.map
 
 //# sourceMappingURL=six-sidebar.js.map

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

@@ -1 +1 @@
-{"file":"six-sidebar.js","mappings":"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","names":["SixSidebar"],"sources":["./src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","./src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.sidebar {\n  &__container {\n    // scroll\n    height: 100%;\n    overflow: auto;\n\n    &.sidebar--open {\n      box-shadow: var(--six-elevation-1dp);\n    }\n\n    &:not(.sidebar--visible) {\n      @include hidden;\n    }\n  }\n\n  &--left {\n    color: var(--six-sidebar-color);\n    background-color: var(--six-sidebar-background-color);\n    // collapse\n    transition: var(--six-transition-medium) margin-left;\n    // six background\n    background-size: 300vw 70%;\n    background-position: bottom;\n    background-repeat: no-repeat;\n  }\n\n  &--right {\n    // collapse\n    transition: var(--six-transition-medium) margin-right;\n  }\n\n  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n  &--open {\n    &.sidebar--left {\n      margin-right: 2px;\n    }\n\n    &.sidebar--right {\n      margin-left: 2px;\n    }\n  }\n}\n","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"],"version":3}
+{"file":"six-sidebar.js","mappings":"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","names":["SixSidebar","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n  display: block;\n  height: 100%;\n}\n\n.sidebar {\n  &__container {\n    // scroll\n    height: 100%;\n    overflow: auto;\n\n    &.sidebar--open {\n      border-right: 1px solid var(--six-color-web-rock-300);\n    }\n\n    &:not(.sidebar--visible) {\n      @include hidden;\n    }\n  }\n\n  &--left {\n    color: var(--six-sidebar-color);\n    background-color: var(--six-sidebar-background-color);\n    // collapse\n    transition: var(--six-transition-medium) margin-left;\n    // six background\n    background-size: 300vw 70%;\n    background-position: bottom;\n    background-repeat: no-repeat;\n  }\n\n  &--right {\n    // collapse\n    transition: var(--six-transition-medium) margin-right;\n  }\n\n  // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n  &--open {\n    &.sidebar--left {\n      margin-right: 2px;\n    }\n\n    &.sidebar--right {\n      margin-left: 2px;\n    }\n  }\n}\n","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 | null): boolean =>\n  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  private willShow = false;\n  private willHide = false;\n\n  private sidebar?: HTMLElement;\n\n  @State() isVisible = false;\n\n  /** Sidebar position */\n  @Prop() position: 'left' | 'right' = 'left';\n\n  /** Indicates whether 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 = '16rem';\n\n  /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n  @Prop() toggled = 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  private 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: Event) => {\n    const clickedMenuItem = event.target as HTMLElement;\n    if (this.sidebar != null) {\n      scrollIntoView(clickedMenuItem, this.sidebar);\n    }\n\n    const closeAllSiblingsBySiblingProperty = (\n      getSibling: (node: Element | null | undefined) => Element | null | undefined\n    ) => {\n      let node: Element | null | undefined = clickedMenuItem;\n      while (getSibling(node) != null) {\n        node = getSibling(node);\n        if (isSidebarItemGroup(node)) {\n          const detailsElement = node?.shadowRoot?.querySelector('six-details');\n          if (detailsElement != null) {\n            detailsElement.open = false;\n          }\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 || this.sidebar == null) return;\n    this.markAllMenuItemsAsSelectableEmpty();\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      if (node?.shadowRoot == null) {\n        continue;\n      }\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    if (this.sidebar == null) return;\n\n    const slot = this.sidebar.querySelector('slot');\n    const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n      const detailsElement = el.shadowRoot?.querySelector('six-details');\n      if (detailsElement == null) {\n        return [];\n      }\n      return [detailsElement];\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    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    if (sidebarItemGroups == null) {\n      return;\n    }\n\n    const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n    const selectedItem = sidebarItemGroups.at(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"],"version":3}

package/dist/components/six-spinner.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface SixSpinner extends Components.SixSpinner, HTMLElement {}
 export const SixSpinner: {
-  prototype: SixSpinner;
-  new (): SixSpinner;
+    prototype: SixSpinner;
+    new (): SixSpinner;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/six-spinner.js

@@ -1,8 +1,9 @@
-import { S as SixSpinner$1, d as defineCustomElement$1 } from './six-spinner2.js';
+import { S as SixSpinner$1, d as defineCustomElement$1 } from './p-Dgi7xz4X.js';
 
 const SixSpinner = SixSpinner$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { SixSpinner, defineCustomElement };
+//# sourceMappingURL=six-spinner.js.map
 
 //# sourceMappingURL=six-spinner.js.map