@limetech/lime-elements 38.24.4 → 38.25.0

package/dist/types/components.d.ts

@@ -23,6 +23,7 @@ import { MenuItem as MenuItem1 } from "./components";
 import { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 import { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 import { Action } from "./components/collapsible-section/action";
+import { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 import { Config } from "./global/config";
 import { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 import { DockItem } from "./components/dock/dock.types";
@@ -66,6 +67,7 @@ export { MenuItem as MenuItem1 } from "./components";
 export { CircularProgressSize } from "./components/circular-progress/circular-progress.types";
 export { ColorScheme, Language } from "./components/code-editor/code-editor.types";
 export { Action } from "./components/collapsible-section/action";
+export { CustomColorSwatch, CustomPalette } from "./components/color-picker/color-picker.types";
 export { Config } from "./global/config";
 export { ClosingActions, DialogHeading } from "./components/dialog/dialog.types";
 export { DockItem } from "./components/dock/dock.types";
@@ -947,6 +949,7 @@ export namespace Components {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface LimelColorPicker {
         /**
@@ -957,6 +960,14 @@ export namespace Components {
           * The label of the input field
          */
         "label": string;
+        /**
+          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
+         */
+        "palette"?: Array<string | CustomColorSwatch>;
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
+         */
+        "paletteColumnCount"?: number;
         /**
           * Set to `true` if a value is readonly. This makes the component un-interactive.
          */
@@ -978,6 +989,10 @@ export namespace Components {
      * @private 
      */
     interface LimelColorPickerPalette {
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
+         */
+        "columnCount"?: number;
         /**
           * Helper text of the input field
          */
@@ -986,6 +1001,10 @@ export namespace Components {
           * Label of the input field
          */
         "label": string;
+        /**
+          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
+         */
+        "palette"?: CustomPalette;
         /**
           * Set to `true` if a value is required
          */
@@ -3865,6 +3884,7 @@ declare global {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface HTMLLimelColorPickerElement extends Components.LimelColorPicker, HTMLStencilElement {
     }
@@ -5975,6 +5995,7 @@ declare namespace LocalJSX {
      * :::
      * @exampleComponent limel-example-color-picker
      * @exampleComponent limel-example-color-picker-readonly
+     * @exampleComponent limel-example-color-picker-custom-palette
      */
     interface LimelColorPicker {
         /**
@@ -5989,6 +6010,14 @@ declare namespace LocalJSX {
           * Emits chosen value to the parent component
          */
         "onChange"?: (event: LimelColorPickerCustomEvent<string>) => void;
+        /**
+          * An array of either color value strings, or objects with a `name` and a `value`, which replaces the default palette. Any valid CSS color format is accepted as value (HEX, RGB/A, HSL, HWB, color-mix(), named colors, etc.).
+         */
+        "palette"?: Array<string | CustomColorSwatch>;
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette; but stops at a maximum of 25 columns.
+         */
+        "paletteColumnCount"?: number;
         /**
           * Set to `true` if a value is readonly. This makes the component un-interactive.
          */
@@ -6010,6 +6039,10 @@ declare namespace LocalJSX {
      * @private 
      */
     interface LimelColorPickerPalette {
+        /**
+          * Defines the number of columns in the color swatch grid. If not provided, it will default to the number of colors in the palette.
+         */
+        "columnCount"?: number;
         /**
           * Helper text of the input field
          */
@@ -6022,6 +6055,10 @@ declare namespace LocalJSX {
           * Emits chosen value to the parent component
          */
         "onChange"?: (event: LimelColorPickerPaletteCustomEvent<string>) => void;
+        /**
+          * Custom color palette to use instead of Lime palette. Internal prop passed from parent.
+         */
+        "palette"?: CustomPalette;
         /**
           * Set to `true` if a value is required
          */
@@ -8984,6 +9021,7 @@ declare module "@stencil/core" {
              * :::
              * @exampleComponent limel-example-color-picker
              * @exampleComponent limel-example-color-picker-readonly
+             * @exampleComponent limel-example-color-picker-custom-palette
              */
             "limel-color-picker": LocalJSX.LimelColorPicker & JSXBase.HTMLAttributes<HTMLLimelColorPickerElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.24.4",
+  "version": "38.25.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-63f2f6b8.entry.js

@@ -1,2 +0,0 @@
-import{r,c as o,h as a}from"./p-288f0842.js";const l=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"];const c=["lighter","light","default","dark","darker"];function e(r,o){return`--color-${r}-${o}`}function t(r,o){return`rgb(var(${e(r,o)}))`}const g='@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 n=class{constructor(g){r(this,g);this.change=o(this,"change",7);this.renderSwatches=()=>l.map((r=>c.map(this.renderSwatch(r))));this.renderSwatch=r=>o=>{const l=e(r,o);const c={swatch:true,[l]:true,"swatch--selected":this.value===t(r,o)};return a("button",{class:c,onClick:this.handleClick(r,o)})};this.handleChange=r=>{r.stopPropagation();this.change.emit(r.detail)};this.handleClick=(r,o)=>a=>{const l=t(r,o);a.stopPropagation();this.change.emit(l)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.required=undefined}render(){const r=this.value?{"--background":this.value}:{};return[a("div",{class:"color-picker-palette"},this.renderSwatches()),a("div",{class:"chosen-color-name"},a("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required}),a("div",{class:"chosen-color-preview",style:r}))]}static get delegatesFocus(){return true}};n.style=g;export{n as limel_color_picker_palette};
-//# sourceMappingURL=p-63f2f6b8.entry.js.map

package/dist/lime-elements/p-63f2f6b8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colors","brightnesses","getColorName","color","brightness","getCssColor","colorPickerPaletteCss","Palette","this","renderSwatches","map","renderSwatch","colorName","classList","swatch","value","h","class","onClick","handleClick","handleChange","event","stopPropagation","change","emit","detail","render","background","label","helperText","onChange","required","style"],"sources":["./src/components/color-picker/swatches.ts","./src/components/color-picker/color-picker-palette.scss?tag=limel-color-picker-palette&encapsulation=shadow","./src/components/color-picker/color-picker-palette.tsx"],"sourcesContent":["export const colors = [\n    'red',\n    'pink',\n    'magenta',\n    'purple',\n    'violet',\n    'indigo',\n    'blue',\n    'sky',\n    'cyan',\n    'teal',\n    'green',\n    'lime',\n    'grass',\n    'yellow',\n    'amber',\n    'orange',\n    'coral',\n    'brown',\n    'gray',\n    'glaucous',\n];\n\nexport const brightnesses = ['lighter', 'light', 'default', 'dark', 'darker'];\n\n/**\n *\n * @param color\n * @param brightness\n */\nexport function getColorName(color: string, brightness: string): string {\n    return `--color-${color}-${brightness}`;\n}\n\n/**\n *\n * @param color\n * @param brightness\n */\nexport function getCssColor(color: string, brightness: string): string {\n    return `rgb(var(${getColorName(color, brightness)}))`;\n}\n","@use '../../design-guidelines/color-system/examples/extended-color-palette';\n@use '../../style/mixins';\n@import './color-picker';\n\n:host {\n    border-radius: 0.75rem; // is like popover's default `--popover-border-radius`\n    background-color: rgb(var(--kompendium-contrast-300));\n}\n\n.color-picker-palette {\n    display: grid;\n    gap: 0.25rem;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(20, 1fr);\n    grid-template-rows: repeat(4, 1fr) auto;\n    margin: 1rem;\n}\n\n.chosen-color-name {\n    box-sizing: border-box;\n    padding: 1rem;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    gap: 0.5rem;\n}\n\n.chosen-color-preview {\n    border: 1px solid rgba(var(--contrast-700), 0.65); // color is the same as\n    // colors in shared_input-select-picker.scss\n    border-radius: 50%;\n}\n\n.swatch:not(.hue) {\n    border: none;\n    aspect-ratio: 1;\n\n    @include mixins.visualize-keyboard-focus();\n\n    // We could use the `@include mixins.is-flat-clickable();` mixin\n    // But its `background-color` arguments would interfere with the\n    // styles here. So we just copy/pasted the useful parts of the mixin here\n    transition:\n        color 0.2s ease,\n        background-color 0.2s ease,\n        box-shadow 0.2s ease,\n        transform 0.1s ease-out;\n\n    &:hover {\n        box-shadow: var(--button-shadow-hovered);\n    }\n\n    &:active {\n        box-shadow: var(--button-shadow-pressed);\n\n        transform: translate3d(0, 0.08rem, 0);\n    }\n    cursor: pointer;\n\n    &:focus-visible {\n        box-shadow:\n            var(--shadow-depth-8-focused),\n            0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.swatch--selected {\n    border-radius: 50%;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\nimport { brightnesses, colors, getColorName, getCssColor } from './swatches';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-color-picker-palette',\n    shadow: { delegatesFocus: true },\n    styleUrl: 'color-picker-palette.scss',\n})\nexport class Palette implements FormComponent {\n    /**\n     * Color value that is manually typed by the user\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * Label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    public render() {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return [\n            <div class=\"color-picker-palette\">{this.renderSwatches()}</div>,\n            <div class=\"chosen-color-name\">\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n                <div class=\"chosen-color-preview\" style={background} />\n            </div>,\n        ];\n    }\n\n    private renderSwatches = () => {\n        return colors.map((color) => {\n            return brightnesses.map(this.renderSwatch(color));\n        });\n    };\n\n    private renderSwatch = (color: string) => (brightness: string) => {\n        const colorName = getColorName(color, brightness);\n        const classList = {\n            swatch: true,\n            [colorName]: true,\n            'swatch--selected': this.value === getCssColor(color, brightness),\n        };\n\n        return (\n            <button\n                class={classList}\n                onClick={this.handleClick(color, brightness)}\n            />\n        );\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n\n    private handleClick =\n        (color: string, brightness: string) => (event: MouseEvent) => {\n            const value = getCssColor(color, brightness);\n            event.stopPropagation();\n            this.change.emit(value);\n        };\n}\n"],"mappings":"6CAAO,MAAMA,EAAS,CAClB,MACA,OACA,UACA,SACA,SACA,SACA,OACA,MACA,OACA,OACA,QACA,OACA,QACA,SACA,QACA,SACA,QACA,QACA,OACA,YAGG,MAAMC,EAAe,CAAC,UAAW,QAAS,UAAW,OAAQ,U,SAOpDC,EAAaC,EAAeC,GACxC,MAAO,WAAWD,KAASC,GAC/B,C,SAOgBC,EAAYF,EAAeC,GACvC,MAAO,WAAWF,EAAaC,EAAOC,MAC1C,CCzCA,MAAME,EAAwB,wwc,MCYjBC,EAAO,M,wDAiDRC,KAAAC,eAAiB,IACdT,EAAOU,KAAKP,GACRF,EAAaS,IAAIF,KAAKG,aAAaR,MAI1CK,KAAAG,aAAgBR,GAAmBC,IACvC,MAAMQ,EAAYV,EAAaC,EAAOC,GACtC,MAAMS,EAAY,CACdC,OAAQ,KACRF,CAACA,GAAY,KACb,mBAAoBJ,KAAKO,QAAUV,EAAYF,EAAOC,IAG1D,OACIY,EAAA,UACIC,MAAOJ,EACPK,QAASV,KAAKW,YAAYhB,EAAOC,IACnC,EAIFI,KAAAY,aAAgBC,IACpBA,EAAMC,kBACNd,KAAKe,OAAOC,KAAKH,EAAMI,OAAO,EAG1BjB,KAAAW,YACJ,CAAChB,EAAeC,IAAwBiB,IACpC,MAAMN,EAAQV,EAAYF,EAAOC,GACjCiB,EAAMC,kBACNd,KAAKe,OAAOC,KAAKT,EAAM,E,4FAjDxBW,SACH,MAAMC,EAAanB,KAAKO,MAAQ,CAAE,eAAgBP,KAAKO,OAAU,GAEjE,MAAO,CACHC,EAAA,OAAKC,MAAM,wBAAwBT,KAAKC,kBACxCO,EAAA,OAAKC,MAAM,qBACPD,EAAA,qBACIY,MAAOpB,KAAKoB,MACZC,WAAYrB,KAAKqB,WACjBd,MAAOP,KAAKO,MACZe,SAAUtB,KAAKY,aACfW,SAAUvB,KAAKuB,WAEnBf,EAAA,OAAKC,MAAM,uBAAuBe,MAAOL,K"}

package/dist/lime-elements/p-bc5bbdf6.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as r,h as o}from"./p-288f0842.js";const i='@charset "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{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))}';const t=class{constructor(i){e(this,i);this.change=r(this,"change",7);this.shouldFocus=false;this.renderTooltip=()=>{if(!this.readonly&&this.tooltipLabel){return o("limel-tooltip",{label:this.tooltipLabel,elementId:"tooltip-button"})}};this.renderPickerPalette=()=>{if(this.readonly){return this.renderPickerTrigger()}return o("limel-popover",{open:this.isOpen,openDirection:"bottom-start",onClose:this.onPopoverClose},this.renderPickerTrigger(),o("limel-color-picker-palette",{ref:this.setColorPickerPaletteElement,value:this.value,label:this.label,helperText:this.helperText,onChange:this.handleChange,required:this.required}))};this.renderPickerTrigger=()=>{const e=this.value?{"--background":this.value}:{};return o("button",{class:"picker-trigger",slot:"trigger",style:e,role:"button",onClick:this.openPopover,id:"tooltip-button"})};this.setColorPickerPaletteElement=e=>{this.contentElement=e};this.openPopover=e=>{e.stopPropagation();this.isOpen=true;this.shouldFocus=this.isOpen};this.onPopoverClose=e=>{e.stopPropagation();this.isOpen=false};this.handleChange=e=>{e.stopPropagation();this.change.emit(e.detail)};this.value=undefined;this.label=undefined;this.helperText=undefined;this.tooltipLabel=undefined;this.required=undefined;this.readonly=undefined;this.isOpen=false}componentDidRender(){var e;if(this.shouldFocus&&this.isOpen){this.shouldFocus=false;(e=this.contentElement)===null||e===void 0?void 0:e.focus()}}render(){return[this.renderTooltip(),o("div",{class:"color-picker"},this.renderPickerPalette(),o("limel-input-field",{label:this.label,helperText:this.helperText,value:this.value,onChange:this.handleChange,required:this.required,readonly:this.readonly,class:"chosen-color-input"}))]}};t.style=i;export{t as limel_color_picker};
-//# sourceMappingURL=p-bc5bbdf6.entry.js.map

package/dist/lime-elements/p-bc5bbdf6.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colorPickerCss","ColorPicker","this","shouldFocus","renderTooltip","readonly","tooltipLabel","h","label","elementId","renderPickerPalette","renderPickerTrigger","open","isOpen","openDirection","onClose","onPopoverClose","ref","setColorPickerPaletteElement","value","helperText","onChange","handleChange","required","background","class","slot","style","role","onClick","openPopover","id","element","contentElement","event","stopPropagation","change","emit","detail","componentDidRender","_a","focus","render"],"sources":["./src/components/color-picker/color-picker.scss?tag=limel-color-picker&encapsulation=shadow","./src/components/color-picker/color-picker.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n@import './partial-styles/lime-admin-hack';\n\n:host {\n    position: relative;\n    --popover-surface-width: 50rem;\n}\n\n.color-picker {\n    display: grid;\n    gap: 0.25rem;\n    grid-template-columns: auto 1fr;\n}\n\n.picker-trigger {\n    all: unset;\n    border-radius: 0.5rem;\n    @include mixins.is-elevated-clickable();\n    @include mixins.visualize-keyboard-focus();\n\n    &:after {\n        box-shadow: 0 0 0 0.25rem rgb(var(--contrast-100)) inset;\n    }\n}\n\n.chosen-color-preview,\n.picker-trigger {\n    box-sizing: border-box;\n    position: relative;\n    isolation: isolate;\n    width: shared_input-select-picker.$height-of-mdc-text-field;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n\n    &:before,\n    &:after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n    }\n\n    &:before {\n        @include mixins.add-chessboard-background();\n        z-index: 0;\n    }\n\n    &:after {\n        background: var(--background);\n        z-index: 1;\n    }\n}\n\n:host([readonly]) {\n    .picker-trigger {\n        &:hover,\n        &:active {\n            cursor: default;\n            box-shadow: var(--button-shadow-normal);\n            transform: none;\n        }\n    }\n}\n\n.chosen-color-input[readonly] {\n    transform: translateX(\n            calc(\n                #{shared_input-select-picker.$height-of-mdc-text-field} / 4 * -1\n            )\n        )\n        translateY(\n            calc(#{shared_input-select-picker.$height-of-mdc-text-field} / 4)\n        );\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\nimport { FormComponent } from '../form/form.types';\n\n/**\n * This component enables you to select a swatch from out color palette, simply\n * by clicking on it. You can then copy the css variable name of the chosen color\n * and use it where desired.\n *\n * The color picker can also show you a preview of any valid color name or color value.\n *\n * :::note\n * Make sure to read our [guidelines about usage of colors](/#/DesignGuidelines/color-system.md/) from our palette.\n * :::\n *\n * @exampleComponent limel-example-color-picker\n * @exampleComponent limel-example-color-picker-readonly\n */\n@Component({\n    tag: 'limel-color-picker',\n    shadow: true,\n    styleUrl: 'color-picker.scss',\n})\nexport class ColorPicker implements FormComponent {\n    /**\n     * Name or code of the chosen color\n     */\n    @Prop({ reflect: true })\n    public value: string;\n\n    /**\n     * The label of the input field\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Helper text of the input field\n     */\n    @Prop({ reflect: true })\n    public helperText: string;\n\n    /**\n     * Displayed as tooltips when picker is hovered.\n     */\n    @Prop({ reflect: true })\n    public tooltipLabel: string;\n\n    /**\n     * Set to `true` if a value is required\n     */\n    @Prop({ reflect: true })\n    public required: boolean;\n\n    /**\n     * Set to `true` if a value is readonly. This makes the component un-interactive.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean;\n\n    /**\n     * Emits chosen value to the parent component\n     */\n    @Event()\n    public change: EventEmitter<string>;\n\n    @State()\n    private isOpen = false;\n\n    public componentDidRender() {\n        if (this.shouldFocus && this.isOpen) {\n            this.shouldFocus = false;\n            this.contentElement?.focus();\n        }\n    }\n\n    private contentElement?: HTMLLimelColorPickerPaletteElement;\n\n    private shouldFocus = false;\n\n    public render() {\n        return [\n            this.renderTooltip(),\n            <div class=\"color-picker\">\n                {this.renderPickerPalette()}\n\n                <limel-input-field\n                    label={this.label}\n                    helperText={this.helperText}\n                    value={this.value}\n                    onChange={this.handleChange}\n                    required={this.required}\n                    readonly={this.readonly}\n                    class=\"chosen-color-input\"\n                />\n            </div>,\n        ];\n    }\n    private renderTooltip = () => {\n        if (!this.readonly && this.tooltipLabel) {\n            return (\n                <limel-tooltip\n                    label={this.tooltipLabel}\n                    elementId=\"tooltip-button\"\n                />\n            );\n        }\n    };\n\n    private renderPickerPalette = () => {\n        if (this.readonly) {\n            return this.renderPickerTrigger();\n        }\n\n        return (\n            <limel-popover\n                open={this.isOpen}\n                openDirection=\"bottom-start\"\n                onClose={this.onPopoverClose}\n            >\n                {this.renderPickerTrigger()}\n                <limel-color-picker-palette\n                    ref={this.setColorPickerPaletteElement}\n                    value={this.value}\n                    label={this.label}\n                    helperText={this.helperText}\n                    onChange={this.handleChange}\n                    required={this.required}\n                />\n            </limel-popover>\n        );\n    };\n\n    private renderPickerTrigger = () => {\n        const background = this.value ? { '--background': this.value } : {};\n\n        return (\n            <button\n                class=\"picker-trigger\"\n                slot=\"trigger\"\n                style={background}\n                role=\"button\"\n                onClick={this.openPopover}\n                id=\"tooltip-button\"\n            />\n        );\n    };\n\n    private setColorPickerPaletteElement = (\n        element: HTMLLimelColorPickerPaletteElement\n    ) => {\n        this.contentElement = element;\n    };\n\n    private openPopover = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.isOpen = true;\n\n        this.shouldFocus = this.isOpen;\n    };\n\n    private onPopoverClose = (event: CustomEvent) => {\n        event.stopPropagation();\n        this.isOpen = false;\n    };\n\n    private handleChange = (event: CustomEvent<string>) => {\n        event.stopPropagation();\n        this.change.emit(event.detail);\n    };\n}\n"],"mappings":"kDAAA,MAAMA,EAAiB,45H,MCsBVC,EAAW,M,wDAuDZC,KAAAC,YAAc,MAoBdD,KAAAE,cAAgB,KACpB,IAAKF,KAAKG,UAAYH,KAAKI,aAAc,CACrC,OACIC,EAAA,iBACIC,MAAON,KAAKI,aACZG,UAAU,kB,GAMlBP,KAAAQ,oBAAsB,KAC1B,GAAIR,KAAKG,SAAU,CACf,OAAOH,KAAKS,qB,CAGhB,OACIJ,EAAA,iBACIK,KAAMV,KAAKW,OACXC,cAAc,eACdC,QAASb,KAAKc,gBAEbd,KAAKS,sBACNJ,EAAA,8BACIU,IAAKf,KAAKgB,6BACVC,MAAOjB,KAAKiB,MACZX,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBC,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,WAEP,EAIhBrB,KAAAS,oBAAsB,KAC1B,MAAMa,EAAatB,KAAKiB,MAAQ,CAAE,eAAgBjB,KAAKiB,OAAU,GAEjE,OACIZ,EAAA,UACIkB,MAAM,iBACNC,KAAK,UACLC,MAAOH,EACPI,KAAK,SACLC,QAAS3B,KAAK4B,YACdC,GAAG,kBACL,EAIF7B,KAAAgB,6BACJc,IAEA9B,KAAK+B,eAAiBD,CAAO,EAGzB9B,KAAA4B,YAAeI,IACnBA,EAAMC,kBACNjC,KAAKW,OAAS,KAEdX,KAAKC,YAAcD,KAAKW,MAAM,EAG1BX,KAAAc,eAAkBkB,IACtBA,EAAMC,kBACNjC,KAAKW,OAAS,KAAK,EAGfX,KAAAoB,aAAgBY,IACpBA,EAAMC,kBACNjC,KAAKkC,OAAOC,KAAKH,EAAMI,OAAO,E,4JArGjB,K,CAEVC,qB,MACH,GAAIrC,KAAKC,aAAeD,KAAKW,OAAQ,CACjCX,KAAKC,YAAc,OACnBqC,EAAAtC,KAAK+B,kBAAc,MAAAO,SAAA,SAAAA,EAAEC,O,EAQtBC,SACH,MAAO,CACHxC,KAAKE,gBACLG,EAAA,OAAKkB,MAAM,gBACNvB,KAAKQ,sBAENH,EAAA,qBACIC,MAAON,KAAKM,MACZY,WAAYlB,KAAKkB,WACjBD,MAAOjB,KAAKiB,MACZE,SAAUnB,KAAKoB,aACfC,SAAUrB,KAAKqB,SACflB,SAAUH,KAAKG,SACfoB,MAAM,wB"}