radh-ui
Version:
Stencil Component Starter
26 lines (20 loc) • 2.06 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-710e648a.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) {
index.registerInstance(this, hostRef);
/**Value input checkbox */
this.isChecked = false;
this.checkedChange = index.createEvent(this, "checkedChange", 7);
}
render() {
return (index.h(index.Host, null, index.h("input", { id: this.idCheck, name: this.nameCheck, type: "checkbox", value: this.text, checked: this.isChecked, onChange: (event) => this.checkedChange.emit(event) }), index.h("label", { htmlFor: this.idCheck, class: {
'ws-label': true,
'ws-label-selected': this.isChecked
} }, index.h("span", null, this.text), this.isChecked && (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "11", height: "8", viewBox: "0 0 11 8" }, index.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;
exports.ws_check_button = WsCheckButton;