@iotize/ionic
Version:
Iotize specific building blocks on top of @ionic/angular.
62 lines • 9.91 kB
JavaScript
import { Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@ionic/angular";
export class TextCardComponent {
options = {
initialValue: '0',
};
title;
subtitle;
template;
unit;
icon;
color = 'dark';
subscription;
set inputStream(stream) {
if (stream) {
this.subscription?.unsubscribe();
this.subscription = stream.subscribe({
next: (value) => {
if (this.template) {
value = this.template.replace('#value#', value);
}
this.value = value;
},
error: (err) => {
this.error = err;
},
});
}
}
value = this.options.initialValue;
error;
constructor() { }
ngOnDestroy() {
this.subscription?.unsubscribe();
}
/** @nocollapse */ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
/** @nocollapse */ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TextCardComponent, selector: "monitoring-text-card", inputs: { options: "options", title: "title", subtitle: "subtitle", template: "template", unit: "unit", icon: "icon", color: "color", inputStream: "inputStream" }, ngImport: i0, template: "<ion-card>\n <ion-item *ngIf=\"title || icon\" lines=\"full\" [color]=\"color\">\n <ion-icon *ngIf=\"icon\" name=\"{{ icon }}\" slot=\"start\"></ion-icon>\n <ion-label *ngIf=\"title\">{{ title }}</ion-label>\n <ion-icon *ngIf=\"icon\" slot=\"end\"></ion-icon>\n </ion-item>\n <ion-card-content>\n <span class=\"variable-value\" *ngIf=\"value\">{{ value }}</span>\n <br *ngIf=\"unit\" />\n <span *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n </ion-card-content>\n <ion-card-content *ngIf=\"error\">\n {{ error }}\n </ion-card-content>\n <ion-card-content *ngIf=\"subtitle\" class=\"text-center\">\n <ion-text class=\"description\">{{ subtitle }}</ion-text>\n </ion-card-content>\n</ion-card>\n", styles: [".variable-value{font-size:1.4em;font-weight:700}ion-card,ion-card ion-item,ion-card-subtitle,ion-item ion-card-subtitle{text-align:center}.description{font-size:.9em;color:#777;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IonCard, selector: "ion-card", inputs: ["button", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonCardContent, selector: "ion-card-content", inputs: ["mode"] }, { kind: "component", type: i2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2.IonItem, selector: "ion-item", inputs: ["button", "color", "detail", "detailIcon", "disabled", "download", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "target", "type"] }, { kind: "component", type: i2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2.IonText, selector: "ion-text", inputs: ["color", "mode"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextCardComponent, decorators: [{
type: Component,
args: [{ selector: 'monitoring-text-card', template: "<ion-card>\n <ion-item *ngIf=\"title || icon\" lines=\"full\" [color]=\"color\">\n <ion-icon *ngIf=\"icon\" name=\"{{ icon }}\" slot=\"start\"></ion-icon>\n <ion-label *ngIf=\"title\">{{ title }}</ion-label>\n <ion-icon *ngIf=\"icon\" slot=\"end\"></ion-icon>\n </ion-item>\n <ion-card-content>\n <span class=\"variable-value\" *ngIf=\"value\">{{ value }}</span>\n <br *ngIf=\"unit\" />\n <span *ngIf=\"unit\" class=\"unit\">{{ unit }}</span>\n </ion-card-content>\n <ion-card-content *ngIf=\"error\">\n {{ error }}\n </ion-card-content>\n <ion-card-content *ngIf=\"subtitle\" class=\"text-center\">\n <ion-text class=\"description\">{{ subtitle }}</ion-text>\n </ion-card-content>\n</ion-card>\n", styles: [".variable-value{font-size:1.4em;font-weight:700}ion-card,ion-card ion-item,ion-card-subtitle,ion-item ion-card-subtitle{text-align:center}.description{font-size:.9em;color:#777;text-align:center}\n"] }]
}], ctorParameters: () => [], propDecorators: { options: [{
type: Input
}], title: [{
type: Input
}], subtitle: [{
type: Input
}], template: [{
type: Input
}], unit: [{
type: Input
}], icon: [{
type: Input
}], color: [{
type: Input
}], inputStream: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lvdGl6ZS1pb25pYy9tb25pdG9yaW5nL3NyYy9saWIvdWktY29tcG9uZW50cy90ZXh0LWNhcmQvdGV4dC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2lvdGl6ZS1pb25pYy9tb25pdG9yaW5nL3NyYy9saWIvdWktY29tcG9uZW50cy90ZXh0LWNhcmQvdGV4dC1jYXJkLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFhLE1BQU0sZUFBZSxDQUFDO0FBQzVELE9BQU8sRUFBRSxVQUFVLEVBQWdCLE1BQU0sTUFBTSxDQUFDOzs7O0FBV2hELE1BQU0sT0FBTyxpQkFBaUI7SUFDbkIsT0FBTyxHQUE2QjtRQUMzQyxZQUFZLEVBQUUsR0FBRztLQUNsQixDQUFDO0lBRU8sS0FBSyxDQUFVO0lBRWYsUUFBUSxDQUFVO0lBRWxCLFFBQVEsQ0FBVTtJQUVsQixJQUFJLENBQVU7SUFFZCxJQUFJLENBQVU7SUFFZCxLQUFLLEdBQUcsTUFBTSxDQUFDO0lBRXhCLFlBQVksQ0FBZ0I7SUFFNUIsSUFDSSxXQUFXLENBQUMsTUFBdUI7UUFDckMsSUFBSSxNQUFNLEVBQUUsQ0FBQztZQUNYLElBQUksQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLENBQUM7WUFDakMsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDO2dCQUNuQyxJQUFJLEVBQUUsQ0FBQyxLQUFLLEVBQUUsRUFBRTtvQkFDZCxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQzt3QkFDbEIsS0FBSyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxDQUFDLFNBQVMsRUFBRSxLQUFLLENBQUMsQ0FBQztvQkFDbEQsQ0FBQztvQkFDRCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztnQkFDckIsQ0FBQztnQkFDRCxLQUFLLEVBQUUsQ0FBQyxHQUFHLEVBQUUsRUFBRTtvQkFDYixJQUFJLENBQUMsS0FBSyxHQUFHLEdBQUcsQ0FBQztnQkFDbkIsQ0FBQzthQUNGLENBQUMsQ0FBQztRQUNMLENBQUM7SUFDSCxDQUFDO0lBRUQsS0FBSyxHQUFHLElBQUksQ0FBQyxPQUFPLENBQUMsWUFBWSxDQUFDO0lBRWxDLEtBQUssQ0FBUztJQUVkLGdCQUFlLENBQUM7SUFFaEIsV0FBVztRQUNULElBQUksQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDbkMsQ0FBQzsySEE3Q1UsaUJBQWlCOytHQUFqQixpQkFBaUIsZ09DWjlCLDB0QkFrQkE7OzRGRE5hLGlCQUFpQjtrQkFMN0IsU0FBUzsrQkFDRSxzQkFBc0I7d0RBS3ZCLE9BQU87c0JBQWYsS0FBSztnQkFJRyxLQUFLO3NCQUFiLEtBQUs7Z0JBRUcsUUFBUTtzQkFBaEIsS0FBSztnQkFFRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVHLElBQUk7c0JBQVosS0FBSztnQkFFRyxJQUFJO3NCQUFaLEtBQUs7Z0JBRUcsS0FBSztzQkFBYixLQUFLO2dCQUtGLFdBQVc7c0JBRGQsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE9uRGVzdHJveSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgVGV4dENhcmRDb21wb25lbnRPcHRpb25zIHtcbiAgaW5pdGlhbFZhbHVlOiBhbnk7XG59XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21vbml0b3JpbmctdGV4dC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RleHQtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3RleHQtY2FyZC5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0Q2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIEBJbnB1dCgpIG9wdGlvbnM6IFRleHRDYXJkQ29tcG9uZW50T3B0aW9ucyA9IHtcbiAgICBpbml0aWFsVmFsdWU6ICcwJyxcbiAgfTtcblxuICBASW5wdXQoKSB0aXRsZT86IHN0cmluZztcblxuICBASW5wdXQoKSBzdWJ0aXRsZT86IHN0cmluZztcblxuICBASW5wdXQoKSB0ZW1wbGF0ZT86IHN0cmluZztcblxuICBASW5wdXQoKSB1bml0Pzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpIGljb24/OiBzdHJpbmc7XG5cbiAgQElucHV0KCkgY29sb3IgPSAnZGFyayc7XG5cbiAgc3Vic2NyaXB0aW9uPzogU3Vic2NyaXB0aW9uO1xuXG4gIEBJbnB1dCgpXG4gIHNldCBpbnB1dFN0cmVhbShzdHJlYW06IE9ic2VydmFibGU8YW55Pikge1xuICAgIGlmIChzdHJlYW0pIHtcbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgICAgdGhpcy5zdWJzY3JpcHRpb24gPSBzdHJlYW0uc3Vic2NyaWJlKHtcbiAgICAgICAgbmV4dDogKHZhbHVlKSA9PiB7XG4gICAgICAgICAgaWYgKHRoaXMudGVtcGxhdGUpIHtcbiAgICAgICAgICAgIHZhbHVlID0gdGhpcy50ZW1wbGF0ZS5yZXBsYWNlKCcjdmFsdWUjJywgdmFsdWUpO1xuICAgICAgICAgIH1cbiAgICAgICAgICB0aGlzLnZhbHVlID0gdmFsdWU7XG4gICAgICAgIH0sXG4gICAgICAgIGVycm9yOiAoZXJyKSA9PiB7XG4gICAgICAgICAgdGhpcy5lcnJvciA9IGVycjtcbiAgICAgICAgfSxcbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIHZhbHVlID0gdGhpcy5vcHRpb25zLmluaXRpYWxWYWx1ZTtcblxuICBlcnJvcj86IEVycm9yO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnN1YnNjcmlwdGlvbj8udW5zdWJzY3JpYmUoKTtcbiAgfVxufVxuIiwiPGlvbi1jYXJkPlxuICA8aW9uLWl0ZW0gKm5nSWY9XCJ0aXRsZSB8fCBpY29uXCIgbGluZXM9XCJmdWxsXCIgW2NvbG9yXT1cImNvbG9yXCI+XG4gICAgPGlvbi1pY29uICpuZ0lmPVwiaWNvblwiIG5hbWU9XCJ7eyBpY29uIH19XCIgc2xvdD1cInN0YXJ0XCI+PC9pb24taWNvbj5cbiAgICA8aW9uLWxhYmVsICpuZ0lmPVwidGl0bGVcIj57eyB0aXRsZSB9fTwvaW9uLWxhYmVsPlxuICAgIDxpb24taWNvbiAqbmdJZj1cImljb25cIiBzbG90PVwiZW5kXCI+PC9pb24taWNvbj5cbiAgPC9pb24taXRlbT5cbiAgPGlvbi1jYXJkLWNvbnRlbnQ+XG4gICAgPHNwYW4gY2xhc3M9XCJ2YXJpYWJsZS12YWx1ZVwiICpuZ0lmPVwidmFsdWVcIj57eyB2YWx1ZSB9fTwvc3Bhbj5cbiAgICA8YnIgKm5nSWY9XCJ1bml0XCIgLz5cbiAgICA8c3BhbiAqbmdJZj1cInVuaXRcIiBjbGFzcz1cInVuaXRcIj57eyB1bml0IH19PC9zcGFuPlxuICA8L2lvbi1jYXJkLWNvbnRlbnQ+XG4gIDxpb24tY2FyZC1jb250ZW50ICpuZ0lmPVwiZXJyb3JcIj5cbiAgICB7eyBlcnJvciB9fVxuICA8L2lvbi1jYXJkLWNvbnRlbnQ+XG4gIDxpb24tY2FyZC1jb250ZW50ICpuZ0lmPVwic3VidGl0bGVcIiBjbGFzcz1cInRleHQtY2VudGVyXCI+XG4gICAgPGlvbi10ZXh0IGNsYXNzPVwiZGVzY3JpcHRpb25cIj57eyBzdWJ0aXRsZSB9fTwvaW9uLXRleHQ+XG4gIDwvaW9uLWNhcmQtY29udGVudD5cbjwvaW9uLWNhcmQ+XG4iXX0=