@crediblefinance/credible-ui
Version:
Credible's standard UI library
65 lines • 11.1 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class CfCircularTimerProgressComponent {
expiry = 0;
theme = 'dark';
timer = 0;
hours = 0;
mins = 0;
secs = 0;
timerId;
timerString = '00:00';
animationClass = {};
constructor() {
}
ngOnChanges(changes) {
if (changes['expiry']) {
const currentValue = changes['expiry'].currentValue;
if (currentValue)
this.expiryChanged();
}
}
ngOnDestroy() {
this.clearInterval();
}
expiryChanged() {
this.clearInterval();
this.timer = (this.expiry - (new Date()).getTime()) / 1000;
this.animationClass['animation-duration'] = this.timer + 's';
this.timerId = setInterval(() => {
if (this.timer > 1)
this.timer--;
this.formatTime();
if (this.timer === 0)
this.clearInterval();
}, 1000);
}
clearInterval() {
if (this.timerId)
clearInterval(this.timerId);
}
formatTime() {
if (this.timer > 60 * 60)
this.hours = this.timer / (60 * 60);
this.mins = Math.floor(this.timer / 60);
this.secs = Math.floor(this.timer - (this.mins * 60));
let timerString = '';
if (this.hours > 0)
timerString = this.hours < 10 ? `0${this.hours}:` : `${this.hours}:`;
timerString += (this.mins < 10 ? `0${this.mins}:` : `${this.mins}:`);
timerString += (this.secs < 10 ? `0${this.secs}` : `${this.secs}`);
this.timerString = timerString;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCircularTimerProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfCircularTimerProgressComponent, selector: "cf-circular-timer-progress", inputs: { expiry: "expiry", theme: "theme" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"outside-circle\" [ngStyle]=\"animationClass\" [ngClass]=\"theme\">\n <div class=\"inside-circle\" [ngClass]=\"theme\">\n <span class=\"blinking-text\">{{ timerString }} </span>\n </div>\n</div>", styles: ["@property --percent{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}.outside-circle{height:100%;width:100%;border-radius:50%;align-items:center;display:grid;animation-name:rotate;animation-timing-function:ease-in-out}.outside-circle.dark{background-image:conic-gradient(black 0deg var(--percent),#cf0 var(--percent))}.outside-circle.light{background-image:conic-gradient(white 0deg var(--percent),#cf0 var(--percent))}.inside-circle{width:80%;height:80%;border-radius:50%;margin:auto;display:grid;align-items:center;text-align:center;font-size:2rem}.inside-circle.dark{background:#17181C;color:#cf0}.inside-circle.light{background:white;color:#cf0}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@keyframes rotate{0%{--percent: 0deg}to{--percent: 360deg}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfCircularTimerProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-circular-timer-progress', template: "<div class=\"outside-circle\" [ngStyle]=\"animationClass\" [ngClass]=\"theme\">\n <div class=\"inside-circle\" [ngClass]=\"theme\">\n <span class=\"blinking-text\">{{ timerString }} </span>\n </div>\n</div>", styles: ["@property --percent{syntax: \"<angle>\"; inherits: false; initial-value: 360deg;}.outside-circle{height:100%;width:100%;border-radius:50%;align-items:center;display:grid;animation-name:rotate;animation-timing-function:ease-in-out}.outside-circle.dark{background-image:conic-gradient(black 0deg var(--percent),#cf0 var(--percent))}.outside-circle.light{background-image:conic-gradient(white 0deg var(--percent),#cf0 var(--percent))}.inside-circle{width:80%;height:80%;border-radius:50%;margin:auto;display:grid;align-items:center;text-align:center;font-size:2rem}.inside-circle.dark{background:#17181C;color:#cf0}.inside-circle.light{background:white;color:#cf0}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}@keyframes rotate{0%{--percent: 0deg}to{--percent: 360deg}}\n"] }]
}], ctorParameters: () => [], propDecorators: { expiry: [{
type: Input
}], theme: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtY2lyY3VsYXItdGltZXItcHJvZ3Jlc3MuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JlZGlibGUtdWkvc3JjL2xpYi9jZi1jaXJjdWxhci10aW1lci1wcm9ncmVzcy9jZi1jaXJjdWxhci10aW1lci1wcm9ncmVzcy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWNpcmN1bGFyLXRpbWVyLXByb2dyZXNzL2NmLWNpcmN1bGFyLXRpbWVyLXByb2dyZXNzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQUUsS0FBSyxFQUNuQixNQUFNLGVBQWUsQ0FBQzs7O0FBT3ZCLE1BQU0sT0FBTyxnQ0FBZ0M7SUFDaEMsTUFBTSxHQUFHLENBQUMsQ0FBQztJQUNYLEtBQUssR0FBVyxNQUFNLENBQUM7SUFFaEMsS0FBSyxHQUFHLENBQUMsQ0FBQztJQUNWLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDVixJQUFJLEdBQUcsQ0FBQyxDQUFDO0lBQ1QsSUFBSSxHQUFHLENBQUMsQ0FBQztJQUNULE9BQU8sQ0FBTTtJQUNiLFdBQVcsR0FBVyxPQUFPLENBQUM7SUFDOUIsY0FBYyxHQUFRLEVBQUUsQ0FBQztJQUV6QjtJQUVBLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDbkIsTUFBTSxZQUFZLEdBQUcsT0FBTyxDQUFDLFFBQVEsQ0FBQyxDQUFDLFlBQVksQ0FBQztZQUVwRCxJQUFJLFlBQVk7Z0JBQ1osSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDO1NBQzVCO0lBQ0wsQ0FBQztJQUVELFdBQVc7UUFDUCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELGFBQWE7UUFDVCxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFFckIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLElBQUksQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLElBQUksRUFBRSxDQUFDLENBQUMsT0FBTyxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUM7UUFFM0QsSUFBSSxDQUFDLGNBQWMsQ0FBQyxvQkFBb0IsQ0FBQyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsR0FBRyxDQUFDO1FBRTdELElBQUksQ0FBQyxPQUFPLEdBQUcsV0FBVyxDQUFDLEdBQUcsRUFBRTtZQUM1QixJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQztnQkFDZCxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFFakIsSUFBSSxDQUFDLFVBQVUsRUFBRSxDQUFDO1lBRWxCLElBQUksSUFBSSxDQUFDLEtBQUssS0FBSyxDQUFDO2dCQUNoQixJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDN0IsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ2IsQ0FBQztJQUVELGFBQWE7UUFDVCxJQUFJLElBQUksQ0FBQyxPQUFPO1lBQ1osYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNwQyxDQUFDO0lBRUQsVUFBVTtRQUNOLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLEdBQUcsRUFBRTtZQUNwQixJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFFeEMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDLENBQUM7UUFFeEMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFFdEQsSUFBSSxXQUFXLEdBQUcsRUFBRSxDQUFDO1FBRXJCLElBQUksSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDO1lBQ2QsV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsS0FBSyxHQUFHLENBQUM7UUFFekUsV0FBVyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1FBQ3JFLFdBQVcsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLEdBQUcsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUVuRSxJQUFJLENBQUMsV0FBVyxHQUFHLFdBQVcsQ0FBQztJQUNuQyxDQUFDO3VHQXJFUSxnQ0FBZ0M7MkZBQWhDLGdDQUFnQyxxSUNUN0MsNk5BSU07OzJGREtPLGdDQUFnQztrQkFMNUMsU0FBUzsrQkFDSSw0QkFBNEI7d0RBSzdCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgT25EZXN0cm95LCBTaW1wbGVDaGFuZ2VzXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2NmLWNpcmN1bGFyLXRpbWVyLXByb2dyZXNzJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vY2YtY2lyY3VsYXItdGltZXItcHJvZ3Jlc3MuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2NmLWNpcmN1bGFyLXRpbWVyLXByb2dyZXNzLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2ZDaXJjdWxhclRpbWVyUHJvZ3Jlc3NDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gICAgQElucHV0KCkgZXhwaXJ5ID0gMDtcbiAgICBASW5wdXQoKSB0aGVtZTogc3RyaW5nID0gJ2RhcmsnO1xuXG4gICAgdGltZXIgPSAwO1xuICAgIGhvdXJzID0gMDtcbiAgICBtaW5zID0gMDtcbiAgICBzZWNzID0gMDtcbiAgICB0aW1lcklkOiBhbnk7XG4gICAgdGltZXJTdHJpbmc6IHN0cmluZyA9ICcwMDowMCc7XG4gICAgYW5pbWF0aW9uQ2xhc3M6IGFueSA9IHt9O1xuXG4gICAgY29uc3RydWN0b3IoKSB7XG5cbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgICAgIGlmIChjaGFuZ2VzWydleHBpcnknXSkge1xuICAgICAgICAgICAgY29uc3QgY3VycmVudFZhbHVlID0gY2hhbmdlc1snZXhwaXJ5J10uY3VycmVudFZhbHVlO1xuXG4gICAgICAgICAgICBpZiAoY3VycmVudFZhbHVlKVxuICAgICAgICAgICAgICAgIHRoaXMuZXhwaXJ5Q2hhbmdlZCgpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgICAgIHRoaXMuY2xlYXJJbnRlcnZhbCgpO1xuICAgIH1cblxuICAgIGV4cGlyeUNoYW5nZWQoKSB7XG4gICAgICAgIHRoaXMuY2xlYXJJbnRlcnZhbCgpO1xuXG4gICAgICAgIHRoaXMudGltZXIgPSAodGhpcy5leHBpcnkgLSAobmV3IERhdGUoKSkuZ2V0VGltZSgpKSAvIDEwMDA7XG5cbiAgICAgICAgdGhpcy5hbmltYXRpb25DbGFzc1snYW5pbWF0aW9uLWR1cmF0aW9uJ10gPSB0aGlzLnRpbWVyICsgJ3MnO1xuXG4gICAgICAgIHRoaXMudGltZXJJZCA9IHNldEludGVydmFsKCgpID0+IHtcbiAgICAgICAgICAgIGlmICh0aGlzLnRpbWVyID4gMSlcbiAgICAgICAgICAgICAgICB0aGlzLnRpbWVyLS07XG5cbiAgICAgICAgICAgIHRoaXMuZm9ybWF0VGltZSgpO1xuXG4gICAgICAgICAgICBpZiAodGhpcy50aW1lciA9PT0gMClcbiAgICAgICAgICAgICAgICB0aGlzLmNsZWFySW50ZXJ2YWwoKTtcbiAgICAgICAgfSwgMTAwMCk7XG4gICAgfVxuXG4gICAgY2xlYXJJbnRlcnZhbCgpIHtcbiAgICAgICAgaWYgKHRoaXMudGltZXJJZClcbiAgICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy50aW1lcklkKTtcbiAgICB9XG5cbiAgICBmb3JtYXRUaW1lKCkge1xuICAgICAgICBpZiAodGhpcy50aW1lciA+IDYwICogNjApXG4gICAgICAgICAgICB0aGlzLmhvdXJzID0gdGhpcy50aW1lciAvICg2MCAqIDYwKTtcblxuICAgICAgICB0aGlzLm1pbnMgPSBNYXRoLmZsb29yKHRoaXMudGltZXIgLyA2MCk7XG5cbiAgICAgICAgdGhpcy5zZWNzID0gTWF0aC5mbG9vcih0aGlzLnRpbWVyIC0gKHRoaXMubWlucyAqIDYwKSk7XG5cbiAgICAgICAgbGV0IHRpbWVyU3RyaW5nID0gJyc7XG5cbiAgICAgICAgaWYgKHRoaXMuaG91cnMgPiAwKVxuICAgICAgICAgICAgdGltZXJTdHJpbmcgPSB0aGlzLmhvdXJzIDwgMTAgPyBgMCR7dGhpcy5ob3Vyc306YCA6IGAke3RoaXMuaG91cnN9OmA7XG5cbiAgICAgICAgdGltZXJTdHJpbmcgKz0gKHRoaXMubWlucyA8IDEwID8gYDAke3RoaXMubWluc306YCA6IGAke3RoaXMubWluc306YCk7XG4gICAgICAgIHRpbWVyU3RyaW5nICs9ICh0aGlzLnNlY3MgPCAxMCA/IGAwJHt0aGlzLnNlY3N9YCA6IGAke3RoaXMuc2Vjc31gKTtcblxuICAgICAgICB0aGlzLnRpbWVyU3RyaW5nID0gdGltZXJTdHJpbmc7XG4gICAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm91dHNpZGUtY2lyY2xlXCIgW25nU3R5bGVdPVwiYW5pbWF0aW9uQ2xhc3NcIiBbbmdDbGFzc109XCJ0aGVtZVwiPlxuICAgIDxkaXYgY2xhc3M9XCJpbnNpZGUtY2lyY2xlXCIgW25nQ2xhc3NdPVwidGhlbWVcIj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJibGlua2luZy10ZXh0XCI+e3sgdGltZXJTdHJpbmcgfX0gPC9zcGFuPlxuICAgIDwvZGl2PlxuPC9kaXY+Il19