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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 1x 18x 18x 18x 12x 8x 8x 8x 23x 18x 18x 16x 16x 16x 16x 16x 41x 16x 16x 16x 24x 24x 16x 16x 16x 16x 16x 16x 16x 16x | import { NgClass } from '@angular/common';
import {
Component,
EventEmitter,
Inject,
Input,
OnChanges,
OnDestroy,
OnInit,
Optional,
Output,
SimpleChanges,
TemplateRef,
ViewChild,
} from '@angular/core';
import { MatDialog, MatDialogConfig, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { DYNAMIC_FORM_THEME, DynamicFormAction, DynamicFormElement, DynamicFormElementsComponent } from '@dynamic-forms/core';
import { Observable, Subscription } from 'rxjs';
@Component({
selector: 'mat-dynamic-form-dialog',
templateUrl: './dynamic-form-dialog.component.html',
imports: [NgClass, MatDialogModule, DynamicFormElementsComponent],
})
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;
@Output() readonly escaped = new EventEmitter();
constructor(
private dialog: MatDialog,
@Optional() @Inject(DYNAMIC_FORM_THEME) public theme: string,
) {}
ngOnChanges(changes: SimpleChanges): void {
if (this._dialog && changes.maximized) {
const width = this.getDialogWidth();
const height = this.getDialogHeight();
this._dialog.reference.updateSize(width, height);
}
}
ngOnInit(): void {
this._dialogOpenSubscription = this.isOpen$.subscribe(isOpen => (isOpen ? this.openDialog() : this.closeDialog()));
}
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 getDialogWidth(): string {
return this.maximized ? this.maxWidth || '100%' : this.width;
}
private getDialogHeight(): string {
return this.maximized ? this.maxHeight || '100%' : this.height;
}
private getDialogConfig(): MatDialogConfig {
const config = new MatDialogConfig();
config.width = this.getDialogWidth();
config.height = this.getDialogHeight();
config.minWidth = this.minWidth;
config.minHeight = this.minHeight;
config.maxWidth = this.maxWidth;
config.maxHeight = this.maxHeight;
return config;
}
}
|