@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
74 lines • 13.3 kB
JavaScript
import { Component, Attribute, HostBinding } from '@angular/core';
import { AlertService } from './alert.service';
import { AlertOutletBase } from './alert-outlet-base';
import * as i0 from "@angular/core";
import * as i1 from "./alert.service";
import * as i2 from "../common/icon.directive";
import * as i3 from "@angular/common";
import * as i4 from "../i18n/c8y-translate.pipe";
/*
* Alert outlet component shows all added alerts. It is used in the application's `c8y-bootstrap` component.
*
* For applications which don’t use `c8y-bootstrap` component but want to display alerts via AlertService, a c8y-alert-outlet component needs to be added explicitly in the template.
*
* ```html
* <div class="alerts">
* <c8y-alert-outlet></c8y-alert-outlet>
* </div>
* ```
*/
export class AlertOutletComponent extends AlertOutletBase {
/**
* The array of current alerts.
*/
get alerts() {
return this.alertService.state$;
}
/**
* @ignore
*/
constructor(position, alertService) {
super(alertService);
this.position = position;
this.alertService = alertService;
/**
* @ignore
*/
this.isStatic = false;
this.isStatic = this.position === 'static';
}
/**
* Returns a CSS class for an alert depending on its type to style the corresponding alert component.
*/
getClass(alert) {
const classes = [];
if (alert.type !== 'danger') {
classes.push('interact');
}
classes.push(`alert-${alert.type}`);
return classes.join(' ');
}
/**
* Executes alert’s onClose method, if provided, and closes the alert.
* @param alert The alert which will be closed.
*/
close(alert) {
if (alert.onClose) {
alert.onClose();
}
this.alertService.remove(alert);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertOutletComponent, deps: [{ token: 'position', attribute: true }, { token: i1.AlertService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AlertOutletComponent, selector: "c8y-alert-outlet", host: { properties: { "class.static": "this.isStatic" } }, usesInheritance: true, ngImport: i0, template: "<div\n class=\"alert animated fadeInRightBig m-t-16\"\n data-cy=\"c8y-alert--message\"\n *ngFor=\"let alert of alerts | async\"\n [ngClass]=\"[getClass(alert), isDetailsShow(alert) ? 'expanded' : '']\"\n>\n <button title=\"{{ 'Close' | translate }}\" type=\"button\" class=\"close\" (click)=\"close(alert)\">\n <span aria-hidden=\"true\"><i c8yIcon=\"times\"></i></span>\n <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n </button>\n\n <div *ngIf=\"!isTemplateRef(alert.text); else template(alert.text)\">\n <strong *ngIf=\"!alert.allowHtml\" [textContent]=\"alert.text | translate\" class=\"message\"></strong>\n <strong *ngIf=\"alert.allowHtml\" [innerHTML]=\"alert.text | translate\" class=\"message\"></strong>\n </div>\n <p *ngIf=\"hasDetails(alert) && !isDetailsShow(alert)\" class=\"text-muted m-t-8\">\n <button\n title=\"{{ 'Show details' | translate }}\"\n class=\"btn btn-clean\"\n (click)=\"showDetails(alert)\"\n >\n <i c8yIcon=\"chevron-down\"></i>\n {{ 'Show details' | translate }}\n </button>\n </p>\n <p *ngIf=\"hasDetails(alert) && isDetailsShow(alert)\" class=\"text-muted m-t-8\">\n <button title=\"{{ 'Hide details' | translate }}\" class=\"btn btn-clean\" (click)=\"closeDetails()\">\n <i c8yIcon=\"chevron-up\"></i>\n {{ 'Hide details' | translate }}\n </button>\n </p>\n <div *ngIf=\"isDetailsShow(alert)\">\n <div *ngIf=\"!isTemplateRef(detailDisplayedAlert.contents); else template(alert.detailedData)\">\n <pre><code [textContent]=\"detailDisplayedAlert.contents | translate\"></code></pre>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i4.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AlertOutletComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-alert-outlet', template: "<div\n class=\"alert animated fadeInRightBig m-t-16\"\n data-cy=\"c8y-alert--message\"\n *ngFor=\"let alert of alerts | async\"\n [ngClass]=\"[getClass(alert), isDetailsShow(alert) ? 'expanded' : '']\"\n>\n <button title=\"{{ 'Close' | translate }}\" type=\"button\" class=\"close\" (click)=\"close(alert)\">\n <span aria-hidden=\"true\"><i c8yIcon=\"times\"></i></span>\n <span class=\"sr-only\">{{ 'Close' | translate }}</span>\n </button>\n\n <div *ngIf=\"!isTemplateRef(alert.text); else template(alert.text)\">\n <strong *ngIf=\"!alert.allowHtml\" [textContent]=\"alert.text | translate\" class=\"message\"></strong>\n <strong *ngIf=\"alert.allowHtml\" [innerHTML]=\"alert.text | translate\" class=\"message\"></strong>\n </div>\n <p *ngIf=\"hasDetails(alert) && !isDetailsShow(alert)\" class=\"text-muted m-t-8\">\n <button\n title=\"{{ 'Show details' | translate }}\"\n class=\"btn btn-clean\"\n (click)=\"showDetails(alert)\"\n >\n <i c8yIcon=\"chevron-down\"></i>\n {{ 'Show details' | translate }}\n </button>\n </p>\n <p *ngIf=\"hasDetails(alert) && isDetailsShow(alert)\" class=\"text-muted m-t-8\">\n <button title=\"{{ 'Hide details' | translate }}\" class=\"btn btn-clean\" (click)=\"closeDetails()\">\n <i c8yIcon=\"chevron-up\"></i>\n {{ 'Hide details' | translate }}\n </button>\n </p>\n <div *ngIf=\"isDetailsShow(alert)\">\n <div *ngIf=\"!isTemplateRef(detailDisplayedAlert.contents); else template(alert.detailedData)\">\n <pre><code [textContent]=\"detailDisplayedAlert.contents | translate\"></code></pre>\n </div>\n </div>\n</div>\n" }]
}], ctorParameters: () => [{ type: undefined, decorators: [{
type: Attribute,
args: ['position']
}] }, { type: i1.AlertService }], propDecorators: { isStatic: [{
type: HostBinding,
args: ['class.static']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWxlcnQtb3V0bGV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2NvcmUvYWxlcnQvYWxlcnQtb3V0bGV0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uL2NvcmUvYWxlcnQvYWxlcnQtb3V0bGV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFL0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7Ozs7QUFFdEQ7Ozs7Ozs7Ozs7R0FVRztBQUtILE1BQU0sT0FBTyxvQkFBcUIsU0FBUSxlQUFlO0lBS3ZEOztPQUVHO0lBQ0gsSUFBSSxNQUFNO1FBQ1IsT0FBTyxJQUFJLENBQUMsWUFBWSxDQUFDLE1BQU0sQ0FBQztJQUNsQyxDQUFDO0lBQ0Q7O09BRUc7SUFDSCxZQUNpQyxRQUFnQixFQUN4QyxZQUEwQjtRQUVqQyxLQUFLLENBQUMsWUFBWSxDQUFDLENBQUM7UUFIVyxhQUFRLEdBQVIsUUFBUSxDQUFRO1FBQ3hDLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBZm5DOztXQUVHO1FBQzBCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFlNUMsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxLQUFLLFFBQVEsQ0FBQztJQUM3QyxDQUFDO0lBQ0Q7O09BRUc7SUFDSCxRQUFRLENBQUMsS0FBWTtRQUNuQixNQUFNLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDbkIsSUFBSSxLQUFLLENBQUMsSUFBSSxLQUFLLFFBQVEsRUFBRSxDQUFDO1lBQzVCLE9BQU8sQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7UUFDM0IsQ0FBQztRQUNELE9BQU8sQ0FBQyxJQUFJLENBQUMsU0FBUyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztRQUNwQyxPQUFPLE9BQU8sQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDM0IsQ0FBQztJQUNEOzs7T0FHRztJQUNILEtBQUssQ0FBQyxLQUFZO1FBQ2hCLElBQUksS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2xCLEtBQUssQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUNsQixDQUFDO1FBQ0QsSUFBSSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDbEMsQ0FBQzsrR0F6Q1Usb0JBQW9CLGtCQWVsQixVQUFVO21HQWZaLG9CQUFvQiwwSUNyQmpDLDZtREFxQ0E7OzRGRGhCYSxvQkFBb0I7a0JBSmhDLFNBQVM7K0JBQ0Usa0JBQWtCOzswQkFrQnpCLFNBQVM7MkJBQUMsVUFBVTtvRUFYTSxRQUFRO3NCQUFwQyxXQUFXO3VCQUFDLGNBQWMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEF0dHJpYnV0ZSwgSG9zdEJpbmRpbmcgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEFsZXJ0IH0gZnJvbSAnLi9hbGVydC5tb2RlbCc7XG5pbXBvcnQgeyBBbGVydFNlcnZpY2UgfSBmcm9tICcuL2FsZXJ0LnNlcnZpY2UnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBBbGVydE91dGxldEJhc2UgfSBmcm9tICcuL2FsZXJ0LW91dGxldC1iYXNlJztcblxuLypcbiAqIEFsZXJ0IG91dGxldCBjb21wb25lbnQgc2hvd3MgYWxsIGFkZGVkIGFsZXJ0cy4gSXQgaXMgdXNlZCBpbiB0aGUgYXBwbGljYXRpb24ncyBgYzh5LWJvb3RzdHJhcGAgY29tcG9uZW50LlxuICpcbiAqIEZvciBhcHBsaWNhdGlvbnMgd2hpY2ggZG9u4oCZdCB1c2UgYGM4eS1ib290c3RyYXBgIGNvbXBvbmVudCBidXQgd2FudCB0byBkaXNwbGF5IGFsZXJ0cyB2aWEgQWxlcnRTZXJ2aWNlLCBhIGM4eS1hbGVydC1vdXRsZXQgY29tcG9uZW50IG5lZWRzIHRvIGJlIGFkZGVkIGV4cGxpY2l0bHkgaW4gdGhlIHRlbXBsYXRlLlxuICpcbiAqIGBgYGh0bWxcbiAqICA8ZGl2IGNsYXNzPVwiYWxlcnRzXCI+XG4gKiAgICA8Yzh5LWFsZXJ0LW91dGxldD48L2M4eS1hbGVydC1vdXRsZXQ+XG4gKiAgPC9kaXY+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYzh5LWFsZXJ0LW91dGxldCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9hbGVydC1vdXRsZXQuY29tcG9uZW50Lmh0bWwnXG59KVxuZXhwb3J0IGNsYXNzIEFsZXJ0T3V0bGV0Q29tcG9uZW50IGV4dGVuZHMgQWxlcnRPdXRsZXRCYXNlIHtcbiAgLyoqXG4gICAqIEBpZ25vcmVcbiAgICovXG4gIEBIb3N0QmluZGluZygnY2xhc3Muc3RhdGljJykgaXNTdGF0aWMgPSBmYWxzZTtcbiAgLyoqXG4gICAqIFRoZSBhcnJheSBvZiBjdXJyZW50IGFsZXJ0cy5cbiAgICovXG4gIGdldCBhbGVydHMoKTogQmVoYXZpb3JTdWJqZWN0PEFsZXJ0W10+IHtcbiAgICByZXR1cm4gdGhpcy5hbGVydFNlcnZpY2Uuc3RhdGUkO1xuICB9XG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBjb25zdHJ1Y3RvcihcbiAgICBAQXR0cmlidXRlKCdwb3NpdGlvbicpIHByaXZhdGUgcG9zaXRpb246IHN0cmluZyxcbiAgICBwdWJsaWMgYWxlcnRTZXJ2aWNlOiBBbGVydFNlcnZpY2VcbiAgKSB7XG4gICAgc3VwZXIoYWxlcnRTZXJ2aWNlKTtcbiAgICB0aGlzLmlzU3RhdGljID0gdGhpcy5wb3NpdGlvbiA9PT0gJ3N0YXRpYyc7XG4gIH1cbiAgLyoqXG4gICAqIFJldHVybnMgYSBDU1MgY2xhc3MgZm9yIGFuIGFsZXJ0IGRlcGVuZGluZyBvbiBpdHMgdHlwZSB0byBzdHlsZSB0aGUgY29ycmVzcG9uZGluZyBhbGVydCBjb21wb25lbnQuXG4gICAqL1xuICBnZXRDbGFzcyhhbGVydDogQWxlcnQpIHtcbiAgICBjb25zdCBjbGFzc2VzID0gW107XG4gICAgaWYgKGFsZXJ0LnR5cGUgIT09ICdkYW5nZXInKSB7XG4gICAgICBjbGFzc2VzLnB1c2goJ2ludGVyYWN0Jyk7XG4gICAgfVxuICAgIGNsYXNzZXMucHVzaChgYWxlcnQtJHthbGVydC50eXBlfWApO1xuICAgIHJldHVybiBjbGFzc2VzLmpvaW4oJyAnKTtcbiAgfVxuICAvKipcbiAgICogRXhlY3V0ZXMgYWxlcnTigJlzIG9uQ2xvc2UgbWV0aG9kLCBpZiBwcm92aWRlZCwgYW5kIGNsb3NlcyB0aGUgYWxlcnQuXG4gICAqIEBwYXJhbSBhbGVydCBUaGUgYWxlcnQgd2hpY2ggd2lsbCBiZSBjbG9zZWQuXG4gICAqL1xuICBjbG9zZShhbGVydDogQWxlcnQpIHtcbiAgICBpZiAoYWxlcnQub25DbG9zZSkge1xuICAgICAgYWxlcnQub25DbG9zZSgpO1xuICAgIH1cbiAgICB0aGlzLmFsZXJ0U2VydmljZS5yZW1vdmUoYWxlcnQpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwiYWxlcnQgYW5pbWF0ZWQgZmFkZUluUmlnaHRCaWcgbS10LTE2XCJcbiAgZGF0YS1jeT1cImM4eS1hbGVydC0tbWVzc2FnZVwiXG4gICpuZ0Zvcj1cImxldCBhbGVydCBvZiBhbGVydHMgfCBhc3luY1wiXG4gIFtuZ0NsYXNzXT1cIltnZXRDbGFzcyhhbGVydCksIGlzRGV0YWlsc1Nob3coYWxlcnQpID8gJ2V4cGFuZGVkJyA6ICcnXVwiXG4+XG4gIDxidXR0b24gdGl0bGU9XCJ7eyAnQ2xvc2UnIHwgdHJhbnNsYXRlIH19XCIgdHlwZT1cImJ1dHRvblwiIGNsYXNzPVwiY2xvc2VcIiAoY2xpY2spPVwiY2xvc2UoYWxlcnQpXCI+XG4gICAgPHNwYW4gYXJpYS1oaWRkZW49XCJ0cnVlXCI+PGkgYzh5SWNvbj1cInRpbWVzXCI+PC9pPjwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cInNyLW9ubHlcIj57eyAnQ2xvc2UnIHwgdHJhbnNsYXRlIH19PC9zcGFuPlxuICA8L2J1dHRvbj5cblxuICA8ZGl2ICpuZ0lmPVwiIWlzVGVtcGxhdGVSZWYoYWxlcnQudGV4dCk7IGVsc2UgdGVtcGxhdGUoYWxlcnQudGV4dClcIj5cbiAgICA8c3Ryb25nICpuZ0lmPVwiIWFsZXJ0LmFsbG93SHRtbFwiIFt0ZXh0Q29udGVudF09XCJhbGVydC50ZXh0IHwgdHJhbnNsYXRlXCIgY2xhc3M9XCJtZXNzYWdlXCI+PC9zdHJvbmc+XG4gICAgPHN0cm9uZyAqbmdJZj1cImFsZXJ0LmFsbG93SHRtbFwiIFtpbm5lckhUTUxdPVwiYWxlcnQudGV4dCB8IHRyYW5zbGF0ZVwiIGNsYXNzPVwibWVzc2FnZVwiPjwvc3Ryb25nPlxuICA8L2Rpdj5cbiAgPHAgKm5nSWY9XCJoYXNEZXRhaWxzKGFsZXJ0KSAmJiAhaXNEZXRhaWxzU2hvdyhhbGVydClcIiBjbGFzcz1cInRleHQtbXV0ZWQgbS10LThcIj5cbiAgICA8YnV0dG9uXG4gICAgICB0aXRsZT1cInt7ICdTaG93IGRldGFpbHMnIHwgdHJhbnNsYXRlIH19XCJcbiAgICAgIGNsYXNzPVwiYnRuIGJ0bi1jbGVhblwiXG4gICAgICAoY2xpY2spPVwic2hvd0RldGFpbHMoYWxlcnQpXCJcbiAgICA+XG4gICAgICA8aSBjOHlJY29uPVwiY2hldnJvbi1kb3duXCI+PC9pPlxuICAgICAge3sgJ1Nob3cgZGV0YWlscycgfCB0cmFuc2xhdGUgfX1cbiAgICA8L2J1dHRvbj5cbiAgPC9wPlxuICA8cCAqbmdJZj1cImhhc0RldGFpbHMoYWxlcnQpICYmIGlzRGV0YWlsc1Nob3coYWxlcnQpXCIgY2xhc3M9XCJ0ZXh0LW11dGVkIG0tdC04XCI+XG4gICAgPGJ1dHRvbiB0aXRsZT1cInt7ICdIaWRlIGRldGFpbHMnIHwgdHJhbnNsYXRlIH19XCIgY2xhc3M9XCJidG4gYnRuLWNsZWFuXCIgKGNsaWNrKT1cImNsb3NlRGV0YWlscygpXCI+XG4gICAgICA8aSBjOHlJY29uPVwiY2hldnJvbi11cFwiPjwvaT5cbiAgICAgIHt7ICdIaWRlIGRldGFpbHMnIHwgdHJhbnNsYXRlIH19XG4gICAgPC9idXR0b24+XG4gIDwvcD5cbiAgPGRpdiAqbmdJZj1cImlzRGV0YWlsc1Nob3coYWxlcnQpXCI+XG4gICAgPGRpdiAqbmdJZj1cIiFpc1RlbXBsYXRlUmVmKGRldGFpbERpc3BsYXllZEFsZXJ0LmNvbnRlbnRzKTsgZWxzZSB0ZW1wbGF0ZShhbGVydC5kZXRhaWxlZERhdGEpXCI+XG4gICAgICA8cHJlPjxjb2RlIFt0ZXh0Q29udGVudF09XCJkZXRhaWxEaXNwbGF5ZWRBbGVydC5jb250ZW50cyB8IHRyYW5zbGF0ZVwiPjwvY29kZT48L3ByZT5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==