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 { LitElement, html } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import { TooltipMixin } from '../../util/TooltipMixin.js';
import '../icon/Icon.js';
// Tailwind content scanning requires complete class names (no template literals).
const TYPE_COLOR_CLASSES = {
    primary: ['btu-button-primary'],
    'primary-clear': ['btu-button-primary', 'btu-button-fill-none'],
    'primary-stroke': ['btu-button-primary', 'btu-button-fill-none', 'btu-button-outline'],
    secondary: ['btu-button-gray'],
    'secondary-clear': ['btu-button-gray', 'btu-button-fill-none'],
    'secondary-stroke': ['btu-button-gray', 'btu-button-fill-none', 'btu-button-outline'],
    tertiary: ['btu-button-teal'],
    'tertiary-clear': ['btu-button-teal', 'btu-button-fill-none'],
    'tertiary-stroke': ['btu-button-teal', 'btu-button-fill-none', 'btu-button-outline'],
};
const VALID_SIZES = new Set(['sm', 'md', 'lg']);
/**
 * Surfaces the different actions someone can perform in an interface where space is limited.
 *
 * Uses an icon to communicate the action and supports multiple visual types and sizes.
 * Tooltip support is built-in for accessibility in compact layouts.
 *
 * @element btu-icon-button
 *
 * @fires {CustomEvent} btu-icon-button-ready - Fired after first render and initialization
 * @fires {CustomEvent<{name: string | undefined}>} btu-icon-button-click - Fired when the button is clicked
 *
 * @example
 * ```html
 * <btu-icon-button symbol="trash-2" tooltip="Delete" aria-label="Delete item"></btu-icon-button>
 * <btu-icon-button symbol="pencil" type="secondary" size="sm" aria-label="Edit"></btu-icon-button>
 * <btu-icon-button symbol="x" type="primary" destructive aria-label="Remove"></btu-icon-button>
 * ```
 */
export default class IconButton extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        /**
         * Specifies the type of icon-button, controlling the visual style.
         * @attr
         */
        this.type = 'primary';
        /**
         * Specifies the size of icon-button.
         * @attr
         */
        this.size = 'md';
        /**
         * Specifies an icon-button will be used to take any destructive action overriding the
         * default color used for the icon-button type with the error color.
         * @attr
         */
        this.destructive = false;
        /**
         * Disables the button, preventing interaction and indicating an inactive state.
         * @attr
         */
        this.disabled = false;
    }
    createRenderRoot() {
        return this;
    }
    willUpdate(changedProperties) {
        super.willUpdate(changedProperties);
        if (changedProperties.has('type') && !(this.type in TYPE_COLOR_CLASSES)) {
            console.warn(`[btu-icon-button] Unrecognized type: "${this.type}". Falling back to "primary".`);
            this.type = 'primary';
        }
        if (changedProperties.has('size') && !VALID_SIZES.has(this.size)) {
            console.warn(`[btu-icon-button] Unrecognized size: "${this.size}". Falling back to "md".`);
            this.size = 'md';
        }
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        // TooltipMixin sets anchor-name and aria-describedby on the host,
        // but they belong on the inner <button> (the visible/focusable control).
        this._relayTooltipAttrs();
    }
    _relayTooltipAttrs() {
        const button = this.querySelector('button');
        if (!button)
            return;
        // Move anchor-name so tooltip centers on the button, not the host
        const anchorName = this.style.getPropertyValue('anchor-name');
        if (anchorName) {
            this.style.removeProperty('anchor-name');
            button.style.setProperty('anchor-name', anchorName);
        }
        // Move aria-describedby so screen readers announce the tooltip on focus
        const tooltipEl = this.querySelector('[data-tooltip-internal]');
        if (tooltipEl) {
            this.removeAttribute('aria-describedby');
            button.setAttribute('aria-describedby', tooltipEl.id);
        }
        else {
            button.removeAttribute('aria-describedby');
        }
    }
    firstUpdated(changedProperties) {
        super.firstUpdated(changedProperties);
        if (!this.getAttribute('aria-label')?.trim() && !this.tooltip?.trim()) {
            console.warn(`[btu-icon-button] No accessible name provided. Set "aria-label" or "tooltip" for screen readers.`, this);
        }
        this.emit('btu-icon-button-ready');
    }
    _handleClick() {
        this.emit('btu-icon-button-click', { name: this.name });
    }
    _buildButtonClasses() {
        const typeConfig = TYPE_COLOR_CLASSES[this.type] ?? TYPE_COLOR_CLASSES.primary;
        const colorClass = this.destructive ? 'btu-button-error' : typeConfig[0];
        const modifiers = typeConfig.slice(1);
        return ['btu-button', 'btu-button-text-hidden', colorClass, ...modifiers, `btu-button-${this.size}`]
            .filter(Boolean)
            .join(' ');
    }
    render() {
        const ariaLabel = this.getAttribute('aria-label')?.trim() || this.tooltip?.trim() || undefined;
        return html `
      <button
        type="button"
        class="${this._buildButtonClasses()}"
        aria-label=${ifDefined(ariaLabel)}
        name=${ifDefined(this.name)}
        ?disabled=${this.disabled}
        @click="${this._handleClick}"
      >
        <btu-icon symbol="${ifDefined(this.symbol)}" size="${this.size}"></btu-icon>
      </button>
    `;
    }
}
__decorate([
    property()
], IconButton.prototype, "name", void 0);
__decorate([
    property()
], IconButton.prototype, "type", void 0);
__decorate([
    property({ type: String })
], IconButton.prototype, "symbol", void 0);
__decorate([
    property()
], IconButton.prototype, "size", void 0);
__decorate([
    property({ type: Boolean })
], IconButton.prototype, "destructive", void 0);
__decorate([
    property({ type: Boolean })
], IconButton.prototype, "disabled", void 0);
if (!customElements.get('btu-icon-button')) {
    customElements.define('btu-icon-button', IconButton);
}
//# sourceMappingURL=IconButton.js.map