radh-ui
Version:
Stencil Component Starter
114 lines (113 loc) • 3.7 kB
JavaScript
import { Component, Event, h, Host, Prop } from '@stencil/core';
export class WsCheckButton {
constructor() {
/**Value input checkbox */
this.isChecked = false;
}
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" }))))));
}
static get is() { return "ws-check-button"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["ws-check-button.css"]
}; }
static get styleUrls() { return {
"$": ["ws-check-button.css"]
}; }
static get properties() { return {
"idCheck": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Id input checkbox"
},
"attribute": "id-check",
"reflect": false
},
"isChecked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value input checkbox"
},
"attribute": "is-checked",
"reflect": false,
"defaultValue": "false"
},
"nameCheck": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name input checkbox"
},
"attribute": "name-check",
"reflect": false
},
"text": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Text label"
},
"attribute": "text",
"reflect": false
}
}; }
static get events() { return [{
"method": "checkedChange",
"name": "checkedChange",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Fire outside value input checkbox"
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
}