@limetech/lime-elements
Version:
306 lines (305 loc) • 11.3 kB
JavaScript
import { h } from "@stencil/core";
import { brightnesses, colors, createSwatch } from "./swatches";
/**
* @private
*/
export class Palette {
constructor() {
/**
* 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.
*/
this.manualInput = true;
this.renderSwatches = () => {
return this.getPalette().map(this.renderSwatchButton);
};
this.renderSwatchButton = (swatch, index) => {
const isSelected = this.value === swatch.value;
const classList = {
swatch: true,
'swatch--selected': isSelected,
'custom-swatch': this.usesCustomPalette(),
};
return (h("button", { class: classList, style: { '--limel-color-picker-swatch-color': swatch.value }, title: swatch.name, disabled: swatch.disabled, "data-index": index, key: index, onClick: this.handleSwatchClick(swatch.value) }));
};
this.handleChange = (event) => {
event.stopPropagation();
this.change.emit(event.detail);
};
this.handleSwatchClick = (value) => (event) => {
event.stopPropagation();
const newValue = this.value === value ? '' : value;
this.change.emit(newValue);
};
}
render() {
const background = this.value ? { '--background': this.value } : {};
return [
h("div", { key: '184f8b9b74ebeb5611aa28ff3b14dbb225118af2', class: "color-picker-palette", style: {
'--color-picker-column-count': `${this.getColumnCount()}`,
} }, this.renderSwatches()),
h("div", { key: '27b19d8906e5f28c86c27476ebe0287b6043eb66', class: "chosen-color-name" }, h("limel-input-field", { key: 'd055b72d5570bcb085b728eb0cf4698b80a44643', label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required, invalid: this.invalid, placeholder: this.placeholder, disabled: !this.manualInput }), h("div", { key: '051cc6a16e9659aabb01f4b6b9f0b30036d440b4', class: "chosen-color-preview", style: background })),
];
}
getPalette() {
if (this.usesCustomPalette()) {
return (this.palette || []).map((entry) => {
const normalized = this.normalizeEntry(entry);
return {
name: normalized.name || normalized.value,
value: normalized.value,
disabled: normalized.disabled,
};
});
}
// Order default swatches by brightness first, then by color.
// This gives a more intuitive CSS grid layout logic, and
// enables adding the `columnCount` prop.
const swatches = [];
for (const b of brightnesses) {
for (const color of colors) {
swatches.push(createSwatch(color, b));
}
}
return swatches;
}
normalizeEntry(entry) {
if (typeof entry === 'string') {
return { value: entry };
}
return entry;
}
usesCustomPalette() {
var _a;
return ((_a = this.palette) === null || _a === void 0 ? void 0 : _a.length) > 0;
}
getColumnCount() {
if (this.columnCount > 0) {
return this.columnCount;
}
// Default palette: fixed 20 columns (one per base color)
if (!this.usesCustomPalette()) {
return 20;
}
// Custom palette: span all provided swatches unless empty
const palette = this.getPalette();
return palette.length > 0 ? palette.length : 1;
}
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"
},
"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": "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"
},
"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"
},
"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"
},
"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"
},
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "manual-input",
"defaultValue": "true"
},
"columnCount": {
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "column-count"
},
"palette": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "CustomPalette",
"resolved": "(string | CustomColorSwatch)[]",
"references": {
"CustomPalette": {
"location": "import",
"path": "./color-picker.types",
"id": "src/components/color-picker/color-picker.types.ts::CustomPalette",
"referenceLocation": "CustomPalette"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Custom color palette to use instead of Lime palette. Internal prop passed from parent."
},
"getter": false,
"setter": false
}
};
}
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": {}
}
}];
}
}