cnp-dialog
Version:
A simple dialog use angular material
57 lines • 5 kB
JavaScript
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class NoficationDialogComponent {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.dialogRef.disableClose = true;
}
onClose() {
this.dialogRef.close();
}
}
NoficationDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'cnp-nofication-dialog',
template: "<div class=\"ui-dialog\">\n <div class=\"ui-dialog-titlebar\">\n <mat-icon>error_outline</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 <!-- Nofication Code -->\n <h3 *ngIf=\"data?.code\" class=\"text-center\">\n <b>Code: </b>\n <span class=\"fc-header\">{{data?.code}}</span>\n </h3>\n <!-- Nofication 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?.btnOk}}</button>\n </div>\n</div>",
styles: [`
.ui-dialog {
position: relative;
min-width: 240px;
}
.ui-dialog .ui-dialog-titlebar {
min-height: 52px;
background-color: #2f96b4;
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;
}
`]
},] }
];
NoficationDialogComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibm9maWNhdGlvbi1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uL3Byb2plY3RzL2NucC1kaWFsb2cvc3JjLyIsInNvdXJjZXMiOlsibGliL25vZmljYXRpb24tZGlhbG9nL25vZmljYXRpb24tZGlhbG9nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBd0N6RSxNQUFNLE9BQU8seUJBQXlCO0lBRXBDLFlBQ1MsU0FBa0QsRUFDekIsSUFBUztRQURsQyxjQUFTLEdBQVQsU0FBUyxDQUF5QztRQUN6QixTQUFJLEdBQUosSUFBSSxDQUFLO1FBRXpDLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUNyQyxDQUFDO0lBRUQsT0FBTztRQUNMLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDekIsQ0FBQzs7O1lBakRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsdUJBQXVCO2dCQUNqQyw2MUJBQWlEO3lCQUN4Qzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUNSO2FBQ0Y7OztZQXZDUSxZQUFZOzRDQTRDaEIsTUFBTSxTQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RGlhbG9nUmVmLCBNQVRfRElBTE9HX0RBVEEgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbnAtbm9maWNhdGlvbi1kaWFsb2cnLFxuICB0ZW1wbGF0ZVVybDogJy4vbm9maWNhdGlvbi1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtgXG4gICAgLnVpLWRpYWxvZyB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBtaW4td2lkdGg6IDI0MHB4O1xuICAgIH1cbiAgICAudWktZGlhbG9nIC51aS1kaWFsb2ctdGl0bGViYXIge1xuICAgICAgbWluLWhlaWdodDogNTJweDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICMyZjk2YjQ7XG4gICAgICBjb2xvcjogI2ZmZmZmZjtcbiAgICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBtYXJnaW4tbGVmdDogLTI0cHg7XG4gICAgICBtYXJnaW4tcmlnaHQ6IC0yNHB4O1xuICAgICAgbWFyZ2luLXRvcDogLTI0cHg7XG4gICAgICBwYWRkaW5nOiAxMHB4O1xuICAgIH1cbiAgICAudWktZGlhbG9nIC51aS1kaWFsb2ctdGl0bGUge1xuICAgICAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgICAgIGZsb2F0OiBub25lO1xuICAgICAgZmxleDogMTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgfVxuICAgIC51aS1kaWFsb2cgLnVpLWRpYWxvZy1jb250ZW50IHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gICAgICBjb2xvcjogIzMzMzMzMztcbiAgICAgIHBhZGRpbmc6IDAuNTcxZW0gMWVtO1xuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIH1cbiAgICAuZGlhbG9nLW1lc3NhZ2Uge1xuICAgICAgd2hpdGUtc3BhY2U6IHByZS13cmFwO1xuICAgIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgTm9maWNhdGlvbkRpYWxvZ0NvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPE5vZmljYXRpb25EaWFsb2dDb21wb25lbnQ+LFxuICAgIEBJbmplY3QoTUFUX0RJQUxPR19EQVRBKSBwdWJsaWMgZGF0YTogYW55XG4gICkge1xuICAgIHRoaXMuZGlhbG9nUmVmLmRpc2FibGVDbG9zZSA9IHRydWU7XG4gIH1cblxuICBvbkNsb3NlKCkge1xuICAgIHRoaXMuZGlhbG9nUmVmLmNsb3NlKCk7XG4gIH1cblxufVxuIl19