@limetech/lime-elements
Version:
148 lines (147 loc) • 4.13 kB
JavaScript
import { h } from '@stencil/core';
import { brightnesses, colors, getColorName, getCssColor } from './swatches';
/**
* @private
*/
export class Palette {
constructor() {
this.renderSwatches = () => {
return colors.map((color) => {
return brightnesses.map(this.renderSwatch(color));
});
};
this.renderSwatch = (color) => (brightness) => {
const colorName = getColorName(color, brightness);
const classList = {
swatch: true,
[colorName]: true,
'swatch--selected': this.value === getCssColor(color, brightness),
};
return (h("button", { class: classList, onClick: this.handleClick(color, brightness) }));
};
this.handleChange = (event) => {
event.stopPropagation();
this.change.emit(event.detail);
};
this.handleClick = (color, brightness) => (event) => {
const value = getCssColor(color, brightness);
event.stopPropagation();
this.change.emit(value);
};
this.value = undefined;
this.label = undefined;
this.helperText = undefined;
this.required = undefined;
}
render() {
const background = this.value ? { '--background': this.value } : {};
return [
h("div", { class: "color-picker-palette" }, this.renderSwatches()),
h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required }), h("div", { class: "chosen-color-preview", style: background })),
];
}
static get is() { return "limel-color-picker-palette"; }
static get encapsulation() { return "shadow"; }
static get delegatesFocus() { return true; }
static get originalStyleUrls() {
return {
"$": ["color-picker-palette.scss"]
};
}
static get styleUrls() {
return {
"$": ["color-picker-palette.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Color value that is manually typed by the user"
},
"attribute": "value",
"reflect": true
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Label of the input field"
},
"attribute": "label",
"reflect": true
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Helper text of the input field"
},
"attribute": "helper-text",
"reflect": true
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` if a value is required"
},
"attribute": "required",
"reflect": true
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emits chosen value to the parent component"
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
}
//# sourceMappingURL=color-picker-palette.js.map