@limetech/lime-elements
Version:
214 lines (213 loc) • 6.26 kB
JavaScript
import { h } from '@stencil/core';
/**
* This component enables you to select a swatch from out color palette, simply
* by clicking on it. You can then copy the css variable name of the chosen color
* and use it where desired.
*
* The color picker can also show you a preview of any valid color name or color value.
*
* :::note
* Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.
* :::
*
* @exampleComponent limel-example-color-picker
* @exampleComponent limel-example-color-picker-readonly
*/
export class ColorPicker {
constructor() {
this.shouldFocus = false;
this.renderTooltip = () => {
if (!this.readonly && this.tooltipLabel) {
return (h("limel-tooltip", { label: this.tooltipLabel, elementId: "tooltip-button" }));
}
};
this.renderPickerPalette = () => {
if (this.readonly) {
return this.renderPickerTrigger();
}
return (h("limel-popover", { open: this.isOpen, openDirection: "bottom-start", onClose: this.onPopoverClose }, this.renderPickerTrigger(), h("limel-color-picker-palette", { ref: this.setColorPickerPaletteElement, value: this.value, label: this.label, helperText: this.helperText, onChange: this.handleChange, required: this.required })));
};
this.renderPickerTrigger = () => {
const background = this.value ? { '--background': this.value } : {};
return (h("button", { class: "picker-trigger", slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button" }));
};
this.setColorPickerPaletteElement = (element) => {
this.contentElement = element;
};
this.openPopover = (event) => {
event.stopPropagation();
this.isOpen = true;
this.shouldFocus = this.isOpen;
};
this.onPopoverClose = (event) => {
event.stopPropagation();
this.isOpen = false;
};
this.handleChange = (event) => {
event.stopPropagation();
this.change.emit(event.detail);
};
this.value = undefined;
this.label = undefined;
this.helperText = undefined;
this.tooltipLabel = undefined;
this.required = undefined;
this.readonly = undefined;
this.isOpen = false;
}
componentDidRender() {
var _a;
if (this.shouldFocus && this.isOpen) {
this.shouldFocus = false;
(_a = this.contentElement) === null || _a === void 0 ? void 0 : _a.focus();
}
}
render() {
return [
this.renderTooltip(),
h("div", { class: "color-picker" }, this.renderPickerPalette(), h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, class: "chosen-color-input" })),
];
}
static get is() { return "limel-color-picker"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["color-picker.scss"]
};
}
static get styleUrls() {
return {
"$": ["color-picker.css"]
};
}
static get properties() {
return {
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name or code of the chosen color"
},
"attribute": "value",
"reflect": true
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The 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
},
"tooltipLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Displayed as tooltips when picker is hovered."
},
"attribute": "tooltip-label",
"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
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` if a value is readonly. This makes the component un-interactive."
},
"attribute": "readonly",
"reflect": true
}
};
}
static get states() {
return {
"isOpen": {}
};
}
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.js.map