You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
768 lines
34 KiB
JavaScript
768 lines
34 KiB
JavaScript
"use strict";
|
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
};
|
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
|
};
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
var core_1 = require("@angular/core");
|
|
var animations_1 = require("@angular/animations");
|
|
var common_1 = require("@angular/common");
|
|
var domhandler_1 = require("../dom/domhandler");
|
|
var shared_1 = require("../common/shared");
|
|
var idx = 0;
|
|
var Dialog = /** @class */ (function () {
|
|
function Dialog(el, renderer, zone) {
|
|
this.el = el;
|
|
this.renderer = renderer;
|
|
this.zone = zone;
|
|
this.draggable = true;
|
|
this.resizable = true;
|
|
this.closeOnEscape = true;
|
|
this.closable = true;
|
|
this.responsive = true;
|
|
this.showHeader = true;
|
|
this.breakpoint = 640;
|
|
this.blockScroll = false;
|
|
this.autoZIndex = true;
|
|
this.baseZIndex = 0;
|
|
this.minX = 0;
|
|
this.minY = 0;
|
|
this.focusOnShow = true;
|
|
this.focusTrap = true;
|
|
this.transitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
|
this.closeIcon = 'pi pi-times';
|
|
this.minimizeIcon = 'pi pi-window-minimize';
|
|
this.maximizeIcon = 'pi pi-window-maximize';
|
|
this.onShow = new core_1.EventEmitter();
|
|
this.onHide = new core_1.EventEmitter();
|
|
this.visibleChange = new core_1.EventEmitter();
|
|
this.id = "ui-dialog-" + idx++;
|
|
}
|
|
Object.defineProperty(Dialog.prototype, "width", {
|
|
get: function () {
|
|
return this._width;
|
|
},
|
|
set: function (val) {
|
|
this._width = val;
|
|
console.warn("width property is deprecated, use style to define the width of the Dialog.");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(Dialog.prototype, "height", {
|
|
get: function () {
|
|
return this._height;
|
|
},
|
|
set: function (val) {
|
|
this._height = val;
|
|
console.warn("height property is deprecated, use style to define the height of the Dialog.");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(Dialog.prototype, "minWidth", {
|
|
get: function () {
|
|
return this._minWidth;
|
|
},
|
|
set: function (val) {
|
|
this._minWidth = val;
|
|
console.warn("minWidth property is deprecated, use style to define the minWidth of the Dialog.");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Object.defineProperty(Dialog.prototype, "minHeight", {
|
|
get: function () {
|
|
return this._minHeight;
|
|
},
|
|
set: function (val) {
|
|
this._minHeight = val;
|
|
console.warn("minHeight property is deprecated, use style to define the minHeight of the Dialog.");
|
|
},
|
|
enumerable: true,
|
|
configurable: true
|
|
});
|
|
Dialog.prototype.focus = function () {
|
|
var focusable = domhandler_1.DomHandler.findSingle(this.container, 'button');
|
|
if (focusable) {
|
|
this.zone.runOutsideAngular(function () {
|
|
setTimeout(function () { return focusable.focus(); }, 5);
|
|
});
|
|
}
|
|
};
|
|
Dialog.prototype.positionOverlay = function () {
|
|
var viewport = domhandler_1.DomHandler.getViewport();
|
|
if (domhandler_1.DomHandler.getOuterHeight(this.container) + this.contentViewChild.nativeElement.scrollHeight - this.contentViewChild.nativeElement.clientHeight > viewport.height) {
|
|
this.contentViewChild.nativeElement.style.height = (viewport.height * .75) + 'px';
|
|
this.container.style.height = 'auto';
|
|
}
|
|
else {
|
|
this.contentViewChild.nativeElement.style.height = null;
|
|
if (this.height) {
|
|
this.container.style.height = this.height + 'px';
|
|
}
|
|
}
|
|
if (this.positionLeft >= 0 && this.positionTop >= 0) {
|
|
this.container.style.left = this.positionLeft + 'px';
|
|
this.container.style.top = this.positionTop + 'px';
|
|
}
|
|
else if (this.positionTop >= 0) {
|
|
this.center();
|
|
this.container.style.top = this.positionTop + 'px';
|
|
}
|
|
else {
|
|
this.center();
|
|
}
|
|
};
|
|
Dialog.prototype.close = function (event) {
|
|
this.visibleChange.emit(false);
|
|
event.preventDefault();
|
|
};
|
|
Dialog.prototype.center = function () {
|
|
var elementWidth = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
var elementHeight = domhandler_1.DomHandler.getOuterHeight(this.container);
|
|
if (elementWidth == 0 && elementHeight == 0) {
|
|
this.container.style.visibility = 'hidden';
|
|
this.container.style.display = 'block';
|
|
elementWidth = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
elementHeight = domhandler_1.DomHandler.getOuterHeight(this.container);
|
|
this.container.style.display = 'none';
|
|
this.container.style.visibility = 'visible';
|
|
}
|
|
var viewport = domhandler_1.DomHandler.getViewport();
|
|
var x = Math.max(Math.floor((viewport.width - elementWidth) / 2), 0);
|
|
var y = Math.max(Math.floor((viewport.height - elementHeight) / 2), 0);
|
|
this.container.style.left = x + 'px';
|
|
this.container.style.top = y + 'px';
|
|
};
|
|
Dialog.prototype.enableModality = function () {
|
|
var _this = this;
|
|
if (!this.mask) {
|
|
this.mask = document.createElement('div');
|
|
this.mask.style.zIndex = String(parseInt(this.container.style.zIndex) - 1);
|
|
var maskStyleClass = 'ui-widget-overlay ui-dialog-mask';
|
|
if (this.blockScroll) {
|
|
maskStyleClass += ' ui-dialog-mask-scrollblocker';
|
|
}
|
|
domhandler_1.DomHandler.addMultipleClasses(this.mask, maskStyleClass);
|
|
if (this.closable && this.dismissableMask) {
|
|
this.maskClickListener = this.renderer.listen(this.mask, 'click', function (event) {
|
|
_this.close(event);
|
|
});
|
|
}
|
|
document.body.appendChild(this.mask);
|
|
if (this.blockScroll) {
|
|
domhandler_1.DomHandler.addClass(document.body, 'ui-overflow-hidden');
|
|
}
|
|
}
|
|
};
|
|
Dialog.prototype.disableModality = function () {
|
|
if (this.mask) {
|
|
this.unbindMaskClickListener();
|
|
document.body.removeChild(this.mask);
|
|
if (this.blockScroll) {
|
|
var bodyChildren = document.body.children;
|
|
var hasBlockerMasks = void 0;
|
|
for (var i = 0; i < bodyChildren.length; i++) {
|
|
var bodyChild = bodyChildren[i];
|
|
if (domhandler_1.DomHandler.hasClass(bodyChild, 'ui-dialog-mask-scrollblocker')) {
|
|
hasBlockerMasks = true;
|
|
break;
|
|
}
|
|
}
|
|
if (!hasBlockerMasks) {
|
|
domhandler_1.DomHandler.removeClass(document.body, 'ui-overflow-hidden');
|
|
}
|
|
}
|
|
this.mask = null;
|
|
}
|
|
};
|
|
Dialog.prototype.toggleMaximize = function (event) {
|
|
if (this.maximized)
|
|
this.revertMaximize();
|
|
else
|
|
this.maximize();
|
|
event.preventDefault();
|
|
};
|
|
Dialog.prototype.maximize = function () {
|
|
this.preMaximizePageX = parseFloat(this.container.style.top);
|
|
this.preMaximizePageY = parseFloat(this.container.style.left);
|
|
this.preMaximizeContainerWidth = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
this.preMaximizeContainerHeight = domhandler_1.DomHandler.getOuterHeight(this.container);
|
|
this.preMaximizeContentHeight = domhandler_1.DomHandler.getOuterHeight(this.contentViewChild.nativeElement);
|
|
this.container.style.top = '0px';
|
|
this.container.style.left = '0px';
|
|
this.container.style.width = '100vw';
|
|
this.container.style.height = '100vh';
|
|
var diffHeight = parseFloat(this.container.style.top);
|
|
if (this.headerViewChild && this.headerViewChild.nativeElement) {
|
|
diffHeight += domhandler_1.DomHandler.getOuterHeight(this.headerViewChild.nativeElement);
|
|
}
|
|
if (this.footerViewChild && this.footerViewChild.nativeElement) {
|
|
diffHeight += domhandler_1.DomHandler.getOuterHeight(this.footerViewChild.nativeElement);
|
|
}
|
|
this.contentViewChild.nativeElement.style.height = 'calc(100vh - ' + diffHeight + 'px)';
|
|
domhandler_1.DomHandler.addClass(this.container, 'ui-dialog-maximized');
|
|
domhandler_1.DomHandler.addClass(document.body, 'ui-overflow-hidden');
|
|
this.moveOnTop();
|
|
this.maximized = true;
|
|
};
|
|
Dialog.prototype.revertMaximize = function () {
|
|
var _this = this;
|
|
this.container.style.top = this.preMaximizePageX + 'px';
|
|
this.container.style.left = this.preMaximizePageY + 'px';
|
|
this.container.style.width = this.preMaximizeContainerWidth + 'px';
|
|
this.container.style.height = this.preMaximizeContainerHeight + 'px';
|
|
this.contentViewChild.nativeElement.style.height = this.preMaximizeContentHeight + 'px';
|
|
domhandler_1.DomHandler.removeClass(document.body, 'ui-overflow-hidden');
|
|
this.maximized = false;
|
|
this.zone.runOutsideAngular(function () {
|
|
setTimeout(function () { return domhandler_1.DomHandler.removeClass(_this.container, 'ui-dialog-maximized'); }, 300);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindMaskClickListener = function () {
|
|
if (this.maskClickListener) {
|
|
this.maskClickListener();
|
|
this.maskClickListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.moveOnTop = function () {
|
|
if (this.autoZIndex) {
|
|
this.container.style.zIndex = String(this.baseZIndex + (++domhandler_1.DomHandler.zindex));
|
|
}
|
|
};
|
|
Dialog.prototype.onCloseMouseDown = function (event) {
|
|
this.closeIconMouseDown = true;
|
|
};
|
|
Dialog.prototype.initDrag = function (event) {
|
|
if (this.closeIconMouseDown) {
|
|
this.closeIconMouseDown = false;
|
|
return;
|
|
}
|
|
if (this.draggable) {
|
|
this.dragging = true;
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
domhandler_1.DomHandler.addClass(document.body, 'ui-unselectable-text');
|
|
}
|
|
};
|
|
Dialog.prototype.getFocusableElements = function () {
|
|
var focusableElements = domhandler_1.DomHandler.find(this.container, "button:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n [href][clientHeight][clientWidth]:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n input:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), select:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n textarea:not([tabindex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), [tabIndex]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden]), \n [contenteditable]:not([tabIndex = \"-1\"]):not([disabled]):not([style*=\"display:none\"]):not([hidden])");
|
|
var visibleFocusableElements = [];
|
|
for (var _i = 0, focusableElements_1 = focusableElements; _i < focusableElements_1.length; _i++) {
|
|
var focusableElement = focusableElements_1[_i];
|
|
if (getComputedStyle(focusableElement).display != "none" && getComputedStyle(focusableElement).visibility != "hidden")
|
|
visibleFocusableElements.push(focusableElement);
|
|
}
|
|
return visibleFocusableElements;
|
|
};
|
|
Dialog.prototype.onKeydown = function (event) {
|
|
if (this.focusTrap) {
|
|
if (event.which === 9) {
|
|
event.preventDefault();
|
|
var focusableElements = this.getFocusableElements();
|
|
if (focusableElements && focusableElements.length > 0) {
|
|
if (!document.activeElement) {
|
|
focusableElements[0].focus();
|
|
}
|
|
else {
|
|
var focusedIndex = focusableElements.indexOf(document.activeElement);
|
|
if (event.shiftKey) {
|
|
if (focusedIndex == -1 || focusedIndex === 0)
|
|
focusableElements[focusableElements.length - 1].focus();
|
|
else
|
|
focusableElements[focusedIndex - 1].focus();
|
|
}
|
|
else {
|
|
if (focusedIndex == -1 || focusedIndex === (focusableElements.length - 1))
|
|
focusableElements[0].focus();
|
|
else
|
|
focusableElements[focusedIndex + 1].focus();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
Dialog.prototype.onDrag = function (event) {
|
|
if (this.dragging) {
|
|
var containerWidth = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
var containerHeight = domhandler_1.DomHandler.getOuterHeight(this.container);
|
|
var deltaX = event.pageX - this.lastPageX;
|
|
var deltaY = event.pageY - this.lastPageY;
|
|
var offset = domhandler_1.DomHandler.getOffset(this.container);
|
|
var leftPos = offset.left + deltaX;
|
|
var topPos = offset.top + deltaY;
|
|
var viewport = domhandler_1.DomHandler.getViewport();
|
|
if (leftPos >= this.minX && (leftPos + containerWidth) < viewport.width) {
|
|
this.container.style.left = leftPos + 'px';
|
|
}
|
|
if (topPos >= this.minY && (topPos + containerHeight) < viewport.height) {
|
|
this.container.style.top = topPos + 'px';
|
|
}
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
}
|
|
};
|
|
Dialog.prototype.endDrag = function (event) {
|
|
if (this.draggable) {
|
|
this.dragging = false;
|
|
domhandler_1.DomHandler.removeClass(document.body, 'ui-unselectable-text');
|
|
}
|
|
};
|
|
Dialog.prototype.initResize = function (event) {
|
|
if (this.resizable) {
|
|
this.preWidth = null;
|
|
this.resizing = true;
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
domhandler_1.DomHandler.addClass(document.body, 'ui-unselectable-text');
|
|
}
|
|
};
|
|
Dialog.prototype.onResize = function (event) {
|
|
if (this.resizing) {
|
|
var deltaX = event.pageX - this.lastPageX;
|
|
var deltaY = event.pageY - this.lastPageY;
|
|
var containerWidth = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
var containerHeight = domhandler_1.DomHandler.getOuterHeight(this.container);
|
|
var contentHeight = domhandler_1.DomHandler.getOuterHeight(this.contentViewChild.nativeElement);
|
|
var newWidth = containerWidth + deltaX;
|
|
var newHeight = containerHeight + deltaY;
|
|
var minWidth = this.container.style.minWidth;
|
|
var minHeight = this.container.style.minHeight;
|
|
var offset = domhandler_1.DomHandler.getOffset(this.container);
|
|
var viewport = domhandler_1.DomHandler.getViewport();
|
|
if ((!minWidth || newWidth > parseInt(minWidth)) && (offset.left + newWidth) < viewport.width) {
|
|
this.container.style.width = newWidth + 'px';
|
|
}
|
|
if ((!minHeight || newHeight > parseInt(minHeight)) && (offset.top + newHeight) < viewport.height) {
|
|
this.container.style.height = newHeight + 'px';
|
|
this.contentViewChild.nativeElement.style.height = contentHeight + deltaY + 'px';
|
|
}
|
|
this.lastPageX = event.pageX;
|
|
this.lastPageY = event.pageY;
|
|
}
|
|
};
|
|
Dialog.prototype.onResizeEnd = function () {
|
|
if (this.resizing) {
|
|
this.resizing = false;
|
|
domhandler_1.DomHandler.removeClass(document.body, 'ui-unselectable-text');
|
|
}
|
|
};
|
|
Dialog.prototype.bindGlobalListeners = function () {
|
|
if (this.modal) {
|
|
this.bindDocumentKeydownListener();
|
|
}
|
|
if (this.draggable) {
|
|
this.bindDocumentDragListener();
|
|
this.bindDocumentDragEndListener();
|
|
}
|
|
if (this.resizable) {
|
|
this.bindDocumentResizeListeners();
|
|
}
|
|
if (this.responsive) {
|
|
this.bindDocumentResponsiveListener();
|
|
}
|
|
if (this.closeOnEscape && this.closable) {
|
|
this.bindDocumentEscapeListener();
|
|
}
|
|
};
|
|
Dialog.prototype.unbindGlobalListeners = function () {
|
|
this.unbindDocumentDragListener();
|
|
this.unbindDocumentKeydownListener();
|
|
this.unbindDocumentDragEndListener();
|
|
this.unbindDocumentResizeListeners();
|
|
this.unbindDocumentResponsiveListener();
|
|
this.unbindDocumentEscapeListener();
|
|
};
|
|
Dialog.prototype.bindDocumentKeydownListener = function () {
|
|
var _this = this;
|
|
this.zone.runOutsideAngular(function () {
|
|
_this.documentKeydownListener = _this.onKeydown.bind(_this);
|
|
window.document.addEventListener('keydown', _this.documentKeydownListener);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentKeydownListener = function () {
|
|
if (this.documentKeydownListener) {
|
|
window.document.removeEventListener('keydown', this.documentKeydownListener);
|
|
this.documentKeydownListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.bindDocumentDragListener = function () {
|
|
var _this = this;
|
|
this.zone.runOutsideAngular(function () {
|
|
_this.documentDragListener = _this.onDrag.bind(_this);
|
|
window.document.addEventListener('mousemove', _this.documentDragListener);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentDragListener = function () {
|
|
if (this.documentDragListener) {
|
|
window.document.removeEventListener('mousemove', this.documentDragListener);
|
|
this.documentDragListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.bindDocumentDragEndListener = function () {
|
|
var _this = this;
|
|
this.zone.runOutsideAngular(function () {
|
|
_this.documentDragEndListener = _this.endDrag.bind(_this);
|
|
window.document.addEventListener('mouseup', _this.documentDragEndListener);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentDragEndListener = function () {
|
|
if (this.documentDragEndListener) {
|
|
window.document.removeEventListener('mouseup', this.documentDragEndListener);
|
|
this.documentDragEndListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.bindDocumentResizeListeners = function () {
|
|
var _this = this;
|
|
this.zone.runOutsideAngular(function () {
|
|
_this.documentResizeListener = _this.onResize.bind(_this);
|
|
_this.documentResizeEndListener = _this.onResizeEnd.bind(_this);
|
|
window.document.addEventListener('mousemove', _this.documentResizeListener);
|
|
window.document.addEventListener('mouseup', _this.documentResizeEndListener);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentResizeListeners = function () {
|
|
if (this.documentResizeListener && this.documentResizeEndListener) {
|
|
window.document.removeEventListener('mouseup', this.documentResizeListener);
|
|
window.document.removeEventListener('mouseup', this.documentResizeEndListener);
|
|
this.documentResizeListener = null;
|
|
this.documentResizeEndListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.bindDocumentResponsiveListener = function () {
|
|
var _this = this;
|
|
this.zone.runOutsideAngular(function () {
|
|
_this.documentResponsiveListener = _this.onWindowResize.bind(_this);
|
|
window.addEventListener('resize', _this.documentResponsiveListener);
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentResponsiveListener = function () {
|
|
if (this.documentResponsiveListener) {
|
|
window.removeEventListener('resize', this.documentResponsiveListener);
|
|
this.documentResponsiveListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.onWindowResize = function () {
|
|
if (this.maximized) {
|
|
return;
|
|
}
|
|
var viewport = domhandler_1.DomHandler.getViewport();
|
|
var width = domhandler_1.DomHandler.getOuterWidth(this.container);
|
|
if (viewport.width <= this.breakpoint) {
|
|
if (!this.preWidth) {
|
|
this.preWidth = width;
|
|
}
|
|
this.container.style.left = '0px';
|
|
this.container.style.width = '100%';
|
|
}
|
|
else {
|
|
this.container.style.width = this.preWidth + 'px';
|
|
this.positionOverlay();
|
|
}
|
|
};
|
|
Dialog.prototype.bindDocumentEscapeListener = function () {
|
|
var _this = this;
|
|
this.documentEscapeListener = this.renderer.listen('document', 'keydown', function (event) {
|
|
if (event.which == 27) {
|
|
if (parseInt(_this.container.style.zIndex) === (domhandler_1.DomHandler.zindex + _this.baseZIndex)) {
|
|
_this.close(event);
|
|
}
|
|
}
|
|
});
|
|
};
|
|
Dialog.prototype.unbindDocumentEscapeListener = function () {
|
|
if (this.documentEscapeListener) {
|
|
this.documentEscapeListener();
|
|
this.documentEscapeListener = null;
|
|
}
|
|
};
|
|
Dialog.prototype.setDimensions = function () {
|
|
if (this.width) {
|
|
this.container.style.width = this.width + 'px';
|
|
}
|
|
if (this.height) {
|
|
this.container.style.height = this.height + 'px';
|
|
}
|
|
if (this.minWidth) {
|
|
this.container.style.minWidth = this.minWidth + 'px';
|
|
}
|
|
if (this.minHeight) {
|
|
this.container.style.minHeight = this.minHeight + 'px';
|
|
}
|
|
};
|
|
Dialog.prototype.appendContainer = function () {
|
|
if (this.appendTo) {
|
|
if (this.appendTo === 'body')
|
|
document.body.appendChild(this.container);
|
|
else
|
|
domhandler_1.DomHandler.appendChild(this.container, this.appendTo);
|
|
}
|
|
};
|
|
Dialog.prototype.restoreAppend = function () {
|
|
if (this.container && this.appendTo) {
|
|
this.el.nativeElement.appendChild(this.container);
|
|
}
|
|
};
|
|
Dialog.prototype.onAnimationStart = function (event) {
|
|
switch (event.toState) {
|
|
case 'visible':
|
|
this.container = event.element;
|
|
this.setDimensions();
|
|
this.onShow.emit({});
|
|
this.appendContainer();
|
|
this.moveOnTop();
|
|
this.positionOverlay();
|
|
this.bindGlobalListeners();
|
|
if (this.maximized) {
|
|
domhandler_1.DomHandler.addClass(document.body, 'ui-overflow-hidden');
|
|
}
|
|
if (this.modal) {
|
|
this.enableModality();
|
|
}
|
|
if (this.focusOnShow) {
|
|
this.focus();
|
|
}
|
|
if (this.responsive) {
|
|
this.onWindowResize();
|
|
}
|
|
break;
|
|
case 'void':
|
|
this.onContainerDestroy();
|
|
this.onHide.emit({});
|
|
break;
|
|
}
|
|
};
|
|
Dialog.prototype.onContainerDestroy = function () {
|
|
this.unbindGlobalListeners();
|
|
this.dragging = false;
|
|
if (this.maximized) {
|
|
domhandler_1.DomHandler.removeClass(document.body, 'ui-overflow-hidden');
|
|
this.maximized = false;
|
|
}
|
|
if (this.modal) {
|
|
this.disableModality();
|
|
}
|
|
this.container = null;
|
|
};
|
|
Dialog.prototype.ngOnDestroy = function () {
|
|
if (this.container) {
|
|
this.restoreAppend();
|
|
this.onContainerDestroy();
|
|
}
|
|
};
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "visible", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "header", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "draggable", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "resizable", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "positionLeft", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "positionTop", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object)
|
|
], Dialog.prototype, "contentStyle", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "modal", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "closeOnEscape", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "dismissableMask", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "rtl", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "closable", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "responsive", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object)
|
|
], Dialog.prototype, "appendTo", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object)
|
|
], Dialog.prototype, "style", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "styleClass", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "showHeader", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "breakpoint", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "blockScroll", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "autoZIndex", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "baseZIndex", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "minX", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Number)
|
|
], Dialog.prototype, "minY", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "focusOnShow", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "maximizable", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Boolean)
|
|
], Dialog.prototype, "focusTrap", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "transitionOptions", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "closeIcon", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "minimizeIcon", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", String)
|
|
], Dialog.prototype, "maximizeIcon", void 0);
|
|
__decorate([
|
|
core_1.ContentChildren(shared_1.Header, { descendants: false }),
|
|
__metadata("design:type", core_1.QueryList)
|
|
], Dialog.prototype, "headerFacet", void 0);
|
|
__decorate([
|
|
core_1.ContentChildren(shared_1.Footer, { descendants: false }),
|
|
__metadata("design:type", core_1.QueryList)
|
|
], Dialog.prototype, "footerFacet", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('titlebar'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Dialog.prototype, "headerViewChild", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('content'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Dialog.prototype, "contentViewChild", void 0);
|
|
__decorate([
|
|
core_1.ViewChild('footer'),
|
|
__metadata("design:type", core_1.ElementRef)
|
|
], Dialog.prototype, "footerViewChild", void 0);
|
|
__decorate([
|
|
core_1.Output(),
|
|
__metadata("design:type", core_1.EventEmitter)
|
|
], Dialog.prototype, "onShow", void 0);
|
|
__decorate([
|
|
core_1.Output(),
|
|
__metadata("design:type", core_1.EventEmitter)
|
|
], Dialog.prototype, "onHide", void 0);
|
|
__decorate([
|
|
core_1.Output(),
|
|
__metadata("design:type", core_1.EventEmitter)
|
|
], Dialog.prototype, "visibleChange", void 0);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object),
|
|
__metadata("design:paramtypes", [Object])
|
|
], Dialog.prototype, "width", null);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object),
|
|
__metadata("design:paramtypes", [Object])
|
|
], Dialog.prototype, "height", null);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object),
|
|
__metadata("design:paramtypes", [Object])
|
|
], Dialog.prototype, "minWidth", null);
|
|
__decorate([
|
|
core_1.Input(),
|
|
__metadata("design:type", Object),
|
|
__metadata("design:paramtypes", [Object])
|
|
], Dialog.prototype, "minHeight", null);
|
|
Dialog = __decorate([
|
|
core_1.Component({
|
|
selector: 'p-dialog',
|
|
template: "\n <div #container [ngClass]=\"{'ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow':true, 'ui-dialog-rtl':rtl,'ui-dialog-draggable':draggable,'ui-dialog-resizable':resizable}\"\n [ngStyle]=\"style\" [class]=\"styleClass\"\n [@animation]=\"{value: 'visible', params: {transitionParams: transitionOptions}}\" (@animation.start)=\"onAnimationStart($event)\" role=\"dialog\" [attr.aria-labelledby]=\"id + '-label'\" *ngIf=\"visible\">\n <div #titlebar class=\"ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top\" (mousedown)=\"initDrag($event)\" *ngIf=\"showHeader\">\n <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"header\">{{header}}</span>\n <span [attr.id]=\"id + '-label'\" class=\"ui-dialog-title\" *ngIf=\"headerFacet && headerFacet.first\">\n <ng-content select=\"p-header\"></ng-content>\n </span>\n <a *ngIf=\"closable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true}\" tabindex=\"0\" role=\"button\" (click)=\"close($event)\" (keydown.enter)=\"close($event)\" (mousedown)=\"onCloseMouseDown($event)\">\n <span [class]=\"closeIcon\"></span>\n </a>\n <a *ngIf=\"maximizable\" [ngClass]=\"{'ui-dialog-titlebar-icon ui-dialog-titlebar-maximize ui-corner-all':true}\" tabindex=\"0\" role=\"button\" (click)=\"toggleMaximize($event)\" (keydown.enter)=\"toggleMaximize($event)\">\n <span [ngClass]=\"maximized ? minimizeIcon : maximizeIcon\"></span>\n </a>\n </div>\n <div #content class=\"ui-dialog-content ui-widget-content\" [ngStyle]=\"contentStyle\">\n <ng-content></ng-content>\n </div>\n <div #footer class=\"ui-dialog-footer ui-widget-content\" *ngIf=\"footerFacet && footerFacet.first\">\n <ng-content select=\"p-footer\"></ng-content>\n </div>\n <div *ngIf=\"resizable\" class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\" (mousedown)=\"initResize($event)\"></div>\n </div>\n ",
|
|
animations: [
|
|
animations_1.trigger('animation', [
|
|
animations_1.state('void', animations_1.style({
|
|
transform: 'scale(0.7)',
|
|
opacity: 0
|
|
})),
|
|
animations_1.state('visible', animations_1.style({
|
|
transform: 'none',
|
|
opacity: 1
|
|
})),
|
|
animations_1.transition('* => *', animations_1.animate('{{transitionParams}}'))
|
|
])
|
|
]
|
|
}),
|
|
__metadata("design:paramtypes", [core_1.ElementRef, core_1.Renderer2, core_1.NgZone])
|
|
], Dialog);
|
|
return Dialog;
|
|
}());
|
|
exports.Dialog = Dialog;
|
|
var DialogModule = /** @class */ (function () {
|
|
function DialogModule() {
|
|
}
|
|
DialogModule = __decorate([
|
|
core_1.NgModule({
|
|
imports: [common_1.CommonModule],
|
|
exports: [Dialog, shared_1.SharedModule],
|
|
declarations: [Dialog]
|
|
})
|
|
], DialogModule);
|
|
return DialogModule;
|
|
}());
|
|
exports.DialogModule = DialogModule;
|
|
//# sourceMappingURL=dialog.js.map
|