index.js

(function(){"use strict";const et="";function h(n,t,s,e,o,i,l,a){var r=typeof n=="function"?n.options:n;t&&(r.render=t,r.staticRenderFns=s,r._compiled=!0),e&&(r.functional=!0),i&&(r._scopeId="data-v-"+i);var u;if(l?(u=function(c){c=c||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!c&&typeof __VUE_SSR_CONTEXT__<"u"&&(c=__VUE_SSR_CONTEXT__),o&&o.call(this,c),c&&c._registeredComponents&&c._registeredComponents.add(l)},r._ssrRegister=u):o&&(u=a?function(){o.call(this,(r.functional?this.parent:this).$root.$options.shadowRoot)}:o),u)if(r.functional){r._injectStyles=u;var f=r.render;r.render=function(tt,m){return u.call(m),f(tt,m)}}else{var _=r.beforeCreate;r.beforeCreate=_?[].concat(_,u):[u]}return{exports:n,options:r}}const y={props:{color:Object,contrast:[Boolean,Array],contrastColors:Array},computed:{readable(){return this.color.toMostReadable(this.contrastColors)},rating(){if(!this.readable.length)return null;const[n]=this.readable;return n.accessibility[n.accessibility.length-1]},value(){if(!this.readable.length)return null;const[n]=this.readable;return n.color.toString()},watching(){let n=["#fff","#000"];if(this.isWatching){let t=this.$store.getters["content/changes"]()[this.contrast.field];t&&(n=t,Array.isArray(t)||(this.contrast.split?n=t.split(this.contrast.split):n=[t]),n=n.map(s=>s.trim()),n=n.filter(s=>s.length>2))}return n},isWatching(){var n,t;return((n=this.contrast)==null?void 0:n.type)==="watch"&&((t=this.contrast)==null?void 0:t.field)},hasChanges(){return this.$store.getters["content/hasChanges"]()[this.contrast.field]}},created(){this.isWatching&&this.hasChanges&&(this.contrastColors=this.watching)},watch:{watching(){this.contrastColors=this.watching}}};var b=function(){var t=this,s=t._self._c;return s("k-input",t._b({ref:"input",staticClass:"k-colors-contrast",attrs:{id:t._uid,theme:"field"}},"k-input",t.$props,!1),[s("div",{staticClass:"k-colors-color",style:{background:t.value},attrs:{"data-rating":t.rating}})])},k=[],w=h(y,b,k,!1,null,null,null,null);const v=w.exports;class x{convertHslToRgb(){const t=this.h/360,s=this.s/100,e=this.l/100;let o=e,i=e,l=e,a,r;s!==0&&(a=e<.5?e*(1+s):e+s-e*s,r=2*e-a,o=this.convertHueToRgb(r,a,t+1/3),i=this.convertHueToRgb(r,a,t),l=this.convertHueToRgb(r,a,t-1/3)),this.r=o*255,this.g=i*255,this.b=l*255}convertHueToRgb(t,s,e){return e<0&&(e+=1),e>1&&(e-=1),e<1/6?t+(s-t)*6*e:e<1/2?s:e<2/3?t+(s-t)*(2/3-e)*6:t}convertRgbToHsl(){const t=this.r/255,s=this.g/255,e=this.b/255,o=Math.max(t,s,e),i=Math.min(t,s,e),l=o+i,a=o-i;let r=0,u=0,f=l/2;if(i!=o)switch(f<.5?u=a/l:(u=2-o-i,u=a/u),o){case t:r=s-e,r=r/a;break;case s:r=e-t,r=r/a,r=r+2;break;case e:r=t-s,r=r/a,r=r+4;break}r*=60,r<0&&(r+=360),this.h=r,this.s=u*100,this.l=f*100}convertValueToDecimal(t){let s=parseFloat(t);return s<1&&!t.toString().includes("%")&&(s=s*100),s}convertDecimalToHex(t,s=!0){let e=Math.round(t).toString(16);return s&&(e=e.padStart(2,"0")),e}convertHexToDecimal(t){return parseInt(t,16)}convertToFloat(t){return Math.round(t)/100}rebaseDecimalForHex(t){return Math.round(t/100*255)}rebaseHexForDecimal(t){const s=this.convertHexToDecimal(t);return Math.round(s/255*100)}round(t,s=0){return s>0?t.toPrecision(s):Math.round(t)}}class d{constructor(t="#fff",s=["#fff","#000"]){this.color=new p(t),this.combinations=[],this.highest=0;for(const e of s){const o=new p(e),i=this.setContrastRatio(o),l=this.setRating(i);this.combinations.push({color:o,contrast:i,accessibility:l})}}setContrastRatio(t){const s=this.getLuminance(this.color),e=this.getLuminance(t);return s>e?(s+.05)/(e+.05):(e+.05)/(s+.05)}setRating(t){const s=[];return t>=3&&s.push("aaLarge"),t>=4.5&&(s.push("aaaLarge"),s.push("aa")),t>=7&&s.push("aaa"),s.length>this.highest&&(this.highest=s.length),s}getLuminance(t){const s=t.toValues(),e=s.r/255,o=s.g/255,i=s.b/255;let l,a,r;return e<=.03928?l=e/12.92:l=Math.pow((e+.055)/1.055,2.4),o<=.03928?a=o/12.92:a=Math.pow((o+.055)/1.055,2.4),i<=.03928?r=i/12.92:r=Math.pow((i+.055)/1.055,2.4),.2126*l+.7152*a+.0722*r}toReport(){return{color:this.color,combinations:this.combinations}}toMostReadable(){return this.combinations.filter(t=>t.accessibility.length===this.highest)}}class p extends x{constructor(t){if(super(),this.original=null,this.space=null,this.r=null,this.g=null,this.b=null,this.h=null,this.s=null,this.l=null,this.a=100,t instanceof p){const s=t.toValues();this.setValues(s)}else this.isHex(t)?(this.original=t,this.space="hex",this.parseHex(t)):this.isRgb(t)?(this.original=t,this.space="rgb",this.parseRgb(t)):this.isHsl(t)?(this.original=t,this.space="hsl",this.parseHsl(t)):this.setDefault()}isHex(t){return t?t.startsWith("#"):!1}isRgb(t){return t?t.startsWith("rgb"):!1}isHsl(t){return t?t.startsWith("hsl"):!1}hasAlpha(){return this.a!==100}parseHex(t){let s;t=t.replace(/[#; ]/g,""),t.length<6?(s=t.match(/.{1}/g),s.forEach(function(e,o){s[o]=e.repeat(2)})):s=t.match(/.{2}/g),this.setHex(s)}parseRgb(t){const e=t.match(/\((.*)\)/)[1].split(/[\s,/]+/);this.setRgb(e)}parseHsl(t){const e=t.match(/\((.*)\)/)[1].split(/[\s,/]+/);this.setHsl(e)}setDefault(){this.setValues({original:null,space:"hex",r:255,g:255,b:255,h:0,s:0,l:100,a:100})}setValues(t){this.original=t.original,this.space=t.space,this.r=t.r,this.g=t.g,this.b=t.b,this.h=t.h,this.s=t.s,this.l=t.l,this.a=t.a}setSpace(t){this.space=t}setRed(t){this.r=this.convertValueToDecimal(t)}setGreen(t){this.g=this.convertValueToDecimal(t)}setBlue(t){this.b=this.convertValueToDecimal(t)}setHue(t){this.h=this.convertValueToDecimal(t)}setSaturation(t){this.s=this.convertValueToDecimal(t)}setLightness(t){this.l=this.convertValueToDecimal(t)}setAlpha(t){this.a=this.convertValueToDecimal(t)}setHex(t){if(!t){this.setDefault();return}this.setRed(parseInt(t[0],16)),this.setGreen(parseInt(t[1],16)),this.setBlue(parseInt(t[2],16)),t.length===4&&this.setAlpha(this.rebaseHexForDecimal(t[3])),this.convertRgbToHsl()}setRgb(t){if(!t){this.setDefault();return}this.setRed(t[0]),this.setGreen(t[1]),this.setBlue(t[2]),t.length===4&&this.setAlpha(t[3]),this.convertRgbToHsl()}setHsl(t){if(!t){this.setDefault();return}this.setHue(t[0]),this.setSaturation(t[1]),this.setLightness(t[2]),t.length===4&&this.setAlpha(t[3]),this.convertHslToRgb()}getAlpha(){return this.a}toReadabilityReport(t=["#fff","#000"]){return new d(this,t).toReport()}toMostReadable(t=["#fff","#000"]){return new d(this,t).toMostReadable()}toOriginal(){return this.original}toSpace(){return this.space}toValues(){return{original:this.original,space:this.space,r:this.round(this.r),g:this.round(this.g),b:this.round(this.b),h:this.round(this.h),s:this.round(this.s),l:this.round(this.l),a:this.round(this.a)}}toHex(){return{r:this.convertDecimalToHex(this.r),g:this.convertDecimalToHex(this.g),b:this.convertDecimalToHex(this.b),a:this.convertDecimalToHex(this.rebaseDecimalForHex(this.a))}}toRgb(){return{r:this.round(this.r),g:this.round(this.g),b:this.round(this.b),a:this.convertToFloat(this.a)}}toHsl(){return{h:this.round(this.h),s:this.round(this.s),l:this.round(this.l),a:this.convertToFloat(this.a)}}toString(t=null){if(t||(t=this.toSpace()),t.startsWith("hsl")){const s=this.toHsl();return this.a<100?`hsla(${s.h}, ${s.s}%, ${s.l}%, ${s.a})`:`hsla(${s.h}, ${s.s}%, ${s.l}%)`}else if(t.startsWith("rgb")){const s=this.toRgb();return this.a<100?`rgba(${s.r}, ${s.g}, ${s.b}, ${s.a})`:`rgb(${s.r}, ${s.g}, ${s.b})`}else{const s=this.toHex();return this.a<100?`#${s.r}${s.g}${s.b}${s.a}`:`#${s.r}${s.g}${s.b}`}}}const g={data(){return{dragActive:!1,dragStart:null,dragAmount:0,dragInputRef:null,dragValue:null}},created(){document.addEventListener("mouseup",this.onMouseUp),document.addEventListener("mousemove",this.onMouseDrag)},methods:{onInput(n){this.store(n.target.value)},incrementInput(n,t=1){const s=n.getAttribute("max");if(!s)return;let e=parseInt(n.value,10);e=Math.min(e+t,s),e<0&&(e=0),this.store(e,n)},amplifyStepFromEvent(n,t=1,s=10){return n&&(n.metaKey||n.shiftKey)?t*s:t},onUp(n){this.incrementInput(n.target,this.amplifyStepFromEvent(n,1))},onDown(n){this.incrementInput(n.target,this.amplifyStepFromEvent(n,-1))},onMouseDown(n,t){!this.dragActive&&t&&n.pageY&&(this.dragActive=!0,this.dragInputRef=t,this.dragStart=n.pageY,this.dragValue=parseInt(t.value,10))},onMouseUp(n){!this.dragActive||!this.dragInputRef||!n.pageY||(this.dragAmount=this.dragStart-n.pageY,this.dragInputRef.value=this.dragValue,this.dragInputRef&&this.dragAmount!==0&&this.incrementInput(this.dragInputRef,this.dragAmount),this.dragActive=!1,this.dragAmount=0,this.dragInputRef=null,this.dragValue=null)},onMouseDrag(n){if(!this.dragActive||!this.dragInputRef||!n.pageY)return;const t=this.dragInputRef.getAttribute("max");if(!t)return;this.dragAmount=this.dragStart-n.pageY;let s=Math.min(this.dragValue+this.dragAmount,t);s<0&&(s=0),this.dragInputRef.value=s}},unmounted(){document.removeEventListener("mouseup",this.onMouseUp),document.removeEventListener("mousemove",this.onMouseDrag)}},st="",C={mixins:[g],props:{color:{validator:function(n){return n instanceof p}},space:String},computed:{hex(){return this.color.toOriginal()?this.color.toString("hex").substr(1,6):null},rgb(){return this.color.toRgb()},hsl(){return this.color.toHsl()}},methods:{store(n,t){const s=this.$refs;let e={};if(!n){this.$emit("input","");return}if(this.space!=="hex"){for(const o of Object.keys(s))s[o]&&(e[o]=s[o].value);t&&(e[t.dataset.unit]=n)}switch(this.space){case"hex":this.color.parseHex(n);break;case"rgb":this.color.setRgb([e.r,e.g,e.b]);break;case"hsl":this.color.setHsl([e.h,e.s,e.l]);break}this.$emit("input",this.color.toString())}}};var D=function(){var t=this,s=t._self._c;return s("div",{staticClass:"k-colors-units"},[t.space==="rgb"?[s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.r)}}},[t._v("R")]),s("input",{ref:"r",staticClass:"k-colors-input",attrs:{"data-unit":"r",type:"text",min:"0",max:"255"},domProps:{value:t.rgb.r},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})]),s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.g)}}},[t._v("G")]),s("input",{ref:"g",staticClass:"k-colors-input",attrs:{"data-unit":"g",type:"text",min:"0",max:"255"},domProps:{value:t.rgb.g},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})]),s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.b)}}},[t._v("B")]),s("input",{ref:"b",staticClass:"k-colors-input",attrs:{"data-unit":"b",type:"text",min:"0",max:"255"},domProps:{value:t.rgb.b},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})])]:t.space==="hsl"?[s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.h)}}},[t._v("H")]),s("input",{ref:"h",staticClass:"k-colors-input",attrs:{"data-unit":"h",type:"text",min:"0",max:"360"},domProps:{value:t.hsl.h},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})]),s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.s)}}},[t._v("S")]),s("input",{ref:"s",staticClass:"k-colors-input",attrs:{"data-unit":"s",type:"text",min:"0",max:"100"},domProps:{value:t.hsl.s},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})]),s("label",{staticClass:"k-colors-label"},[s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.l)}}},[t._v("L")]),s("input",{ref:"l",staticClass:"k-colors-input",attrs:{"data-unit":"l",type:"text",min:"0",max:"100"},domProps:{value:t.hsl.l},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}})])]:[s("label",{staticClass:"k-colors-label"},[s("span",[t._v("#")]),s("input",{ref:"hex",staticClass:"k-colors-input is-hex",attrs:{type:"text"},domProps:{value:t.hex},on:{change:t.onInput}})])]],2)},R=[],A=h(C,D,R,!1,null,null,null,null);const H=A.exports,nt="",S={mixins:[g],props:{color:Object},computed:{opacity(){return this.color.getAlpha()}},methods:{store(n){const t=parseInt(n,10),s=this.color.toSpace();this.color.setAlpha(t),this.$emit("change-opacity",this.color.toString(s))}}};var I=function(){var t=this,s=t._self._c;return s("label",{staticClass:"k-colors-opacity"},[s("input",{ref:"a",staticClass:"k-colors-input is-alpha",attrs:{"data-unit":"opacity",type:"text",min:"0",max:"100"},domProps:{value:t.opacity},on:{input:t.onInput,keydown:[function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"up",38,e.key,["Up","ArrowUp"])?null:(e.preventDefault(),t.onUp.apply(null,arguments))},function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"down",40,e.key,["Down","ArrowDown"])?null:(e.preventDefault(),t.onDown.apply(null,arguments))}]}}),s("span",{on:{mousedown:function(e){return e.preventDefault(),t.onMouseDown(e,t.$refs.a)}}},[t._v("%")])])},T=[],M=h(S,I,T,!1,null,null,null,null);const $=M.exports,rt="",U={props:{color:Object},data(){return{init:!1}},computed:{value(){return this.color.toOriginal()?this.color.toString("hex"):null},hex(){return this.color.toOriginal()?this.color.toString("hex").substring(0,7):null}},methods:{onInput(n){if(!this.init){this.init=!0;return}const t=new p(n.target.value),s=this.color.toSpace();t.setAlpha(this.color.getAlpha()),this.$emit("input",t.toString(s))}}};var O=function(){var t=this,s=t._self._c;return s("div",{staticClass:"k-colors-preview"},[s("label",{staticClass:"k-colors-color",style:{background:t.value}},[s("input",{staticClass:"k-colors-picker",attrs:{type:"color"},domProps:{value:t.hex},on:{input:t.onInput}})])])},V=[],F=h(U,O,V,!1,null,null,null,null);const P=F.exports,ot="",L={props:{space:String}};var B=function(){var t=this,s=t._self._c;return s("k-dropdown",[s("k-button",{staticClass:"k-colors-space-button",attrs:{icon:"angle-down",tabindex:"-1"},on:{click:function(e){return t.$refs.dropdown.toggle()}}}),s("k-dropdown-content",{ref:"dropdown",attrs:{align:"right"}},[s("k-dropdown-item",{class:{"is-current":t.space==="hex"},on:{click:function(e){return t.$emit("change-space","hex")}}},[t._v(" HEX ")]),s("k-dropdown-item",{class:{"is-current":t.space==="rgb"},on:{click:function(e){return t.$emit("change-space","rgb")}}},[t._v(" RGB ")]),s("k-dropdown-item",{class:{"is-current":t.space==="hsl"},on:{click:function(e){return t.$emit("change-space","hsl")}}},[t._v(" HSL ")])],1)],1)},W=[],E=h(L,B,W,!1,null,null,null,null);const Y=E.exports,it="",G={components:{ColorsContrast:v,ColorsInput:H,ColorsOpacity:$,ColorsPicker:P,ColorsSpaces:Y},inheritAttrs:!1,props:{name:[String,Number],label:String,value:String,contrast:[Boolean,Array],contrastColors:Array,readability:Boolean,alpha:Boolean,invalid:Boolean,disabled:Boolean,required:Boolean,help:String},computed:{color(){const n=new p(this.value);return this.alpha===!1&&n.setAlpha(100),n},space(){return this.color.toSpace()}},methods:{onChangeSpace(n){this.color.setSpace(n),this.store(this.color.toString())},store(n){this.$emit("input",n)}}};var N=function(){var t=this,s=t._self._c;return s("k-field",t._b({class:["k-colors-field",{"shows-contrast":t.contrast!==!1}]},"k-field",t.$props,!1),[s("k-input",t._b({ref:"input",attrs:{id:t._uid,theme:"field",type:"colors"},on:{input:t.store}},"k-input",t.$props,!1),[s("colors-picker",{attrs:{color:t.color},on:{input:t.store}}),s("colors-input",{attrs:{color:t.color,space:t.space},on:{input:t.store}}),t.alpha!==!1?s("colors-opacity",{attrs:{color:t.color},on:{"change-opacity":t.store}}):t._e(),s("colors-spaces",{attrs:{space:t.space},on:{"change-space":t.onChangeSpace}})],1),t.contrast!==!1?s("colors-contrast",{attrs:{color:t.color,contrast:t.contrast,contrastColors:t.contrastColors}}):t._e()],1)},X=[],j=h(G,N,X,!1,null,null,null,null);const K=j.exports,at="",q={props:{value:String}};var z=function(){var t=this,s=t._self._c;return s("span",{staticClass:"k-colors-structure-preview",style:{backgroundColor:t.value}})},J=[],Q=h(q,z,J,!1,null,null,null,null);const Z=Q.exports;window.panel.plugin("hananils/colors",{fields:{colors:K},components:{"k-colors-field-preview":Z}})})();