ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
139 lines (137 loc) • 15.4 kB
JavaScript
/**
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
import { NgClass, NgStyle } from '@angular/common';
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { NzPipesModule } from 'ng-zorro-antd/pipes';
import { nzModalAnimations } from './modal-animations';
import { NzModalCloseComponent } from './modal-close.component';
import { BaseModalContainerComponent } from './modal-container.directive';
import { NzModalFooterComponent } from './modal-footer.component';
import { NzModalTitleComponent } from './modal-title.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/portal";
import * as i2 from "ng-zorro-antd/pipes";
export class NzModalContainerComponent extends BaseModalContainerComponent {
ngOnInit() {
this.setupMouseListeners(this.modalElementRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzModalContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", type: NzModalContainerComponent, isStandalone: true, selector: "nz-modal-container", host: { attributes: { "tabindex": "-1", "role": "dialog" }, listeners: { "@modalContainer.start": "onAnimationStart($event)", "@modalContainer.done": "onAnimationDone($event)", "click": "onContainerClick($event)" }, properties: { "class": "config.nzWrapClassName ? \"ant-modal-wrap \" + config.nzWrapClassName : \"ant-modal-wrap\"", "class.ant-modal-wrap-rtl": "dir === 'rtl'", "class.ant-modal-centered": "config.nzCentered", "style.zIndex": "config.nzZIndex", "@.disabled": "config.nzNoAnimation", "@modalContainer": "state" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "modalElementRef", first: true, predicate: ["modalElement"], descendants: true, static: true }], exportAs: ["nzModalContainer"], usesInheritance: true, ngImport: i0, template: `
<div
cdkDrag
cdkDragBoundary=".cdk-overlay-container"
[]="!config.nzDraggable"
role="document"
class="ant-modal"
[]="config.nzClassName!"
[]="config.nzStyle!"
[]="config?.nzWidth! | nzToCssUnit"
>
<div class="ant-modal-content">
@if (config.nzClosable) {
<button nz-modal-close (click)="onCloseClick()"></button>
}
@if (config.nzTitle) {
<div nz-modal-title cdkDragHandle [style.cursor]="config.nzDraggable ? 'move' : 'auto'"></div>
}
<div class="ant-modal-body" [ngStyle]="config.nzBodyStyle!">
<ng-template cdkPortalOutlet />
@if (isStringContent) {
<div [innerHTML]="config.nzContent"></div>
}
</div>
@if (config.nzFooter !== null) {
<div
nz-modal-footer
[]="modalRef"
(cancelTriggered)="onCloseClick()"
(okTriggered)="onOkClick()"
></div>
}
</div>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: NzModalCloseComponent, selector: "button[nz-modal-close]", exportAs: ["NzModalCloseBuiltin"] }, { kind: "component", type: NzModalTitleComponent, selector: "div[nz-modal-title]", exportAs: ["NzModalTitleBuiltin"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: NzModalFooterComponent, selector: "div[nz-modal-footer]", inputs: ["modalRef"], outputs: ["cancelTriggered", "okTriggered"], exportAs: ["NzModalFooterBuiltin"] }, { kind: "ngmodule", type: NzPipesModule }, { kind: "pipe", type: i2.NzToCssUnitPipe, name: "nzToCssUnit" }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }], animations: [nzModalAnimations.modalContainer], changeDetection: i0.ChangeDetectionStrategy.Default }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: NzModalContainerComponent, decorators: [{
type: Component,
args: [{
selector: 'nz-modal-container',
exportAs: 'nzModalContainer',
template: `
<div
cdkDrag
cdkDragBoundary=".cdk-overlay-container"
[]="!config.nzDraggable"
role="document"
class="ant-modal"
[]="config.nzClassName!"
[]="config.nzStyle!"
[]="config?.nzWidth! | nzToCssUnit"
>
<div class="ant-modal-content">
@if (config.nzClosable) {
<button nz-modal-close (click)="onCloseClick()"></button>
}
@if (config.nzTitle) {
<div nz-modal-title cdkDragHandle [style.cursor]="config.nzDraggable ? 'move' : 'auto'"></div>
}
<div class="ant-modal-body" [ngStyle]="config.nzBodyStyle!">
<ng-template cdkPortalOutlet />
@if (isStringContent) {
<div [innerHTML]="config.nzContent"></div>
}
</div>
@if (config.nzFooter !== null) {
<div
nz-modal-footer
[]="modalRef"
(cancelTriggered)="onCloseClick()"
(okTriggered)="onOkClick()"
></div>
}
</div>
</div>
`,
animations: [nzModalAnimations.modalContainer],
// Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x.
changeDetection: ChangeDetectionStrategy.Default,
host: {
tabindex: '-1',
role: 'dialog',
'[class]': 'config.nzWrapClassName ? "ant-modal-wrap " + config.nzWrapClassName : "ant-modal-wrap"',
'[class.ant-modal-wrap-rtl]': `dir === 'rtl'`,
'[class.ant-modal-centered]': 'config.nzCentered',
'[style.zIndex]': 'config.nzZIndex',
'[@.disabled]': 'config.nzNoAnimation',
'[@modalContainer]': 'state',
'(@modalContainer.start)': 'onAnimationStart($event)',
'(@modalContainer.done)': 'onAnimationDone($event)',
'(click)': 'onContainerClick($event)'
},
imports: [
NgClass,
NgStyle,
NzModalCloseComponent,
NzModalTitleComponent,
PortalModule,
NzModalFooterComponent,
NzPipesModule,
CdkDrag,
CdkDragHandle
],
standalone: true
}]
}], propDecorators: { portalOutlet: [{
type: ViewChild,
args: [CdkPortalOutlet, { static: true }]
}], modalElementRef: [{
type: ViewChild,
args: ['modalElement', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL2NvbXBvbmVudHMvbW9kYWwvbW9kYWwtY29udGFpbmVyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7O0dBR0c7QUFFSCxPQUFPLEVBQUUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSxlQUFlLEVBQUUsWUFBWSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDcEUsT0FBTyxFQUFFLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFzQixTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFbEcsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFCQUFxQixDQUFDO0FBRXBELE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBQ3ZELE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ2hFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQzFFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7O0FBdUVoRSxNQUFNLE9BQU8seUJBQTBCLFNBQVEsMkJBQTJCO0lBSXhFLFFBQVE7UUFDTixJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDO0lBQ2pELENBQUM7OEdBTlUseUJBQXlCO2tHQUF6Qix5QkFBeUIsZ3BCQUN6QixlQUFlLHFPQW5FaEI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW9DVCw0REFrQkMsT0FBTyxvRkFDUCxPQUFPLDJFQUNQLHFCQUFxQixzR0FDckIscUJBQXFCLGtHQUNyQixZQUFZLGtNQUNaLHNCQUFzQix1S0FDdEIsYUFBYSxnR0FDYixPQUFPLHdiQUNQLGFBQWEsaUZBekJILENBQUMsaUJBQWlCLENBQUMsY0FBYyxDQUFDOzsyRkE2Qm5DLHlCQUF5QjtrQkFyRXJDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsUUFBUSxFQUFFLGtCQUFrQjtvQkFDNUIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQ1Q7b0JBQ0QsVUFBVSxFQUFFLENBQUMsaUJBQWlCLENBQUMsY0FBYyxDQUFDO29CQUM5QywwRkFBMEY7b0JBQzFGLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxPQUFPO29CQUNoRCxJQUFJLEVBQUU7d0JBQ0osUUFBUSxFQUFFLElBQUk7d0JBQ2QsSUFBSSxFQUFFLFFBQVE7d0JBQ2QsU0FBUyxFQUFFLHdGQUF3Rjt3QkFDbkcsNEJBQTRCLEVBQUUsZUFBZTt3QkFDN0MsNEJBQTRCLEVBQUUsbUJBQW1CO3dCQUNqRCxnQkFBZ0IsRUFBRSxpQkFBaUI7d0JBQ25DLGNBQWMsRUFBRSxzQkFBc0I7d0JBQ3RDLG1CQUFtQixFQUFFLE9BQU87d0JBQzVCLHlCQUF5QixFQUFFLDBCQUEwQjt3QkFDckQsd0JBQXdCLEVBQUUseUJBQXlCO3dCQUNuRCxTQUFTLEVBQUUsMEJBQTBCO3FCQUN0QztvQkFDRCxPQUFPLEVBQUU7d0JBQ1AsT0FBTzt3QkFDUCxPQUFPO3dCQUNQLHFCQUFxQjt3QkFDckIscUJBQXFCO3dCQUNyQixZQUFZO3dCQUNaLHNCQUFzQjt3QkFDdEIsYUFBYTt3QkFDYixPQUFPO3dCQUNQLGFBQWE7cUJBQ2Q7b0JBQ0QsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzhCQUV3RCxZQUFZO3NCQUFsRSxTQUFTO3VCQUFDLGVBQWUsRUFBRSxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUU7Z0JBQ1UsZUFBZTtzQkFBcEUsU0FBUzt1QkFBQyxjQUFjLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBVc2Ugb2YgdGhpcyBzb3VyY2UgY29kZSBpcyBnb3Zlcm5lZCBieSBhbiBNSVQtc3R5bGUgbGljZW5zZSB0aGF0IGNhbiBiZVxuICogZm91bmQgaW4gdGhlIExJQ0VOU0UgZmlsZSBhdCBodHRwczovL2dpdGh1Yi5jb20vTkctWk9SUk8vbmctem9ycm8tYW50ZC9ibG9iL21hc3Rlci9MSUNFTlNFXG4gKi9cblxuaW1wb3J0IHsgQ2RrRHJhZywgQ2RrRHJhZ0hhbmRsZSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xuaW1wb3J0IHsgQ2RrUG9ydGFsT3V0bGV0LCBQb3J0YWxNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jZGsvcG9ydGFsJztcbmltcG9ydCB7IE5nQ2xhc3MsIE5nU3R5bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgRWxlbWVudFJlZiwgT25Jbml0LCBWaWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgTnpQaXBlc01vZHVsZSB9IGZyb20gJ25nLXpvcnJvLWFudGQvcGlwZXMnO1xuXG5pbXBvcnQgeyBuek1vZGFsQW5pbWF0aW9ucyB9IGZyb20gJy4vbW9kYWwtYW5pbWF0aW9ucyc7XG5pbXBvcnQgeyBOek1vZGFsQ2xvc2VDb21wb25lbnQgfSBmcm9tICcuL21vZGFsLWNsb3NlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBCYXNlTW9kYWxDb250YWluZXJDb21wb25lbnQgfSBmcm9tICcuL21vZGFsLWNvbnRhaW5lci5kaXJlY3RpdmUnO1xuaW1wb3J0IHsgTnpNb2RhbEZvb3RlckNvbXBvbmVudCB9IGZyb20gJy4vbW9kYWwtZm9vdGVyLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBOek1vZGFsVGl0bGVDb21wb25lbnQgfSBmcm9tICcuL21vZGFsLXRpdGxlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ256LW1vZGFsLWNvbnRhaW5lcicsXG4gIGV4cG9ydEFzOiAnbnpNb2RhbENvbnRhaW5lcicsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGRpdlxuICAgICAgI21vZGFsRWxlbWVudFxuICAgICAgY2RrRHJhZ1xuICAgICAgY2RrRHJhZ0JvdW5kYXJ5PVwiLmNkay1vdmVybGF5LWNvbnRhaW5lclwiXG4gICAgICBbY2RrRHJhZ0Rpc2FibGVkXT1cIiFjb25maWcubnpEcmFnZ2FibGVcIlxuICAgICAgcm9sZT1cImRvY3VtZW50XCJcbiAgICAgIGNsYXNzPVwiYW50LW1vZGFsXCJcbiAgICAgIFtuZ0NsYXNzXT1cImNvbmZpZy5uekNsYXNzTmFtZSFcIlxuICAgICAgW25nU3R5bGVdPVwiY29uZmlnLm56U3R5bGUhXCJcbiAgICAgIFtzdHlsZS53aWR0aF09XCJjb25maWc/Lm56V2lkdGghIHwgbnpUb0Nzc1VuaXRcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJhbnQtbW9kYWwtY29udGVudFwiPlxuICAgICAgICBAaWYgKGNvbmZpZy5uekNsb3NhYmxlKSB7XG4gICAgICAgICAgPGJ1dHRvbiBuei1tb2RhbC1jbG9zZSAoY2xpY2spPVwib25DbG9zZUNsaWNrKClcIj48L2J1dHRvbj5cbiAgICAgICAgfVxuICAgICAgICBAaWYgKGNvbmZpZy5uelRpdGxlKSB7XG4gICAgICAgICAgPGRpdiBuei1tb2RhbC10aXRsZSBjZGtEcmFnSGFuZGxlIFtzdHlsZS5jdXJzb3JdPVwiY29uZmlnLm56RHJhZ2dhYmxlID8gJ21vdmUnIDogJ2F1dG8nXCI+PC9kaXY+XG4gICAgICAgIH1cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiYW50LW1vZGFsLWJvZHlcIiBbbmdTdHlsZV09XCJjb25maWcubnpCb2R5U3R5bGUhXCI+XG4gICAgICAgICAgPG5nLXRlbXBsYXRlIGNka1BvcnRhbE91dGxldCAvPlxuICAgICAgICAgIEBpZiAoaXNTdHJpbmdDb250ZW50KSB7XG4gICAgICAgICAgICA8ZGl2IFtpbm5lckhUTUxdPVwiY29uZmlnLm56Q29udGVudFwiPjwvZGl2PlxuICAgICAgICAgIH1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIEBpZiAoY29uZmlnLm56Rm9vdGVyICE9PSBudWxsKSB7XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgbnotbW9kYWwtZm9vdGVyXG4gICAgICAgICAgICBbbW9kYWxSZWZdPVwibW9kYWxSZWZcIlxuICAgICAgICAgICAgKGNhbmNlbFRyaWdnZXJlZCk9XCJvbkNsb3NlQ2xpY2soKVwiXG4gICAgICAgICAgICAob2tUcmlnZ2VyZWQpPVwib25Pa0NsaWNrKClcIlxuICAgICAgICAgID48L2Rpdj5cbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIGAsXG4gIGFuaW1hdGlvbnM6IFtuek1vZGFsQW5pbWF0aW9ucy5tb2RhbENvbnRhaW5lcl0sXG4gIC8vIFVzaW5nIE9uUHVzaCBmb3IgbW9kYWwgY2F1c2VkIGZvb3RlciBjYW4gbm90IHRvIGRldGVjdCBjaGFuZ2VzLiB3ZSBjYW4gZml4IGl0IHdoZW4gOC54LlxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LkRlZmF1bHQsXG4gIGhvc3Q6IHtcbiAgICB0YWJpbmRleDogJy0xJyxcbiAgICByb2xlOiAnZGlhbG9nJyxcbiAgICAnW2NsYXNzXSc6ICdjb25maWcubnpXcmFwQ2xhc3NOYW1lID8gXCJhbnQtbW9kYWwtd3JhcCBcIiArIGNvbmZpZy5ueldyYXBDbGFzc05hbWUgOiBcImFudC1tb2RhbC13cmFwXCInLFxuICAgICdbY2xhc3MuYW50LW1vZGFsLXdyYXAtcnRsXSc6IGBkaXIgPT09ICdydGwnYCxcbiAgICAnW2NsYXNzLmFudC1tb2RhbC1jZW50ZXJlZF0nOiAnY29uZmlnLm56Q2VudGVyZWQnLFxuICAgICdbc3R5bGUuekluZGV4XSc6ICdjb25maWcubnpaSW5kZXgnLFxuICAgICdbQC5kaXNhYmxlZF0nOiAnY29uZmlnLm56Tm9BbmltYXRpb24nLFxuICAgICdbQG1vZGFsQ29udGFpbmVyXSc6ICdzdGF0ZScsXG4gICAgJyhAbW9kYWxDb250YWluZXIuc3RhcnQpJzogJ29uQW5pbWF0aW9uU3RhcnQoJGV2ZW50KScsXG4gICAgJyhAbW9kYWxDb250YWluZXIuZG9uZSknOiAnb25BbmltYXRpb25Eb25lKCRldmVudCknLFxuICAgICcoY2xpY2spJzogJ29uQ29udGFpbmVyQ2xpY2soJGV2ZW50KSdcbiAgfSxcbiAgaW1wb3J0czogW1xuICAgIE5nQ2xhc3MsXG4gICAgTmdTdHlsZSxcbiAgICBOek1vZGFsQ2xvc2VDb21wb25lbnQsXG4gICAgTnpNb2RhbFRpdGxlQ29tcG9uZW50LFxuICAgIFBvcnRhbE1vZHVsZSxcbiAgICBOek1vZGFsRm9vdGVyQ29tcG9uZW50LFxuICAgIE56UGlwZXNNb2R1bGUsXG4gICAgQ2RrRHJhZyxcbiAgICBDZGtEcmFnSGFuZGxlXG4gIF0sXG4gIHN0YW5kYWxvbmU6IHRydWVcbn0pXG5leHBvcnQgY2xhc3MgTnpNb2RhbENvbnRhaW5lckNvbXBvbmVudCBleHRlbmRzIEJhc2VNb2RhbENvbnRhaW5lckNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBWaWV3Q2hpbGQoQ2RrUG9ydGFsT3V0bGV0LCB7IHN0YXRpYzogdHJ1ZSB9KSBvdmVycmlkZSBwb3J0YWxPdXRsZXQhOiBDZGtQb3J0YWxPdXRsZXQ7XG4gIEBWaWV3Q2hpbGQoJ21vZGFsRWxlbWVudCcsIHsgc3RhdGljOiB0cnVlIH0pIG92ZXJyaWRlIG1vZGFsRWxlbWVudFJlZiE6IEVsZW1lbnRSZWY8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIG5nT25Jbml0KCk6IHZvaWQge1xuICAgIHRoaXMuc2V0dXBNb3VzZUxpc3RlbmVycyh0aGlzLm1vZGFsRWxlbWVudFJlZik7XG4gIH1cbn1cbiJdfQ==