var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { classNames } from '@chbphone55/classnames';
import { html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { reset } from '../styles.js';
import { styles } from './styles.js';
const ccTab = {
    base: 'grid w-full items-center font-bold gap-8 antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',
    inactive: 's-text-subtle',
    active: 's-text-link s-border-selected',
    icon: 'mx-auto',
    content: 'flex items-center justify-center gap-8',
    contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
};
const ccButtonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
/**
 * Individual tab component used within w-tabs container.
 *
 * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
 */
export class WarpTab extends LitElement {
    constructor() {
        super(...arguments);
        this.label = '';
        this.active = false;
        this.over = false;
        this.tabClass = '';
        this._handleClick = (event) => {
            // Dispatch a custom event that the parent tabs component can listen to
            this.dispatchEvent(new CustomEvent('tab-click', {
                detail: { name: this.name },
                bubbles: true,
                composed: true,
            }));
            // Also dispatch a generic click event for any click handlers
            this.dispatchEvent(new CustomEvent('click', {
                detail: { name: this.name, originalEvent: event },
                bubbles: true,
                composed: true,
            }));
        };
    }
    static { this.styles = [reset, styles]; }
    get _classes() {
        return classNames(this.tabClass, [ccButtonReset, ccTab.base, this.active ? ccTab.active : ccTab.inactive]);
    }
    get _hasChildren() {
        return this.querySelector('[slot="icon"]') !== null || this.innerHTML.trim() !== this.label;
    }
    render() {
        const hasChildren = this._hasChildren;
        return html `
      <button
        type="button"
        role="tab"
        aria-selected="${this.active ? 'true' : 'false'}"
        aria-controls="${this.active ? `warp-tabpanel-${this.name}` : ''}"
        id="warp-tab-${this.name}"
        class="${this._classes}"
        @click="${this._handleClick}"
        tabindex="${ /* This needs to be -1 to prevent the auto-focus on buttons, messing up tab order */-1}"
        style="height: 100%">
        ${!hasChildren
            ? html `<span class="${ccTab.contentUnderlined}">${this.label}</span>`
            : this.over
                ? html `
                <span class="${ccTab.icon}">
                  <slot name="icon"></slot>
                </span>
                <span class="${ccTab.contentUnderlined}">${this.label}</span>
              `
                : html `
                <div class="${ccTab.content}">
                  <slot name="icon"></slot>
                  ${this.label}
                </div>
              `}
      </button>
    `;
    }
}
__decorate([
    property({ reflect: true })
], WarpTab.prototype, "name", void 0);
__decorate([
    property({ reflect: true })
], WarpTab.prototype, "label", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTab.prototype, "active", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], WarpTab.prototype, "over", void 0);
__decorate([
    property({ attribute: 'tab-class', reflect: true })
], WarpTab.prototype, "tabClass", void 0);
if (!customElements.get('w-tab')) {
    customElements.define('w-tab', WarpTab);
}
