v4web-components
Version:
Stencil Component Starter
161 lines (160 loc) • 4.17 kB
JavaScript
import { h } from '@stencil/core';
export class LabDsCheckbox {
constructor() {
this.label = undefined;
this.avatar = false;
this.error = false;
this.disabled = false;
this.checked = false;
this.wrapText = false;
}
handleClick() {
this.handleCheckbox.emit(this.checked);
this.checked = !this.checked;
}
render() {
return (h("label", { class: `container ${this.disabled ? 'disabled' : ''} ${this.wrapText ? 'wrap-text' : ''}` }, (this.avatar || this.label) && (h("span", { class: "container-label" }, this.avatar ? h("lab-ds-avatar", { size: "small" }) : null, this.label && h("span", { class: `label-text ${this.checked ? 'checked' : ''}` }, this.label))), h("input", { checked: this.checked, onClick: () => this.handleClick(), disabled: this.disabled, type: "checkbox" }), h("span", { class: `${this.error && 'error'} checkmark` })));
}
static get is() { return "lab-ds-checkbox"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["lab-ds-checkbox.css"]
};
}
static get styleUrls() {
return {
"$": ["lab-ds-checkbox.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "label",
"reflect": false
},
"avatar": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "avatar",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "error",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"wrapText": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "wrap-text",
"reflect": false,
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "handleCheckbox",
"name": "handleCheckbox",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}];
}
}
//# sourceMappingURL=lab-ds-checkbox.js.map