cnp-dialog/fesm2015/cnp-dialog.js

A simple dialog use angular material

import { Component, Inject, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

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>&nbsp;\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,] }] }
];

class Dialog {
}
class ConfirmDialog extends Dialog {
}
class ErrorDialog extends Dialog {
}
class NoficationDialog extends Dialog {
}

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,] }] }
];

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,] }] }
];

class CnpDialogService {
    constructor(matDialog) {
        this.matDialog = matDialog;
    }
    nofication(data) {
        this.matDialog.open(NoficationDialogComponent, { data });
    }
    confirm(data, callback) {
        const dialogRef = this.matDialog.open(ConfirmDialogComponent, { data });
        dialogRef.afterClosed().subscribe(callback);
    }
    error(data) {
        this.matDialog.open(ErrorDialogComponent, { data });
    }
}
CnpDialogService.ɵprov = ɵɵdefineInjectable({ factory: function CnpDialogService_Factory() { return new CnpDialogService(ɵɵinject(MatDialog)); }, token: CnpDialogService, providedIn: "root" });
CnpDialogService.decorators = [
    { type: Injectable, args: [{
                providedIn: 'root'
            },] }
];
CnpDialogService.ctorParameters = () => [
    { type: MatDialog }
];

class CnpDialogModule {
}
CnpDialogModule.decorators = [
    { type: NgModule, args: [{
                imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
                declarations: [ConfirmDialogComponent, ErrorDialogComponent, NoficationDialogComponent],
                providers: [CnpDialogService]
            },] }
];

/*
 * Public API Surface of cnp-dialog
 */

/**
 * Generated bundle index. Do not edit.
 */

export { CnpDialogModule, CnpDialogService, ConfirmDialog, Dialog, ErrorDialog, NoficationDialog, ConfirmDialogComponent as ɵa, ErrorDialogComponent as ɵb, NoficationDialogComponent as ɵc };
//# sourceMappingURL=cnp-dialog.js.map