@lidorsystems/integralui-web/bin/integralui/components/integralui.colorpicker.js

IntegralUI Web - Advanced UI Components for Angular

/*
  filename: integralui.colorpicker.js
  version : 20.2.0
  Copyright © 2016-2020 Lidor Systems. All rights reserved.

  This file is part of the "IntegralUI Web" Library. 
                                                                   
  The contents of this file are subject to the IntegralUI Web License, and may not be used except in compliance with the License.
  A copy of the License should have been installed in the product's root installation directory or it can be found at
  http://www.lidorsystems.com/products/web/studio/license-agreement.aspx.
                                                            
  This SOFTWARE is provided "AS IS", WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the specific language 
  governing rights and limitations under the License. Any infringement will be prosecuted under applicable laws.                           
*/
"use strict";var __extends=this&&this.__extends||function(){var e=function(t,o){return(e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)if(t.hasOwnProperty(o))e[o]=t[o]})(t,o)};return function(t,o){e(t,o);function i(){this.constructor=t}t.prototype=null===o?Object.create(o):(i.prototype=o.prototype,new i)}}();Object.defineProperty(exports,"__esModule",{value:!0});var core_1=require("@angular/core"),integralui_core_1=require("./integralui.core"),integralui_common_service_1=require("../services/integralui.common.service"),i0=require("@angular/core"),i1=require("../services/integralui.common.service"),i2=require("@angular/common"),_c0=["slider"],_c1=["sliderButton"],_c2=["palette"],_c3=["paletteButton"],_c4=["block"],_c5=["btnOk"],_c6=["btnCancel"],_c7=["displayColor"],_c8=["format"],_c9=["value"],_c10=function(e,t,o){return{background:e,width:t,height:o}},_c11=function(e){return{width:e}},_c12=["header"],_c13=["headerButton"],_c14=["headerTitle"],_c15=function(e){return{"margin-top":e}},_c16=function(e,t){return{"margin-top":e,"margin-right":t}},_c17=function(e,t,o,i){return{background:e,"margin-left":t,width:o,height:i}},_c18=function(e,t,o){return{"margin-top":e,"margin-left":t,width:o}},IntegralUIColorSlider=function(){function e(e){this.commonService=e;this.isSliderActive=!1;this.currentValue="";this.colorList=[];this.buttonPos={x:0,y:0};this.valueChanged=new core_1.EventEmitter}Object.defineProperty(e.prototype,"value",{get:function(){return this.currentValue},set:function(e){this.updateValue(e)},enumerable:!0,configurable:!0});e.prototype.ngAfterViewInit=function(){this.refresh()};e.prototype.drawSlider=function(){if(!this.ctxSlider)this.ctxSlider=this.slider.nativeElement.getContext("2d");var e=this.slider.nativeElement.width,t=this.slider.nativeElement.height;this.ctxSlider.clearRect(0,0,e,t);var o=this.ctxSlider.createLinearGradient(0,0,0,t);o.addColorStop(0,"rgba(255, 0, 0, 1)");o.addColorStop(.17,"rgba(255, 255, 0, 1)");o.addColorStop(.34,"rgba(0, 255, 0, 1)");o.addColorStop(.51,"rgba(0, 255, 255, 1)");o.addColorStop(.68,"rgba(0, 0, 255, 1)");o.addColorStop(.85,"rgba(255, 0, 255, 1)");o.addColorStop(1,"rgba(255, 0, 0, 1)");this.ctxSlider.beginPath();this.ctxSlider.rect(0,0,e,t);this.ctxSlider.fillStyle=o;this.ctxSlider.fill();this.ctxSlider.closePath();this.colorList.length=0;for(var i=0;i<186;i++)this.colorList.push(this.commonService.getColorAtPosition(this.ctxSlider,0,i))};e.prototype.drawSliderButton=function(){if(!this.ctxSliderButton)this.ctxSliderButton=this.sliderButton.nativeElement.getContext("2d");var e=this.sliderButton.nativeElement.width,t=this.sliderButton.nativeElement.height;this.ctxSliderButton.clearRect(0,0,e,t);this.ctxSliderButton.strokeStyle="white";this.ctxSliderButton.fillStyle=this.currentValue;this.ctxSliderButton.beginPath();this.ctxSliderButton.ellipse(e/2,this.buttonPos.y,9,9,0,0,2*Math.PI);this.ctxSliderButton.lineWidth=2;this.ctxSliderButton.fill();this.ctxSliderButton.stroke();this.ctxSliderButton.closePath()};e.prototype.updateValue=function(e,t){if(void 0!=e){this.currentValue=e;this.updateLayout(this.currentValue);if(!t)this.valueChanged.emit({value:this.currentValue})}};e.prototype.onCtrlMouseDown=function(e){var t=this.commonService.getMouseOffsetPos(e,this.slider.nativeElement);this.isSliderActive=!0;this.value=this.commonService.getColorAtPosition(this.ctxSlider,0,t.y);this.buttonPos.y=t.y+9;this.drawSliderButton()};e.prototype.onMouseMove=function(e){var t;if(this.isSliderActive){(t=this.commonService.getMouseOffsetPos(e,this.slider.nativeElement)).y=Math.max(0,Math.min(185,t.y));this.value=this.commonService.getColorAtPosition(this.ctxSlider,0,t.y);this.buttonPos.y=t.y>=182?t.y+6:t.y+9;this.drawSliderButton()}};e.prototype.onMouseUp=function(e){this.isSliderActive=!1};e.prototype.refresh=function(){this.drawSlider();this.drawSliderButton()};e.prototype.updateLayout=function(e){for(var t=this.commonService.convertRgbaToNum(e),o=Math.max(Math.max(t[0],t[1]),t[2]),i=0,r=0;r<t.length;r++)if(t[r]==o){i=r;break}var l=t.filter(function(e,t){return t!=i}),n=Math.max(l[0],l[1]),a=0;for(r=t.length-1;r>=0;r--)if(r!=i&&t[r]==n){a=r;break}var s=l.filter(function(e,t){return t!=a})[0];for(r=t.length-1;r>=0;r--)if(r!=i&&r!=a&&t[r]==s){r;break}var c=Math.floor(255*n/o);if(t[0]==t[1]&&t[0]==t[2]){this.buttonPos.y=9;this.currentValue=this.colorList[0];this.drawSliderButton()}else for(var u=0;u<186;u++){var h=this.colorList[u],p=this.commonService.convertRgbaToNum(h);if(this.commonService.checkNumInRange(p[i],255,8)&&this.commonService.checkNumInRange(p[a],c,8)){this.buttonPos.y=u+9;if(u>=182)this.buttonPos.y-=3;this.currentValue=this.colorList[u];this.drawSliderButton();break}}};e.ɵfac=function(t){return new(t||e)(i0.ɵɵdirectiveInject(i1.IntegralUICommonService))};e.ɵcmp=i0.ɵɵdefineComponent({type:e,selectors:[["iui-colorslider"]],viewQuery:function(e,t){if(1&e){i0.ɵɵstaticViewQuery(_c0,!0,core_1.ElementRef);i0.ɵɵstaticViewQuery(_c1,!0,core_1.ElementRef)}if(2&e){var o;i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.slider=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.sliderButton=o.first)}},hostBindings:function(e,t){if(1&e)i0.ɵɵlistener("mousemove",function(e){return t.onMouseMove(e)},!1,i0.ɵɵresolveWindow)("mouseup",function(e){return t.onMouseUp(e)},!1,i0.ɵɵresolveWindow)},inputs:{value:"value"},outputs:{valueChanged:"valueChanged"},decls:7,vars:0,consts:[[1,"iui-colorslider",3,"mousedown"],[1,"iui-colorslider-block"],["width","8","height","186"],["slider",""],[1,"iui-colorslider-button"],["width","20","height","200"],["sliderButton",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("mousedown",function(e){return t.onCtrlMouseDown(e)});i0.ɵɵelementStart(1,"div",1);i0.ɵɵelement(2,"canvas",2,3);i0.ɵɵelementEnd();i0.ɵɵelementStart(4,"div",4);i0.ɵɵelement(5,"canvas",5,6);i0.ɵɵelementEnd();i0.ɵɵelementEnd()}},encapsulation:2});return e}();exports.IntegralUIColorSlider=IntegralUIColorSlider;var IntegralUIColorPalette=function(){function e(e){this.commonService=e;this.isPalleteActive=!1;this.currentColor="rgba(0, 0, 0, 1)";this.currentValue="rgba(0, 0, 0, 1)";this.panelDisplayPosition="absolute";this.panelPos={top:-9999,left:0};this.panelOpacity=0;this.panelSize={width:0,height:0};this.colorList=[];this.buttonPos={x:185,y:185};this.valueChanged=new core_1.EventEmitter}Object.defineProperty(e.prototype,"color",{get:function(){return this.currentColor},set:function(e){this.updateColor(e)},enumerable:!0,configurable:!0});Object.defineProperty(e.prototype,"value",{get:function(){return this.currentValue},set:function(e){this.updateValue(e)},enumerable:!0,configurable:!0});e.prototype.ngAfterViewInit=function(){this.refresh()};e.prototype.drawPalette=function(){if(!this.ctxPalette)this.ctxPalette=this.palette.nativeElement.getContext("2d");var e=this.palette.nativeElement.width,t=this.palette.nativeElement.height;this.ctxPalette.fillStyle=this.currentColor||"rgba(255,255,255,1)";this.ctxPalette.fillRect(0,0,e,t);var o=this.ctxPalette.createLinearGradient(0,0,e,0);o.addColorStop(0,"rgba(255,255,255,1)");o.addColorStop(1,"rgba(255,255,255,0)");this.ctxPalette.fillStyle=o;this.ctxPalette.fillRect(0,0,e,t);var i=this.ctxPalette.createLinearGradient(0,0,0,t);i.addColorStop(0,"rgba(0,0,0,0)");i.addColorStop(1,"rgba(0,0,0,1)");this.ctxPalette.fillStyle=i;this.ctxPalette.fillRect(0,0,e,t);this.drawPaletteButton()};e.prototype.drawPaletteButton=function(){if(!this.ctxPaletteButton)this.ctxPaletteButton=this.paletteButton.nativeElement.getContext("2d");var e=this.paletteButton.nativeElement.width,t=this.paletteButton.nativeElement.height;this.ctxPaletteButton.clearRect(0,0,e,t);this.ctxPaletteButton.strokeStyle="white";this.ctxPaletteButton.fillStyle=this.currentValue;this.ctxPaletteButton.beginPath();this.ctxPaletteButton.ellipse(this.buttonPos.x,this.buttonPos.y,9,9,0,0,2*Math.PI);this.ctxPaletteButton.lineWidth=2;this.ctxPaletteButton.fill();this.ctxPaletteButton.stroke();this.ctxPaletteButton.closePath()};e.prototype.updateColor=function(e,t){if(void 0!=e&&this.currentColor!=e){this.currentColor=e;this.refresh();if(t)this.updateColorList();else this.value=this.commonService.getColorAtPosition(this.ctxPalette,this.buttonPos.x-8,this.buttonPos.y-8)}};e.prototype.updateValue=function(e,t){if(void 0!=e){this.currentValue=e;this.drawPaletteButton();if(t)this.updateLayout();else this.valueChanged.emit({value:this.currentValue})}};e.prototype.onCtrlMouseDown=function(e){this.isPalleteActive=!0;this.value=this.commonService.getColorAtPosition(this.ctxPalette,e.offsetX,e.offsetY);this.buttonPos={x:e.offsetX+8,y:e.offsetY+8};this.drawPaletteButton()};e.prototype.onMouseMove=function(e){var t;if(this.isPalleteActive){(t=this.commonService.getMouseOffsetPos(e,this.palette.nativeElement)).x=Math.max(0,Math.min(185,t.x));t.y=Math.max(0,Math.min(185,t.y));this.currentValue=this.commonService.getColorAtPosition(this.ctxPalette,t.x,t.y);t.x=t.x<185?t.x:t.x-1;t.y=t.y<185?t.y:t.y-1;t.x+=8;t.y+=8;this.buttonPos=t;this.drawPaletteButton();this.valueChanged.emit({value:this.currentValue})}};e.prototype.onMouseUp=function(e){this.isPalleteActive=!1};e.prototype.refresh=function(){this.drawPalette()};e.prototype.updateColorList=function(){this.colorList.length=0;for(var e=0;e<186;e++){this.colorList[e]=[];for(var t=0;t<186;t++)this.colorList[e].push(this.commonService.getColorAtPosition(this.ctxPalette,e,t))}};e.prototype.updateLayout=function(){var e=this;setTimeout(function(){e.updatePaletteButtonPos(1)},1)};e.prototype.updatePaletteButtonPos=function(e){for(var t=this.commonService.convertRgbaToNum(this.currentValue),o=!1,i=0;i<this.colorList.length;i++){for(var r=0;r<this.colorList[i].length;r++){var l=this.colorList[i][r],n=this.commonService.convertRgbaToNum(l);if((this.commonService.checkNumInRange(n[0],t[0],e)||this.commonService.checkNumInRange(n[0],t[0],e+1)||this.commonService.checkNumInRange(n[0],t[0],e+2))&&(this.commonService.checkNumInRange(n[1],t[1],e)||this.commonService.checkNumInRange(n[1],t[1],e+1)||this.commonService.checkNumInRange(n[1],t[1],e+2))&&(this.commonService.checkNumInRange(n[2],t[2],e)||this.commonService.checkNumInRange(n[2],t[2],e+1)||this.commonService.checkNumInRange(n[2],t[2],e+2))){this.buttonPos={x:i+8,y:r+8};this.drawPaletteButton();o=!0;break}}if(o)break}if(!o&&e<=20)this.updatePaletteButtonPos(e+2)};e.ɵfac=function(t){return new(t||e)(i0.ɵɵdirectiveInject(i1.IntegralUICommonService))};e.ɵcmp=i0.ɵɵdefineComponent({type:e,selectors:[["iui-colorpalette"]],viewQuery:function(e,t){if(1&e){i0.ɵɵstaticViewQuery(_c2,!0,core_1.ElementRef);i0.ɵɵstaticViewQuery(_c3,!0,core_1.ElementRef)}if(2&e){var o;i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.palette=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.paletteButton=o.first)}},hostBindings:function(e,t){if(1&e)i0.ɵɵlistener("mousemove",function(e){return t.onMouseMove(e)},!1,i0.ɵɵresolveWindow)("mouseup",function(e){return t.onMouseUp(e)},!1,i0.ɵɵresolveWindow)},inputs:{color:"color",value:"value"},outputs:{valueChanged:"valueChanged"},decls:7,vars:0,consts:[[1,"iui-colorpalette",3,"mousedown"],[1,"iui-colorpalette-block"],["width","186","height","186"],["palette",""],[1,"iui-colorpalette-button"],["width","200","height","200"],["paletteButton",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("mousedown",function(e){return t.onCtrlMouseDown(e)});i0.ɵɵelementStart(1,"div",1);i0.ɵɵelement(2,"canvas",2,3);i0.ɵɵelementEnd();i0.ɵɵelementStart(4,"div",4);i0.ɵɵelement(5,"canvas",5,6);i0.ɵɵelementEnd();i0.ɵɵelementEnd()}},encapsulation:2});return e}();exports.IntegralUIColorPalette=IntegralUIColorPalette;var IntegralUIColorPickerPopup=function(e){__extends(t,e);function t(t,o){var i=e.call(this,t,o)||this;i.elemRef=t;i.commonService=o;i.currentValue="rgba(0, 0, 0, 1)";i.inputValue="0, 0, 0";i.isInputActive=!1;i.colorSize={width:0,height:0};i.inputSize={width:0,height:0};i.isVisible=!1;i.colorFormat=integralui_core_1.IntegralUIColorFormat.RGB;i.opacity=1;i.originalColorFormat=integralui_core_1.IntegralUIColorFormat.RGB;i.closed=new core_1.EventEmitter;i.valueChanged=new core_1.EventEmitter;return i}Object.defineProperty(t.prototype,"value",{get:function(){return this.originalValue},set:function(e){if(void 0!=e){if(this.colorFormat==integralui_core_1.IntegralUIColorFormat.HEX){e=this.commonService.convertHexToRgba(e);var t=this.commonService.convertRgbaToNum(e,!0);if(3==t.length)e=t[0]+", "+t[1]+", "+t[2]}this.originalValue=e;this.isInputActive=!0;this.updateCurrentValue()}},enumerable:!0,configurable:!0});t.prototype.updateCurrentValue=function(){var e=this;if(e.originalValue)setTimeout(function(){var t=e.commonService.convertRgbaToNum(e.originalValue,!0);if(3==t.length){e.paletteValue=t[0]+", "+t[1]+", "+t[2];e.currentValue="rgba("+e.paletteValue+", 1)";setTimeout(function(){e.slider.updateValue(e.currentValue);e.palette.updateValue(e.currentValue,!0);e.isInputActive=!1;e.valueChanged.emit({value:e.originalValue})},1)}},1)};t.prototype.ngOnInit=function(){this.generalClassName="iui-colorpicker-popup";this.initStyle()};t.prototype.ngAfterContentInit=function(){this.focus()};t.prototype.ngAfterViewInit=function(){this.open()};t.prototype.open=function(){this.isVisible=!0;this.updateLayout()};t.prototype.close=function(e,t){this.isVisible=!1;this.closed.emit({value:e,format:t})};t.prototype.onPaletteValueChanged=function(e){var t=this.commonService.convertRgbaToNum(e.value,!0);this.paletteValue=t[0]+", "+t[1]+", "+t[2]};t.prototype.onSliderValueChanged=function(e){if(this.palette)this.palette.updateColor(e.value,this.isInputActive)};t.prototype.processClose=function(){this.colorFormat=this.originalColorFormat;this.close({rgb:this.getRGBValue(this.originalValue),hex:this.getHEXValue(this.originalValue)},this.colorFormat)};t.prototype.valueOk=function(){this.originalColorFormat=this.colorFormat;this.close({rgb:this.getRGBValue(),hex:this.getHEXValue()},this.colorFormat)};t.prototype.valueCancel=function(){this.processClose()};t.prototype.changeColorFormat=function(){switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.RGB:this.colorFormat=integralui_core_1.IntegralUIColorFormat.HEX;break;default:this.colorFormat=integralui_core_1.IntegralUIColorFormat.RGB}};t.prototype.getColorFormatString=function(){switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.HEX:return"HEX";default:return"RGB"}};t.prototype.getDisplayColorValue=function(){return this.isInputActive?this.getInputValue(this.inputValue||this.paletteValue):this.paletteValue};t.prototype.getInputValue=function(e){var t=e?e:this.paletteValue;if(t)switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.HEX:t=this.commonService.convertRgbaToHex(t);break;case integralui_core_1.IntegralUIColorFormat.HSL:t=this.commonService.convertRgbaToHsl(t)}return t};t.prototype.getRGBValue=function(e){var t=e?e:this.paletteValue;return t?t:""};t.prototype.getHEXValue=function(e){var t=e?e:this.paletteValue;return t?this.commonService.convertRgbaToHex(t):""};t.prototype.getHSLValue=function(e){var t=e?e:this.paletteValue;return t?this.commonService.convertRgbaToHsl(t):""};t.prototype.onInputBlur=function(){this.isInputActive=!1};t.prototype.onInputFocus=function(){this.isInputActive=!0;this.inputValue=this.getInputValue()};t.prototype.onInputChange=function(e){if(this.isInputActive){var t=!1,o=e.target.value.replace(/[.*+?^${}()|[\]\\]/g,"");switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.HEX:if(t=7==o.length?!0:!1)o=this.commonService.convertHexToRgba(o);break;case integralui_core_1.IntegralUIColorFormat.HSL:var i=(o=o.replace(String.fromCharCode(176),"").replace("%","").replace("%","")).split(",");if(t=3==i.length&&i[2]&&!isNaN(i[2])?!0:!1)o=this.commonService.convertHslToRgba(o);break;default:var r=o.split(",");t=3==r.length&&r[2]&&!isNaN(r[2])?!0:!1}if(t){var l=this.commonService.convertRgbaToNum(o,!0);if(3==l.length){this.inputValue=l[0]+", "+l[1]+", "+l[2];this.currentValue="rgba("+this.inputValue+", 1)";this.palette.updateValue(this.currentValue,!0);this.paletteValue=this.inputValue}}}};t.prototype.inputKeyDown=function(e){switch(e.keyCode){case 13:this.close(this.getInputValue(),this.colorFormat);break;case 27:this.processClose()}};t.prototype.updateLayout=function(){var e=this,t=setTimeout(function(){var o={width:e.blockElem.nativeElement.offsetWidth,height:e.blockElem.nativeElement.offsetHeight},i=(e.btnOkElem.nativeElement.offsetWidth,e.btnOkElem.nativeElement.offsetHeight,e.displayColorElem.nativeElement.offsetWidth,e.displayColorElem.nativeElement.offsetHeight,{width:e.formatElem.nativeElement.offsetWidth,height:e.formatElem.nativeElement.offsetHeight}),r={width:e.valueElem.nativeElement.offsetWidth,height:e.valueElem.nativeElement.offsetHeight},l=e.commonService.getMargin(e.valueElem.nativeElement);o.height=Math.max(r.height,i.height);e.colorSize.height=Math.max(r.height,i.height)-2;e.colorSize.width=e.colorSize.height;e.inputSize={width:o.width-(e.colorSize.width+i.width+l.left+l.right+12),height:e.colorSize.height};clearTimeout(t)},1)};t.prototype.getContentStyle=function(){return{marginTop:this.size.height-this.maxSize.height+"px",opacity:this.opacity,width:this.maxSize.width+"px",height:this.maxSize.height+"px"}};t.ɵfac=function(e){return new(e||t)(i0.ɵɵdirectiveInject(i0.ElementRef),i0.ɵɵdirectiveInject(i1.IntegralUICommonService))};t.ɵcmp=i0.ɵɵdefineComponent({type:t,selectors:[["iui-colorpicker-popup"]],viewQuery:function(e,t){if(1&e){i0.ɵɵviewQuery(_c4,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c5,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c6,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c7,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c8,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c2,!0);i0.ɵɵviewQuery(_c0,!0);i0.ɵɵviewQuery(_c9,!0,core_1.ElementRef)}if(2&e){var o;i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.blockElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.btnOkElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.btnCancelElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.displayColorElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.formatElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.palette=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.slider=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.valueElem=o.first)}},inputs:{colorFormat:"colorFormat",opacity:"opacity",originalColorFormat:"originalColorFormat",value:"value"},outputs:{closed:"closed",valueChanged:"valueChanged"},features:[i0.ɵɵInheritDefinitionFeature],decls:23,vars:14,consts:[["tabindex","999",3,"ngClass","ngStyle"],[3,"ngStyle"],[3,"valueChanged"],["palette",""],[3,"value","valueChanged"],["slider",""],[1,"iui-colorpicker-block"],["block",""],[1,"iui-colorpicker-block-color",3,"ngStyle"],["displayColor",""],[1,"iui-colorpicker-block-value"],["type","text",3,"ngStyle","value","input","blur","focus","keydown"],["value",""],[3,"click"],["format",""],[2,"text-align","center"],[1,"iui-colorpicker-block-button",3,"click"],["btnOk",""],[1,"iui-colorpicker-block-button-ok"],["btnCancel",""],[1,"iui-colorpicker-block-button-cancel"]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵelementStart(1,"div",1);i0.ɵɵelementStart(2,"iui-colorpalette",2,3);i0.ɵɵlistener("valueChanged",function(e){return t.onPaletteValueChanged(e)});i0.ɵɵelementEnd();i0.ɵɵelementStart(4,"iui-colorslider",4,5);i0.ɵɵlistener("valueChanged",function(e){return t.onSliderValueChanged(e)});i0.ɵɵelementEnd();i0.ɵɵelementStart(6,"div",6,7);i0.ɵɵelement(8,"span",8,9);i0.ɵɵelementStart(10,"div",10);i0.ɵɵelementStart(11,"input",11,12);i0.ɵɵlistener("input",function(e){return t.onInputChange(e)})("blur",function(){return t.onInputBlur()})("focus",function(){return t.onInputFocus()})("keydown",function(e){return t.inputKeyDown(e)});i0.ɵɵelementEnd();i0.ɵɵelementStart(13,"button",13,14);i0.ɵɵlistener("click",function(){return t.changeColorFormat()});i0.ɵɵtext(15);i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementStart(16,"div",15);i0.ɵɵelementStart(17,"div",16,17);i0.ɵɵlistener("click",function(){return t.valueOk()});i0.ɵɵelement(19,"span",18);i0.ɵɵelementEnd();i0.ɵɵelementStart(20,"div",16,19);i0.ɵɵlistener("click",function(){return t.valueCancel()});i0.ɵɵelement(22,"span",20);i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd()}if(2&e){i0.ɵɵproperty("ngClass",t.getControlClass())("ngStyle",t.getControlStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngStyle",t.getContentStyle());i0.ɵɵadvance(3);i0.ɵɵproperty("value",t.currentValue);i0.ɵɵadvance(4);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction3(8,_c10,"rgba("+t.getDisplayColorValue()+", 1)",t.colorSize.height+"px",t.colorSize.height+"px"));i0.ɵɵadvance(3);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction1(12,_c11,t.inputSize.width+"px"))("value",t.getInputValue());i0.ɵɵadvance(4);i0.ɵɵtextInterpolate(t.getColorFormatString())}},directives:[i2.NgClass,i2.NgStyle,IntegralUIColorPalette,IntegralUIColorSlider],encapsulation:2});return t}(integralui_core_1.IntegralUIPopup);exports.IntegralUIColorPickerPopup=IntegralUIColorPickerPopup;var IntegralUIColorPicker=function(e){__extends(t,e);function t(t,o,i){var r=e.call(this,o)||this;r.elemRef=t;r.commonService=o;r.cmpResolver=i;r.closeTimer=null;r.openTimer=null;r.colorPopupRef=null;r.colorPopup=null;r.isPopupVisible=!1;r.isTouchProcessed=!1;r.buttonMargin={top:2,right:2,bottom:2,left:2};r.colorMargin={top:2,right:2,bottom:2,left:2};r.colorSize={width:0,height:0};r.currentPanelSize={width:240,height:270};r.headerMargin={top:0,right:0,bottom:0,left:0};r.headerSize={width:0,height:0};r.titleMargin={top:2,right:2,bottom:2,left:2};r.titleSize={width:0,height:0};r.updateTimer=null;r.headerClass=[];r.animationSpeed=integralui_core_1.IntegralUISpeedMode.Normal;r.colorFormat=integralui_core_1.IntegralUIColorFormat.RGB;r.valueChanged=new core_1.EventEmitter;return r}t.prototype.ngOnInit=function(){if(!this.currentSelectedValue)switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.HEX:this.currentSelectedValue="#000000";break;default:this.currentSelectedValue="0, 0, 0"}this.generalClassName="iui-colorpicker";this.headerClassName=this.generalClassName+"-header";this.colorPopupClassName="iui-colorPopup";this.colorPopupCellClassName="iui-colorPopup-cell";this.initStyle()};t.prototype.ngAfterViewInit=function(){var e=this,t=setTimeout(function(){e.addPopup();clearTimeout(t)},1);e.updateLayout()};t.prototype.initStyle=function(){this.defaultStyle={general:{disabled:this.generalClassName+"-disabled",focused:this.generalClassName+"-focused",normal:this.generalClassName,hovered:this.generalClassName+"-hovered",selected:this.generalClassName+"-selected"},header:{disabled:this.headerClassName+"-disabled",focused:this.headerClassName+"-focused",normal:this.headerClassName,hovered:this.headerClassName+"-hovered",selected:this.headerClassName+"-selected"},colorPopup:{general:{disabled:this.colorPopupClassName+"-disabled",focused:this.colorPopupClassName+"-focused",normal:this.colorPopupClassName,hovered:this.colorPopupClassName+"-hovered",selected:this.colorPopupClassName+"-selected"},cell:{disabled:this.colorPopupCellClassName+"-disabled",focused:this.colorPopupCellClassName+"-focused",grayed:this.colorPopupCellClassName+"-grayed",normal:this.colorPopupCellClassName,hovered:this.colorPopupCellClassName+"-hovered",selected:this.colorPopupCellClassName+"-selected",today:this.colorPopupCellClassName+"-today"}}};this.updateStyle(this.controlStyle);this.updateControlClass();this.updateHeaderClass()};t.prototype.removeCloseTimer=function(){if(this.closeTimer)clearInterval(this.closeTimer)};t.prototype.removeOpenTimer=function(){if(this.openTimer)clearInterval(this.openTimer)};t.prototype.ngOnDestroy=function(){this.removePopup();this.removeCloseTimer();this.removeOpenTimer()};Object.defineProperty(t.prototype,"panelSize",{get:function(){return this.currentPanelSize},set:function(e){if(e){if(e.width&&this.currentPanelSize.width!=e.width)this.currentPanelSize.width=e.width;if(e.height&&this.currentPanelSize.height!=e.height)this.currentPanelSize.height=e.height}},enumerable:!0,configurable:!0});Object.defineProperty(t.prototype,"selectedValue",{get:function(){return this.currentSelectedValue},set:function(e){if(this.currentSelectedValue!=e){this.currentSelectedValue=e;this.valueChanged.emit({value:this.currentSelectedValue})}},enumerable:!0,configurable:!0});t.prototype.getSelectedColorBackground=function(){var e="";switch(this.colorFormat){case integralui_core_1.IntegralUIColorFormat.HEX:e=this.currentSelectedValue;break;case integralui_core_1.IntegralUIColorFormat.HSL:break;default:e="rgba("+this.currentSelectedValue+", 1)"}return e};t.prototype.addPopup=function(){var e=this;if(e.appRef){e.removePopup();var t=e.cmpResolver.resolveComponentFactory(IntegralUIColorPickerPopup);if(t){e.colorPopupRef=e.appRef.createComponent(t);if(e.colorPopupRef.instance)e.colorPopup=e.colorPopupRef.instance;e.hidePopup();if(e.colorPopup)e.colorPopup.closed.subscribe(function(t){if(t.value&&""!==t.value.rgb&&""!==t.value.hex){e.colorFormat=t.format;e.selectedValue=t.format==integralui_core_1.IntegralUIColorFormat.RGB?t.value.rgb:t.value.hex}e.hidePopup()})}}};t.prototype.hidePopup=function(){if(this.colorPopup)this.closePopup()};t.prototype.removePopup=function(){if(this.colorPopup)if(this.colorPopup.closed)this.colorPopup.closed.unsubscribe();if(this.colorPopupRef)this.colorPopupRef.destroy();this.colorPopup=null};t.prototype.showPopup=function(){if(this.colorPopup){var e=this.commonService.getShiftPos(),t=this.commonService.getPageRect(this.elemRef.nativeElement);this.colorPopup.allowAnimation=this.allowAnimation;this.colorPopup.colorFormat=this.colorFormat;this.colorPopup.display="block";this.colorPopup.originalColorFormat=this.colorFormat;this.colorPopup.position={x:t.left+e.x,y:t.bottom+e.y-1};this.colorPopup.value=this.selectedValue;this.colorPopup.size={width:this.panelSize.width,height:0};this.colorPopup.maxSize={width:this.panelSize.width,height:this.panelSize.height};this.colorPopup.open();this.openPopup();this.isPopupVisible=!0}};t.prototype.getAnimationFactor=function(e,t){var o=e;switch(this.animationSpeed){case integralui_core_1.IntegralUISpeedMode.VerySlow:o=t?e/4:e/2;break;case integralui_core_1.IntegralUISpeedMode.Slow:o=t?e/8:e/4;break;case integralui_core_1.IntegralUISpeedMode.Fast:o=t?e/20:e/15;break;case integralui_core_1.IntegralUISpeedMode.VeryFast:o=t?e/30:e/25;break;default:o=t?e/15:e/10}return o};t.prototype.closePopup=function(){var e=this;e.removeCloseTimer();e.removeOpenTimer();if(e.allowAnimation){var t=e.getAnimationFactor(e.colorPopup.maxSize.height,!0),o=e.colorPopup.maxSize.height/t;e.colorPopup.opacity=1;e.closeTimer=setInterval(function(){if(e.colorPopup.size.height>0){e.colorPopup.size={width:e.colorPopup.size.width,height:e.colorPopup.size.height-o};e.colorPopup.opacity=e.colorPopup.size.height/e.colorPopup.maxSize.height}else{e.colorPopup.size={width:e.colorPopup.size.width,height:0};e.colorPopup.display="none";e.colorPopup.opacity=0;e.isPopupVisible=!1;e.removeCloseTimer()}},5)}else{e.colorPopup.size={width:e.colorPopup.size.width,height:0};e.colorPopup.display="none";e.isPopupVisible=!1}};t.prototype.openPopup=function(){var e=this;e.removeCloseTimer();e.removeOpenTimer();if(e.allowAnimation){var t=e.getAnimationFactor(e.colorPopup.maxSize.height),o=e.colorPopup.maxSize.height/t;e.colorPopup.opacity=0;e.openTimer=setInterval(function(){if(e.colorPopup.size.height<e.colorPopup.maxSize.height){e.colorPopup.size={width:e.colorPopup.size.width,height:e.colorPopup.size.height+o};e.colorPopup.opacity=e.colorPopup.size.height/e.colorPopup.maxSize.height}else{e.colorPopup.size={width:e.colorPopup.size.width,height:e.colorPopup.maxSize.height};e.colorPopup.opacity=1;e.removeOpenTimer()}},5)}else e.colorPopup.size={width:e.colorPopup.size.width,height:e.colorPopup.maxSize.height}};t.prototype.updateLayout=function(){var e=this;e.updateTimer=setTimeout(function(){e.clientRect={width:e.elemRef.nativeElement.firstElementChild.clientWidth,height:e.elemRef.nativeElement.firstElementChild.clientHeight};e.headerSize={width:e.clientRect.width-4,height:e.headerElem.nativeElement.offsetHeight};e.updateHeaderLayout();clearTimeout(e.updateTimer)},1)};t.prototype.updateHeaderLayout=function(){var e=this,t=setTimeout(function(){e.headerMargin={top:(e.clientRect.height-e.headerElem.nativeElement.offsetHeight)/2-2,right:0,bottom:0,left:0};e.buttonMargin={top:(e.headerSize.height-e.headerButtonElem.nativeElement.offsetHeight)/2,right:0,bottom:0,left:2};e.titleMargin={top:(e.headerSize.height-e.headerTitleElem.nativeElement.offsetHeight)/2,right:2,bottom:0,left:7};e.colorMargin={top:(e.headerSize.height-e.headerTitleElem.nativeElement.offsetHeight)/2,right:2,bottom:0,left:2};e.colorSize.height=Math.max(e.headerTitleElem.nativeElement.offsetHeight,e.headerButtonElem.nativeElement.offsetHeight)-6;e.colorSize.width=e.colorSize.height;e.titleSize={width:e.headerSize.width-e.colorSize.width-(e.headerButtonElem.nativeElement.offsetWidth+e.buttonMargin.left+e.buttonMargin.right)-(e.titleMargin.left+e.titleMargin.right)-2,height:e.headerSize.height};clearTimeout(t)},1)};t.prototype.onCtrlMouseEnter=function(e){if(this.isEnabled)this.state|=integralui_core_1.IntegralUIObjectState.hovered};t.prototype.onCtrlMouseLeave=function(e){this.state&=~integralui_core_1.IntegralUIObjectState.hovered};t.prototype.headerButtonMouseDown=function(e){if(!this.isTouchProcessed)this.toggleButtonClicked();e.stopPropagation()};t.prototype.headerButtonTouchStart=function(e){var t=this;t.isTouchProcessed=!0;t.toggleButtonClicked();setTimeout(function(){t.isTouchProcessed=!1},100);e.stopPropagation()};t.prototype.toggleButtonClicked=function(){if(this.colorPopup)this.isPopupVisible?this.hidePopup():this.showPopup()};t.prototype.getControlStyle=function(){var e={};if(this.ctrlSize.width>0)e.width=this.ctrlSize.width+"px";if(this.ctrlSize.height>0)e.height=this.ctrlSize.height+"px";return e};t.prototype.updateHeaderClass=function(){this.headerClass.length=0;this.headerClass.push(this.headerClassName);if(this.options.currentStyle){this.headerClass.push(this.options.currentStyle.header.normal);if(this.state&integralui_core_1.IntegralUIObjectState.disabled)this.headerClass.push(this.options.currentStyle.header.disabled);else if(this.state&integralui_core_1.IntegralUIObjectState.focused)this.headerClass.push(this.options.currentStyle.header.focused);else if(this.state&integralui_core_1.IntegralUIObjectState.selected)this.headerClass.push(this.options.currentStyle.header.selected);else if(this.state&integralui_core_1.IntegralUIObjectState.hovered)this.headerClass.push(this.options.currentStyle.header.hovered)}};t.prototype.getHeaderClass=function(){return this.headerClass};t.prototype.getHeaderStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.headerClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.headerClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.headerClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.headerClassName),selected:this.commonService.isFieldAvailable(e.selected,this.headerClassName+"-selected")};else return{disabled:this.defaultStyle.header.disabled,focused:this.defaultStyle.header.focused,hovered:this.defaultStyle.header.hovered,normal:this.defaultStyle.header.normal,selected:this.defaultStyle.header.selected}};t.prototype.getColorPopupStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{general:this.getColorPopupGeneralStyle(e.general),cell:this.getColorPopupCellStyle(e.cell)};else return{general:this.getColorPopupGeneralStyle(),cell:this.getColorPopupCellStyle()}};t.prototype.getColorPopupGeneralStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.colorPopupClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.colorPopupClassName+"-focused"),hovered:this.commonService.isFieldAvailable(e.hovered,this.colorPopupClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.colorPopupClassName),selected:this.commonService.isFieldAvailable(e.selected,this.colorPopupClassName+"-selected")};else return{disabled:this.defaultStyle.colorPopup.general.disabled,focused:this.defaultStyle.colorPopup.general.focused,hovered:this.defaultStyle.colorPopup.general.hovered,normal:this.defaultStyle.colorPopup.general.normal,selected:this.defaultStyle.colorPopup.general.selected}};t.prototype.getColorPopupCellStyle=function(e){if(this.commonService.isString(e))return e;else if(e)return{disabled:this.commonService.isFieldAvailable(e.disabled,this.colorPopupCellClassName+"-disabled"),focused:this.commonService.isFieldAvailable(e.focused,this.colorPopupCellClassName+"-focused"),grayed:this.commonService.isFieldAvailable(e.focused,this.colorPopupCellClassName+"-grayed"),hovered:this.commonService.isFieldAvailable(e.hovered,this.colorPopupCellClassName+"-hovered"),normal:this.commonService.isFieldAvailable(e.normal,this.colorPopupCellClassName),selected:this.commonService.isFieldAvailable(e.selected,this.colorPopupCellClassName+"-selected"),today:this.commonService.isFieldAvailable(e.today,this.colorPopupCellClassName+"-today")};else return{disabled:this.defaultStyle.colorPopup.cell.disabled,focused:this.defaultStyle.colorPopup.cell.focused,grayed:this.defaultStyle.colorPopup.cell.grayed,normal:this.defaultStyle.colorPopup.cell.normal,hovered:this.defaultStyle.colorPopup.cell.hovered,selected:this.defaultStyle.colorPopup.cell.selected,today:this.defaultStyle.colorPopup.cell.today}};t.prototype.updateStyle=function(e){if(e)this.options.currentStyle={general:this.getGeneralStyle(e.general),header:this.getHeaderStyle(e.header),colorPopup:this.getColorPopupStyle(e.colorPopup)};else this.options.currentStyle={general:{disabled:this.defaultStyle.general.disabled,focused:this.defaultStyle.general.focused,hovered:this.defaultStyle.general.hovered,normal:this.defaultStyle.general.normal,selected:this.defaultStyle.general.selected},header:{disabled:this.defaultStyle.header.disabled,focused:this.defaultStyle.header.focused,hovered:this.defaultStyle.header.hovered,normal:this.defaultStyle.header.normal,selected:this.defaultStyle.header.selected},colorPopup:{general:{disabled:this.defaultStyle.colorPopup.general.disabled,focused:this.defaultStyle.colorPopup.general.focused,hovered:this.defaultStyle.colorPopup.general.hovered,normal:this.defaultStyle.colorPopup.general.normal,selected:this.defaultStyle.colorPopup.general.selected},cell:{disabled:this.defaultStyle.colorPopup.cell.disabled,focused:this.defaultStyle.colorPopup.cell.focused,grayed:this.defaultStyle.colorPopup.cell.grayed,normal:this.defaultStyle.colorPopup.cell.normal,hovered:this.defaultStyle.colorPopup.cell.hovered,selected:this.defaultStyle.colorPopup.cell.selected,today:this.defaultStyle.colorPopup.cell.today}}}};t.prototype.refresh=function(){var e=this,t=setTimeout(function(){e.updateStyle(e.controlStyle);e.updateControlClass();e.updateHeaderClass();clearTimeout(t)},1)};t.ɵfac=function(e){return new(e||t)(i0.ɵɵdirectiveInject(i0.ElementRef),i0.ɵɵdirectiveInject(i1.IntegralUICommonService),i0.ɵɵdirectiveInject(i0.ComponentFactoryResolver))};t.ɵcmp=i0.ɵɵdefineComponent({type:t,selectors:[["iui-colorpicker"]],viewQuery:function(e,t){if(1&e){i0.ɵɵviewQuery(_c12,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c13,!0,core_1.ElementRef);i0.ɵɵviewQuery(_c14,!0,core_1.ElementRef)}if(2&e){var o;i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.headerElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.headerButtonElem=o.first);i0.ɵɵqueryRefresh(o=i0.ɵɵloadQuery())&&(t.headerTitleElem=o.first)}},inputs:{controlStyle:"controlStyle",data:"data",enabled:"enabled",name:"name",size:"size",state:"state",animationSpeed:"animationSpeed",appRef:"appRef",colorFormat:"colorFormat",panelSize:"panelSize",selectedValue:"selectedValue"},outputs:{valueChanged:"valueChanged"},features:[i0.ɵɵInheritDefinitionFeature],decls:12,vars:21,consts:[[3,"ngClass","ngStyle","mouseenter","mouseleave"],[1,"iui-colorpicker-header",3,"ngStyle"],["header",""],[1,"iui-colorpicker-header-button","iui-colorpicker-header-button-down",3,"ngStyle","mousedown","touchstart"],["headerButton",""],[1,"iui-colorpicker-header-color",3,"ngStyle"],["headerColor",""],[1,"iui-colorpicker-header-title",3,"ngStyle"],["headerTitle",""]],template:function(e,t){if(1&e){i0.ɵɵelementStart(0,"div",0);i0.ɵɵlistener("mouseenter",function(e){return t.onCtrlMouseEnter(e)})("mouseleave",function(e){return t.onCtrlMouseLeave(e)});i0.ɵɵelementStart(1,"div",1,2);i0.ɵɵelementStart(3,"div",3,4);i0.ɵɵlistener("mousedown",function(e){return t.headerButtonMouseDown(e)})("touchstart",function(e){return t.headerButtonTouchStart(e)});i0.ɵɵelement(5,"span");i0.ɵɵelementEnd();i0.ɵɵelement(6,"span",5,6);i0.ɵɵelementStart(8,"div",7,8);i0.ɵɵelementStart(10,"span");i0.ɵɵtext(11);i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd();i0.ɵɵelementEnd()}if(2&e){i0.ɵɵproperty("ngClass",t.getControlClass())("ngStyle",t.getControlStyle());i0.ɵɵadvance(1);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction1(7,_c15,t.headerMargin.top+"px"));i0.ɵɵadvance(2);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction2(9,_c16,t.buttonMargin.top+"px",t.buttonMargin.right+"px"));i0.ɵɵadvance(3);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction4(12,_c17,t.getSelectedColorBackground(),t.colorMargin.left+"px",t.colorSize.height+"px",t.colorSize.height+"px"));i0.ɵɵadvance(2);i0.ɵɵproperty("ngStyle",i0.ɵɵpureFunction3(17,_c18,t.titleMargin.top+"px",t.titleMargin.left+"px",t.titleSize.width+"px"));i0.ɵɵadvance(3);i0.ɵɵtextInterpolate(t.selectedValue)}},directives:[i2.NgClass,i2.NgStyle],encapsulation:2});return t}(integralui_core_1.IntegralUIBaseComponent);exports.IntegralUIColorPicker=IntegralUIColorPicker;