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, nothing } from 'lit';
import { property } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';
import { EventEmitterMixin } from '../../util/EventEmitterMixin.js';
import { ReadyMixin } from '../../util/ReadyMixin.js';
import { TooltipMixin } from '../../util/TooltipMixin.js';
import '../circular-progress/CircularProgress.js';
import '../icon/Icon.js';
// Tailwind content scanning requires complete class names (no template literals).
const VARIANT_CLASSES = {
    primary: ['btu-button', 'btu-button-primary', 'btu-button-sm'],
    secondary: ['btu-button', 'btu-button-gray', 'btu-button-sm'],
    tertiary: ['btu-button', 'btu-button-gray', 'btu-button-sm', 'btu-button-fill-none'],
    destructive: ['btu-button', 'btu-button-error', 'btu-button-sm', 'btu-button-fill-none'],
};
/**
 * An action item button for use within `btu-action-bar`.
 *
 * Renders a styled button using existing `btu-button-*` classes. Supports
 * primary, secondary, tertiary, and destructive variants. When `iconOnly`
 * is set, the label is hidden and a tooltip is shown instead.
 *
 * **Button styling:** Set `--button-*` CSS custom properties on `<btu-action-item>`
 * or a parent element to customize via CSS inheritance. See
 * `tailwind-plugin-button.ts` for available props.
 *
 * @element btu-action-item
 *
 * @fires {CustomEvent<{label: string}>} btu-action-item-click - Fired when the action item is clicked (not fired when disabled or loading)
 *
 * @cssprop --button-color - Override button background color
 * @cssprop --button-text-color - Override button text color
 * @cssprop --button-border-radius - Override button border radius
 *
 * @example
 * ```html
 * <btu-action-item variant="primary" label="Save Changes"></btu-action-item>
 * <btu-action-item variant="destructive" label="Delete" symbol="trash-2"></btu-action-item>
 * <btu-action-item variant="secondary" label="Settings" symbol="settings" icon-only></btu-action-item>
 * ```
 */
export default class ActionItem extends TooltipMixin(EventEmitterMixin(ReadyMixin(LitElement))) {
    constructor() {
        super(...arguments);
        /**
         * Button label text.
         * @attr
         */
        this.label = '';
        /**
         * Visual variant: 'primary', 'secondary', 'tertiary', 'destructive'.
         * @attr
         */
        this.variant = 'secondary';
        /**
         * Lucide icon symbol for the leading icon.
         * @attr
         */
        this.symbol = '';
        /**
         * Show icon only, hiding the label. Tooltip activates automatically with the label text.
         * @attr icon-only
         */
        this.iconOnly = false;
        /**
         * Disables the action item. The button remains focusable for accessibility
         * but click events are suppressed.
         * @attr
         */
        this.disabled = false;
        /**
         * Shows a loading spinner and prevents interaction.
         * @attr
         */
        this.loading = false;
        /**
         * Zone placement: 'start' or 'end'. Used by ActionBar for two-zone layout.
         * If unset, auto-detected from variant (destructive → start, others → end).
         * @attr
         */
        this.zone = '';
        /**
         * Opt-in for progressive label compacting. When the parent bar has `compact`
         * enabled and space shrinks, compactable items with icons have their labels
         * hidden one-by-one (least important first) before overflowing.
         * Items without an icon ignore this attribute and go directly to overflow.
         * @attr
         */
        this.compactable = false;
        /** @internal - Roving tabindex value set by parent ActionBar */
        this._tabindex = 0;
        /** @internal - Whether the label is compacted by ActionBar's progressive compacting */
        this._collapsed = false;
    }
    createRenderRoot() {
        return this;
    }
    /** @internal - Called by parent ActionBar to configure roving tabindex and compact state */
    _configure(options) {
        this._tabindex = options.tabindex;
        this._collapsed = options.collapsed;
        if (this._collapsed && this.symbol) {
            this.tooltip = this.label;
            this.tooltipPosition = 'top';
        }
        else if (!this.iconOnly) {
            this.tooltip = '';
        }
        queueMicrotask(() => this.requestUpdate());
    }
    updated(changedProperties) {
        super.updated(changedProperties);
        this._relayTooltipAttrs();
    }
    _relayTooltipAttrs() {
        const button = this.querySelector('button');
        if (!button)
            return;
        const anchorName = this.style.getPropertyValue('anchor-name');
        if (anchorName) {
            this.style.removeProperty('anchor-name');
            button.style.setProperty('anchor-name', anchorName);
        }
        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() {
        if (!this.label && !this.symbol) {
            console.warn('[btu-action-item] No label or icon provided.', this);
        }
        if (this.compactable && !this.symbol) {
            console.warn('[btu-action-item] `compactable` has no effect without an icon.', this);
        }
        if (this.iconOnly && this.symbol) {
            queueMicrotask(() => {
                this.tooltip = this.label;
                this.tooltipPosition = 'top';
            });
        }
    }
    _handleClick() {
        if (this.disabled || this.loading)
            return;
        this.emit('btu-action-item-click', { label: this.label });
    }
    _getSpinnerColor() {
        if (this.variant === 'primary' || this.variant === 'destructive')
            return 'white';
        return 'gray';
    }
    _buildButtonClasses() {
        const variantClasses = VARIANT_CLASSES[this.variant] ?? VARIANT_CLASSES.secondary;
        const classes = [...variantClasses];
        if (this.iconOnly || this._collapsed) {
            classes.push('btu-button-text-hidden');
        }
        return classes.join(' ');
    }
    _getButtonStyles() {
        const styles = {};
        const color = this.style.getPropertyValue('--button-color').trim();
        if (color)
            styles['--button-color'] = color;
        const textColor = this.style.getPropertyValue('--button-text-color').trim();
        if (textColor)
            styles['--button-text-color'] = textColor;
        const borderRadius = this.style.getPropertyValue('--button-border-radius').trim();
        if (borderRadius)
            styles['--button-border-radius'] = borderRadius;
        return styles;
    }
    render() {
        const isIconOnly = this.iconOnly || this._collapsed;
        const ariaLabel = isIconOnly ? this.label || undefined : undefined;
        const showIcon = this.symbol && !this.loading;
        const showSpinner = this.loading;
        return html `
      <button
        type="button"
        class="${this._buildButtonClasses()}"
        style=${styleMap(this._getButtonStyles())}
        aria-label=${ifDefined(ariaLabel)}
        aria-disabled="${this.disabled ? 'true' : 'false'}"
        aria-busy="${this.loading ? 'true' : 'false'}"
        tabindex="${this._tabindex}"
        @click="${this._handleClick}"
      >
        ${showSpinner
            ? html `<btu-circular-progress size="sm" color="${this._getSpinnerColor()}"></btu-circular-progress>`
            : nothing}
        ${showIcon ? html `<btu-icon symbol="${this.symbol}" size="sm"></btu-icon>` : nothing}
        ${isIconOnly ? nothing : this.label}
      </button>
    `;
    }
}
__decorate([
    property({ type: String })
], ActionItem.prototype, "label", void 0);
__decorate([
    property({ type: String })
], ActionItem.prototype, "variant", void 0);
__decorate([
    property({ type: String })
], ActionItem.prototype, "symbol", void 0);
__decorate([
    property({ type: Boolean, attribute: 'icon-only' })
], ActionItem.prototype, "iconOnly", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ActionItem.prototype, "disabled", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ActionItem.prototype, "loading", void 0);
__decorate([
    property({ type: String, reflect: true })
], ActionItem.prototype, "zone", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ActionItem.prototype, "compactable", void 0);
if (!customElements.get('btu-action-item')) {
    customElements.define('btu-action-item', ActionItem);
}
//# sourceMappingURL=ActionItem.js.map