ng-fancy-gui
Version:
This package contains components, for creating userinterfaces in a Angular app.
16 lines • 61.6 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("@angular/platform-browser"),require("@angular/common/http")):"function"==typeof define&&define.amd?define("ng-fancy-gui",["exports","@angular/core","@angular/common","@angular/forms","@angular/platform-browser","@angular/common/http"],e):e((t=t||self)["ng-fancy-gui"]={},t.ng.core,t.ng.common,t.ng.forms,t.ng.platformBrowser,t.ng.common.http)}(this,(function(t,e,i,n,o,a){"use strict";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.
Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */function s(t,e,i,n){var o,a=arguments.length,s=a<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,i,n);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(s=(a<3?o(s):a>3?o(e,i,s):o(e,i))||s);return a>3&&s&&Object.defineProperty(e,i,s),s}var r,h,l=function(t,e,i){this.width=t,this.height=e,this.rasterLevels=i};(r=t.AutCompleteSource||(t.AutCompleteSource={}))[r.Input=0]="Input",r[r.ApiEndpoint=1]="ApiEndpoint",(h=t.KeywordType||(t.KeywordType={}))[h.String=0]="String",h[h.KeyValue=1]="KeyValue";var p,c=function(e,i,n,o,a){void 0===e&&(e=t.KeywordType.String),void 0===i&&(i=!1),void 0===n&&(n=t.AutCompleteSource.Input),void 0===o&&(o=null),void 0===a&&(a=null),this.keywordType=e,this.autocompleteMode=i,this.autoCompleteSource=n,this.dataMapperFunction=o,this.autocompleteSourceUrl=a};(p=t.AutoCompleteSourceType||(t.AutoCompleteSourceType={}))[p.IdValueArray=0]="IdValueArray",p[p.StringArray=1]="StringArray",p[p.Object=2]="Object";var u=function(){function t(){}return t.prototype.getBase64=function(t){return new Promise((function(e){var i=new FileReader;i.readAsDataURL(t),i.onload=function(){e(i.result)},i.onerror=function(t){console.log("Error: ",t)}}))},t.prototype.dataURLtoFile=function(t,e){for(var i=t.split(","),n=i[0].match(/:(.*?);/)[1],o=atob(i[1]),a=o.length,s=new Uint8Array(a);a--;)s[a]=o.charCodeAt(a);return new File([s],e,{type:n})},t.prototype.getBinary=function(t){return new Promise((function(e){var i=new FileReader;i.onloadend=function(){var t=i.result.split(",")[1],n=atob(t);e(n)},i.readAsDataURL(t)}))},t.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t=s([e.Injectable({providedIn:"root"})],t)}(),g=function(){function t(t,e){this.elRef=t,this.sanitizer=e,this.placeholder="",this.max=100,this.min=0,this.lockScroll=!0,this.mouseDown=!1,this.minValue=0,this.maxValue=0,this.value=null,this.maxTearMouseDown=!1,this.minTearMouseDown=!1,this.propagateChange=function(t){}}var i;return i=t,t.prototype.registerOnChange=function(t){this.propagateChange=t},t.prototype.registerOnTouched=function(t){},t.prototype.setDisabledState=function(t){},t.prototype.writeValue=function(t){null!==t&&(this.minValue=Math.round(t[0]),this.maxValue=Math.round(t[1]),this.tearMinStyle=this.calcStyle(this.minValue),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle())},t.prototype.ngOnInit=function(){var t=this;null===this.value&&(this.minValue=Math.round(this.min+(this.max-this.min)/2),this.maxValue=Math.round(this.min+(this.max-this.min)/2)),this.tearMinStyle=this.calcStyle(this.minValue),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle(),this.elRef.nativeElement.ontouchstart=function(){t.disableScroll()},this.elRef.nativeElement.ontouchend=function(){t.enableScroll()}},t.prototype.resize=function(){this.tearMinStyle=this.calcStyle(this.minValue),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle()},t.prototype.handleMouseLeave=function(t){var e=this.elRef.nativeElement.getBoundingClientRect();t.clientX>=e.width+e.x&&this.maxTearMouseDown&&(this.maxValue=this.max),t.clientX<=e.x&&this.minTearMouseDown&&(this.minValue=this.min),this.maxTearMouseDown=!1,this.minTearMouseDown=!1,this.calcStyle(this.value),this.tearMinStyle=this.calcStyle(this.minValue),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle()},t.prototype.handleTouchEnd=function(t){this.minTearMouseDown=!1,this.maxTearMouseDown=!1,this.calcStyle(this.value),this.tearMinStyle=this.calcStyle(this.minValue),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle()},t.prototype.calcStyle=function(t){var e=this.elRef.nativeElement.clientWidth/(this.max-this.min);return this.sanitizer.bypassSecurityTrustStyle("translate("+(Math.abs(this.min)*e+e*t)+"px, "+-150+"%) rotate(-135deg) translate(35%, -35%)")},t.prototype.calcSliderLineStyle=function(){var t=this.elRef.nativeElement.clientWidth/(this.max-this.min);this.sliderLineWidthStyle=this.sanitizer.bypassSecurityTrustStyle(t*(this.maxValue-this.minValue)+"px"),this.sliderLineLeftStyle=this.sanitizer.bypassSecurityTrustStyle(Math.abs(this.min)*t+t*this.minValue+"px")},t.prototype.disableScroll=function(){document.body.style.overflowY="hidden"},t.prototype.enableScroll=function(){document.body.style.overflowY="scroll"},t.prototype.tearMinDown=function(){this.tearMin.nativeElement.classList.add("active"),this.minTearMouseDown=!0},t.prototype.tearMaxDown=function(){this.tearMax.nativeElement.classList.add("active"),this.maxTearMouseDown=!0},t.prototype.processMouseEventTearMin=function(t){this.calcMinValue(t.clientX),this.tearMinStyle=this.calcStyle(this.minValue),this.calcSliderLineStyle()},t.prototype.processMouseEventTearMax=function(t){this.calcMaxValue(t.clientX),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle()},t.prototype.processMouseEvent=function(t){this.minTearMouseDown&&this.processMouseEventTearMin(t),this.maxTearMouseDown&&this.processMouseEventTearMax(t)},t.prototype.processTouchEventTearMin=function(t){this.calcMinValue(t.touches[0].clientX),this.tearMinStyle=this.calcStyle(this.minValue),this.calcSliderLineStyle()},t.prototype.processTouchEventTearMax=function(t){this.calcMaxValue(t.touches[0].clientX),this.tearMaxStyle=this.calcStyle(this.maxValue),this.calcSliderLineStyle()},t.prototype.processTouchEvent=function(t){var e=this.elRef.nativeElement.getBoundingClientRect();this.minTearMouseDown&&this.processTouchEventTearMin(t),this.maxTearMouseDown&&this.processTouchEventTearMax(t),t.changedTouches[0].clientX>=e.width+e.x&&this.maxTearMouseDown&&(this.maxValue=this.max,this.tearMaxStyle=this.calcStyle(this.maxValue)),t.changedTouches[0].clientX<=e.x&&this.minTearMouseDown&&(this.minValue=this.min,this.tearMinStyle=this.calcStyle(this.minValue))},t.prototype.calcMinValue=function(t){var e=t-this.elRef.nativeElement.getBoundingClientRect().left;this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)>this.min&&this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)<this.maxValue&&(this.minValue=this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)),this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)<this.min&&(this.minValue=this.min),this.propagateChange([this.minValue,this.maxValue])},t.prototype.calcMaxValue=function(t){var e=t-this.elRef.nativeElement.getBoundingClientRect().left;this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)>this.minValue&&this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)<this.max&&(this.maxValue=this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)),this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)>this.max&&(this.maxValue=this.max),this.propagateChange([this.minValue,this.maxValue])},t.ctorParameters=function(){return[{type:e.ElementRef},{type:o.DomSanitizer}]},s([e.Input()],t.prototype,"placeholder",void 0),s([e.Input()],t.prototype,"max",void 0),s([e.Input()],t.prototype,"min",void 0),s([e.ViewChild("tearMax")],t.prototype,"tearMax",void 0),s([e.ViewChild("tearMin")],t.prototype,"tearMin",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=i=s([e.Component({selector:"fg-input-between",template:'<div class="inputWrap noselect"\n (touchmove)="processTouchEvent($event)"\n (mousemove)="processMouseEvent($event)"\n (mouseleave)="tearMin.classList.remove(\'active\');tearMax.classList.remove(\'active\');handleMouseLeave($event)"\n (mouseup)="tearMax.classList.remove(\'active\');maxTearMouseDown=false;tearMin.classList.remove(\'active\');minTearMouseDown=false;"\n (touchend)="tearMin.classList.remove(\'active\');tearMax.classList.remove(\'active\');handleTouchEnd($event)"\n>\n <div class="fakeInputRange">\n <div #tearMin class="tear" [style.transform]="tearMinStyle"\n [class.up]="minValue> 0 && maxValue===max"\n (mousedown)="tearMinDown()"\n (touchstart)="tearMinDown()"\n >\n <span>{{minValue}}</span>\n </div>\n\n <div #tearMax class="tear" [style.transform]="tearMaxStyle"\n (mousedown)="tearMaxDown()"\n (touchstart)="tearMaxDown()"\n >\n <span>{{maxValue}}</span>\n </div>\n\n <div class="sliderLine">\n <div class="sliderBackground"></div>\n <div [style.width]="sliderLineWidthStyle" [style.left]="sliderLineLeftStyle" class="sliderActive"></div>\n </div>\n </div>\n</div>\n\n\n\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}],styles:[":host{display:block;position:relative}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.up{z-index:10}span{display:block;font-size:22px}.inputWrap{padding-top:32px}.inputWrap .fakeInputRange{position:relative}.inputWrap .fakeInputRange .tear{position:absolute;transition:width .5s,height .5s;width:30px;height:30px;border-radius:0 50% 50%;border:3px solid;transform:rotate(-135deg)}.inputWrap .fakeInputRange .tear span{color:#fff;transition:left .5s,top .5s,font-size .5s;font-size:9px;position:absolute;left:11px;top:11px;transform:translate(-50%,-50%) rotate(-225deg)}.inputWrap .fakeInputRange .tear.active{z-index:7;width:50px;height:50px}.inputWrap .fakeInputRange .tear.active span{font-size:19px;left:20px;top:20px}.sliderLine{margin-top:20px;position:relative}.sliderLine .sliderBackground{width:100%;height:2px;background-color:gray}.sliderLine .sliderActive{position:absolute;height:2px;top:0;left:0}input{opacity:0;top:0;left:0;z-index:1;position:absolute;margin-top:7px;height:100%;font-size:21px;border:1px solid}input.invalid{border:1px solid}"]})],t)}(),d=function(){function t(t,e,i,n){var o=this;this.imageCroper=t,this.x=e,this.y=i,this.src=n,this.loaded=!1,this.rotation=0,this.userInputRotation=0,this.locked=!1,this.minWidth=0,this.minHeight=0,this.repositioningSpeed=1,this.moveing=!1,this.orignalImage=new Image,this.orignalImage.src=n,this.orignalImage.onload=function(){var t=document.createElement("canvas"),e=t.getContext("2d"),i=document.createElement("canvas"),n=i.getContext("2d");o.orignalImage.width>o.orignalImage.height?(t.width=o.orignalImage.width/o.orignalImage.height*o.imageCroper.config.height,t.height=o.imageCroper.config.height):(t.width=o.imageCroper.config.width,t.height=o.orignalImage.height/o.orignalImage.width*o.imageCroper.config.width);var a=Math.ceil(Math.log(o.orignalImage.width/o.imageCroper.config.width)/Math.log(2));i.width=.5*o.orignalImage.width,i.height=.5*o.orignalImage.height,n.drawImage(o.orignalImage,0,0,i.width,i.height);for(var s=1,r=0;r<a-3;r++)n.drawImage(i,0,0,.5*i.width,.5*i.height),s*=.5;e.drawImage(i,0,0,i.width*s,i.height*s,0,0,e.canvas.width,e.canvas.height),o.image=new Image,o.image.src=t.toDataURL(),o.image.onload=function(){console.log(o.image.width),o.originalWidth=o.image.width,o.originalHeight=o.image.height,o.width=o.originalWidth,o.height=o.originalHeight,o.coverCanvas(),o.loaded=!0}}}return t.prototype.setMinSize=function(){if(0===this.userInputRotation){switch(this.rotation){case 0:this.originalWidth>=this.originalHeight&&this.setMinSizeByWidth(this.imageCroper.canvas.width),this.originalHeight>=this.originalWidth&&this.setMinSizeByHeight(this.imageCroper.canvas.height);break;case-90:this.originalWidth>=this.originalHeight&&this.setMinSizeByHeight(this.imageCroper.canvas.width),this.originalHeight>=this.originalWidth&&this.setMinSizeByWidth(this.imageCroper.canvas.height);break;case-180:this.originalWidth>=this.originalHeight&&this.setMinSizeByWidth(this.imageCroper.canvas.width),this.originalHeight>=this.originalWidth&&this.setMinSizeByHeight(this.imageCroper.canvas.height);break;case-270:this.originalWidth>=this.originalHeight&&this.setMinSizeByHeight(this.imageCroper.canvas.width),this.originalHeight>=this.originalWidth&&this.setMinSizeByWidth(this.imageCroper.canvas.height)}(this.minWidth<this.imageCroper.canvas.width||this.minHeight<this.imageCroper.canvas.height)&&(0===this.rotation||-180===this.rotation?this.imageCroper.canvas.width>this.imageCroper.canvas.height?this.setMinSizeByWidth(this.imageCroper.canvas.width):this.setMinSizeByHeight(this.imageCroper.canvas.height):this.imageCroper.canvas.width>this.imageCroper.canvas.height?this.setMinSizeByHeight(this.imageCroper.canvas.width):this.setMinSizeByWidth(this.imageCroper.canvas.height))}},t.prototype.drawImageToCanvas=function(t){void 0===t&&(t=this.imageCroper.ctx);var e=this.x/this.imageCroper.canvas.width*t.canvas.width,i=this.y/this.imageCroper.canvas.height*t.canvas.height,n=this.width/this.imageCroper.canvas.width*t.canvas.width,o=this.height/this.imageCroper.canvas.height*t.canvas.height;t.beginPath(),t.translate(e,i),t.rotate(Math.PI/180*(this.rotation+this.userInputRotation)),t.imageSmoothingEnabled=!1,t.drawImage(this.orignalImage,.5*-n,.5*-o,n,o),t.setTransform(1,0,0,1,0,0),t.closePath()},t.prototype.render=function(){this.loaded&&this.drawImageToCanvas()},t.prototype.resize=function(t){var e=this.originalHeight/this.originalWidth;this.width=this.width*t,this.height=e*this.width,this.coverCanvas()},t.prototype.coverCanvas=function(){var t=!1,e=!1,i=!1,n=!1;this.setMinSize(),(this.minHeight>this.height||this.minWidth>this.width)&&(this.width=this.minWidth,this.height=this.minHeight),0===this.rotation||-180===this.rotation?(this.x-this.width/2>0&&(this.x=this.width/2,t=!0),this.x+this.width/2<this.imageCroper.canvas.width&&(this.x=this.imageCroper.canvas.width-this.width/2,e=!0),this.y-this.height/2>0&&(this.y=this.height/2,i=!0),this.y+this.height/2<this.imageCroper.canvas.height&&(this.y=this.imageCroper.canvas.height-this.height/2,n=!0),this.originalWidth<this.originalHeight?t&&e&&(this.x=this.imageCroper.canvas.width/2,this.resizeByWidth(this.imageCroper.canvas.width),i&&(this.y=this.height/2),n&&(this.y=this.imageCroper.canvas.height-this.height/2)):i&&n&&(this.y=this.imageCroper.canvas.height/2,this.resizeByHeight(this.imageCroper.canvas.height),t&&(this.x=this.width/2),e&&(this.x=this.imageCroper.canvas.width-this.width/2))):-90!==this.rotation&&-270!==this.rotation||(this.x-this.height/2>0&&(this.x=this.height/2,t=!0),this.x+this.height/2<this.imageCroper.canvas.width&&(this.x=this.imageCroper.canvas.width-this.height/2,e=!0),this.y-this.width/2>0&&(this.y=this.width/2,i=!0),this.y+this.width/2<this.imageCroper.canvas.height&&(this.y=this.imageCroper.canvas.height-this.width/2,n=!0),this.originalWidth>this.originalHeight?i&&n&&(this.y=this.imageCroper.canvas.height/2,this.resizeByWidth(this.imageCroper.canvas.height),t&&(this.x=this.height/2),e&&(this.x=this.imageCroper.canvas.width-this.height/2)):t&&e&&(this.x=this.imageCroper.canvas.width/2,this.resizeByHeight(this.imageCroper.canvas.width),i&&(this.y=this.width/2),n&&(this.y=this.imageCroper.canvas.height-this.width/2)))},t.prototype.resizeOriginalImage=function(t){var e=this.originalHeight/this.originalWidth;this.width=this.originalWidth*t,this.height=e*this.width},t.prototype.resetOriginalImage=function(){this.originalWidth=this.width,this.originalHeight=this.height},t.prototype.resizeByDeltaHeight=function(t){var e=this.originalWidth/this.originalHeight;this.height+=t,this.width=this.height*e},t.prototype.resizeByDeltaWidth=function(t){var e=this.originalHeight/this.originalWidth;this.width+=t,this.height=e*this.width},t.prototype.resizeByWidth=function(t){var e=this.originalHeight/this.originalWidth;this.width=t,this.height=e*t},t.prototype.resizeByHeight=function(t){var e=this.originalWidth/this.originalHeight;this.height=t,this.width=e*this.height},t.prototype.setUserInputRotation=function(t){this.userInputRotation=t,this.setMinSize()},t.prototype.setMinSizeByWidth=function(t){var e=this.originalHeight/this.originalWidth;this.minWidth=t,this.minHeight=e*this.minWidth},t.prototype.setMinSizeByHeight=function(t){var e=this.originalWidth/this.originalHeight;this.minHeight=t,this.minWidth=e*this.minHeight},t}(),m=function(){function t(t){var e=this;this.imageCroper=t,this.imageCroper.canvas.onmousemove=function(t){e.handleMove(t)},this.imageCroper.canvas.ontouchmove=function(t){t.preventDefault(),e.handleTouch(t)},this.imageCroper.canvas.onwheel=function(t){event.preventDefault(),t.deltaY<0?e.imageCroper.cropImage.resize(1.1):e.imageCroper.cropImage.locked||e.imageCroper.cropImage.resize(.9)}}return t.prototype.handleMove=function(t){var e=.5*this.imageCroper.cropImage.width,i=.5*this.imageCroper.cropImage.height,n=this.imageCroper.cropImage.x+this.imageCroper.mouse.x-this.imageCroper.mouse.lastX,o=this.imageCroper.cropImage.y+this.imageCroper.mouse.y-this.imageCroper.mouse.lastY,a=this.imageCroper.mouse.x-this.imageCroper.mouse.lastX,s=this.imageCroper.mouse.y-this.imageCroper.mouse.lastY;this.imageCroper.mouse.isDown&&!this.imageCroper.cropImage.locked&&(0!==this.imageCroper.cropImage.rotation&&-180!==this.imageCroper.cropImage.rotation||0!==this.imageCroper.cropImage.userInputRotation?((n-i<=0&&n+i>=this.imageCroper.canvas.width||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.x+=a),(o+e>=this.imageCroper.canvas.height&&o-e<=0||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.y+=s)):((n-e<=0&&n+e>=this.imageCroper.canvas.width||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.x+=a),(o+i>=this.imageCroper.canvas.height&&o-i<=0||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.y+=s))),this.imageCroper.mouse.syncPosition(t)},t.prototype.handleTouch=function(t){var e=.5*this.imageCroper.cropImage.width,i=.5*this.imageCroper.cropImage.height,n=this.imageCroper.cropImage.x+this.imageCroper.mouse.x-this.imageCroper.mouse.lastX,o=this.imageCroper.cropImage.y+this.imageCroper.mouse.y-this.imageCroper.mouse.lastY,a=this.imageCroper.mouse.x-this.imageCroper.mouse.lastX,s=this.imageCroper.mouse.y-this.imageCroper.mouse.lastY;this.imageCroper.mouse.isDown&&!this.imageCroper.cropImage.locked&&(0!==this.imageCroper.cropImage.rotation&&-180!==this.imageCroper.cropImage.rotation||0!==this.imageCroper.cropImage.userInputRotation?((n-i<=0&&n+i>=this.imageCroper.canvas.width||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.x+=a),(o+e>=this.imageCroper.canvas.height&&o-e<=0||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.y+=s)):((n-e<=0&&n+e>=this.imageCroper.canvas.width||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.x+=a),(o+i>=this.imageCroper.canvas.height&&o-i<=0||0!==this.imageCroper.cropImage.userInputRotation)&&(this.imageCroper.cropImage.y+=s))),this.imageCroper.mouse.syncTouchPosition(t)},t}(),v=function(){function t(t){var e=this;this.imageCroper=t,this.pinching=!1,this.lastX=0,this.lastY=0,this.isDown=!1,this.imageCroper.canvas.style.cursor="grab",this.imageCroper.canvas.onmousedown=function(t){e.imageCroper.canvas.style.cursor="grabbing",e.syncPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0,e.imageCroper.cropImage.moveing=!0},this.imageCroper.canvas.onmouseup=function(){e.imageCroper.canvas.style.cursor="grab",e.isDown=!1},this.imageCroper.canvas.ontouchstart=function(t){e.imageCroper.canvas.style.cursor="grabbing",e.syncTouchPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0,e.imageCroper.cropImage.moveing=!0},this.imageCroper.canvas.ontouchend=function(){e.imageCroper.canvas.style.cursor="grab",e.isDown=!1}}return t.prototype.syncPosition=function(t){var e=this.imageCroper.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y,this.x=t.clientX-e.left,this.y=t.clientY-e.top},t.prototype.syncTouchPosition=function(t){var e=this.imageCroper.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y,this.x=t.touches[0].clientX-e.left,this.y=t.touches[0].clientY-e.top},t}(),f=function(){function t(t,e,i,n,o,a){this.canvas=t,this.offscreenCanvas=e,this.width=i,this.height=n,this.config=a,this.raster=!1,this.rasterLevelIndex=0,this.ctx=this.setupCanvas(this.canvas),this.offscreenCtx=this.setupCanvas(this.offscreenCanvas),this.canvas.width=a.width,this.canvas.height=a.height,this.offscreenCanvas.width=a.width,this.offscreenCanvas.height=a.height,this.imageHeightWidthRatio=this.config.height/this.config.width,this.imageWidthHeightRatio=this.config.width/this.config.height,this.setCanvasSize(),this.cropImage=new d(this,this.canvas.width/2,this.canvas.height/2,o),this.gestureHandler=new m(this),this.mouse=new v(this),this.cropImage.coverCanvas()}return t.prototype.resize=function(){var t=this.setCanvasSize();return this.cropImage.coverCanvas(),t},t.prototype.clear=function(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)},t.prototype.render=function(){if(this.clear(),this.cropImage.render(),this.raster){for(var t=this.canvas.height/this.config.rasterLevels[this.rasterLevelIndex],e=0,i=0;i<=this.config.rasterLevels[this.rasterLevelIndex];i++)this.ctx.beginPath(),this.ctx.moveTo(0,e),this.ctx.lineTo(this.canvas.width,e),this.ctx.strokeStyle="white",this.ctx.stroke(),this.ctx.closePath(),e+=t;t=this.canvas.width/this.config.rasterLevels[this.rasterLevelIndex],e=0;for(i=0;i<=this.config.rasterLevels[this.rasterLevelIndex];i++)this.ctx.beginPath(),this.ctx.moveTo(e,0),this.ctx.lineTo(e,this.canvas.height),this.ctx.strokeStyle="white",this.ctx.stroke(),this.ctx.closePath(),e+=t}},t.prototype.rotateImage=function(t){this.cropImage.rotation=t},t.prototype.switchRasterLevelIndex=function(){this.raster?this.rasterLevelIndex+1<this.config.rasterLevels.length?this.rasterLevelIndex++:this.raster=!1:(this.rasterLevelIndex=0,this.raster=!0)},t.prototype.setupCanvas=function(t){var e=window.devicePixelRatio||1,i=t.getBoundingClientRect();t.width=i.width*e,t.height=i.height*e;var n=t.getContext("2d");return n.scale(e,e),n},t.prototype.setCanvasSize=function(){this.canvas.width=this.canvas.parentElement.clientWidth,this.canvas.height=this.canvas.width*this.imageHeightWidthRatio,this.offscreenCanvas.width=this.width,this.offscreenCanvas.height=this.height;var t=this.canvas.parentElement.parentElement.clientHeight-350;return t<0||(this.canvas.height>t&&this.canvas.width<this.config.width&&this.canvas.height<this.config.height?(this.canvas.height=t,this.canvas.width=this.canvas.height*this.imageWidthHeightRatio):(this.canvas.width=this.config.width,this.canvas.height=this.config.height),!1)},t}(),y=function(){function t(t){this.cdRef=t,this.imageSrc=null,this.config=null,this.continue=new e.EventEmitter,this.cancle=new e.EventEmitter,this.toSmall=!1,this.animationFrameHandler=null}return t.prototype.ngAfterViewInit=function(){if(null===this.imageSrc)throw new Error("Ng Fancy GUI: No imagesrc was passed in to the imagecropper component");if(null===this.config&&(this.config=new l(500,500,[4,8,16])),!(this.config instanceof l))throw new Error("Ng Fancy GUI: Config passed in to imagecropper was not of type ImageCropperConfig");this.imageCroper=new f(this.cropperCanvas.nativeElement,this.offscreenCanvas.nativeElement,this.config.width,this.config.height,this.imageSrc,this.config),console.log("immageCropper:",this.imageCroper),this.startLoop(),this.resize(),this.cdRef.detectChanges()},t.prototype.zoom=function(t){t>0?this.imageCroper.cropImage.resize(1.01):t<0&&this.imageCroper.cropImage.resize(.99)},t.prototype.startLoop=function(){var t=this,e=function(){t.imageCroper.render(),t.animationFrameHandler=window.requestAnimationFrame(e)};this.animationFrameHandler=window.requestAnimationFrame(e)},t.prototype.resize=function(){this.toSmall=this.imageCroper.resize()},t.prototype.ngOnDestroy=function(){window.cancelAnimationFrame(this.animationFrameHandler)},t.prototype.pinch=function(t){this.pinchEvent=t,this.imageCroper.cropImage.resizeOriginalImage(t.scale)},t.prototype.pinchEnd=function(){this.imageCroper.cropImage.resetOriginalImage()},t.prototype.toggleRaster=function(){this.imageCroper.switchRasterLevelIndex()},t.prototype.rotate90Deg=function(){this.imageCroper.cropImage.rotation-=90,-360===this.imageCroper.cropImage.rotation&&(this.imageCroper.cropImage.rotation=0),this.imageCroper.cropImage.coverCanvas()},t.prototype.cancleE=function(){this.cancle.emit()},t.prototype.continueE=function(){this.imageCroper.cropImage.drawImageToCanvas(this.imageCroper.offscreenCtx),this.continue.emit(this.imageCroper.offscreenCtx.canvas.toDataURL())},t.ctorParameters=function(){return[{type:e.ChangeDetectorRef}]},s([e.ViewChild("cropperCanvas")],t.prototype,"cropperCanvas",void 0),s([e.ViewChild("offscreenCanvas")],t.prototype,"offscreenCanvas",void 0),s([e.Input()],t.prototype,"imageSrc",void 0),s([e.Input()],t.prototype,"config",void 0),s([e.Output()],t.prototype,"continue",void 0),s([e.Output()],t.prototype,"cancle",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=s([e.Component({selector:"fg-image-cropper",template:'<ng-container [class.hidden]="imageCroper && imageCroper.cropImage.loaded">\n <div [class.hidden]="!toSmall" class="tosmallOverlay">\n <div>\n <div>\n <h2>Screen is to small</h2>\n </div>\n <div (click)="cancleE()">\n cancle\n </div>\n </div>\n </div>\n <div class="topSection">\n <div class="inner">\n <h2>Crop Your Image</h2>\n <button (click)="rotate90Deg()" class="right" type="button">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path d="M0 0h24v24H0z" fill="none" />\n <path\n d="M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.15-1.71-.49-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z" />\n </svg>\n </button>\n\n <button type="button" (click)="toggleRaster()" class="left">\n <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">\n <g id="Gruppe_48" data-name="Gruppe 48" transform="translate(-467.5 -968.5)">\n <g id="Gruppe_47" data-name="Gruppe 47" transform="translate(3 443)">\n <line id="Linie_3" data-name="Linie 3" y2="300" transform="translate(559.5 525.5)" fill="none"\n stroke="#000" stroke-width="20" />\n <line id="Linie_4" data-name="Linie 4" y2="300" transform="translate(669.5 525.5)" fill="none"\n stroke="#000" stroke-width="20" />\n </g>\n <g id="Gruppe_46" data-name="Gruppe 46" transform="translate(135 416)">\n <line id="Linie_5" data-name="Linie 5" x2="300" transform="translate(332.5 647.5)" fill="none"\n stroke="#000" stroke-width="20" />\n <line id="Linie_6" data-name="Linie 6" x2="300" transform="translate(332.5 757.5)" fill="none"\n stroke="#000" stroke-width="20" />\n </g>\n </g>\n </svg>\n </button>\n </div>\n </div>\n <div class="canvasWrap">\n <canvas #cropperCanvas></canvas>\n <canvas #offscreenCanvas style="display: none"></canvas>\n </div>\n <div class="container">\n <fg-slider-infinite (change)="zoom($event)"></fg-slider-infinite>\n <div class="buttonWrapp">\n <button (click)="continueE()" class="btn" type="button">Continue</button>\n <button (click)="cancleE()" class="btn" type="button">Cancle</button>\n </div>\n </div>\n</ng-container>',styles:[".buttonWrapp{display:flex;justify-content:space-between}:host{overflow:hidden;display:block}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.hidden{display:none!important}.tosmallOverlay{text-align:center;width:100%;height:100%;background-color:rgba(0,0,0,.767);color:#fff;display:flex;justify-content:center;align-items:center}canvas{border:1px solid #000}fg-slider-infinite{margin-top:10px;display:block}button{touch-action:none;margin-top:10px}.btn{color:#fff;flex-basis:48%;font-size:20px;border:none;height:50px;padding:9px auto}.canvasWrap{text-align:center;max-width:1000px;margin:0 auto}.topSection{border-bottom:1px solid gray;position:relative;text-align:center}.topSection .inner{margin:0 auto;width:100%;max-width:500px;height:100%;position:relative}.topSection .inner h2{display:inline-block;padding-top:10px;padding-bottom:10px}.topSection .inner button{background-color:transparent;border:none;outline:0;margin-top:0;height:100%;width:52px;position:absolute}.topSection .inner button.left{left:0}.topSection .inner button.right{right:0}.topSection .inner button svg{margin-top:5px;width:30px;height:auto}.topSection .inner button:hover{opacity:.75}.container{max-width:1000px;padding:0 20px;margin:0 auto}"]})],t)}(),x=function(){function t(t,e,i){this.host=t,this.fileService=e,this.sanitizer=i,this.invalid=!1,this.width=500,this.height=500,this.value=null,this.crop=!1,this.cropperConfig=null,this.pending=!1,this.previewHeightStyle=null,this.propagateChange=function(t){},this.markAsTouched=function(t){}}var i;return i=t,t.prototype.registerOnChange=function(t){this.propagateChange=t},t.prototype.registerOnTouched=function(t){this.markAsTouched=t},t.prototype.setDisabledState=function(t){},t.prototype.change=function(t){this.propagateChange(t.target.value)},t.prototype.writeValue=function(t){null!==t&&(this.value=t,this.cropImageSrc=t,this.previewImageUrl=t)},t.prototype.ngOnInit=function(){this.widthHeightRatio=this.height/this.width,this.cropperConfig=new l(this.width,this.height,[4,8,16]),this.resize()},t.prototype.resize=function(){this.previewHeightStyle=this.sanitizer.bypassSecurityTrustStyle(this.host.nativeElement.clientWidth*this.widthHeightRatio+"px")},t.prototype.openCropImageDialog=function(t){var e=this;this.fileService.getBase64(t.target.files[0]).then((function(t){e.cropImageSrc=t,e.crop=!0,document.body.style.overflowY="hidden"}))},t.prototype.showImage=function(t){this.hideImageCroper(),this.previewImageUrl=t,this.value=t,this.propagateChange(this.value)},t.prototype.hideImageCroper=function(){this.cropImageSrc=null,this.crop=!1,this.imageInput.nativeElement.value="",document.body.style.overflowY="auto"},t.ctorParameters=function(){return[{type:e.ElementRef},{type:u},{type:o.DomSanitizer}]},s([e.Input()],t.prototype,"invalid",void 0),s([e.Input()],t.prototype,"width",void 0),s([e.Input()],t.prototype,"height",void 0),s([e.ViewChild("imageInput")],t.prototype,"imageInput",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=i=s([e.Component({selector:"fg-input-image",template:'\n\n<div [class.invalid]="invalid" [style.height]="previewHeightStyle" *ngIf="value===null&&pending===false"\n class="imageInputWrapper noselect" (click)="imageInput.click()">\n <div class="placeholderWrapper">\n <div class="icon">\n <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="27.949" height="27.949" viewBox="0 0 27.949 27.949">\n <path id="ic_add_24px" d="M32.949,20.971H20.971V32.949H16.978V20.971H5V16.978H16.978V5h3.993V16.978H32.949Z"\n transform="translate(-5 -5)"/>\n </svg>\n </div>\n <div class="text">Add image</div>\n </div>\n</div>\n\n<div [style.height]="previewHeightStyle"\n [style.background-image]="\'url(\'+previewImageUrl+\')\'" *ngIf="value!==null&&pending===false"\n class="imageInputWrapper withImage noselect" (click)="imageInput.click()">\n <div class="placeholderWrapper">\n <div class="icon">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path\n d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>\n <path d="M0 0h24v24H0z" fill="none"/>\n </svg>\n </div>\n <div class="text">Change image</div>\n </div>\n</div>\n\n<div [style.height]="previewHeightStyle" *ngIf="pending===true"\n class="imageInputWrapper withImage noselect" (click)="imageInput.click()">\n <div class="placeholderWrapper">\n <div class="icon">\n <div class="spinner">\n <div class="rect1"></div>\n <div class="rect2"></div>\n <div class="rect3"></div>\n <div class="rect4"></div>\n <div class="rect5"></div>\n </div>\n </div>\n </div>\n</div>\n\n<input class="hidden" (change)="openCropImageDialog($event);" type="file" accept="image/jpeg"\n #imageInput>\n\n<fg-image-cropper *ngIf="crop"\n [config]="cropperConfig"\n (cancle)="hideImageCroper();markAsTouched(value)"\n (continue)="showImage($event);"\n [imageSrc]="cropImageSrc">\n</fg-image-cropper>\n\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}],styles:[":host{display:block}span{color:#000;display:block;font-size:22px}.hidden{display:none}.imageInputWrapper{position:relative;width:100%;height:100px;border:1px solid gray;cursor:pointer;margin-top:7px;background-size:cover}.imageInputWrapper:hover{opacity:.75}.imageInputWrapper.invalid{border:1px solid red}.imageInputWrapper.withImage .placeholderWrapper .icon{fill:#fff}.imageInputWrapper.withImage .placeholderWrapper .text{color:#fff}.imageInputWrapper .placeholderWrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.imageInputWrapper .placeholderWrapper .icon{fill:#000}.imageInputWrapper .placeholderWrapper .text.dark{color:#000}fg-image-cropper{top:0;left:0;background-color:#fff;width:100%;height:100%;position:fixed;z-index:1}"]})],t)}(),w=function(){function t(t,e){this.elRef=t,this.sanitizer=e,this.value=0,this.max=100,this.min=0,this.activeWidth=0,this.lockScroll=!0,this.mouseDown=!1,this.propagateChange=function(t){}}var i;return i=t,t.prototype.registerOnChange=function(t){this.propagateChange=t},t.prototype.registerOnTouched=function(t){},t.prototype.setDisabledState=function(t){},t.prototype.handleMouseLeave=function(t){var e=this.elRef.nativeElement.getBoundingClientRect();t.clientX>=e.width+e.x&&this.mouseDown&&(this.value=this.max),t.clientX<=e.x&&this.mouseDown&&(this.value=this.min),this.mouseDown=!1,this.calcStyle(this.value),this.tearStyle=this.calcStyle(this.value)},t.prototype.change=function(t){this.propagateChange(t.target.value),this.calcStyle(t.target.value)},t.prototype.changeValue=function(t){this.value=t,this.calcStyle(this.value)},t.prototype.writeValue=function(t){null!==t&&(this.value=t,this.calcStyle(this.value))},t.prototype.ngOnInit=function(){var t=this;this.calcStyle(this.value),this.elRef.nativeElement.ontouchstart=function(){t.disableScroll()},this.elRef.nativeElement.ontouchend=function(){t.enableScroll()}},t.prototype.ngOnDestroy=function(){},t.prototype.resize=function(){this.calcStyle(this.value)},t.prototype.calcStyle=function(t){var e=this.elRef.nativeElement.clientWidth/(this.max-this.min);this.tearStyle="translate("+(Math.abs(this.min)*e+e*t)+"px, "+-150+"%) rotate(-135deg) translate(35%, -35%)",this.trustedStyle=this.sanitizer.bypassSecurityTrustStyle(this.tearStyle),this.sliderLineWidthStyle=this.sanitizer.bypassSecurityTrustStyle(Math.abs(this.min)*e+e*t+"px")},t.prototype.disableScroll=function(){document.body.style.overflowY="hidden"},t.prototype.enableScroll=function(){document.body.style.overflowY="scroll"},t.prototype.processMouseEvent=function(t,e){void 0===e&&(e=!1),e?this.mouseDown&&(this.calcValue(t.clientX),this.calcStyle(this.value)):(this.calcValue(t.clientX),this.calcStyle(this.value))},t.prototype.processTouchEvent=function(t){var e=this.elRef.nativeElement.getBoundingClientRect();t.touches[0].clientX>=e.width+e.x?this.value=this.max:t.touches[0].clientX<=e.x?this.value=this.min:this.calcValue(t.touches[0].clientX),this.calcStyle(this.value)},t.prototype.calcValue=function(t){var e=t-this.elRef.nativeElement.getBoundingClientRect().left;this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)>this.min&&this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)<this.max&&(this.value=this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)),this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)<this.min&&(this.value=this.min),this.min+Math.round((this.max-this.min)/this.elRef.nativeElement.clientWidth*e)>this.max&&(this.value=this.max),this.propagateChange(this.value)},t.ctorParameters=function(){return[{type:e.ElementRef},{type:o.DomSanitizer}]},s([e.Input()],t.prototype,"placeholder",void 0),s([e.Input()],t.prototype,"value",void 0),s([e.Input()],t.prototype,"max",void 0),s([e.Input()],t.prototype,"min",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=i=s([e.Component({selector:"fg-input-range",template:'\n\n<div class="inputWrap noselect"\n (mousedown)="tear.classList.add(\'active\');processMouseEvent($event);mouseDown=true"\n (mouseup)="tear.classList.remove(\'active\');mouseDown=false"\n (touchstart)="tear.classList.add(\'active\');processTouchEvent($event)"\n (touchend)="tear.classList.remove(\'active\')"\n (touchmove)="processTouchEvent($event)"\n (mousemove)="processMouseEvent($event, true)"\n (mouseleave)="handleMouseLeave($event);mouseDown=false;tear.classList.remove(\'active\');"\n>\n <div class="fakeInputRange">\n <div #tear class="tear" [style.transform]="trustedStyle">\n <span>{{value}}</span>\n </div>\n\n <div class="sliderLine">\n <div class="sliderBackground"></div>\n <div [style.width]="sliderLineWidthStyle" class="sliderActive"></div>\n </div>\n </div>\n</div>\n\n\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return i})),multi:!0}],styles:[":host{display:block;position:relative}:host *{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}span{display:block;font-size:22px}.inputWrap{padding-top:32px}.inputWrap .fakeInputRange{position:relative}.inputWrap .fakeInputRange .tear{position:absolute;transition:width .5s,height .5s;width:30px;height:30px;border-radius:0 50% 50%;border:3px solid;transform:rotate(-135deg)}.inputWrap .fakeInputRange .tear span{color:#fff;transition:left .5s,top .5s,font-size .5s;font-size:9px;position:absolute;left:11px;top:11px;transform:translate(-50%,-50%) rotate(-225deg)}.inputWrap .fakeInputRange .tear.active{width:50px;height:50px}.inputWrap .fakeInputRange .tear.active span{font-size:19px;left:20px;top:20px}.sliderLine{margin-top:20px;position:relative}.sliderLine .sliderBackground{width:100%;height:2px;background-color:gray}.sliderLine .sliderActive{position:absolute;height:2px;top:0;left:0}input{opacity:0;top:0;left:0;z-index:1;position:absolute;margin-top:7px;height:100%;font-size:21px;border:1px solid}input.invalid{border:1px solid}"]})],t)}();var C=function(){function i(t){this.http=t,this.invalid=!1,this.placeholder="",this.config=null,this.mouseOverAutoCompleteBox=!1,this.touchStarted=!1,this.scrolling=!1,this.keyWords=[],this.autoCompleteResult=[],this.autoCompleteSource=null,this.propagateChange=function(t){}}var o;return o=i,Object.defineProperty(i.prototype,"dinamicPlaceholder",{get:function(){return this.keyWords.length>0?"":this.placeholder},enumerable:!0,configurable:!0}),Object.defineProperty(i.prototype,"renderKeywordPlain",{get:function(){return this.config.keywordType===t.KeywordType.String},enumerable:!0,configurable:!0}),i.prototype.registerOnChange=function(t){this.propagateChange=t},i.prototype.registerOnTouched=function(t){},i.prototype.ngOnInit=function(){var e=this;if(null===this.config&&(this.config=new c),!(this.config instanceof c))throw Error("Fancy GUI: Type of KeywordPickerconfiguration object was not KeywordPickerConfig");switch(this.config.autoCompleteSource){case t.AutCompleteSource.Input:this.setSourceAutocompleteSource(this.source);break;case t.AutCompleteSource.ApiEndpoint:this.http.get(this.config.autocompleteSourceUrl).subscribe((function(t){e.setSourceAutocompleteSource(t)}))}},i.prototype.setSourceAutocompleteSource=function(t){null===this.config.dataMapperFunction?this.autoCompleteSource=t:this.autoCompleteSource=this.config.dataMapperFunction(t)},i.prototype.writeValue=function(t){null!==t.forEach&&(this.keyWords=t)},i.prototype.handleKeyUp=function(e,i){if(e.preventDefault(),this.trim(i),this.config.autocompleteMode)this.autoCompleteResult=this.getAutoCompleteResult(i.value);else if(("Enter"===e.key||","===e.key)&&i.value.trim().length>=1){var n=i.value.replace(new RegExp(",","g"),"");if(n.length>0){switch(this.config.keywordType){case t.KeywordType.String:this.keyWords.push(n);break;case t.KeywordType.KeyValue:this.keyWords.push({id:null,value:n})}this.propagateChange(this.keyWords)}i.value=""}},i.prototype.handleMouseEnter=function(){!1===this.touchStarted&&(this.mouseOverAutoCompleteBox=!0)},i.prototype.addToList=function(t){this.scrolling||(this.keyWords.push(t),this.input.nativeElement.value="",this.autoCompleteResult=this.getAutoCompleteResult(""),this.input.nativeElement.focus(),this.propagateChange(this.keyWords))},i.prototype.trim=function(t){""===t.value.trim()&&(t.value="")},i.prototype.scroll=function(){this.touchStarted&&(this.scrolling=!0)},i.prototype.deletePlace=function(t){this.keyWords.splice(t,1),this.autoCompleteResult=this.getAutoCompleteResult(""),this.propagateChange(this.keyWords)},i.prototype.getAutoCompleteResult=function(e){var i=this,n=[];if(this.config.autocompleteMode){(this.config.keywordType===t.KeywordType.String?this.autoCompleteSource.filter((function(t){return t.includes(e)&&"None"!==t})):this.autoCompleteSource.filter((function(t){return t.value.includes(e)&&"None"!==t}))).forEach((function(t){var e=!1;i.keyWords.forEach((function(i){i===t&&(e=!0)})),e||n.push(t)}))}return n},i.ctorParameters=function(){return[{type:a.HttpClient}]},s([e.ViewChild("keywordInput")],i.prototype,"input",void 0),s([e.Input()],i.prototype,"invalid",void 0),s([e.Input()],i.prototype,"placeholder",void 0),s([e.Input()],i.prototype,"config",void 0),s([e.Input()],i.prototype,"source",void 0),i=o=s([e.Component({selector:"fg-keyword-picker",template:'\n\n<div [class.invalid]="invalid" class="areaListBox" (click)="keywordInput.focus()" #keywordWrap>\n <div class="areaWrapWrap noselect" *ngFor="let p of keyWords;let i = index">\n <div class="areaWrap noselect">\n <span class="areaLabel">\n <ng-container *ngIf="renderKeywordPlain">\n {{p}}\n </ng-container>\n <ng-container *ngIf="!renderKeywordPlain">\n {{p.value}}\n </ng-container>\n </span>\n <span class="deleteArea" (click)="deletePlace(i)">\n <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">\n <path\n d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />\n <path d="M0 0h24v24H0z" fill="none" />\n </svg>\n </span>\n </div>\n </div>\n <input (keydown.enter)="$event.preventDefault()" [value]="\'\'" placeholder="{{dinamicPlaceholder}}" (focusout)="keywordWrap.classList.remove(\'focus\')"\n (focus)="keywordWrap.classList.add(\'focus\');showAutoCompleteBox=true;autoCompleteResult = this.getAutoCompleteResult(keywordInput.value);"\n (keydown)="trim(keywordInput)" (blur)="showAutoCompleteBox=false;"\n (keyup)="handleKeyUp($event, keywordInput)" #keywordInput type="text">\n</div>\n<div (mouseenter)="handleMouseEnter()" (mouseleave)="mouseOverAutoCompleteBox=false;" (touchstart)="touchStarted=true"\n (scroll)="scroll()" (touchend)="touchStarted=false"\n [class.hidden]="!showAutoCompleteBox&&!mouseOverAutoCompleteBox&&!touchStarted" class="autocompleteWrap"\n *ngIf="config.autocompleteMode">\n <div (mouseup)="addToList(aci);" (touchend)="addToList(aci);scrolling=false" *ngFor="let aci of autoCompleteResult">\n <ng-container *ngIf="renderKeywordPlain">\n {{aci}}\n </ng-container>\n <ng-container *ngIf="!renderKeywordPlain">\n {{aci.value}}\n </ng-container>\n </div>\n</div>',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:e.forwardRef((function(){return o})),multi:!0}],styles:[":host{float:none;text-align:left;display:block;position:relative}:host *{box-sizing:border-box}:host .hidden{display:none}:host span{display:block;font-size:22px}:host .areaListBox{margin-top:7px;width:100%;border:1px solid;min-height:50px;padding:1px 7px 1px 0;cursor:text}:host input{height:48px;font-size:21px;border:none;outline:0;max-width:100%;padding-left:7px}:host .areaWrapWrap{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;float:left;padding-top:6px}:host .areaWrapWrap .areaWrap{cursor:default;position:relative;float:left;border-radius:5px;padding:5px 40px 5px 15px;margin-left:5px}:host .areaWrapWrap .areaWrap span{position:relative;display:block;word-break:break-all}:host .areaWrapWrap .areaWrap span.deleteArea{padding:0;position:absolute;right:5px;top:7px}:host .areaWrapWrap .areaWrap span.deleteArea svg:hover{opacity:.75;cursor:pointer}:host .autocompleteWrap{position:absolute;z-index:1;width:100%;max-height:180px;overflow-y:auto;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host .autocompleteWrap>div{padding:10px 0 10px 5px}:host .autocompleteWrap::-webkit-scrollbar{width:10px}:host .autocompleteWrap::-webkit-scrollbar-thumb{border-radius:5px}:host .autocompleteWrap::-webkit-scrollbar-thumb:hover{opacity:.75}"]})],i)}(),S=function(){function t(t,e,i,n,o,a){this.thikness=t,this.height=e,this.x=i,this.y=n,this.value=o,this.rotationSlider=a}return t.prototype.render=function(){this.rotationSlider.ctx.beginPath(),this.rotationSlider.ctx.moveTo(this.x-this.rotationSlider.horizontalLineMove,this.y),this.rotationSlider.ctx.lineTo(this.x-this.rotationSlider.horizontalLineMove,this.height),this.rotationSlider.ctx.lineWidth=this.thikness,this.rotationSlider.ctx.strokeStyle=this.rotationSlider.lineColor,this.rotationSlider.ctx.stroke(),this.rotationSlider.ctx.closePath()},t}(),b=function(){function t(t){var e=this;this.rotationSlider=t,this.pinching=!1,this.lastX=0,this.lastY=0,this.isDown=!1,this.rotationSlider.canvas.style.cursor="grab",this.rotationSlider.canvas.onmousedown=function(t){e.rotationSlider.canvas.style.cursor="grabbing",e.syncPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0},this.rotationSlider.canvas.onmouseup=function(){e.rotationSlider.canvas.style.cursor="grab",e.isDown=!1},this.rotationSlider.canvas.ontouchstart=function(t){e.rotationSlider.canvas.style.cursor="grabbing",e.syncTouchPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0},this.rotationSlider.canvas.ontouchend=function(){e.rotationSlider.canvas.style.cursor="grab",e.isDown=!1}}return t.prototype.syncPosition=function(t){var e=this.rotationSlider.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y;var i=this.rotationSlider.ctx.getTransform(),n=t.clientX-e.left,o=t.clientY-e.top;i.a,i.c,i.e,i.b,i.d,i.f;this.x=n,this.y=o},t.prototype.syncTouchPosition=function(t){var e=this.rotationSlider.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y,this.x=t.touches[0].clientX-e.left,this.y=t.touches[0].clientY-e.top},t}(),I=function(){function t(){this.iconPath=null,this.additive="",this.max=25,this.min=-25,this.change=new e.EventEmitter,this.renderingValue="0.00",this.horizontalLines=[],this.value=0,this.spaceing=30,this.lineThikness=3,this.lineColor="gray",this.horizontalLinesMarginTop=25,this.horizontalLineMove=0}return t.prototype.ngAfterViewInit=function(){this.canvas=this.canvasVc.nativeElement,this.ctx=this.canvas.getContext("2d"),this.init()},t.prototype.ngOnDestroy=function(){window.cancelAnimationFrame(this.animationFrameHandler)},t.prototype.clear=function(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)},t.prototype.init=function(){this.mouse=new b(this),this.resize(),this.addHorizontalLines(),this.initRenderingLoop(),this.initMouseEvents()},t.prototype.initRenderingLoop=function(){var t=this,e=function(){t.render(),window.requestAnimationFrame(e)};this.animationFrameHandler=window.requestAnimationFrame(e)},t.prototype.initMouseEvents=function(){var t=this;this.canvas.onmousemove=function(e){t.mouse.isDown&&((t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing<=t.max&&(t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing>=t.min?(t.horizontalLineMove+=t.mouse.lastX-t.mouse.x,t.value=Math.round(t.horizontalLineMove/t.spaceing*100)/100,t.renderingValue=(Math.round(t.horizontalLineMove/t.spaceing*100)/100).toFixed(2)):(t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing>0?(t.value=t.max,t.horizontalLineMove=t.max*t.spaceing,t.renderingValue=t.max.toFixed(2).toString()):(t.value=t.min,t.horizontalLineMove=t.min*t.spaceing,t.renderingValue=t.min.toFixed(2).toString()),t.change.emit(t.value)),t.mouse.syncPosition(e)},this.canvas.ontouchmove=function(e){e.preventDefault(),t.mouse.isDown&&((t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing<=t.max&&(t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing>=t.min?(t.horizontalLineMove+=t.mouse.lastX-t.mouse.x,t.value=Math.round(t.horizontalLineMove/t.spaceing*100)/100,t.renderingValue=(Math.round(t.horizontalLineMove/t.spaceing*100)/100).toFixed(2)):(t.horizontalLineMove+(t.mouse.lastX-t.mouse.x))/t.spaceing>0?(t.value=t.max,t.horizontalLineMove=t.max*t.spaceing,t.renderingValue=t.max.toFixed(2).toString()):(t.value=t.min,t.horizontalLineMove=t.min*t.spaceing,t.renderingValue=t.min.toFixed(2).toString()),t.change.emit(t.value)),t.mouse.syncTouchPosition(e)}},t.prototype.resize=function(){var t=this.canvas.parentElement;this.canvas.width=t.clientWidth,this.horizontalLines=[],this.addHorizontalLines()},t.prototype.render=function(){this.clear(),this.ctx.beginPath(),this.ctx.arc(this.canvas.width/2,10,5,0,2*Math.PI),this.ctx.fillStyle=this.lineColor,this.ctx.fill(),this.ctx.closePath(),this.horizontalLines.forEach((function(t){t.render()}))},t.prototype.addHorizontalLines=function(){for(var t=0;t<=this.max+5;t++)this.horizontalLines.push(new S(this.lineThikness,100,this.canvas.width/2+t*this.spaceing,this.horizontalLinesMarginTop,t,this));for(t=0;t>=this.min-5;t--)this.horizontalLines.push(new S(this.lineThikness,100,this.canvas.width/2- -1*t*this.spaceing,this.horizontalLinesMarginTop,t,this))},t.prototype.resetValue=function(){this.value=0,this.horizontalLineMove=0,this.renderingValue="0.00",this.change.emit(this.value)},s([e.Input()],t.prototype,"iconPath",void 0),s([e.Input()],t.prototype,"additive",void 0),s([e.Input()],t.prototype,"max",void 0),s([e.Input()],t.prototype,"min",void 0),s([e.Output()],t.prototype,"change",void 0),s([e.ViewChild("canvas")],t.prototype,"canvasVc",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=s([e.Component({selector:"fg-slider",template:'<div class="valueOuterWrapper">\n <div [class.visible]="value!==0" class="valueWrapper">\n \n <img *ngIf="iconPath" src="{{iconPath}}" />\n \x3c!--<div class="valueWrapper visible">--\x3e\n <span class="value">{{renderingValue}}{{additive}}</span>\n <button (click)="resetValue()" class="resetButton" type="button">x</button>\n </div>\n</div>\n<div class="rotationSliderCanvasWrap">\n <canvas #canvas></canvas>\n</div>\n',styles:[":host{display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;padding-top:35px}.valueOuterWrapper{position:absolute;top:0;left:50%;transform:translate(-50%,0)}.valueOuterWrapper .valueWrapper{border-radius:7px;padding:5px 15px 5px 18px;position:relative;width:25px;height:25px;margin:0 auto;transition:width .5s,background-color .5s}.valueOuterWrapper .valueWrapper img{width:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.valueOuterWrapper .valueWrapper .value{margin-top:5px;text-align:center;display:none;font-size:13px;font-weight:700}.valueOuterWrapper .valueWrapper .resetButton{position:absolute;display:none;color:#fff;background-color:#000;width:15px;height:15px;border-radius:20px;border:none;outline:0;right:8px;font-size:9px;top:50%;transform:translate(0,-50%)}.valueOuterWrapper .valueWrapper.visible{background-color:#aaa9a9;width:100px}.valueOuterWrapper .valueWrapper.visible img{position:absolute;left:17px;width:20px;display:block}.valueOuterWrapper .valueWrapper.visible .resetButton,.valueOuterWrapper .valueWrapper.visible .value{display:block}"]})],t)}(),M=function(){function t(t,e,i,n,o,a){this.thikness=t,this.height=e,this.x=i,this.y=n,this.value=o,this.rotationSlider=a}return t.prototype.render=function(){this.rotationSlider.ctx.beginPath(),this.rotationSlider.ctx.moveTo(this.x-this.rotationSlider.horizontalLineMove,this.y),this.rotationSlider.ctx.lineTo(this.x-this.rotationSlider.horizontalLineMove,this.height),this.rotationSlider.ctx.lineWidth=this.thikness,this.rotationSlider.ctx.strokeStyle=this.rotationSlider.lineColor,this.rotationSlider.ctx.stroke(),this.rotationSlider.ctx.closePath()},t}(),z=function(){function t(t){var e=this;this.rotationSlider=t,this.pinching=!1,this.lastX=0,this.lastY=0,this.isDown=!1,this.rotationSlider.canvas.style.cursor="grab",this.rotationSlider.canvas.onmousedown=function(t){e.rotationSlider.canvas.style.cursor="grabbing",e.syncPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0},this.rotationSlider.canvas.onmouseup=function(){e.rotationSlider.canvas.style.cursor="grab",e.isDown=!1},this.rotationSlider.canvas.ontouchstart=function(t){e.rotationSlider.canvas.style.cursor="grabbing",e.syncTouchPosition(t),e.lastY=e.y,e.lastX=e.x,e.isDown=!0},this.rotationSlider.canvas.ontouchend=function(){e.rotationSlider.canvas.style.cursor="grab",e.isDown=!1}}return t.prototype.syncPosition=function(t){var e=this.rotationSlider.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y;var i=this.rotationSlider.ctx.getTransform(),n=t.clientX-e.left,o=t.clientY-e.top;i.a,i.c,i.e,i.b,i.d,i.f;this.x=n,this.y=o},t.prototype.syncTouchPosition=function(t){var e=this.rotationSlider.canvas.getBoundingClientRect();this.lastX=this.x,this.lastY=this.y,this.x=t.touches[0].clientX-e.left,this.y=t.touches[0].clientY-e.top},t}(),W=function(){function t(){this.change=new e.EventEmitter,this.horizontalLines=[],this.value=0,this.renderingValue="0.00",this.spaceing=30,this.lineThikness=3,this.lineColor="gray",this.horizontalLinesMarginTop=25,this.horizontalLineMove=0}return t.prototype.ngAfterViewInit=function(){this.canvas=this.canvasVc.nativeElement,this.ctx=this.canvas.getContext("2d"),this.init()},t.prototype.ngOnDestroy=function(){window.cancelAnimationFrame(this.animationFrameHandler)},t.prototype.clear=function(){this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)},t.prototype.init=function(){this.mouse=new z(this),this.resize(),this.initRenderingLoop(),this.initMouseEvents()},t.prototype.initRenderingLoop=function(){var t=this,e=function(){t.render(),window.requestAnimationFrame(e)};this.animationFrameHandler=window.requestAnimationFrame(e)},t.prototype.initMouseEvents=function(){var t=this;this.canvas.onmousemove=function(e){var i=t.mouse.lastX-t.mouse.x;t.mouse.isDown&&(t.addMissingLines(),t.horizontalLineMove+=i,t.value=Math.round(t.horizontalLineMove/t.spaceing*100)/100,t.renderingValue=(Math.round(t.horizontalLineMove/t.spaceing*100)/100).toFixed(2),i>0?t.change.emit(1):i<0&&t.change.emit(-1)),t.mouse.syncPosition(e)},this.canvas.ontouchmove=function(e){e.preventDefault();var i=t.mouse.lastX-t.mouse.x;t.mouse.isDown&&(t.addMissingLines(),t.horizontalLineMove+=i,t.value=Math.round(t.horizontalLineMove/t.spaceing*100)/100,t.renderingValue=(Math.round(t.horizontalLineMove/t.spaceing*100)/100).toFixed(2),i>0?t.change.emit(1):t.change.emit(-1)),t.mouse.syncTouchPosition(e)}},t.prototype.addMissingLines=function(){for(var t=this,e=this.horizontalLines.filter((function(e){return e.x-t.horizontalLineMove>t.canvas.width})).length,i=this.horizontalLines.filter((function(e){return e.x-t.horizontalLineMove<0})).length;e<=1;){var n=this.horizontalLines[this.horizontalLines.length-1];this.horizontalLines.push(new M(this.lineThikness,100,n.x+this.spaceing,this.horizontalLinesMarginTop,null,this)),this.horizontalLines.shift(),e=this.horizontalLines.filter((function(e){return e.x-t.horizontalLineMove>t.canvas.width})).length}for(;i<=1;){n=this.horizontalLines[0];this.horizontalLines.unshift(new M(this.lineThikness,100,n.x-this.spaceing,this.horizontalLinesMarginTop,null,this)),this.horizontalLines.pop(),i=this.horizontalLines.filter((function(e){return e.x-t.horizontalLineMove<0})).length}},t.prototype.resize=function(){var t=this.canvas.parentElement;this.canvas.width=t.clientWidth,this.horizontalLines=[],this.horizontalLineMove=0,this.addHorizontalLines()},t.prototype.render=function(){this.clear(),this.ctx.beginPath(),this.ctx.arc(this.canvas.width/2,10,5,0,2*Math.PI),this.ctx.fillStyle=this.lineColor,this.ctx.fill(),this.ctx.closePath(),this.horizontalLines.forEach((function(t){t.render()}))},t.prototype.addHorizontalLines=function(){for(var t=0;t<=this.canvas.width/2/(this.lineThikness+this.spaceing)+2;t++)this.horizontalLines.push(new M(this.lineThikness,100,this.canvas.width/2+t*this.spaceing,this.horizontalLinesMarginTop,t,this));for(t=0;t>=-this.canvas.width/2/(this.lineThikness+this.spaceing)-2;t--)this.horizontalLines.push(new M(this.lineThikness,100,this.canvas.width/2- -1*t*this.spaceing,this.horizontalLinesMarginTop,t,this))},t.prototype.resetValue=function(){this.value=0,this.horizontalLineMove=0,this.renderingValue="0.00",this.change.emit(this.value)},s([e.Output()],t.prototype,"change",void 0),s([e.ViewChild("canvas")],t.prototype,"canvasVc",void 0),s([e.HostListener("window:resize")],t.prototype,"resize",null),t=s([e.Component({selector:"fg-slider-infinite",template:'<div class="rotationSliderCanvasWrap">\n <canvas #canvas></canvas>\n</div>\n',styles:[":host{display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.valueOuterWrapper{position:absolute;top:0;left:50%;transform:translate(-50%,0)}.valueOuterWrapper .valueWrapper{border-radius:7px;padding:5px 15px 5px 18px;position:relative;width:25px;height:25px;margin:0 auto;transition:width .5s,background-color .5s}.valueOuterWrapper .valueWrapper svg{width:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.valueOuterWrapper .valueWrapper .value{margin-top:5px;text-align:center;display:none;font-size:13px;font-weight:700}.valueOuterWrapper .valueWrapper .resetButton{position:absolute;display:none;color:#fff;background-color:#000;width:15px;height:15px;border-radius:20px;border:none;outline:0;right:8px;font-size:9px;top:50%;transform:translate(0,-50%)}.valueOuterWrapper .valueWrapper.visible{background-color:#aaa9a9;width:100px}.valueOuterWrapper .valueWrapper.visible svg{position:absolute;left:17px;width:20px;display:block}.valueOuterWrapper .valueWrapper.visible .resetButton,.valueOuterWrapper .valueWrapper.visible .value{display:block}"]})],t)}(),L=function(){function t(){}return t=s([e.NgModule({declarations:[g,y,x,w,C,I,W],imports:[i.CommonModule,a.HttpClientModule],exports:[g,y,x,w,C,I,W]})],t)}();t.FileService=u,t.ImageCropperComponent=y,t.ImageCropperConfig=l,t.InputBetweenComponent=g,t.InputImageComponent=x,t.InputRangeComponent=w,t.KeywordPickerComponent=C,t.KeywordPickerConfig=c,t.NgFancyGUIModule=L,t.RotationSliderComponent=I,t.SliderInfiniteComponent=W,t.keywordsRequired=function(t){var e={lengthError:{given:t.value,length:t.value.length}};return t.value.length<=0?e:null},Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-fancy-gui.umd.min.js.map