Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 18x 18x 23x 12x 8x 18x 18x 16x 16x 16x 16x 16x 41x 16x 16x 16x 16x 24x 24x 16x 16x 16x 16x 16x | import { Component, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Optional, Output,
SimpleChanges, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';
import { DynamicFormAction, DynamicFormElement, DYNAMIC_FORM_THEME } from '@dynamic-forms/core';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'mat-dynamic-form-dialog',
templateUrl: './dynamic-form-dialog.component.html',
})
export class MatDynamicFormDialogComponent implements OnInit, OnChanges, OnDestroy {
private _dialog: { config: MatDialogConfig; reference: MatDialogRef<any>; subscription: Subscription };
private _dialogOpenSubscription: Subscription;
@ViewChild('dialogTemplateRef', { static: true })
dialogTemplateRef: TemplateRef<any>;
@Input() isOpen$: Observable<boolean>;
@Input() children: DynamicFormElement[];
@Input() headerActions: DynamicFormAction[];
@Input() footerActions: DynamicFormAction[];
@Input() width: string;
@Input() height: string;
@Input() minWidth: string;
@Input() minHeight: string;
@Input() maxWidth: string;
@Input() maxHeight: string;
@Input() maximized: boolean;
@Input() title: string;
@Input() titleHtml: string;
@Input() classNameForm: string;
@Input() classNameModal: string;
@Input() classNameChildren: string;
@Input() classNameHeader: string;
@Input() classNameFooter: string;
@Input() classNameTitle: string;
// eslint-disable-next-line
@Output() escaped = new EventEmitter();
constructor(private dialog: MatDialog, @Optional() @Inject(DYNAMIC_FORM_THEME) public theme: string) {}
ngOnInit(): void {
this._dialogOpenSubscription = this.isOpen$.subscribe(isOpen => isOpen ? this.openDialog() : this.closeDialog());
}
ngOnChanges(changes: SimpleChanges): void {
if (this._dialog && changes.maximized) {
this._dialog.reference.updateSize(this._dialog.config.width, this._dialog.config.height);
}
}
ngOnDestroy(): void {
this._dialogOpenSubscription.unsubscribe();
this.closeDialog();
}
private openDialog(): void {
this.closeDialog();
const config = this.getDialogConfig();
const reference = this.dialog.open(this.dialogTemplateRef, config);
const subscription = reference.beforeClosed().subscribe(_ => this.escaped.emit());
this._dialog = { config, reference, subscription };
}
private closeDialog(): void {
if (this._dialog) {
this._dialog.reference.close();
this._dialog.subscription.unsubscribe();
this._dialog = null;
}
}
private getDialogConfig(): MatDialogConfig {
const config = new MatDialogConfig();
Object.defineProperty(config, 'width', { get: () => this.maximized ? this.maxWidth || '100%' : this.width });
Object.defineProperty(config, 'height', { get: () => this.maximized ? this.maxHeight || '100%' : this.height });
Object.defineProperty(config, 'minWidth', { get: () => this.maximized ? this.maxWidth || '100%' : this.minWidth });
Object.defineProperty(config, 'minHeight', { get: () => this.maximized ? this.maxHeight || '100%' : this.minHeight });
Object.defineProperty(config, 'maxWidth', { get: () => this.maximized ? this.maxWidth || '100%' : this.maxWidth });
Object.defineProperty(config, 'maxHeight', { get: () => this.maximized ? this.maxHeight || '100%' : this.maxHeight });
return config;
}
}
|