import { h, Host } from "@stencil/core";
/**
 * Displays a single button that can be toggled on or off by clicking it.
 *
 * ```ts
 * <verdocs-toggle-button icon={MessageIcon} size="normal" active={true} />
 * ```
 */
export class VerdocsToggleButton {
    constructor() {
        this.active = false;
        /**
         * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.
         */
        this.icon = null;
        /**
         * If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored.
         */
        this.label = null;
        /**
         * How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions.
         */
        this.size = 'normal';
        this._active = false;
    }
    componentWillLoad() {
        this._active = this.active;
    }
    handleToggle(e) {
        var _a;
        e.stopPropagation();
        const newState = !this._active;
        this._active = newState;
        (_a = this.toggle) === null || _a === void 0 ? void 0 : _a.emit({ active: newState });
    }
    render() {
        return (h(Host, { key: '366717b66ead7de50d95723e47dffd38e9676301', class: `size-${this.size}` }, this.icon ? (h("button", { innerHTML: this.icon, class: { active: this._active }, onClick: e => this.handleToggle(e) })) : (h("button", { class: { active: this._active }, onClick: e => this.handleToggle(e) }, this.label))));
    }
    static get is() { return "verdocs-toggle-button"; }
    static get originalStyleUrls() {
        return {
            "$": ["verdocs-toggle-button.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["verdocs-toggle-button.css"]
        };
    }
    static get properties() {
        return {
            "active": {
                "type": "boolean",
                "attribute": "active",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "icon": {
                "type": "string",
                "attribute": "icon",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "null"
            },
            "label": {
                "type": "string",
                "attribute": "label",
                "mutable": false,
                "complexType": {
                    "original": "string | null",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If set, should be an SVG object. This will be rendered as the button's visible element. If icon is supplied, label is ignored."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "null"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'normal'",
                    "resolved": "\"normal\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "How large the button should be. Small buttons are intended for dialog boxes and other smaller scale UI regions."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'normal'"
            }
        };
    }
    static get states() {
        return {
            "_active": {}
        };
    }
    static get events() {
        return [{
                "method": "toggle",
                "name": "toggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when the button is pressed."
                },
                "complexType": {
                    "original": "{active: boolean}",
                    "resolved": "{ active: boolean; }",
                    "references": {}
                }
            }];
    }
}
//# sourceMappingURL=verdocs-toggle-button.js.map
