/**
 * 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.css';
import '../nile-icon-button/nile-icon-button';
import { classMap } from 'lit/directives/class-map.js';
import { query } from 'lit/decorators.js';
import { watch } from '../internal/watch';
import NileElement from '../internal/nile-element';
let id = 0;
/**
 * Nile icon component.
 *
 * @tag nile-tab
 *
 *
 * @dependency nile-icon-button
 *
 * @slot - The tab's label.
 *
 * @event nile-close - Emitted when the tab is closable and the close button is activated.
 *
 * @csspart base - The component's base wrapper.
 * @csspart close-button - The close button, an `<nile-icon-button>`.
 * @csspart close-button__base - The close button's exported `base` part.
 */
let NileTab = class NileTab extends NileElement {
    constructor() {
        super(...arguments);
        this.attrId = ++id;
        this.componentId = `nile-tab-${this.attrId}`;
        /** The name of the tab panel this tab is associated with. The panel must be located in the same tab group. */
        this.panel = '';
        /** Draws the tab in an active state. */
        this.active = false;
        /** Makes the tab closable and shows a close button. */
        this.closable = false;
        /** Disables the tab and prevents selection. */
        this.disabled = false;
        this.centered = false;
    }
    connectedCallback() {
        super.connectedCallback();
        this.setAttribute('role', 'tab');
    }
    handleCloseClick(event) {
        event.stopPropagation();
        this.emit('nile-close');
    }
    handleActiveChange() {
        if (this.active)
            this.emit('nile-toggle-change', { value: this.panel });
        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
    }
    handleDisabledChange() {
        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
    }
    /** Sets focus to the tab. */
    focus(options) {
        this.tab.focus(options);
    }
    /** Removes focus from the tab. */
    blur() {
        this.tab.blur();
    }
    render() {
        // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
        this.id = this.id.length > 0 ? this.id : this.componentId;
        return html `
      <div
        part="base"
        class=${classMap({
            tab: true,
            'tab--centered': this.centered,
            'tab--active': this.active,
            'tab--closable': this.closable,
            'tab--disabled': this.disabled
        })}
        tabindex=${this.disabled ? '-1' : '0'}
      >
      <slot name="prefix"></slot>
        <slot></slot>
        ${this.closable
            ? html `
              <nile-icon-button
                part="close-button"
                exportparts="base:close-button__base"
                name="var(--nile-icon-close, var(--ng-icon-x-close))"
                library="system"
                label="close"
                class="tab__close-button"
                @click=${this.handleCloseClick}
                tabindex="-1"
              ></nile-icon-button>
            `
            : ''}
      </div>
    `;
    }
};
NileTab.styles = styles;
__decorate([
    query('.tab')
], NileTab.prototype, "tab", void 0);
__decorate([
    property({ reflect: true })
], NileTab.prototype, "panel", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileTab.prototype, "active", void 0);
__decorate([
    property({ type: Boolean })
], NileTab.prototype, "closable", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileTab.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileTab.prototype, "centered", void 0);
__decorate([
    watch('active')
], NileTab.prototype, "handleActiveChange", null);
__decorate([
    watch('disabled')
], NileTab.prototype, "handleDisabledChange", null);
NileTab = __decorate([
    customElement('nile-tab')
], NileTab);
export { NileTab };
export default NileTab;
//# sourceMappingURL=nile-tab.js.map