cnp-dialog
Version:
A simple dialog use angular material
60 lines • 5.25 kB
JavaScript
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
export class ConfirmDialogComponent {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.dialogRef.disableClose = true;
}
onCancel() {
this.dialogRef.close(false);
}
onAccept() {
this.dialogRef.close(true);
}
}
ConfirmDialogComponent.decorators = [
{ type: Component, args: [{
selector: 'cnp-confirm-dialog',
template: "<div class=\"ui-dialog\">\n <div class=\"ui-dialog-titlebar\">\n <mat-icon>chat</mat-icon>\n <span class=\"ui-dialog-title\">{{data?.title}}</span>\n <button mat-button (click)=\"onCancel()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <div class=\"ui-dialog-content\">\n <h3 *ngIf=\"data?.code\" class=\"text-center\">\n <b>Code: </b>\n <span class=\"fc-header\">{{data?.code}}</span>\n </h3>\n <p class=\"text-center fs-20 dialog-message\">{{data?.message}}</p>\n </div>\n <div mat-dialog-actions style=\"justify-content: space-evenly;\">\n <button (click)=\"onAccept()\" mat-flat-button color=\"primary\" cdkFocusInitial>{{data.btnOk}}</button> \n <button (click)=\"onCancel()\" mat-flat-button color=\"warn\">{{data.btnCancel}}</button>\n </div>\n</div>",
styles: [`
.ui-dialog {
position: relative;
min-width: 240px;
}
.ui-dialog .ui-dialog-titlebar {
min-height: 52px;
background-color: #3D72B4;
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;
}
`]
},] }
];
ConfirmDialogComponent.ctorParameters = () => [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
];
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uZmlybS1kaWFsb2cuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uL3Byb2plY3RzL2NucC1kaWFsb2cvc3JjLyIsInNvdXJjZXMiOlsibGliL2NvbmZpcm0tZGlhbG9nL2NvbmZpcm0tZGlhbG9nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRCxPQUFPLEVBQUUsWUFBWSxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBd0N6RSxNQUFNLE9BQU8sc0JBQXNCO0lBRWpDLFlBQ1MsU0FBK0MsRUFDdEIsSUFBUztRQURsQyxjQUFTLEdBQVQsU0FBUyxDQUFzQztRQUN0QixTQUFJLEdBQUosSUFBSSxDQUFLO1FBRXpDLElBQUksQ0FBQyxTQUFTLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQztJQUNyQyxDQUFDO0lBRUQsUUFBUTtRQUNOLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzlCLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQzs7O1lBckRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsb0JBQW9CO2dCQUM5QixpNEJBQThDO3lCQUNyQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBaUNSO2FBQ0Y7OztZQXZDUSxZQUFZOzRDQTRDaEIsTUFBTSxTQUFDLGVBQWUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0RGlhbG9nUmVmLCBNQVRfRElBTE9HX0RBVEEgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9kaWFsb2cnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjbnAtY29uZmlybS1kaWFsb2cnLFxuICB0ZW1wbGF0ZVVybDogJy4vY29uZmlybS1kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtgXG4gICAgLnVpLWRpYWxvZyB7XG4gICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICBtaW4td2lkdGg6IDI0MHB4O1xuICAgIH1cbiAgICAudWktZGlhbG9nIC51aS1kaWFsb2ctdGl0bGViYXIge1xuICAgICAgbWluLWhlaWdodDogNTJweDtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICMzRDcyQjQ7XG4gICAgICBjb2xvcjogI2ZmZmZmZjtcbiAgICAgIGZvbnQtd2VpZ2h0OiA3MDA7XG4gICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gICAgICBtYXJnaW4tbGVmdDogLTI0cHg7XG4gICAgICBtYXJnaW4tcmlnaHQ6IC0yNHB4O1xuICAgICAgbWFyZ2luLXRvcDogLTI0cHg7XG4gICAgICBwYWRkaW5nOiAxMHB4O1xuICAgIH1cbiAgICAudWktZGlhbG9nIC51aS1kaWFsb2ctdGl0bGUge1xuICAgICAgbWFyZ2luLWxlZnQ6IDVweDtcbiAgICAgIGZsb2F0OiBub25lO1xuICAgICAgZmxleDogMTtcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgfVxuICAgIC51aS1kaWFsb2cgLnVpLWRpYWxvZy1jb250ZW50IHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmZmZmZmY7XG4gICAgICBjb2xvcjogIzMzMzMzMztcbiAgICAgIHBhZGRpbmc6IDAuNTcxZW0gMWVtO1xuICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgIH1cbiAgICAuZGlhbG9nLW1lc3NhZ2Uge1xuICAgICAgd2hpdGUtc3BhY2U6IHByZS13cmFwO1xuICAgIH1cbiAgYF1cbn0pXG5leHBvcnQgY2xhc3MgQ29uZmlybURpYWxvZ0NvbXBvbmVudCB7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHVibGljIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPENvbmZpcm1EaWFsb2dDb21wb25lbnQ+LFxuICAgIEBJbmplY3QoTUFUX0RJQUxPR19EQVRBKSBwdWJsaWMgZGF0YTogYW55XG4gICkge1xuICAgIHRoaXMuZGlhbG9nUmVmLmRpc2FibGVDbG9zZSA9IHRydWU7XG4gIH1cblxuICBvbkNhbmNlbCgpIHtcbiAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZShmYWxzZSk7XG4gIH1cblxuICBvbkFjY2VwdCgpIHtcbiAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZSh0cnVlKTtcbiAgfVxuXG59XG4iXX0=