@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
67 lines • 10.7 kB
JavaScript
import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
import { RadialGaugeViewComponent } from '../../radial-gauge/radial-gauge.component';
import { CommonModule } from '@c8y/ngx-components';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@c8y/ngx-components";
import * as i2 from "@angular/common";
export class PresetPreviewComponent {
constructor() {
this.onPresetChange = new EventEmitter();
this.measurement = {
value: Math.floor(Math.random() * 9) + 1,
unit: 'ºC',
date: '2025-04-22T20:07:49.354Z'
};
this.activeDatapointGauge = {
fragment: 'c8y_Kpi',
series: 'preview',
unit: 'ºC',
min: 0,
max: 10,
yellowRangeMax: 8,
yellowRangeMin: 5,
redRangeMin: 8,
redRangeMax: 10
};
this.selectedPresetId = null;
}
writeValue(value) {
this.selectedPresetId = value;
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
emitPresetChange(presetId) {
this.selectedPresetId = presetId;
this.onChange(presetId);
this.onTouched();
this.onPresetChange.emit(presetId);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PresetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PresetPreviewComponent, isStandalone: true, selector: "c8y-preset-preview", inputs: { ALL_GAUGE_PRESETS: "ALL_GAUGE_PRESETS" }, outputs: { onPresetChange: "onPresetChange" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PresetPreviewComponent),
multi: true
}
], ngImport: i0, template: "<div class=\"d-grid grid__col--4-4-4 gap-4\">\n <button\n class=\"c8y-radial-gauge__preset preset-{{ preset.id }}\"\n [class.selected]=\"preset.id === selectedPresetId\"\n [attr.aria-label]=\"preset.name | translate\"\n type=\"button\"\n *ngFor=\"let preset of ALL_GAUGE_PRESETS\"\n (click)=\"emitPresetChange(preset.id)\"\n >\n <c8y-radial-gauge\n class=\"c8y-radial-gauge--square\"\n *ngIf=\"preset.id !== 'custom'\"\n [activeDatapointGauge]=\"activeDatapointGauge\"\n [measurement]=\"measurement\"\n [fractionSize]=\"2\"\n [selectedPresetId]=\"preset.id\"\n [gaugeOptions]=\"preset\"\n ></c8y-radial-gauge>\n <span>{{ preset.name | translate }}</span>\n </button>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadialGaugeViewComponent, selector: "c8y-radial-gauge", inputs: ["activeDatapointGauge", "measurement", "fractionSize", "gaugeOptions", "selectedPresetId"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PresetPreviewComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-preset-preview', standalone: true, imports: [CommonModule, RadialGaugeViewComponent], providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PresetPreviewComponent),
multi: true
}
], template: "<div class=\"d-grid grid__col--4-4-4 gap-4\">\n <button\n class=\"c8y-radial-gauge__preset preset-{{ preset.id }}\"\n [class.selected]=\"preset.id === selectedPresetId\"\n [attr.aria-label]=\"preset.name | translate\"\n type=\"button\"\n *ngFor=\"let preset of ALL_GAUGE_PRESETS\"\n (click)=\"emitPresetChange(preset.id)\"\n >\n <c8y-radial-gauge\n class=\"c8y-radial-gauge--square\"\n *ngIf=\"preset.id !== 'custom'\"\n [activeDatapointGauge]=\"activeDatapointGauge\"\n [measurement]=\"measurement\"\n [fractionSize]=\"2\"\n [selectedPresetId]=\"preset.id\"\n [gaugeOptions]=\"preset\"\n ></c8y-radial-gauge>\n <span>{{ preset.name | translate }}</span>\n </button>\n</div>\n" }]
}], propDecorators: { ALL_GAUGE_PRESETS: [{
type: Input
}], onPresetChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJlc2V0LXByZXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vd2lkZ2V0cy9pbXBsZW1lbnRhdGlvbnMvaW5mby1nYXVnZS9pbmZvLWdhdWdlLXdpZGdldC1jb25maWcvcHJlc2V0LXByZXZpZXcvcHJlc2V0LXByZXZpZXcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vd2lkZ2V0cy9pbXBsZW1lbnRhdGlvbnMvaW5mby1nYXVnZS9pbmZvLWdhdWdlLXdpZGdldC1jb25maWcvcHJlc2V0LXByZXZpZXcvcHJlc2V0LXByZXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkYsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sMkNBQTJDLENBQUM7QUFDckYsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRW5ELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBZW5ELE1BQU0sT0FBTyxzQkFBc0I7SUFibkM7UUFlWSxtQkFBYyxHQUFHLElBQUksWUFBWSxFQUFVLENBQUM7UUFFdEQsZ0JBQVcsR0FBRztZQUNaLEtBQUssRUFBRSxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLENBQUMsR0FBRyxDQUFDO1lBQ3hDLElBQUksRUFBRSxJQUFJO1lBQ1YsSUFBSSxFQUFFLDBCQUEwQjtTQUNqQyxDQUFDO1FBQ0YseUJBQW9CLEdBQUc7WUFDckIsUUFBUSxFQUFFLFNBQVM7WUFDbkIsTUFBTSxFQUFFLFNBQVM7WUFDakIsSUFBSSxFQUFFLElBQUk7WUFDVixHQUFHLEVBQUUsQ0FBQztZQUNOLEdBQUcsRUFBRSxFQUFFO1lBQ1AsY0FBYyxFQUFFLENBQUM7WUFDakIsY0FBYyxFQUFFLENBQUM7WUFDakIsV0FBVyxFQUFFLENBQUM7WUFDZCxXQUFXLEVBQUUsRUFBRTtTQUNoQixDQUFDO1FBQ0YscUJBQWdCLEdBQWtCLElBQUksQ0FBQztLQXVCeEM7SUFsQkMsVUFBVSxDQUFDLEtBQWE7UUFDdEIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLEtBQUssQ0FBQztJQUNoQyxDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBMkI7UUFDMUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQWM7UUFDOUIsSUFBSSxDQUFDLFNBQVMsR0FBRyxFQUFFLENBQUM7SUFDdEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFFBQWdCO1FBQy9CLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxRQUFRLENBQUM7UUFDakMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUN4QixJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7UUFDakIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDckMsQ0FBQzsrR0ExQ1Usc0JBQXNCO21HQUF0QixzQkFBc0Isb0tBUnRCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztnQkFDckQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLDBCQ2pCSCx1dUJBcUJBLDJDRFhZLFlBQVksZ1VBQUUsd0JBQXdCOzs0RkFTckMsc0JBQXNCO2tCQWJsQyxTQUFTOytCQUNFLG9CQUFvQixjQUVsQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsd0JBQXdCLENBQUMsYUFDdEM7d0JBQ1Q7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsdUJBQXVCLENBQUM7NEJBQ3JELEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzhCQUdRLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDSSxjQUFjO3NCQUF2QixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIGZvcndhcmRSZWYsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFJhZGlhbEdhdWdlVmlld0NvbXBvbmVudCB9IGZyb20gJy4uLy4uL3JhZGlhbC1nYXVnZS9yYWRpYWwtZ2F1Z2UuY29tcG9uZW50JztcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0BjOHkvbmd4LWNvbXBvbmVudHMnO1xuaW1wb3J0IHsgR2F1Z2VPcHRpb25zIH0gZnJvbSAnLi4vZ2F1Z2UubW9kZWwnO1xuaW1wb3J0IHsgTkdfVkFMVUVfQUNDRVNTT1IgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2M4eS1wcmVzZXQtcHJldmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9wcmVzZXQtcHJldmlldy5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGUsIFJhZGlhbEdhdWdlVmlld0NvbXBvbmVudF0sXG4gIHByb3ZpZGVyczogW1xuICAgIHtcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gUHJlc2V0UHJldmlld0NvbXBvbmVudCksXG4gICAgICBtdWx0aTogdHJ1ZVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBQcmVzZXRQcmV2aWV3Q29tcG9uZW50IHtcbiAgQElucHV0KCkgQUxMX0dBVUdFX1BSRVNFVFM6IEdhdWdlT3B0aW9uc1tdO1xuICBAT3V0cHV0KCkgb25QcmVzZXRDaGFuZ2UgPSBuZXcgRXZlbnRFbWl0dGVyPHN0cmluZz4oKTtcblxuICBtZWFzdXJlbWVudCA9IHtcbiAgICB2YWx1ZTogTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogOSkgKyAxLFxuICAgIHVuaXQ6ICfCukMnLFxuICAgIGRhdGU6ICcyMDI1LTA0LTIyVDIwOjA3OjQ5LjM1NFonXG4gIH07XG4gIGFjdGl2ZURhdGFwb2ludEdhdWdlID0ge1xuICAgIGZyYWdtZW50OiAnYzh5X0twaScsXG4gICAgc2VyaWVzOiAncHJldmlldycsXG4gICAgdW5pdDogJ8K6QycsXG4gICAgbWluOiAwLFxuICAgIG1heDogMTAsXG4gICAgeWVsbG93UmFuZ2VNYXg6IDgsXG4gICAgeWVsbG93UmFuZ2VNaW46IDUsXG4gICAgcmVkUmFuZ2VNaW46IDgsXG4gICAgcmVkUmFuZ2VNYXg6IDEwXG4gIH07XG4gIHNlbGVjdGVkUHJlc2V0SWQ6IHN0cmluZyB8IG51bGwgPSBudWxsO1xuXG4gIHByaXZhdGUgb25DaGFuZ2U6ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkO1xuICBwcml2YXRlIG9uVG91Y2hlZDogKCkgPT4gdm9pZDtcblxuICB3cml0ZVZhbHVlKHZhbHVlOiBzdHJpbmcpOiB2b2lkIHtcbiAgICB0aGlzLnNlbGVjdGVkUHJlc2V0SWQgPSB2YWx1ZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46ICh2YWx1ZTogc3RyaW5nKSA9PiB2b2lkKTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46ICgpID0+IHZvaWQpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2hlZCA9IGZuO1xuICB9XG5cbiAgZW1pdFByZXNldENoYW5nZShwcmVzZXRJZDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy5zZWxlY3RlZFByZXNldElkID0gcHJlc2V0SWQ7XG4gICAgdGhpcy5vbkNoYW5nZShwcmVzZXRJZCk7XG4gICAgdGhpcy5vblRvdWNoZWQoKTtcbiAgICB0aGlzLm9uUHJlc2V0Q2hhbmdlLmVtaXQocHJlc2V0SWQpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZC1ncmlkIGdyaWRfX2NvbC0tNC00LTQgZ2FwLTRcIj5cbiAgPGJ1dHRvblxuICAgIGNsYXNzPVwiYzh5LXJhZGlhbC1nYXVnZV9fcHJlc2V0IHByZXNldC17eyBwcmVzZXQuaWQgfX1cIlxuICAgIFtjbGFzcy5zZWxlY3RlZF09XCJwcmVzZXQuaWQgPT09IHNlbGVjdGVkUHJlc2V0SWRcIlxuICAgIFthdHRyLmFyaWEtbGFiZWxdPVwicHJlc2V0Lm5hbWUgfCB0cmFuc2xhdGVcIlxuICAgIHR5cGU9XCJidXR0b25cIlxuICAgICpuZ0Zvcj1cImxldCBwcmVzZXQgb2YgQUxMX0dBVUdFX1BSRVNFVFNcIlxuICAgIChjbGljayk9XCJlbWl0UHJlc2V0Q2hhbmdlKHByZXNldC5pZClcIlxuICA+XG4gICAgPGM4eS1yYWRpYWwtZ2F1Z2VcbiAgICAgIGNsYXNzPVwiYzh5LXJhZGlhbC1nYXVnZS0tc3F1YXJlXCJcbiAgICAgICpuZ0lmPVwicHJlc2V0LmlkICE9PSAnY3VzdG9tJ1wiXG4gICAgICBbYWN0aXZlRGF0YXBvaW50R2F1Z2VdPVwiYWN0aXZlRGF0YXBvaW50R2F1Z2VcIlxuICAgICAgW21lYXN1cmVtZW50XT1cIm1lYXN1cmVtZW50XCJcbiAgICAgIFtmcmFjdGlvblNpemVdPVwiMlwiXG4gICAgICBbc2VsZWN0ZWRQcmVzZXRJZF09XCJwcmVzZXQuaWRcIlxuICAgICAgW2dhdWdlT3B0aW9uc109XCJwcmVzZXRcIlxuICAgID48L2M4eS1yYWRpYWwtZ2F1Z2U+XG4gICAgPHNwYW4+e3sgcHJlc2V0Lm5hbWUgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gIDwvYnV0dG9uPlxuPC9kaXY+XG4iXX0=