File
|
children
|
Type : DynamicFormElement[]
|
|
|
|
classNameChildren
|
Type : string
|
|
|
|
footerActions
|
Type : DynamicFormAction[]
|
|
|
|
headerActions
|
Type : DynamicFormAction[]
|
|
|
|
isOpen$
|
Type : Observable<boolean>
|
|
|
import { Component, Input } from '@angular/core';
import { DynamicFormAction, DynamicFormElement } from '@dynamic-forms/core';
import { Observable } from 'rxjs';
@Component({
selector: 'bs-dynamic-form-dialog',
templateUrl: './dynamic-form-dialog.component.html',
})
export class BsDynamicFormDialogComponent {
@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;
}
<div *ngIf="isOpen$ | async" class="dynamic-form-modal modal" [ngClass]="classNameForm" [class.maximized]="maximized">
<div
class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
[ngClass]="classNameModal"
[class.maximized]="maximized"
[ngStyle]="{
width: maximized ? maxWidth || '100%' : width,
'min-width': maximized ? maxWidth || '100%' : minWidth,
'max-width': maximized ? maxWidth || '100%' : maxWidth,
'min-height': maximized ? '100%' : undefined,
'max-height': maximized ? '100%' : undefined,
margin: maximized ? '0px auto' : undefined
}"
>
<div
class="modal-content"
[ngStyle]="{
height: maximized ? maxHeight || '100%' : height,
'min-height': maximized ? maxHeight || '100%' : minHeight,
'max-height': maxHeight || '100%'
}"
>
<div class="modal-header" *ngIf="title || titleHtml || headerActions?.length" [ngClass]="classNameHeader">
<div class="modal-title" *ngIf="titleHtml; else titlePlain" [ngClass]="classNameTitle" [innerHTML]="titleHtml"></div>
<ng-template #titlePlain>
<div class="modal-title" [ngClass]="classNameTitle">{{ title }}</div>
</ng-template>
<div class="modal-toolbar" *ngIf="headerActions?.length">
<dynamic-form-elements [elements]="headerActions"></dynamic-form-elements>
</div>
</div>
<div class="modal-body" [ngClass]="classNameChildren">
<dynamic-form-elements [elements]="children"></dynamic-form-elements>
</div>
<div class="modal-footer" *ngIf="footerActions?.length" [ngClass]="classNameFooter">
<dynamic-form-elements [elements]="footerActions"></dynamic-form-elements>
</div>
</div>
</div>
</div>