ngx-toast-notifier
Version:
This is a nofitications library for Angular
138 lines (131 loc) • 11.9 kB
JavaScript
import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/ngx-toast-notifier.service";
import * as i2 from "@angular/common";
export class NotificationComponent {
constructor(notificationSvc) {
this.notificationSvc = notificationSvc;
}
}
NotificationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NotificationComponent, deps: [{ token: i1.NgxToastNotifierService }], target: i0.ɵɵFactoryTarget.Component });
NotificationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.10", type: NotificationComponent, selector: "ngx-notification", inputs: { notificationData: "notificationData" }, ngImport: i0, template: `
<div
class="wrap-notification"
[ngStyle]="{'background-color' : notificationData.bgColor}"
>
<div class="icon-start">
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'success'">
<path
fill="currentColor"
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'info'">
<path
fill="currentColor"
d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'warning'">
<path
fill="currentColor"
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'danger'">
<path
fill="currentColor"
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
/>
</svg>
</div>
<div class="wrap-texts">
<h3>{{ notificationData.title }}</h3>
<p>{{ notificationData.text }}</p>
</div>
</div>
`, isInline: true, styles: [":host{cursor:default}.wrap-notification{display:flex;padding:10px 15px;width:100%;border-radius:5px;margin-bottom:8px;color:#fff;min-height:50px}.icon-start{height:30px;width:30px;flex:0 0 30px;margin-right:5px}.wrap-texts{flex:auto}.wrap-texts h3{font-size:16px;width:100%;margin:0}.wrap-texts p{font-size:14px;width:100%;margin:0}.wrap-notification:hover{box-shadow:0 10px 70px -3px #0000001a}\n"], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.10", ngImport: i0, type: NotificationComponent, decorators: [{
type: Component,
args: [{
selector: 'ngx-notification',
template: `
<div
class="wrap-notification"
[ngStyle]="{'background-color' : notificationData.bgColor}"
>
<div class="icon-start">
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'success'">
<path
fill="currentColor"
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'info'">
<path
fill="currentColor"
d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'warning'">
<path
fill="currentColor"
d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"
/>
</svg>
<svg viewBox="0 0 24 24" *ngIf="notificationData.icon === 'danger'">
<path
fill="currentColor"
d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2C6.47,2 2,6.47 2,12C2,17.53 6.47,22 12,22C17.53,22 22,17.53 22,12C22,6.47 17.53,2 12,2M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"
/>
</svg>
</div>
<div class="wrap-texts">
<h3>{{ notificationData.title }}</h3>
<p>{{ notificationData.text }}</p>
</div>
</div>
`,
styles: [
`
:host{
cursor: default;
}
.wrap-notification {
display: flex;
padding: 10px 15px;
width: 100%;
border-radius: 5px;
margin-bottom: 8px;
color: #ffffff;
min-height: 50px;
}
.icon-start {
height: 30px;
width: 30px;
flex: 0 0 30px;
margin-right: 5px;
}
.wrap-texts {
flex: auto;
}
.wrap-texts h3 {
font-size: 16px;
width: 100%;
margin: 0;
}
.wrap-texts p {
font-size: 14px;
width: 100%;
margin: 0;
}
.wrap-notification:hover {
box-shadow: 0px 10px 70px -3px rgba(0, 0, 0, 0.1);
}
`,
],
}]
}], ctorParameters: function () { return [{ type: i1.NgxToastNotifierService }]; }, propDecorators: { notificationData: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm90aWZpY2F0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC10b2FzdC1ub3RpZmllci9zcmMvbGliL2NvbXBvbmVudHMvbm90aWZpY2F0aW9uL25vdGlmaWNhdGlvbi5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7Ozs7QUF3RmpELE1BQU0sT0FBTyxxQkFBcUI7SUFFaEMsWUFBb0IsZUFBd0M7UUFBeEMsb0JBQWUsR0FBZixlQUFlLENBQXlCO0lBQUcsQ0FBQzs7bUhBRnJELHFCQUFxQjt1R0FBckIscUJBQXFCLDBHQWxGdEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FxQ1Q7NEZBNkNVLHFCQUFxQjtrQkFwRmpDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBcUNUO29CQUNELE1BQU0sRUFBRTt3QkFDTjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztLQXdDQztxQkFDRjtpQkFDRjs4R0FFVSxnQkFBZ0I7c0JBQXhCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IElOb3RpZmljYXRpb24gfSBmcm9tICcuLi8uLi9pbnRlcmZhY2VzL2ktbm90aWZpY2F0aW9uJztcclxuaW1wb3J0IHsgTmd4VG9hc3ROb3RpZmllclNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9uZ3gtdG9hc3Qtbm90aWZpZXIuc2VydmljZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ25neC1ub3RpZmljYXRpb24nLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8ZGl2XHJcbiAgICAgIGNsYXNzPVwid3JhcC1ub3RpZmljYXRpb25cIlxyXG4gICAgICBbbmdTdHlsZV09XCJ7J2JhY2tncm91bmQtY29sb3InIDogbm90aWZpY2F0aW9uRGF0YS5iZ0NvbG9yfVwiXHJcbiAgICA+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJpY29uLXN0YXJ0XCI+XHJcbiAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgKm5nSWY9XCJub3RpZmljYXRpb25EYXRhLmljb24gPT09ICdzdWNjZXNzJ1wiPlxyXG4gICAgICAgICAgPHBhdGhcclxuICAgICAgICAgICAgZmlsbD1cImN1cnJlbnRDb2xvclwiXHJcbiAgICAgICAgICAgIGQ9XCJNMTIgMkM2LjUgMiAyIDYuNSAyIDEyUzYuNSAyMiAxMiAyMiAyMiAxNy41IDIyIDEyIDE3LjUgMiAxMiAyTTEyIDIwQzcuNTkgMjAgNCAxNi40MSA0IDEyUzcuNTkgNCAxMiA0IDIwIDcuNTkgMjAgMTIgMTYuNDEgMjAgMTIgMjBNMTYuNTkgNy41OEwxMCAxNC4xN0w3LjQxIDExLjU5TDYgMTNMMTAgMTdMMTggOUwxNi41OSA3LjU4WlwiXHJcbiAgICAgICAgICAvPlxyXG4gICAgICAgIDwvc3ZnPlxyXG4gICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAyNCAyNFwiICpuZ0lmPVwibm90aWZpY2F0aW9uRGF0YS5pY29uID09PSAnaW5mbydcIj5cclxuICAgICAgICAgIDxwYXRoXHJcbiAgICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICBkPVwiTTExLDlIMTNWN0gxMU0xMiwyMEM3LjU5LDIwIDQsMTYuNDEgNCwxMkM0LDcuNTkgNy41OSw0IDEyLDRDMTYuNDEsNCAyMCw3LjU5IDIwLDEyQzIwLDE2LjQxIDE2LjQxLDIwIDEyLDIwTTEyLDJBMTAsMTAgMCAwLDAgMiwxMkExMCwxMCAwIDAsMCAxMiwyMkExMCwxMCAwIDAsMCAyMiwxMkExMCwxMCAwIDAsMCAxMiwyTTExLDE3SDEzVjExSDExVjE3WlwiXHJcbiAgICAgICAgICAvPlxyXG4gICAgICAgIDwvc3ZnPlxyXG4gICAgICAgIDxzdmcgdmlld0JveD1cIjAgMCAyNCAyNFwiICpuZ0lmPVwibm90aWZpY2F0aW9uRGF0YS5pY29uID09PSAnd2FybmluZydcIj5cclxuICAgICAgICAgIDxwYXRoXHJcbiAgICAgICAgICAgIGZpbGw9XCJjdXJyZW50Q29sb3JcIlxyXG4gICAgICAgICAgICBkPVwiTTExLDE1SDEzVjE3SDExVjE1TTExLDdIMTNWMTNIMTFWN00xMiwyQzYuNDcsMiAyLDYuNSAyLDEyQTEwLDEwIDAgMCwwIDEyLDIyQTEwLDEwIDAgMCwwIDIyLDEyQTEwLDEwIDAgMCwwIDEyLDJNMTIsMjBBOCw4IDAgMCwxIDQsMTJBOCw4IDAgMCwxIDEyLDRBOCw4IDAgMCwxIDIwLDEyQTgsOCAwIDAsMSAxMiwyMFpcIlxyXG4gICAgICAgICAgLz5cclxuICAgICAgICA8L3N2Zz5cclxuXHJcbiAgICAgICAgPHN2ZyB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgKm5nSWY9XCJub3RpZmljYXRpb25EYXRhLmljb24gPT09ICdkYW5nZXInXCI+XHJcbiAgICAgICAgICA8cGF0aFxyXG4gICAgICAgICAgICBmaWxsPVwiY3VycmVudENvbG9yXCJcclxuICAgICAgICAgICAgZD1cIk0xMiwyMEM3LjU5LDIwIDQsMTYuNDEgNCwxMkM0LDcuNTkgNy41OSw0IDEyLDRDMTYuNDEsNCAyMCw3LjU5IDIwLDEyQzIwLDE2LjQxIDE2LjQxLDIwIDEyLDIwTTEyLDJDNi40NywyIDIsNi40NyAyLDEyQzIsMTcuNTMgNi40NywyMiAxMiwyMkMxNy41MywyMiAyMiwxNy41MyAyMiwxMkMyMiw2LjQ3IDE3LjUzLDIgMTIsMk0xNC41OSw4TDEyLDEwLjU5TDkuNDEsOEw4LDkuNDFMMTAuNTksMTJMOCwxNC41OUw5LjQxLDE2TDEyLDEzLjQxTDE0LjU5LDE2TDE2LDE0LjU5TDEzLjQxLDEyTDE2LDkuNDFMMTQuNTksOFpcIlxyXG4gICAgICAgICAgLz5cclxuICAgICAgICA8L3N2Zz5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgY2xhc3M9XCJ3cmFwLXRleHRzXCI+XHJcbiAgICAgICAgPGgzPnt7IG5vdGlmaWNhdGlvbkRhdGEudGl0bGUgfX08L2gzPlxyXG4gICAgICAgIDxwPnt7IG5vdGlmaWNhdGlvbkRhdGEudGV4dCB9fTwvcD5cclxuICAgICAgPC9kaXY+XHJcbiAgICA8L2Rpdj5cclxuICBgLFxyXG4gIHN0eWxlczogW1xyXG4gICAgYFxyXG4gICAgICA6aG9zdHtcclxuICAgICAgICBjdXJzb3I6IGRlZmF1bHQ7XHJcbiAgICAgIH1cclxuICAgICAgLndyYXAtbm90aWZpY2F0aW9uIHtcclxuICAgICAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgICAgIHBhZGRpbmc6IDEwcHggMTVweDtcclxuICAgICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XHJcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogOHB4O1xyXG4gICAgICAgIGNvbG9yOiAjZmZmZmZmO1xyXG4gICAgICAgIG1pbi1oZWlnaHQ6IDUwcHg7XHJcbiAgICAgIH1cclxuXHJcbiAgICAgIC5pY29uLXN0YXJ0IHtcclxuICAgICAgICBoZWlnaHQ6IDMwcHg7XHJcbiAgICAgICAgd2lkdGg6IDMwcHg7XHJcbiAgICAgICAgZmxleDogMCAwIDMwcHg7XHJcbiAgICAgICAgbWFyZ2luLXJpZ2h0OiA1cHg7XHJcbiAgICAgIH1cclxuICAgICAgXHJcbiAgICAgIC53cmFwLXRleHRzIHtcclxuICAgICAgICBmbGV4OiBhdXRvO1xyXG4gICAgICB9XHJcblxyXG4gICAgICAud3JhcC10ZXh0cyBoMyB7XHJcbiAgICAgICAgZm9udC1zaXplOiAxNnB4O1xyXG4gICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgIG1hcmdpbjogMDtcclxuICAgICAgfVxyXG5cclxuICAgICAgLndyYXAtdGV4dHMgcCB7XHJcbiAgICAgICAgZm9udC1zaXplOiAxNHB4O1xyXG4gICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgIG1hcmdpbjogMDtcclxuICAgICAgfVxyXG5cclxuICAgICAgLndyYXAtbm90aWZpY2F0aW9uOmhvdmVyIHtcclxuICAgICAgICBib3gtc2hhZG93OiAwcHggMTBweCA3MHB4IC0zcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xyXG4gICAgICB9XHJcbiAgICBgLFxyXG4gIF0sXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBOb3RpZmljYXRpb25Db21wb25lbnQge1xyXG4gIEBJbnB1dCgpIG5vdGlmaWNhdGlvbkRhdGEhOiBJTm90aWZpY2F0aW9uO1xyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgbm90aWZpY2F0aW9uU3ZjOiBOZ3hUb2FzdE5vdGlmaWVyU2VydmljZSkge31cclxuXHJcbn1cclxuIl19