UNPKG

ng-toster

Version:

A lightweight and customizable toaster notification library for Angular applications, providing elegant and responsive toast messages for alerts, errors, success, and information.

1 lines 8.67 kB
{"version":3,"file":"ng-toster.mjs","sources":["../../../projects/ng-toster/src/lib/ng-toster.service.ts","../../../projects/ng-toster/src/lib/ng-toster.component.ts","../../../projects/ng-toster/src/lib/toster.module.ts","../../../projects/ng-toster/src/public-api.ts","../../../projects/ng-toster/src/ng-toster.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { Subject, Observable } from 'rxjs';\r\n\r\n@Injectable({\r\n providedIn: 'root',\r\n})\r\nexport class TosterService {\r\n private toastSubject = new Subject<{ message: string; type: string; duration?: number }>();\r\n\r\n show(message: string, type: 'success' | 'error' | 'info' | 'warning', duration?: number) {\r\n this.toastSubject.next({ message, type, duration });\r\n }\r\n\r\n getToasts(): Observable<{ message: string; type: string; duration?: number }> {\r\n return this.toastSubject.asObservable();\r\n }\r\n}\r\n","import { Component, OnInit } from '@angular/core';\r\nimport { TosterService } from './ng-toster.service';\r\n\r\n@Component({\r\n selector: 'ng-toster',\r\n template: `\r\n <link\r\n rel=\"stylesheet\"\r\n href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"\r\n />\r\n\r\n <div id=\"toastBox\">\r\n <div *ngFor=\"let toast of toasts\" class=\"toast\">\r\n <i\r\n [ngClass]=\"[getIcon(toast.type)]\"\r\n [style.color]=\"getColor(toast.type)\"\r\n ></i>\r\n\r\n <div class=\"message\">\r\n <span class=\"text text-1\">{{ toast.type }}</span>\r\n <span class=\"text text-2\">{{ toast.message }}</span>\r\n </div>\r\n <div\r\n class=\"progress\"\r\n [ngStyle]=\"{ background: getColor(toast.type) }\"\r\n ></div>\r\n </div>\r\n </div>\r\n `,\r\n styles: [\r\n `\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Poppins', sans-serif;\r\n }\r\n\r\n body {\r\n background: #f7edff;\r\n }\r\n\r\n #toastBox {\r\n position: absolute;\r\n top: 10px;\r\n right: 15px;\r\n display: flex;\r\n align-items: flex-end;\r\n flex-direction: column;\r\n overflow: hidden;\r\n padding: 20px;\r\n \r\n }\r\n\r\n .toast {\r\n width: 400px;\r\n height: 80px;\r\n background: #fff;\r\n font-weight: 500;\r\n margin: 15px 0;\r\n box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n border-radius: 12px 12px 0px 0px;\r\n animation: slideIn 0.3s ease-out;\r\n }\r\n\r\n @keyframes slideIn {\r\n from {\r\n transform: translateX(100%);\r\n opacity: 0;\r\n }\r\n to {\r\n transform: translateX(0);\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .toast i {\r\n margin: 0 20px;\r\n font-size: 35px;\r\n color: #fff;\r\n }\r\n\r\n .toast.error i {\r\n color: red;\r\n }\r\n\r\n .toast.invalid i {\r\n color: orange;\r\n }\r\n\r\n .toast .message {\r\n display: flex;\r\n flex-direction: column;\r\n margin: 0 20px;\r\n }\r\n\r\n .message .text {\r\n font-size: 16px;\r\n font-weight: 400;\r\n color: #666666;\r\n }\r\n\r\n .message .text.text-1 {\r\n font-weight: 600;\r\n color: #333;\r\n }\r\n\r\n .progress {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 5px;\r\n animation: anim 5s linear forwards;\r\n }\r\n\r\n @keyframes anim {\r\n 100% {\r\n width: 0;\r\n }\r\n }\r\n\r\n \r\n `,\r\n ],\r\n})\r\nexport class TosterComponent implements OnInit {\r\n toasts: { message: string; type: string }[] = [];\r\n\r\n constructor(private tosterService: TosterService) {}\r\n\r\n ngOnInit(): void {\r\n this.tosterService.getToasts().subscribe((toast) => {\r\n this.toasts.push(toast);\r\n setTimeout(() => this.toasts.shift(), toast.duration || 5000);\r\n });\r\n }\r\n getIcon(type: string) {\r\n const icons: Record<string, string> = {\r\n success: 'fa fa-check-circle fa-2x ',\r\n error: 'fa fa-times-circle fa-2x ',\r\n warning: 'fa fa-exclamation-circle fa-2x ',\r\n info: 'fa fa-info-circle fa-2x ',\r\n };\r\n return icons[type] || 'fa-solid fa-circle-check';\r\n }\r\n getColor(type: string) {\r\n const colors: Record<string, string> = {\r\n success: 'green',\r\n error: 'red',\r\n warning: 'orange',\r\n info: 'blue',\r\n };\r\n return colors[type] || 'black';\r\n }\r\n}\r\n\r\n\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { TosterComponent } from '../lib/ng-toster.component';\r\n\r\n@NgModule({\r\n declarations: [TosterComponent],\r\n imports: [CommonModule],\r\n exports: [TosterComponent],\r\n})\r\nexport class TosterModule {}\r\n","/*\r\n * Public API Surface of ng-toster\r\n */\r\n\r\nexport * from './lib/ng-toster.service';\r\nexport * from './lib/ng-toster.component';\r\nexport * from './lib/toster.module';\r\n\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TosterService"],"mappings":"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"}