@govtechsg/sgds-web-component 3.13.1 → 3.13.2-rc.0

package/react/components/Sidebar/sgds-sidebar.cjs.js

@@ -0,0 +1,344 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sidebar = require('./sidebar.cjs.js');
+var context = require('@lit/context');
+var sidebarContext = require('./sidebar-context.cjs.js');
+var watch = require('../../utils/watch.cjs.js');
+
+/**
+ * @summary Sidebar is a collapsible navigation component that displays menu items and groups.
+ * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.
+ * The sidebar coordinates selection and navigation across nested items using context providers and custom events.
+ *
+ * Features:
+ * - Collapsible state for space-saving layouts with icon-only mode
+ * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups
+ * - Keyboard navigation with full ARIA support for accessibility
+ * - Programmatic link navigation support with anchor elements
+ * - Active item tracking and synchronized state management
+ *
+ * Keyboard Navigation:
+ * - Arrow Up/Down: Navigate between sidebar items and groups
+ * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays
+ * - Enter/Space: Activate focused item or toggle group
+ * - Tab: Standard focus management to interactive elements
+ *
+ * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
+ * @slot brandName - Insert brand/logo content in sidebar header
+ *
+ * @fires sgds-select - Emitted when a sidebar item or group is selected.
+ *   Event detail: { activeItem: string } - name of the selected item
+ *
+ */
+const SGDS_SIDEBAR_GROUP = "sgds-sidebar-group";
+class SgdsSidebar extends sgdsElement["default"] {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls whether the sidebar is collapsed or expanded.
+         * When true, the sidebar is in collapsed state showing only icons.
+         * When false, the sidebar is expanded displaying full labels and content.
+         * Affects all child items by toggling visibility of labels and adjusting spacing.
+         * @attribute collapsed
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * The name of the currently active sidebar item or group.
+         * Reflects the selected item and allows external control of sidebar selection.
+         * Used to synchronize sidebar state with external navigation state or programmatic selection.
+         * When set, the corresponding item with matching `name` attribute will be highlighted as active.
+         * @attribute active
+         * @type {string}
+         * @default ""
+         */
+        this.active = "";
+        /** @internal Tracks the currently active group and provides it via context to all child elements */
+        this._sidebarActiveGroup = null;
+        /** @internal Tracks the currently active item and provides it via context to all child elements */
+        this._sidebarActiveItem = null;
+        /** @internal Provides the list of items shown in the drawer overlay */
+        this._drawerItems = [];
+        /** @internal Indicates whether a drawer overlay is currently open */
+        this._showDrawer = false;
+        this._handleClickOutOfElement = (e) => {
+            if (!this._sidebarActiveGroup)
+                return;
+            if (!e.composedPath().includes(this)) {
+                this._showDrawer = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "navigation");
+        this.setAttribute("aria-label", "Main navigation");
+        this.updateComplete.then(() => {
+            this.addItemListeners();
+            this._handleActive();
+            document.addEventListener("click", this._handleClickOutOfElement);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this._handleClickOutOfElement);
+    }
+    _handleCollapsed() {
+        this._sidebarCollapsed = this.collapsed;
+    }
+    /**
+     * Handles changes to the active item selection.
+     * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.
+     * For root-level items with children, opens the drawer overlay.
+     * For nested items, expands parent groups and opens the appropriate drawer if needed.
+     * @private
+     * @returns {void}
+     */
+    _handleActiveItem() {
+        if (!this._sidebarActiveItem)
+            return;
+        const childLevel = this._sidebarActiveItem._childLevel;
+        this._sidebarActiveItem._selected = true;
+        if (childLevel === 0) {
+            // First level of navigation, check if need to open drawer or not.
+            if (this._sidebarActiveItem._childElements.length > 0) {
+                this._setNodesToDrawer(this._sidebarActiveItem);
+            }
+            else {
+                this._revertNodesToParent();
+            }
+        }
+        else {
+            // when nested, we will find the top level of parent
+            let parentEle = this._sidebarActiveItem.parentElement;
+            while (parentEle._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {
+                if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {
+                    if (parentEle._childLevel === 0) {
+                        // when active item not in drawer, set nodes into drawer.
+                        if (!parentEle.classList.contains("sidebar-nested-overlay")) {
+                            this._setNodesToDrawer(parentEle);
+                        }
+                    }
+                    parentEle._selected = true;
+                    parentEle._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active
+                    parentEle = parentEle.parentElement;
+                }
+            }
+            if (this._sidebarActiveGroup) {
+                this._sidebarActiveGroup._selected = true;
+            }
+        }
+    }
+    _handleActive() {
+        // Return early if active is empty
+        if (!this.active) {
+            this._sidebarActiveItem = null;
+            return;
+        }
+        this._sidebarActiveItem = this._getActiveChild();
+    }
+    _getActiveChild() {
+        const findByName = (elements) => {
+            var _a;
+            for (const element of elements) {
+                if (element.name === this.active) {
+                    return element;
+                }
+                if ((_a = element._childElements) === null || _a === void 0 ? void 0 : _a.length) {
+                    const found = findByName(element._childElements);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return findByName(this._defaultNodes);
+    }
+    /**
+     * Manages the drawer overlay content based on the selected parent item.
+     * If element is provided: Opens drawer for that element's children.
+     * If element is undefined: Closes drawer and reverts items to their parent.
+     * @private
+     * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.
+     * @returns {void}
+     */
+    _setNodesToDrawer(element) {
+        if (!element)
+            return;
+        // when there is element, we will revert the nodes of the previous active group before setting new value into the active group
+        if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {
+            this._revertNodesToParent();
+        }
+        this._sidebarActiveGroup = element;
+        // when there is an active group set, always set new menu items
+        this._drawerItems = []; // always set to empty to prevent duplicate
+        const menuItems = this._sidebarActiveGroup.querySelectorAll(":scope > sgds-sidebar-group, :scope > sgds-sidebar-item");
+        menuItems.forEach(e => {
+            this._drawerItems.push(e);
+        });
+    }
+    /**
+     * Reverts nested items back to their original parent element.
+     * Clears the drawer overlay content and updates selected attributes.
+     * Called when closing the drawer or switching to a different parent item.
+     * @private
+     * @param {SgdsSidebarItem} element - The parent item to return nodes to
+     * @returns {void}
+     */
+    _revertNodesToParent() {
+        if (this._sidebarActiveGroup) {
+            this._drawerItems.forEach(e => {
+                this._sidebarActiveGroup.append(e);
+            });
+            this._drawerItems = [];
+        }
+        this._sidebarActiveGroup = null;
+    }
+    /**
+     * Attaches event listeners to all direct child sidebar items.
+     * Handles item selection events and drawer overlay state management.
+     * Manages emitting sgds-select custom events for external components.
+     * @private
+     * @returns {void}
+     */
+    addItemListeners() {
+        const items = this.querySelectorAll("sgds-sidebar-item");
+        const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);
+        const allItems = [...items, ...groups];
+        allItems.forEach(item => {
+            item.addEventListener("i-sgds-click", (e) => {
+                const element = e.detail.element;
+                if (element === this._sidebarActiveGroup) {
+                    // just toggle drawer
+                    this._showDrawer = !this._showDrawer;
+                }
+                else {
+                    if (this.active !== element.name) {
+                        this.active = element.name;
+                        allItems.forEach(item => (item._selected = false));
+                    }
+                    if (element._childElements.length > 0) {
+                        this._showDrawer = true;
+                    }
+                    else {
+                        this._showDrawer = false;
+                        // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves
+                        const anchorLink = item.querySelector(":scope > a");
+                        if (anchorLink)
+                            anchorLink.click();
+                    }
+                    // Emit sgds-select event when an item is selected
+                    this.emit("sgds-select", { detail: { activeItem: element.name } });
+                }
+            });
+        });
+    }
+    /**
+     * Toggles the sidebar between collapsed and expanded states.
+     * Updates the collapsed property and emits sgds-sidebar-toggle event.
+     *
+     * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state
+     * @returns {void}
+     */
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
+    render() {
+        var _a, _b;
+        return lit.html `
+      <div
+        class=${classMap_js.classMap({
+            sidebar: true,
+            "sidebar--expanded": !this._sidebarCollapsed,
+            "sidebar--collapsed": this._sidebarCollapsed
+        })}
+      >
+        <div class="sidebar-wrapper">
+          <div class="sidebar-header">
+            <div class="sidebar-brand-name">
+              <slot name="brandName"></slot>
+            </div>
+
+            <sgds-icon-button
+              name=${this._sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse"}
+              variant="ghost"
+              tone="neutral"
+              size="sm"
+              @click=${this.toggleCollapsed}
+              aria-label=${this._sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              aria-expanded=${!this._sidebarCollapsed}
+            ></sgds-icon-button>
+          </div>
+
+          <nav class="sidebar-content" role="navigation" aria-label="Main navigation" aria-activedescendant=${((_a = this._sidebarActiveItem) === null || _a === void 0 ? void 0 : _a.name) || ""}>
+            <slot></slot>
+          </nav>
+        </div>
+
+          <div
+            class=${classMap_js.classMap({
+            "sidebar-nested-overlay": true,
+            show: this._showDrawer
+        })}
+            role="dialog"
+            aria-label=${((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.title) ? `Nested items for ${this._sidebarActiveGroup.title}` : ""}
+          >
+            ${this._drawerItems}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebar.styles = [...sgdsElement["default"].styles, sidebar["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSidebar.prototype, "collapsed", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsSidebar.prototype, "active", void 0);
+tslib.__decorate([
+    context.provide({ context: sidebarContext.SidebarActiveGroup }),
+    decorators_js.state()
+], SgdsSidebar.prototype, "_sidebarActiveGroup", void 0);
+tslib.__decorate([
+    context.provide({ context: sidebarContext.SidebarCollapsed }),
+    decorators_js.state()
+], SgdsSidebar.prototype, "_sidebarCollapsed", void 0);
+tslib.__decorate([
+    context.provide({ context: sidebarContext.SidebarActiveItem }),
+    decorators_js.state()
+], SgdsSidebar.prototype, "_sidebarActiveItem", void 0);
+tslib.__decorate([
+    context.provide({ context: sidebarContext.SidebarDrawerItems }),
+    decorators_js.state()
+], SgdsSidebar.prototype, "_drawerItems", void 0);
+tslib.__decorate([
+    context.provide({ context: sidebarContext.SidebarDrawerOpen }),
+    decorators_js.state()
+], SgdsSidebar.prototype, "_showDrawer", void 0);
+tslib.__decorate([
+    decorators_js.queryAssignedElements()
+], SgdsSidebar.prototype, "_defaultNodes", void 0);
+tslib.__decorate([
+    watch.watch("collapsed")
+], SgdsSidebar.prototype, "_handleCollapsed", null);
+tslib.__decorate([
+    watch.watch("_sidebarActiveItem")
+], SgdsSidebar.prototype, "_handleActiveItem", null);
+tslib.__decorate([
+    watch.watch("active")
+], SgdsSidebar.prototype, "_handleActive", null);
+
+exports.SgdsSidebar = SgdsSidebar;
+exports["default"] = SgdsSidebar;
+//# sourceMappingURL=sgds-sidebar.cjs.js.map

package/react/components/Sidebar/sgds-sidebar.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidebar.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarStyle from \"./sidebar.css\";\n\nimport { provide } from \"@lit/context\";\nimport {\n  SidebarCollapsed,\n  SidebarActiveItem,\n  SidebarActiveGroup,\n  SidebarDrawerItems,\n  SidebarDrawerOpen\n} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\n\n/**\n * @summary Sidebar is a collapsible navigation component that displays menu items and groups.\n * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.\n * The sidebar coordinates selection and navigation across nested items using context providers and custom events.\n *\n * Features:\n * - Collapsible state for space-saving layouts with icon-only mode\n * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups\n * - Keyboard navigation with full ARIA support for accessibility\n * - Programmatic link navigation support with anchor elements\n * - Active item tracking and synchronized state management\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between sidebar items and groups\n * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays\n * - Enter/Space: Activate focused item or toggle group\n * - Tab: Standard focus management to interactive elements\n *\n * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot brandName - Insert brand/logo content in sidebar header\n *\n * @fires sgds-select - Emitted when a sidebar item or group is selected.\n *   Event detail: { activeItem: string } - name of the selected item\n *\n */\n\nconst SGDS_SIDEBAR_GROUP = \"sgds-sidebar-group\";\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  /**\n   * Controls whether the sidebar is collapsed or expanded.\n   * When true, the sidebar is in collapsed state showing only icons.\n   * When false, the sidebar is expanded displaying full labels and content.\n   * Affects all child items by toggling visibility of labels and adjusting spacing.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The name of the currently active sidebar item or group.\n   * Reflects the selected item and allows external control of sidebar selection.\n   * Used to synchronize sidebar state with external navigation state or programmatic selection.\n   * When set, the corresponding item with matching `name` attribute will be highlighted as active.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Tracks the collapsed state and provides it via context to all child elements */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed: boolean;\n\n  /** @internal Tracks the currently active item and provides it via context to all child elements */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides the list of items shown in the drawer overlay */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems = [];\n\n  /** @internal Indicates whether a drawer overlay is currently open */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"navigation\");\n    this.setAttribute(\"aria-label\", \"Main navigation\");\n\n    this.updateComplete.then(() => {\n      this.addItemListeners();\n      this._handleActive();\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n  }\n\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    this._sidebarCollapsed = this.collapsed;\n  }\n\n  /**\n   * Handles changes to the active item selection.\n   * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.\n   * For root-level items with children, opens the drawer overlay.\n   * For nested items, expands parent groups and opens the appropriate drawer if needed.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem() {\n    if (!this._sidebarActiveItem) return;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 0) {\n      // First level of navigation, check if need to open drawer or not.\n      if (this._sidebarActiveItem._childElements.length > 0) {\n        this._setNodesToDrawer(this._sidebarActiveItem as SgdsSidebarGroup);\n      } else {\n        this._revertNodesToParent();\n      }\n    } else {\n      // when nested, we will find the top level of parent\n      let parentEle = this._sidebarActiveItem.parentElement as SgdsSidebarGroup;\n\n      while (parentEle._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n        if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n          if (parentEle._childLevel === 0) {\n            // when active item not in drawer, set nodes into drawer.\n            if (!parentEle.classList.contains(\"sidebar-nested-overlay\")) {\n              this._setNodesToDrawer(parentEle);\n            }\n          }\n\n          parentEle._selected = true;\n\n          parentEle._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active\n          parentEle = parentEle.parentElement as SgdsSidebarGroup;\n        }\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  @watch(\"active\")\n  _handleActive() {\n    // Return early if active is empty\n    if (!this.active) {\n      this._sidebarActiveItem = null;\n      return;\n    }\n\n    this._sidebarActiveItem = this._getActiveChild();\n  }\n\n  private _getActiveChild() {\n    const findByName = (elements: SidebarElement[]): SidebarElement | null => {\n      for (const element of elements) {\n        if (element.name === this.active) {\n          return element;\n        }\n        if (element._childElements?.length) {\n          const found = findByName(element._childElements);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    return findByName(this._defaultNodes);\n  }\n\n  /**\n   * Manages the drawer overlay content based on the selected parent item.\n   * If element is provided: Opens drawer for that element's children.\n   * If element is undefined: Closes drawer and reverts items to their parent.\n   * @private\n   * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.\n   * @returns {void}\n   */\n  private _setNodesToDrawer(element: SgdsSidebarGroup) {\n    if (!element) return;\n\n    // when there is element, we will revert the nodes of the previous active group before setting new value into the active group\n    if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {\n      this._revertNodesToParent();\n    }\n\n    this._sidebarActiveGroup = element;\n\n    // when there is an active group set, always set new menu items\n    this._drawerItems = []; // always set to empty to prevent duplicate\n    const menuItems = this._sidebarActiveGroup.querySelectorAll(\n      \":scope > sgds-sidebar-group, :scope > sgds-sidebar-item\"\n    );\n    menuItems.forEach(e => {\n      this._drawerItems.push(e);\n    });\n  }\n\n  /**\n   * Reverts nested items back to their original parent element.\n   * Clears the drawer overlay content and updates selected attributes.\n   * Called when closing the drawer or switching to a different parent item.\n   * @private\n   * @param {SgdsSidebarItem} element - The parent item to return nodes to\n   * @returns {void}\n   */\n  private _revertNodesToParent() {\n    if (this._sidebarActiveGroup) {\n      this._drawerItems.forEach(e => {\n        this._sidebarActiveGroup.append(e);\n      });\n\n      this._drawerItems = [];\n    }\n\n    this._sidebarActiveGroup = null;\n  }\n\n  /**\n   * Attaches event listeners to all direct child sidebar items.\n   * Handles item selection events and drawer overlay state management.\n   * Manages emitting sgds-select custom events for external components.\n   * @private\n   * @returns {void}\n   */\n  private addItemListeners() {\n    const items = this.querySelectorAll(\"sgds-sidebar-item\");\n    const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);\n    const allItems = [...items, ...groups] as SidebarElement[];\n\n    allItems.forEach(item => {\n      item.addEventListener(\"i-sgds-click\", (e: CustomEvent) => {\n        const element = e.detail.element as SidebarElement;\n\n        if (element === this._sidebarActiveGroup) {\n          // just toggle drawer\n          this._showDrawer = !this._showDrawer;\n        } else {\n          if (this.active !== element.name) {\n            this.active = element.name;\n            allItems.forEach(item => (item._selected = false));\n          }\n\n          if (element._childElements.length > 0) {\n            this._showDrawer = true;\n          } else {\n            this._showDrawer = false;\n\n            // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves\n            const anchorLink = item.querySelector(\":scope > a\") as HTMLAnchorElement;\n            if (anchorLink) anchorLink.click();\n          }\n\n          // Emit sgds-select event when an item is selected\n          this.emit(\"sgds-select\", { detail: { activeItem: element.name } });\n        }\n      });\n    });\n  }\n\n  /**\n   * Toggles the sidebar between collapsed and expanded states.\n   * Updates the collapsed property and emits sgds-sidebar-toggle event.\n   *\n   * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state\n   * @returns {void}\n   */\n  private toggleCollapsed() {\n    this.collapsed = !this.collapsed;\n  }\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this._sidebarActiveGroup) return;\n\n    if (!e.composedPath().includes(this)) {\n      this._showDrawer = false;\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--expanded\": !this._sidebarCollapsed,\n          \"sidebar--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div class=\"sidebar-wrapper\">\n          <div class=\"sidebar-header\">\n            <div class=\"sidebar-brand-name\">\n              <slot name=\"brandName\"></slot>\n            </div>\n\n            <sgds-icon-button\n              name=${this._sidebarCollapsed ? \"sidebar-expand\" : \"sidebar-collapse\"}\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              @click=${this.toggleCollapsed}\n              aria-label=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n              aria-expanded=${!this._sidebarCollapsed}\n            ></sgds-icon-button>\n          </div>\n\n          <nav class=\"sidebar-content\" role=\"navigation\" aria-label=\"Main navigation\" aria-activedescendant=${\n            this._sidebarActiveItem?.name || \"\"\n          }>\n            <slot></slot>\n          </nav>\n        </div>\n\n          <div\n            class=${classMap({\n              \"sidebar-nested-overlay\": true,\n              show: this._showDrawer\n            })}\n            role=\"dialog\"\n            aria-label=${this._sidebarActiveGroup?.title ? `Nested items for ${this._sidebarActiveGroup.title}` : \"\"}\n          >\n            ${this._drawerItems}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["SgdsElement","html","classMap","sidebarStyle","__decorate","property","provide","SidebarActiveGroup","state","SidebarCollapsed","SidebarActiveItem","SidebarDrawerItems","SidebarDrawerOpen","queryAssignedElements","watch"],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AAEH,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AAC1C,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;AAGE;;;;;;;;AAQG;QACyC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAE9D;;;;;;;;AAQG;QACwC,IAAM,CAAA,MAAA,GAAG,EAAE,CAAC;;QAKvD,IAAmB,CAAA,mBAAA,GAA4B,IAAI,CAAC;;QAU5C,IAAkB,CAAA,kBAAA,GAA0B,IAAI,CAAC;;QAKjD,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;;QAKlB,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AA6MpB,QAAA,IAAA,CAAA,wBAAwB,GAAG,CAAC,CAAa,KAAI;YACnD,IAAI,CAAC,IAAI,CAAC,mBAAmB;gBAAE,OAAO;YAEtC,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;aAC1B;AACH,SAAC,CAAC;KAiDH;IA9PC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;AACxC,QAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;AAEnD,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,MAAK;YAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;AACpE,SAAC,CAAC,CAAC;KACJ;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,wBAAwB,CAAC,CAAC;KACtE;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,SAAS,CAAC;KACzC;AAED;;;;;;;AAOG;IAEH,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,kBAAkB;YAAE,OAAO;AAErC,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC;AACvD,QAAA,IAAI,CAAC,kBAAkB,CAAC,SAAS,GAAG,IAAI,CAAC;AAEzC,QAAA,IAAI,UAAU,KAAK,CAAC,EAAE;;YAEpB,IAAI,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;AACrD,gBAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAsC,CAAC,CAAC;aACrE;iBAAM;gBACL,IAAI,CAAC,oBAAoB,EAAE,CAAC;aAC7B;SACF;aAAM;;AAEL,YAAA,IAAI,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,aAAiC,CAAC;AAE1E,YAAA,OAAO,SAAS,CAAC,WAAW,IAAI,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE;gBAC3F,IAAI,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,EAAE;AAC1D,oBAAA,IAAI,SAAS,CAAC,WAAW,KAAK,CAAC,EAAE;;wBAE/B,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,wBAAwB,CAAC,EAAE;AAC3D,4BAAA,IAAI,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;yBACnC;qBACF;AAED,oBAAA,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;oBAE3B,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,WAAW,GAAG,CAAC,CAAC;AAChD,oBAAA,SAAS,GAAG,SAAS,CAAC,aAAiC,CAAC;iBACzD;aACF;AAED,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC;aAC3C;SACF;KACF;IAGD,aAAa,GAAA;;AAEX,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,OAAO;SACR;AAED,QAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;KAClD;IAEO,eAAe,GAAA;AACrB,QAAA,MAAM,UAAU,GAAG,CAAC,QAA0B,KAA2B;;AACvE,YAAA,KAAK,MAAM,OAAO,IAAI,QAAQ,EAAE;gBAC9B,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,EAAE;AAChC,oBAAA,OAAO,OAAO,CAAC;iBAChB;AACD,gBAAA,IAAI,MAAA,OAAO,CAAC,cAAc,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,EAAE;oBAClC,MAAM,KAAK,GAAG,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AACjD,oBAAA,IAAI,KAAK;AAAE,wBAAA,OAAO,KAAK,CAAC;iBACzB;aACF;AACD,YAAA,OAAO,IAAI,CAAC;AACd,SAAC,CAAC;AAEF,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACvC;AAED;;;;;;;AAOG;AACK,IAAA,iBAAiB,CAAC,OAAyB,EAAA;AACjD,QAAA,IAAI,CAAC,OAAO;YAAE,OAAO;;QAGrB,IAAI,IAAI,CAAC,mBAAmB,IAAI,OAAO,KAAK,IAAI,CAAC,mBAAmB,EAAE;YACpE,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC7B;AAED,QAAA,IAAI,CAAC,mBAAmB,GAAG,OAAO,CAAC;;AAGnC,QAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QACvB,MAAM,SAAS,GAAG,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CACzD,yDAAyD,CAC1D,CAAC;AACF,QAAA,SAAS,CAAC,OAAO,CAAC,CAAC,IAAG;AACpB,YAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAC,CAAC,CAAC;KACJ;AAED;;;;;;;AAOG;IACK,oBAAoB,GAAA;AAC1B,QAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5B,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAG;AAC5B,gBAAA,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACrC,aAAC,CAAC,CAAC;AAEH,YAAA,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;SACxB;AAED,QAAA,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;KACjC;AAED;;;;;;AAMG;IACK,gBAAgB,GAAA;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;QACzD,MAAM,QAAQ,GAAG,CAAC,GAAG,KAAK,EAAE,GAAG,MAAM,CAAqB,CAAC;AAE3D,QAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,IAAG;YACtB,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAc,KAAI;AACvD,gBAAA,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAyB,CAAC;AAEnD,gBAAA,IAAI,OAAO,KAAK,IAAI,CAAC,mBAAmB,EAAE;;AAExC,oBAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;iBACtC;qBAAM;oBACL,IAAI,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,IAAI,EAAE;AAChC,wBAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;AAC3B,wBAAA,QAAQ,CAAC,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC;qBACpD;oBAED,IAAI,OAAO,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;AACrC,wBAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;qBACzB;yBAAM;AACL,wBAAA,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;;wBAGzB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC,YAAY,CAAsB,CAAC;AACzE,wBAAA,IAAI,UAAU;4BAAE,UAAU,CAAC,KAAK,EAAE,CAAC;qBACpC;;AAGD,oBAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;iBACpE;AACH,aAAC,CAAC,CAAC;AACL,SAAC,CAAC,CAAC;KACJ;AAED;;;;;;AAMG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KAClC;IAUD,MAAM,GAAA;;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,mBAAmB,EAAE,CAAC,IAAI,CAAC,iBAAiB;YAC5C,oBAAoB,EAAE,IAAI,CAAC,iBAAiB;SAC7C,CAAC,CAAA;;;;;;;;;qBASW,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,kBAAkB,CAAA;;;;AAI5D,qBAAA,EAAA,IAAI,CAAC,eAAe,CAAA;2BAChB,IAAI,CAAC,iBAAiB,GAAG,gBAAgB,GAAG,kBAAkB,CAAA;8BAC3D,CAAC,IAAI,CAAC,iBAAiB,CAAA;;;;AAKzC,4GAAA,EAAA,CAAA,MAAA,IAAI,CAAC,kBAAkB,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAI,KAAI,EACnC,CAAA;;;;;;AAMU,kBAAA,EAAAA,oBAAQ,CAAC;AACf,YAAA,wBAAwB,EAAE,IAAI;YAC9B,IAAI,EAAE,IAAI,CAAC,WAAW;SACvB,CAAC,CAAA;;AAEW,uBAAA,EAAA,CAAA,MAAA,IAAI,CAAC,mBAAmB,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAK,IAAG,oBAAoB,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,GAAG,EAAE,CAAA;;AAEtG,YAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;;KAI1B,CAAC;KACH;;AAlTM,WAAM,CAAA,MAAA,GAAG,CAAC,GAAGF,sBAAW,CAAC,MAAM,EAAEG,kBAAY,CAAvC,CAAyC;AAWVC,gBAAA,CAAA;IAA3CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAWnBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAa,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKvDD,gBAAA,CAAA;AAFC,IAAAE,eAAO,CAAC,EAAE,OAAO,EAAEC,iCAAkB,EAAE,CAAC;AACxC,IAAAC,mBAAK,EAAE;AAC4C,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK5CJ,gBAAA,CAAA;AAFP,IAAAE,eAAO,CAAC,EAAE,OAAO,EAAEG,+BAAgB,EAAE,CAAC;AACtC,IAAAD,mBAAK,EAAE;AAC2B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK3BJ,gBAAA,CAAA;AAFP,IAAAE,eAAO,CAAC,EAAE,OAAO,EAAEI,gCAAiB,EAAE,CAAC;AACvC,IAAAF,mBAAK,EAAE;AACiD,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKjDJ,gBAAA,CAAA;AAFP,IAAAE,eAAO,CAAC,EAAE,OAAO,EAAEK,iCAAkB,EAAE,CAAC;AACxC,IAAAH,mBAAK,EAAE;AACkB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKlBJ,gBAAA,CAAA;AAFP,IAAAE,eAAO,CAAC,EAAE,OAAO,EAAEM,gCAAiB,EAAE,CAAC;AACvC,IAAAJ,mBAAK,EAAE;AACoB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIpBJ,gBAAA,CAAA;AADP,IAAAS,mCAAqB,EAAE;AACiB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoBzCT,gBAAA,CAAA;IADCU,WAAK,CAAC,WAAW,CAAC;AAGlB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAWDV,gBAAA,CAAA;IADCU,WAAK,CAAC,oBAAoB,CAAC;AAsC3B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA,CAAA;AAGDV,gBAAA,CAAA;IADCU,WAAK,CAAC,QAAQ,CAAC;AASf,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,eAAA,EAAA,IAAA,CAAA;;;;;"}