/**
 * 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, nothing } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { styles } from './nile-nav-tab.css';
import '../nile-icon-button/nile-icon-button';
import { MouseKey } from '../internal/enum';
import { watch } from '../internal/watch';
import NileElement from '../internal/nile-element';
import '../nile-link/nile-link';
let id = 0;
let NileNavTab = class NileNavTab extends NileElement {
    constructor() {
        super(...arguments);
        this.attrId = ++id;
        this.componentId = `nile-nav-tab-${this.attrId}`;
        /** The name of the tab panel this tab is associated with. */
        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');
        this.syncA11yState();
    }
    firstUpdated() {
        this.syncA11yState();
        this.updateAccessibleName();
    }
    updated() {
        this.syncA11yState();
        this.updateAccessibleName();
    }
    syncA11yState() {
        this.id = this.id || this.componentId;
        this.tabIndex = this.disabled ? -1 : this.active ? 0 : -1;
        this.setAttribute('aria-selected', this.active ? 'true' : 'false');
        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
        if (this.disabled) {
            this.setAttribute('aria-hidden', 'true');
        }
        else {
            this.removeAttribute('aria-hidden');
        }
    }
    /**
     * Give the host element the accessible name, since nile-link is hidden
     * from the accessibility tree.
     * Author `aria-label` (without `data-auto-aria-label`) is never overwritten so icon-only tabs can keep explicit names.
     * Auto-derived names set `data-auto-aria-label="true"` so slot/text updates can refresh them.
     */
    updateAccessibleName() {
        const userDefinedAriaLabel = this.hasAttribute('aria-label') && this.getAttribute('data-auto-aria-label') !== 'true';
        if (userDefinedAriaLabel) {
            return;
        }
        const label = (this.textContent || '').replace(/\s+/g, ' ').trim();
        if (label) {
            this.setAttribute('aria-label', label);
            this.setAttribute('data-auto-aria-label', 'true');
        }
        else {
            this.removeAttribute('aria-label');
            this.removeAttribute('data-auto-aria-label');
        }
    }
    handleCloseClick(event) {
        event.preventDefault();
        event.stopPropagation();
        this.emit('nile-close');
    }
    handleTabClick(event) {
        if (this.disabled) {
            event.preventDefault();
            event.stopPropagation();
            return;
        }
        const isModifiedClick = Object.values(MouseKey).some(key => event[key]) ||
            event.button !== 0;
        if (isModifiedClick) {
            return;
        }
        event.preventDefault();
    }
    handleActiveChange() {
        this.syncA11yState();
    }
    handleDisabledChange() {
        this.syncA11yState();
    }
    focus(options) {
        super.focus(options);
    }
    blur() {
        super.blur();
    }
    render() {
        this.id = this.id || this.componentId;
        return html `
      <li part="base tab" class="nav-tab-container" role="presentation">
        <nile-link
          class=${classMap({
            'nav-tab': true,
            'tab--centered': this.centered,
            'nav-tab--active': this.active,
            'nav-tab--closable': this.closable,
            'nav-tab--disabled': this.disabled
        })}
          tabindex="-1"
          role="none"
          href=${this.link || nothing}
          aria-hidden="true"
          exportparts="
            base:link,
            prefix:link-prefix,
            label:link-label,
            suffix:link-suffix
          "
          @click=${this.handleTabClick}
        >
          <slot name="prefix" @slotchange=${this.updateAccessibleName}></slot>
          <span part="name"><slot @slotchange=${this.updateAccessibleName}></slot></span>
          <slot name="suffix" @slotchange=${this.updateAccessibleName}></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="nav-tab__close-button"
                  ?disabled=${this.disabled}
                  @click=${this.handleCloseClick}
                  tabindex="-1"
                ></nile-icon-button>
              `
            : nothing}
        </nile-link>
      </li>
    `;
    }
};
NileNavTab.styles = styles;
__decorate([
    query('.nav-tab')
], NileNavTab.prototype, "navTab", void 0);
__decorate([
    property({ reflect: true })
], NileNavTab.prototype, "panel", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileNavTab.prototype, "active", void 0);
__decorate([
    property({ type: Boolean })
], NileNavTab.prototype, "closable", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileNavTab.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], NileNavTab.prototype, "centered", void 0);
__decorate([
    property({ type: String, reflect: true })
], NileNavTab.prototype, "link", void 0);
__decorate([
    watch('active')
], NileNavTab.prototype, "handleActiveChange", null);
__decorate([
    watch('disabled')
], NileNavTab.prototype, "handleDisabledChange", null);
NileNavTab = __decorate([
    customElement('nile-nav-tab')
], NileNavTab);
export { NileNavTab };
export default NileNavTab;
//# sourceMappingURL=nile-nav-tab.js.map