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, property, css, html } from 'lit-element/lit-element.js';
import '@kano/styles/color.js';
let KCAddPartItem = class KCAddPartItem extends LitElement {
    constructor() {
        super(...arguments);
        this.label = '';
        this.fill = '#8F9195';
        this.disabled = false;
    }
    static get styles() {
        return css `
            :host {
                display: flex;
                flex-direction: column;
                cursor: pointer;
                color: white;
                overflow: hidden;
                justify-content: center;
                height: 40px;
                background-color: var(--kc-secondary-color);
                border: 2px solid var(--kano-app-part-editor-border);
                border-radius: 5px;
                padding: 0 8px;
            }
            :host([disabled]) {
                opacity: 0.4;
                cursor: default;
            }
            #label {
                margin-left: 8px;
                color: white;
            }
            button.body {
                display: flex;
                flex-direction: row;
                align-items: center;
                background: inherit;
                color: inherit;
                padding: 0;
                border: 0px;
                font-size: 14px;
                font-family: var(--font-body);
                font-weight: bold;
                cursor: pointer;
                outline: none;
            }
            button[disabled] {
                cursor: default;
            }
            #content {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex: 1;
                flex-basis: 0.000000001px;
            }
            .icon::slotted(* svg) {
                /* terminal has width and height defined as 100%. This is a workaround to get proper rendering */
                width: 24px !important;
                height: 24px !important;
                margin: 8px 12px 8px 8px;
            }
            .icon::slotted(*) {
                fill: var(--kano-app-part-editor-icons);
            }
            :host(:hover) .icon::slotted(*) {
                fill: var(--kc-add-part-item-hover-color);
            }
            :host(:hover:not([disabled])) {
                background-color: #5b646b;
            }
            [hidden] {
                display: none !important;
            }
        `;
    }
    render() {
        return html `
            <button type="button" class="body" ?disabled=${this.disabled}>
                <div id="content">
                    <slot class="icon" id="part-icon"></slot>
                    <div id="label">${this.label}</div>
                </div>
            </button>
        `;
    }
};
__decorate([
    property({ type: String })
], KCAddPartItem.prototype, "label", void 0);
__decorate([
    property({ type: String })
], KCAddPartItem.prototype, "fill", void 0);
__decorate([
    property({ type: String })
], KCAddPartItem.prototype, "disabled", void 0);
KCAddPartItem = __decorate([
    customElement('kc-add-part-item')
], KCAddPartItem);
export { KCAddPartItem };
//# sourceMappingURL=kc-add-part-item.js.map