ems-web-app-messages/fesm2015/ems-web-app-messages.mjs

This angular.io module includes a component and service that can be used to render "Growl" or "Snackbar" style in-app messages.

import * as i0 from '@angular/core';
import { Injectable, Component, HostBinding, Input, HostListener, NgModule } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import { __awaiter } from 'tslib';
import * as i2 from '@angular/platform-browser';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';

class MessagesService {
    constructor() {
        this.currentMessageSource = new BehaviorSubject(undefined);
        this.currentMessage = this.currentMessageSource.asObservable();
    }
    setCurrentMessage(message) {
        this.currentMessageSource.next(message);
    }
}
MessagesService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
MessagesService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesService, decorators: [{
            type: Injectable,
            args: [{
                    providedIn: 'root'
                }]
        }], ctorParameters: function () { return []; } });

var MessageType;
(function (MessageType) {
    MessageType["Growl"] = "growl";
    MessageType["Snackbar"] = "snackbar";
})(MessageType || (MessageType = {}));
var MessagePosition;
(function (MessagePosition) {
    MessagePosition["TopLeft"] = "top left";
    MessagePosition["TopCenter"] = "top center";
    MessagePosition["TopRight"] = "top right";
    MessagePosition["BottomLeft"] = "bottom left";
    MessagePosition["BottomCenter"] = "bottom center";
    MessagePosition["BottomRight"] = "bottom right";
})(MessagePosition || (MessagePosition = {}));

class MessagesComponent {
    constructor(service, sanitizer) {
        this.service = service;
        this.sanitizer = sanitizer;
        this.render = false;
        this.classes = "";
        this.background = "rgba(0,0,0,0.75)";
        this.color = "#fff";
        this.zIndex = 1000;
        this.speed = 0.5;
        this.queue = [];
        this.timeout = 0;
        this.onContainerClick = (element) => {
            this.processMessageQueue(true);
        };
    }
    ngOnInit() {
        this.service.currentMessage.subscribe(message => {
            if (!message && !this.currentMessage)
                return;
            if (!message)
                this.processMessageQueue(true);
            if (!this.validateMessage(message))
                return;
            this.queue.push(message);
            this.processMessageQueue();
        });
    }
    initializeStyles() {
        var _a;
        if (!this.currentMessage)
            return;
        const duration = (_a = this.currentMessage.duration) !== null && _a !== void 0 ? _a : 1;
        const output = `messages { 
      background: ${this.background}; 
      color: ${this.color}; 
      transition-duration: ${this.speed}s; 
      z-index: ${this.zIndex};
    } 
    messages.render {
      transition-duration: ${this.speed}s;
    }`;
        this.styles = this.sanitizer.bypassSecurityTrustHtml(`<style>${output}</style>`);
    }
    processMessageQueue(force = false) {
        var _a, _b, _c, _d;
        return __awaiter(this, void 0, void 0, function* () {
            if (this.currentMessage && !force)
                return;
            yield this.removeCurrentMessage();
            this.currentMessage = this.queue.shift();
            this.classes = `${(_a = this.currentMessage) === null || _a === void 0 ? void 0 : _a.position} ${(_b = this.currentMessage) === null || _b === void 0 ? void 0 : _b.type} ${(_d = (_c = this.currentMessage) === null || _c === void 0 ? void 0 : _c.classes) !== null && _d !== void 0 ? _d : ''}`;
            yield this.tick();
            this.initializeStyles();
            this.showNextMessage();
        });
    }
    removeCurrentMessage() {
        clearTimeout(this.timeout);
        return new Promise((resolve) => {
            if (!this.currentMessage) {
                setTimeout(() => resolve());
            }
            else {
                this.render = false;
                setTimeout(() => resolve(), this.speed * 1000);
            }
        });
    }
    tick() {
        return new Promise((resolve) => {
            setTimeout(() => resolve(), this.speed * 1000);
        });
    }
    showNextMessage() {
        if (!this.currentMessage)
            return;
        setTimeout(() => this.render = true);
        this.timeout = window.setTimeout(() => this.processMessageQueue(true), this.currentMessage.duration * 1000);
    }
    validateMessage(message) {
        const growlPositions = [MessagePosition.BottomLeft, MessagePosition.BottomRight, MessagePosition.TopLeft, MessagePosition.TopRight];
        const snackbarPositions = [MessagePosition.TopCenter, MessagePosition.BottomCenter];
        if (!message)
            return false;
        if (message.type === MessageType.Growl && growlPositions.indexOf(message.position) === -1) {
            throw new Error("Growl messages must use one of the following positions: MessagePosition.BottomLeft, MessagePosition.BottomRight, MessagePosition.TopLeft, MessagePosition.TopRight");
            return false;
        }
        if (message.type === MessageType.Snackbar && snackbarPositions.indexOf(message.position) === -1) {
            throw new Error("Snackbar messages must use one of the following positions: MessagePosition.TopCenter, MessagePosition.BottomCenter");
            return false;
        }
        return true;
    }
}
MessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesComponent, deps: [{ token: MessagesService }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
MessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MessagesComponent, selector: "messages", inputs: { background: "background", color: "color", zIndex: ["z-index", "zIndex"], speed: ["transition-speed", "speed"] }, host: { listeners: { "click": "onContainerClick($event.target)" }, properties: { "class.render": "this.render", "class": "this.classes" } }, ngImport: i0, template: `
    <ng-container *ngTemplateOutlet="currentMessage?.template ?? null"></ng-container>
    <div *ngIf="!currentMessage?.template" [attr.role]="currentMessage ? 'alert':'generic'" class="message-text" [innerHtml]="sanitizer.bypassSecurityTrustHtml(currentMessage?.message || ' ')"></div>
    <div class="style-container" [innerHtml]="styles"></div>
  `, isInline: true, styles: [":host{position:fixed;transition-property:all;border-radius:.5rem;box-sizing:border-box;padding:1rem;opacity:0;pointer-events:none}:host.growl{width:20rem}:host.snackbar{width:20rem}@media only screen and (min-width: 768px){:host.snackbar{width:40rem}}:host.growl.top.right{top:2rem;right:2rem;box-sizing:border-box;transform:translate(calc(100% + 2rem))}:host.growl.top.right.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.top.left{top:2rem;left:2rem;box-sizing:border-box;transform:translate(calc(-100% - 2rem));opacity:0}:host.growl.top.left.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.bottom.left{bottom:2rem;left:2rem;box-sizing:border-box;transform:translate(calc(-100% - 2rem));opacity:0}:host.growl.bottom.left.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.bottom.right{bottom:2rem;right:2rem;box-sizing:border-box;transform:translate(calc(100% + 2rem));opacity:0}:host.growl.bottom.right.render{opacity:1;transform:translate(0);pointer-events:auto}:host.snackbar.top.center{top:2rem;box-sizing:border-box;transform:translateY(calc(-100% - 2rem));opacity:0;border-radius:1rem;left:calc(50% - 10rem)}@media only screen and (min-width: 768px){:host.snackbar.top.center{left:calc(50% - 20rem)}}:host.snackbar.top.center.render{opacity:1;transform:translate(0);pointer-events:auto}:host.snackbar.bottom.center{bottom:2rem;box-sizing:border-box;transform:translateY(calc(100% + 2rem));opacity:0;border-radius:1rem;left:calc(50% - 10rem)}@media only screen and (min-width: 768px){:host.snackbar.bottom.center{left:calc(50% - 20rem)}}:host.snackbar.bottom.center.render{opacity:1;transform:translate(0);pointer-events:auto}\n"], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesComponent, decorators: [{
            type: Component,
            args: [{ selector: 'messages', template: `
    <ng-container *ngTemplateOutlet="currentMessage?.template ?? null"></ng-container>
    <div *ngIf="!currentMessage?.template" [attr.role]="currentMessage ? 'alert':'generic'" class="message-text" [innerHtml]="sanitizer.bypassSecurityTrustHtml(currentMessage?.message || ' ')"></div>
    <div class="style-container" [innerHtml]="styles"></div>
  `, styles: [":host{position:fixed;transition-property:all;border-radius:.5rem;box-sizing:border-box;padding:1rem;opacity:0;pointer-events:none}:host.growl{width:20rem}:host.snackbar{width:20rem}@media only screen and (min-width: 768px){:host.snackbar{width:40rem}}:host.growl.top.right{top:2rem;right:2rem;box-sizing:border-box;transform:translate(calc(100% + 2rem))}:host.growl.top.right.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.top.left{top:2rem;left:2rem;box-sizing:border-box;transform:translate(calc(-100% - 2rem));opacity:0}:host.growl.top.left.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.bottom.left{bottom:2rem;left:2rem;box-sizing:border-box;transform:translate(calc(-100% - 2rem));opacity:0}:host.growl.bottom.left.render{opacity:1;transform:translate(0);pointer-events:auto}:host.growl.bottom.right{bottom:2rem;right:2rem;box-sizing:border-box;transform:translate(calc(100% + 2rem));opacity:0}:host.growl.bottom.right.render{opacity:1;transform:translate(0);pointer-events:auto}:host.snackbar.top.center{top:2rem;box-sizing:border-box;transform:translateY(calc(-100% - 2rem));opacity:0;border-radius:1rem;left:calc(50% - 10rem)}@media only screen and (min-width: 768px){:host.snackbar.top.center{left:calc(50% - 20rem)}}:host.snackbar.top.center.render{opacity:1;transform:translate(0);pointer-events:auto}:host.snackbar.bottom.center{bottom:2rem;box-sizing:border-box;transform:translateY(calc(100% + 2rem));opacity:0;border-radius:1rem;left:calc(50% - 10rem)}@media only screen and (min-width: 768px){:host.snackbar.bottom.center{left:calc(50% - 20rem)}}:host.snackbar.bottom.center.render{opacity:1;transform:translate(0);pointer-events:auto}\n"] }]
        }], ctorParameters: function () { return [{ type: MessagesService }, { type: i2.DomSanitizer }]; }, propDecorators: { render: [{
                type: HostBinding,
                args: ['class.render']
            }], classes: [{
                type: HostBinding,
                args: ['class']
            }], background: [{
                type: Input,
                args: ["background"]
            }], color: [{
                type: Input,
                args: ["color"]
            }], zIndex: [{
                type: Input,
                args: ["z-index"]
            }], speed: [{
                type: Input,
                args: ["transition-speed"]
            }], onContainerClick: [{
                type: HostListener,
                args: ['click', ['$event.target']]
            }] } });

class MessagesModule {
}
MessagesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
MessagesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesModule, declarations: [MessagesComponent], imports: [CommonModule], exports: [MessagesComponent] });
MessagesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesModule, imports: [[
            CommonModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MessagesModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        MessagesComponent
                    ],
                    imports: [
                        CommonModule
                    ],
                    exports: [
                        MessagesComponent
                    ]
                }]
        }] });

/*
 * Public API Surface of messages
 */

/**
 * Generated bundle index. Do not edit.
 */

export { MessagePosition, MessageType, MessagesComponent, MessagesModule, MessagesService };
//# sourceMappingURL=ems-web-app-messages.mjs.map