@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
35 lines • 9.94 kB
JavaScript
import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { distinctUntilChanged, shareReplay, switchMap, tap } from 'rxjs/operators';
import { ImageWidgetService } from '../image-widget.service';
import { EmptyStateComponent, LoadingComponent } from '@c8y/ngx-components';
import { AsyncPipe, NgClass, NgIf, NgStyle } from '@angular/common';
import * as i0 from "@angular/core";
import * as i1 from "../image-widget.service";
export class ImageWidgetViewComponent {
constructor(imageWidget) {
this.imageWidget = imageWidget;
this.imageBinaryId$ = new BehaviorSubject(null);
this.loading = true;
this.imageDetails$ = this.imageBinaryId$.pipe(distinctUntilChanged(), tap(() => (this.loading = true)), switchMap(imageBinaryId => this.imageWidget.getImageDetails(imageBinaryId)), tap(() => (this.loading = false)), shareReplay(1));
}
ngOnChanges(changes) {
if (changes.config) {
const value = changes.config.currentValue;
this.imageBinaryId$.next(value.imageBinaryId);
this.setStyling(value);
}
}
setStyling(config) {
this.styling = this.imageWidget.getStyling(config);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageWidgetViewComponent, deps: [{ token: i1.ImageWidgetService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ImageWidgetViewComponent, isStandalone: true, selector: "c8y-image-widget-view", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n <img\n [src]=\"details.base64\"\n [title]=\"details.file.name\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n [ngStyle]=\"styling\"\n />\n</ng-container>\n\n<ng-template #empty>\n <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n <c8y-ui-empty-state\n class=\"fit-w\"\n [icon]=\"'no-image'\"\n [title]=\"'No image to display.' | translate\"\n [subtitle]=\"'Upload an image.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n <c8y-loading></c8y-loading>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: LoadingComponent, selector: "c8y-loading", inputs: ["layout", "progress", "message"] }, { kind: "component", type: EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ImageWidgetViewComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-image-widget-view', standalone: true, imports: [NgIf, NgClass, AsyncPipe, NgStyle, LoadingComponent, EmptyStateComponent], template: "<ng-container *ngIf=\"imageDetails$ | async as details; else empty\">\n <img\n [src]=\"details.base64\"\n [title]=\"details.file.name\"\n [ngClass]=\"styling ? 'fit-h fit-w' : 'img-responsive'\"\n [ngStyle]=\"styling\"\n />\n</ng-container>\n\n<ng-template #empty>\n <div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"!loading\">\n <c8y-ui-empty-state\n class=\"fit-w\"\n [icon]=\"'no-image'\"\n [title]=\"'No image to display.' | translate\"\n [subtitle]=\"'Upload an image.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n</ng-template>\n<div class=\"d-flex fit-h fit-w j-c-center a-i-center\" *ngIf=\"loading\">\n <c8y-loading></c8y-loading>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.ImageWidgetService }], propDecorators: { config: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2Utd2lkZ2V0LXZpZXcuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vd2lkZ2V0cy9pbXBsZW1lbnRhdGlvbnMvaW1hZ2UvaW1hZ2Utd2lkZ2V0LXZpZXcvaW1hZ2Utd2lkZ2V0LXZpZXcuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vd2lkZ2V0cy9pbXBsZW1lbnRhdGlvbnMvaW1hZ2UvaW1hZ2Utd2lkZ2V0LXZpZXcvaW1hZ2Utd2lkZ2V0LXZpZXcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQTRCLE1BQU0sZUFBZSxDQUFDO0FBQzNFLE9BQU8sRUFBRSxlQUFlLEVBQWMsTUFBTSxNQUFNLENBQUM7QUFDbkQsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFdBQVcsRUFBRSxTQUFTLEVBQUUsR0FBRyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFFbkYsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDN0QsT0FBTyxFQUFFLG1CQUFtQixFQUFFLGdCQUFnQixFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDNUUsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDOzs7QUFRcEUsTUFBTSxPQUFPLHdCQUF3QjtJQVVuQyxZQUFvQixXQUErQjtRQUEvQixnQkFBVyxHQUFYLFdBQVcsQ0FBb0I7UUFSbkQsbUJBQWMsR0FBRyxJQUFJLGVBQWUsQ0FBUyxJQUFJLENBQUMsQ0FBQztRQU1uRCxZQUFPLEdBQUcsSUFBSSxDQUFDO1FBR2IsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FDM0Msb0JBQW9CLEVBQUUsRUFDdEIsR0FBRyxDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsQ0FBQyxFQUNoQyxTQUFTLENBQUMsYUFBYSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsQ0FBQyxFQUMzRSxHQUFHLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDLEVBQ2pDLFdBQVcsQ0FBQyxDQUFDLENBQUMsQ0FDZixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVcsQ0FBQyxPQUFzQjtRQUNoQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNuQixNQUFNLEtBQUssR0FBRyxPQUFPLENBQUMsTUFBTSxDQUFDLFlBQWlDLENBQUM7WUFDL0QsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDO1lBQzlDLElBQUksQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDekIsQ0FBQztJQUNILENBQUM7SUFFTyxVQUFVLENBQUMsTUFBeUI7UUFDMUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFVBQVUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNyRCxDQUFDOytHQTlCVSx3QkFBd0I7bUdBQXhCLHdCQUF3QixvSUNkckMsdXVCQXVCQSw0Q0RYWSxJQUFJLDZGQUFFLE9BQU8sK0VBQUUsU0FBUyw4Q0FBRSxPQUFPLDJFQUFFLGdCQUFnQixtR0FBRSxtQkFBbUI7OzRGQUV2RSx3QkFBd0I7a0JBTnBDLFNBQVM7K0JBQ0UsdUJBQXVCLGNBRXJCLElBQUksV0FDUCxDQUFDLElBQUksRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxtQkFBbUIsQ0FBQzt1RkFHMUUsTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBCZWhhdmlvclN1YmplY3QsIE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBzaGFyZVJlcGxheSwgc3dpdGNoTWFwLCB0YXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBJbWFnZVdpZGdldENvbmZpZywgSW1hZ2VXaWRnZXRTdHlsZSB9IGZyb20gJy4uL2ltYWdlLXdpZGdldC5tb2RlbCc7XG5pbXBvcnQgeyBJbWFnZVdpZGdldFNlcnZpY2UgfSBmcm9tICcuLi9pbWFnZS13aWRnZXQuc2VydmljZSc7XG5pbXBvcnQgeyBFbXB0eVN0YXRlQ29tcG9uZW50LCBMb2FkaW5nQ29tcG9uZW50IH0gZnJvbSAnQGM4eS9uZ3gtY29tcG9uZW50cyc7XG5pbXBvcnQgeyBBc3luY1BpcGUsIE5nQ2xhc3MsIE5nSWYsIE5nU3R5bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjOHktaW1hZ2Utd2lkZ2V0LXZpZXcnLFxuICB0ZW1wbGF0ZVVybDogJy4vaW1hZ2Utd2lkZ2V0LXZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTmdJZiwgTmdDbGFzcywgQXN5bmNQaXBlLCBOZ1N0eWxlLCBMb2FkaW5nQ29tcG9uZW50LCBFbXB0eVN0YXRlQ29tcG9uZW50XVxufSlcbmV4cG9ydCBjbGFzcyBJbWFnZVdpZGdldFZpZXdDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKSBjb25maWc6IEltYWdlV2lkZ2V0Q29uZmlnO1xuICBpbWFnZUJpbmFyeUlkJCA9IG5ldyBCZWhhdmlvclN1YmplY3Q8c3RyaW5nPihudWxsKTtcbiAgaW1hZ2VEZXRhaWxzJDogT2JzZXJ2YWJsZTx7XG4gICAgZmlsZTogRmlsZTtcbiAgICBiYXNlNjQ6IHN0cmluZztcbiAgfT47XG4gIHN0eWxpbmc6IEltYWdlV2lkZ2V0U3R5bGUgfCBudWxsO1xuICBsb2FkaW5nID0gdHJ1ZTtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGltYWdlV2lkZ2V0OiBJbWFnZVdpZGdldFNlcnZpY2UpIHtcbiAgICB0aGlzLmltYWdlRGV0YWlscyQgPSB0aGlzLmltYWdlQmluYXJ5SWQkLnBpcGUoXG4gICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgdGFwKCgpID0+ICh0aGlzLmxvYWRpbmcgPSB0cnVlKSksXG4gICAgICBzd2l0Y2hNYXAoaW1hZ2VCaW5hcnlJZCA9PiB0aGlzLmltYWdlV2lkZ2V0LmdldEltYWdlRGV0YWlscyhpbWFnZUJpbmFyeUlkKSksXG4gICAgICB0YXAoKCkgPT4gKHRoaXMubG9hZGluZyA9IGZhbHNlKSksXG4gICAgICBzaGFyZVJlcGxheSgxKVxuICAgICk7XG4gIH1cblxuICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG4gICAgaWYgKGNoYW5nZXMuY29uZmlnKSB7XG4gICAgICBjb25zdCB2YWx1ZSA9IGNoYW5nZXMuY29uZmlnLmN1cnJlbnRWYWx1ZSBhcyBJbWFnZVdpZGdldENvbmZpZztcbiAgICAgIHRoaXMuaW1hZ2VCaW5hcnlJZCQubmV4dCh2YWx1ZS5pbWFnZUJpbmFyeUlkKTtcbiAgICAgIHRoaXMuc2V0U3R5bGluZyh2YWx1ZSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBzZXRTdHlsaW5nKGNvbmZpZzogSW1hZ2VXaWRnZXRDb25maWcpOiB2b2lkIHtcbiAgICB0aGlzLnN0eWxpbmcgPSB0aGlzLmltYWdlV2lkZ2V0LmdldFN0eWxpbmcoY29uZmlnKTtcbiAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImltYWdlRGV0YWlscyQgfCBhc3luYyBhcyBkZXRhaWxzOyBlbHNlIGVtcHR5XCI+XG4gIDxpbWdcbiAgICBbc3JjXT1cImRldGFpbHMuYmFzZTY0XCJcbiAgICBbdGl0bGVdPVwiZGV0YWlscy5maWxlLm5hbWVcIlxuICAgIFtuZ0NsYXNzXT1cInN0eWxpbmcgPyAnZml0LWggZml0LXcnIDogJ2ltZy1yZXNwb25zaXZlJ1wiXG4gICAgW25nU3R5bGVdPVwic3R5bGluZ1wiXG4gIC8+XG48L25nLWNvbnRhaW5lcj5cblxuPG5nLXRlbXBsYXRlICNlbXB0eT5cbiAgPGRpdiBjbGFzcz1cImQtZmxleCBmaXQtaCBmaXQtdyBqLWMtY2VudGVyIGEtaS1jZW50ZXJcIiAqbmdJZj1cIiFsb2FkaW5nXCI+XG4gICAgPGM4eS11aS1lbXB0eS1zdGF0ZVxuICAgICAgY2xhc3M9XCJmaXQtd1wiXG4gICAgICBbaWNvbl09XCInbm8taW1hZ2UnXCJcbiAgICAgIFt0aXRsZV09XCInTm8gaW1hZ2UgdG8gZGlzcGxheS4nIHwgdHJhbnNsYXRlXCJcbiAgICAgIFtzdWJ0aXRsZV09XCInVXBsb2FkIGFuIGltYWdlLicgfCB0cmFuc2xhdGVcIlxuICAgICAgW2hvcml6b250YWxdPVwidHJ1ZVwiXG4gICAgPjwvYzh5LXVpLWVtcHR5LXN0YXRlPlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG48ZGl2IGNsYXNzPVwiZC1mbGV4IGZpdC1oIGZpdC13IGotYy1jZW50ZXIgYS1pLWNlbnRlclwiICpuZ0lmPVwibG9hZGluZ1wiPlxuICA8Yzh5LWxvYWRpbmc+PC9jOHktbG9hZGluZz5cbjwvZGl2PlxuIl19