/**
 * 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-nav-tab-panel.css';
import { classMap } from 'lit/directives/class-map.js';
import { watch } from '../internal/watch';
import NileElement from '../internal/nile-element';
let id = 0;
/**
 * Nile icon component.
 *
 * @tag nile-nav-tab-panel
 *
 * @slot - The tab panel's content.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --padding - The tab panel's padding.
 */
let NileNavTabPanel = class NileNavTabPanel extends NileElement {
    constructor() {
        super(...arguments);
        this.attrId = ++id;
        this.componentId = `nile-nav-tab-panel-${this.attrId}`;
        /** The tab panel's name. */
        this.name = '';
        /** When true, the tab panel will be shown. */
        this.active = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.id = this.id.length > 0 ? this.id : this.componentId;
        this.setAttribute('role', 'tabpanel');
        this.handleActiveChange();
    }
    handleActiveChange() {
        this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
        this.setAttribute('tabindex', this.active ? '0' : '-1');
    }
    render() {
        return html `
     <div
       part="base"
       class=${classMap({
            'nav-tab-panel': true,
            'nav-tab-panel--active': this.active
        })}
>
  <slot></slot>
</div>
    `;
    }
};
NileNavTabPanel.styles = styles;
__decorate([
    property({ reflect: true })
], NileNavTabPanel.prototype, "name", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileNavTabPanel.prototype, "active", void 0);
__decorate([
    watch('active')
], NileNavTabPanel.prototype, "handleActiveChange", null);
NileNavTabPanel = __decorate([
    customElement('nile-nav-tab-panel')
], NileNavTabPanel);
export { NileNavTabPanel };
export default NileNavTabPanel;
//# sourceMappingURL=nile-nav-tab-panel.js.map