@indice/ng-components
Version:
Indice common components for Angular v12
49 lines • 13.6 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class StatsGridComponent {
constructor() {
this.busy = false;
this.count = 6;
this.loader = ['', '', '', '', '', ''];
this.mode = 'normal';
this.labels = ['Online', 'Offline', 'Faulted'];
this.values = [10, 20, 30];
this.colors = [
'rgb(53, 177, 201, 0.6)',
'rgb(168, 162, 158, 0.2)',
'rgb(233, 96, 96, 0.8)'
];
}
ngOnChanges(changes) {
if (changes.count) {
this.loader = [];
for (let i = 0; i <= this.count; i++) {
this.loader.push('');
}
}
}
isNumber(value) {
return !isNaN(Number(value));
;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StatsGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: StatsGridComponent, selector: "lib-stats-grid", inputs: { busy: "busy", count: "count", mode: "mode", labels: "labels", values: "values", colors: "colors" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"!busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n </div>\n </li>\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div>\n <div *ngIf=\"busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div> ", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: StatsGridComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-stats-grid', template: "<div *ngIf=\"!busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" [style]=\"'border-color:' + colors[i]\">\n <div class=\"text-xs text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-sm md:text-lg text-ellipsis overflow-hidden\">{{values[i]}}</div>\n </div>\n </li>\n <li class=\"col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" [style]=\"'border-color:' + colors[i]\">\n <div *ngIf=\"isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i] | number:'1.0-2':'el'}}</div>\n <div *ngIf=\"!isNumber(values[i])\" class=\"font-medium text-xs lg:text-sm text-ellipsis overflow-hidden\">{{values[i]}}</div>\n <div class=\"text-xs max-w-18 lg:w-auto truncate text-ellipsis overflow-hidden\">{{labels[i]}}</div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div>\n <div *ngIf=\"busy\">\n <ul role=\"list\" class=\"grid gap-1\"\n [class.grid-cols-4]=\"mode==='normal'\"\n [class.grid-flow-col]=\"mode!=='normal'\">\n <ng-container *ngFor=\"let value of values; index as i\">\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode==='normal'\">\n <div class=\"grid-cols-1 border-l-2 px-1\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n <li class=\"animate-pulse col-span-1 flex pb-2\" *ngIf=\"mode!=='normal'\">\n <div class=\"grid-cols-1 border-l-2 pl-1 pr-2\" style=\"border-color:rgb(168, 162, 158, 0.2)\">\n <div class=\"rounded-md bg-slate-400/25 h-3 w-14\"></div>\n <div class=\"rounded-md bg-slate-400/25 mt-2 h-4 w-6\"></div>\n </div>\n </li>\n </ng-container>\n </ul>\n </div> " }]
}], ctorParameters: () => [], propDecorators: { busy: [{
type: Input
}], count: [{
type: Input
}], mode: [{
type: Input
}], labels: [{
type: Input
}], values: [{
type: Input
}], colors: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHMtZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvc3RhdHMtZ3JpZC9zdGF0cy1ncmlkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy9zdGF0cy1ncmlkL3N0YXRzLWdyaWQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQTRCLE1BQU0sZUFBZSxDQUFDOzs7QUFPM0UsTUFBTSxPQUFPLGtCQUFrQjtJQWE3QjtRQVpTLFNBQUksR0FBRyxLQUFLLENBQUM7UUFDYixVQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ1osV0FBTSxHQUFVLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUN2QyxTQUFJLEdBQVcsUUFBUSxDQUFDO1FBQ3hCLFdBQU0sR0FBYSxDQUFDLFFBQVEsRUFBRSxTQUFTLEVBQUUsU0FBUyxDQUFDLENBQUM7UUFDcEQsV0FBTSxHQUFhLENBQUMsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLENBQUMsQ0FBQztRQUNoQyxXQUFNLEdBQWE7WUFDMUIsd0JBQXdCO1lBQ3hCLHlCQUF5QjtZQUN6Qix1QkFBdUI7U0FDeEIsQ0FBQztJQUdGLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDbEIsSUFBSSxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUM7WUFDakIsS0FBSyxJQUFJLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQztnQkFDckMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDdkIsQ0FBQztRQUNILENBQUM7SUFDSCxDQUFDO0lBRU0sUUFBUSxDQUFDLEtBQVU7UUFDeEIsT0FBTyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUFBLENBQUM7SUFDaEMsQ0FBQzs4R0EzQlUsa0JBQWtCO2tHQUFsQixrQkFBa0IseUxDUC9CLG04RUF5Q1U7OzJGRGxDRyxrQkFBa0I7a0JBSjlCLFNBQVM7K0JBQ0UsZ0JBQWdCO3dEQUlqQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uQ2hhbmdlcywgU2ltcGxlQ2hhbmdlcyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1zdGF0cy1ncmlkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3N0YXRzLWdyaWQuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIFN0YXRzR3JpZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uQ2hhbmdlcyB7XG4gIEBJbnB1dCgpIGJ1c3kgPSBmYWxzZTtcbiAgQElucHV0KCkgY291bnQgPSA2O1xuICBwdWJsaWMgbG9hZGVyOiBhbnlbXSA9IFsnJywgJycsICcnLCAnJywgJycsICcnXTtcbiAgQElucHV0KCkgbW9kZTogc3RyaW5nID0gJ25vcm1hbCc7XG4gIEBJbnB1dCgpIGxhYmVsczogc3RyaW5nW10gPSBbJ09ubGluZScsICdPZmZsaW5lJywgJ0ZhdWx0ZWQnXTtcbiAgQElucHV0KCkgdmFsdWVzOiBudW1iZXJbXSA9IFsxMCwgMjAsIDMwXTtcbiAgQElucHV0KCkgY29sb3JzOiBzdHJpbmdbXSA9IFtcbiAgICAncmdiKDUzLCAxNzcsIDIwMSwgMC42KScsXG4gICAgJ3JnYigxNjgsIDE2MiwgMTU4LCAwLjIpJyxcbiAgICAncmdiKDIzMywgOTYsIDk2LCAwLjgpJ1xuICBdO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLmNvdW50KSB7XG4gICAgICB0aGlzLmxvYWRlciA9IFtdO1xuICAgICAgZm9yIChsZXQgaSA9IDA7IGkgPD0gdGhpcy5jb3VudDsgaSsrKSB7XG4gICAgICAgIHRoaXMubG9hZGVyLnB1c2goJycpO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBpc051bWJlcih2YWx1ZTogYW55KTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICFpc05hTihOdW1iZXIodmFsdWUpKTs7XG4gIH1cbn1cbiIsIjxkaXYgKm5nSWY9XCIhYnVzeVwiPlxuICAgIDx1bCByb2xlPVwibGlzdFwiIGNsYXNzPVwiZ3JpZCBnYXAtMVwiXG4gICAgICAgIFtjbGFzcy5ncmlkLWNvbHMtNF09XCJtb2RlPT09J25vcm1hbCdcIlxuICAgICAgICBbY2xhc3MuZ3JpZC1mbG93LWNvbF09XCJtb2RlIT09J25vcm1hbCdcIj5cbiAgICAgIDxuZy1jb250YWluZXIgKm5nRm9yPVwibGV0IHZhbHVlIG9mIHZhbHVlczsgaW5kZXggYXMgaVwiPlxuICAgICAgICA8bGkgY2xhc3M9XCJjb2wtc3Bhbi0xIGZsZXggcGItMlwiICpuZ0lmPVwibW9kZT09PSdub3JtYWwnXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQtY29scy0xIGJvcmRlci1sLTIgcHgtMVwiIFtzdHlsZV09XCInYm9yZGVyLWNvbG9yOicgKyBjb2xvcnNbaV1cIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LXhzIHRleHQtZWxsaXBzaXMgb3ZlcmZsb3ctaGlkZGVuXCI+e3tsYWJlbHNbaV19fTwvZGl2PlxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cImlzTnVtYmVyKHZhbHVlc1tpXSlcIiBjbGFzcz1cImZvbnQtbWVkaXVtIHRleHQtc20gbWQ6dGV4dC1sZyB0ZXh0LWVsbGlwc2lzIG92ZXJmbG93LWhpZGRlblwiPnt7dmFsdWVzW2ldIHwgbnVtYmVyOicxLjAtMic6J2VsJ319PC9kaXY+XG4gICAgICAgICAgICA8ZGl2ICpuZ0lmPVwiIWlzTnVtYmVyKHZhbHVlc1tpXSlcIiBjbGFzcz1cImZvbnQtbWVkaXVtIHRleHQtc20gbWQ6dGV4dC1sZyB0ZXh0LWVsbGlwc2lzIG92ZXJmbG93LWhpZGRlblwiPnt7dmFsdWVzW2ldfX08L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9saT5cbiAgICAgICAgPGxpIGNsYXNzPVwiY29sLXNwYW4tMSBmbGV4IHBiLTJcIiAqbmdJZj1cIm1vZGUhPT0nbm9ybWFsJ1wiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJncmlkLWNvbHMtMSBib3JkZXItbC0yIHBsLTEgcHItMlwiIFtzdHlsZV09XCInYm9yZGVyLWNvbG9yOicgKyBjb2xvcnNbaV1cIj5cbiAgICAgICAgICAgIDxkaXYgKm5nSWY9XCJpc051bWJlcih2YWx1ZXNbaV0pXCIgY2xhc3M9XCJmb250LW1lZGl1bSB0ZXh0LXhzIGxnOnRleHQtc20gdGV4dC1lbGxpcHNpcyBvdmVyZmxvdy1oaWRkZW5cIj57e3ZhbHVlc1tpXSB8IG51bWJlcjonMS4wLTInOidlbCd9fTwvZGl2PlxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cIiFpc051bWJlcih2YWx1ZXNbaV0pXCIgY2xhc3M9XCJmb250LW1lZGl1bSB0ZXh0LXhzIGxnOnRleHQtc20gdGV4dC1lbGxpcHNpcyBvdmVyZmxvdy1oaWRkZW5cIj57e3ZhbHVlc1tpXX19PC9kaXY+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwidGV4dC14cyBtYXgtdy0xOCBsZzp3LWF1dG8gdHJ1bmNhdGUgdGV4dC1lbGxpcHNpcyBvdmVyZmxvdy1oaWRkZW5cIj57e2xhYmVsc1tpXX19PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbGk+XG4gICAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8L3VsPlxuICA8L2Rpdj5cbiAgPGRpdiAqbmdJZj1cImJ1c3lcIj5cbiAgICA8dWwgcm9sZT1cImxpc3RcIiBjbGFzcz1cImdyaWQgZ2FwLTFcIlxuICAgICAgICBbY2xhc3MuZ3JpZC1jb2xzLTRdPVwibW9kZT09PSdub3JtYWwnXCJcbiAgICAgICAgW2NsYXNzLmdyaWQtZmxvdy1jb2xdPVwibW9kZSE9PSdub3JtYWwnXCI+XG4gICAgICA8bmctY29udGFpbmVyICpuZ0Zvcj1cImxldCB2YWx1ZSBvZiB2YWx1ZXM7IGluZGV4IGFzIGlcIj5cbiAgICAgICAgPGxpIGNsYXNzPVwiYW5pbWF0ZS1wdWxzZSBjb2wtc3Bhbi0xIGZsZXggcGItMlwiICpuZ0lmPVwibW9kZT09PSdub3JtYWwnXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQtY29scy0xIGJvcmRlci1sLTIgcHgtMVwiIHN0eWxlPVwiYm9yZGVyLWNvbG9yOnJnYigxNjgsIDE2MiwgMTU4LCAwLjIpXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicm91bmRlZC1tZCBiZy1zbGF0ZS00MDAvMjUgaC0zIHctMTRcIj48L2Rpdj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyb3VuZGVkLW1kIGJnLXNsYXRlLTQwMC8yNSBtdC0yIGgtNCB3LTZcIj48L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9saT5cbiAgICAgICAgPGxpIGNsYXNzPVwiYW5pbWF0ZS1wdWxzZSBjb2wtc3Bhbi0xIGZsZXggcGItMlwiICpuZ0lmPVwibW9kZSE9PSdub3JtYWwnXCI+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQtY29scy0xIGJvcmRlci1sLTIgcGwtMSBwci0yXCIgc3R5bGU9XCJib3JkZXItY29sb3I6cmdiKDE2OCwgMTYyLCAxNTgsIDAuMilcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJyb3VuZGVkLW1kIGJnLXNsYXRlLTQwMC8yNSBoLTMgdy0xNFwiPjwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInJvdW5kZWQtbWQgYmctc2xhdGUtNDAwLzI1IG10LTIgaC00IHctNlwiPjwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2xpPlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC91bD5cbiAgPC9kaXY+ICAiXX0=