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

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

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