'use strict';

var index = require('./index-CDEIqi_n.js');

const verdocsToggleCss = "@-webkit-keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}@keyframes verdocs-field-pulse{0%{background-color:rgba(0, 0, 0, 0.35)}50%{background-color:rgba(0, 0, 0, 0)}100%{background-color:rgba(0, 0, 0, 0.35)}}verdocs-toggle{font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-toggle .container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background-color:#f5f5fa}verdocs-toggle .label{font-size:24px;font-weight:700;color:#33354c;-ms-flex-item-align:center;align-self:center;margin-right:27px;font-family:sans-serif}verdocs-toggle .buttons{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}verdocs-toggle .buttons button{width:60px;height:60px;border:2px solid #654dcb;border-radius:5px;cursor:pointer}verdocs-toggle .buttons button:not(:last-child){margin-right:11px}verdocs-toggle .buttons svg{width:30px;height:30px}verdocs-toggle .buttons button:hover{background-color:#654dcb;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .buttons button:hover svg{fill:#f5f5fa;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected{background-color:#707ae5;-webkit-transition:0.25s;transition:0.25s}verdocs-toggle .selected svg{fill:#ffffff;-webkit-transition:0.25s;transition:0.25s}";

const VerdocsToggle = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.selectedOption = 0;
    }
    componentWillLoad() {
        var _a;
        this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
    }
    render() {
        return (index.h("div", { key: 'aaa423ec2c2783ea0e8df7ce716ef0faeb5381b7', class: "container" }, index.h("span", { key: '4a046c8928e0c524a39fac38ef4e6659ab22caca', class: "label" }, `${this.options.label}:`), index.h("div", { key: 'e83171226f4084830a49ad684a13c579874d5918', class: "buttons" }, this.options.buttons.map((button, index$1) => (index.h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index$1 === this.selectedOption ? 'selected' : '', onClick: () => {
                console.log('clicked', index$1);
                this.selectedOption = index$1;
            } }))))));
    }
};
VerdocsToggle.style = verdocsToggleCss;

exports.verdocs_toggle = VerdocsToggle;
//# sourceMappingURL=verdocs-toggle.entry.cjs.js.map

//# sourceMappingURL=verdocs-toggle.cjs.entry.js.map