cnp-dialog
Version:
A simple dialog use angular material
62 lines • 5.57 kB
JavaScript
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { ErrorDialog } from '../model/dialog-type';
export class ErrorDialogComponent {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.dialogRef.disableClose = true;
}
ngOnInit() {
if (this.data.detail) {
console.error(this.data.detail);
}
}
onClose() {
this.dialogRef.close();
}
}
ErrorDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'cnp-error-dialog',
template: "<div class=\"ui-dialog\">\n <div class=\"ui-dialog-titlebar\">\n <mat-icon>block</mat-icon>\n <span class=\"ui-dialog-title\">{{data?.title}}</span>\n <button mat-button (click)=\"onClose()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"ui-dialog-content\">\n <!-- Error Code -->\n <h3 *ngIf=\"data?.code\" class=\"text-center\">\n <b>Code: </b>\n <span class=\"fc-header\">{{data?.code}}</span>\n </h3>\n <!-- Error Detail -->\n <p class=\"text-center fs-20 dialog-message\">{{data?.message}}</p>\n </div>\n <div mat-dialog-actions style=\"justify-content: end;\">\n <button (click)=\"onClose()\" mat-flat-button color=\"primary\" cdkFocusInitial>{{data?.btnClose}}</button>\n </div>\n</div>",
styles: [`
.ui-dialog {
position: relative;
min-width: 240px;
}
.ui-dialog .ui-dialog-titlebar {
min-height: 52px;
background-color: #bd362f;
color: #ffffff;
font-weight: 700;
display: flex;
flex-direction: row;
align-items: center;
margin-left: -24px;
margin-right: -24px;
margin-top: -24px;
padding: 10px;
}
.ui-dialog .ui-dialog-title {
margin-left: 5px;
float: none;
flex: 1;
text-align: left;
}
.ui-dialog .ui-dialog-content {
background-color: #ffffff;
color: #333333;
padding: 0.571em 1em;
text-align: center;
}
.dialog-message {
white-space: pre-wrap;
}`]
},] }
];
ErrorDialogComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: ErrorDialog, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXJyb3ItZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi9wcm9qZWN0cy9jbnAtZGlhbG9nL3NyYy8iLCJzb3VyY2VzIjpbImxpYi9lcnJvci1kaWFsb2cvZXJyb3ItZGlhbG9nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxRCxPQUFPLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQXdDbkQsTUFBTSxPQUFPLG9CQUFvQjtJQUUvQixZQUNTLFNBQTZDLEVBQ3BCLElBQWlCO1FBRDFDLGNBQVMsR0FBVCxTQUFTLENBQW9DO1FBQ3BCLFNBQUksR0FBSixJQUFJLENBQWE7UUFFakQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxZQUFZLEdBQUcsSUFBSSxDQUFDO0lBQ3JDLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRTtZQUNwQixPQUFPLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDakM7SUFDSCxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDekIsQ0FBQzs7O1lBdkRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1Qiw4MEJBQTRDO3lCQUNuQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7TUFnQ0w7YUFFTDs7O1lBeENRLFlBQVk7WUFDWixXQUFXLHVCQTRDZixNQUFNLFNBQUMsZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbmplY3QgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1hdERpYWxvZ1JlZiwgTUFUX0RJQUxPR19EQVRBIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvZGlhbG9nJztcbmltcG9ydCB7IEVycm9yRGlhbG9nIH0gZnJvbSAnLi4vbW9kZWwvZGlhbG9nLXR5cGUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbnAtZXJyb3ItZGlhbG9nJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2Vycm9yLWRpYWxvZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlczogW2BcbiAgICAudWktZGlhbG9nIHtcbiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICAgIG1pbi13aWR0aDogMjQwcHg7XG4gICAgfVxuICAgIC51aS1kaWFsb2cgLnVpLWRpYWxvZy10aXRsZWJhciB7XG4gICAgICBtaW4taGVpZ2h0OiA1MnB4O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2JkMzYyZjtcbiAgICAgIGNvbG9yOiAjZmZmZmZmO1xuICAgICAgZm9udC13ZWlnaHQ6IDcwMDtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgIG1hcmdpbi1sZWZ0OiAtMjRweDtcbiAgICAgIG1hcmdpbi1yaWdodDogLTI0cHg7XG4gICAgICBtYXJnaW4tdG9wOiAtMjRweDtcbiAgICAgIHBhZGRpbmc6IDEwcHg7XG4gICAgfVxuICAgIC51aS1kaWFsb2cgLnVpLWRpYWxvZy10aXRsZSB7XG4gICAgICBtYXJnaW4tbGVmdDogNXB4O1xuICAgICAgZmxvYXQ6IG5vbmU7XG4gICAgICBmbGV4OiAxO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICB9XG4gICAgLnVpLWRpYWxvZyAudWktZGlhbG9nLWNvbnRlbnQge1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjtcbiAgICAgIGNvbG9yOiAjMzMzMzMzO1xuICAgICAgcGFkZGluZzogMC41NzFlbSAxZW07XG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgfVxuICAgIC5kaWFsb2ctbWVzc2FnZSB7XG4gICAgICB3aGl0ZS1zcGFjZTogcHJlLXdyYXA7XG4gICAgfWBcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBFcnJvckRpYWxvZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPEVycm9yRGlhbG9nQ29tcG9uZW50PixcbiAgICBASW5qZWN0KE1BVF9ESUFMT0dfREFUQSkgcHVibGljIGRhdGE6IEVycm9yRGlhbG9nXG4gICkge1xuICAgIHRoaXMuZGlhbG9nUmVmLmRpc2FibGVDbG9zZSA9IHRydWU7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5kYXRhLmRldGFpbCkge1xuICAgICAgY29uc29sZS5lcnJvcih0aGlzLmRhdGEuZGV0YWlsKTtcbiAgICB9XG4gIH1cblxuICBvbkNsb3NlKCkge1xuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKCk7XG4gIH1cblxufVxuIl19