@ng-nest/ui 13.1.4 → 13.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dialog/dialog.component.d.ts +3 -5
- package/dialog/dialog.property.d.ts +10 -5
- package/esm2020/dialog/dialog-portal.component.mjs +3 -3
- package/esm2020/dialog/dialog-ref.mjs +3 -1
- package/esm2020/dialog/dialog.component.mjs +24 -27
- package/esm2020/dialog/dialog.property.mjs +10 -3
- package/esm2020/dialog/dialog.service.mjs +5 -2
- package/esm2020/resizable/resizable.directive.mjs +10 -4
- package/fesm2015/ng-nest-ui-dialog.mjs +41 -32
- package/fesm2015/ng-nest-ui-dialog.mjs.map +1 -1
- package/fesm2015/ng-nest-ui-resizable.mjs +9 -3
- package/fesm2015/ng-nest-ui-resizable.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-dialog.mjs +40 -31
- package/fesm2020/ng-nest-ui-dialog.mjs.map +1 -1
- package/fesm2020/ng-nest-ui-resizable.mjs +9 -3
- package/fesm2020/ng-nest-ui-resizable.mjs.map +1 -1
- package/package.json +1 -1
- package/resizable/resizable.directive.d.ts +1 -0
- package/style/core/index.css +3 -0
- package/style/core/index.css.map +1 -1
- package/style/directives/resizable/mixin.scss +5 -0
|
@@ -58,6 +58,11 @@ class XDialogProperty extends XAlertProperty {
|
|
|
58
58
|
* @en_US Confirm button event
|
|
59
59
|
*/
|
|
60
60
|
this.confirm = new EventEmitter();
|
|
61
|
+
/**
|
|
62
|
+
* @zh_CN 确认按钮的事件
|
|
63
|
+
* @en_US Confirm button event
|
|
64
|
+
*/
|
|
65
|
+
this.close = new EventEmitter();
|
|
61
66
|
/**
|
|
62
67
|
* @zh_CN 显示/隐藏改变事件
|
|
63
68
|
* @en_US Show/hide change events
|
|
@@ -76,7 +81,7 @@ class XDialogProperty extends XAlertProperty {
|
|
|
76
81
|
}
|
|
77
82
|
}
|
|
78
83
|
/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogProperty, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
-
/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
84
|
+
/** @nocollapse */ /** @nocollapse */ XDialogProperty.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogProperty, selector: "ng-component", inputs: { visible: "visible", placement: "placement", offset: "offset", type: "type", width: "width", height: "height", minWidth: "minWidth", minHeight: "minHeight", effect: "effect", footer: "footer", showCancel: "showCancel", cancelText: "cancelText", showConfirm: "showConfirm", confirmText: "confirmText", backdropClose: "backdropClose", hasBackdrop: "hasBackdrop", className: "className", buttonsCenter: "buttonsCenter", draggable: "draggable", resizable: "resizable", maximize: "maximize", beforeClose: "beforeClose" }, outputs: { cancel: "cancel", confirm: "confirm", close: "close", visibleChange: "visibleChange", showDone: "showDone", closeDone: "closeDone" }, usesInheritance: true, ngImport: i0, template: '', isInline: true });
|
|
80
85
|
__decorate([
|
|
81
86
|
XInputBoolean()
|
|
82
87
|
], XDialogProperty.prototype, "visible", void 0);
|
|
@@ -93,7 +98,7 @@ __decorate([
|
|
|
93
98
|
XWithConfig(X_DIALOG_CONFIG_NAME, '18rem')
|
|
94
99
|
], XDialogProperty.prototype, "minWidth", void 0);
|
|
95
100
|
__decorate([
|
|
96
|
-
XWithConfig(X_DIALOG_CONFIG_NAME, '
|
|
101
|
+
XWithConfig(X_DIALOG_CONFIG_NAME, '8rem')
|
|
97
102
|
], XDialogProperty.prototype, "minHeight", void 0);
|
|
98
103
|
__decorate([
|
|
99
104
|
XWithConfig(X_DIALOG_CONFIG_NAME, 'white')
|
|
@@ -186,6 +191,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImpor
|
|
|
186
191
|
type: Output
|
|
187
192
|
}], confirm: [{
|
|
188
193
|
type: Output
|
|
194
|
+
}], close: [{
|
|
195
|
+
type: Output
|
|
189
196
|
}], visibleChange: [{
|
|
190
197
|
type: Output
|
|
191
198
|
}], showDone: [{
|
|
@@ -213,6 +220,7 @@ class XDialogComponent extends XDialogProperty {
|
|
|
213
220
|
this.contentBox = {};
|
|
214
221
|
this.distance = { x: 0, y: 0 };
|
|
215
222
|
this.viewInit = false;
|
|
223
|
+
this.action = null;
|
|
216
224
|
this._unSubject = new Subject();
|
|
217
225
|
this.scrollStrategy = this.protalService.overlay.scrollStrategies.block();
|
|
218
226
|
}
|
|
@@ -255,8 +263,7 @@ class XDialogComponent extends XDialogProperty {
|
|
|
255
263
|
this.create();
|
|
256
264
|
}
|
|
257
265
|
else {
|
|
258
|
-
this.
|
|
259
|
-
// this.visibleChange.emit(false);
|
|
266
|
+
this.onClose('close', false);
|
|
260
267
|
}
|
|
261
268
|
}
|
|
262
269
|
create() {
|
|
@@ -296,7 +303,7 @@ class XDialogComponent extends XDialogProperty {
|
|
|
296
303
|
});
|
|
297
304
|
}
|
|
298
305
|
if (this.hasBackdrop && this.backdropClose && this.dialogRef?.overlayRef) {
|
|
299
|
-
this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose());
|
|
306
|
+
this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose('close'));
|
|
300
307
|
}
|
|
301
308
|
}
|
|
302
309
|
setWidthHeight() {
|
|
@@ -309,24 +316,29 @@ class XDialogComponent extends XDialogProperty {
|
|
|
309
316
|
this.maximize = false;
|
|
310
317
|
}
|
|
311
318
|
}
|
|
312
|
-
detach() {
|
|
313
|
-
if (this.portalAttached()) {
|
|
314
|
-
this.visible = false;
|
|
315
|
-
this.visibleChange.emit(this.visible);
|
|
316
|
-
this.dialogRef?.overlayRef?.detach();
|
|
317
|
-
this.unsubscribe();
|
|
318
|
-
this.close.emit();
|
|
319
|
-
}
|
|
320
|
-
}
|
|
321
319
|
portalAttached() {
|
|
322
320
|
return this.dialogRef?.overlayRef?.hasAttached();
|
|
323
321
|
}
|
|
324
|
-
onClose() {
|
|
325
|
-
if (
|
|
326
|
-
|
|
322
|
+
onClose(action, execFunction = true) {
|
|
323
|
+
if (!this.portalAttached())
|
|
324
|
+
return;
|
|
325
|
+
if (XIsFunction(this.beforeClose) && execFunction) {
|
|
326
|
+
this.beforeClose(action);
|
|
327
|
+
this.action = action;
|
|
327
328
|
}
|
|
328
329
|
else {
|
|
329
|
-
this.
|
|
330
|
+
this.visible = false;
|
|
331
|
+
this.visibleChange.emit(this.visible);
|
|
332
|
+
this.dialogRef?.overlayRef?.detach();
|
|
333
|
+
this.unsubscribe();
|
|
334
|
+
if ([action, this.action].includes('confirm')) {
|
|
335
|
+
this.confirm.emit();
|
|
336
|
+
}
|
|
337
|
+
if ([action, this.action].includes('cancel')) {
|
|
338
|
+
this.cancel.emit();
|
|
339
|
+
}
|
|
340
|
+
this.action = null;
|
|
341
|
+
this.close.emit();
|
|
330
342
|
}
|
|
331
343
|
}
|
|
332
344
|
onDragEnded($event) {
|
|
@@ -390,14 +402,6 @@ class XDialogComponent extends XDialogProperty {
|
|
|
390
402
|
}
|
|
391
403
|
}
|
|
392
404
|
}
|
|
393
|
-
onCancel() {
|
|
394
|
-
this.onClose();
|
|
395
|
-
this.cancel.emit();
|
|
396
|
-
}
|
|
397
|
-
onConfirm() {
|
|
398
|
-
this.onClose();
|
|
399
|
-
this.confirm.emit();
|
|
400
|
-
}
|
|
401
405
|
moveDone($event) {
|
|
402
406
|
if ($event.toState === 'void') {
|
|
403
407
|
this.closeDone.emit($event);
|
|
@@ -423,10 +427,10 @@ class XDialogComponent extends XDialogProperty {
|
|
|
423
427
|
}
|
|
424
428
|
}
|
|
425
429
|
/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.XPortalService }, { token: i2.Overlay }, { token: i3.XI18nService }], target: i0.ɵɵFactoryTarget.Component });
|
|
426
|
-
/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n <div\r\n class=\"x-dialog\"\r\n [@x-move-box-animation]=\"placement\"\r\n (@x-move-box-animation.done)=\"moveDone($event)\"\r\n [class.x-dialog-maximize]=\"isMaximize\"\r\n [class.x-dialog-resizable]=\"resizable\"\r\n [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n >\r\n <x-alert\r\n [draggable]=\"draggable && dialogBox['draggable']\"\r\n [resizable]=\"resizable && dialogBox['resizable']\"\r\n [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [minWidth]=\"dialogBox['minWidth']\"\r\n [minHeight]=\"dialogBox['minHeight']\"\r\n [dragBoundary]=\"'.cdk-overlay-container'\"\r\n [title]=\"title\"\r\n [content]=\"contentTpl\"\r\n [type]=\"type\"\r\n [effect]=\"effect\"\r\n [hideClose]=\"hideClose\"\r\n [closeText]=\"closeText\"\r\n [operationTpl]=\"operationTpl\"\r\n (close)=\"onClose()\"\r\n (dragEnded)=\"onDragEnded($event)\"\r\n (resizing)=\"onResizing($event)\"\r\n showIcon=\"false\"\r\n duration=\"0\"\r\n manual\r\n disabledAnimation\r\n ></x-alert>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n <div class=\"x-dialog-inner\">\r\n <div class=\"x-dialog-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n <ng-container *xOutlet=\"footer\">\r\n <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n <x-button *ngIf=\"showCancel\" (click)=\"
|
|
430
|
+
/** @nocollapse */ /** @nocollapse */ XDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogComponent, selector: "x-dialog", viewQueries: [{ propertyName: "dialogTpl", first: true, predicate: ["dialogTpl"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #dialogTpl>\r\n <div\r\n class=\"x-dialog\"\r\n [@x-move-box-animation]=\"placement\"\r\n (@x-move-box-animation.done)=\"moveDone($event)\"\r\n [class.x-dialog-maximize]=\"isMaximize\"\r\n [class.x-dialog-resizable]=\"resizable\"\r\n [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n >\r\n <x-alert\r\n [draggable]=\"draggable && dialogBox['draggable']\"\r\n [resizable]=\"resizable && dialogBox['resizable']\"\r\n [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [minWidth]=\"dialogBox['minWidth']\"\r\n [minHeight]=\"dialogBox['minHeight']\"\r\n [dragBoundary]=\"'.cdk-overlay-container'\"\r\n [title]=\"title\"\r\n [content]=\"contentTpl\"\r\n [type]=\"type\"\r\n [effect]=\"effect\"\r\n [hideClose]=\"hideClose\"\r\n [closeText]=\"closeText\"\r\n [operationTpl]=\"operationTpl\"\r\n (close)=\"onClose('close')\"\r\n (dragEnded)=\"onDragEnded($event)\"\r\n (resizing)=\"onResizing($event)\"\r\n showIcon=\"false\"\r\n duration=\"0\"\r\n manual\r\n disabledAnimation\r\n ></x-alert>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n <div class=\"x-dialog-inner\">\r\n <div class=\"x-dialog-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n <ng-container *xOutlet=\"footer\">\r\n <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n <x-button *ngIf=\"showCancel\" (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</x-button>\r\n </x-buttons>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n <ng-container *ngIf=\"maximize || resizable\">\r\n <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"], components: [{ type: i4.XAlertComponent, selector: "x-alert" }, { type: i5.XButtonsComponent, selector: "x-buttons" }, { type: i5.XButtonComponent, selector: "x-button" }], directives: [{ type: i6.XOutletDirective, selector: "[xOutlet]", inputs: ["xOutletContext", "xOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
427
431
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, decorators: [{
|
|
428
432
|
type: Component,
|
|
429
|
-
args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n <div\r\n class=\"x-dialog\"\r\n [@x-move-box-animation]=\"placement\"\r\n (@x-move-box-animation.done)=\"moveDone($event)\"\r\n [class.x-dialog-maximize]=\"isMaximize\"\r\n [class.x-dialog-resizable]=\"resizable\"\r\n [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n >\r\n <x-alert\r\n [draggable]=\"draggable && dialogBox['draggable']\"\r\n [resizable]=\"resizable && dialogBox['resizable']\"\r\n [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [minWidth]=\"dialogBox['minWidth']\"\r\n [minHeight]=\"dialogBox['minHeight']\"\r\n [dragBoundary]=\"'.cdk-overlay-container'\"\r\n [title]=\"title\"\r\n [content]=\"contentTpl\"\r\n [type]=\"type\"\r\n [effect]=\"effect\"\r\n [hideClose]=\"hideClose\"\r\n [closeText]=\"closeText\"\r\n [operationTpl]=\"operationTpl\"\r\n (close)=\"onClose()\"\r\n (dragEnded)=\"onDragEnded($event)\"\r\n (resizing)=\"onResizing($event)\"\r\n showIcon=\"false\"\r\n duration=\"0\"\r\n manual\r\n disabledAnimation\r\n ></x-alert>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n <div class=\"x-dialog-inner\">\r\n <div class=\"x-dialog-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n <ng-container *xOutlet=\"footer\">\r\n <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n <x-button *ngIf=\"showCancel\" (click)=\"
|
|
433
|
+
args: [{ selector: `${XDialogPrefix}`, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<ng-template #dialogTpl>\r\n <div\r\n class=\"x-dialog\"\r\n [@x-move-box-animation]=\"placement\"\r\n (@x-move-box-animation.done)=\"moveDone($event)\"\r\n [class.x-dialog-maximize]=\"isMaximize\"\r\n [class.x-dialog-resizable]=\"resizable\"\r\n [class.x-dialog-default-maximize]=\"isDefaultMaximize\"\r\n >\r\n <x-alert\r\n [draggable]=\"draggable && dialogBox['draggable']\"\r\n [resizable]=\"resizable && dialogBox['resizable']\"\r\n [dragFreeDragPosition]=\"dialogBox['distance']\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [minWidth]=\"dialogBox['minWidth']\"\r\n [minHeight]=\"dialogBox['minHeight']\"\r\n [dragBoundary]=\"'.cdk-overlay-container'\"\r\n [title]=\"title\"\r\n [content]=\"contentTpl\"\r\n [type]=\"type\"\r\n [effect]=\"effect\"\r\n [hideClose]=\"hideClose\"\r\n [closeText]=\"closeText\"\r\n [operationTpl]=\"operationTpl\"\r\n (close)=\"onClose('close')\"\r\n (dragEnded)=\"onDragEnded($event)\"\r\n (resizing)=\"onResizing($event)\"\r\n showIcon=\"false\"\r\n duration=\"0\"\r\n manual\r\n disabledAnimation\r\n ></x-alert>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #contentTpl>\r\n <div class=\"x-dialog-inner\">\r\n <div class=\"x-dialog-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n <div class=\"x-dialog-buttons\" [class.x-dialog-buttons-center]=\"buttonsCenter\">\r\n <ng-container *xOutlet=\"footer\">\r\n <x-buttons space=\"1\" *ngIf=\"showCancel || showConfirm\">\r\n <x-button *ngIf=\"showCancel\" (click)=\"onClose('cancel')\">{{ getCancelText }}</x-button>\r\n <x-button *ngIf=\"showConfirm\" type=\"primary\" (click)=\"onClose('confirm')\">{{ getConfirmText }}</x-button>\r\n </x-buttons>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #operationTpl>\r\n <ng-container *ngIf=\"maximize || resizable\">\r\n <x-button size=\"small\" [icon]=\"isMaximize ? 'fto-minimize' : 'fto-maximize'\" [onlyIcon]=\"true\" (click)=\"onSize()\"></x-button>\r\n </ng-container>\r\n</ng-template>\r\n", styles: [".x-dialog{margin:0;padding:0;width:100%;height:100%}.x-dialog>x-alert{height:100%}.x-dialog>x-alert .x-alert{min-height:100%;height:-moz-fit-content;height:fit-content;align-items:inherit;padding:0}.x-dialog>x-alert .x-alert-inner{min-height:100%;display:flex;flex-direction:column}.x-dialog>x-alert .x-alert-title{padding:1rem 1rem 0}.x-dialog>x-alert .x-alert-content{flex:1;display:flex;flex-direction:column;padding:0 1rem .5rem}.x-dialog-inner{display:flex;flex-direction:column;margin:.5rem 0;flex:1}.x-dialog-buttons{display:flex;justify-content:flex-end}.x-dialog-buttons>x-buttons{margin-top:1rem;align-self:flex-end}.x-dialog-buttons-center{justify-content:center}.x-dialog-content{display:inline-flex;flex-direction:column;flex:1;max-height:70vh;overflow:auto;min-height:2rem}.x-dialog-maximize>x-alert .x-alert{left:0!important;top:0!important}.x-dialog-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}.x-dialog-default-maximize .x-dialog-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important;flex:initial}.x-dialog-container x-dialog{width:100%}\n"] }]
|
|
430
434
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.ViewContainerRef }, { type: i1.XPortalService }, { type: i2.Overlay }, { type: i3.XI18nService }]; }, propDecorators: { dialogTpl: [{
|
|
431
435
|
type: ViewChild,
|
|
432
436
|
args: ['dialogTpl', { static: false }]
|
|
@@ -489,10 +493,10 @@ class XDialogPortalComponent extends BasePortalOutlet {
|
|
|
489
493
|
}
|
|
490
494
|
}
|
|
491
495
|
/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
492
|
-
/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "@x-move-box-animation": "this.placement" } }, queries: [{ propertyName: "handles", predicate: CdkDragHandle, descendants: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "dragRef", first: true, predicate: CdkDrag, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-dialog-portal\"\r\n #dragRef\r\n cdkDrag\r\n [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n (resizing)=\"resizing($event)\"\r\n (cdkDragEnded)=\"onDragEnded($event)\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [style.minWidth]=\"dialogBox['minWidth']\"\r\n [style.minHeight]=\"dialogBox['minHeight']\"\r\n
|
|
496
|
+
/** @nocollapse */ /** @nocollapse */ XDialogPortalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: XDialogPortalComponent, selector: "x-dialog-portal", host: { listeners: { "@x-move-box-animation.done": "done($event)", "@x-move-box-animation.start": "start($event)" }, properties: { "@x-move-box-animation": "this.placement" } }, queries: [{ propertyName: "handles", predicate: CdkDragHandle, descendants: true }], viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "dragRef", first: true, predicate: CdkDrag, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"x-dialog-portal\"\r\n #dragRef\r\n cdkDrag\r\n [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n (resizing)=\"resizing($event)\"\r\n (cdkDragEnded)=\"onDragEnded($event)\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [style.minWidth]=\"dialogBox['minWidth']\"\r\n [style.minHeight]=\"dialogBox['minHeight']\"\r\n>\r\n <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin:0 -1rem -1rem;padding:0 1rem;height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"], directives: [{ type: i1$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i2$1.XResizableDirective, selector: "[xResizable]" }, { type: i3$1.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [XMoveBoxAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
493
497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
|
|
494
498
|
type: Component,
|
|
495
|
-
args: [{ selector: 'x-dialog-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<div\r\n class=\"x-dialog-portal\"\r\n #dragRef\r\n cdkDrag\r\n [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n (resizing)=\"resizing($event)\"\r\n (cdkDragEnded)=\"onDragEnded($event)\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [style.minWidth]=\"dialogBox['minWidth']\"\r\n [style.minHeight]=\"dialogBox['minHeight']\"\r\n
|
|
499
|
+
args: [{ selector: 'x-dialog-portal', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [XMoveBoxAnimation], template: "<div\r\n class=\"x-dialog-portal\"\r\n #dragRef\r\n cdkDrag\r\n [cdkDragDisabled]=\"!option.draggable && !dialogBox['draggable']\"\r\n [cdkDragBoundary]=\"'.cdk-overlay-container'\"\r\n [cdkDragFreeDragPosition]=\"dialogBox['distance']\"\r\n [xResizable]=\"option.resizable && dialogBox['resizable']!\"\r\n (resizing)=\"resizing($event)\"\r\n (cdkDragEnded)=\"onDragEnded($event)\"\r\n [offsetLeft]=\"offsetLeft\"\r\n [offsetTop]=\"offsetTop\"\r\n [style.minWidth]=\"dialogBox['minWidth']\"\r\n [style.minHeight]=\"dialogBox['minHeight']\"\r\n>\r\n <ng-template cdkPortalOutlet></ng-template>\r\n</div>\r\n", styles: [".x-dialog-portal{margin:0;padding:0;width:100%;height:100%;display:block;padding:1rem;box-sizing:border-box;min-height:inherit;max-height:inherit;background-color:var(--x-background);box-shadow:var(--x-box-shadow) var(--x-box-shadow-light-color);border:.0625rem solid transparent;border-radius:var(--x-border-radius)}.x-dialog-portal-title{font-weight:600;color:var(--x-text-300);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:3rem;line-height:3rem;display:block;align-items:center;margin:-1rem -1rem 0;padding:0 1rem}.x-dialog-portal-content{display:block;margin:0 -1rem;padding:0 1rem;max-height:70vh;overflow:auto;color:var(--x-text-300);font-size:calc(var(--x-font-size) - .0625rem);line-height:1.325rem}.x-dialog-portal-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;box-sizing:content-box;margin:0 -1rem -1rem;padding:0 1rem;height:4rem}.x-dialog-portal-actions[align=center]{justify-content:center}.x-dialog-portal-actions[align=start]{justify-content:flex-start}.x-dialog-portal-actions x-button:not(:first-child){margin-left:1rem}.x-dialog-portal-drag-handle{cursor:move}.x-dialog-portal-fullscreen{margin:0!important}.x-dialog-portal-fullscreen .x-dialog-portal{left:0!important;top:0!important}.x-dialog-portal-fullscreen .x-dialog-portal-content{max-height:calc(100vh - 7rem)!important;height:calc(100vh - 7rem)!important}x-dialog-portal{width:100%;height:100%}\n"] }]
|
|
496
500
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { placement: [{
|
|
497
501
|
type: HostBinding,
|
|
498
502
|
args: ['@x-move-box-animation']
|
|
@@ -552,6 +556,7 @@ class XDialogRef {
|
|
|
552
556
|
if (this.option.draggable) {
|
|
553
557
|
dialogBox['distance'] = { x: 0, y: 0 };
|
|
554
558
|
}
|
|
559
|
+
this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
555
560
|
}
|
|
556
561
|
else {
|
|
557
562
|
dialogBox['minWidth'] = this.option.minWidth;
|
|
@@ -588,6 +593,7 @@ class XDialogRef {
|
|
|
588
593
|
this.renderer.setStyle(overlayElement, 'margin-bottom', `${dialogBox['marginBottom']}`);
|
|
589
594
|
}
|
|
590
595
|
}
|
|
596
|
+
this.renderer.removeClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
591
597
|
if (this._isFristFullscreen && defaultMaximize) {
|
|
592
598
|
dialogRef.overlayRef?.updatePositionStrategy(this.portalService.setPlace(this.option.placement, this.option.offset));
|
|
593
599
|
this.renderer.addClass(hostElement, PortalResizablePrefix);
|
|
@@ -734,7 +740,7 @@ class XDialogService {
|
|
|
734
740
|
offset: '1rem',
|
|
735
741
|
width: '32rem',
|
|
736
742
|
minWidth: '18rem',
|
|
737
|
-
minHeight: '
|
|
743
|
+
minHeight: '8rem',
|
|
738
744
|
backdropClose: true,
|
|
739
745
|
hasBackdrop: true,
|
|
740
746
|
draggable: false,
|
|
@@ -797,6 +803,9 @@ class XDialogService {
|
|
|
797
803
|
instance.dialogBox = dialogBox;
|
|
798
804
|
});
|
|
799
805
|
}
|
|
806
|
+
if (defaultMaximize) {
|
|
807
|
+
this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
808
|
+
}
|
|
800
809
|
if (content instanceof TemplateRef) {
|
|
801
810
|
instance.attachTemplatePortal(new TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, dialogRef: dialogRef }));
|
|
802
811
|
}
|