@limetech/lime-elements
Version:
372 lines (371 loc) • 14.7 kB
JavaScript
import { h, Host, } 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-basic
* @exampleComponent limel-example-color-picker-custom-palette
* @exampleComponent limel-example-color-picker-manual-input
* @exampleComponent limel-example-color-picker-composite
*/
export class ColorPicker {
constructor() {
/**
* Set to `true` to disable the field.
* Use `disabled` to indicate that the field can normally be interacted
* with, but is currently disabled. This tells the user that if certain
* requirements are met, the field may become enabled again.
*/
this.disabled = false;
/**
* Set to `true` to make the field read-only.
* Use `readonly` when the field is only there to present the data it holds,
* and will not become possible for the current user to edit.
*/
this.readonly = false;
/**
* Set to `true` to indicate that the current value of the input field is
* invalid.
*/
this.invalid = false;
/**
* Set to `false` to disallow custom color values to be typed into the input field.
* Setting this to `false` does not completely disable the color picker.
* It will only allow users to pick from the provided color palette.
*/
this.manualInput = true;
this.isOpen = false;
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, placeholder: this.placeholder, invalid: this.invalid, onChange: this.handleChange, required: this.required, palette: this.palette, columnCount: this.paletteColumnCount, manualInput: this.manualInput })));
};
this.renderPickerTrigger = () => {
const background = this.value ? { '--background': this.value } : {};
return (h("button", { slot: "trigger", style: background, role: "button", onClick: this.openPopover, id: "tooltip-button", disabled: this.readonly || this.disabled }));
};
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);
};
}
disconnectedCallback() {
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 (h(Host, { key: '33ce47843041f982dc448a4f954a434418d376ba' }, this.renderTooltip(), this.renderPickerPalette(), h("limel-input-field", { key: '74e6e705f7633d4a0ebba49352c24592209421d5', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, readonly: this.readonly, disabled: this.disabled || !this.manualInput, invalid: this.invalid, placeholder: this.placeholder })));
}
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"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The label of the input field"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "label"
},
"helperText": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Helper text of the input field"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "helper-text"
},
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "tooltip-label"
},
"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"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "required"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to disable the field.\nUse `disabled` to indicate that the field can normally be interacted\nwith, but is currently disabled. This tells the user that if certain\nrequirements are met, the field may become enabled again."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"readonly": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to make the field read-only.\nUse `readonly` when the field is only there to present the data it holds,\nand will not become possible for the current user to edit."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "readonly",
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` to indicate that the current value of the input field is\ninvalid."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "invalid",
"defaultValue": "false"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The placeholder text shown inside the input field,\nwhen the field is focused and empty."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "placeholder"
},
"manualInput": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `false` to disallow custom color values to be typed into the input field.\nSetting this to `false` does not completely disable the color picker.\nIt will only allow users to pick from the provided color palette."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "manual-input",
"defaultValue": "true"
},
"palette": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<string | CustomColorSwatch>",
"resolved": "(string | CustomColorSwatch)[]",
"references": {
"Array": {
"location": "global",
"id": "global::Array"
},
"CustomColorSwatch": {
"location": "import",
"path": "./color-picker.types",
"id": "src/components/color-picker/color-picker.types.ts::CustomColorSwatch",
"referenceLocation": "CustomColorSwatch"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "An array of either color value strings, or objects with a `name` and a `value`,\nwhich replaces the default palette. Any valid CSS color format is accepted as value\n(HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.)."
},
"getter": false,
"setter": false
},
"paletteColumnCount": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Defines the number of columns in the color swatch grid.\nIf not provided, it will default to the number of colors in the palette;\nbut stops at a maximum of 25 columns."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "palette-column-count"
}
};
}
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": {}
}
}];
}
}