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 '@kano/styles/typography.js';
import { LitElement, customElement, html, property, css } from 'lit-element/lit-element.js';
import { BlocklyEditorBannerWidget } from './blockly-banner.js';
import { templateContent } from '../directives/template-content.js';
import { button } from '@kano/styles/button.js';
let KCFloatingMenu = class KCFloatingMenu extends LitElement {
    constructor() {
        super(...arguments);
        this.title = '';
        this.header = '';
    }
    static get styles() {
        return [css `
            :host {
                overflow: hidden;
                display: flex;
                flex-direction: column;
                font-family: var(--font-body);
                background: white;
                border-radius: 6px;
                box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.15);
                color: var(--color-black);
                max-width: 280px;
                align-self: flex-end;
            }
            .content {
                display: flex;
                flex-direction: column;
                padding: 8px 24px;
            }
            .title {
                background: var(--color-grey);
                color: white;
                padding: 4px 16px;
                font-size: 18px;
                font-weight: bold;
            }
            .header {
                font-size: 18px;
                font-weight: bold;
                padding: 8px 24px;
            }
            .actions {
                padding: 8px 24px 24px;
            }
        `];
    }
    render() {
        return html `
            ${templateContent(button)}
            <div class="title">${this.title}</div>
            <div class="header">${this.header}</div>
            <div class="content">${this.renderContent()}</div>
            <div class="actions">${this.renderActions()}</div>
        `;
    }
    renderContent() { }
    renderActions() { }
};
__decorate([
    property({ type: String })
], KCFloatingMenu.prototype, "title", void 0);
__decorate([
    property({ type: String })
], KCFloatingMenu.prototype, "header", void 0);
KCFloatingMenu = __decorate([
    customElement('kc-floating-menu')
], KCFloatingMenu);
export { KCFloatingMenu };
export class FloatingMenu extends BlocklyEditorBannerWidget {
    constructor(title, header) {
        super();
        this.title = title;
        this.header = header;
    }
    getMenuNode() {
        if (!this.menuNode) {
            this.menuNode = new KCFloatingMenu();
            this.menuNode.title = this.title;
            this.menuNode.header = this.header;
        }
        return this.menuNode;
    }
    getDomNode() {
        const domNode = super.getDomNode();
        const menuNode = this.getMenuNode();
        domNode.appendChild(menuNode);
        return domNode;
    }
}
//# sourceMappingURL=floating-menu.js.map