radh-ui/dist/esm/ws-check-button.entry.js

Stencil Component Starter

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

const wsCheckButtonCss = "input[type=checkbox]{opacity:0;position:absolute;outline:initial}.ws-label{width:var(--ws-check-button-width, 20%);height:var(--ws-check-button-height, 45px);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;padding:10px 12px;border:var(--ws-check-button-border-color, #dddddd) solid var(--ws-check-button-border-weight, 1px);background-color:var(--ws-check-button-background-color,  #ffffff);font-family:Roboto, sans-serif;font-size:var(--ws-check-buttton-font-size, 14px);color:var(--ws-check-button-color, #999999);line-height:initial}.ws-label-selected{color:var(--ws-check-button-selected-color, #1b1b1b);border:var(--ws-check-button-selected-border-color, #307f7f) solid var(--ws-check-button-selected-border-weight, 2px);background-color:var(--ws-check-button-selected-background-color, #fcfbfb)}";

class WsCheckButton {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**Value input checkbox */
        this.isChecked = false;
        this.checkedChange = createEvent(this, "checkedChange", 7);
    }
    render() {
        return (h(Host, null, h("input", { id: this.idCheck, name: this.nameCheck, type: "checkbox", value: this.text, checked: this.isChecked, onChange: (event) => this.checkedChange.emit(event) }), h("label", { htmlFor: this.idCheck, class: {
                'ws-label': true,
                'ws-label-selected': this.isChecked
            } }, h("span", null, this.text), this.isChecked && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11", height: "8", viewBox: "0 0 11 8" }, h("path", { fill: "#307F7F", "fill-rule": "nonzero", d: "M3.336 6.312L.848 3.824 0 4.672 3.336 8l7.16-7.16L9.648 0z" }))))));
    }
}
WsCheckButton.style = wsCheckButtonCss;

export { WsCheckButton as ws_check_button };