@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
|
}
|
|
@@ -256,8 +264,7 @@ class XDialogComponent extends XDialogProperty {
|
|
|
256
264
|
this.create();
|
|
257
265
|
}
|
|
258
266
|
else {
|
|
259
|
-
this.
|
|
260
|
-
// this.visibleChange.emit(false);
|
|
267
|
+
this.onClose('close', false);
|
|
261
268
|
}
|
|
262
269
|
}
|
|
263
270
|
create() {
|
|
@@ -299,7 +306,7 @@ class XDialogComponent extends XDialogProperty {
|
|
|
299
306
|
});
|
|
300
307
|
}
|
|
301
308
|
if (this.hasBackdrop && this.backdropClose && ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef)) {
|
|
302
|
-
this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose());
|
|
309
|
+
this.backdropClick$ = this.dialogRef.overlayRef.backdropClick().subscribe(() => this.onClose('close'));
|
|
303
310
|
}
|
|
304
311
|
}
|
|
305
312
|
setWidthHeight() {
|
|
@@ -312,26 +319,31 @@ class XDialogComponent extends XDialogProperty {
|
|
|
312
319
|
this.maximize = false;
|
|
313
320
|
}
|
|
314
321
|
}
|
|
315
|
-
detach() {
|
|
316
|
-
var _a, _b;
|
|
317
|
-
if (this.portalAttached()) {
|
|
318
|
-
this.visible = false;
|
|
319
|
-
this.visibleChange.emit(this.visible);
|
|
320
|
-
(_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
|
|
321
|
-
this.unsubscribe();
|
|
322
|
-
this.close.emit();
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
322
|
portalAttached() {
|
|
326
323
|
var _a, _b;
|
|
327
324
|
return (_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.hasAttached();
|
|
328
325
|
}
|
|
329
|
-
onClose() {
|
|
330
|
-
|
|
331
|
-
|
|
326
|
+
onClose(action, execFunction = true) {
|
|
327
|
+
var _a, _b;
|
|
328
|
+
if (!this.portalAttached())
|
|
329
|
+
return;
|
|
330
|
+
if (XIsFunction(this.beforeClose) && execFunction) {
|
|
331
|
+
this.beforeClose(action);
|
|
332
|
+
this.action = action;
|
|
332
333
|
}
|
|
333
334
|
else {
|
|
334
|
-
this.
|
|
335
|
+
this.visible = false;
|
|
336
|
+
this.visibleChange.emit(this.visible);
|
|
337
|
+
(_b = (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.overlayRef) === null || _b === void 0 ? void 0 : _b.detach();
|
|
338
|
+
this.unsubscribe();
|
|
339
|
+
if ([action, this.action].includes('confirm')) {
|
|
340
|
+
this.confirm.emit();
|
|
341
|
+
}
|
|
342
|
+
if ([action, this.action].includes('cancel')) {
|
|
343
|
+
this.cancel.emit();
|
|
344
|
+
}
|
|
345
|
+
this.action = null;
|
|
346
|
+
this.close.emit();
|
|
335
347
|
}
|
|
336
348
|
}
|
|
337
349
|
onDragEnded($event) {
|
|
@@ -397,14 +409,6 @@ class XDialogComponent extends XDialogProperty {
|
|
|
397
409
|
}
|
|
398
410
|
}
|
|
399
411
|
}
|
|
400
|
-
onCancel() {
|
|
401
|
-
this.onClose();
|
|
402
|
-
this.cancel.emit();
|
|
403
|
-
}
|
|
404
|
-
onConfirm() {
|
|
405
|
-
this.onClose();
|
|
406
|
-
this.confirm.emit();
|
|
407
|
-
}
|
|
408
412
|
moveDone($event) {
|
|
409
413
|
var _a, _b;
|
|
410
414
|
if ($event.toState === 'void') {
|
|
@@ -431,10 +435,10 @@ class XDialogComponent extends XDialogProperty {
|
|
|
431
435
|
}
|
|
432
436
|
}
|
|
433
437
|
/** @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 });
|
|
434
|
-
/** @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)=\"
|
|
438
|
+
/** @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 });
|
|
435
439
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogComponent, decorators: [{
|
|
436
440
|
type: Component,
|
|
437
|
-
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)=\"
|
|
441
|
+
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"] }]
|
|
438
442
|
}], 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: [{
|
|
439
443
|
type: ViewChild,
|
|
440
444
|
args: ['dialogTpl', { static: false }]
|
|
@@ -497,10 +501,10 @@ class XDialogPortalComponent extends BasePortalOutlet {
|
|
|
497
501
|
}
|
|
498
502
|
}
|
|
499
503
|
/** @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 });
|
|
500
|
-
/** @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
|
|
504
|
+
/** @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 });
|
|
501
505
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: XDialogPortalComponent, decorators: [{
|
|
502
506
|
type: Component,
|
|
503
|
-
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
|
|
507
|
+
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"] }]
|
|
504
508
|
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { placement: [{
|
|
505
509
|
type: HostBinding,
|
|
506
510
|
args: ['@x-move-box-animation']
|
|
@@ -561,6 +565,7 @@ class XDialogRef {
|
|
|
561
565
|
if (this.option.draggable) {
|
|
562
566
|
dialogBox['distance'] = { x: 0, y: 0 };
|
|
563
567
|
}
|
|
568
|
+
this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
564
569
|
}
|
|
565
570
|
else {
|
|
566
571
|
dialogBox['minWidth'] = this.option.minWidth;
|
|
@@ -597,6 +602,7 @@ class XDialogRef {
|
|
|
597
602
|
this.renderer.setStyle(overlayElement, 'margin-bottom', `${dialogBox['marginBottom']}`);
|
|
598
603
|
}
|
|
599
604
|
}
|
|
605
|
+
this.renderer.removeClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
600
606
|
if (this._isFristFullscreen && defaultMaximize) {
|
|
601
607
|
(_b = dialogRef.overlayRef) === null || _b === void 0 ? void 0 : _b.updatePositionStrategy(this.portalService.setPlace(this.option.placement, this.option.offset));
|
|
602
608
|
this.renderer.addClass(hostElement, PortalResizablePrefix);
|
|
@@ -750,7 +756,7 @@ class XDialogService {
|
|
|
750
756
|
offset: '1rem',
|
|
751
757
|
width: '32rem',
|
|
752
758
|
minWidth: '18rem',
|
|
753
|
-
minHeight: '
|
|
759
|
+
minHeight: '8rem',
|
|
754
760
|
backdropClose: true,
|
|
755
761
|
hasBackdrop: true,
|
|
756
762
|
draggable: false,
|
|
@@ -814,6 +820,9 @@ class XDialogService {
|
|
|
814
820
|
instance.dialogBox = dialogBox;
|
|
815
821
|
});
|
|
816
822
|
}
|
|
823
|
+
if (defaultMaximize) {
|
|
824
|
+
this.renderer.addClass(overlayElement, 'x-dialog-portal-fullscreen');
|
|
825
|
+
}
|
|
817
826
|
if (content instanceof TemplateRef) {
|
|
818
827
|
instance.attachTemplatePortal(new TemplatePortal(content, option.viewContainerRef, { $implicit: option.data, dialogRef: dialogRef }));
|
|
819
828
|
}
|