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 './tool-icon-button.js';
import { WithDisposable } from '@blockeditor/lit';
import { css, html, LitElement } from 'lit';
import {} from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { createButtonPopper } from '../utils.js';
let EdgelessMenuButton = class EdgelessMenuButton extends WithDisposable(LitElement) {
    constructor() {
        super(...arguments);
        this.padding = 4;
        this.gap = 0;
    }
    firstUpdated() {
        this._menuPopper = createButtonPopper(this, this._panelWrapper);
        this._disposables.add(this._menuPopper);
    }
    render() {
        const { iconInfo } = this;
        const componentPanelStyles = styleMap({
            '--edgeless-component-panel-padding': `${this.padding}px`,
            '--edgeless-component-panel-gap': `${this.gap}px`,
        });
        return html `<edgeless-tool-icon-button
        .tooltip=${iconInfo.tooltip}
        .tipPosition=${'bottom'}
        .iconContainerPadding=${2}
        @click=${() => this._menuPopper.toggle()}
      >
        ${iconInfo.icon}
      </edgeless-tool-icon-button>
      <div
        class="edgeless-component-panel-wrapper"
        style=${componentPanelStyles}
      >
        ${this.menuChildren}
      </div> `;
    }
};
EdgelessMenuButton.styles = css `
    .edgeless-component-panel-wrapper {
      display: none;
      padding: var(--edgeless-component-panel-padding);
      gap: var(--edgeless-component-panel-gap);
      justify-content: center;
      align-items: center;
      background: var(--affine-background-overlay-panel-color);
      box-shadow: var(--affine-shadow-2);
      border-radius: 8px;
    }

    .edgeless-component-panel-wrapper[data-show] {
      display: flex;
    }
  `;
__decorate([
    property({ attribute: false })
], EdgelessMenuButton.prototype, "iconInfo", void 0);
__decorate([
    property({ attribute: false })
], EdgelessMenuButton.prototype, "menuChildren", void 0);
__decorate([
    property({ attribute: false })
], EdgelessMenuButton.prototype, "padding", void 0);
__decorate([
    property({ attribute: false })
], EdgelessMenuButton.prototype, "gap", void 0);
__decorate([
    query('.edgeless-component-panel-wrapper')
], EdgelessMenuButton.prototype, "_panelWrapper", void 0);
EdgelessMenuButton = __decorate([
    customElement('edgeless-menu-button')
], EdgelessMenuButton);
export { EdgelessMenuButton };
//# sourceMappingURL=menu-button.js.map