primeng/bundles/primeng-colorpicker.umd.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primeng) [![Discord](https://img.shields.io/discord/557940238991753

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/animations"),require("@angular/common"),require("primeng/dom"),require("@angular/forms")):"function"==typeof define&&define.amd?define("primeng/colorpicker",["exports","@angular/core","@angular/animations","@angular/common","primeng/dom","@angular/forms"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).primeng=e.primeng||{},e.primeng.colorpicker={}),e.ng.core,e.ng.animations,e.ng.common,e.primeng.dom,e.ng.forms)}(this,(function(e,t,o,i,n,r){"use strict";var s={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return l})),multi:!0},l=function(){function e(e,o,i){this.el=e,this.renderer=o,this.cd=i,this.format="hex",this.autoZIndex=!0,this.baseZIndex=0,this.showTransitionOptions=".12s cubic-bezier(0, 0, 0.2, 1)",this.hideTransitionOptions=".1s linear",this.onChange=new t.EventEmitter,this.onShow=new t.EventEmitter,this.onHide=new t.EventEmitter,this.value={h:0,s:100,b:100},this.defaultColor="ff0000",this.onModelChange=function(){},this.onModelTouched=function(){}}return Object.defineProperty(e.prototype,"colorSelector",{set:function(e){this.colorSelectorViewChild=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"colorHandle",{set:function(e){this.colorHandleViewChild=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"hue",{set:function(e){this.hueViewChild=e},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"hueHandle",{set:function(e){this.hueHandleViewChild=e},enumerable:!1,configurable:!0}),e.prototype.onHueMousedown=function(e){this.disabled||(this.bindDocumentMousemoveListener(),this.bindDocumentMouseupListener(),this.hueDragging=!0,this.pickHue(e))},e.prototype.pickHue=function(e){var t=this.hueViewChild.nativeElement.getBoundingClientRect().top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0);this.value=this.validateHSB({h:Math.floor(360*(150-Math.max(0,Math.min(150,e.pageY-t)))/150),s:this.value.s,b:this.value.b}),this.updateColorSelector(),this.updateUI(),this.updateModel(),this.onChange.emit({originalEvent:e,value:this.getValueToUpdate()})},e.prototype.onColorMousedown=function(e){this.disabled||(this.bindDocumentMousemoveListener(),this.bindDocumentMouseupListener(),this.colorDragging=!0,this.pickColor(e))},e.prototype.pickColor=function(e){var t=this.colorSelectorViewChild.nativeElement.getBoundingClientRect(),o=t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),i=t.left+document.body.scrollLeft,n=Math.floor(100*Math.max(0,Math.min(150,e.pageX-i))/150),r=Math.floor(100*(150-Math.max(0,Math.min(150,e.pageY-o)))/150);this.value=this.validateHSB({h:this.value.h,s:n,b:r}),this.updateUI(),this.updateModel(),this.onChange.emit({originalEvent:e,value:this.getValueToUpdate()})},e.prototype.getValueToUpdate=function(){var e;switch(this.format){case"hex":e="#"+this.HSBtoHEX(this.value);break;case"rgb":e=this.HSBtoRGB(this.value);break;case"hsb":e=this.value}return e},e.prototype.updateModel=function(){this.onModelChange(this.getValueToUpdate())},e.prototype.writeValue=function(e){if(e)switch(this.format){case"hex":this.value=this.HEXtoHSB(e);break;case"rgb":this.value=this.RGBtoHSB(e);break;case"hsb":this.value=e}else this.value=this.HEXtoHSB(this.defaultColor);this.updateColorSelector(),this.updateUI(),this.cd.markForCheck()},e.prototype.updateColorSelector=function(){if(this.colorSelectorViewChild){var e={s:100,b:100};e.h=this.value.h,this.colorSelectorViewChild.nativeElement.style.backgroundColor="#"+this.HSBtoHEX(e)}},e.prototype.updateUI=function(){this.colorHandleViewChild&&this.hueHandleViewChild.nativeElement&&(this.colorHandleViewChild.nativeElement.style.left=Math.floor(150*this.value.s/100)+"px",this.colorHandleViewChild.nativeElement.style.top=Math.floor(150*(100-this.value.b)/100)+"px",this.hueHandleViewChild.nativeElement.style.top=Math.floor(150-150*this.value.h/360)+"px"),this.inputBgColor="#"+this.HSBtoHEX(this.value)},e.prototype.onInputFocus=function(){this.onModelTouched()},e.prototype.show=function(){this.overlayVisible=!0},e.prototype.onOverlayAnimationStart=function(e){switch(e.toState){case"visible":this.inline||(this.overlay=e.element,this.appendOverlay(),this.autoZIndex&&(this.overlay.style.zIndex=String(this.baseZIndex+ ++n.DomHandler.zindex)),this.alignOverlay(),this.bindDocumentClickListener(),this.bindDocumentResizeListener(),this.bindScrollListener(),this.updateColorSelector(),this.updateUI());break;case"void":this.onOverlayHide()}},e.prototype.onOverlayAnimationEnd=function(e){switch(e.toState){case"visible":this.inline||this.onShow.emit({});break;case"void":this.onHide.emit({})}},e.prototype.appendOverlay=function(){this.appendTo&&("body"===this.appendTo?document.body.appendChild(this.overlay):n.DomHandler.appendChild(this.overlay,this.appendTo))},e.prototype.restoreOverlayAppend=function(){this.overlay&&this.appendTo&&this.el.nativeElement.appendChild(this.overlay)},e.prototype.alignOverlay=function(){this.appendTo?n.DomHandler.absolutePosition(this.overlay,this.inputViewChild.nativeElement):n.DomHandler.relativePosition(this.overlay,this.inputViewChild.nativeElement)},e.prototype.hide=function(){this.overlayVisible=!1,this.cd.markForCheck()},e.prototype.onInputClick=function(){this.selfClick=!0,this.togglePanel()},e.prototype.togglePanel=function(){this.overlayVisible?this.hide():this.show()},e.prototype.onInputKeydown=function(e){switch(e.which){case 32:this.togglePanel(),e.preventDefault();break;case 27:case 9:this.hide()}},e.prototype.onPanelClick=function(){this.selfClick=!0},e.prototype.registerOnChange=function(e){this.onModelChange=e},e.prototype.registerOnTouched=function(e){this.onModelTouched=e},e.prototype.setDisabledState=function(e){this.disabled=e,this.cd.markForCheck()},e.prototype.bindDocumentClickListener=function(){var e=this;if(!this.documentClickListener){var t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentClickListener=this.renderer.listen(t,"click",(function(){e.selfClick||(e.overlayVisible=!1,e.unbindDocumentClickListener()),e.selfClick=!1,e.cd.markForCheck()}))}},e.prototype.unbindDocumentClickListener=function(){this.documentClickListener&&(this.documentClickListener(),this.documentClickListener=null)},e.prototype.bindDocumentMousemoveListener=function(){var e=this;if(!this.documentMousemoveListener){var t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentMousemoveListener=this.renderer.listen(t,"mousemove",(function(t){e.colorDragging&&e.pickColor(t),e.hueDragging&&e.pickHue(t)}))}},e.prototype.unbindDocumentMousemoveListener=function(){this.documentMousemoveListener&&(this.documentMousemoveListener(),this.documentMousemoveListener=null)},e.prototype.bindDocumentMouseupListener=function(){var e=this;if(!this.documentMouseupListener){var t=this.el?this.el.nativeElement.ownerDocument:"document";this.documentMouseupListener=this.renderer.listen(t,"mouseup",(function(){e.colorDragging=!1,e.hueDragging=!1,e.unbindDocumentMousemoveListener(),e.unbindDocumentMouseupListener()}))}},e.prototype.unbindDocumentMouseupListener=function(){this.documentMouseupListener&&(this.documentMouseupListener(),this.documentMouseupListener=null)},e.prototype.bindDocumentResizeListener=function(){this.documentResizeListener=this.onWindowResize.bind(this),window.addEventListener("resize",this.documentResizeListener)},e.prototype.unbindDocumentResizeListener=function(){this.documentResizeListener&&(window.removeEventListener("resize",this.documentResizeListener),this.documentResizeListener=null)},e.prototype.onWindowResize=function(){this.hide()},e.prototype.bindScrollListener=function(){var e=this;this.scrollHandler||(this.scrollHandler=new n.ConnectedOverlayScrollHandler(this.containerViewChild.nativeElement,(function(){e.overlayVisible&&e.hide()}))),this.scrollHandler.bindScrollListener()},e.prototype.unbindScrollListener=function(){this.scrollHandler&&this.scrollHandler.unbindScrollListener()},e.prototype.validateHSB=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))}},e.prototype.validateRGB=function(e){return{r:Math.min(255,Math.max(0,e.r)),g:Math.min(255,Math.max(0,e.g)),b:Math.min(255,Math.max(0,e.b))}},e.prototype.validateHEX=function(e){var t=6-e.length;if(t>0){for(var o=[],i=0;i<t;i++)o.push("0");o.push(e),e=o.join("")}return e},e.prototype.HEXtoRGB=function(e){var t=parseInt(e.indexOf("#")>-1?e.substring(1):e,16);return{r:t>>16,g:(65280&t)>>8,b:255&t}},e.prototype.HEXtoHSB=function(e){return this.RGBtoHSB(this.HEXtoRGB(e))},e.prototype.RGBtoHSB=function(e){var t={h:0,s:0,b:0},o=Math.min(e.r,e.g,e.b),i=Math.max(e.r,e.g,e.b),n=i-o;return t.b=i,t.s=0!=i?255*n/i:0,0!=t.s?e.r==i?t.h=(e.g-e.b)/n:e.g==i?t.h=2+(e.b-e.r)/n:t.h=4+(e.r-e.g)/n:t.h=-1,t.h*=60,t.h<0&&(t.h+=360),t.s*=100/255,t.b*=100/255,t},e.prototype.HSBtoRGB=function(e){var t={r:null,g:null,b:null},o=e.h,i=255*e.s/100,n=255*e.b/100;if(0==i)t={r:n,g:n,b:n};else{var r=n,s=(255-i)*n/255,l=o%60*(r-s)/60;360==o&&(o=0),o<60?(t.r=r,t.b=s,t.g=s+l):o<120?(t.g=r,t.b=s,t.r=r-l):o<180?(t.g=r,t.r=s,t.b=s+l):o<240?(t.b=r,t.r=s,t.g=r-l):o<300?(t.b=r,t.g=s,t.r=s+l):o<360?(t.r=r,t.g=s,t.b=r-l):(t.r=0,t.g=0,t.b=0)}return{r:Math.round(t.r),g:Math.round(t.g),b:Math.round(t.b)}},e.prototype.RGBtoHEX=function(e){var t=[e.r.toString(16),e.g.toString(16),e.b.toString(16)];for(var o in t)1==t[o].length&&(t[o]="0"+t[o]);return t.join("")},e.prototype.HSBtoHEX=function(e){return this.RGBtoHEX(this.HSBtoRGB(e))},e.prototype.onOverlayHide=function(){this.unbindScrollListener(),this.unbindDocumentResizeListener(),this.unbindDocumentClickListener(),this.overlay=null},e.prototype.ngOnDestroy=function(){this.scrollHandler&&(this.scrollHandler.destroy(),this.scrollHandler=null),this.restoreOverlayAppend(),this.onOverlayHide()},e}();l.decorators=[{type:t.Component,args:[{selector:"p-colorPicker",template:'\n        <div #container [ngStyle]="style" [class]="styleClass" [ngClass]="{\'p-colorpicker p-component\':true,\'p-colorpicker-overlay\':!inline,\'p-colorpicker-dragging\':colorDragging||hueDragging}">\n            <input #input type="text" *ngIf="!inline" class="p-colorpicker-preview p-inputtext" readonly="readonly" [ngClass]="{\'p-disabled\': disabled}"\n                (focus)="onInputFocus()" (click)="onInputClick()" (keydown)="onInputKeydown($event)" [attr.id]="inputId" [attr.tabindex]="tabindex" [disabled]="disabled"\n                [style.backgroundColor]="inputBgColor">\n            <div *ngIf="inline || overlayVisible" [ngClass]="{\'p-colorpicker-panel\': true, \'p-colorpicker-overlay-panel\':!inline, \'p-disabled\': disabled}" (click)="onPanelClick()"\n                [@overlayAnimation]="{value: \'visible\', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true" \n                    (@overlayAnimation.start)="onOverlayAnimationStart($event)" (@overlayAnimation.done)="onOverlayAnimationEnd($event)">\n                <div class="p-colorpicker-content">\n                    <div #colorSelector class="p-colorpicker-color-selector" (mousedown)="onColorMousedown($event)">\n                        <div class="p-colorpicker-color">\n                            <div #colorHandle class="p-colorpicker-color-handle"></div>\n                        </div>\n                    </div>\n                    <div #hue class="p-colorpicker-hue" (mousedown)="onHueMousedown($event)">\n                        <div #hueHandle class="p-colorpicker-hue-handle"></div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ',animations:[o.trigger("overlayAnimation",[o.transition(":enter",[o.style({opacity:0,transform:"scaleY(0.8)"}),o.animate("{{showTransitionParams}}")]),o.transition(":leave",[o.animate("{{hideTransitionParams}}",o.style({opacity:0}))])])],providers:[s],changeDetection:t.ChangeDetectionStrategy.OnPush,encapsulation:t.ViewEncapsulation.None,styles:[".p-colorpicker{display:inline-block}.p-colorpicker-dragging{cursor:pointer}.p-colorpicker-overlay{position:relative}.p-colorpicker-panel{height:166px;position:relative;width:193px}.p-colorpicker-overlay-panel{position:absolute}.p-colorpicker-preview{cursor:pointer}.p-colorpicker-panel .p-colorpicker-content{position:relative}.p-colorpicker-panel .p-colorpicker-color-selector{height:150px;left:8px;position:absolute;top:8px;width:150px}.p-colorpicker-panel .p-colorpicker-color{height:150px;width:150px}.p-colorpicker-panel .p-colorpicker-color-handle{border-radius:100%;border-style:solid;border-width:1px;cursor:pointer;height:10px;left:150px;margin:-5px 0 0 -5px;opacity:.85;position:absolute;top:0;width:10px}.p-colorpicker-panel .p-colorpicker-hue{height:150px;left:167px;opacity:.85;position:absolute;top:8px;width:17px}.p-colorpicker-panel .p-colorpicker-hue-handle{border-style:solid;border-width:2px;cursor:pointer;height:10px;left:0;margin-left:-2px;margin-top:-5px;opacity:.85;position:absolute;top:150px;width:21px}"]}]}],l.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.ChangeDetectorRef}]},l.propDecorators={style:[{type:t.Input}],styleClass:[{type:t.Input}],inline:[{type:t.Input}],format:[{type:t.Input}],appendTo:[{type:t.Input}],disabled:[{type:t.Input}],tabindex:[{type:t.Input}],inputId:[{type:t.Input}],autoZIndex:[{type:t.Input}],baseZIndex:[{type:t.Input}],showTransitionOptions:[{type:t.Input}],hideTransitionOptions:[{type:t.Input}],onChange:[{type:t.Output}],onShow:[{type:t.Output}],onHide:[{type:t.Output}],containerViewChild:[{type:t.ViewChild,args:["container"]}],inputViewChild:[{type:t.ViewChild,args:["input"]}],colorSelector:[{type:t.ViewChild,args:["colorSelector"]}],colorHandle:[{type:t.ViewChild,args:["colorHandle"]}],hue:[{type:t.ViewChild,args:["hue"]}],hueHandle:[{type:t.ViewChild,args:["hueHandle"]}]};var a=function(){};a.decorators=[{type:t.NgModule,args:[{imports:[i.CommonModule],exports:[l],declarations:[l]}]}],e.COLORPICKER_VALUE_ACCESSOR=s,e.ColorPicker=l,e.ColorPickerModule=a,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=primeng-colorpicker.umd.min.js.map