@limetech/lime-elements
Version:
1 lines • 7.49 kB
JavaScript
import{r as e,c as r,h as o}from"./p-DBTJNfo7.js";const t=["red","pink","magenta","purple","violet","indigo","blue","sky","cyan","teal","green","lime","grass","yellow","amber","orange","coral","brown","gray","glaucous"],l=["lighter","light","default","dark","darker"];function a(e,r){return`rgb(var(${function(e,r){return`--color-${e}-${r}`}(e,r)}))`}function i(e,r){return`${e} ${r}`}function c(e,r){return{name:i(e,r),value:a(e,r)}}const s=class{constructor(t){e(this,t),this.change=r(this,"change"),this.invalid=!1,this.manualInput=!0,this.renderSwatches=()=>this.getPalette().map(this.renderSwatchButton),this.renderSwatchButton=(e,r)=>{const t={swatch:!0,"swatch--selected":this.value===e.value,"custom-swatch":this.usesCustomPalette()};return o("button",{class:t,style:{"--limel-color-picker-swatch-color":e.value},title:e.name,disabled:e.disabled,"data-index":r,key:r,onClick:this.handleSwatchClick(e.value)})},this.handleChange=e=>{e.stopPropagation(),this.change.emit(e.detail)},this.handleSwatchClick=e=>r=>{r.stopPropagation(),this.change.emit(this.value===e?"":e)}}render(){const e=this.value?{"--background":this.value}:{};return[o("div",{key:"184f8b9b74ebeb5611aa28ff3b14dbb225118af2",class:"color-picker-palette",style:{"--color-picker-column-count":`${this.getColumnCount()}`}},this.renderSwatches()),o("div",{key:"27b19d8906e5f28c86c27476ebe0287b6043eb66",class:"chosen-color-name"},o("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}),o("div",{key:"051cc6a16e9659aabb01f4b6b9f0b30036d440b4",class:"chosen-color-preview",style:e}))]}getPalette(){if(this.usesCustomPalette())return(this.palette||[]).map((e=>{const r=this.normalizeEntry(e);return{name:r.name||r.value,value:r.value,disabled:r.disabled}}));const e=[];for(const r of l)for(const o of t)e.push(c(o,r));return e}normalizeEntry(e){return"string"==typeof e?{value:e}:e}usesCustomPalette(){var e;return(null===(e=this.palette)||void 0===e?void 0:e.length)>0}getColumnCount(){if(this.columnCount>0)return this.columnCount;if(!this.usesCustomPalette())return 20;const e=this.getPalette();return e.length>0?e.length:1}static get delegatesFocus(){return!0}};s.style='@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(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%}';export{s as limel_color_picker_palette}