@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
52 lines • 10.1 kB
JavaScript
import { Component, Input } from '@angular/core';
import { gettext } from '@c8y/ngx-components';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/common";
export class DatapointTemplatePopoverComponent {
constructor() {
this.attributes = [
{
label: gettext('Fragment'),
key: 'fragment'
},
{
label: gettext('Series'),
key: 'series'
},
{
label: gettext('Unit'),
key: 'unit'
},
{
label: gettext('Range'),
key: 'min'
},
{
label: gettext('Target'),
key: 'target'
},
{
label: gettext('Yellow range'),
labelColor: 'yellow',
key: 'yellowRangeMin'
},
{
label: gettext('Red range'),
labelColor: 'red',
key: 'redRangeMin'
}
];
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointTemplatePopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatapointTemplatePopoverComponent, selector: "c8y-datapoint-template-popover", inputs: { datapoint: "datapoint", attributes: "attributes" }, ngImport: i0, template: "<p class=\"text-medium\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.color\"></i>\n {{ datapoint.label }}\n</p>\n<p>{{ datapoint.description }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n <ng-container *ngFor=\"let attribute of attributes; let i = index\">\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n *ngIf=\"datapoint[attribute.key] !== undefined\"\n >\n <label class=\"small m-b-0 m-r-8\">\n <i *ngIf=\"attribute.labelColor\" c8yIcon=\"square\" [style.color]=\"attribute.labelColor\"></i>\n {{ attribute.label | translate }}\n </label>\n <ng-container [ngSwitch]=\"attribute.key\">\n <span *ngSwitchCase=\"'min'\" class=\"m-l-auto\">\n {{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}\n </span>\n <span *ngSwitchCase=\"'yellowRangeMin'\" class=\"m-l-auto\">\n {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n </span>\n <span *ngSwitchCase=\"'redRangeMin'\" class=\"m-l-auto\">\n {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n </span>\n <span *ngSwitchDefault class=\"m-l-auto\">\n {{ datapoint[attribute.key] }}\n </span>\n </ng-container>\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatapointTemplatePopoverComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-datapoint-template-popover', template: "<p class=\"text-medium\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.color\"></i>\n {{ datapoint.label }}\n</p>\n<p>{{ datapoint.description }}</p>\n\n<ul class=\"list-unstyled small p-t-16\">\n <ng-container *ngFor=\"let attribute of attributes; let i = index\">\n <li\n class=\"p-t-4 p-b-4 d-flex separator-bottom text-nowrap\"\n *ngIf=\"datapoint[attribute.key] !== undefined\"\n >\n <label class=\"small m-b-0 m-r-8\">\n <i *ngIf=\"attribute.labelColor\" c8yIcon=\"square\" [style.color]=\"attribute.labelColor\"></i>\n {{ attribute.label | translate }}\n </label>\n <ng-container [ngSwitch]=\"attribute.key\">\n <span *ngSwitchCase=\"'min'\" class=\"m-l-auto\">\n {{ datapoint['min'] }} \u2014 {{ datapoint['max'] }}\n </span>\n <span *ngSwitchCase=\"'yellowRangeMin'\" class=\"m-l-auto\">\n {{ datapoint['yellowRangeMin'] }} \u2014 {{ datapoint['yellowRangeMax'] }}\n </span>\n <span *ngSwitchCase=\"'redRangeMin'\" class=\"m-l-auto\">\n {{ datapoint['redRangeMin'] }} \u2014 {{ datapoint['redRangeMax'] }}\n </span>\n <span *ngSwitchDefault class=\"m-l-auto\">\n {{ datapoint[attribute.key] }}\n </span>\n </ng-container>\n </li>\n </ng-container>\n</ul>\n" }]
}], propDecorators: { datapoint: [{
type: Input
}], attributes: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YXBvaW50LXRlbXBsYXRlLXBvcG92ZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vZGF0YXBvaW50LXNlbGVjdG9yL2RhdGFwb2ludC10ZW1wbGF0ZS1wb3BvdmVyL2RhdGFwb2ludC10ZW1wbGF0ZS1wb3BvdmVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2RhdGFwb2ludC1zZWxlY3Rvci9kYXRhcG9pbnQtdGVtcGxhdGUtcG9wb3Zlci9kYXRhcG9pbnQtdGVtcGxhdGUtcG9wb3Zlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7Ozs7QUFPOUMsTUFBTSxPQUFPLGlDQUFpQztJQUo5QztRQU1XLGVBQVUsR0FJZDtZQUNIO2dCQUNFLEtBQUssRUFBRSxPQUFPLENBQUMsVUFBVSxDQUFDO2dCQUMxQixHQUFHLEVBQUUsVUFBVTthQUNoQjtZQUNEO2dCQUNFLEtBQUssRUFBRSxPQUFPLENBQUMsUUFBUSxDQUFDO2dCQUN4QixHQUFHLEVBQUUsUUFBUTthQUNkO1lBQ0Q7Z0JBQ0UsS0FBSyxFQUFFLE9BQU8sQ0FBQyxNQUFNLENBQUM7Z0JBQ3RCLEdBQUcsRUFBRSxNQUFNO2FBQ1o7WUFDRDtnQkFDRSxLQUFLLEVBQUUsT0FBTyxDQUFDLE9BQU8sQ0FBQztnQkFDdkIsR0FBRyxFQUFFLEtBQUs7YUFDWDtZQUNEO2dCQUNFLEtBQUssRUFBRSxPQUFPLENBQUMsUUFBUSxDQUFDO2dCQUN4QixHQUFHLEVBQUUsUUFBUTthQUNkO1lBQ0Q7Z0JBQ0UsS0FBSyxFQUFFLE9BQU8sQ0FBQyxjQUFjLENBQUM7Z0JBQzlCLFVBQVUsRUFBRSxRQUFRO2dCQUNwQixHQUFHLEVBQUUsZ0JBQWdCO2FBQ3RCO1lBQ0Q7Z0JBQ0UsS0FBSyxFQUFFLE9BQU8sQ0FBQyxXQUFXLENBQUM7Z0JBQzNCLFVBQVUsRUFBRSxLQUFLO2dCQUNqQixHQUFHLEVBQUUsYUFBYTthQUNuQjtTQUNGLENBQUM7S0FDSDsrR0F0Q1ksaUNBQWlDO21HQUFqQyxpQ0FBaUMsb0lDUjlDLHl5Q0FpQ0E7OzRGRHpCYSxpQ0FBaUM7a0JBSjdDLFNBQVM7K0JBQ0UsZ0NBQWdDOzhCQUlqQyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBnZXR0ZXh0IH0gZnJvbSAnQGM4eS9uZ3gtY29tcG9uZW50cyc7XG5pbXBvcnQgeyBLUElEZXRhaWxzIH0gZnJvbSAnLi4vZGF0YXBvaW50LXNlbGVjdGlvbi5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2M4eS1kYXRhcG9pbnQtdGVtcGxhdGUtcG9wb3ZlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9kYXRhcG9pbnQtdGVtcGxhdGUtcG9wb3Zlci5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgRGF0YXBvaW50VGVtcGxhdGVQb3BvdmVyQ29tcG9uZW50IHtcbiAgQElucHV0KCkgZGF0YXBvaW50OiBLUElEZXRhaWxzO1xuICBASW5wdXQoKSBhdHRyaWJ1dGVzOiBBcnJheTx7XG4gICAgbGFiZWw6IHN0cmluZztcbiAgICBsYWJlbENvbG9yPzogc3RyaW5nO1xuICAgIGtleToga2V5b2YgS1BJRGV0YWlscztcbiAgfT4gPSBbXG4gICAge1xuICAgICAgbGFiZWw6IGdldHRleHQoJ0ZyYWdtZW50JyksXG4gICAgICBrZXk6ICdmcmFnbWVudCdcbiAgICB9LFxuICAgIHtcbiAgICAgIGxhYmVsOiBnZXR0ZXh0KCdTZXJpZXMnKSxcbiAgICAgIGtleTogJ3NlcmllcydcbiAgICB9LFxuICAgIHtcbiAgICAgIGxhYmVsOiBnZXR0ZXh0KCdVbml0JyksXG4gICAgICBrZXk6ICd1bml0J1xuICAgIH0sXG4gICAge1xuICAgICAgbGFiZWw6IGdldHRleHQoJ1JhbmdlJyksXG4gICAgICBrZXk6ICdtaW4nXG4gICAgfSxcbiAgICB7XG4gICAgICBsYWJlbDogZ2V0dGV4dCgnVGFyZ2V0JyksXG4gICAgICBrZXk6ICd0YXJnZXQnXG4gICAgfSxcbiAgICB7XG4gICAgICBsYWJlbDogZ2V0dGV4dCgnWWVsbG93IHJhbmdlJyksXG4gICAgICBsYWJlbENvbG9yOiAneWVsbG93JyxcbiAgICAgIGtleTogJ3llbGxvd1JhbmdlTWluJ1xuICAgIH0sXG4gICAge1xuICAgICAgbGFiZWw6IGdldHRleHQoJ1JlZCByYW5nZScpLFxuICAgICAgbGFiZWxDb2xvcjogJ3JlZCcsXG4gICAgICBrZXk6ICdyZWRSYW5nZU1pbidcbiAgICB9XG4gIF07XG59XG4iLCI8cCBjbGFzcz1cInRleHQtbWVkaXVtXCI+XG4gIDxpIGM4eUljb249XCJjaXJjbGVcIiBbc3R5bGUuY29sb3JdPVwiZGF0YXBvaW50LmNvbG9yXCI+PC9pPlxuICB7eyBkYXRhcG9pbnQubGFiZWwgfX1cbjwvcD5cbjxwPnt7IGRhdGFwb2ludC5kZXNjcmlwdGlvbiB9fTwvcD5cblxuPHVsIGNsYXNzPVwibGlzdC11bnN0eWxlZCBzbWFsbCBwLXQtMTZcIj5cbiAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYXR0cmlidXRlIG9mIGF0dHJpYnV0ZXM7IGxldCBpID0gaW5kZXhcIj5cbiAgICA8bGlcbiAgICAgIGNsYXNzPVwicC10LTQgcC1iLTQgZC1mbGV4IHNlcGFyYXRvci1ib3R0b20gdGV4dC1ub3dyYXBcIlxuICAgICAgKm5nSWY9XCJkYXRhcG9pbnRbYXR0cmlidXRlLmtleV0gIT09IHVuZGVmaW5lZFwiXG4gICAgPlxuICAgICAgPGxhYmVsIGNsYXNzPVwic21hbGwgbS1iLTAgbS1yLThcIj5cbiAgICAgICAgPGkgKm5nSWY9XCJhdHRyaWJ1dGUubGFiZWxDb2xvclwiIGM4eUljb249XCJzcXVhcmVcIiBbc3R5bGUuY29sb3JdPVwiYXR0cmlidXRlLmxhYmVsQ29sb3JcIj48L2k+XG4gICAgICAgIHt7IGF0dHJpYnV0ZS5sYWJlbCB8IHRyYW5zbGF0ZSB9fVxuICAgICAgPC9sYWJlbD5cbiAgICAgIDxuZy1jb250YWluZXIgW25nU3dpdGNoXT1cImF0dHJpYnV0ZS5rZXlcIj5cbiAgICAgICAgPHNwYW4gKm5nU3dpdGNoQ2FzZT1cIidtaW4nXCIgY2xhc3M9XCJtLWwtYXV0b1wiPlxuICAgICAgICAgIHt7IGRhdGFwb2ludFsnbWluJ10gfX0g4oCUIHt7IGRhdGFwb2ludFsnbWF4J10gfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8c3BhbiAqbmdTd2l0Y2hDYXNlPVwiJ3llbGxvd1JhbmdlTWluJ1wiIGNsYXNzPVwibS1sLWF1dG9cIj5cbiAgICAgICAgICB7eyBkYXRhcG9pbnRbJ3llbGxvd1JhbmdlTWluJ10gfX0g4oCUIHt7IGRhdGFwb2ludFsneWVsbG93UmFuZ2VNYXgnXSB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgICAgIDxzcGFuICpuZ1N3aXRjaENhc2U9XCIncmVkUmFuZ2VNaW4nXCIgY2xhc3M9XCJtLWwtYXV0b1wiPlxuICAgICAgICAgIHt7IGRhdGFwb2ludFsncmVkUmFuZ2VNaW4nXSB9fSDigJQge3sgZGF0YXBvaW50WydyZWRSYW5nZU1heCddIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPHNwYW4gKm5nU3dpdGNoRGVmYXVsdCBjbGFzcz1cIm0tbC1hdXRvXCI+XG4gICAgICAgICAge3sgZGF0YXBvaW50W2F0dHJpYnV0ZS5rZXldIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvbmctY29udGFpbmVyPlxuICAgIDwvbGk+XG4gIDwvbmctY29udGFpbmVyPlxuPC91bD5cbiJdfQ==