@anglr/notifications
Version:
Angular module for displaying notifications
101 lines • 4.88 kB
JavaScript
import { Directive, Input, ViewContainerRef, EventEmitter, Output, Inject, Optional } from '@angular/core';
import { Notification } from '@anglr/common';
import { nameof } from '@jscrpt/common';
import { NOTIFICATION_MESSAGE_SERVICE } from '../../common/notifications.interface';
import * as i0 from "@angular/core";
/**
* Creates instance of component dynamically by its metadata
*/
export class MessageRendererDirective {
//######################### protected properties #########################
/**
* Instance of dynamically created component
*/
get component() {
if (!this.componentRef) {
return null;
}
return this.componentRef.instance;
}
//######################### constructor #########################
constructor(viewContainerRef, notificationMessageService) {
this.viewContainerRef = viewContainerRef;
this.notificationMessageService = notificationMessageService;
//######################### protected fields #########################
/**
* Created component reference
*/
this.componentRef = null;
//######################### public properties - outputs #########################
/**
* Occurs when message was closed by user
*/
this.closed = new EventEmitter();
//######################### protected methods #########################
/**
* Called when notification was closed by user
* @param notification - Notification that was closed
*/
this.closedEmit = (notification) => {
this.closed.emit(notification);
};
}
//######################### public methods - implementation of OnChanges #########################
/**
* Called when input value changes
*/
ngOnChanges(changes) {
this.viewContainerRef.clear();
if (nameof('notification') in changes && changes[nameof('notification')].currentValue) {
const injector = this.viewContainerRef.injector;
let notificationMessageType;
if (this.notificationMessageService) {
notificationMessageType = this.notificationMessageService.getNotificationMessageComponent(this.notification.severity);
}
else {
notificationMessageType = this.notificationsOptions.getNotificationMessageComponent(this.notification.severity);
}
this.componentRef = this.viewContainerRef.createComponent(notificationMessageType, {
injector,
});
this.ngOnDestroy();
this.closedSubscription = this.component?.closed.subscribe(this.closedEmit);
if (this.component) {
this.component.item = this.notification;
this.component.options = this.notificationsOptions.messageOptions ?? {};
this.component.invalidateVisuals();
}
}
}
//######################### public methods - implementation of OnDestroy #########################
/**
* Called when component is destroyed
*/
ngOnDestroy() {
this.closedSubscription?.unsubscribe();
this.closedSubscription = null;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: MessageRendererDirective, deps: [{ token: i0.ViewContainerRef }, { token: NOTIFICATION_MESSAGE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.0", type: MessageRendererDirective, isStandalone: true, selector: "[messageRenderer]", inputs: { notification: ["messageRenderer", "notification"], notificationsOptions: "notificationsOptions" }, outputs: { closed: "closed" }, exportAs: ["messageRenderer"], usesOnChanges: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: MessageRendererDirective, decorators: [{
type: Directive,
args: [{
selector: '[messageRenderer]',
exportAs: 'messageRenderer',
}]
}], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: undefined, decorators: [{
type: Inject,
args: [NOTIFICATION_MESSAGE_SERVICE]
}, {
type: Optional
}] }], propDecorators: { notification: [{
type: Input,
args: [{ alias: 'messageRenderer', required: true }]
}], notificationsOptions: [{
type: Input,
args: [{ required: true }]
}], closed: [{
type: Output
}] } });
//# sourceMappingURL=messageRenderer.directive.js.map