@anglr/notifications
Version:
Angular module for displaying notifications
105 lines • 5.13 kB
JavaScript
import { Component, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Optional } from '@angular/core';
import { LocalizePipe, Notification, NotificationSeverity, TrimTextPipe } from '@anglr/common';
import { extend } from '@jscrpt/common/extend';
import { NOTIFICATION_MESSAGE_OPTIONS } from '../../common/notifications.interface';
import * as i0 from "@angular/core";
/**
* Default options for notification message component
* @internal
*/
const defaultOptions = {
clickToClose: true,
maxLength: 500,
cssClasses: {
clickable: 'clickable',
messageDiv: 'alert',
messageTypePrefix: 'alert-',
},
};
/**
* Notification message component that represents simple message
*/
export class NotificationMessageComponent {
//######################### public properties #########################
/**
* Represents notification that will be displayed
*/
get item() {
return this.ɵitem ?? new Notification('', NotificationSeverity.Default);
}
set item(item) {
this.classObj[`${this.ɵoptions.cssClasses.messageTypePrefix}${NotificationSeverity[item.severity].toLowerCase()}`] = true;
this.ɵitem = item;
}
/**
* Options used for notification message
*/
get options() {
return this.ɵoptions;
}
set options(options) {
this.ɵoptions = extend(true, this.ɵoptions, options);
this.init();
}
//######################### constructor #########################
constructor(changeDetector, options) {
this.changeDetector = changeDetector;
//######################### protected properties - template bidings #########################
/**
* Object representing css class definition
*/
this.classObj = {};
/**
* Occurs when notification is closed by user
*/
this.closed = new EventEmitter();
this.ɵoptions = extend(true, {}, defaultOptions, options);
}
//######################### public methods - template bidings #########################
/**
* Used for invoking 'closing' event
* @internal
*/
close() {
if (this.options.clickToClose && this.ɵitem) {
this.closed.emit(this.ɵitem);
}
}
//######################### public methods #########################
/**
* Explicitly runs invalidation of content (change detection)
*/
invalidateVisuals() {
this.changeDetector.detectChanges();
}
//######################### protected methods #########################
/**
* Initialize component from provided options
*/
init() {
if (this.options.cssClasses.clickable) {
this.classObj[this.options.cssClasses.clickable] = this.options.clickToClose;
}
if (this.options.cssClasses.messageDiv) {
this.classObj[this.options.cssClasses.messageDiv] = true;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationMessageComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: NOTIFICATION_MESSAGE_OPTIONS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: NotificationMessageComponent, isStandalone: true, selector: "notification", host: { attributes: { "animate.enter": "slide-in-animation", "animate.leave": "slide-out-animation" } }, ngImport: i0, template: "<div [class]=\"classObj\" (click)=\"close()\">\r\n {{item.message | localize: item.parameter | trimText: options.maxLength}}\r\n</div>", styles: [":host\n{\n display: block;\n overflow: hidden;\n}\n\n.clickable\n{\n cursor: pointer;\n}\n"], dependencies: [{ kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: TrimTextPipe, name: "trimText" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: NotificationMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'notification', host: {
'animate.enter': 'slide-in-animation',
'animate.leave': 'slide-out-animation',
}, imports: [
LocalizePipe,
TrimTextPipe,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"classObj\" (click)=\"close()\">\r\n {{item.message | localize: item.parameter | trimText: options.maxLength}}\r\n</div>", styles: [":host\n{\n display: block;\n overflow: hidden;\n}\n\n.clickable\n{\n cursor: pointer;\n}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
type: Inject,
args: [NOTIFICATION_MESSAGE_OPTIONS]
}, {
type: Optional
}] }] });
//# sourceMappingURL=notificationMessage.component.js.map