'use client';
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var lit = require('lit');
var classMap_js = require('lit/directives/class-map.js');
var ifDefined_js = require('lit/directives/if-defined.js');
var sgdsElement = require('../../base/sgds-element.cjs.js');
var sidebarItem = require('./sidebar-item.cjs.js');
var sidebarElement = require('./sidebar-element.cjs.js');

/**
 * @summary Sidebar item is a selectable navigation item within the sidebar component.
 * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).
 * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.
 *
 * @slot default - Text content for the item label
 * @slot icon - Icon to display before the label text (required for level 1 and level 2)
 * @slot indicator - Display after the label text (optional). Typically used for badges or status indicators.
 *
 * See SgdsSidebar for parent component usage and selection events.
 */
class SgdsSidebarItem extends sidebarElement.SidebarElement {
    render() {
        return lit.html `
      <div
        class=${classMap_js.classMap({
            "sidebar-item": true,
            "sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,
            active: this._selected
        })}
        @click=${() => this._handleClick()}
        aria-label=${ifDefined_js.ifDefined(this.title || this.name || undefined)}
        name=${this.name}
        tabindex=${this._hidden ? -1 : 0}
        role="button"
      >
        <div class="sidebar-item-label-wrapper">
          <div>
            <!-- For level 1 and 2 -->
            ${this._childLevel <= 2 ? lit.html `<slot name="icon"></slot>` : lit.nothing}
            <span
              class=${classMap_js.classMap({
            "sidebar-item-label": true,
            offset: this._childLevel > 2
        })}
              >${this.title}</span
            >
          </div>

          <!-- For level 1 and 2 -->
          ${this._childLevel <= 2
            ? lit.html `<span class="sidebar-item-indicator">
                <slot name="indicator"></slot>
              </span>`
            : lit.nothing}
        </div>
      </div>
    `;
    }
}
SgdsSidebarItem.styles = [...sgdsElement["default"].styles, sidebarItem["default"]];

exports.SgdsSidebarItem = SgdsSidebarItem;
exports["default"] = SgdsSidebarItem;
//# sourceMappingURL=sgds-sidebar-item.cjs.js.map
