primereact/colorpicker/colorpicker.esm.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

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