diff --git a/NEWS.md b/NEWS.md index 3a0d4dd0..b3ec7c8e 100644 --- a/NEWS.md +++ b/NEWS.md @@ -3,6 +3,7 @@ shinyWidgets 0.8.8 * `knobInput()` and `switchInput()` are softly deprecated, since the JavaScript libraries used by those widgets are no longer actively maintained. * Updated virtual-select to 1.0.46 (fix focus issue), see https://github.com/sa-si-dev/virtual-select/releases. +* Updated @simonwep/pickr to 1.9.1, see https://github.com/simonwep/pickr/releases. shinyWidgets 0.8.7 diff --git a/R/color-pickr.R b/R/color-pickr.R index ca7723d6..6f4ec1eb 100644 --- a/R/color-pickr.R +++ b/R/color-pickr.R @@ -1,4 +1,14 @@ +html_dependency_pickr <- function() { + htmlDependency( + name = "colorpickr", + version = "1.9.1", + src = c(file = "packer"), + package = "shinyWidgets", + script = "colorpickr.js" + ) +} + #' @title Color Pickr #' #' @description A widget to pick color with different themes and options. diff --git a/R/dependencies.R b/R/dependencies.R index bd658e21..1332d0e5 100644 --- a/R/dependencies.R +++ b/R/dependencies.R @@ -487,29 +487,6 @@ html_dependency_stati <- function() { } -html_dependency_pickr <- function() { - # htmlDependency( - # name = "pickr", - # version = "1.6.0", - # src = list(href = "shinyWidgets/pickr-1.6.0", file = "assets/pickr-1.6.0"), - # package = "shinyWidgets", - # script = "js/pickr.min.js", - # stylesheet = c( - # "css/classic.min.css", - # "css/monolith.min.css", - # "css/nano.min.css" - # ), - # head = "", - # all_files = FALSE - # ) - htmlDependency( - name = "colorpickr", - version = "1.6.0", - src = c(file = "packer"), - package = "shinyWidgets", - script = "colorpickr.js" - ) -} diff --git a/examples/pickr-color.R b/examples/pickr-color.R index 99ee7d89..39a5cd51 100644 --- a/examples/pickr-color.R +++ b/examples/pickr-color.R @@ -148,13 +148,25 @@ server <- function(input, output, session) { output$res21 <- renderPrint(input$id21) observeEvent(input$red, { - updateColorPickr(session, "id21", "firebrick") + updateColorPickr( + session, "id21", + label = "firebrick", + value = "firebrick" + ) }) observeEvent(input$green, { - updateColorPickr(session, "id21", "forestgreen") + updateColorPickr( + session, "id21", + label = "forestgreen", + value = "forestgreen" + ) }) observeEvent(input$blue, { - updateColorPickr(session, "id21", "steelblue") + updateColorPickr( + session, "id21", + label = "steelblue", + value = "steelblue" + ) }) output$res22 <- renderPrint(input$id22) diff --git a/inst/packer/colorpickr.js b/inst/packer/colorpickr.js index 421c1087..cd001537 100644 --- a/inst/packer/colorpickr.js +++ b/inst/packer/colorpickr.js @@ -1,2 +1 @@ -/*! For license information please see colorpickr.js.LICENSE.txt */ -(()=>{var e={3931:e=>{self,e.exports=(()=>{"use strict";var e={d:(t,r)=>{for(var o in r)e.o(r,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:r[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.d(t,{default:()=>z});var r={};function o(e,t,r,o,i={}){t instanceof HTMLCollection||t instanceof NodeList?t=Array.from(t):Array.isArray(t)||(t=[t]),Array.isArray(r)||(r=[r]);for(const n of t)for(const t of r)n[e](t,o,{capture:!1,...i});return Array.prototype.slice.call(arguments,1)}e.r(r),e.d(r,{adjustableInputNumbers:()=>l,createElementFromString:()=>c,createFromTemplate:()=>a,eventPath:()=>p,off:()=>n,on:()=>i,resolveElement:()=>s});const i=o.bind(null,"addEventListener"),n=o.bind(null,"removeEventListener");function c(e){const t=document.createElement("div");return t.innerHTML=e.trim(),t.firstElementChild}function a(e){const t=(e,t)=>{const r=e.getAttribute(t);return e.removeAttribute(t),r},r=(e,o={})=>{const i=t(e,":obj"),n=t(e,":ref"),c=i?o[i]={}:o;n&&(o[n]=e);for(const o of Array.from(e.children)){const e=t(o,":arr"),i=r(o,e?{}:c);e&&(c[e]||(c[e]=[])).push(Object.keys(i).length?i:o)}return o};return r(c(e))}function p(e){let t=e.path||e.composedPath&&e.composedPath();if(t)return t;let r=e.target.parentElement;for(t=[e.target,r];r=r.parentElement;)t.push(r);return t.push(document,window),t}function s(e){return e instanceof Element?e:"string"==typeof e?e.split(/>>/g).reduce(((e,t,r,o)=>(e=e.querySelector(t),re){function r(r){const o=[.001,.01,.1][Number(r.shiftKey||2*r.ctrlKey)]*(r.deltaY<0?1:-1);let i=0,n=e.selectionStart;e.value=e.value.replace(/[\d.]+/g,((e,r)=>r<=n&&r+e.length>=n?(n=r,t(Number(e),o,i)):(i++,e))),e.focus(),e.setSelectionRange(n,n),r.preventDefault(),e.dispatchEvent(new Event("input"))}i(e,"focus",(()=>i(window,"wheel",r,{passive:!1}))),i(e,"blur",(()=>n(window,"wheel",r)))}const{min:u,max:d,floor:h,round:b}=Math;function f(e,t,r){t/=100,r/=100;const o=h(e=e/360*6),i=e-o,n=r*(1-t),c=r*(1-i*t),a=r*(1-(1-i)*t),p=o%6;return[255*[r,c,n,n,a,r][p],255*[a,r,r,c,n,n][p],255*[n,n,a,r,r,c][p]]}function m(e,t,r){const o=(2-(t/=100))*(r/=100)/2;return 0!==o&&(t=1===o?0:o<.5?t*r/(2*o):t*r/(2-2*o)),[e,100*t,100*o]}function g(e,t,r){const o=u(e/=255,t/=255,r/=255),i=d(e,t,r),n=i-o;let c,a;if(0===n)c=a=0;else{a=n/i;const o=((i-e)/6+n/2)/n,p=((i-t)/6+n/2)/n,s=((i-r)/6+n/2)/n;e===i?c=s-p:t===i?c=1/3+o-s:r===i&&(c=2/3+p-o),c<0?c+=1:c>1&&(c-=1)}return[360*c,100*a,100*i]}function v(e,t,r,o){return t/=100,r/=100,[...g(255*(1-u(1,(e/=100)*(1-(o/=100))+o)),255*(1-u(1,t*(1-o)+o)),255*(1-u(1,r*(1-o)+o)))]}function w(e,t,r){t/=100;const o=2*(t*=(r/=100)<.5?r:1-r)/(r+t)*100,i=100*(r+t);return[e,isNaN(o)?0:o,i]}function y(e){return g(...e.match(/.{2}/g).map((e=>parseInt(e,16))))}function k(e=0,t=0,r=0,o=1){const i=(e,t)=>(r=-1)=>t(~r?e.map((e=>Number(e.toFixed(r)))):e),n={h:e,s:t,v:r,a:o,toHSVA(){const e=[n.h,n.s,n.v,n.a];return e.toString=i(e,(e=>`hsva(${e[0]}, ${e[1]}%, ${e[2]}%, ${n.a})`)),e},toHSLA(){const e=[...m(n.h,n.s,n.v),n.a];return e.toString=i(e,(e=>`hsla(${e[0]}, ${e[1]}%, ${e[2]}%, ${n.a})`)),e},toRGBA(){const e=[...f(n.h,n.s,n.v),n.a];return e.toString=i(e,(e=>`rgba(${e[0]}, ${e[1]}, ${e[2]}, ${n.a})`)),e},toCMYK(){const e=function(e,t,r){const o=f(e,t,r),i=o[0]/255,n=o[1]/255,c=o[2]/255,a=u(1-i,1-n,1-c);return[100*(1===a?0:(1-i-a)/(1-a)),100*(1===a?0:(1-n-a)/(1-a)),100*(1===a?0:(1-c-a)/(1-a)),100*a]}(n.h,n.s,n.v);return e.toString=i(e,(e=>`cmyk(${e[0]}%, ${e[1]}%, ${e[2]}%, ${e[3]}%)`)),e},toHEXA(){const e=function(e,t,r){return f(e,t,r).map((e=>b(e).toString(16).padStart(2,"0")))}(n.h,n.s,n.v),t=n.a>=1?"":Number((255*n.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return t&&e.push(t),e.toString=()=>`#${e.join("").toUpperCase()}`,e},clone:()=>k(n.h,n.s,n.v,n.a)};return n}const x=e=>Math.max(Math.min(e,1),0);function _(e){const t={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},e),_keyboard(e){const{options:r}=t,{type:o,key:i}=e;if(document.activeElement===r.wrapper){const{lock:r}=t.options,n="ArrowUp"===i,c="ArrowRight"===i,a="ArrowDown"===i,p="ArrowLeft"===i;if("keydown"===o&&(n||c||a||p)){let o=0,i=0;"v"===r?o=n||c?1:-1:"h"===r?o=n||c?-1:1:(i=n?-1:a?1:0,o=p?-1:c?1:0),t.update(x(t.cache.x+.01*o),x(t.cache.y+.01*i)),e.preventDefault()}else i.startsWith("Arrow")&&(t.options.onstop(),e.preventDefault())}},_tapstart(e){i(document,["mouseup","touchend","touchcancel"],t._tapstop),i(document,["mousemove","touchmove"],t._tapmove),e.cancelable&&e.preventDefault(),t._tapmove(e)},_tapmove(e){const{options:r,cache:o}=t,{lock:i,element:n,wrapper:c}=r,a=c.getBoundingClientRect();let p=0,s=0;if(e){const t=e&&e.touches&&e.touches[0];p=e?(t||e).clientX:0,s=e?(t||e).clientY:0,pa.left+a.width&&(p=a.left+a.width),sa.top+a.height&&(s=a.top+a.height),p-=a.left,s-=a.top}else o&&(p=o.x*a.width,s=o.y*a.height);"h"!==i&&(n.style.left=`calc(${p/a.width*100}% - ${n.offsetWidth/2}px)`),"v"!==i&&(n.style.top=`calc(${s/a.height*100}% - ${n.offsetHeight/2}px)`),t.cache={x:p/a.width,y:s/a.height};const l=x(p/a.width),u=x(s/a.height);switch(i){case"v":return r.onchange(l);case"h":return r.onchange(u);default:return r.onchange(l,u)}},_tapstop(){t.options.onstop(),n(document,["mouseup","touchend","touchcancel"],t._tapstop),n(document,["mousemove","touchmove"],t._tapmove)},trigger(){t._tapmove()},update(e=0,r=0){const{left:o,top:i,width:n,height:c}=t.options.wrapper.getBoundingClientRect();"h"===t.options.lock&&(r=e),t._tapmove({clientX:o+n*e,clientY:i+c*r})},destroy(){const{options:e,_tapstart:r,_keyboard:o}=t;n(document,["keydown","keyup"],o),n([e.wrapper,e.element],"mousedown",r),n([e.wrapper,e.element],"touchstart",r,{passive:!1})}},{options:r,_tapstart:o,_keyboard:c}=t;return i([r.wrapper,r.element],"mousedown",o),i([r.wrapper,r.element],"touchstart",o,{passive:!1}),i(document,["keydown","keyup"],c),t}function A(e={}){e=Object.assign({onchange:()=>0,className:"",elements:[]},e);const t=i(e.elements,"click",(t=>{e.elements.forEach((r=>r.classList[t.target===r?"add":"remove"](e.className))),e.onchange(t),t.stopPropagation()}));return{destroy:()=>n(...t)}}const S={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8};function C(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}class z{constructor(e){C(this,"_initializingActive",!0),C(this,"_recalc",!0),C(this,"_nanopop",null),C(this,"_root",null),C(this,"_color",k()),C(this,"_lastColor",k()),C(this,"_swatchColors",[]),C(this,"_setupAnimationFrame",null),C(this,"_eventListener",{init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]}),this.options=e=Object.assign({...z.DEFAULT_OPTIONS},e);const{swatches:t,components:r,theme:o,sliders:i,lockOpacity:n,padding:c}=e;["nano","monolith"].includes(o)&&!i&&(e.sliders="h"),r.interaction||(r.interaction={});const{preview:a,opacity:p,hue:s,palette:l}=r;r.opacity=!n&&p,r.palette=l||a||p||s,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),t&&t.length&&t.forEach((e=>this.addSwatch(e)));const{button:u,app:d}=this._root;this._nanopop=((e,t,r)=>{const o="object"!=typeof e||e instanceof HTMLElement?{reference:e,popper:t,...r}:e;return{update(e=o){const{reference:t,popper:r}=Object.assign(o,e);if(!r||!t)throw new Error("Popper- or reference-element missing.");return((e,t,r)=>{const{container:o,margin:i,position:n,variantFlipOrder:c,positionFlipOrder:a}={container:document.documentElement.getBoundingClientRect(),...S,...r},{left:p,top:s}=t.style;t.style.left="0",t.style.top="0";const l=e.getBoundingClientRect(),u=t.getBoundingClientRect(),d={t:l.top-u.height-i,b:l.bottom+i,r:l.right+i,l:l.left-u.width-i},h={vs:l.left,vm:l.left+l.width/2+-u.width/2,ve:l.left+l.width-u.width,hs:l.top,hm:l.bottom-l.height/2-u.height/2,he:l.bottom-u.height},[b,f="middle"]=n.split("-"),m=a[b],g=c[f],{top:v,left:w,bottom:y,right:k}=o;for(const e of m){const r="t"===e||"b"===e,o=d[e],[i,n]=r?["top","left"]:["left","top"],[c,a]=r?[u.height,u.width]:[u.width,u.height],[p,s]=r?[y,k]:[k,y],[l,b]=r?[v,w]:[w,v];if(!(op))for(const c of g){const p=h[(r?"v":"h")+c];if(!(ps))return t.style[n]=p-u[n]+"px",t.style[i]=o-u[i]+"px",e+c}}return t.style.left=p,t.style.top=s,null})(t,r,o)}}})(u,d,{margin:c}),u.setAttribute("role","button"),u.setAttribute("aria-label",this._t("btn:toggle"));const h=this;this._setupAnimationFrame=requestAnimationFrame((function t(){if(!d.offsetWidth)return requestAnimationFrame(t);h.setColor(e.default),h._rePositioningPicker(),e.defaultRepresentation&&(h._representation=e.defaultRepresentation,h.setColorRepresentation(h._representation)),e.showAlways&&h.show(),h._initializingActive=!1,h._emit("init")}))}_preBuild(){const{options:e}=this;for(const t of["el","container"])e[t]=s(e[t]);this._root=(e=>{const{components:t,useAsButton:r,inline:o,appClass:i,theme:n,lockOpacity:c}=e.options,p=e=>e?"":'style="display:none" hidden',s=t=>e._t(t),l=a(`\n
\n\n ${r?"":''}\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n `),u=l.interaction;return u.options.find((e=>!e.hidden&&!e.classList.add("active"))),u.type=()=>u.options.find((e=>e.classList.contains("active"))),l})(this),e.useAsButton&&(this._root.button=e.el),e.container.appendChild(this._root.root)}_finalBuild(){const e=this.options,t=this._root;if(e.container.removeChild(t.root),e.inline){const r=e.el.parentElement;e.el.nextSibling?r.insertBefore(t.app,e.el.nextSibling):r.appendChild(t.app)}else e.container.appendChild(t.app);e.useAsButton?e.inline&&e.el.remove():e.el.parentNode.replaceChild(t.root,e.el),e.disabled&&this.disable(),e.comparison||(t.button.style.transition="none",e.useAsButton||(t.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const e=this,t=this.options.components,r=(e.options.sliders||"v").repeat(2),[o,i]=r.match(/^[vh]+$/g)?r:[],n=()=>this._color||(this._color=this._lastColor.clone()),c={palette:_({element:e._root.palette.picker,wrapper:e._root.palette.palette,onstop:()=>e._emit("changestop","slider",e),onchange(r,o){if(!t.palette)return;const i=n(),{_root:c,options:a}=e,{lastColor:p,currentColor:s}=c.preview;e._recalc&&(i.s=100*r,i.v=100-100*o,i.v<0&&(i.v=0),e._updateOutput("slider"));const l=i.toRGBA().toString(0);this.element.style.background=l,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\n `,a.comparison?a.useAsButton||e._lastColor||p.style.setProperty("--pcr-color",l):(c.button.style.setProperty("--pcr-color",l),c.button.classList.remove("clear"));const u=i.toHEXA().toString();for(const{el:t,color:r}of e._swatchColors)t.classList[u===r.toHEXA().toString()?"add":"remove"]("pcr-active");s.style.setProperty("--pcr-color",l)}}),hue:_({lock:"v"===i?"h":"v",element:e._root.hue.picker,wrapper:e._root.hue.slider,onstop:()=>e._emit("changestop","slider",e),onchange(r){if(!t.hue||!t.palette)return;const o=n();e._recalc&&(o.h=360*r),this.element.style.backgroundColor=`hsl(${o.h}, 100%, 50%)`,c.palette.trigger()}}),opacity:_({lock:"v"===o?"h":"v",element:e._root.opacity.picker,wrapper:e._root.opacity.slider,onstop:()=>e._emit("changestop","slider",e),onchange(r){if(!t.opacity||!t.palette)return;const o=n();e._recalc&&(o.a=Math.round(100*r)/100),this.element.style.background=`rgba(0, 0, 0, ${o.a})`,c.palette.trigger()}}),selectable:A({elements:e._root.interaction.options,className:"active",onchange(t){e._representation=t.target.getAttribute("data-type").toUpperCase(),e._recalc&&e._updateOutput("swatch")}})};this._components=c}_bindEvents(){const{_root:e,options:t}=this,r=[i(e.interaction.clear,"click",(()=>this._clearColor())),i([e.interaction.cancel,e.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")})),i(e.interaction.save,"click",(()=>{!this.applyColor()&&!t.showAlways&&this.hide()})),i(e.interaction.result,["keyup","input"],(e=>{this.setColor(e.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),e.stopImmediatePropagation()})),i(e.interaction.result,["focus","blur"],(e=>{this._recalc="blur"===e.type,this._recalc&&this._updateOutput(null)})),i([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!t.showAlways){const o=t.closeWithKey;r.push(i(e.button,"click",(()=>this.isOpen()?this.hide():this.show())),i(document,"keyup",(e=>this.isOpen()&&(e.key===o||e.code===o)&&this.hide())),i(document,["touchstart","mousedown"],(t=>{this.isOpen()&&!p(t).some((t=>t===e.app||t===e.button))&&this.hide()}),{capture:!0}))}if(t.adjustableNumbers){const t={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};l(e.interaction.result,((e,r,o)=>{const i=t[this.getColorRepresentation().toLowerCase()];if(i){const t=i[o],n=e+(t>=100?1e3*r:r);return n<=0?0:Number((n{o.isOpen()&&(t.closeOnScroll&&o.hide(),null===e?(e=setTimeout((()=>e=null),100),requestAnimationFrame((function t(){o._rePositioningPicker(),null!==e&&requestAnimationFrame(t)}))):(clearTimeout(e),e=setTimeout((()=>e=null),100)))}),{capture:!0}))}this._eventBindings=r}_rePositioningPicker(){const{options:e}=this;if(!e.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:e.position})){const e=this._root.app,t=e.getBoundingClientRect();e.style.top=(window.innerHeight-t.height)/2+"px",e.style.left=(window.innerWidth-t.width)/2+"px"}}_updateOutput(e){const{_root:t,_color:r,options:o}=this;if(t.interaction.type()){const e=`to${t.interaction.type().getAttribute("data-type")}`;t.interaction.result.value="function"==typeof r[e]?r[e]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",r,e,this)}_clearColor(e=!1){const{_root:t,options:r}=this;r.useAsButton||t.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),t.button.classList.add("clear"),r.showAlways||this.hide(),this._lastColor=null,this._initializingActive||e||(this._emit("save",null),this._emit("clear"))}_parseLocalColor(e){const{values:t,type:r,a:o}=function(e){e=e.match(/^[a-zA-Z]+$/)?function(e){if("black"===e.toLowerCase())return"#000";const t=document.createElement("canvas").getContext("2d");return t.fillStyle=e,"#000"===t.fillStyle?null:t.fillStyle}(e):e;const t={cmyk:/^cmyk[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)/i,rgba:/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsla:/^((hsla)|hsl)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hsva:/^((hsva)|hsv)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},r=e=>e.map((e=>/^(|\d+)\.\d+|\d+$/.test(e)?Number(e):void 0));let o;e:for(const i in t){if(!(o=t[i].exec(e)))continue;const n=e=>!!o[2]==("number"==typeof e);switch(i){case"cmyk":{const[,e,t,n,c]=r(o);if(e>100||t>100||n>100||c>100)break e;return{values:v(e,t,n,c),type:i}}case"rgba":{const[,,,e,t,c,a]=r(o);if(e>255||t>255||c>255||a<0||a>1||!n(a))break e;return{values:[...g(e,t,c),a],a,type:i}}case"hexa":{let[,e]=o;4!==e.length&&3!==e.length||(e=e.split("").map((e=>e+e)).join(""));const t=e.substring(0,6);let r=e.substring(6);return r=r?parseInt(r,16)/255:void 0,{values:[...y(t),r],a:r,type:i}}case"hsla":{const[,,,e,t,c,a]=r(o);if(e>360||t>100||c>100||a<0||a>1||!n(a))break e;return{values:[...w(e,t,c),a],a,type:i}}case"hsva":{const[,,,e,t,c,a]=r(o);if(e>360||t>100||c>100||a<0||a>1||!n(a))break e;return{values:[e,t,c,a],a,type:i}}}}return{values:null,type:null}}(e),{lockOpacity:i}=this.options,n=void 0!==o&&1!==o;return t&&3===t.length&&(t[3]=void 0),{values:!t||i&&n?null:t,type:r}}_t(e){return this.options.i18n[e]||z.I18N_DEFAULTS[e]}_emit(e,...t){this._eventListener[e].forEach((e=>e(...t,this)))}on(e,t){return this._eventListener[e].push(t),this}off(e,t){const r=this._eventListener[e]||[],o=r.indexOf(t);return~o&&r.splice(o,1),this}addSwatch(e){const{values:t}=this._parseLocalColor(e);if(t){const{_swatchColors:e,_root:r}=this,o=k(...t),n=c(`'}\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n \n `),d=l.interaction;return d.options.find((t=>!t.hidden&&!t.classList.add("active"))),d.type=()=>d.options.find((t=>t.classList.contains("active"))),l})(this),t.useAsButton&&(this._root.button=t.el),t.container.appendChild(this._root.root)}_finalBuild(){const t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){const r=t.el.parentElement;t.el.nextSibling?r.insertBefore(e.app,t.el.nextSibling):r.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()}_buildComponents(){const t=this,e=this.options.components,r=(t.options.sliders||"v").repeat(2),[o,i]=r.match(/^[vh]+$/g)?r:[],c=()=>this._color||(this._color=this._lastColor.clone()),n={palette:_({element:t._root.palette.picker,wrapper:t._root.palette.palette,onstop:()=>t._emit("changestop","slider",t),onchange(r,o){if(!e.palette)return;const i=c(),{_root:n,options:a}=t,{lastColor:p,currentColor:s}=n.preview;t._recalc&&(i.s=100*r,i.v=100-100*o,i.v<0&&(i.v=0),t._updateOutput("slider"));const l=i.toRGBA().toString(0);this.element.style.background=l,this.wrapper.style.background=`\n linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent),\n linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a}))\n `,a.comparison?a.useAsButton||t._lastColor||p.style.setProperty("--pcr-color",l):(n.button.style.setProperty("--pcr-color",l),n.button.classList.remove("clear"));const d=i.toHEXA().toString();for(const{el:e,color:r}of t._swatchColors)e.classList[d===r.toHEXA().toString()?"add":"remove"]("pcr-active");s.style.setProperty("--pcr-color",l)}}),hue:_({lock:"v"===i?"h":"v",element:t._root.hue.picker,wrapper:t._root.hue.slider,onstop:()=>t._emit("changestop","slider",t),onchange(r){if(!e.hue||!e.palette)return;const o=c();t._recalc&&(o.h=360*r),this.element.style.backgroundColor=`hsl(${o.h}, 100%, 50%)`,n.palette.trigger()}}),opacity:_({lock:"v"===o?"h":"v",element:t._root.opacity.picker,wrapper:t._root.opacity.slider,onstop:()=>t._emit("changestop","slider",t),onchange(r){if(!e.opacity||!e.palette)return;const o=c();t._recalc&&(o.a=Math.round(100*r)/100),this.element.style.background=`rgba(0, 0, 0, ${o.a})`,n.palette.trigger()}}),selectable:A({elements:t._root.interaction.options,className:"active",onchange(e){t._representation=e.target.getAttribute("data-type").toUpperCase(),t._recalc&&t._updateOutput("swatch")}})};this._components=n}_bindEvents(){const{_root:t,options:e}=this,r=[i(t.interaction.clear,"click",(()=>this._clearColor())),i([t.interaction.cancel,t.preview.lastColor],"click",(()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit("cancel")})),i(t.interaction.save,"click",(()=>{!this.applyColor()&&!e.showAlways&&this.hide()})),i(t.interaction.result,["keyup","input"],(t=>{this.setColor(t.target.value,!0)&&!this._initializingActive&&(this._emit("change",this._color,"input",this),this._emit("changestop","input",this)),t.stopImmediatePropagation()})),i(t.interaction.result,["focus","blur"],(t=>{this._recalc="blur"===t.type,this._recalc&&this._updateOutput(null)})),i([t.palette.palette,t.palette.picker,t.hue.slider,t.hue.picker,t.opacity.slider,t.opacity.picker],["mousedown","touchstart"],(()=>this._recalc=!0),{passive:!0})];if(!e.showAlways){const o=e.closeWithKey;r.push(i(t.button,"click",(()=>this.isOpen()?this.hide():this.show())),i(document,"keyup",(t=>this.isOpen()&&(t.key===o||t.code===o)&&this.hide())),i(document,["touchstart","mousedown"],(e=>{this.isOpen()&&!p(e).some((e=>e===t.app||e===t.button))&&this.hide()}),{capture:!0}))}if(e.adjustableNumbers){const e={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};l(t.interaction.result,((t,r,o)=>{const i=e[this.getColorRepresentation().toLowerCase()];if(i){const e=i[o],c=t+(e>=100?1e3*r:r);return c<=0?0:Number((c{o.isOpen()&&(e.closeOnScroll&&o.hide(),null===t?(t=setTimeout((()=>t=null),100),requestAnimationFrame((function e(){o._rePositioningPicker(),null!==t&&requestAnimationFrame(e)}))):(clearTimeout(t),t=setTimeout((()=>t=null),100)))}),{capture:!0}))}this._eventBindings=r}_rePositioningPicker(){const{options:t}=this;if(!t.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:t.position})){const t=this._root.app,e=t.getBoundingClientRect();t.style.top=(window.innerHeight-e.height)/2+"px",t.style.left=(window.innerWidth-e.width)/2+"px"}}_updateOutput(t){const{_root:e,_color:r,options:o}=this;if(e.interaction.type()){const t=`to${e.interaction.type().getAttribute("data-type")}`;e.interaction.result.value="function"==typeof r[t]?r[t]().toString(o.outputPrecision):""}!this._initializingActive&&this._recalc&&this._emit("change",r,t,this)}_clearColor(t=!1){const{_root:e,options:r}=this;r.useAsButton||e.button.style.setProperty("--pcr-color","rgba(0, 0, 0, 0.15)"),e.button.classList.add("clear"),r.showAlways||this.hide(),this._lastColor=null,this._initializingActive||t||(this._emit("save",null),this._emit("clear"))}_parseLocalColor(t){const{values:e,type:r,a:o}=function(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";const e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;const e={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},r=t=>t.map((t=>/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0));let o;t:for(const i in e)if(o=e[i].exec(t))switch(i){case"cmyk":{const[,t,e,c,n]=r(o);if(t>100||e>100||c>100||n>100)break t;return{values:v(t,e,c,n),type:i}}case"rgba":{let[,t,,e,,c,,,n]=r(o);if(t="%"===o[2]?t/100*255:t,e="%"===o[4]?e/100*255:e,c="%"===o[6]?c/100*255:c,n="%"===o[9]?n/100:n,t>255||e>255||c>255||n<0||n>1)break t;return{values:[...g(t,e,c),n],a:n,type:i}}case"hexa":{let[,t]=o;4!==t.length&&3!==t.length||(t=t.split("").map((t=>t+t)).join(""));const e=t.substring(0,6);let r=t.substring(6);return r=r?parseInt(r,16)/255:void 0,{values:[...y(e),r],a:r,type:i}}case"hsla":{let[,t,e,c,,n]=r(o);if(n="%"===o[6]?n/100:n,t>360||e>100||c>100||n<0||n>1)break t;return{values:[...w(t,e,c),n],a:n,type:i}}case"hsva":{let[,t,e,c,,n]=r(o);if(n="%"===o[6]?n/100:n,t>360||e>100||c>100||n<0||n>1)break t;return{values:[t,e,c,n],a:n,type:i}}}return{values:null,type:null}}(t),{lockOpacity:i}=this.options,c=void 0!==o&&1!==o;return e&&3===e.length&&(e[3]=void 0),{values:!e||i&&c?null:e,type:r}}_t(t){return this.options.i18n[t]||C.I18N_DEFAULTS[t]}_emit(t,...e){this._eventListener[t].forEach((t=>t(...e,this)))}on(t,e){return this._eventListener[t].push(e),this}off(t,e){const r=this._eventListener[t]||[],o=r.indexOf(e);return~o&&r.splice(o,1),this}addSwatch(t){const{values:e}=this._parseLocalColor(t);if(e){const{_swatchColors:t,_root:r}=this,o=k(...e),c=n(`