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

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