cocori-ng/esm2020/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.component.mjs

Cocori-ng is an Angular full of great components & utilites based on Material

import { Component, Inject } from '@angular/core';
import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/snack-bar";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/icon";
// https://medium.com/@abshakekumar/snackbar-angular-material-component-with-multiple-actions-88ea3a9d3ddd
export class ToastErrorStacktraceComponent {
    constructor(matSnackBar, data) {
        this.matSnackBar = matSnackBar;
        this.data = data;
        this.toggleVisibility = true;
        this.errorDebugMessages = [];
    }
    ngOnInit() {
        this.errorDebugMessages = this.data.stacktrace?.httpError?.error?.debug?.messages;
    }
    afficheCache() {
        this.toggleVisibility = !this.toggleVisibility;
    }
    close(event) {
        this.matSnackBar.dismiss();
        event.preventDefault();
    }
    trackBy(index) {
        return index;
    }
}
ToastErrorStacktraceComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ToastErrorStacktraceComponent, deps: [{ token: i1.MatSnackBar }, { token: MAT_SNACK_BAR_DATA }], target: i0.ɵɵFactoryTarget.Component });
ToastErrorStacktraceComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.1", type: ToastErrorStacktraceComponent, selector: "toast-error-stacktrace", ngImport: i0, template: "<div class=\"notification-containeur\">\r\n    <div class=\"container-messages\">\r\n        <div>{{data.message}}</div>\r\n        <div *ngIf=\"data.stacktrace\" class=\"link-plus\" (click)=\"afficheCache()\" title=\"Afficher / masquer les d\u00E9tails techniques de l'erreur\">\r\n\r\n            <div class=\"__link-plus\" *ngIf=\"toggleVisibility; else templateMoins\">\r\n                <div>afficher plus de d\u00E9tails</div>\r\n                <mat-icon>expand_more</mat-icon>\r\n            </div>\r\n            <ng-template #templateMoins>\r\n                <div class=\"__link-plus\">\r\n                    <div>masquer les d\u00E9tails</div>\r\n                    <mat-icon>expand_less</mat-icon>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"!toggleVisibility\" class=\"stacktrace\">\r\n            <div>Date : {{data.stacktrace.dateError}}</div>\r\n            <div>Status : {{data.stacktrace.httpError?.status}} - Id : {{data.stacktrace.httpError?.error.id}}</div>\r\n            <div *ngIf=\"errorDebugMessages.length\">\r\n                <div *ngFor=\"let message of errorDebugMessages; let i = index; trackBy: trackBy\">{{message}}</div>\r\n            </div>\r\n            <div>\r\n                {{data.stacktrace.httpError?.message}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-button type=\"button\" class=\"mat-button\" (click)=\"close($event)\">\r\n        <span class=\"mat-button-wrapper\">Fermer</span>\r\n        <div class=\"mat-button-ripple mat-ripple\"></div>\r\n        <div class=\"mat-button-focus-overlay\"></div>\r\n    </button>\r\n</div>", styles: [".notification-containeur{display:flex;justify-content:space-between;align-items:center}.notification-containeur .container-messages{width:80%}.link-plus{font-size:12px;text-align:center;margin-top:3px;color:#fff}.link-plus .__link-plus{cursor:pointer;display:flex;align-items:center;justify-content:center}.link-plus .__link-plus .mat-icon{font-size:12px;height:12px}.stacktrace{color:#fff;font-size:12px;word-break:break-all;margin-top:10px;line-height:13px;padding:5px;max-height:70px;overflow-y:auto}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0 0 0 8px;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-ripple{overflow:hidden;position:relative}.mat-button .mat-button-focus-overlay{opacity:.1}.mat-button:hover .mat-button-focus-overlay{opacity:.2}.mat-button-focus-overlay{transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-focus-overlay{background:#000}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.1", ngImport: i0, type: ToastErrorStacktraceComponent, decorators: [{
            type: Component,
            args: [{ selector: 'toast-error-stacktrace', template: "<div class=\"notification-containeur\">\r\n    <div class=\"container-messages\">\r\n        <div>{{data.message}}</div>\r\n        <div *ngIf=\"data.stacktrace\" class=\"link-plus\" (click)=\"afficheCache()\" title=\"Afficher / masquer les d\u00E9tails techniques de l'erreur\">\r\n\r\n            <div class=\"__link-plus\" *ngIf=\"toggleVisibility; else templateMoins\">\r\n                <div>afficher plus de d\u00E9tails</div>\r\n                <mat-icon>expand_more</mat-icon>\r\n            </div>\r\n            <ng-template #templateMoins>\r\n                <div class=\"__link-plus\">\r\n                    <div>masquer les d\u00E9tails</div>\r\n                    <mat-icon>expand_less</mat-icon>\r\n                </div>\r\n            </ng-template>\r\n        </div>\r\n        <div *ngIf=\"!toggleVisibility\" class=\"stacktrace\">\r\n            <div>Date : {{data.stacktrace.dateError}}</div>\r\n            <div>Status : {{data.stacktrace.httpError?.status}} - Id : {{data.stacktrace.httpError?.error.id}}</div>\r\n            <div *ngIf=\"errorDebugMessages.length\">\r\n                <div *ngFor=\"let message of errorDebugMessages; let i = index; trackBy: trackBy\">{{message}}</div>\r\n            </div>\r\n            <div>\r\n                {{data.stacktrace.httpError?.message}}\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-button type=\"button\" class=\"mat-button\" (click)=\"close($event)\">\r\n        <span class=\"mat-button-wrapper\">Fermer</span>\r\n        <div class=\"mat-button-ripple mat-ripple\"></div>\r\n        <div class=\"mat-button-focus-overlay\"></div>\r\n    </button>\r\n</div>", styles: [".notification-containeur{display:flex;justify-content:space-between;align-items:center}.notification-containeur .container-messages{width:80%}.link-plus{font-size:12px;text-align:center;margin-top:3px;color:#fff}.link-plus .__link-plus{cursor:pointer;display:flex;align-items:center;justify-content:center}.link-plus .__link-plus .mat-icon{font-size:12px;height:12px}.stacktrace{color:#fff;font-size:12px;word-break:break-all;margin-top:10px;line-height:13px;padding:5px;max-height:70px;overflow-y:auto}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0 0 0 8px;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-ripple{overflow:hidden;position:relative}.mat-button .mat-button-focus-overlay{opacity:.1}.mat-button:hover .mat-button-focus-overlay{opacity:.2}.mat-button-focus-overlay{transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-focus-overlay{background:#000}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MatSnackBar }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_SNACK_BAR_DATA]
                }] }]; } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9hc3QtZXJyb3Itc3RhY2t0cmFjZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb2Nvcmktbmcvc3JjL2ZlYXR1cmUtZm9ybS9zaGFyZWQvY29tcG9uZW50L3RvYXN0LWVycm9yLXN0YWNrdHJhY2UvdG9hc3QtZXJyb3Itc3RhY2t0cmFjZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb2Nvcmktbmcvc3JjL2ZlYXR1cmUtZm9ybS9zaGFyZWQvY29tcG9uZW50L3RvYXN0LWVycm9yLXN0YWNrdHJhY2UvdG9hc3QtZXJyb3Itc3RhY2t0cmFjZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUMxRCxPQUFPLEVBQUUsa0JBQWtCLEVBQWUsTUFBTSw2QkFBNkIsQ0FBQzs7Ozs7QUFHOUUsMEdBQTBHO0FBTTFHLE1BQU0sT0FBTyw2QkFBNkI7SUFLeEMsWUFDVSxXQUF3QixFQUNHLElBQTBCO1FBRHJELGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBQ0csU0FBSSxHQUFKLElBQUksQ0FBc0I7UUFML0QscUJBQWdCLEdBQWEsSUFBSSxDQUFDO1FBQ2xDLHVCQUFrQixHQUFhLEVBQUUsQ0FBQztJQUs5QixDQUFDO0lBRUwsUUFBUTtRQUNOLElBQUksQ0FBQyxrQkFBa0IsR0FBYSxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVUsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxRQUFRLENBQUE7SUFDN0YsQ0FBQztJQUVELFlBQVk7UUFDVixJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUM7SUFDakQsQ0FBQztJQUVELEtBQUssQ0FBQyxLQUFLO1FBQ1QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUUzQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7SUFDekIsQ0FBQztJQUVELE9BQU8sQ0FBQyxLQUFhO1FBQ25CLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQzs7MEhBMUJVLDZCQUE2Qiw2Q0FPOUIsa0JBQWtCOzhHQVBqQiw2QkFBNkIsOERDVjFDLG1vREFnQ007MkZEdEJPLDZCQUE2QjtrQkFMekMsU0FBUzsrQkFDRSx3QkFBd0I7OzBCQVcvQixNQUFNOzJCQUFDLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTUFUX1NOQUNLX0JBUl9EQVRBLCBNYXRTbmFja0JhciB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL3NuYWNrLWJhcic7XHJcbmltcG9ydCB7IEVycm9yU3RhY2t0cmFjZU1vZGVsIH0gZnJvbSAnY29jb3JpLW5nL3NyYy9mZWF0dXJlLWNvcmUnO1xyXG5cclxuLy8gaHR0cHM6Ly9tZWRpdW0uY29tL0BhYnNoYWtla3VtYXIvc25hY2tiYXItYW5ndWxhci1tYXRlcmlhbC1jb21wb25lbnQtd2l0aC1tdWx0aXBsZS1hY3Rpb25zLTg4ZWEzYTlkM2RkZFxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3RvYXN0LWVycm9yLXN0YWNrdHJhY2UnLFxyXG4gIHN0eWxlVXJsczogWycuL3RvYXN0LWVycm9yLXN0YWNrdHJhY2UuY29tcG9uZW50LnNjc3MnXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdG9hc3QtZXJyb3Itc3RhY2t0cmFjZS5jb21wb25lbnQuaHRtbCdcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvYXN0RXJyb3JTdGFja3RyYWNlQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcclxuXHJcbiAgdG9nZ2xlVmlzaWJpbGl0eSA6IGJvb2xlYW4gPSB0cnVlO1xyXG4gIGVycm9yRGVidWdNZXNzYWdlczogc3RyaW5nW10gPSBbXTtcclxuXHJcbiAgY29uc3RydWN0b3IoXHJcbiAgICBwcml2YXRlIG1hdFNuYWNrQmFyOiBNYXRTbmFja0JhcixcclxuICAgIEBJbmplY3QoTUFUX1NOQUNLX0JBUl9EQVRBKSBwdWJsaWMgZGF0YTogRXJyb3JTdGFja3RyYWNlTW9kZWxcclxuICApIHsgfVxyXG5cclxuICBuZ09uSW5pdCgpIHtcclxuICAgIHRoaXMuZXJyb3JEZWJ1Z01lc3NhZ2VzID0gPHN0cmluZ1tdPnRoaXMuZGF0YS5zdGFja3RyYWNlPy5odHRwRXJyb3I/LmVycm9yPy5kZWJ1Zz8ubWVzc2FnZXNcclxuICB9XHJcblxyXG4gIGFmZmljaGVDYWNoZSgpe1xyXG4gICAgdGhpcy50b2dnbGVWaXNpYmlsaXR5ID0gIXRoaXMudG9nZ2xlVmlzaWJpbGl0eTtcclxuICB9XHJcblxyXG4gIGNsb3NlKGV2ZW50KTogdm9pZCB7XHJcbiAgICB0aGlzLm1hdFNuYWNrQmFyLmRpc21pc3MoKTtcclxuXHJcbiAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xyXG4gIH1cclxuXHJcbiAgdHJhY2tCeShpbmRleDogbnVtYmVyKSB7XHJcbiAgICByZXR1cm4gaW5kZXg7XHJcbiAgfVxyXG59XHJcbiIsIjxkaXYgY2xhc3M9XCJub3RpZmljYXRpb24tY29udGFpbmV1clwiPlxyXG4gICAgPGRpdiBjbGFzcz1cImNvbnRhaW5lci1tZXNzYWdlc1wiPlxyXG4gICAgICAgIDxkaXY+e3tkYXRhLm1lc3NhZ2V9fTwvZGl2PlxyXG4gICAgICAgIDxkaXYgKm5nSWY9XCJkYXRhLnN0YWNrdHJhY2VcIiBjbGFzcz1cImxpbmstcGx1c1wiIChjbGljayk9XCJhZmZpY2hlQ2FjaGUoKVwiIHRpdGxlPVwiQWZmaWNoZXIgLyBtYXNxdWVyIGxlcyBkw6l0YWlscyB0ZWNobmlxdWVzIGRlIGwnZXJyZXVyXCI+XHJcblxyXG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiX19saW5rLXBsdXNcIiAqbmdJZj1cInRvZ2dsZVZpc2liaWxpdHk7IGVsc2UgdGVtcGxhdGVNb2luc1wiPlxyXG4gICAgICAgICAgICAgICAgPGRpdj5hZmZpY2hlciBwbHVzIGRlIGTDqXRhaWxzPC9kaXY+XHJcbiAgICAgICAgICAgICAgICA8bWF0LWljb24+ZXhwYW5kX21vcmU8L21hdC1pY29uPlxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPG5nLXRlbXBsYXRlICN0ZW1wbGF0ZU1vaW5zPlxyXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cIl9fbGluay1wbHVzXCI+XHJcbiAgICAgICAgICAgICAgICAgICAgPGRpdj5tYXNxdWVyIGxlcyBkw6l0YWlsczwvZGl2PlxyXG4gICAgICAgICAgICAgICAgICAgIDxtYXQtaWNvbj5leHBhbmRfbGVzczwvbWF0LWljb24+XHJcbiAgICAgICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8ZGl2ICpuZ0lmPVwiIXRvZ2dsZVZpc2liaWxpdHlcIiBjbGFzcz1cInN0YWNrdHJhY2VcIj5cclxuICAgICAgICAgICAgPGRpdj5EYXRlIDoge3tkYXRhLnN0YWNrdHJhY2UuZGF0ZUVycm9yfX08L2Rpdj5cclxuICAgICAgICAgICAgPGRpdj5TdGF0dXMgOiB7e2RhdGEuc3RhY2t0cmFjZS5odHRwRXJyb3I/LnN0YXR1c319IC0gSWQgOiB7e2RhdGEuc3RhY2t0cmFjZS5odHRwRXJyb3I/LmVycm9yLmlkfX08L2Rpdj5cclxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cImVycm9yRGVidWdNZXNzYWdlcy5sZW5ndGhcIj5cclxuICAgICAgICAgICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IG1lc3NhZ2Ugb2YgZXJyb3JEZWJ1Z01lc3NhZ2VzOyBsZXQgaSA9IGluZGV4OyB0cmFja0J5OiB0cmFja0J5XCI+e3ttZXNzYWdlfX08L2Rpdj5cclxuICAgICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgICAgIDxkaXY+XHJcbiAgICAgICAgICAgICAgICB7e2RhdGEuc3RhY2t0cmFjZS5odHRwRXJyb3I/Lm1lc3NhZ2V9fVxyXG4gICAgICAgICAgICA8L2Rpdj5cclxuICAgICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gICAgPGJ1dHRvbiBtYXQtYnV0dG9uIHR5cGU9XCJidXR0b25cIiBjbGFzcz1cIm1hdC1idXR0b25cIiAoY2xpY2spPVwiY2xvc2UoJGV2ZW50KVwiPlxyXG4gICAgICAgIDxzcGFuIGNsYXNzPVwibWF0LWJ1dHRvbi13cmFwcGVyXCI+RmVybWVyPC9zcGFuPlxyXG4gICAgICAgIDxkaXYgY2xhc3M9XCJtYXQtYnV0dG9uLXJpcHBsZSBtYXQtcmlwcGxlXCI+PC9kaXY+XHJcbiAgICAgICAgPGRpdiBjbGFzcz1cIm1hdC1idXR0b24tZm9jdXMtb3ZlcmxheVwiPjwvZGl2PlxyXG4gICAgPC9idXR0b24+XHJcbjwvZGl2PiJdfQ==