/**
 * 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-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-tab-panel
 *
 * @slot - The tab panel's content.
 *
 * @csspart base - The component's base wrapper.
 *
 * @cssproperty --padding - The tab panel's padding.
 */
let NileTabPanel = class NileTabPanel extends NileElement {
    constructor() {
        super(...arguments);
        this.attrId = ++id;
        this.componentId = `nile-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');
    }
    handleActiveChange() {
        this.setAttribute('aria-hidden', this.active ? 'false' : 'true');
    }
    render() {
        return html `
      <slot
        part="base"
        class=${classMap({
            'tab-panel': true,
            'tab-panel--active': this.active
        })}
      ></slot>
    `;
    }
};
NileTabPanel.styles = styles;
__decorate([
    property({ reflect: true })
], NileTabPanel.prototype, "name", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileTabPanel.prototype, "active", void 0);
__decorate([
    watch('active')
], NileTabPanel.prototype, "handleActiveChange", null);
NileTabPanel = __decorate([
    customElement('nile-tab-panel')
], NileTabPanel);
export { NileTabPanel };
export default NileTabPanel;
//# sourceMappingURL=nile-tab-panel.js.map