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, customElement, html, css } from 'lit-element/lit-element.js';
import { styleMap } from 'lit-html/directives/style-map.js';
import '@kano/styles/typography.js';
import { closure } from '@kano/styles/closure.js';
import { templateContent } from '../../directives/template-content.js';
import { property } from '../decorators.js';
import './kc-add-part-item.js';
import { create } from './icons.js';
import { _ } from '../../i18n/index.js';
let KCAddPart = class KCAddPart extends LitElement {
    constructor() {
        super(...arguments);
        this.parts = [];
        this.whitelist = null;
    }
    static get styles() {
        return css `
            :host {
                margin: 0 !important;
                padding: 0 !important;
                display: flex;
                flex-direction: column;
                color: white;
                background-color: var(--kano-app-editor-workspace-background);
                font-family: var(--font-body);
                min-width: 800px;
                border-radius: 5px;
                border: 2px solid var(--kano-app-part-editor-border);
                max-height: 100vh;       
            }
            header {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-shrink: 0;
                height: 48px;
                padding: 0 16px;
                border-bottom: 2px solid var(--kano-app-part-editor-border);
            }
            .label {
                flex: 1;
                flex-basis: 0.000000001px;
                font-size: 16px;
                font-weight: bold;
            }
            .label-text {
                padding-left: 4px;
            }
            .parts {
                padding: 32px 40px;
                columns: 3;
                column-gap: 24px;
            }
            kc-add-part-item {
                margin-bottom: 8px;
                break-inside: avoid;
            }
            kc-add-part-item svg {
                width: 24px !important;
                height: 24px !important;
            }
        `;
    }
    render() {
        return html `
            ${templateContent(closure)}
            <header>
                <div class="label">
                    ${templateContent(create)} 
                    <span class="label-text">${_('ADD_PARTS_HEADING', 'Add Parts')}</span>
                </div>
                <button class="closure secondary" dialog-dismiss></button>
            </header>
            <div class="parts">
                ${this.getFilteredParts().map((part) => html `
                    <kc-add-part-item
                        id=${part.type}
                        .label=${part.label}
                        style=${styleMap({ '--kc-add-part-item-hover-color': part.color })}
                        @click=${() => this._onClick(part)}>${templateContent(part.icon)}</kc-add-part-item>
                `)}
            </div>
        `;
    }
    getPartElement(type) {
        return this.renderRoot.querySelector(`#${type}`);
    }
    getFilteredParts() {
        if (!this.whitelist) {
            return this.parts;
        }
        return this.parts.filter(p => this.whitelist.indexOf(p.type) !== -1);
    }
    _onClick(part) {
        this.dispatchEvent(new CustomEvent('part-click', { detail: part, bubbles: true, composed: true }));
    }
};
__decorate([
    property({ type: Array, value: () => [] })
], KCAddPart.prototype, "parts", void 0);
__decorate([
    property({ type: Array, value: null })
], KCAddPart.prototype, "whitelist", void 0);
KCAddPart = __decorate([
    customElement('kc-add-part')
], KCAddPart);
export { KCAddPart };
//# sourceMappingURL=kc-add-part.js.map