"use strict";(self.webpackChunkweb_toolbox=self.webpackChunkweb_toolbox||[]).push([[917],{50057:(e,t,n)=>{n.d(t,{n:()=>c});var a=n(9950),o=n(25131),r=n(72772),i=n(73931);const l=(0,o.A)((e=>({root:{margin:e.spacing(1)}}))),c=e=>{let{title:t,iconType:n,children:o}=e;const c=l();return a.createElement(a.Fragment,null,a.createElement(r.m,{titleTemplate:"Web Toolbox - %s",defaultTitle:"Web Toolbox",title:t}),a.createElement("div",{className:c.root},a.createElement(i.A,{iconType:n,title:t}),o))}},73931:(e,t,n)=>{n.d(t,{A:()=>i});var a=n(9950),o=n(82053);const r=(0,n(25131).A)((e=>({title:{wordBreak:"break-word"},titleWithIcon:{display:"flex",justifyContent:"center",alignItems:"center",marginBottom:e.spacing(1)},icon:{height:"40px",width:"40px",marginRight:e.spacing(1)}}))),i=e=>{let{title:t,iconType:n}=e;const i=r();return a.createElement("div",{className:i.titleWithIcon},a.createElement(n,{className:i.icon}),a.createElement(o.A,{variant:"h5",className:i.title},t))}},19917:(e,t,n)=>{n.r(t),n.d(t,{default:()=>A});var a=n(9950),o=n(35607),r=n(88864),i=n(13004),l=n(16491),c=n(82053),s=n(10226),d=n(67243),m=n.n(d),u=n(27847),g=n(25825),p=n(50057),v=n(77671);function f(e){if(e<0||e>1)throw new Error("Invalid opacity value");return Math.round(255*e).toString(16)}function h(e,t){var n,a,o;const r=function(e){const t=e.target,n=t.getBoundingClientRect(),a=n.left,o=n.top,r=e.pageX-a,i=e.pageY-o,l=t.clientWidth,c=t.clientHeight,s=t.naturalWidth,d=t.naturalHeight,m=Math.round(r/l*s),u=Math.round(i/c*d);return{px:m,py:u,width:s,height:d}}(e),i=document.createElement("canvas"),l=i.getContext("2d");if(!l)return{r:0,g:0,b:0,a:1};i.width=r.width,i.height=r.height,l.drawImage(t,0,0);const c=l.getImageData(r.px,r.py,1,1).data;return{r:null!==(n=+c[0])&&void 0!==n?n:0,g:null!==(a=+c[1])&&void 0!==a?a:0,b:null!==(o=+c[2])&&void 0!==o?o:0,a:1}}const b=e=>"#"+("000000"+function(e,t,n){if(e>255||t>255||n>255)throw new Error("Invalid color component");return(e<<16|t<<8|n).toString(16)}(e.r,e.g,e.b)).slice(-6);var E=n(25131);const y={marginTop:10,display:"flex",alignItems:"center",justifyContent:"center",border:"solid 1px blue"},C=(0,E.A)((e=>({image:{width:"100%",margin:5,border:"dashed 1px grey"},imageSelector:{margin:e.spacing(2),textAlign:"center"},toolbar:{margin:e.spacing(2)},sample:{cursor:"pointer",width:"100%",height:50,marginBottom:e.spacing(1),borderColor:e.palette.text.disabled,borderStyle:"solid",borderWidth:1,borderRadius:e.shape.borderRadius,textAlign:"center",fontSize:16,fontFamily:"monospace",textShadow:"1px 1px lightgrey"},colorPicker:{marginTop:e.spacing(2)}}))),x="",A=()=>{var e,t,n;const d=C(),{setToasterState:E}=(0,v.dq)(),[A,k]=a.useState(""),[w,I]=a.useState(),[S,N]=a.useState(x),[T,D]=a.useState(x),[R,W]=a.useState(x),[j,B]=a.useState(x);function F(e){!function(e,t){if(e)for(let n=0;n<e.length;n++){const a=e[n];if(a.type.startsWith("image")){const e=new FileReader;e.onload=t,e.readAsDataURL(a.getAsFile());break}}}((e.clipboardData||e.originalEvent.clipboardData||e.originalEvent.clipboard).items,(e=>{var t;return k(null===(t=e.target)||void 0===t?void 0:t.result)}))}function L(e){const t=document.getElementById("image");if(t){const n=h(e,t);I(n)}}(0,a.useEffect)((()=>{var e,t;w?(N(b(w)),D(b(w)+f(null!==(e=w.a)&&void 0!==e?e:1)),W("rgb(".concat(w.r,", ").concat(w.g,", ").concat(w.b,")")),B("rgba(".concat(w.r,", ").concat(w.g,", ").concat(w.b,", ").concat(null!==(t=w.a)&&void 0!==t?t:1,")"))):(N(x),D(x),W(x),B(x))}),[w]),a.useEffect((()=>(document.onpaste=F,()=>{document.removeEventListener("onpaste",F)})),[]),a.useEffect((()=>{if(A){const e=document.getElementById("image");e&&e.addEventListener("click",L)}}),[A]);const H=e=>{const t=e.substring(0,20),n="Content copied into clipboard: ".concat(t," \u2026");m()(e,{format:"text/plain"}),E({open:!0,message:n,type:"success",autoHideDuration:2e3})};return a.createElement(p.n,{iconType:r.A,title:"Color picker"},a.createElement(l.A,{component:"div",alignItems:"center",justifyContent:"center",className:d.imageSelector},!A&&a.createElement("div",null,a.createElement(c.A,{variant:"body2"},"paste image or select a file:"," ",a.createElement("input",{type:"file",color:"primary",accept:"image/*",onChange:e=>{var t,n;return function(e){if(!e)return;const t=new FileReader;t.onload=e=>{var t;return k(null===(t=e.target)||void 0===t?void 0:t.result)},t.readAsDataURL(e)}(null===(t=e.target)||void 0===t||null===(n=t.files)||void 0===n?void 0:n[0])},id:"files-selector-action",style:{display:"none"}}),a.createElement("label",{htmlFor:"files-selector-action"},a.createElement(s.A,{variant:"contained",component:"span",color:"primary"},a.createElement(i.A,null))))),A&&a.createElement(u.c,{style:y,defaultSize:{width:300,height:"100%"}},a.createElement("img",{id:"image",src:A,alt:"Clipboard content",className:d.image}))),a.createElement(l.A,{component:"div",flexDirection:"column",alignItems:"center",justifyContent:"center",className:d.colorPicker},a.createElement(c.A,{variant:"body2"},"or just pick a color:"),a.createElement(g.Xq,{color:w,onChangeComplete:e=>I(e.rgb)}),a.createElement("pre",null,"Opacity to hexa: ",100*(null!==(e=null===w||void 0===w?void 0:w.a)&&void 0!==e?e:1),"% = ",null!==(t=null===w||void 0===w?void 0:w.a)&&void 0!==t?t:1," = ",f(null!==(n=null===w||void 0===w?void 0:w.a)&&void 0!==n?n:1))),A&&a.createElement(l.A,{component:"div",alignItems:"center",justifyContent:"center"},a.createElement(s.A,{endIcon:a.createElement(o.A,null),variant:"contained",color:"primary",onClick:function(e){e.preventDefault(),k(""),I(void 0)}},"Clear")),a.createElement(l.A,{component:"div",flexDirection:"column",alignItems:"center",justifyContent:"center"},a.createElement("div",{className:d.sample,style:{backgroundColor:S},onClick:()=>H(S)},S),a.createElement("div",{className:d.sample,style:{backgroundColor:T},onClick:()=>H(T)},T),a.createElement("div",{className:d.sample,style:{backgroundColor:R},onClick:()=>H(R)},R),a.createElement("div",{className:d.sample,style:{backgroundColor:j},onClick:()=>H(j)},j)))}}}]);