@limetech/lime-elements/dist/esm/limel-color-picker-palette.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h } from './index-2714248e.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'];
/**
 *
 * @param color
 * @param brightness
 */
function getColorName(color, brightness) {
  return `--color-${color}-${brightness}`;
}
/**
 *
 * @param color
 * @param brightness
 */
function getCssColor(color, brightness) {
  return `rgb(var(${getColorName(color, brightness)}))`;
}

const colorPickerPaletteCss = "@charset \"UTF-8\";.color-palette{display:grid;gap:0.25rem;grid-auto-flow:column;margin:0.75rem auto 1.25rem auto;padding:1.25rem 0.75rem;background-color:rgb(var(--kompendium-contrast-300));border-radius:0.1875rem}.brightness-label,.swatch{display:flex;align-items:center;position:relative}.swatch{border-radius:3px;justify-content:center;color:rgba(var(--kompendium-color-white), 0.4);font-size:1.25rem;line-height:99%}.swatch:after{content:\"\";display:block;padding-top:100%}.swatch.hue{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;position:relative;color:rgb(var(--kompendium-contrast-900));padding-top:0.5rem;writing-mode:vertical-lr;justify-content:left}.brightness-label{font-family:\"Source Code Pro\", monospace;font-size:0.75rem;color:rgb(var(--kompendium-contrast-900));justify-content:start}.--color-red-lighter{background-color:rgb(var(--color-red-lighter))}.--color-red-light{background-color:rgb(var(--color-red-light))}.--color-red-default{background-color:rgb(var(--color-red-default))}.--color-red-dark{background-color:rgb(var(--color-red-dark))}.--color-red-darker{background-color:rgb(var(--color-red-darker))}.--color-pink-lighter{background-color:rgb(var(--color-pink-lighter))}.--color-pink-light{background-color:rgb(var(--color-pink-light))}.--color-pink-default{background-color:rgb(var(--color-pink-default))}.--color-pink-dark{background-color:rgb(var(--color-pink-dark))}.--color-pink-darker{background-color:rgb(var(--color-pink-darker))}.--color-magenta-lighter{background-color:rgb(var(--color-magenta-lighter))}.--color-magenta-light{background-color:rgb(var(--color-magenta-light))}.--color-magenta-default{background-color:rgb(var(--color-magenta-default))}.--color-magenta-dark{background-color:rgb(var(--color-magenta-dark))}.--color-magenta-darker{background-color:rgb(var(--color-magenta-darker))}.--color-purple-lighter{background-color:rgb(var(--color-purple-lighter))}.--color-purple-light{background-color:rgb(var(--color-purple-light))}.--color-purple-default{background-color:rgb(var(--color-purple-default))}.--color-purple-dark{background-color:rgb(var(--color-purple-dark))}.--color-purple-darker{background-color:rgb(var(--color-purple-darker))}.--color-violet-lighter{background-color:rgb(var(--color-violet-lighter))}.--color-violet-light{background-color:rgb(var(--color-violet-light))}.--color-violet-default{background-color:rgb(var(--color-violet-default))}.--color-violet-dark{background-color:rgb(var(--color-violet-dark))}.--color-violet-darker{background-color:rgb(var(--color-violet-darker))}.--color-indigo-lighter{background-color:rgb(var(--color-indigo-lighter))}.--color-indigo-light{background-color:rgb(var(--color-indigo-light))}.--color-indigo-default{background-color:rgb(var(--color-indigo-default))}.--color-indigo-dark{background-color:rgb(var(--color-indigo-dark))}.--color-indigo-darker{background-color:rgb(var(--color-indigo-darker))}.--color-blue-lighter{background-color:rgb(var(--color-blue-lighter))}.--color-blue-light{background-color:rgb(var(--color-blue-light))}.--color-blue-default{background-color:rgb(var(--color-blue-default))}.--color-blue-dark{background-color:rgb(var(--color-blue-dark))}.--color-blue-darker{background-color:rgb(var(--color-blue-darker))}.--color-sky-lighter{background-color:rgb(var(--color-sky-lighter))}.--color-sky-light{background-color:rgb(var(--color-sky-light))}.--color-sky-default{background-color:rgb(var(--color-sky-default))}.--color-sky-dark{background-color:rgb(var(--color-sky-dark))}.--color-sky-darker{background-color:rgb(var(--color-sky-darker))}.--color-cyan-lighter{background-color:rgb(var(--color-cyan-lighter))}.--color-cyan-light{background-color:rgb(var(--color-cyan-light))}.--color-cyan-default{background-color:rgb(var(--color-cyan-default))}.--color-cyan-dark{background-color:rgb(var(--color-cyan-dark))}.--color-cyan-darker{background-color:rgb(var(--color-cyan-darker))}.--color-teal-lighter{background-color:rgb(var(--color-teal-lighter))}.--color-teal-light{background-color:rgb(var(--color-teal-light))}.--color-teal-default{background-color:rgb(var(--color-teal-default))}.--color-teal-dark{background-color:rgb(var(--color-teal-dark))}.--color-teal-darker{background-color:rgb(var(--color-teal-darker))}.--color-green-lighter{background-color:rgb(var(--color-green-lighter))}.--color-green-light{background-color:rgb(var(--color-green-light))}.--color-green-default{background-color:rgb(var(--color-green-default))}.--color-green-dark{background-color:rgb(var(--color-green-dark))}.--color-green-darker{background-color:rgb(var(--color-green-darker))}.--color-lime-lighter{background-color:rgb(var(--color-lime-lighter))}.--color-lime-light{background-color:rgb(var(--color-lime-light))}.--color-lime-default{background-color:rgb(var(--color-lime-default))}.--color-lime-dark{background-color:rgb(var(--color-lime-dark))}.--color-lime-darker{background-color:rgb(var(--color-lime-darker))}.--color-grass-lighter{background-color:rgb(var(--color-grass-lighter))}.--color-grass-light{background-color:rgb(var(--color-grass-light))}.--color-grass-default{background-color:rgb(var(--color-grass-default))}.--color-grass-dark{background-color:rgb(var(--color-grass-dark))}.--color-grass-darker{background-color:rgb(var(--color-grass-darker))}.--color-yellow-lighter{background-color:rgb(var(--color-yellow-lighter))}.--color-yellow-light{background-color:rgb(var(--color-yellow-light))}.--color-yellow-default{background-color:rgb(var(--color-yellow-default))}.--color-yellow-dark{background-color:rgb(var(--color-yellow-dark))}.--color-yellow-darker{background-color:rgb(var(--color-yellow-darker))}.--color-amber-lighter{background-color:rgb(var(--color-amber-lighter))}.--color-amber-light{background-color:rgb(var(--color-amber-light))}.--color-amber-default{background-color:rgb(var(--color-amber-default))}.--color-amber-dark{background-color:rgb(var(--color-amber-dark))}.--color-amber-darker{background-color:rgb(var(--color-amber-darker))}.--color-orange-lighter{background-color:rgb(var(--color-orange-lighter))}.--color-orange-light{background-color:rgb(var(--color-orange-light))}.--color-orange-default{background-color:rgb(var(--color-orange-default))}.--color-orange-dark{background-color:rgb(var(--color-orange-dark))}.--color-orange-darker{background-color:rgb(var(--color-orange-darker))}.--color-coral-lighter{background-color:rgb(var(--color-coral-lighter))}.--color-coral-light{background-color:rgb(var(--color-coral-light))}.--color-coral-default{background-color:rgb(var(--color-coral-default))}.--color-coral-dark{background-color:rgb(var(--color-coral-dark))}.--color-coral-darker{background-color:rgb(var(--color-coral-darker))}.--color-brown-lighter{background-color:rgb(var(--color-brown-lighter))}.--color-brown-light{background-color:rgb(var(--color-brown-light))}.--color-brown-default{background-color:rgb(var(--color-brown-default))}.--color-brown-dark{background-color:rgb(var(--color-brown-dark))}.--color-brown-darker{background-color:rgb(var(--color-brown-darker))}.--color-gray-lighter{background-color:rgb(var(--color-gray-lighter))}.--color-gray-light{background-color:rgb(var(--color-gray-light))}.--color-gray-default{background-color:rgb(var(--color-gray-default))}.--color-gray-dark{background-color:rgb(var(--color-gray-dark))}.--color-gray-darker{background-color:rgb(var(--color-gray-darker))}.--color-glaucous-lighter{background-color:rgb(var(--color-glaucous-lighter))}.--color-glaucous-light{background-color:rgb(var(--color-glaucous-light))}.--color-glaucous-default{background-color:rgb(var(--color-glaucous-default))}.--color-glaucous-dark{background-color:rgb(var(--color-glaucous-dark))}.--color-glaucous-darker{background-color:rgb(var(--color-glaucous-darker))}.--contrast-100{color:rgb(var(--contrast-900));background-color:rgb(var(--contrast-100))}.--contrast-200{color:rgb(var(--contrast-1000));background-color:rgb(var(--contrast-200))}.--contrast-300{color:rgb(var(--contrast-1100));background-color:rgb(var(--contrast-300))}.--contrast-400{color:rgb(var(--contrast-1200));background-color:rgb(var(--contrast-400))}.--contrast-500{color:rgb(var(--contrast-1300));background-color:rgb(var(--contrast-500))}.--contrast-600{color:rgb(var(--contrast-1400));background-color:rgb(var(--contrast-600))}.--contrast-700{color:rgb(var(--contrast-1500));background-color:rgb(var(--contrast-700))}.--contrast-800{color:rgb(var(--contrast-1600));background-color:rgb(var(--contrast-800))}.--contrast-900{color:rgb(var(--contrast-1700));background-color:rgb(var(--contrast-900))}.--contrast-1000{color:rgb(var(--contrast-100));background-color:rgb(var(--contrast-1000))}.--contrast-1100{color:rgb(var(--contrast-200));background-color:rgb(var(--contrast-1100))}.--contrast-1200{color:rgb(var(--contrast-300));background-color:rgb(var(--contrast-1200))}.--contrast-1300{color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-1300))}.--contrast-1400{color:rgb(var(--contrast-500));background-color:rgb(var(--contrast-1400))}.--contrast-1500{color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-1500))}.--contrast-1600{color:rgb(var(--contrast-700));background-color:rgb(var(--contrast-1600))}.--contrast-1700{color:rgb(var(--contrast-800));background-color:rgb(var(--contrast-1700))}.--color-white{color:rgb(var(--color-black));background-color:rgb(var(--color-white))}.--color-black{color:rgb(var(--color-white));background-color:rgb(var(--color-black))}.color-palette{grid-template-rows:repeat(5, 1fr) auto;grid-template-columns:repeat(20, 1fr) auto}.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{position:relative;--popover-surface-width:50rem}.color-picker{display:grid;gap:0.25rem;grid-template-columns:auto 1fr}.picker-trigger{all:unset;border-radius:0.5rem;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)}.picker-trigger:hover,.picker-trigger:focus,.picker-trigger:focus-visible{will-change:color, background-color, box-shadow, transform}.picker-trigger:hover,.picker-trigger: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)}.picker-trigger:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}.picker-trigger:hover,.picker-trigger:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.picker-trigger:focus{outline:none}.picker-trigger:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.picker-trigger:after{box-shadow:0 0 0 0.25rem rgb(var(--contrast-100)) inset}.chosen-color-preview,.picker-trigger{box-sizing:border-box;position:relative;isolation:isolate;width:2.5rem;height:2.5rem}.chosen-color-preview:before,.chosen-color-preview:after,.picker-trigger:before,.picker-trigger:after{content:\"\";position:absolute;inset:0;border-radius:inherit}.chosen-color-preview:before,.picker-trigger:before{background-image:url(\"data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%208%208%27%20style%3D%27fill-rule%3Aevenodd%3B%27%3E%3Cpath%20fill%3D%27rgba(186%2C186%2C192%2C0.16)%27%20d%3D%27M0%200h4v4H0zM4%204h4v4H4z%27%2F%3E%3C%2Fsvg%3E\");background-size:0.5rem;z-index:0}.chosen-color-preview:after,.picker-trigger:after{background:var(--background);z-index:1}:host([readonly]) .picker-trigger:hover,:host([readonly]) .picker-trigger:active{cursor:default;box-shadow:var(--button-shadow-normal);transform:none}.chosen-color-input[readonly]{transform:translateX(calc( 2.5rem / 4 * -1 )) translateY(calc(2.5rem / 4))}:host{border-radius:0.75rem;background-color:rgb(var(--kompendium-contrast-300))}.color-picker-palette{display:grid;gap:0.25rem;grid-auto-flow:column;grid-template-columns:repeat(20, 1fr);grid-template-rows:repeat(4, 1fr) auto;margin:1rem}.chosen-color-name{box-sizing:border-box;padding:1rem;display:grid;grid-template-columns:1fr auto;gap:0.5rem}.chosen-color-preview{border:1px solid rgba(var(--contrast-700), 0.65);border-radius:50%}.swatch:not(.hue){border:none;aspect-ratio:1;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer}.swatch:not(.hue):focus{outline:none}.swatch:not(.hue):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.swatch:not(.hue):hover{box-shadow:var(--button-shadow-hovered)}.swatch:not(.hue):active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}.swatch:not(.hue):focus-visible{box-shadow:var(--shadow-depth-8-focused), 0 0 0 0.25rem rgb(var(--contrast-100)) inset}.swatch--selected{border-radius:50%}";

const Palette = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.renderSwatches = () => {
      return colors.map((color) => {
        return brightnesses.map(this.renderSwatch(color));
      });
    };
    this.renderSwatch = (color) => (brightness) => {
      const colorName = getColorName(color, brightness);
      const classList = {
        swatch: true,
        [colorName]: true,
        'swatch--selected': this.value === getCssColor(color, brightness),
      };
      return (h("button", { class: classList, onClick: this.handleClick(color, brightness) }));
    };
    this.handleChange = (event) => {
      event.stopPropagation();
      this.change.emit(event.detail);
    };
    this.handleClick = (color, brightness) => (event) => {
      const value = getCssColor(color, brightness);
      event.stopPropagation();
      this.change.emit(value);
    };
    this.value = undefined;
    this.label = undefined;
    this.helperText = undefined;
    this.required = undefined;
  }
  render() {
    const background = this.value ? { '--background': this.value } : {};
    return [
      h("div", { class: "color-picker-palette" }, this.renderSwatches()),
      h("div", { class: "chosen-color-name" }, h("limel-input-field", { label: this.label, helperText: this.helperText, value: this.value, onChange: this.handleChange, required: this.required }), h("div", { class: "chosen-color-preview", style: background })),
    ];
  }
  static get delegatesFocus() { return true; }
};
Palette.style = colorPickerPaletteCss;

export { Palette as limel_color_picker_palette };

//# sourceMappingURL=limel-color-picker-palette.entry.js.map