@crediblefinance/credible-ui
Version:
Credible's standard UI library
42 lines • 9.18 kB
JavaScript
import { Component, Inject, Optional } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/snack-bar";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/progress-spinner";
export class CfAlertComponent {
dialogRef;
data;
message = '';
type = 'error';
value = 0;
duration = 0;
timerId;
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.message = data.message;
this.duration = data.duration;
this.type = data.type;
}
ngOnInit() {
const stepperDuration = 250;
this.timerId = setInterval(() => {
this.value += stepperDuration;
if (this.value >= this.duration)
clearInterval(this.timerId);
}, stepperDuration);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertComponent, deps: [{ token: i1.MatSnackBarRef }, { token: MAT_SNACK_BAR_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.9", type: CfAlertComponent, selector: "cf-alert", ngImport: i0, template: "<div class=\"cf-alert\">\n <div class=\"error\" *ngIf=\"type === 'error'\">\n <div class=\"message-holder\">\n <i class=\"fa-solid fa-circle-xmark\"></i>\n <span class=\"message\">{{ message }}</span>\n </div>\n <mat-spinner\n mode=\"determinate\"\n diameter=\"20\"\n [value]=\"(value / duration) * 100\"\n ></mat-spinner>\n </div>\n <div class=\"success\" *ngIf=\"type === 'success'\">\n <div class=\"message-holder\">\n <i class=\"fa-solid fa-circle-check\"></i>\n <span class=\"message\">{{ message }}</span>\n </div>\n <mat-spinner\n mode=\"determinate\"\n diameter=\"20\"\n [value]=\"(value / duration) * 100\"\n ></mat-spinner>\n </div>\n</div>\n", styles: [".cf-alert .error{display:flex;justify-content:space-between}.cf-alert .error .message-holder .fa-circle-xmark{color:red;margin-right:.5rem}.cf-alert .error .message-holder .message{color:red;font-weight:700}.cf-alert .success{display:flex;justify-content:space-between}.cf-alert .success .message-holder .fa-circle-check{color:#90ee90;margin-right:.5rem}.cf-alert .success .message-holder .message{color:#90ee90;font-weight:700}::ng-deep .cf-alert .error .mat-progress-spinner circle,.cf-alert .error .mat-spinner circle{stroke:red}::ng-deep .cf-alert .success .mat-progress-spinner circle,.cf-alert .success .mat-spinner circle{stroke:#90ee90}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.9", ngImport: i0, type: CfAlertComponent, decorators: [{
type: Component,
args: [{ selector: 'cf-alert', template: "<div class=\"cf-alert\">\n <div class=\"error\" *ngIf=\"type === 'error'\">\n <div class=\"message-holder\">\n <i class=\"fa-solid fa-circle-xmark\"></i>\n <span class=\"message\">{{ message }}</span>\n </div>\n <mat-spinner\n mode=\"determinate\"\n diameter=\"20\"\n [value]=\"(value / duration) * 100\"\n ></mat-spinner>\n </div>\n <div class=\"success\" *ngIf=\"type === 'success'\">\n <div class=\"message-holder\">\n <i class=\"fa-solid fa-circle-check\"></i>\n <span class=\"message\">{{ message }}</span>\n </div>\n <mat-spinner\n mode=\"determinate\"\n diameter=\"20\"\n [value]=\"(value / duration) * 100\"\n ></mat-spinner>\n </div>\n</div>\n", styles: [".cf-alert .error{display:flex;justify-content:space-between}.cf-alert .error .message-holder .fa-circle-xmark{color:red;margin-right:.5rem}.cf-alert .error .message-holder .message{color:red;font-weight:700}.cf-alert .success{display:flex;justify-content:space-between}.cf-alert .success .message-holder .fa-circle-check{color:#90ee90;margin-right:.5rem}.cf-alert .success .message-holder .message{color:#90ee90;font-weight:700}::ng-deep .cf-alert .error .mat-progress-spinner circle,.cf-alert .error .mat-spinner circle{stroke:red}::ng-deep .cf-alert .success .mat-progress-spinner circle,.cf-alert .success .mat-spinner circle{stroke:#90ee90}\n"] }]
}], ctorParameters: () => [{ type: i1.MatSnackBarRef }, { type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [MAT_SNACK_BAR_DATA]
}] }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2YtYWxlcnQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY3JlZGlibGUtdWkvc3JjL2xpYi9jZi1hbGVydC9jZi1hbGVydC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jcmVkaWJsZS11aS9zcmMvbGliL2NmLWFsZXJ0L2NmLWFsZXJ0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDSCxTQUFTLEVBQUUsTUFBTSxFQUFVLFFBQVEsRUFDdEMsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNhLGtCQUFrQixFQUNyQyxNQUFNLDZCQUE2QixDQUFDOzs7OztBQU9yQyxNQUFNLE9BQU8sZ0JBQWdCO0lBT047SUFBNEY7SUFOL0csT0FBTyxHQUFXLEVBQUUsQ0FBQztJQUNyQixJQUFJLEdBQVcsT0FBTyxDQUFDO0lBQ3ZCLEtBQUssR0FBVyxDQUFDLENBQUM7SUFDbEIsUUFBUSxHQUFXLENBQUMsQ0FBQztJQUNyQixPQUFPLENBQU07SUFFYixZQUFtQixTQUEyQyxFQUFpRCxJQUFTO1FBQXJHLGNBQVMsR0FBVCxTQUFTLENBQWtDO1FBQWlELFNBQUksR0FBSixJQUFJLENBQUs7UUFFcEgsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQztRQUM5QixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLENBQUM7SUFDMUIsQ0FBQztJQUVELFFBQVE7UUFDSixNQUFNLGVBQWUsR0FBRyxHQUFHLENBQUM7UUFFNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxXQUFXLENBQUMsR0FBRyxFQUFFO1lBQzVCLElBQUksQ0FBQyxLQUFLLElBQUksZUFBZSxDQUFDO1lBRTlCLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxJQUFJLENBQUMsUUFBUTtnQkFDM0IsYUFBYSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUNwQyxDQUFDLEVBQUUsZUFBZSxDQUFDLENBQUM7SUFDeEIsQ0FBQzt1R0F2QlEsZ0JBQWdCLGdEQU8yRCxrQkFBa0I7MkZBUDdGLGdCQUFnQixnRENaN0IsZzBCQXdCQTs7MkZEWmEsZ0JBQWdCO2tCQUw1QixTQUFTOytCQUNJLFVBQVU7OzBCQVc2QyxRQUFROzswQkFBSSxNQUFNOzJCQUFDLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ29tcG9uZW50LCBJbmplY3QsIE9uSW5pdCwgT3B0aW9uYWxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIE1hdFNuYWNrQmFyUmVmLCBNQVRfU05BQ0tfQkFSX0RBVEFcbn0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvc25hY2stYmFyJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdjZi1hbGVydCcsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NmLWFsZXJ0LmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9jZi1hbGVydC5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIENmQWxlcnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAgIG1lc3NhZ2U6IHN0cmluZyA9ICcnO1xuICAgIHR5cGU6IHN0cmluZyA9ICdlcnJvcic7XG4gICAgdmFsdWU6IG51bWJlciA9IDA7XG4gICAgZHVyYXRpb246IG51bWJlciA9IDA7XG4gICAgdGltZXJJZDogYW55O1xuXG4gICAgY29uc3RydWN0b3IocHVibGljIGRpYWxvZ1JlZjogTWF0U25hY2tCYXJSZWY8Q2ZBbGVydENvbXBvbmVudD4sIEBPcHRpb25hbCgpIEBJbmplY3QoTUFUX1NOQUNLX0JBUl9EQVRBKSBwdWJsaWMgZGF0YTogYW55XG4gICAgKSB7XG4gICAgICAgIHRoaXMubWVzc2FnZSA9IGRhdGEubWVzc2FnZTtcbiAgICAgICAgdGhpcy5kdXJhdGlvbiA9IGRhdGEuZHVyYXRpb247XG4gICAgICAgIHRoaXMudHlwZSA9IGRhdGEudHlwZTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgY29uc3Qgc3RlcHBlckR1cmF0aW9uID0gMjUwO1xuXG4gICAgICAgIHRoaXMudGltZXJJZCA9IHNldEludGVydmFsKCgpID0+IHtcbiAgICAgICAgICAgIHRoaXMudmFsdWUgKz0gc3RlcHBlckR1cmF0aW9uO1xuXG4gICAgICAgICAgICBpZiAodGhpcy52YWx1ZSA+PSB0aGlzLmR1cmF0aW9uKVxuICAgICAgICAgICAgICAgIGNsZWFySW50ZXJ2YWwodGhpcy50aW1lcklkKTtcbiAgICAgICAgfSwgc3RlcHBlckR1cmF0aW9uKTtcbiAgICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiY2YtYWxlcnRcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZXJyb3JcIiAqbmdJZj1cInR5cGUgPT09ICdlcnJvcidcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1lc3NhZ2UtaG9sZGVyXCI+XG4gICAgICAgICAgICA8aSBjbGFzcz1cImZhLXNvbGlkIGZhLWNpcmNsZS14bWFya1wiPjwvaT5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwibWVzc2FnZVwiPnt7IG1lc3NhZ2UgfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bWF0LXNwaW5uZXJcbiAgICAgICAgICAgIG1vZGU9XCJkZXRlcm1pbmF0ZVwiXG4gICAgICAgICAgICBkaWFtZXRlcj1cIjIwXCJcbiAgICAgICAgICAgIFt2YWx1ZV09XCIodmFsdWUgLyBkdXJhdGlvbikgKiAxMDBcIlxuICAgICAgICA+PC9tYXQtc3Bpbm5lcj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwic3VjY2Vzc1wiICpuZ0lmPVwidHlwZSA9PT0gJ3N1Y2Nlc3MnXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtZXNzYWdlLWhvbGRlclwiPlxuICAgICAgICAgICAgPGkgY2xhc3M9XCJmYS1zb2xpZCBmYS1jaXJjbGUtY2hlY2tcIj48L2k+XG4gICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1lc3NhZ2VcIj57eyBtZXNzYWdlIH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPG1hdC1zcGlubmVyXG4gICAgICAgICAgICBtb2RlPVwiZGV0ZXJtaW5hdGVcIlxuICAgICAgICAgICAgZGlhbWV0ZXI9XCIyMFwiXG4gICAgICAgICAgICBbdmFsdWVdPVwiKHZhbHVlIC8gZHVyYXRpb24pICogMTAwXCJcbiAgICAgICAgPjwvbWF0LXNwaW5uZXI+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==