@limetech/lime-elements
Version:
159 lines (154 loc) • 10.6 kB
JavaScript
import { r as registerInstance, c as createEvent, h } from './index-DBTJNfo7.js';
const colors = [
'red',
'pink',
'magenta',
'purple',
'violet',
'indigo',
'blue',
'sky',
'cyan',
'teal',
'green',
'lime',
'grass',
'yellow',
'amber',
'orange',
'coral',
'brown',
'gray',
'glaucous',
];
const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];
/**
* Returns the CSS variable name holding the RGB triplet for the color & brightness.
*
* @param color the base color identifier (e.g. "red", "blue")
* @param brightness the brightness variant (e.g. "light", "default")
* @returns CSS variable name in the form --color-{color}-{brightness}
*/
function getColorName(color, brightness) {
return `--color-${color}-${brightness}`;
}
/**
* Swatch value: inline CSS color value in the required format: rgb(var(--color-*-*))
* @param color
* @param brightness
*/
function getSwatchValue(color, brightness) {
return `rgb(var(${getColorName(color, brightness)}))`;
}
/**
* Swatch name: human readable label like "red default"
* @param color
* @param brightness
*/
function getSwatchName(color, brightness) {
return `${color} ${brightness}`;
}
/**
* Convenience factory returning both name & value.
* @param color
* @param brightness
*/
function createSwatch(color, brightness) {
return {
name: getSwatchName(color, brightness),
value: getSwatchValue(color, brightness),
};
}
const colorPickerPaletteCss = () => ` "UTF-8";.picker-trigger[style="--background:lime-magenta;"]:after,.chosen-color-preview[style="--background:lime-magenta;"]:after{background-color:var(--lime-magenta)}.picker-trigger[style="--background:lime-blue;"]:after,.chosen-color-preview[style="--background:lime-blue;"]:after{background-color:var(--lime-blue)}.picker-trigger[style="--background:lime-orange;"]:after,.chosen-color-preview[style="--background:lime-orange;"]:after{background-color:var(--lime-orange)}.picker-trigger[style="--background:lime-green;"]:after,.chosen-color-preview[style="--background:lime-green;"]:after{background-color:var(--lime-green)}.picker-trigger[style="--background:lime-red;"]:after,.chosen-color-preview[style="--background:lime-red;"]:after{background-color:var(--lime-red)}.picker-trigger[style="--background:lime-dark-blue;"]:after,.chosen-color-preview[style="--background:lime-dark-blue;"]:after{background-color:var(--lime-dark-blue)}.picker-trigger[style="--background:lime-turquoise;"]:after,.chosen-color-preview[style="--background:lime-turquoise;"]:after{background-color:var(--lime-turquoise)}.picker-trigger[style="--background:lime-yellow;"]:after,.chosen-color-preview[style="--background:lime-yellow;"]:after{background-color:var(--lime-yellow)}.picker-trigger[style="--background:lime-light-grey;"]:after,.chosen-color-preview[style="--background:lime-light-grey;"]:after{background-color:var(--lime-light-grey)}:host(limel-color-picker-palette){--limel-color-palette-gap:0.25rem;--limel-color-palette-max-column-count:25;--limel-color-palette-min-width:8rem;box-sizing:border-box;border-radius:0.75rem;display:flex;flex-direction:column;gap:1rem;padding:0.75rem}*,*:before,:after{box-sizing:border-box}.color-picker-palette{display:grid;gap:var(--limel-color-palette-gap);grid-template-columns:repeat(min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)), 1fr);width:100%;max-width:58rem;min-width:var(--limel-color-palette-min-width)}.chosen-color-name{display:flex;gap:0.5rem}limel-input-field{flex-grow:1;width:min-content}.chosen-color-preview{flex-shrink:0;isolation:isolate;position:relative;width:2.5rem;height:2.5rem;border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.chosen-color-preview:before,.chosen-color-preview:after{content:"";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%208%208'%20style='fill-rule:evenodd;'%3E%3Cpath%20fill='rgba(186,186,192,0.16)'%20d='M0%200h4v4H0zM4%204h4v4H4z'/%3E%3C/svg%3E");background-size:0.5rem;z-index:0}.chosen-color-preview:after{background:var(--background);z-index:1}button.swatch{all:unset;position:relative;display:flex;justify-content:center;align-items:center;max-width:3rem;min-width:max(2rem, 100% / min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - (min(var(--color-picker-column-count), var(--limel-color-palette-max-column-count)) - 1) * var(--limel-color-palette-gap));aspect-ratio:1;border-radius:0.1875rem}button.swatch:focus{outline:none}button.swatch:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.swatch{background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus,button.swatch:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--limel-color-picker-swatch-color)}button.swatch:not([disabled]):hover{box-shadow:var(--button-shadow-hovered)}button.swatch:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.swatch:not([disabled]):hover,button.swatch:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.swatch:focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.125rem rgb(var(--contrast-100)) inset}button.swatch[disabled]{cursor:not-allowed;box-shadow:0 0 0 0.125rem rgb(var(--contrast-100), 0.6) inset}button.swatch[disabled]:after{content:"";position:absolute;inset:0;margin:auto;width:0.125rem;height:100%;opacity:0.6;rotate:45deg;border-radius:1rem;background-color:rgb(var(--contrast-100))}button.swatch--selected{box-shadow:var(--button-shadow-inset);border-radius:50%}`;
const Palette = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.change = createEvent(this, "change");
/**
* 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 delegatesFocus() { return true; }
};
Palette.style = colorPickerPaletteCss();
export { Palette as limel_color_picker_palette };