import { h } from "@stencil/core";
/**
 * Displays a label and a set of buttons, also allowing a default selection of a button.
 *
 * ```ts
 * <verdocs-toggle options={[...options]} theme="light"></verdocs-toggle>
 * ```
 */
export class VerdocsToggle {
    constructor() {
        this.selectedOption = 0;
    }
    componentWillLoad() {
        var _a;
        this.selectedOption = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.defaultSelection) || 0;
    }
    render() {
        return (h("div", { key: 'aaa423ec2c2783ea0e8df7ce716ef0faeb5381b7', class: "container" }, h("span", { key: '4a046c8928e0c524a39fac38ef4e6659ab22caca', class: "label" }, `${this.options.label}:`), h("div", { key: 'e83171226f4084830a49ad684a13c579874d5918', class: "buttons" }, this.options.buttons.map((button, index) => (h("button", { id: button.id, key: button.id, innerHTML: button.icon, class: index === this.selectedOption ? 'selected' : '', onClick: () => {
                console.log('clicked', index);
                this.selectedOption = index;
            } }))))));
    }
    static get is() { return "verdocs-toggle"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-toggle.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-toggle.css"]
        };
    }
    static get properties() {
        return {
            "options": {
                "type": "unknown",
                "attribute": "options",
                "mutable": false,
                "complexType": {
                    "original": "IToggleIconButtons",
                    "resolved": "IToggleIconButtons",
                    "references": {
                        "IToggleIconButtons": {
                            "location": "local",
                            "path": "/Users/chad/projects/verdocs/web-sdk/verdocs-web-sdk/src/components/controls/verdocs-toggle/verdocs-toggle.tsx",
                            "id": "src/components/controls/verdocs-toggle/verdocs-toggle.tsx::IToggleIconButtons"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The tags to display"
                },
                "getter": false,
                "setter": false
            },
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "'light' | 'dark'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The \"theme\" to be used"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "selectedOption": {}
        };
    }
}
//# sourceMappingURL=verdocs-toggle.js.map
