primereact/colorpicker/colorpicker.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

this.primereact=this.primereact||{},this.primereact.colorpicker=function(e,n,t,r,o,l,i,c,a,u){"use strict";function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return e[t]}})}})),n.default=e,Object.freeze(n)}var f=s(n),d=p(t);function m(e){return m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},m(e)}function h(e,n){if("object"!=m(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=m(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}function b(e){var n=h(e,"string");return"symbol"==m(n)?n:n+""}function g(e,n,t){return(n=b(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function y(){return y=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},y.apply(null,arguments)}function v(e){if(Array.isArray(e))return e}function x(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=t){var r,o,l,i,c=[],a=!0,u=!1;try{if(l=(t=t.call(e)).next,0===n){if(Object(t)!==t)return;a=!1}else for(;!(a=(r=l.call(t)).done)&&(c.push(r.value),c.length!==n);a=!0);}catch(e){u=!0,o=e}finally{try{if(!a&&null!=t.return&&(i=t.return(),Object(i)!==i))return}finally{if(u)throw o}}return c}}function k(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=Array(n);t<n;t++)r[t]=e[t];return r}function O(e,n){if(e){if("string"==typeof e)return k(e,n);var t={}.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?k(e,n):void 0}}function E(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e,n){return v(e)||x(e,n)||O(e,n)||E()}var S=r.ComponentBase.extend({defaultProps:{__TYPE:"ColorPicker",appendTo:null,autoFocus:!1,children:void 0,className:null,defaultColor:"ff0000",disabled:!1,format:"hex",id:null,inline:!1,inputClassName:null,inputId:null,inputRef:null,inputStyle:null,onChange:null,onHide:null,onShow:null,panelClassName:null,panelStyle:null,style:null,tabIndex:null,tooltip:null,tooltipOptions:null,transitionOptions:null,value:null},css:{classes:{root:function(e){return c.classNames("p-colorpicker p-component",{"p-colorpicker-overlay":!e.props.inline})},input:function(e){var n=e.props;return c.classNames("p-colorpicker-preview p-inputtext",n.inputClassName,{"p-disabled":n.disabled})},panel:function(e){var n=e.panelProps,t=e.context;return c.classNames("p-colorpicker-panel",n.panelClassName,{"p-colorpicker-overlay-panel":!n.inline,"p-disabled":n.disabled,"p-input-filled":t&&"filled"===t.inputStyle||"filled"===d.default.inputStyle,"p-ripple-disabled":t&&!1===t.ripple||!1===d.default.ripple})},content:"p-colorpicker-content",hueHandle:"p-colorpicker-hue-handle",hue:"p-colorpicker-hue",colorHandle:"p-colorpicker-color-handle",color:"p-colorpicker-color",selector:"p-colorpicker-color-selector",transition:"p-connected-overlay"},styles:"\n@layer primereact {\n    .p-colorpicker {\n        display: inline-block;\n    }\n    \n    .p-colorpicker-dragging {\n        cursor: pointer;\n    }\n    \n    .p-colorpicker-overlay {\n        position: relative;\n    }\n    \n    .p-colorpicker-panel {\n        position: relative;\n        width: 193px;\n        height: 166px;\n    }\n    \n    .p-colorpicker-overlay-panel {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n    \n    .p-colorpicker-preview {\n        cursor: pointer;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-content {\n        position: relative;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-color-selector {\n        width: 150px;\n        height: 150px;\n        top: 8px;\n        left: 8px;\n        position: absolute;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-color {\n        width: 150px;\n        height: 150px;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-color-handle {\n        position: absolute;\n        top: 0px;\n        left: 150px;\n        border-radius: 100%;\n        width: 10px;\n        height: 10px;\n        border-width: 1px;\n        border-style: solid;\n        margin: -5px 0 0 -5px;\n        cursor: pointer;\n        opacity: 0.85;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-hue {\n        width: 17px;\n        height: 150px;\n        top: 8px;\n        left: 167px;\n        position: absolute;\n        opacity: 0.85;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-hue-handle {\n        position: absolute;\n        top: 150px;\n        left: 0px;\n        width: 21px;\n        margin-left: -2px;\n        margin-top: -5px;\n        height: 10px;\n        border-width: 2px;\n        border-style: solid;\n        opacity: 0.85;\n        cursor: pointer;\n    }\n    \n    .p-colorpicker-panel .p-colorpicker-color {\n        background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)\n    }\n    .p-colorpicker-panel .p-colorpicker-hue {\n        background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)\n    }\n}\n"}}),M=f.forwardRef((function(e,n){var r,l,i=o.useMergeProps(),c=f.useContext(t.PrimeReactContext),p=e.ptm,s=e.cx,d=(r=i({className:s("panel",{panelProps:e,context:c}),style:e.panelStyle,onClick:e.onClick},p("panel",{hostName:e.hostName})),l=i({classNames:s("transition"),in:e.in,timeout:{enter:120,exit:100},options:e.transitionOptions,unmountOnExit:!0,onEnter:e.onEnter,onEntered:e.onEntered,onExit:e.onExit,onExited:e.onExited},p("transition",{hostName:e.hostName})),f.createElement(a.CSSTransition,y({nodeRef:n},l),f.createElement("div",y({ref:n},r),e.children)));return e.inline?d:f.createElement(u.Portal,{element:d,appendTo:e.appendTo})}));function C(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function P(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?C(Object(t),!0).forEach((function(n){g(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):C(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}M.displayName="ColorPickerPanel";var N=f.memo(f.forwardRef((function(e,n){var a=o.useMergeProps(),u=f.useContext(t.PrimeReactContext),p=S.getProps(e,u),s=w(f.useState(!1),2),m=s[0],h=s[1],b=S.setMetaData({props:p,state:{overlayVisible:m}}),g=b.ptm,v=b.cx,x=b.isUnstyled,k=o.useDisplayOrder("overlay-panel",m&&p.closeOnEscape);r.useHandleStyle(S.css.styles,x,{name:"colorpicker"}),o.useGlobalOnEscapeKey({callback:function(){ue()},when:m&&k,priority:[o.ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL,k]});var O=f.useRef(null),E=f.useRef(null),C=f.useRef(p.inputRef),N=f.useRef(null),j=f.useRef(null),D=f.useRef(null),T=f.useRef(null),R=f.useRef(!1),I=f.useRef(null),H=f.useRef(!1),U=w(o.useOverlayListener({target:O,overlay:E,listener:function(e,n){n.valid&&(u.hideOverlaysOnDocumentScrolling||"outside"===n.type?ue():c.DomHandler.isDocument(e.target)||ke())},when:m}),2),Y=U[0],_=U[1],A=w(o.useEventListener({type:"mousemove",listener:function(e){H.current&&W(e),R.current&&V(e)}}),2),L=A[0],Z=A[1],F=w(o.useEventListener({type:"mouseup",listener:function(){H.current=R.current=!1,c.DomHandler.removeClass(O.current,"p-colorpicker-dragging"),Z(),B()}}),2),z=F[0],B=F[1],K=function(e){p.disabled||(R.current=!0,V(e),!x&&c.DomHandler.addClass(O.current,"p-colorpicker-dragging"),e.preventDefault())},G=function(e){return void 0!==e.pageY?e.pageY:void 0!==e.changedTouches?e.changedTouches[0].pageY:0},V=function(e){var n=T.current.getBoundingClientRect().top+(window.scrollY||document.documentElement.scrollTop||document.body.scrollTop||0),t=G(e),r=Math.floor(360*(150-Math.max(0,Math.min(150,t-n)))/150);I.current=de({h:r,s:I.current.s,b:I.current.b}),oe(),ie(),ee()},X=function(e){p.disabled||(H.current=!0,W(e),!x&&c.DomHandler.addClass(O.current,"p-colorpicker-dragging"),e.preventDefault())},$=function(e){H.current&&(W(e),e.preventDefault()),R.current&&(V(e),e.preventDefault())},q=function(){H.current=!1,R.current=!1,!x&&c.DomHandler.removeClass(O.current,"p-colorpicker-dragging"),Q()},J=function(){L(),z()},Q=function(){Z(),B()},W=function(e){var n=N.current.getBoundingClientRect(),t=n.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),r=n.left+document.body.scrollLeft,o=Math.floor(100*Math.max(0,Math.min(150,(e.pageX||e.changedTouches[0].pageX)-r))/150),l=Math.floor(100*(150-Math.max(0,Math.min(150,(e.pageY||e.changedTouches[0].pageY)-t)))/150);I.current=de({h:I.current.h,s:o,b:l}),le(),ce(),ee()},ee=function(){switch(p.format){case"hex":re(ve(I.current));break;case"rgb":re(ge(I.current));break;case"hsb":re(I.current)}},ne=function(e){var n;if(e)switch(p.format){case"hex":n=he(e);break;case"rgb":n=be(e);break;case"hsb":n=e}else n=he(p.defaultColor);return n},te=function(e){I.current=ne(e)},re=function(e){p.onChange&&p.onChange({value:e,stopPropagation:function(){},preventDefault:function(){},target:{name:p.name,id:p.id,value:e}})},oe=function(){if(N.current){var e=de({h:I.current.h,s:100,b:100});N.current.style.backgroundColor="#"+ve(e)}},le=function(){j.current&&(j.current.style.left=Math.floor(150*I.current.s/100)+"px",j.current.style.top=Math.floor(150*(100-I.current.b)/100)+"px")},ie=function(){D.current&&(D.current.style.top=Math.floor(150-150*I.current.h/360)+"px")},ce=function(){C.current&&(C.current.style.backgroundColor="#"+ve(I.current))},ae=function(){h(!0)},ue=function(){h(!1)},pe=function(){se()},se=function(){m?ue():ae()},fe=function(e){switch(e.which){case 32:se(),e.preventDefault();break;case 27:case 9:ue()}},de=function(e){return{h:Math.min(360,Math.max(0,e.h)),s:Math.min(100,Math.max(0,e.s)),b:Math.min(100,Math.max(0,e.b))}},me=function(e){var n=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:n>>16,g:(65280&n)>>8,b:255&n}},he=function(e){return be(me(e))},be=function(e){var n={h:0,s:0,b:0},t=Math.min(e.r,e.g,e.b),r=Math.max(e.r,e.g,e.b),o=r-t;return n.b=r,n.s=0!==r?255*o/r:0,n.h=0!==n.s?e.r===r?(e.g-e.b)/o:e.g===r?2+(e.b-e.r)/o:4+(e.r-e.g)/o:-1,n.h=60*n.h,n.h<0&&(n.h=n.h+360),n.s=n.s*(100/255),n.b=n.b*(100/255),n},ge=function(e){var n={r:null,g:null,b:null},t=Math.round(e.h),r=Math.round(255*e.s/100),o=Math.round(255*e.b/100);if(0===r)n={r:o,g:o,b:o};else{var l=o,i=(255-r)*o/255,c=t%60*(l-i)/60;360===t&&(t=0),t<60?(n.r=l,n.b=i,n.g=i+c):t<120?(n.g=l,n.b=i,n.r=l-c):t<180?(n.g=l,n.r=i,n.b=i+c):t<240?(n.b=l,n.r=i,n.g=l-c):t<300?(n.b=l,n.g=i,n.r=i+c):t<360?(n.r=l,n.g=i,n.b=l-c):(n.r=0,n.g=0,n.b=0)}return{r:Math.round(n.r),g:Math.round(n.g),b:Math.round(n.b)}},ye=function(e){var n=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var t in n)1===n[t].length&&(n[t]="0"+n[t]);return n.join("")},ve=function(e){return ye(ge(e))},xe=function(){ie(),le(),ce(),oe()},ke=function(){C.current&&c.DomHandler.alignOverlay(E.current,C.current.parentElement,p.appendTo||u&&u.appendTo||d.default.appendTo)};f.useImperativeHandle(n,(function(){return{props:p,show:ae,hide:ue,focus:function(){return c.DomHandler.focus(C.current)},getElement:function(){return O.current},getOverlay:function(){return E.current},getInput:function(){return C.current}}})),f.useEffect((function(){c.ObjectUtils.combinedRefs(C,p.inputRef)}),[C,p.inputRef]),o.useMountEffect((function(){te(p.value),xe(),p.autoFocus&&c.DomHandler.focus(C.current,p.autoFocus),ke()})),o.useUpdateEffect((function(){H.current||R.current||te(p.value)}),[p.value]),o.useUpdateEffect((function(){xe()})),o.useUnmountEffect((function(){c.ZIndexUtils.clear(E.current)}));var Oe,Ee,we,Se,Me,Ce,Pe,Ne,je=c.ObjectUtils.isNotEmpty(p.tooltip),De=(Oe=a({ref:N,className:v("selector"),onMouseDown:function(e){return n=e,void(p.disabled||(J(),X(n)));var n},onTouchStart:function(e){return X(e)},onTouchMove:function(e){return $(e)},onTouchEnd:q},g("selector")),Ee=a({className:v("color")},g("color")),we=a({ref:j,className:v("colorHandle")},g("colorHandle")),Ce=f.createElement("div",Oe,f.createElement("div",Ee,f.createElement("div",we))),Se=a({className:v("hue"),onMouseDown:function(e){return n=e,void(p.disabled||(J(),K(n)));var n},onTouchStart:function(e){return K(e)},onTouchMove:function(e){return $(e)},onTouchEnd:q},g("hue")),Me=a({className:v("hueHandle")},g("hueHandle")),Pe=f.createElement("div",y({ref:T},Se),f.createElement("div",y({ref:D},Me))),Ne=a({className:v("content")},g("content")),f.createElement("div",Ne,Ce,Pe)),Te=function(){if(!p.inline){var e=S.getOtherProps(p),n=a(P({ref:C,type:"text",readOnly:!0,className:v("input"),style:p.inputStyle,id:p.inputId,tabIndex:p.tabIndex,disabled:p.disabled,onClick:pe,onKeyDown:fe},e),g("input"));return f.createElement("input",n)}return null}(),Re=a({id:p.id,ref:O,style:p.style,className:c.classNames(p.className,v("root"))},S.getOtherProps(p),g("root"));return f.createElement(f.Fragment,null,f.createElement("div",Re,Te,f.createElement(M,{hostName:"ColorPicker",ref:E,appendTo:p.appendTo,inline:p.inline,disabled:p.disabled,panelStyle:p.panelStyle,panelClassName:p.panelClassName,onClick:function(e){p.inline||l.OverlayService.emit("overlay-click",{originalEvent:e,target:O.current})},in:p.inline||m,onEnter:function(){var e=p.inline?void 0:{position:"absolute",top:"0",left:"0"};c.ZIndexUtils.set("overlay",E.current,u&&u.autoZIndex||d.default.autoZIndex,u&&u.zIndex.overlay||d.default.zIndex.overlay),c.DomHandler.addStyles(E.current,e),ke()},onEntered:function(){Y(),p.onShow&&p.onShow()},onExit:function(){_()},onExited:function(){c.ZIndexUtils.clear(E.current),p.onHide&&p.onHide()},transitionOptions:p.transitionOptions,ptm:g,cx:v},De)),je&&f.createElement(i.Tooltip,y({target:O,content:p.tooltip,pt:g("tooltip")},p.tooltipOptions)))})));return N.displayName="ColorPicker",e.ColorPicker=N,Object.defineProperty(e,"__esModule",{value:!0}),e}({},React,primereact.api,primereact.componentbase,primereact.hooks,primereact.overlayservice,primereact.tooltip,primereact.utils,primereact.csstransition,primereact.portal);