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/kwc-blockly/input/kwc-blockly-wrapper.js';
import '@kano/styles/color.js';
import { LitElement, html, customElement, css, property } from 'lit-element/lit-element.js';
let KCSequenceConfig = class KCSequenceConfig extends LitElement {
    constructor() {
        super(...arguments);
        this.title = '';
        this.value = 8;
        this.options = [8, 16];
    }
    static get styles() {
        return [css `
            :host {
                display: block;
            }
            kwc-blockly-wrapper {
                --kwc-blockly-wrapper-caret-color: var(--color-black);
            }
            .options {
                display: flex;
                flex-direction: row;
            }
            .option input[type="radio"] {
                opacity: 0;
                width: 0;
                margin: 0;
            }
            .option label {
                margin: 0;
                padding: 4px 8px;
                background: #464C51;
                cursor: pointer;
                width: 30px;
            }
            .content {
                padding: 16px;
            }
            .option input:checked+label {
                background: red;
            }
            .option:first-child label {
                border-top-left-radius: 3px;
                border-bottom-left-radius: 3px;
            }
            .option:last-child label {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
            }
            .option:not(:first-child) label {
                border-left: 1px solid #23272C;
            }
        `];
    }
    render() {
        return html `
            <kwc-blockly-wrapper .title=${this.title} no-close-button>
                <div class="content" slot="content">
                    <div class="controls">
                        <div class="options">
                            ${this.options.map(v => this.renderInput(v))}
                        </div>
                    </div>
                </div>
            </kwc-blockly-wrapper>
        `;
    }
    renderInput(value) {
        return html `
            <div class="option">
                <input id=${value} type="radio" name="subdivision" .checked=${value === this.value} @change=${() => this._onChange(value)} /><!--
                --><label for=${value}>${value}</label>
            </div>
        `;
    }
    _onChange(value) {
        this.value = value;
        this.dispatchEvent(new CustomEvent('change', { detail: this.value }));
    }
};
__decorate([
    property({ type: String })
], KCSequenceConfig.prototype, "title", void 0);
__decorate([
    property({ type: Number })
], KCSequenceConfig.prototype, "value", void 0);
__decorate([
    property({ type: Array })
], KCSequenceConfig.prototype, "options", void 0);
KCSequenceConfig = __decorate([
    customElement('kc-sequence-config')
], KCSequenceConfig);
export { KCSequenceConfig };
//# sourceMappingURL=kc-sequence-config.js.map