@ng-matero/extensions/fesm2022/mtxDialog.mjs

Angular Material Extensions

import * as i0 from '@angular/core';
import { inject, ChangeDetectionStrategy, ViewEncapsulation, Component, Injectable, NgModule } from '@angular/core';
import { AsyncPipe, CommonModule } from '@angular/common';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatButton, MatIconButton, MatButtonModule } from '@angular/material/button';
import { MatIcon, MatIconModule } from '@angular/material/icon';
import { MtxToObservablePipe, MtxPipesModule } from '@ng-matero/extensions/core';

class MtxDialogContainer {
    constructor() {
        this.dialogRef = inject(MatDialogRef);
        this.data = inject(MAT_DIALOG_DATA);
    }
    _onClick(fn) {
        if (fn) {
            fn.call(this);
        }
        this._onClose();
    }
    _onClose() {
        this.dialogRef.close();
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: MtxDialogContainer, isStandalone: true, selector: "mtx-dialog-container", host: { classAttribute: "mtx-dialog-container" }, exportAs: ["mtxDialogContainer"], ngImport: i0, template: "@if (data.title) {\n  <h1 class=\"mtx-dialog-title\">\n    <span>{{ data.title | toObservable | async }}</span>\n    @if (data.showCloseIcon) {\n      <button matIconButton (click)=\"_onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </h1>\n}\n@if (data.description) {\n  <div class=\"mtx-dialog-content\">\n    <p>{{ data.description | toObservable | async }}</p>\n  </div>\n}\n<div class=\"mtx-dialog-actions\">\n  @for (btn of data.buttons; track btn) {\n    @if (btn.focusInitial) {\n      <button\n        cdkFocusInitial\n        [matButton]=\"btn.type || 'text'\"\n        [color]=\"btn.color\"\n        [class]=\"btn.class\"\n        (click)=\"_onClick(btn.onClick!)\"\n      >\n        {{ btn.text | toObservable | async }}\n      </button>\n    } @else {\n      <button\n        [matButton]=\"btn.type || 'text'\"\n        [color]=\"btn.color\"\n        [class]=\"btn.class\"\n        (click)=\"_onClick(btn.onClick!)\"\n      >\n        {{ btn.text | toObservable | async }}\n      </button>\n    }\n  }\n</div>\n", styles: [".mtx-dialog-title{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;margin:0;line-height:48px;font-weight:500;font-size:20px}.mtx-dialog-title .mat-mdc-button-base{margin-right:-16px}[dir=rtl] .mtx-dialog-title .mat-mdc-button-base{margin-right:0;margin-left:-16px}.mtx-dialog-content{display:block;max-height:65vh;padding:0 24px;overflow:auto;-webkit-overflow-scrolling:touch}.mtx-dialog-content p{margin-top:0}.mtx-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:8px}.mtx-dialog-actions .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-dialog-actions .mat-mdc-button-base{margin-left:0;margin-right:8px}\n"], dependencies: [{ kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: MtxToObservablePipe, name: "toObservable" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogContainer, decorators: [{
            type: Component,
            args: [{ selector: 'mtx-dialog-container', exportAs: 'mtxDialogContainer', host: {
                        class: 'mtx-dialog-container',
                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, MatButton, MatIconButton, MatIcon, MtxToObservablePipe], template: "@if (data.title) {\n  <h1 class=\"mtx-dialog-title\">\n    <span>{{ data.title | toObservable | async }}</span>\n    @if (data.showCloseIcon) {\n      <button matIconButton (click)=\"_onClose()\">\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </h1>\n}\n@if (data.description) {\n  <div class=\"mtx-dialog-content\">\n    <p>{{ data.description | toObservable | async }}</p>\n  </div>\n}\n<div class=\"mtx-dialog-actions\">\n  @for (btn of data.buttons; track btn) {\n    @if (btn.focusInitial) {\n      <button\n        cdkFocusInitial\n        [matButton]=\"btn.type || 'text'\"\n        [color]=\"btn.color\"\n        [class]=\"btn.class\"\n        (click)=\"_onClick(btn.onClick!)\"\n      >\n        {{ btn.text | toObservable | async }}\n      </button>\n    } @else {\n      <button\n        [matButton]=\"btn.type || 'text'\"\n        [color]=\"btn.color\"\n        [class]=\"btn.class\"\n        (click)=\"_onClick(btn.onClick!)\"\n      >\n        {{ btn.text | toObservable | async }}\n      </button>\n    }\n  }\n</div>\n", styles: [".mtx-dialog-title{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;margin:0;line-height:48px;font-weight:500;font-size:20px}.mtx-dialog-title .mat-mdc-button-base{margin-right:-16px}[dir=rtl] .mtx-dialog-title .mat-mdc-button-base{margin-right:0;margin-left:-16px}.mtx-dialog-content{display:block;max-height:65vh;padding:0 24px;overflow:auto;-webkit-overflow-scrolling:touch}.mtx-dialog-content p{margin-top:0}.mtx-dialog-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:8px}.mtx-dialog-actions .mat-mdc-button-base{margin-left:8px}[dir=rtl] .mtx-dialog-actions .mat-mdc-button-base{margin-left:0;margin-right:8px}\n"] }]
        }] });

const defaults = {
    title: '',
    description: '',
    buttons: [
        {
            text: 'Cancel',
            onClick: () => { },
        },
        {
            color: 'warn',
            text: 'OK',
            focusInitial: true,
            onClick: () => { },
        },
    ],
    showCloseIcon: false,
    disableClose: true,
    width: '300px',
};
class MtxDialog {
    constructor() {
        this.dialog = inject(MatDialog);
    }
    originalOpen(componentOrTemplateRef = MtxDialogContainer, config) {
        return this.dialog.open(componentOrTemplateRef, config);
    }
    open(config, componentOrTemplateRef = MtxDialogContainer) {
        const data = Object.assign({}, defaults, config);
        return this.dialog.open(componentOrTemplateRef, {
            ...data,
            data,
        });
    }
    alert(title, description = '', onOk = () => { }) {
        this.open({
            title,
            description,
            buttons: [
                {
                    color: 'warn',
                    text: 'OK',
                    onClick: () => onOk(),
                },
            ],
        });
    }
    confirm(title, description = '', onOk = () => { }, onClose = () => { }) {
        this.open({
            title,
            description,
            buttons: [
                {
                    text: 'Cancel',
                    onClick: () => onClose(),
                },
                {
                    color: 'warn',
                    text: 'OK',
                    focusInitial: true,
                    onClick: () => onOk(),
                },
            ],
        });
    }
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
    /** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialog, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialog, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

class MtxDialogModule {
    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogModule, imports: [CommonModule,
            MatDialogModule,
            MatButtonModule,
            MatIconModule,
            MtxPipesModule,
            MtxDialogContainer], exports: [MtxDialogContainer] }); }
    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogModule, providers: [MtxDialog], imports: [CommonModule,
            MatDialogModule,
            MatButtonModule,
            MatIconModule,
            MtxPipesModule,
            MtxDialogContainer] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: MtxDialogModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [
                        CommonModule,
                        MatDialogModule,
                        MatButtonModule,
                        MatIconModule,
                        MtxPipesModule,
                        MtxDialogContainer,
                    ],
                    exports: [MtxDialogContainer],
                    providers: [MtxDialog],
                }]
        }] });

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

export { MtxDialog, MtxDialogContainer, MtxDialogModule };
//# sourceMappingURL=mtxDialog.mjs.map