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 { css, html, LitElement, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
let EdgelessToolIconButton = class EdgelessToolIconButton extends LitElement {
    constructor() {
        super();
        this.disabled = false;
        this.coming = false;
        this.tipPosition = 'top';
        this.arrow = true;
        this.tooltipOffset = 8;
        this.active = false;
        this.activeMode = 'color';
        this.iconContainerPadding = 6;
        this.hover = true;
        this.addEventListener('click', event => {
            if (this.disabled) {
                event.stopPropagation();
                event.preventDefault();
            }
        }, { capture: true });
    }
    render() {
        const tooltip = this.coming ? '(Coming soon)' : this.tooltip;
        const classnames = `icon-container active-mode-${this.activeMode}`;
        const iconContainerStyles = styleMap({
            '--icon-container-padding': `${this.iconContainerPadding}px`,
        });
        return html `
      <style>
        .icon-container:hover {
          background: ${this.hover ? `var(--affine-hover-color)` : 'inherit'};
        }
      </style>
      <div
        class=${classnames}
        style=${iconContainerStyles}
        role="button"
        ?disabled=${this.disabled}
        ?active=${this.active}
      >
        <slot></slot>
        ${tooltip
            ? html `<affine-tooltip
              tip-position=${this.tipPosition}
              .arrow=${this.arrow}
              .offset=${this.tooltipOffset}
              >${tooltip}</affine-tooltip
            >`
            : nothing}
      </div>
    `;
    }
};
EdgelessToolIconButton.styles = css `
    .icon-container {
      position: relative;
      display: flex;
      align-items: center;
      padding: var(--icon-container-padding);
      color: var(--affine-icon-color);
      border-radius: 4px;
      cursor: pointer;
      white-space: nowrap;
    }

    .icon-container.active-mode-color[active] {
      color: var(--affine-primary-color);
    }

    .icon-container.active-mode-background[active] {
      background: var(--affine-hover-color);
    }

    .icon-container > svg {
      flex-shrink: 0;
    }

    .icon-container[disabled] {
      pointer-events: none;
      cursor: not-allowed;
      color: var(--affine-text-disable-color);
    }

    .icon-container[coming] {
      cursor: not-allowed;
      color: var(--affine-text-disable-color);
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "disabled", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "coming", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "tooltip", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "tipPosition", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "arrow", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "tooltipOffset", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "active", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "activeMode", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "iconContainerPadding", void 0);
__decorate([
    property({ attribute: false })
], EdgelessToolIconButton.prototype, "hover", void 0);
EdgelessToolIconButton = __decorate([
    customElement('edgeless-tool-icon-button')
], EdgelessToolIconButton);
export { EdgelessToolIconButton };
//# sourceMappingURL=tool-icon-button.js.map