/**
 * Copyright Aquera Inc 2023
 *
 * 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 } from 'lit/decorators.js';
import { styles } from './nile-side-bar.css';
import NileElement from '../internal/nile-element';
/**
 * Nile side-bar component.
 *
 * @tag nile-side-bar
 *
 * @attr position - Position of the sidebar ("left" | "right"). Defaults to "left".
 * @attr width - Expanded width of the sidebar (px).
 * @attr collapsed-width - Collapsed width of the sidebar (px).
 */
let NileSideBar = class NileSideBar extends NileElement {
    constructor() {
        super(...arguments);
        this.position = 'left';
        this.collapsed = false;
        this.fullHeight = false;
        this.width = null;
        this.collapsedWidth = null;
    }
    static get styles() {
        return [styles];
    }
    updated(changedProps) {
        super.updated(changedProps);
        if (changedProps.has('collapsed')) {
            this.querySelectorAll(`
          nile-side-bar-logo,
          nile-side-bar-footer-item,
          nile-side-bar-group-item,
          nile-side-bar-group,
          nile-side-bar-header,
          nile-side-bar-group-item-text,
          nile-side-bar-group-item-icon,
          nile-side-bar-expand
        `).forEach(el => el.toggleAttribute('collapsed', this.collapsed));
        }
        if (changedProps.has('width') && this.width !== null) {
            this.style.setProperty('--sidebar-width', `${this.width}px`);
        }
        if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {
            this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);
        }
    }
    render() {
        return html `
      <slot name="header" part="header"></slot>
      <div class="scroll-container" part="scroll-container">
        <slot></slot>
      </div>
      <slot name="footer" part="footer"></slot>
    `;
    }
};
__decorate([
    property({ type: String, reflect: true, attribute: true })
], NileSideBar.prototype, "position", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: true })
], NileSideBar.prototype, "collapsed", void 0);
__decorate([
    property({ type: Boolean, reflect: true, attribute: true })
], NileSideBar.prototype, "fullHeight", void 0);
__decorate([
    property({ type: Number, attribute: true })
], NileSideBar.prototype, "width", void 0);
__decorate([
    property({ type: Number, attribute: true })
], NileSideBar.prototype, "collapsedWidth", void 0);
NileSideBar = __decorate([
    customElement('nile-side-bar')
], NileSideBar);
export { NileSideBar };
export default NileSideBar;
//# sourceMappingURL=nile-side-bar.js.map