ngx-canvas-hold-animation - npm Package Compare versions

Comparing version 1.20170417.1 to 1.20170417.2

bundles/ngx-canvas-hold-animation.umd.js

@@ -104,2 +104,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
         this.innerRadiusProgress = 0.40; // Radius of progress circles
+        this.innerRadiusProgressColor = ""; // Color of progress bar
         this.progressBarWidth = 0.08; // Line width of progress bar.
@@ -284,15 +285,20 @@ this.arcAngleOffset = 0.75; // By default, the arc drawing starts at 90 degrees clockwise from the top.
             'render': function (self) {
-                // Dynamic progress bar color
-                var barColorRed = 255; // FF
-                var barColorGreen = 18; // 12
-                var barColorBlue = 14; // 0D
                 var barColorEnd = "#FFFFFF"; // Default, is ignored anyway.
-                // Color manipulation logic
-                barColorRed = (255 - (barColorRed * _this.currentProgress));
-                barColorGreen = (255 * _this.currentProgress);
-                // Ensure sanity
-                barColorRed = Math.min(Math.max(barColorRed, 0), 255);
-                barColorGreen = Math.min(Math.max(barColorGreen, 0), 255);
-                barColorBlue = Math.min(Math.max(barColorBlue, 0), 255);
-                barColorEnd = "#" + _this.toHex(Math.round(barColorRed)) + _this.toHex(Math.round(barColorGreen)) + _this.toHex(Math.round(barColorBlue));
+                if (_this.innerRadiusProgressColor.length > 3) {
+                    // Dynamic progress bar color
+                    var barColorRed = 255; // FF
+                    var barColorGreen = 18; // 12
+                    var barColorBlue = 14; // 0D
+                    // Color manipulation logic
+                    barColorRed = (255 - (barColorRed * _this.currentProgress));
+                    barColorGreen = (255 * _this.currentProgress);
+                    // Ensure sanity
+                    barColorRed = Math.min(Math.max(barColorRed, 0), 255);
+                    barColorGreen = Math.min(Math.max(barColorGreen, 0), 255);
+                    barColorBlue = Math.min(Math.max(barColorBlue, 0), 255);
+                    barColorEnd = "#" + _this.toHex(Math.round(barColorRed)) + _this.toHex(Math.round(barColorGreen)) + _this.toHex(Math.round(barColorBlue));
+                }
+                else {
+                    barColorEnd = _this.innerRadiusProgressColor;
+                }
                 _this.jsuiEngine.drawArc(self.x, self.y, self.r, self.s, self.f, null, _this.jsuiEngine.canvasContext, { 'strokeStyle': barColorEnd, 'lineWidth': _this.relToAbs(_this.progressBarWidth, 0) * _this.drawScale });
@@ -373,2 +379,6 @@ },
     core_1.Input(),
+    __metadata("design:type", String)
+], HoldAnimationComponent.prototype, "innerRadiusProgressColor", void 0);
+__decorate([
+    core_1.Input(),
     __metadata("design:type", Number)
@@ -448,3 +458,3 @@ ], HoldAnimationComponent.prototype, "progressBarWidth", void 0);
         template: __webpack_require__(6),
-        styles: [__webpack_require__(5).toString()]
+        styles: [__webpack_require__(5)]
     }),
@@ -451,0 +461,0 @@ __metadata("design:paramtypes", [])

bundles/ngx-canvas-hold-animation.umd.min.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-canvas-hold-animation",["@angular/core","@angular/common"],e):"object"==typeof exports?exports["ngx-canvas-hold-animation"]=e(require("@angular/core"),require("@angular/common")):t["ngx-canvas-hold-animation"]=e(t["@angular/core"],t["@angular/common"])}(this,function(t,e){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=3)}([function(t,e,i){"use strict";var n=this&&this.__decorate||function(t,e,i,n){var o,l=arguments.length,s=l<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=(l<3?o(s):l>3?o(e,i,s):o(e,i))||s);return l>3&&s&&Object.defineProperty(e,i,s),s},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0});var l=i(1),s=i(7),r=2*Math.PI,a=function(){function t(){this.drawScale=1,this.circleX=.5,this.circleY=.5,this.innerRadiusProgress=.4,this.progressBarWidth=.08,this.arcAngleOffset=.75,this.innerRadiusUnfilled=.4,this.unfilledBarWidth=.06,this.unfilledBarColor="#667074",this.outerRadius=.47,this.outerRadiusLineWidth=.01,this.backgroundFill="rgba(0, 0, 0, 0.8)",this.backgroundBorderColor="#000000",this.holdText="HOLD",this.holdTextColor="#FFFF00",this.fontSize=.21,this.fontStyle="helvetica-neue",this.fillRate=.75,this.showAfterFinish=!0,this.animationFinished=new l.EventEmitter,this.currentProgress=0,this.directionForward=!1,this.lastAnimationTime=-1,this.screenObjects={},this.finishedFilled=!1,this.stopAnimationRunning=!0,this.firstTimeLoaded=!0,this.canvasSize=[-1,-1],this.pixelRenderOffsetFix=.01,this.updateCircleProgress=function(){var t=this,e=(new Date).getTime(),i=e-this.lastAnimationTime,n=i/1e3*this.fillRate;if(0===this.screenObjects.length)return!1;try{this.currentProgress>.33?this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset+this.pixelRenderOffsetFix)*r:this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset)*r}catch(t){return console.error("[HoldAnimationComponent::updateCircleProgress()]: Could not update progress bar: ",t),this.stopAnimationRunning=!0,void this.animationFinished.emit(-1)}if(this.stopAnimationRunning)return!0;this.directionForward?(this.currentProgress+=n,this.currentProgress<=1.0001?this.stopAnimationRunning||requestAnimationFrame(function(){t.updateCircleProgress()}):(this.stopAnimationRunning=!0,this.finishedFilled=!0,this.currentProgress=1,this.animationFinished.emit(1))):(this.currentProgress-=n,this.currentProgress>=1e-4?this.stopAnimationRunning||requestAnimationFrame(function(){t.updateCircleProgress()}):(this.currentProgress=0,this.stopAnimationRunning=!0,this.finishedFilled&&(this.finishedFilled=!1),this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset)*r,this.animationFinished.emit(2))),this.lastAnimationTime=e,this.jsuiEngine&&this.jsuiEngine.refreshScreen()},this.jsuiEngine=new s.JSUIEngine}return t.prototype.animateCommand=function(t){this.lastAnimationTime=(new Date).getTime(),this.detectCanvasSize(),"forward"===t?this.fillProgress():"backward"===t?this.unfillProgress():(this.stopAnimationRunning=!0,this.animationFinished.emit(0))},t.prototype.ngOnDestroy=function(){delete this.jsuiEngine},t.prototype.ngOnInit=function(){var t=Math.min(this.animationContainer.nativeElement.clientHeight,this.animationContainer.nativeElement.clientWidth);this.holdAnimationCanvas.nativeElement.width=t,this.holdAnimationCanvas.nativeElement.height=t,this.canvasSize=[this.holdAnimationCanvas.nativeElement.width,this.holdAnimationCanvas.nativeElement.height],this.setupObjects(),this.createObjects()},t.prototype.ngAfterContentInit=function(){var t=this;this.ctx=this.jsuiEngine.setupCanvas(this.holdAnimationCanvas.nativeElement);var e=this.canvasSize[0]<this.canvasSize[1]?0:1;this.ctx.font=this.relToAbs(this.fontSize,e)*this.drawScale+"px "+this.fontStyle,this.jsuiEngine.refreshScreen(),this.lastAnimationTime=(new Date).getTime(),setTimeout(function(){t.firstTimeLoaded=!1},20)},t.prototype.detectCanvasSize=function(){var t=Math.min(this.animationContainer.nativeElement.clientHeight,this.animationContainer.nativeElement.clientWidth);if(this.holdAnimationCanvas.nativeElement.width=t,this.holdAnimationCanvas.nativeElement.height=t,this.canvasSize=[this.holdAnimationCanvas.nativeElement.width,this.holdAnimationCanvas.nativeElement.height],this.ctx){var e=this.canvasSize[0]<this.canvasSize[1]?0:1;this.ctx.font=this.relToAbs(this.fontSize,e)*this.drawScale+"px "+this.fontStyle,this.setupObjects(),this.createObjects()}},t.prototype.resetState=function(){this.currentProgress=0,this.finishedFilled=!1},t.prototype.setupObjects=function(){var t=this;this.screenObjects={},this.screenObjects.backgroundCircle={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.outerRadius,0)*this.drawScale,f:1*r,shape:"arc",renderType:function(){t.jsuiEngine.canvasContext.fill(),t.jsuiEngine.canvasContext.stroke()},render:function(e){t.jsuiEngine.drawArc(e.x,e.y,e.r,null,e.f,e.renderType,t.jsuiEngine.canvasContext,{fillStyle:t.backgroundFill,strokeStyle:t.backgroundBorderColor,lineWidth:t.relToAbs(t.outerRadiusLineWidth,0)*t.drawScale})},visible:!0},this.screenObjects.unfilledBackground={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.innerRadiusUnfilled,0)*this.drawScale,f:1*r,shape:"arc",render:function(e){t.jsuiEngine.drawArc(e.x,e.y,e.r,null,e.f,null,t.jsuiEngine.canvasContext,{strokeStyle:t.unfilledBarColor,lineWidth:t.relToAbs(t.unfilledBarWidth,0)*t.drawScale})},visible:!0},this.screenObjects.progressBarCircle={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.innerRadiusProgress,0)*this.drawScale,s:this.arcAngleOffset*r,f:this.arcAngleOffset*r,shape:"arc",render:function(e){var i=255,n=18,o=14,l="#FFFFFF";i=255-i*t.currentProgress,n=255*t.currentProgress,i=Math.min(Math.max(i,0),255),n=Math.min(Math.max(n,0),255),o=Math.min(Math.max(o,0),255),l="#"+t.toHex(Math.round(i))+t.toHex(Math.round(n))+t.toHex(Math.round(o)),t.jsuiEngine.drawArc(e.x,e.y,e.r,e.s,e.f,null,t.jsuiEngine.canvasContext,{strokeStyle:l,lineWidth:t.relToAbs(t.progressBarWidth,0)*t.drawScale})},visible:!0},this.screenObjects.txtHold={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),text:this.holdText,shape:"text",render:function(e){var i=t.canvasSize[0]<t.canvasSize[1]?0:1,n=[t.ctx.measureText(e.text).width/2,t.relToAbs(t.fontSize,i)*t.drawScale/2];t.jsuiEngine.drawText(e.x-n[0],e.y-n[1],e.text,e,null,t.jsuiEngine.canvasContext,{fillStyle:t.holdTextColor})},visible:!0}},t.prototype.createObjects=function(){this.jsuiEngine.canvasObjects=[],this.jsuiEngine.canvasObjects.push(this.screenObjects.backgroundCircle),this.jsuiEngine.canvasObjects.push(this.screenObjects.unfilledBackground),this.jsuiEngine.canvasObjects.push(this.screenObjects.progressBarCircle),this.jsuiEngine.canvasObjects.push(this.screenObjects.txtHold)},t.prototype.fillProgress=function(){this.stopAnimationRunning=!1,this.directionForward=!0,this.updateCircleProgress()},t.prototype.unfillProgress=function(){this.stopAnimationRunning=!1,this.directionForward=!1,this.updateCircleProgress()},t.prototype.showAnimation=function(){return!this.stopAnimationRunning||!(!this.showAfterFinish||!this.finishedFilled)},t.prototype.toHex=function(t){return("0"+Number(t).toString(16)).slice(-2).toUpperCase()},t.prototype.relToAbs=function(t,e){return t*this.canvasSize[e]},t}();n([l.Input(),o("design:type",Number)],a.prototype,"drawScale",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"circleX",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"circleY",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"innerRadiusProgress",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"progressBarWidth",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"arcAngleOffset",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"innerRadiusUnfilled",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"unfilledBarWidth",void 0),n([l.Input(),o("design:type",String)],a.prototype,"unfilledBarColor",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"outerRadius",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"outerRadiusLineWidth",void 0),n([l.Input(),o("design:type",String)],a.prototype,"backgroundFill",void 0),n([l.Input(),o("design:type",String)],a.prototype,"backgroundBorderColor",void 0),n([l.Input(),o("design:type",String)],a.prototype,"holdText",void 0),n([l.Input(),o("design:type",String)],a.prototype,"holdTextColor",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"fontSize",void 0),n([l.Input(),o("design:type",String)],a.prototype,"fontStyle",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"fillRate",void 0),n([l.Input(),o("design:type",Object)],a.prototype,"showAfterFinish",void 0),n([l.Output(),o("design:type",l.EventEmitter)],a.prototype,"animationFinished",void 0),n([l.ViewChild("holdAnimationCanvas"),o("design:type",l.ElementRef)],a.prototype,"holdAnimationCanvas",void 0),n([l.ViewChild("animationContainer"),o("design:type",l.ElementRef)],a.prototype,"animationContainer",void 0),a=n([l.Component({selector:"hold-animation",template:i(6),styles:[i(5).toString()]}),o("design:paramtypes",[])],a),e.HoldAnimationComponent=a},function(e,i){e.exports=t},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0);e.HoldAnimationComponent=n.HoldAnimationComponent;var o=i(4);e.HoldAnimationModule=o.HoldAnimationModule},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2);e.HoldAnimationComponent=n.HoldAnimationComponent,e.HoldAnimationModule=n.HoldAnimationModule},function(t,e,i){"use strict";var n=this&&this.__decorate||function(t,e,i,n){var o,l=arguments.length,s=l<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=(l<3?o(s):l>3?o(e,i,s):o(e,i))||s);return l>3&&s&&Object.defineProperty(e,i,s),s};Object.defineProperty(e,"__esModule",{value:!0});var o=i(1),l=i(13),s=i(0),r=a=function(){function t(){}return t.forRoot=function(){return{ngModule:a}},t.forChild=function(){return{ngModule:a}},t}();r=a=n([o.NgModule({imports:[l.CommonModule],declarations:[s.HoldAnimationComponent],exports:[s.HoldAnimationComponent]})],r),e.HoldAnimationModule=r;var a},function(t,e){t.exports=".animationContainer {\r\n    background-color: rgba(0, 0, 0, 0);\r\n    height: 100%;\r\n    width: 100%;\r\n    text-align: center;\r\n    z-index: 99999999;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    margin: 0 auto;\r\n    vertical-align: middle;\r\n}\r\n\r\n.animation {\r\n    margin: 0 auto;\r\n    display: inline-block;\r\n    position: relative;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    border-style: none;\r\n}\r\n\r\n.fadeOut {\r\n    opacity: 0;\r\n    transition: .25s ease-in-out all;\r\n}\r\n\r\n.startHidden {\r\n    display: inline-block;\r\n}\r\n\r\n:host {\r\n    height: 14vw;\r\n    width: 25vw;\r\n    display: block;\r\n    position: absolute;\r\n    margin: 0 auto;\r\n}\r\n"},function(t,e){t.exports='<div #animationContainer class="animationContainer" [ngClass]="{\'fadeOut\': !showAnimation() }" [hidden]="firstTimeLoaded">\r\n  <canvas #holdAnimationCanvas class="animation">\r\n    Your browser does not support the HTML5 canvas tag.\r\n  </canvas>\r\n</div>\r\n'},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(8);e.JSUIEngine=n.JSUIEngine,e.ObjectModel=n.ObjectModel,e.StyleModel=n.StyleModel},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(9);e.JSUIEngine=n.JSUIEngine;var o=i(10);e.ObjectModel=o.ObjectModel;var l=i(11);e.StyleModel=l.StyleModel},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(12),o=function(){function t(){this.canvasObjects=[],this.jsuiEngine=new n}return t.prototype.debug=function(){var t=this;return{_version:function(){return t.jsuiEngine.debug._version},_wrapperVersion:function(){return"1.20170405.1"},setLevel:this.jsuiEngine.debug.setLevel,getLevel:this.jsuiEngine.debug.getLevel,toggle:this.jsuiEngine.debug.toggle,getToggleConst:this.jsuiEngine.debug.getToggleConst}},t.prototype.setupCanvas=function(t,e,i){return e=e||this.canvasObjects,this.canvasObject=t,this.canvasContext=this.jsuiEngine.setupCanvas(this.canvasObject,e,i),this.canvasContext},t.prototype.renderObjects=function(t){return t=t||this.canvasObjects,this.jsuiEngine.renderObjects(t)},t.prototype.drawRect=function(t,e,i,n,o,l,s){this.jsuiEngine.drawRect(t,e,i,n,o,l,s)},t.prototype.drawText=function(t,e,i,n,o,l,s){this.jsuiEngine.drawText(t,e,i,n,o,l,s)},t.prototype.drawArc=function(t,e,i,n,o,l,s,r){void 0===n&&(n=0),void 0===o&&(o=4*Math.PI),this.jsuiEngine.drawArc(t,e,i,n,o,l,s,r)},t.prototype.drawLine=function(t,e,i,n,o,l){this.jsuiEngine.drawLine(t,e,i,n,o,l)},t.prototype.drawPolygon=function(t,e,i,n,o){this.jsuiEngine.drawPolygon(t,e,i,n,o)},t.prototype.drawImage=function(t,e,i,n,o,l,s,r,a,d){this.jsuiEngine.drawImage(t,e,i,n,o,l,s,r,a,d)},t.prototype.clearCanvas=function(t,e,i){this.jsuiEngine.canvasObjects=this.canvasObjects,this.jsuiEngine.drawImage(t,e,i)},t.prototype.refreshScreen=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.canvasObjects=this.canvasObjects,this.jsuiEngine.refreshScreen(t,e,i)},t.prototype.mouseEventHandler=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.mouseEventHandler(t,e,i)},t.prototype.checkMouseCollision=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.mouseEventHandler(t,e,i)},t}();e.JSUIEngine=o},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(){}return t}();e.ObjectModel=n},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(){}return t}();e.StyleModel=n},function(t,e,i){var n=function(){defaultBackgroundObject={backgroundColor:"#000000"};var t=0;this.defaultColor="#000000",this.defaultLineWidth="1",this.canvasContext=null,this.canvasObject=null,this.canvasObjects=[],Math.TAU=2*Math.PI,this.debug={_version:"1.20170407.6",setLevel:function(e){return t=e,!0},getLevel:function(){return t},toggle:function(e){getToggleConst[e]>-1&&(t=t&getToggleConst[e]?t-getToggleConst[e]:t+getToggleConst[e])},getToggleConst:{setupCanvas:1,renderObjects:2,drawRect:4,drawText:8,drawArc:16,drawLine:32,drawPolygon:64,drawImage:128,clearCanvas:256,refreshScreen:512,mouseEventHandler:1024,checkMouseCollision:2048}},this.setupCanvas=function(e,i,n){return i=void 0===i||null==i?this.canvasObjects:i,n&&(defaultBackgroundObject=n),this.canvasObject=e,i=[],i.push(),this.canvasObjects=i,this.canvasContext=e.getContext("2d"),1&t&&(console.log("[1]: Debug Mode is set to: ",t),console.log("[1]: setupCanvas(objCanvas, objectList): ",e,i)),this.canvasContext},this.renderObjects=function(e){e=void 0===e||null==e?this.canvasObjects:e;for(canvasObject in e)void 0!==e[canvasObject].visible&&null!=e[canvasObject].visible&&0!=e[canvasObject].visible&&e[canvasObject].render(e[canvasObject]);return 2&t&&console.log("[2]: renderObjects(objectList): ",e),!0},this.drawRect=function(e,i,n,o,l,s,r){s=void 0===s||null==s?this.canvasContext:s,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o||null==o||""==o?0:o,originalFillStyle=s.fillStyle,originalStrokeStyle=s.strokeStyle,void 0!==r&&null!=r&&(r.fillStyle=void 0===r.fillStyle?this.defaultColor:r.fillStyle,r.strokeStyle=void 0===r.strokeStyle?this.defaultColor:r.strokeStyle,r.lineWidth=void 0===r.lineWidth?this.defaultLineWidth:r.lineWidth),l=void 0===l||null==l?function(){s.stroke()}:l,void 0!==r&&null!=r&&(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,s.lineWidth=void 0===r.lineWidth||null==r.lineWidth?s.lineWidth:r.lineWidth),s.beginPath(),s.rect(e,i,n,o),l(),s.closePath(),s.fillStyle=originalFillStyle,s.strokeStyle=originalStrokeStyle,4&t&&console.log("[4]: drawRect(x, y, w, h, renderType, context, style): ",e,i,n,o,l,s,r)},this.drawText=function(e,i,n,o,l,s,r){s=void 0===s||null==s?this.canvasContext:s,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,o.w=void 0===o.w||null==o.w||""==o.w?s.measureText(n).width:o.w,o.h=void 0===o.h||null==o.h||""==o.h?s.measureText(n).height:o.h,originalFillStyle=s.fillStyle,originalStrokeStyle=s.strokeStyle,void 0!==r&&null!=r?(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,r.textBaseline=void 0===r.textBaseline?"hanging":r.textBaseline,r.font=void 0===r.font?"":r.font,r.maxWidth=void 0===r.maxWidth?null:r.maxWidth):r={},l=void 0===l||null==l?function(t,e,i,n){s.fillText(i,t,e)}:l,void 0!==r&&null!=r&&(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,s.textBaseline=void 0===r.textBaseline?s.textBaseline:r.textBaseline,s.font=void 0===r.font?s.font:r.font,r.maxWidth=void 0===r.maxWidth?s.maxWidth:r.maxWidth),s.beginPath(),l(e,i,n,r.maxWidth),s.closePath(),s.fillStyle=originalFillStyle,s.strokeStyle=originalStrokeStyle,8&t&&console.log("[8]: drawText(x, y, text, renderText, context, style): ",e,i,n,l,s,r)},this.drawArc=function(e,i,n,o,l,s,r,a){r=void 0===r||null==r?this.canvasContext:r,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,o=void 0===o||null==o||""==o?0:o,n=void 0===n||null==n||""==n?0:n,l=void 0===l||null==l||""==l?2*Math.TAU:l,originalFillStyle=r.fillStyle,originalStrokeStyle=r.strokeStyle,void 0!==a&&null!=a&&(a.fillStyle=void 0===a.fillStyle?this.defaultColor:a.fillStyle,a.strokeStyle=void 0===a.strokeStyle?this.defaultColor:a.strokeStyle,a.lineWidth=void 0===a.lineWidth?this.defaultLineWidth:a.lineWidth),s=void 0===s||null==s?function(){r.stroke()}:s,void 0!==a&&null!=a&&(r.fillStyle=void 0===a.fillStyle||null==a.fillStyle?r.fillStyle:a.fillStyle,r.strokeStyle=void 0===a.strokeStyle||null==a.strokeStyle?r.strokeStyle:a.strokeStyle,r.lineWidth=void 0===a.lineWidth||null==a.lineWidth?r.lineWidth:a.lineWidth),r.beginPath(),r.arc(e,i,n,o,l),s(),r.closePath(),r.fillStyle=originalFillStyle,r.strokeStyle=originalStrokeStyle,16&t&&console.log("[16]: drawArc(x, y, r, s, f, renderType, context, style): ",e,i,n,o,l,s,r,a)},this.drawLine=function(e,i,n,o,l,s){l=void 0===l||null==l?this.canvasContext:l,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o||null==o||""==o?0:o,originalFillStyle=l.fillStyle,originalStrokeStyle=l.strokeStyle,void 0!==s&&null!=s&&(s.strokeStyle=void 0===s.strokeStyle?this.defaultColor:s.strokeStyle,s.lineWidth=void 0===s.lineWidth?this.defaultLineWidth:s.lineWidth),void 0!==s&&null!=s&&(l.strokeStyle=void 0===s.strokeStyle||null==s.strokeStyle?l.strokeStyle:s.strokeStyle,l.lineWidth=void 0===s.lineWidth||null==s.lineWidth?l.lineWidth:s.lineWidth),l.beginPath(),l.moveTo(e,i),l.lineTo(n,o),l.stroke(),l.closePath(),l.fillStyle=originalFillStyle,l.strokeStyle=originalStrokeStyle,32&t&&console.log("[32]: drawLine(x1, y1, x2, y2, context, style): ",e,i,n,o,l,s)},this.drawPolygon=function(i,n,o,l,s){if(l=void 0===l||null==l?this.canvasContext:l,n=void 0===n||null==n||""==n||n,originalFillStyle=l.fillStyle,originalStrokeStyle=l.strokeStyle,void 0!==s&&null!=s&&(s.fillStyle=void 0===s.fillStyle?this.defaultColor:s.fillStyle,s.strokeStyle=void 0===s.strokeStyle?this.defaultColor:s.strokeStyle,s.lineWidth=void 0===s.lineWidth?this.defaultLineWidth:s.lineWidth),o=void 0===o||null==o?function(){l.stroke()}:o,void 0!==s&&null!=s&&(l.fillStyle=void 0===s.fillStyle||null==s.fillStyle?l.fillStyle:s.fillStyle,l.strokeStyle=void 0===s.strokeStyle||null==s.strokeStyle?l.strokeStyle:s.strokeStyle,l.lineWidth=void 0===s.lineWidth||null==s.lineWidth?l.lineWidth:s.lineWidth),n&&(i=e(i)),l.beginPath(),i.length>0){l.moveTo(i[0][0],i[0][1]);for(var r=1;r<i.length;r++)l.lineTo(i[r][0],i[r][1])}l.closePath(),o(),l.fillStyle=originalFillStyle,l.strokeStyle=originalStrokeStyle,64&t&&console.log("[64]: drawPolygon(polygonPoints, autoArrange, renderType, context, style): ",i,n,o,l,s)},this.drawImage=function(e,i,n,o,l,s,r,a,d,c){c=void 0===c||null==c?this.canvasContext:c,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o?e.width:o,l=void 0===l?e.height:l,s=void 0===l?null:s,r=void 0===l?null:r,a=void 0===l?null:a,d=void 0===l?null:d,originalFillStyle=c.fillStyle,e.objImage&&(e.w=e.w<0?e.objImage.width:e.w,e.h=e.h<0?e.objImage.height:e.h,c.beginPath(),null==s||null==r||null==a||null==d||0==s||0==r||0==a||0==d?o<0||l<0?c.drawImage(e.objImage,i,n):c.drawImage(e.objImage,i,n,o,l):c.drawImage(e.objImage,s,r,a,d,i,n,o,l),c.closePath(),e.onload=function(){e.hasLoaded=!0,e.w=e.w<0?e.objImage.width:e.w,e.h=e.h<0?e.objImage.height:e.h,c.beginPath(),null==s||null==r||null==a||null==d||0==s||0==r||0==a||0==d?o<0||l<0?c.drawImage(e.objImage,i,n):c.drawImage(e.objImage,i,n,o,l):c.drawImage(e.objImage,s,r,a,d,i,n,o,l),c.closePath()}),c.fillStyle=originalFillStyle,128&t&&console.log("[128]: drawImage(srcImage, x, y, w, h, sx, sy, sw, sh, context): ",e,i,n,o,l,s,r,a,d,c)},this.clearCanvas=function(e,i,n){i=void 0===i||null==i?this.canvasContext:i,n=void 0===n||null==n||n,originalFillStyle=i.fillStyle,e=void 0!==defaultBackgroundObject&&null!=defaultBackgroundObject?void 0===e||null==e?defaultBackgroundObject.backgroundColor:e:void 0===e||null==e?"#FFFFFF":e,n?i.clearRect(0,0,this.canvasObject.width,this.canvasObject.height):this.drawRect(0,0,this.canvasObject.width,this.canvasObject.height,function(){i.fill()},i,{fillStyle:e}),i.fillStyle=originalFillStyle,256&t&&console.log("[256]: clearCanvas(backgroundColor, context, transparentBackground): ",e,i,n)},this.refreshScreen=function(e,i,n){i=void 0===i||null==i?this.canvasContext:i,n=void 0===n||null==n?this.canvasObjects:n,this.clearCanvas(null,i,e),this.renderObjects(n),512&t&&console.log("[512]: refreshScreen(transparentBackground, context, objectList): ",e,i,n)},this.mouseEventHandler=function(e,i,n){n=void 0===n||null==n?this.canvasObjects:n;triggedObjectList=this.checkMouseCollision(e.offsetX,e.offsetY);for(var o in triggedObjectList)null!=triggedObjectList[o]&&("Click"==i?void 0!==triggedObjectList[o].clickEvent&&null!=triggedObjectList[o].clickEvent&&(void 0!==triggedObjectList[o].enabled&&null!=triggedObjectList[o].enabled?1==triggedObjectList[o].enabled&&triggedObjectList[o].clickEvent(e.offsetX,e.offsetY,triggedObjectList[o]):triggedObjectList[o].clickEvent(e.offsetX,e.offsetY,triggedObjectList[o])):"Move"==i&&void 0!==triggedObjectList[o].moveEvent&&null!=triggedObjectList[o].moveEvent&&(void 0!==triggedObjectList[o].enabled&&null!=triggedObjectList[o].enabled?1==triggedObjectList[o].enabled&&triggedObjectList[o].moveEvent(e.offsetX,e.offsetY,triggedObjectList[o]):triggedObjectList[o].moveEvent(e.offsetX,e.offsetY,triggedObjectList[o])));1024&t&&console.log("[1024]: mouseEventHandler(e, eventType, objectList): ",e,i,n)},this.checkMouseCollision=function(e,i,n){n=void 0===n||null==n?this.canvasObjects:n,clickedObjects=[];for(var o in n)if(null!=n[o]&&void 0!==typeof n[o]&&null!=n[o].shape&&void 0!==typeof n[o].shape)if("rect"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("arc"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].r&&null!=n[o].r&&Math.sqrt((e-n[o].x)*(e-n[o].x)+(i-n[o].y)*(i-n[o].y))<n[o].r&&clickedObjects.push(n[o]);else if("image"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("text"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("polygon"==n[o].shape){for(var l=n[o].coordinates[0],s=!1,r=0,a=l.length-1;r<l.length;a=r++){var d=l[r][0],c=l[r][1],u=l[a][0],h=l[a][1],g=c>i!=h>i&&e<(u-d)*(i-c)/(h-c)+d;g&&(s=!s)}s&&clickedObjects.push(n[o])}return 2048&t&&console.log("[2048]: checkMouseCollision(mouseX, mouseY, objectList): ",e,i,n),clickedObjects};var e=function(t){t=t.slice(0);for(var e=function(t){for(var e=0,i=0,n=0;n<t.length;n++)e+=t[n][0],i+=t[n][1];return[e/t.length,i/t.length]}(t),i=0;i<t.length;i++)t[i][2]=Math.atan2(t[i][0]-e[0],t[i][1]-e[1]);t=t.sort(function(t,e){return t[2]-e[2]});var n=[];if(t.forEach(function(t){n.indexOf(t)<0&&n.push(t)}),n.length>0){n[n.length-1][0]===n[0][0]&&n[n.length-1][1]===n[0][1]||n.push([n[0][0],n[0][1]]);for(var o=0;o<n.length;o++)n[o]=[n[o][0],n[o][1]]}return n}};t.exports=n},function(t,i){t.exports=e}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-canvas-hold-animation",["@angular/core","@angular/common"],e):"object"==typeof exports?exports["ngx-canvas-hold-animation"]=e(require("@angular/core"),require("@angular/common")):t["ngx-canvas-hold-animation"]=e(t["@angular/core"],t["@angular/common"])}(this,function(t,e){return function(t){function e(n){if(i[n])return i[n].exports;var o=i[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var i={};return e.m=t,e.c=i,e.i=function(t){return t},e.d=function(t,i,n){e.o(t,i)||Object.defineProperty(t,i,{configurable:!1,enumerable:!0,get:n})},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=3)}([function(t,e,i){"use strict";var n=this&&this.__decorate||function(t,e,i,n){var o,l=arguments.length,s=l<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=(l<3?o(s):l>3?o(e,i,s):o(e,i))||s);return l>3&&s&&Object.defineProperty(e,i,s),s},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};Object.defineProperty(e,"__esModule",{value:!0});var l=i(1),s=i(7),r=2*Math.PI,a=function(){function t(){this.drawScale=1,this.circleX=.5,this.circleY=.5,this.innerRadiusProgress=.4,this.innerRadiusProgressColor="",this.progressBarWidth=.08,this.arcAngleOffset=.75,this.innerRadiusUnfilled=.4,this.unfilledBarWidth=.06,this.unfilledBarColor="#667074",this.outerRadius=.47,this.outerRadiusLineWidth=.01,this.backgroundFill="rgba(0, 0, 0, 0.8)",this.backgroundBorderColor="#000000",this.holdText="HOLD",this.holdTextColor="#FFFF00",this.fontSize=.21,this.fontStyle="helvetica-neue",this.fillRate=.75,this.showAfterFinish=!0,this.animationFinished=new l.EventEmitter,this.currentProgress=0,this.directionForward=!1,this.lastAnimationTime=-1,this.screenObjects={},this.finishedFilled=!1,this.stopAnimationRunning=!0,this.firstTimeLoaded=!0,this.canvasSize=[-1,-1],this.pixelRenderOffsetFix=.01,this.updateCircleProgress=function(){var t=this,e=(new Date).getTime(),i=e-this.lastAnimationTime,n=i/1e3*this.fillRate;if(0===this.screenObjects.length)return!1;try{this.currentProgress>.33?this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset+this.pixelRenderOffsetFix)*r:this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset)*r}catch(t){return console.error("[HoldAnimationComponent::updateCircleProgress()]: Could not update progress bar: ",t),this.stopAnimationRunning=!0,void this.animationFinished.emit(-1)}if(this.stopAnimationRunning)return!0;this.directionForward?(this.currentProgress+=n,this.currentProgress<=1.0001?this.stopAnimationRunning||requestAnimationFrame(function(){t.updateCircleProgress()}):(this.stopAnimationRunning=!0,this.finishedFilled=!0,this.currentProgress=1,this.animationFinished.emit(1))):(this.currentProgress-=n,this.currentProgress>=1e-4?this.stopAnimationRunning||requestAnimationFrame(function(){t.updateCircleProgress()}):(this.currentProgress=0,this.stopAnimationRunning=!0,this.finishedFilled&&(this.finishedFilled=!1),this.screenObjects.progressBarCircle.f=(this.currentProgress+this.arcAngleOffset)*r,this.animationFinished.emit(2))),this.lastAnimationTime=e,this.jsuiEngine&&this.jsuiEngine.refreshScreen()},this.jsuiEngine=new s.JSUIEngine}return t.prototype.animateCommand=function(t){this.lastAnimationTime=(new Date).getTime(),this.detectCanvasSize(),"forward"===t?this.fillProgress():"backward"===t?this.unfillProgress():(this.stopAnimationRunning=!0,this.animationFinished.emit(0))},t.prototype.ngOnDestroy=function(){delete this.jsuiEngine},t.prototype.ngOnInit=function(){var t=Math.min(this.animationContainer.nativeElement.clientHeight,this.animationContainer.nativeElement.clientWidth);this.holdAnimationCanvas.nativeElement.width=t,this.holdAnimationCanvas.nativeElement.height=t,this.canvasSize=[this.holdAnimationCanvas.nativeElement.width,this.holdAnimationCanvas.nativeElement.height],this.setupObjects(),this.createObjects()},t.prototype.ngAfterContentInit=function(){var t=this;this.ctx=this.jsuiEngine.setupCanvas(this.holdAnimationCanvas.nativeElement);var e=this.canvasSize[0]<this.canvasSize[1]?0:1;this.ctx.font=this.relToAbs(this.fontSize,e)*this.drawScale+"px "+this.fontStyle,this.jsuiEngine.refreshScreen(),this.lastAnimationTime=(new Date).getTime(),setTimeout(function(){t.firstTimeLoaded=!1},20)},t.prototype.detectCanvasSize=function(){var t=Math.min(this.animationContainer.nativeElement.clientHeight,this.animationContainer.nativeElement.clientWidth);if(this.holdAnimationCanvas.nativeElement.width=t,this.holdAnimationCanvas.nativeElement.height=t,this.canvasSize=[this.holdAnimationCanvas.nativeElement.width,this.holdAnimationCanvas.nativeElement.height],this.ctx){var e=this.canvasSize[0]<this.canvasSize[1]?0:1;this.ctx.font=this.relToAbs(this.fontSize,e)*this.drawScale+"px "+this.fontStyle,this.setupObjects(),this.createObjects()}},t.prototype.resetState=function(){this.currentProgress=0,this.finishedFilled=!1},t.prototype.setupObjects=function(){var t=this;this.screenObjects={},this.screenObjects.backgroundCircle={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.outerRadius,0)*this.drawScale,f:1*r,shape:"arc",renderType:function(){t.jsuiEngine.canvasContext.fill(),t.jsuiEngine.canvasContext.stroke()},render:function(e){t.jsuiEngine.drawArc(e.x,e.y,e.r,null,e.f,e.renderType,t.jsuiEngine.canvasContext,{fillStyle:t.backgroundFill,strokeStyle:t.backgroundBorderColor,lineWidth:t.relToAbs(t.outerRadiusLineWidth,0)*t.drawScale})},visible:!0},this.screenObjects.unfilledBackground={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.innerRadiusUnfilled,0)*this.drawScale,f:1*r,shape:"arc",render:function(e){t.jsuiEngine.drawArc(e.x,e.y,e.r,null,e.f,null,t.jsuiEngine.canvasContext,{strokeStyle:t.unfilledBarColor,lineWidth:t.relToAbs(t.unfilledBarWidth,0)*t.drawScale})},visible:!0},this.screenObjects.progressBarCircle={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),r:this.relToAbs(this.innerRadiusProgress,0)*this.drawScale,s:this.arcAngleOffset*r,f:this.arcAngleOffset*r,shape:"arc",render:function(e){var i="#FFFFFF";if(t.innerRadiusProgressColor.length>3){var n=255,o=18,l=14;n=255-n*t.currentProgress,o=255*t.currentProgress,n=Math.min(Math.max(n,0),255),o=Math.min(Math.max(o,0),255),l=Math.min(Math.max(l,0),255),i="#"+t.toHex(Math.round(n))+t.toHex(Math.round(o))+t.toHex(Math.round(l))}else i=t.innerRadiusProgressColor;t.jsuiEngine.drawArc(e.x,e.y,e.r,e.s,e.f,null,t.jsuiEngine.canvasContext,{strokeStyle:i,lineWidth:t.relToAbs(t.progressBarWidth,0)*t.drawScale})},visible:!0},this.screenObjects.txtHold={x:this.relToAbs(this.circleX,0),y:this.relToAbs(this.circleY,1),text:this.holdText,shape:"text",render:function(e){var i=t.canvasSize[0]<t.canvasSize[1]?0:1,n=[t.ctx.measureText(e.text).width/2,t.relToAbs(t.fontSize,i)*t.drawScale/2];t.jsuiEngine.drawText(e.x-n[0],e.y-n[1],e.text,e,null,t.jsuiEngine.canvasContext,{fillStyle:t.holdTextColor})},visible:!0}},t.prototype.createObjects=function(){this.jsuiEngine.canvasObjects=[],this.jsuiEngine.canvasObjects.push(this.screenObjects.backgroundCircle),this.jsuiEngine.canvasObjects.push(this.screenObjects.unfilledBackground),this.jsuiEngine.canvasObjects.push(this.screenObjects.progressBarCircle),this.jsuiEngine.canvasObjects.push(this.screenObjects.txtHold)},t.prototype.fillProgress=function(){this.stopAnimationRunning=!1,this.directionForward=!0,this.updateCircleProgress()},t.prototype.unfillProgress=function(){this.stopAnimationRunning=!1,this.directionForward=!1,this.updateCircleProgress()},t.prototype.showAnimation=function(){return!this.stopAnimationRunning||!(!this.showAfterFinish||!this.finishedFilled)},t.prototype.toHex=function(t){return("0"+Number(t).toString(16)).slice(-2).toUpperCase()},t.prototype.relToAbs=function(t,e){return t*this.canvasSize[e]},t}();n([l.Input(),o("design:type",Number)],a.prototype,"drawScale",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"circleX",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"circleY",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"innerRadiusProgress",void 0),n([l.Input(),o("design:type",String)],a.prototype,"innerRadiusProgressColor",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"progressBarWidth",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"arcAngleOffset",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"innerRadiusUnfilled",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"unfilledBarWidth",void 0),n([l.Input(),o("design:type",String)],a.prototype,"unfilledBarColor",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"outerRadius",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"outerRadiusLineWidth",void 0),n([l.Input(),o("design:type",String)],a.prototype,"backgroundFill",void 0),n([l.Input(),o("design:type",String)],a.prototype,"backgroundBorderColor",void 0),n([l.Input(),o("design:type",String)],a.prototype,"holdText",void 0),n([l.Input(),o("design:type",String)],a.prototype,"holdTextColor",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"fontSize",void 0),n([l.Input(),o("design:type",String)],a.prototype,"fontStyle",void 0),n([l.Input(),o("design:type",Number)],a.prototype,"fillRate",void 0),n([l.Input(),o("design:type",Object)],a.prototype,"showAfterFinish",void 0),n([l.Output(),o("design:type",l.EventEmitter)],a.prototype,"animationFinished",void 0),n([l.ViewChild("holdAnimationCanvas"),o("design:type",l.ElementRef)],a.prototype,"holdAnimationCanvas",void 0),n([l.ViewChild("animationContainer"),o("design:type",l.ElementRef)],a.prototype,"animationContainer",void 0),a=n([l.Component({selector:"hold-animation",template:i(6),styles:[i(5)]}),o("design:paramtypes",[])],a),e.HoldAnimationComponent=a},function(e,i){e.exports=t},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(0);e.HoldAnimationComponent=n.HoldAnimationComponent;var o=i(4);e.HoldAnimationModule=o.HoldAnimationModule},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(2);e.HoldAnimationComponent=n.HoldAnimationComponent,e.HoldAnimationModule=n.HoldAnimationModule},function(t,e,i){"use strict";var n=this&&this.__decorate||function(t,e,i,n){var o,l=arguments.length,s=l<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=(l<3?o(s):l>3?o(e,i,s):o(e,i))||s);return l>3&&s&&Object.defineProperty(e,i,s),s};Object.defineProperty(e,"__esModule",{value:!0});var o=i(1),l=i(13),s=i(0),r=a=function(){function t(){}return t.forRoot=function(){return{ngModule:a}},t.forChild=function(){return{ngModule:a}},t}();r=a=n([o.NgModule({imports:[l.CommonModule],declarations:[s.HoldAnimationComponent],exports:[s.HoldAnimationComponent]})],r),e.HoldAnimationModule=r;var a},function(t,e){t.exports=".animationContainer {\r\n    background-color: rgba(0, 0, 0, 0);\r\n    height: 100%;\r\n    width: 100%;\r\n    text-align: center;\r\n    z-index: 99999999;\r\n    pointer-events: none;\r\n    position: absolute;\r\n    margin: 0 auto;\r\n    vertical-align: middle;\r\n}\r\n\r\n.animation {\r\n    margin: 0 auto;\r\n    display: inline-block;\r\n    position: relative;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    border-style: none;\r\n}\r\n\r\n.fadeOut {\r\n    opacity: 0;\r\n    transition: .25s ease-in-out all;\r\n}\r\n\r\n.startHidden {\r\n    display: inline-block;\r\n}\r\n\r\n:host {\r\n    height: 14vw;\r\n    width: 25vw;\r\n    display: block;\r\n    position: absolute;\r\n    margin: 0 auto;\r\n}\r\n"},function(t,e){t.exports='<div #animationContainer class="animationContainer" [ngClass]="{\'fadeOut\': !showAnimation() }" [hidden]="firstTimeLoaded">\r\n  <canvas #holdAnimationCanvas class="animation">\r\n    Your browser does not support the HTML5 canvas tag.\r\n  </canvas>\r\n</div>\r\n'},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(8);e.JSUIEngine=n.JSUIEngine,e.ObjectModel=n.ObjectModel,e.StyleModel=n.StyleModel},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(9);e.JSUIEngine=n.JSUIEngine;var o=i(10);e.ObjectModel=o.ObjectModel;var l=i(11);e.StyleModel=l.StyleModel},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=i(12),o=function(){function t(){this.canvasObjects=[],this.jsuiEngine=new n}return t.prototype.debug=function(){var t=this;return{_version:function(){return t.jsuiEngine.debug._version},_wrapperVersion:function(){return"1.20170405.1"},setLevel:this.jsuiEngine.debug.setLevel,getLevel:this.jsuiEngine.debug.getLevel,toggle:this.jsuiEngine.debug.toggle,getToggleConst:this.jsuiEngine.debug.getToggleConst}},t.prototype.setupCanvas=function(t,e,i){return e=e||this.canvasObjects,this.canvasObject=t,this.canvasContext=this.jsuiEngine.setupCanvas(this.canvasObject,e,i),this.canvasContext},t.prototype.renderObjects=function(t){return t=t||this.canvasObjects,this.jsuiEngine.renderObjects(t)},t.prototype.drawRect=function(t,e,i,n,o,l,s){this.jsuiEngine.drawRect(t,e,i,n,o,l,s)},t.prototype.drawText=function(t,e,i,n,o,l,s){this.jsuiEngine.drawText(t,e,i,n,o,l,s)},t.prototype.drawArc=function(t,e,i,n,o,l,s,r){void 0===n&&(n=0),void 0===o&&(o=4*Math.PI),this.jsuiEngine.drawArc(t,e,i,n,o,l,s,r)},t.prototype.drawLine=function(t,e,i,n,o,l){this.jsuiEngine.drawLine(t,e,i,n,o,l)},t.prototype.drawPolygon=function(t,e,i,n,o){this.jsuiEngine.drawPolygon(t,e,i,n,o)},t.prototype.drawImage=function(t,e,i,n,o,l,s,r,a,d){this.jsuiEngine.drawImage(t,e,i,n,o,l,s,r,a,d)},t.prototype.clearCanvas=function(t,e,i){this.jsuiEngine.canvasObjects=this.canvasObjects,this.jsuiEngine.drawImage(t,e,i)},t.prototype.refreshScreen=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.canvasObjects=this.canvasObjects,this.jsuiEngine.refreshScreen(t,e,i)},t.prototype.mouseEventHandler=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.mouseEventHandler(t,e,i)},t.prototype.checkMouseCollision=function(t,e,i){i=i||this.canvasObjects,this.jsuiEngine.mouseEventHandler(t,e,i)},t}();e.JSUIEngine=o},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(){}return t}();e.ObjectModel=n},function(t,e,i){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var n=function(){function t(){}return t}();e.StyleModel=n},function(t,e,i){var n=function(){defaultBackgroundObject={backgroundColor:"#000000"};var t=0;this.defaultColor="#000000",this.defaultLineWidth="1",this.canvasContext=null,this.canvasObject=null,this.canvasObjects=[],Math.TAU=2*Math.PI,this.debug={_version:"1.20170407.6",setLevel:function(e){return t=e,!0},getLevel:function(){return t},toggle:function(e){getToggleConst[e]>-1&&(t=t&getToggleConst[e]?t-getToggleConst[e]:t+getToggleConst[e])},getToggleConst:{setupCanvas:1,renderObjects:2,drawRect:4,drawText:8,drawArc:16,drawLine:32,drawPolygon:64,drawImage:128,clearCanvas:256,refreshScreen:512,mouseEventHandler:1024,checkMouseCollision:2048}},this.setupCanvas=function(e,i,n){return i=void 0===i||null==i?this.canvasObjects:i,n&&(defaultBackgroundObject=n),this.canvasObject=e,i=[],i.push(),this.canvasObjects=i,this.canvasContext=e.getContext("2d"),1&t&&(console.log("[1]: Debug Mode is set to: ",t),console.log("[1]: setupCanvas(objCanvas, objectList): ",e,i)),this.canvasContext},this.renderObjects=function(e){e=void 0===e||null==e?this.canvasObjects:e;for(canvasObject in e)void 0!==e[canvasObject].visible&&null!=e[canvasObject].visible&&0!=e[canvasObject].visible&&e[canvasObject].render(e[canvasObject]);return 2&t&&console.log("[2]: renderObjects(objectList): ",e),!0},this.drawRect=function(e,i,n,o,l,s,r){s=void 0===s||null==s?this.canvasContext:s,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o||null==o||""==o?0:o,originalFillStyle=s.fillStyle,originalStrokeStyle=s.strokeStyle,void 0!==r&&null!=r&&(r.fillStyle=void 0===r.fillStyle?this.defaultColor:r.fillStyle,r.strokeStyle=void 0===r.strokeStyle?this.defaultColor:r.strokeStyle,r.lineWidth=void 0===r.lineWidth?this.defaultLineWidth:r.lineWidth),l=void 0===l||null==l?function(){s.stroke()}:l,void 0!==r&&null!=r&&(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,s.lineWidth=void 0===r.lineWidth||null==r.lineWidth?s.lineWidth:r.lineWidth),s.beginPath(),s.rect(e,i,n,o),l(),s.closePath(),s.fillStyle=originalFillStyle,s.strokeStyle=originalStrokeStyle,4&t&&console.log("[4]: drawRect(x, y, w, h, renderType, context, style): ",e,i,n,o,l,s,r)},this.drawText=function(e,i,n,o,l,s,r){s=void 0===s||null==s?this.canvasContext:s,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,o.w=void 0===o.w||null==o.w||""==o.w?s.measureText(n).width:o.w,o.h=void 0===o.h||null==o.h||""==o.h?s.measureText(n).height:o.h,originalFillStyle=s.fillStyle,originalStrokeStyle=s.strokeStyle,void 0!==r&&null!=r?(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,r.textBaseline=void 0===r.textBaseline?"hanging":r.textBaseline,r.font=void 0===r.font?"":r.font,r.maxWidth=void 0===r.maxWidth?null:r.maxWidth):r={},l=void 0===l||null==l?function(t,e,i,n){s.fillText(i,t,e)}:l,void 0!==r&&null!=r&&(s.fillStyle=void 0===r.fillStyle||null==r.fillStyle?s.fillStyle:r.fillStyle,s.strokeStyle=void 0===r.strokeStyle||null==r.strokeStyle?s.strokeStyle:r.strokeStyle,s.textBaseline=void 0===r.textBaseline?s.textBaseline:r.textBaseline,s.font=void 0===r.font?s.font:r.font,r.maxWidth=void 0===r.maxWidth?s.maxWidth:r.maxWidth),s.beginPath(),l(e,i,n,r.maxWidth),s.closePath(),s.fillStyle=originalFillStyle,s.strokeStyle=originalStrokeStyle,8&t&&console.log("[8]: drawText(x, y, text, renderText, context, style): ",e,i,n,l,s,r)},this.drawArc=function(e,i,n,o,l,s,r,a){r=void 0===r||null==r?this.canvasContext:r,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,o=void 0===o||null==o||""==o?0:o,n=void 0===n||null==n||""==n?0:n,l=void 0===l||null==l||""==l?2*Math.TAU:l,originalFillStyle=r.fillStyle,originalStrokeStyle=r.strokeStyle,void 0!==a&&null!=a&&(a.fillStyle=void 0===a.fillStyle?this.defaultColor:a.fillStyle,a.strokeStyle=void 0===a.strokeStyle?this.defaultColor:a.strokeStyle,a.lineWidth=void 0===a.lineWidth?this.defaultLineWidth:a.lineWidth),s=void 0===s||null==s?function(){r.stroke()}:s,void 0!==a&&null!=a&&(r.fillStyle=void 0===a.fillStyle||null==a.fillStyle?r.fillStyle:a.fillStyle,r.strokeStyle=void 0===a.strokeStyle||null==a.strokeStyle?r.strokeStyle:a.strokeStyle,r.lineWidth=void 0===a.lineWidth||null==a.lineWidth?r.lineWidth:a.lineWidth),r.beginPath(),r.arc(e,i,n,o,l),s(),r.closePath(),r.fillStyle=originalFillStyle,r.strokeStyle=originalStrokeStyle,16&t&&console.log("[16]: drawArc(x, y, r, s, f, renderType, context, style): ",e,i,n,o,l,s,r,a)},this.drawLine=function(e,i,n,o,l,s){l=void 0===l||null==l?this.canvasContext:l,e=void 0===e||null==e||""==e?0:e,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o||null==o||""==o?0:o,originalFillStyle=l.fillStyle,originalStrokeStyle=l.strokeStyle,void 0!==s&&null!=s&&(s.strokeStyle=void 0===s.strokeStyle?this.defaultColor:s.strokeStyle,s.lineWidth=void 0===s.lineWidth?this.defaultLineWidth:s.lineWidth),void 0!==s&&null!=s&&(l.strokeStyle=void 0===s.strokeStyle||null==s.strokeStyle?l.strokeStyle:s.strokeStyle,l.lineWidth=void 0===s.lineWidth||null==s.lineWidth?l.lineWidth:s.lineWidth),l.beginPath(),l.moveTo(e,i),l.lineTo(n,o),l.stroke(),l.closePath(),l.fillStyle=originalFillStyle,l.strokeStyle=originalStrokeStyle,32&t&&console.log("[32]: drawLine(x1, y1, x2, y2, context, style): ",e,i,n,o,l,s)},this.drawPolygon=function(i,n,o,l,s){if(l=void 0===l||null==l?this.canvasContext:l,n=void 0===n||null==n||""==n||n,originalFillStyle=l.fillStyle,originalStrokeStyle=l.strokeStyle,void 0!==s&&null!=s&&(s.fillStyle=void 0===s.fillStyle?this.defaultColor:s.fillStyle,s.strokeStyle=void 0===s.strokeStyle?this.defaultColor:s.strokeStyle,s.lineWidth=void 0===s.lineWidth?this.defaultLineWidth:s.lineWidth),o=void 0===o||null==o?function(){l.stroke()}:o,void 0!==s&&null!=s&&(l.fillStyle=void 0===s.fillStyle||null==s.fillStyle?l.fillStyle:s.fillStyle,l.strokeStyle=void 0===s.strokeStyle||null==s.strokeStyle?l.strokeStyle:s.strokeStyle,l.lineWidth=void 0===s.lineWidth||null==s.lineWidth?l.lineWidth:s.lineWidth),n&&(i=e(i)),l.beginPath(),i.length>0){l.moveTo(i[0][0],i[0][1]);for(var r=1;r<i.length;r++)l.lineTo(i[r][0],i[r][1])}l.closePath(),o(),l.fillStyle=originalFillStyle,l.strokeStyle=originalStrokeStyle,64&t&&console.log("[64]: drawPolygon(polygonPoints, autoArrange, renderType, context, style): ",i,n,o,l,s)},this.drawImage=function(e,i,n,o,l,s,r,a,d,c){c=void 0===c||null==c?this.canvasContext:c,i=void 0===i||null==i||""==i?0:i,n=void 0===n||null==n||""==n?0:n,o=void 0===o?e.width:o,l=void 0===l?e.height:l,s=void 0===l?null:s,r=void 0===l?null:r,a=void 0===l?null:a,d=void 0===l?null:d,originalFillStyle=c.fillStyle,e.objImage&&(e.w=e.w<0?e.objImage.width:e.w,e.h=e.h<0?e.objImage.height:e.h,c.beginPath(),null==s||null==r||null==a||null==d||0==s||0==r||0==a||0==d?o<0||l<0?c.drawImage(e.objImage,i,n):c.drawImage(e.objImage,i,n,o,l):c.drawImage(e.objImage,s,r,a,d,i,n,o,l),c.closePath(),e.onload=function(){e.hasLoaded=!0,e.w=e.w<0?e.objImage.width:e.w,e.h=e.h<0?e.objImage.height:e.h,c.beginPath(),null==s||null==r||null==a||null==d||0==s||0==r||0==a||0==d?o<0||l<0?c.drawImage(e.objImage,i,n):c.drawImage(e.objImage,i,n,o,l):c.drawImage(e.objImage,s,r,a,d,i,n,o,l),c.closePath()}),c.fillStyle=originalFillStyle,128&t&&console.log("[128]: drawImage(srcImage, x, y, w, h, sx, sy, sw, sh, context): ",e,i,n,o,l,s,r,a,d,c)},this.clearCanvas=function(e,i,n){i=void 0===i||null==i?this.canvasContext:i,n=void 0===n||null==n||n,originalFillStyle=i.fillStyle,e=void 0!==defaultBackgroundObject&&null!=defaultBackgroundObject?void 0===e||null==e?defaultBackgroundObject.backgroundColor:e:void 0===e||null==e?"#FFFFFF":e,n?i.clearRect(0,0,this.canvasObject.width,this.canvasObject.height):this.drawRect(0,0,this.canvasObject.width,this.canvasObject.height,function(){i.fill()},i,{fillStyle:e}),i.fillStyle=originalFillStyle,256&t&&console.log("[256]: clearCanvas(backgroundColor, context, transparentBackground): ",e,i,n)},this.refreshScreen=function(e,i,n){i=void 0===i||null==i?this.canvasContext:i,n=void 0===n||null==n?this.canvasObjects:n,this.clearCanvas(null,i,e),this.renderObjects(n),512&t&&console.log("[512]: refreshScreen(transparentBackground, context, objectList): ",e,i,n)},this.mouseEventHandler=function(e,i,n){n=void 0===n||null==n?this.canvasObjects:n;triggedObjectList=this.checkMouseCollision(e.offsetX,e.offsetY);for(var o in triggedObjectList)null!=triggedObjectList[o]&&("Click"==i?void 0!==triggedObjectList[o].clickEvent&&null!=triggedObjectList[o].clickEvent&&(void 0!==triggedObjectList[o].enabled&&null!=triggedObjectList[o].enabled?1==triggedObjectList[o].enabled&&triggedObjectList[o].clickEvent(e.offsetX,e.offsetY,triggedObjectList[o]):triggedObjectList[o].clickEvent(e.offsetX,e.offsetY,triggedObjectList[o])):"Move"==i&&void 0!==triggedObjectList[o].moveEvent&&null!=triggedObjectList[o].moveEvent&&(void 0!==triggedObjectList[o].enabled&&null!=triggedObjectList[o].enabled?1==triggedObjectList[o].enabled&&triggedObjectList[o].moveEvent(e.offsetX,e.offsetY,triggedObjectList[o]):triggedObjectList[o].moveEvent(e.offsetX,e.offsetY,triggedObjectList[o])));1024&t&&console.log("[1024]: mouseEventHandler(e, eventType, objectList): ",e,i,n)},this.checkMouseCollision=function(e,i,n){n=void 0===n||null==n?this.canvasObjects:n,clickedObjects=[];for(var o in n)if(null!=n[o]&&void 0!==typeof n[o]&&null!=n[o].shape&&void 0!==typeof n[o].shape)if("rect"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("arc"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].r&&null!=n[o].r&&Math.sqrt((e-n[o].x)*(e-n[o].x)+(i-n[o].y)*(i-n[o].y))<n[o].r&&clickedObjects.push(n[o]);else if("image"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("text"==n[o].shape)void 0!==n[o].x&&null!=n[o].x&&void 0!==n[o].w&&null!=n[o].w&&void 0!==n[o].y&&null!=n[o].y&&void 0!==n[o].h&&null!=n[o].h&&n[o].x<=e&&n[o].x+n[o].w>=e&&n[o].y<=i&&n[o].y+n[o].h>=i&&clickedObjects.push(n[o]);else if("polygon"==n[o].shape){for(var l=n[o].coordinates[0],s=!1,r=0,a=l.length-1;r<l.length;a=r++){var d=l[r][0],c=l[r][1],u=l[a][0],h=l[a][1],g=c>i!=h>i&&e<(u-d)*(i-c)/(h-c)+d;g&&(s=!s)}s&&clickedObjects.push(n[o])}return 2048&t&&console.log("[2048]: checkMouseCollision(mouseX, mouseY, objectList): ",e,i,n),clickedObjects};var e=function(t){t=t.slice(0);for(var e=function(t){for(var e=0,i=0,n=0;n<t.length;n++)e+=t[n][0],i+=t[n][1];return[e/t.length,i/t.length]}(t),i=0;i<t.length;i++)t[i][2]=Math.atan2(t[i][0]-e[0],t[i][1]-e[1]);t=t.sort(function(t,e){return t[2]-e[2]});var n=[];if(t.forEach(function(t){n.indexOf(t)<0&&n.push(t)}),n.length>0){n[n.length-1][0]===n[0][0]&&n[n.length-1][1]===n[0][1]||n.push([n[0][0],n[0][1]]);for(var o=0;o<n.length;o++)n[o]=[n[o][0],n[o][1]]}return n}};t.exports=n},function(t,i){t.exports=e}])});

dist/lib/hold-animation.component.d.ts

@@ -7,2 +7,3 @@ import { OnInit, ElementRef, EventEmitter, OnDestroy } from "@angular/core";
     innerRadiusProgress: number;
+    innerRadiusProgressColor: string;
     progressBarWidth: number;
@@ -9,0 +10,0 @@ arcAngleOffset: number;

dist/lib/hold-animation.component.js

@@ -12,2 +12,3 @@ "use strict";
         this.innerRadiusProgress = 0.40; // Radius of progress circles
+        this.innerRadiusProgressColor = ""; // Color of progress bar
         this.progressBarWidth = 0.08; // Line width of progress bar.
@@ -192,15 +193,20 @@ this.arcAngleOffset = 0.75; // By default, the arc drawing starts at 90 degrees clockwise from the top.
             'render': function (self) {
-                // Dynamic progress bar color
-                var barColorRed = 255; // FF
-                var barColorGreen = 18; // 12
-                var barColorBlue = 14; // 0D
                 var barColorEnd = "#FFFFFF"; // Default, is ignored anyway.
-                // Color manipulation logic
-                barColorRed = (255 - (barColorRed * _this.currentProgress));
-                barColorGreen = (255 * _this.currentProgress);
-                // Ensure sanity
-                barColorRed = Math.min(Math.max(barColorRed, 0), 255);
-                barColorGreen = Math.min(Math.max(barColorGreen, 0), 255);
-                barColorBlue = Math.min(Math.max(barColorBlue, 0), 255);
-                barColorEnd = "#" + _this.toHex(Math.round(barColorRed)) + _this.toHex(Math.round(barColorGreen)) + _this.toHex(Math.round(barColorBlue));
+                if (_this.innerRadiusProgressColor.length > 3) {
+                    // Dynamic progress bar color
+                    var barColorRed = 255; // FF
+                    var barColorGreen = 18; // 12
+                    var barColorBlue = 14; // 0D
+                    // Color manipulation logic
+                    barColorRed = (255 - (barColorRed * _this.currentProgress));
+                    barColorGreen = (255 * _this.currentProgress);
+                    // Ensure sanity
+                    barColorRed = Math.min(Math.max(barColorRed, 0), 255);
+                    barColorGreen = Math.min(Math.max(barColorGreen, 0), 255);
+                    barColorBlue = Math.min(Math.max(barColorBlue, 0), 255);
+                    barColorEnd = "#" + _this.toHex(Math.round(barColorRed)) + _this.toHex(Math.round(barColorGreen)) + _this.toHex(Math.round(barColorBlue));
+                }
+                else {
+                    barColorEnd = _this.innerRadiusProgressColor;
+                }
                 _this.jsuiEngine.drawArc(self.x, self.y, self.r, self.s, self.f, null, _this.jsuiEngine.canvasContext, { 'strokeStyle': barColorEnd, 'lineWidth': _this.relToAbs(_this.progressBarWidth, 0) * _this.drawScale });
@@ -266,4 +272,4 @@ },
                 selector: 'hold-animation',
-                template: require('./hold-animation.view.html'),
-                styles: [require('./hold-animation.style.css').toString()]
+                templateUrl: './hold-animation.view.html',
+                styleUrls: ['./hold-animation.style.css']
             },] },
@@ -278,2 +284,3 @@ ];
     'innerRadiusProgress': [{ type: core_1.Input },],
+    'innerRadiusProgressColor': [{ type: core_1.Input },],
     'progressBarWidth': [{ type: core_1.Input },],
@@ -280,0 +287,0 @@ 'arcAngleOffset': [{ type: core_1.Input },],

dist/lib/hold-animation.component.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"HoldAnimationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hold-animation","template":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"require"},"arguments":["./hold-animation.view.html"]},"styles":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"require"},"arguments":["./hold-animation.style.css"]},"member":"toString"}}]}]}],"members":{"drawScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"progressBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arcAngleOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusUnfilled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadiusLineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundBorderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillRate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAfterFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animationFinished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"holdAnimationCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["holdAnimationCanvas"]}]}],"animationContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["animationContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"animateCommand":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"detectCanvasSize":[{"__symbolic":"method"}],"resetState":[{"__symbolic":"method"}],"setupObjects":[{"__symbolic":"method"}],"createObjects":[{"__symbolic":"method"}],"fillProgress":[{"__symbolic":"method"}],"unfillProgress":[{"__symbolic":"method"}],"showAnimation":[{"__symbolic":"method"}],"toHex":[{"__symbolic":"method"}],"relToAbs":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HoldAnimationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hold-animation","template":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"require"},"arguments":["./hold-animation.view.html"]},"styles":[{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"require"},"arguments":["./hold-animation.style.css"]},"member":"toString"}}]}]}],"members":{"drawScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"progressBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arcAngleOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusUnfilled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadiusLineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundBorderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillRate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAfterFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animationFinished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"holdAnimationCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["holdAnimationCanvas"]}]}],"animationContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["animationContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"animateCommand":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"detectCanvasSize":[{"__symbolic":"method"}],"resetState":[{"__symbolic":"method"}],"setupObjects":[{"__symbolic":"method"}],"createObjects":[{"__symbolic":"method"}],"fillProgress":[{"__symbolic":"method"}],"unfillProgress":[{"__symbolic":"method"}],"showAnimation":[{"__symbolic":"method"}],"toHex":[{"__symbolic":"method"}],"relToAbs":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"HoldAnimationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hold-animation","templateUrl":"./hold-animation.view.html","styleUrls":["./hold-animation.style.css"]}]}],"members":{"drawScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgressColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"progressBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arcAngleOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusUnfilled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadiusLineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundBorderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillRate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAfterFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animationFinished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"holdAnimationCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["holdAnimationCanvas"]}]}],"animationContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["animationContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"animateCommand":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"detectCanvasSize":[{"__symbolic":"method"}],"resetState":[{"__symbolic":"method"}],"setupObjects":[{"__symbolic":"method"}],"createObjects":[{"__symbolic":"method"}],"fillProgress":[{"__symbolic":"method"}],"unfillProgress":[{"__symbolic":"method"}],"showAnimation":[{"__symbolic":"method"}],"toHex":[{"__symbolic":"method"}],"relToAbs":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"HoldAnimationComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"hold-animation","templateUrl":"./hold-animation.view.html","styleUrls":["./hold-animation.style.css"]}]}],"members":{"drawScale":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleX":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"circleY":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgress":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusProgressColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"progressBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"arcAngleOffset":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"innerRadiusUnfilled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"unfilledBarColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadius":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"outerRadiusLineWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundFill":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"backgroundBorderColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"holdTextColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fontStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillRate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"showAfterFinish":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"animationFinished":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"holdAnimationCanvas":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["holdAnimationCanvas"]}]}],"animationContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["animationContainer"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"animateCommand":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterContentInit":[{"__symbolic":"method"}],"detectCanvasSize":[{"__symbolic":"method"}],"resetState":[{"__symbolic":"method"}],"setupObjects":[{"__symbolic":"method"}],"createObjects":[{"__symbolic":"method"}],"fillProgress":[{"__symbolic":"method"}],"unfillProgress":[{"__symbolic":"method"}],"showAnimation":[{"__symbolic":"method"}],"toHex":[{"__symbolic":"method"}],"relToAbs":[{"__symbolic":"method"}]}}}}]

package.json

 {
   "name": "ngx-canvas-hold-animation",
-  "version": "1.20170417.1",
+  "version": "1.20170417.2",
   "description": "Hold Animation for point or touch devices",
@@ -5,0 +5,0 @@ "main": "bundles/ngx-canvas-hold-animation.umd.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

221618

increased by0.81%

Lines of code

1623

increased by1.12%

No dependency changes