@limetech/lime-elements
Version:
84 lines (80 loc) • 8.25 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';
const colorPickerCss = () => ` "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){display:grid;gap:0.25rem;grid-template-columns:auto 1fr}button[slot=trigger]{all:unset;box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem;border-radius:0.5rem}button[slot=trigger]:not([disabled]):not([disabled=true]){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(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{will-change:color, background-color, box-shadow, transform}button[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button[slot=trigger]:not([disabled]):not([disabled=true]):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[slot=trigger]:not([disabled]):not([disabled=true]):hover,button[slot=trigger]:not([disabled]):not([disabled=true]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button[slot=trigger]:not([disabled]):not([disabled=true]):focus{outline:none}button[slot=trigger]:not([disabled]):not([disabled=true]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button[slot=trigger]:before,button[slot=trigger]:after{content:"";position:absolute;inset:0;border-radius:inherit}button[slot=trigger]: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}button[slot=trigger]:after{z-index:1;box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset;background:var(--background)}:host([readonly]:not([readonly=false])) limel-input-field{transform:translateX(calc(2.5rem / 4 * -1)) translateY(calc(2.5rem / 4))}:host([readonly]:not([readonly=false])) button[slot=trigger],:host([disabled]:not([disabled=false])) button[slot=trigger]{border:1px solid rgba(var(--contrast-700), 0.65)}`;
const ColorPicker = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.change = createEvent(this, "change");
/**
* 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 })));
}
};
ColorPicker.style = colorPickerCss();
export { ColorPicker as limel_color_picker };