cdl-notification/fesm5/cdl-notification.js

This is simple notification npm packege. We can use this packege to display INFO, WARN and ERROR type messages.

import { __decorate } from 'tslib';
import { Component, NgModule } from '@angular/core';
import { trigger, transition, style, animate } from '@angular/animations';
import { CommonModule } from '@angular/common';

var NotificationComponent = /** @class */ (function () {
    function NotificationComponent() {
        var _this = this;
        this.visibleMessage = true;
        this.message = '';
        this.MessageType = MessageType;
        this.type = 'info';
        this.hideTimeout = 5000;
        /**
         * Show message for 5 seconds
         * @memberof NotificationComponent
         * @param type Type Of Message
         * @param message Message want to display
         */
        this.show = function (type, message, timeout) {
            _this.type = type;
            _this.message = message;
            _this.hideTimeout = timeout || 5000;
            _this.hide();
        };
        /**
         * Hide message with after 5 seconds
         * @memberof NotificationComponent
         */
        this.hide = function () {
            if (_this.timeout) {
                clearTimeout(_this.timeout);
                _this.timeout = null;
            }
            _this.timeout = setTimeout(function () {
                _this.visibleMessage = false;
                _this.message = '';
            }, _this.hideTimeout);
        };
    }
    NotificationComponent = __decorate([
        Component({
            selector: 'cdl-notification',
            template: "<div class=\"validations-success mb-10\" [class.info]=\"type === MessageType.INFO\" [class.warn]=\"type === MessageType.WARN\"\n  [class.error]=\"type === MessageType.ERROR\" *ngIf=\"visibleMessage\">\n  <div class=\"rectangle\"></div>\n  <span class=\"group-has\" [innerHtml]=\"message\"></span>\n</div>\n",
            animations: [
                trigger('fadeAnimation', [
                    transition(':enter', [
                        style({ opacity: 0 }),
                        animate('1s ease', style({ opacity: 1 }))
                    ]),
                    transition(':leave', [
                        style({ opacity: 1 }),
                        animate('1s ease', style({ opacity: 0 }))
                    ])
                ])
            ],
            styles: [".validations-success{height:auto;width:100%;max-width:1170px;background-color:#fff;margin-top:15px;min-height:30px;align-items:center;display:flex;padding:5px 0;white-space:normal;word-break:break-word;word-wrap:break-word;border-radius:5px 0 0 5px}.info{border-left:4px solid #33c12e}.warn{border-left:4px solid #ffae42}.error{border-left:4px solid #f73b22}.rectangle{margin:0}.group-has{height:auto;min-height:30px;width:100%;max-width:1170px;color:#152638;font-family:arial;font-size:14px;line-height:18x;margin:0 0 0 10px;align-items:center;display:flex;padding:5px 0;white-space:normal;word-break:break-word;word-wrap:break-word}"]
        })
    ], NotificationComponent);
    return NotificationComponent;
}());
/**
 * Message type enums
 */
var MessageType;
(function (MessageType) {
    MessageType["INFO"] = "info";
    MessageType["WARN"] = "warn";
    MessageType["ERROR"] = "error";
})(MessageType || (MessageType = {}));

var NotificationModule = /** @class */ (function () {
    function NotificationModule() {
    }
    NotificationModule = __decorate([
        NgModule({
            declarations: [NotificationComponent],
            imports: [CommonModule],
            exports: [NotificationComponent]
        })
    ], NotificationModule);
    return NotificationModule;
}());

/*
 * Public API Surface of cdl-notification
 */

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

export { MessageType, NotificationComponent, NotificationModule };
//# sourceMappingURL=cdl-notification.js.map