/**
 * Copyright Aquera Inc 2025
 *
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styles } from './nile-inline-sidebar-panel-group.css';
import NileElement from '../internal/nile-element';
/**
 * Layout container that positions a `nile-inline-sidebar` beside one or more
 * `nile-inline-sidebar-panel` elements. Handles panel switching when sidebar
 * items are clicked.
 *
 * @tag nile-inline-sidebar-panel-group
 *
 * @attr placement - Mirror of the sidebar's placement. Controls flex direction.
 *
 * @slot sidebar - Slot for the `nile-inline-sidebar` element.
 * @slot - Default slot for `nile-inline-sidebar-panel` elements.
 *
 * @csspart base - The outer flex container.
 * @csspart sidebar-container - Wrapper around the sidebar slot.
 * @csspart panel-container - Wrapper around the panel slot.
 */
let NileInlineSidebarPanelGroup = class NileInlineSidebarPanelGroup extends NileElement {
    constructor() {
        super(...arguments);
        /** Mirrors the sidebar's placement to control layout direction. */
        this.placement = 'left';
        this.handleSidebarItemClick = (event) => {
            const detail = event.detail;
            const panelName = detail?.item?.panel;
            if (!panelName)
                return;
            this.activatePanel(panelName);
        };
    }
    static get styles() {
        return [styles];
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('nile-click', this.handleSidebarItemClick);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('nile-click', this.handleSidebarItemClick);
    }
    get panels() {
        if (!this.defaultSlot)
            return [];
        return this.defaultSlot
            .assignedElements({ flatten: true })
            .filter((el) => el.tagName.toLowerCase() === 'nile-inline-sidebar-panel');
    }
    /** Activate a panel by name, deactivating all others. */
    activatePanel(name) {
        const allPanels = this.panels;
        allPanels.forEach(panel => {
            panel.active = panel.name === name;
        });
        this.emit('nile-panel-change', { panel: name });
    }
    render() {
        return html `
      <div class="panel-group" part="base">
        <div class="sidebar-container" part="sidebar-container">
          <slot name="sidebar"></slot>
        </div>
        <div class="panel-container" part="panel-container">
          <slot
            @slotchange=${() => this.requestUpdate()}
          ></slot>
        </div>
      </div>
    `;
    }
};
__decorate([
    property({ type: String, reflect: true })
], NileInlineSidebarPanelGroup.prototype, "placement", void 0);
__decorate([
    query('slot:not([name])')
], NileInlineSidebarPanelGroup.prototype, "defaultSlot", void 0);
NileInlineSidebarPanelGroup = __decorate([
    customElement('nile-inline-sidebar-panel-group')
], NileInlineSidebarPanelGroup);
export { NileInlineSidebarPanelGroup };
export default NileInlineSidebarPanelGroup;
//# sourceMappingURL=nile-inline-sidebar-panel-group.js.map