@flxng/circle-timer/bundles/flxng-circle-timer.umd.min.js

Circle Timer (countdown) component for Angular.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("@flxng/circle-timer",["exports","@angular/core","rxjs","rxjs/operators","@angular/common"],e):e(((t=t||self).flxng=t.flxng||{},t.flxng["circle-timer"]={}),t.ng.core,t.rxjs,t.rxjs.operators,t.ng.common)}(this,(function(t,e,r,i,o){"use strict";var s=function(){function t(){}return t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),n=function(){function t(t){this.ngZone=t,this.duration=0,this.color="#1cbbf8",this.onComplete=new e.EventEmitter,this.destroy$=new r.Subject,this.startTime=0,this.timeLeft=0,this.ticking=!1,this.completed=!1,this.formattedTimeLeft="",this.fullDasharray=283,this.dasharray=this.fullDasharray+" "+this.fullDasharray}return t.prototype.ngOnInit=function(){this.init(this.startDate)},t.prototype.ngOnDestroy=function(){this.destroy$.next(),this.destroy$.complete()},t.prototype.init=function(t){this.setTimeLeft(t),this.formatTimeLeft(),this.setDasharray(),0===this.timeLeft&&(this.completed=!0)},t.prototype.setTimeLeft=function(t){if(this.ticking=!1,this.completed=!1,this.destroy$.next(),!t)return this.timeLeft=this.duration,0;var e=new Date(t).getTime()+this.duration-Date.now();if(e<=0)return this.timeLeft=0,0;var r=e/1e3;return this.timeLeft=1e3*Math.floor(r),r%1},t.prototype.start=function(t,e,o){var s=this;if(void 0===e&&(e=0),void 0===o&&(o=!1),this.ticking)console.log("Cannot start: timer already running.");else{var n=e+1e3*this.setTimeLeft(t);if(this.formatTimeLeft(),this.setDasharray(),0===this.timeLeft)return this.completed=!0,void console.log("Cannot start: timer already completed.");r.timer(n,1e3).pipe(i.takeUntil(this.destroy$)).subscribe((function(t){s.ticking=!0,s.timeLeft-=1e3,s.timeLeft<=0&&(s.timeLeft=0,s.ticking=!1,s.completed=!0,s.onComplete.emit(o),s.destroy$.next()),s.formatTimeLeft(),s.setDasharray()}))}},t.prototype.replay=function(t){this.start(t,1200,!0)},t.prototype.pause=function(){},t.prototype.continue=function(){},t.prototype.complete=function(){this.timeLeft=0,this.ticking=!1,this.completed=!0,this.destroy$.next(),this.formatTimeLeft(),this.setDasharray()},t.prototype.isTicking=function(){return this.ticking},t.prototype.isCompleted=function(){return this.completed},t.prototype.formatTimeLeft=function(){this.timeLeft<=0&&(this.timeLeft=0);var t=Math.floor(this.timeLeft/864e5),e=Math.floor(this.timeLeft%864e5/36e5),r=Math.floor(this.timeLeft%36e5/6e4),i=Math.floor(this.timeLeft%6e4/1e3),o=t<10?"0"+t:""+t,s=e<10?"0"+e:""+e,n=r<10?"0"+r:""+r,a=i<10?"0"+i:""+i;this.formattedTimeLeft=n+":"+a,"00"===s&&"00"===o||(this.formattedTimeLeft=s+":"+this.formattedTimeLeft),"00"!==o&&(this.formattedTimeLeft=o+":"+this.formattedTimeLeft)},t.prototype.setDasharray=function(){var t=this.timeLeft/this.duration,e=t-1/this.duration*(1-t),r=Math.round(e*this.fullDasharray);this.dasharray=r+" "+this.fullDasharray},t.decorators=[{type:e.Component,args:[{selector:"flx-circle-timer",template:'<div class="base-timer">\r\n  <svg class="base-timer-svg"\r\n       viewBox="0 0 100 100"\r\n       xmlns="http://www.w3.org/2000/svg">\r\n    <g class="base-timer-circle">\r\n      <circle [ngClass]="completed ? \'base-timer-completed\' : \'base-timer-stroke\'"\r\n              cx="50"\r\n              cy="50"\r\n              r="45" />\r\n      <path [attr.stroke-dasharray]="dasharray"\r\n            [style.stroke]="color"\r\n            id="remaining-time-stroke"\r\n            d=" M 50, 50\r\n                m -45, 0\r\n                a 45,45 0 1,0 90,0\r\n                a 45,45 0 1,0 -90,0">\r\n      </path>\r\n    </g>\r\n  </svg>\r\n  <span class="time">\r\n    \x3c!-- <img *ngIf="completed"\r\n         src="../../../assets/image/check.svg"\r\n         alt="">\r\n    <span *ngIf="!completed">{{formattedTimeLeft}}</span> --\x3e\r\n    <span>{{formattedTimeLeft}}</span>\r\n  </span>\r\n</div>',styles:[":host .base-timer{position:relative;height:200px;width:200px}:host .base-timer-circle{fill:none;stroke:none}:host .base-timer-stroke{stroke-width:1px;stroke:grey}:host .base-timer-completed{stroke-width:1px;stroke:grey}:host .base-timer .time{position:absolute;width:200px;height:200px;top:0;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;font-size:26px}:host .base-timer .time img{height:80px}:host .base-timer #remaining-time-stroke{stroke-width:2px;-webkit-transform:rotate(90deg);transform:rotate(90deg);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:1s linear;transition:1s linear;stroke:#1cbbf8}:host .base-timer .base-timer-svg{-webkit-transform:scaleX(-1);transform:scaleX(-1)}"]}]}],t.ctorParameters=function(){return[{type:e.NgZone}]},t.propDecorators={startDate:[{type:e.Input}],duration:[{type:e.Input}],color:[{type:e.Input}],onComplete:[{type:e.Output}]},t}();var a=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[o.CommonModule],declarations:[n],exports:[n]}]}],t}();t.CircleTimerComponent=n,t.CircleTimerModule=a,t.CircleTimerService=s,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=flxng-circle-timer.umd.min.js.map