import { r as registerInstance, c as createEvent, h, H as Host } from './index-6vpKbd31.js';

const verdocsToggleButtonCss = "@-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-button{font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-toggle-button button{border:none;outline:none;cursor:pointer;-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;background:#cccccc;color:#33364b}verdocs-toggle-button button svg{max-width:100%;max-height:100%;fill:#33364b}verdocs-toggle-button button.active{background:#55bc81;color:#f5f5fa}verdocs-toggle-button button.active svg{fill:#f5f5fa}verdocs-toggle-button button:focus{border:none;outline:none}verdocs-toggle-button.size-normal button{width:40px;height:40px;padding:6px;border-radius:4px}verdocs-toggle-button.size-small button{width:34px;height:34px;padding:4px;border-radius:2px}";

const VerdocsToggleButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.toggle = createEvent(this, "toggle");
        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: '5831ff9f0dccbc367958a7c0746c63c7cca8af1f', 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))));
    }
};
VerdocsToggleButton.style = verdocsToggleButtonCss;

export { VerdocsToggleButton as verdocs_toggle_button };
//# sourceMappingURL=verdocs-toggle-button.entry.js.map

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