@flxng/circle-timer/flxng-circle-timer.metadata.json

Circle Timer (countdown) component for Angular.

{"__symbolic":"module","version":4,"metadata":{"CircleTimerService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ngInjectableDef":{}}},"StartDate":{"__symbolic":"interface"},"CircleTimerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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    <!-- <img *ngIf=\"completed\"\r\n         src=\"../../../assets/image/check.svg\"\r\n         alt=\"\">\r\n    <span *ngIf=\"!completed\">{{formattedTimeLeft}}</span> -->\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)}"]}]}],"members":{"startDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"duration":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"onComplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":16,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":29,"character":32}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"init":[{"__symbolic":"method"}],"setTimeLeft":[{"__symbolic":"method"}],"start":[{"__symbolic":"method"}],"replay":[{"__symbolic":"method"}],"pause":[{"__symbolic":"method"}],"continue":[{"__symbolic":"method"}],"complete":[{"__symbolic":"method"}],"isTicking":[{"__symbolic":"method"}],"isCompleted":[{"__symbolic":"method"}],"formatTimeLeft":[{"__symbolic":"method"}],"setDasharray":[{"__symbolic":"method"}]}},"CircleTimerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":12}],"declarations":[{"__symbolic":"reference","name":"CircleTimerComponent"}],"exports":[{"__symbolic":"reference","name":"CircleTimerComponent"}]}]}],"members":{}}},"origins":{"CircleTimerService":"./lib/circle-timer.service","StartDate":"./lib/circle-timer.component","CircleTimerComponent":"./lib/circle-timer.component","CircleTimerModule":"./lib/circle-timer.module"},"importAs":"@flxng/circle-timer"}