@anglr/notifications
Version:
Angular module for displaying notifications
115 lines • 5.63 kB
JavaScript
import { Component, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Optional, HostBinding } from '@angular/core';
import { NgClass } from '@angular/common';
import { LocalizePipe, Notification, NotificationSeverity, TrimTextPipe } from '@anglr/common';
import { slideInOutTrigger } from '@anglr/animations';
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 = {};
//######################### public properties - host #########################
/**
* Attach animation directly to component (enter, exit)
* @internal
*/
this.animatedMessage = true;
/**
* 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;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.0", 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: "19.1.0", type: NotificationMessageComponent, isStandalone: true, selector: "notification", host: { properties: { "@slideInOut": "this.animatedMessage" } }, ngImport: i0, template: "<div class=\"{{options.cssClasses.messageDiv}}\" (click)=\"close()\" [ngClass]=\"classObj\">\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizePipe, name: "localize" }, { kind: "pipe", type: TrimTextPipe, name: "trimText" }], animations: [
slideInOutTrigger,
], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.0", ngImport: i0, type: NotificationMessageComponent, decorators: [{
type: Component,
args: [{ selector: 'notification', imports: [
NgClass,
LocalizePipe,
TrimTextPipe,
], animations: [
slideInOutTrigger,
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"{{options.cssClasses.messageDiv}}\" (click)=\"close()\" [ngClass]=\"classObj\">\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
}] }], propDecorators: { animatedMessage: [{
type: HostBinding,
args: ['@slideInOut']
}] } });
//# sourceMappingURL=notificationMessage.component.js.map