ng-toast-stack/esm2020/lib/ng-toast-stack.component.mjs

Beautiful & easy to use toast stack messages, having auto close, pause, resume functionality and customization.

import { trigger, transition, style, animate, query, stagger, } from '@angular/animations';
import { Component } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "./ng-toast-stack.service";
import * as i2 from "./svg-icon/svg-icon.component";
import * as i3 from "@angular/common";
const listAnimation = trigger('listAnimation', [
    transition('* <=> *', [
        query(':enter', [
            style({ opacity: 0, transform: 'translateX(32px)' }),
            stagger('300ms', animate('300ms ease', style({ opacity: 1, transform: 'translateX(0px)' }))),
        ], { optional: true }),
        query(':leave', animate('200ms ease-in-out', style({ opacity: 0, transform: 'translateY(32px)' })), {
            optional: true,
        }),
    ]),
]);
export class NgToastStackComponent {
    constructor(ns) {
        this.ns = ns;
    }
    ngOnInit() { }
}
NgToastStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NgToastStackComponent, deps: [{ token: i1.NgToastStackService }], target: i0.ɵɵFactoryTarget.Component });
NgToastStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: NgToastStackComponent, selector: "ng-toast-stack", ngImport: i0, template: "<div class=\"ng-toast-stack-container\" [style]=\"ns.toastsBag.length == 0 ? 'display:none' : ''\">\n  <div class=\"ng-toast-stack-list\" [@listAnimation]=\"ns.toastsBag.length\">\n    <div class=\"ng-toast-stack\" *ngFor=\"let toast of ns.toastsBag.reverse()\" (click)=\"ns.pop(toast.id)\"\n      (mouseover)=\"toast.pauseOnHover? toast.timerRef?.pause():''\"\n      (mouseout)=\"toast.pauseOnHover? toast.timerRef?.resume():''\">\n      <div class=\"ng-toast-stack-content-container-outer\">\n        <div class=\"ng-toast-stack-content-container-inner\">\n          <div class=\"ng-toast-stack-icon\" *ngIf=\"toast.icon\">\n            <app-svg-icon [type]=\"toast.type\"></app-svg-icon>\n          </div>\n\n          <div class=\"ng-toast-stack-content\" [ngStyle]=\"{'margin-left': toast.icon?'12px':''}\">\n            <h5 class=\"ng-toast-stack-title\">\n              {{ toast?.title }}\n            </h5>\n            <p class=\"ng-toast-stack-message\">\n              {{ toast.msg }}\n            </p>\n          </div>\n          <div class=\"ng-toast-stack-icon-close\">\n            <svg class=\"ng-toast-stack-icon-close-size\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"toast.autoClose\" class=\"ng-toast-stack-timer\">\n        <div class=\"ng-toast-stack-timer-bar\" [ngStyle]=\"{'width': (toast.timerRef.remainingPercentage)+'%'}\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".ng-toast-stack{position:relative;margin-top:1rem;overflow:hidden;background-color:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;cursor:pointer;pointer-events:auto;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ng-toast-stack-content-container-outer{height:100%;padding:8px 6px 8px 12px;overflow:hidden;border-radius:8px;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.ng-toast-stack-content-container-inner{display:flex;align-items:flex-start;justify-content:flex-start;flex-shrink:0}.ng-toast-stack-content{width:100%}.ng-toast-stack-title{font-size:14px;line-height:20px;font-weight:500;margin:0;color:#1f2937}.ng-toast-stack-message{height:100%;overflow-y:auto;color:#4b5563;font-size:12px;line-height:16px;max-height:384px;margin:0}.ng-toast-stack-icon-close{display:flex;color:#d1d5db;align-items:center;flex-shrink:0;padding-left:8px;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.ng-toast-stack-content-container-outer:hover .ng-toast-stack-icon-close{color:#6b7280}.ng-toast-stack-icon{width:40px;height:40px}.ng-toast-stack-icon-close-size{width:1.5rem;height:1.5rem}.ng-toast-stack-timer{position:absolute;bottom:0;width:100%;height:.25rem;background-color:#e5e7ebbf}.ng-toast-stack-timer-bar{height:4px;background-color:#d1d5db}.ng-toast-stack-list{width:100%;max-width:24rem;z-index:1000}.ng-toast-stack-container{position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:flex;align-items:flex-start;justify-content:flex-end;padding:1.5rem 1rem;pointer-events:none;z-index:1000}@media (min-width: 640px){.ng-toast-stack-container{padding:24px}}\n"], components: [{ type: i2.SvgIconComponent, selector: "app-svg-icon", inputs: ["type"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [listAnimation] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: NgToastStackComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-toast-stack', animations: [listAnimation], template: "<div class=\"ng-toast-stack-container\" [style]=\"ns.toastsBag.length == 0 ? 'display:none' : ''\">\n  <div class=\"ng-toast-stack-list\" [@listAnimation]=\"ns.toastsBag.length\">\n    <div class=\"ng-toast-stack\" *ngFor=\"let toast of ns.toastsBag.reverse()\" (click)=\"ns.pop(toast.id)\"\n      (mouseover)=\"toast.pauseOnHover? toast.timerRef?.pause():''\"\n      (mouseout)=\"toast.pauseOnHover? toast.timerRef?.resume():''\">\n      <div class=\"ng-toast-stack-content-container-outer\">\n        <div class=\"ng-toast-stack-content-container-inner\">\n          <div class=\"ng-toast-stack-icon\" *ngIf=\"toast.icon\">\n            <app-svg-icon [type]=\"toast.type\"></app-svg-icon>\n          </div>\n\n          <div class=\"ng-toast-stack-content\" [ngStyle]=\"{'margin-left': toast.icon?'12px':''}\">\n            <h5 class=\"ng-toast-stack-title\">\n              {{ toast?.title }}\n            </h5>\n            <p class=\"ng-toast-stack-message\">\n              {{ toast.msg }}\n            </p>\n          </div>\n          <div class=\"ng-toast-stack-icon-close\">\n            <svg class=\"ng-toast-stack-icon-close-size\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\">\n              <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n            </svg>\n          </div>\n        </div>\n      </div>\n      <div *ngIf=\"toast.autoClose\" class=\"ng-toast-stack-timer\">\n        <div class=\"ng-toast-stack-timer-bar\" [ngStyle]=\"{'width': (toast.timerRef.remainingPercentage)+'%'}\">\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".ng-toast-stack{position:relative;margin-top:1rem;overflow:hidden;background-color:#fff;border-radius:.5rem;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;cursor:pointer;pointer-events:auto;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}.ng-toast-stack-content-container-outer{height:100%;padding:8px 6px 8px 12px;overflow:hidden;border-radius:8px;box-shadow:0 1px 3px #0000001a,0 1px 2px -1px #0000001a}.ng-toast-stack-content-container-inner{display:flex;align-items:flex-start;justify-content:flex-start;flex-shrink:0}.ng-toast-stack-content{width:100%}.ng-toast-stack-title{font-size:14px;line-height:20px;font-weight:500;margin:0;color:#1f2937}.ng-toast-stack-message{height:100%;overflow-y:auto;color:#4b5563;font-size:12px;line-height:16px;max-height:384px;margin:0}.ng-toast-stack-icon-close{display:flex;color:#d1d5db;align-items:center;flex-shrink:0;padding-left:8px;transition-property:color,background-color,border-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}.ng-toast-stack-content-container-outer:hover .ng-toast-stack-icon-close{color:#6b7280}.ng-toast-stack-icon{width:40px;height:40px}.ng-toast-stack-icon-close-size{width:1.5rem;height:1.5rem}.ng-toast-stack-timer{position:absolute;bottom:0;width:100%;height:.25rem;background-color:#e5e7ebbf}.ng-toast-stack-timer-bar{height:4px;background-color:#d1d5db}.ng-toast-stack-list{width:100%;max-width:24rem;z-index:1000}.ng-toast-stack-container{position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:flex;align-items:flex-start;justify-content:flex-end;padding:1.5rem 1rem;pointer-events:none;z-index:1000}@media (min-width: 640px){.ng-toast-stack-container{padding:24px}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.NgToastStackService }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmctdG9hc3Qtc3RhY2suY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vcHJvamVjdHMvbmctdG9hc3Qtc3RhY2svc3JjL2xpYi9uZy10b2FzdC1zdGFjay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy10b2FzdC1zdGFjay9zcmMvbGliL25nLXRvYXN0LXN0YWNrLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxPQUFPLEVBQ1AsVUFBVSxFQUNWLEtBQUssRUFDTCxPQUFPLEVBQ1AsS0FBSyxFQUNMLE9BQU8sR0FDUixNQUFNLHFCQUFxQixDQUFDO0FBQzdCLE9BQU8sRUFBRSxTQUFTLEVBQVUsTUFBTSxlQUFlLENBQUM7Ozs7O0FBR2xELE1BQU0sYUFBYSxHQUFHLE9BQU8sQ0FBQyxlQUFlLEVBQUU7SUFDN0MsVUFBVSxDQUFDLFNBQVMsRUFBRTtRQUNwQixLQUFLLENBQ0gsUUFBUSxFQUNSO1lBQ0UsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQztZQUNwRCxPQUFPLENBQ0wsT0FBTyxFQUNQLE9BQU8sQ0FDTCxZQUFZLEVBQ1osS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsaUJBQWlCLEVBQUUsQ0FBQyxDQUNwRCxDQUNGO1NBQ0YsRUFDRCxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FDbkI7UUFDRCxLQUFLLENBQ0gsUUFBUSxFQUNSLE9BQU8sQ0FDTCxtQkFBbUIsRUFDbkIsS0FBSyxDQUFDLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsQ0FBQyxDQUNyRCxFQUNEO1lBQ0UsUUFBUSxFQUFFLElBQUk7U0FDZixDQUNGO0tBQ0YsQ0FBQztDQUNILENBQUMsQ0FBQztBQVFILE1BQU0sT0FBTyxxQkFBcUI7SUFDaEMsWUFBbUIsRUFBdUI7UUFBdkIsT0FBRSxHQUFGLEVBQUUsQ0FBcUI7SUFBSSxDQUFDO0lBRS9DLFFBQVEsS0FBVyxDQUFDOztrSEFIVCxxQkFBcUI7c0dBQXJCLHFCQUFxQixzREM5Q2xDLGtxREFpQ00sMG5GRFdRLENBQUMsYUFBYSxDQUFDOzJGQUVoQixxQkFBcUI7a0JBTmpDLFNBQVM7K0JBQ0UsZ0JBQWdCLGNBR2QsQ0FBQyxhQUFhLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICB0cmlnZ2VyLFxuICB0cmFuc2l0aW9uLFxuICBzdHlsZSxcbiAgYW5pbWF0ZSxcbiAgcXVlcnksXG4gIHN0YWdnZXIsXG59IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5nVG9hc3RTdGFja1NlcnZpY2UgfSBmcm9tICcuL25nLXRvYXN0LXN0YWNrLnNlcnZpY2UnO1xuXG5jb25zdCBsaXN0QW5pbWF0aW9uID0gdHJpZ2dlcignbGlzdEFuaW1hdGlvbicsIFtcbiAgdHJhbnNpdGlvbignKiA8PT4gKicsIFtcbiAgICBxdWVyeShcbiAgICAgICc6ZW50ZXInLFxuICAgICAgW1xuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVgoMzJweCknIH0pLFxuICAgICAgICBzdGFnZ2VyKFxuICAgICAgICAgICczMDBtcycsXG4gICAgICAgICAgYW5pbWF0ZShcbiAgICAgICAgICAgICczMDBtcyBlYXNlJyxcbiAgICAgICAgICAgIHN0eWxlKHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgwcHgpJyB9KVxuICAgICAgICAgIClcbiAgICAgICAgKSxcbiAgICAgIF0sXG4gICAgICB7IG9wdGlvbmFsOiB0cnVlIH1cbiAgICApLFxuICAgIHF1ZXJ5KFxuICAgICAgJzpsZWF2ZScsXG4gICAgICBhbmltYXRlKFxuICAgICAgICAnMjAwbXMgZWFzZS1pbi1vdXQnLFxuICAgICAgICBzdHlsZSh7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogJ3RyYW5zbGF0ZVkoMzJweCknIH0pXG4gICAgICApLFxuICAgICAge1xuICAgICAgICBvcHRpb25hbDogdHJ1ZSxcbiAgICAgIH1cbiAgICApLFxuICBdKSxcbl0pO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZy10b2FzdC1zdGFjaycsXG4gIHRlbXBsYXRlVXJsOiAnLi9uZy10b2FzdC1zdGFjay5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL25nLXRvYXN0LXN0YWNrLmNvbXBvbmVudC5jc3MnXSxcbiAgYW5pbWF0aW9uczogW2xpc3RBbmltYXRpb25dLFxufSlcbmV4cG9ydCBjbGFzcyBOZ1RvYXN0U3RhY2tDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBjb25zdHJ1Y3RvcihwdWJsaWMgbnM6IE5nVG9hc3RTdGFja1NlcnZpY2UpIHsgfVxuXG4gIG5nT25Jbml0KCk6IHZvaWQgeyB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibmctdG9hc3Qtc3RhY2stY29udGFpbmVyXCIgW3N0eWxlXT1cIm5zLnRvYXN0c0JhZy5sZW5ndGggPT0gMCA/ICdkaXNwbGF5Om5vbmUnIDogJydcIj5cbiAgPGRpdiBjbGFzcz1cIm5nLXRvYXN0LXN0YWNrLWxpc3RcIiBbQGxpc3RBbmltYXRpb25dPVwibnMudG9hc3RzQmFnLmxlbmd0aFwiPlxuICAgIDxkaXYgY2xhc3M9XCJuZy10b2FzdC1zdGFja1wiICpuZ0Zvcj1cImxldCB0b2FzdCBvZiBucy50b2FzdHNCYWcucmV2ZXJzZSgpXCIgKGNsaWNrKT1cIm5zLnBvcCh0b2FzdC5pZClcIlxuICAgICAgKG1vdXNlb3Zlcik9XCJ0b2FzdC5wYXVzZU9uSG92ZXI/IHRvYXN0LnRpbWVyUmVmPy5wYXVzZSgpOicnXCJcbiAgICAgIChtb3VzZW91dCk9XCJ0b2FzdC5wYXVzZU9uSG92ZXI/IHRvYXN0LnRpbWVyUmVmPy5yZXN1bWUoKTonJ1wiPlxuICAgICAgPGRpdiBjbGFzcz1cIm5nLXRvYXN0LXN0YWNrLWNvbnRlbnQtY29udGFpbmVyLW91dGVyXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJuZy10b2FzdC1zdGFjay1jb250ZW50LWNvbnRhaW5lci1pbm5lclwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJuZy10b2FzdC1zdGFjay1pY29uXCIgKm5nSWY9XCJ0b2FzdC5pY29uXCI+XG4gICAgICAgICAgICA8YXBwLXN2Zy1pY29uIFt0eXBlXT1cInRvYXN0LnR5cGVcIj48L2FwcC1zdmctaWNvbj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJuZy10b2FzdC1zdGFjay1jb250ZW50XCIgW25nU3R5bGVdPVwieydtYXJnaW4tbGVmdCc6IHRvYXN0Lmljb24/JzEycHgnOicnfVwiPlxuICAgICAgICAgICAgPGg1IGNsYXNzPVwibmctdG9hc3Qtc3RhY2stdGl0bGVcIj5cbiAgICAgICAgICAgICAge3sgdG9hc3Q/LnRpdGxlIH19XG4gICAgICAgICAgICA8L2g1PlxuICAgICAgICAgICAgPHAgY2xhc3M9XCJuZy10b2FzdC1zdGFjay1tZXNzYWdlXCI+XG4gICAgICAgICAgICAgIHt7IHRvYXN0Lm1zZyB9fVxuICAgICAgICAgICAgPC9wPlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJuZy10b2FzdC1zdGFjay1pY29uLWNsb3NlXCI+XG4gICAgICAgICAgICA8c3ZnIGNsYXNzPVwibmctdG9hc3Qtc3RhY2staWNvbi1jbG9zZS1zaXplXCIgZmlsbD1cIm5vbmVcIiBzdHJva2U9XCJjdXJyZW50Q29sb3JcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCJcbiAgICAgICAgICAgICAgeG1sbnM9XCJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Z1wiPlxuICAgICAgICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiBzdHJva2Utd2lkdGg9XCIyXCIgZD1cIk02IDE4TDE4IDZNNiA2bDEyIDEyXCI+PC9wYXRoPlxuICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2ICpuZ0lmPVwidG9hc3QuYXV0b0Nsb3NlXCIgY2xhc3M9XCJuZy10b2FzdC1zdGFjay10aW1lclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibmctdG9hc3Qtc3RhY2stdGltZXItYmFyXCIgW25nU3R5bGVdPVwieyd3aWR0aCc6ICh0b2FzdC50aW1lclJlZi5yZW1haW5pbmdQZXJjZW50YWdlKSsnJSd9XCI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+Il19