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 { baseTheme } from '@toeverything/theme';
import { css, html, LitElement, nothing, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
/**
 * Default size is 32px, you can override it by setting `size` property.
 * For example, `<icon-button size="32px"></icon-button>`.
 *
 * You can also set `width` or `height` property to override the size.
 *
 * Set `text` property to show a text label.
 *
 * @example
 * ```ts
 * html`<icon-button @click=${this.onUnlink}>
 *   ${UnlinkIcon}
 * </icon-button>`
 *
 * html`<icon-button size="32px" text="HTML" @click=${this._importHtml}>
 *   ${ExportToHTMLIcon}
 * </icon-button>`
 * ```
 */
let IconButton = class IconButton extends LitElement {
    constructor() {
        super();
        this.size = null;
        this.width = null;
        this.height = null;
        this.text = null;
        this.active = false;
        this.hover = undefined;
        // Do not add `{ attribute: false }` option here, otherwise the `disabled` styles will not work
        this.disabled = undefined;
        // Allow activate button by pressing Enter key
        this.addEventListener('keypress', event => {
            if (this.disabled) {
                return;
            }
            if (event.key === 'Enter' && !event.isComposing) {
                this.click();
            }
        });
        // Prevent click event when disabled
        this.addEventListener('click', event => {
            if (this.disabled === true) {
                event.preventDefault();
                event.stopPropagation();
            }
        }, { capture: true });
    }
    connectedCallback() {
        super.connectedCallback();
        this.tabIndex = 0;
        const DEFAULT_SIZE = '28px';
        if (this.size && (this.width || this.height)) {
            throw new Error('Cannot set both size and width/height on an icon-button');
        }
        let width = this.width ?? DEFAULT_SIZE;
        let height = this.height ?? DEFAULT_SIZE;
        if (this.size) {
            width = this.size;
            height = this.size;
        }
        this.style.setProperty('--button-width', typeof width === 'string' ? width : `${width}px`);
        this.style.setProperty('--button-height', typeof height === 'string' ? height : `${height}px`);
    }
    render() {
        if (this.hidden)
            return nothing;
        if (this.disabled) {
            const disabledColor = 'var(--affine-text-disable-color)';
            this.style.setProperty('--svg-icon-color', disabledColor);
            this.dataset.testDisabled = 'true';
        }
        else {
            this.dataset.testDisabled = 'false';
            const iconColor = this.active
                ? 'var(--affine-primary-color)'
                : 'var(--affine-icon-color)';
            this.style.setProperty('--svg-icon-color', iconColor);
        }
        return html `<slot></slot>${this.text
            ? // wrap a span around the text so we can ellipsis it automatically
                html `<span class="text">${this.text}</span>`
            : ''}<slot name="suffix"></slot>`;
    }
};
IconButton.styles = css `
    :host {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      width: var(--button-width);
      height: var(--button-height);
      border-radius: 4px;
      background: transparent;
      cursor: pointer;
      user-select: none;
      font-family: ${unsafeCSS(baseTheme.fontSansFamily)};
      color: var(--affine-text-primary-color);
      pointer-events: auto;
      padding: 4px;
    }

    :host(:hover) {
      background: var(--affine-hover-color);
    }

    :host(:active) {
      background: transparent;
    }

    :host([disabled]),
    :host(:disabled) {
      background: transparent;
      color: var(--affine-text-disable-color);
      cursor: not-allowed;
    }

    /* You can add a 'hover' attribute to the button to show the hover style */
    :host([hover]) {
      background: var(--affine-hover-color);
    }
    :host([hover='false']) {
      background: transparent;
    }

    :host(:active[active]) {
      background: transparent;
    }

    /* not supported "until-found" yet */
    :host([hidden]) {
      display: none;
    }

    :host > .text {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    ::slotted(svg) {
      color: var(--svg-icon-color);
    }
  `;
__decorate([
    property()
], IconButton.prototype, "size", void 0);
__decorate([
    property()
], IconButton.prototype, "width", void 0);
__decorate([
    property()
], IconButton.prototype, "height", void 0);
__decorate([
    property()
], IconButton.prototype, "text", void 0);
__decorate([
    property({ attribute: true, type: Boolean })
], IconButton.prototype, "active", void 0);
__decorate([
    property({ attribute: true, type: Boolean })
], IconButton.prototype, "hover", void 0);
__decorate([
    property({ attribute: true, type: Boolean })
], IconButton.prototype, "disabled", void 0);
IconButton = __decorate([
    customElement('icon-button')
], IconButton);
export { IconButton };
//# sourceMappingURL=button.js.map