| 1 | !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=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=this&&this.__decorate||function(e,t,o,i){var n,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(n=e[l])&&(s=(r<3?n(s):r>3?n(t,o,s):n(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s},l={provide:r.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return a})),multi:!0},a=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="225ms ease-out",this.hideTransitionOptions="195ms ease-in",this.onChange=new t.EventEmitter,this.defaultColor="ff0000",this.onModelChange=function(){},this.onModelTouched=function(){}}return Object.defineProperty(e.prototype,"colorSelector",{set:function(e){this.colorSelectorViewChild=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"colorHandle",{set:function(e){this.colorHandleViewChild=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hue",{set:function(e){this.hueViewChild=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"hueHandle",{set:function(e){this.hueHandleViewChild=e},enumerable:!0,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()},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.updateColorSelector(),this.updateUI());break;case"void":this.onOverlayHide()}},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},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},e.prototype.bindDocumentClickListener=function(){var e=this;this.documentClickListener||(this.documentClickListener=this.renderer.listen("document","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;this.documentMousemoveListener||(this.documentMousemoveListener=this.renderer.listen("document","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;this.documentMouseupListener||(this.documentMouseupListener=this.renderer.listen("document","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.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.unbindDocumentClickListener(),this.overlay=null},e.prototype.ngOnDestroy=function(){this.restoreOverlayAppend(),this.onOverlayHide()},e.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2},{type:t.ChangeDetectorRef}]},s([t.Input()],e.prototype,"style",void 0),s([t.Input()],e.prototype,"styleClass",void 0),s([t.Input()],e.prototype,"inline",void 0),s([t.Input()],e.prototype,"format",void 0),s([t.Input()],e.prototype,"appendTo",void 0),s([t.Input()],e.prototype,"disabled",void 0),s([t.Input()],e.prototype,"tabindex",void 0),s([t.Input()],e.prototype,"inputId",void 0),s([t.Input()],e.prototype,"autoZIndex",void 0),s([t.Input()],e.prototype,"baseZIndex",void 0),s([t.Input()],e.prototype,"showTransitionOptions",void 0),s([t.Input()],e.prototype,"hideTransitionOptions",void 0),s([t.Output()],e.prototype,"onChange",void 0),s([t.ViewChild("input")],e.prototype,"inputViewChild",void 0),s([t.ViewChild("colorSelector")],e.prototype,"colorSelector",null),s([t.ViewChild("colorHandle")],e.prototype,"colorHandle",null),s([t.ViewChild("hue")],e.prototype,"hue",null),s([t.ViewChild("hueHandle")],e.prototype,"hueHandle",null),e=s([t.Component({selector:"p-colorPicker",template:'\n <div [ngStyle]="style" [class]="styleClass" [ngClass]="{\'ui-colorpicker ui-widget\':true,\'ui-colorpicker-overlay\':!inline,\'ui-colorpicker-dragging\':colorDragging||hueDragging}">\n <input #input type="text" *ngIf="!inline" class="ui-colorpicker-preview ui-inputtext ui-state-default ui-corner-all" readonly="readonly" [ngClass]="{\'ui-state-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]="{\'ui-colorpicker-panel ui-corner-all\': true, \'ui-colorpicker-overlay-panel ui-shadow\':!inline, \'ui-state-disabled\': disabled}" (click)="onPanelClick()"\n [@overlayAnimation]="{value: \'visible\', params: {showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions}}" [@.disabled]="inline === true" (@overlayAnimation.start)="onOverlayAnimationStart($event)">\n <div class="ui-colorpicker-content">\n <div #colorSelector class="ui-colorpicker-color-selector" (mousedown)="onColorMousedown($event)">\n <div class="ui-colorpicker-color">\n <div #colorHandle class="ui-colorpicker-color-handle"></div>\n </div>\n </div>\n <div #hue class="ui-colorpicker-hue" (mousedown)="onHueMousedown($event)">\n <div #hueHandle class="ui-colorpicker-hue-handle"></div>\n </div>\n </div>\n </div>\n </div>\n ',animations:[o.trigger("overlayAnimation",[o.state("void",o.style({transform:"translateY(5%)",opacity:0})),o.state("visible",o.style({transform:"translateY(0)",opacity:1})),o.transition("void => visible",o.animate("{{showTransitionParams}}")),o.transition("visible => void",o.animate("{{hideTransitionParams}}"))])],providers:[l],changeDetection:t.ChangeDetectionStrategy.Default})],e)}(),u=function(){function e(){}return e=s([t.NgModule({imports:[i.CommonModule],exports:[a],declarations:[a]})],e)}();e.COLORPICKER_VALUE_ACCESSOR=l,e.ColorPicker=a,e.ColorPickerModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
|