radh-ui
Version:
Stencil Component Starter
96 lines (95 loc) • 2.73 kB
JavaScript
import { Component, Event, Prop, State, h } from '@stencil/core';
export class ColorPicker {
constructor() {
this.defaultValue = "#ff0000";
this.resettable = false;
}
componentWillLoad() {
this.setValue(this.defaultValue);
}
handleChange(event) {
this.setValue(event.target.value);
}
setValue(value) {
this.value = value;
this.colorChanged.emit(this.value);
}
reset() {
this.setValue(this.defaultValue);
}
renderResetButton() {
if (this.resettable) {
return h("radh-button", { onClick: () => this.reset() }, "X");
}
}
render() {
return (h("div", { class: "color-picker" },
h("input", { type: "color", value: this.value, onChange: (ev) => this.handleChange(ev) }),
h("span", null, this.value),
this.renderResetButton()));
}
static get is() { return "radh-color-picker"; }
static get originalStyleUrls() { return {
"$": ["radh-color-picker.css"]
}; }
static get styleUrls() { return {
"$": ["radh-color-picker.css"]
}; }
static get properties() { return {
"defaultValue": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "default-value",
"reflect": false,
"defaultValue": "\"#ff0000\""
},
"resettable": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "resettable",
"reflect": false,
"defaultValue": "false"
}
}; }
static get states() { return {
"value": {}
}; }
static get events() { return [{
"method": "colorChanged",
"name": "colorChanged",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": ""
},
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
}
}]; }
}