@syncfusion/ej2-popups
Version:
A package of Essential JS 2 popup components such as Dialog and Tooltip that is used to display information or messages in separate pop-ups.
1,172 lines (1,171 loc) • 83.5 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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;
};
import { Component, Property, Event, Collection, L10n, Complex, compile, createElement, animationMode } from '@syncfusion/ej2-base';
import { addClass, removeClass, detach, attributes, prepend, setStyleAttribute } from '@syncfusion/ej2-base';
import { NotifyPropertyChanges, ChildProperty, isBlazor } from '@syncfusion/ej2-base';
import { isNullOrUndefined, formatUnit, append, EventHandler, Draggable, extend } from '@syncfusion/ej2-base';
import { SanitizeHtmlHelper, Browser } from '@syncfusion/ej2-base';
import { Button } from '@syncfusion/ej2-buttons';
import { Popup, PositionData, getZindexPartial } from '../popup/popup';
import { createResize, removeResize, setMinHeight, setMaxWidth, setMaxHeight, resizeDestroy } from '../common/resize';
var ButtonProps = /** @class */ (function (_super) {
__extends(ButtonProps, _super);
function ButtonProps() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property(true)
], ButtonProps.prototype, "isFlat", void 0);
__decorate([
Property()
], ButtonProps.prototype, "buttonModel", void 0);
__decorate([
Property('Button')
], ButtonProps.prototype, "type", void 0);
__decorate([
Event()
], ButtonProps.prototype, "click", void 0);
return ButtonProps;
}(ChildProperty));
export { ButtonProps };
/**
* Configures the animation properties for both open and close the dialog.
*/
var AnimationSettings = /** @class */ (function (_super) {
__extends(AnimationSettings, _super);
function AnimationSettings() {
return _super !== null && _super.apply(this, arguments) || this;
}
__decorate([
Property('Fade')
], AnimationSettings.prototype, "effect", void 0);
__decorate([
Property(400)
], AnimationSettings.prototype, "duration", void 0);
__decorate([
Property(0)
], AnimationSettings.prototype, "delay", void 0);
return AnimationSettings;
}(ChildProperty));
export { AnimationSettings };
var ROOT = 'e-dialog';
var RTL = 'e-rtl';
var DLG_HEADER_CONTENT = 'e-dlg-header-content';
var DLG_HEADER = 'e-dlg-header';
var DLG_FOOTER_CONTENT = 'e-footer-content';
var MODAL_DLG = 'e-dlg-modal';
var DLG_CONTENT = 'e-dlg-content';
var DLG_CLOSE_ICON = 'e-icon-dlg-close';
var DLG_OVERLAY = 'e-dlg-overlay';
var DLG_TARGET = 'e-dlg-target';
var DLG_CONTAINER = 'e-dlg-container';
var SCROLL_DISABLED = 'e-scroll-disabled';
var DLG_PRIMARY_BUTTON = 'e-primary';
var ICON = 'e-icons';
var POPUP_ROOT = 'e-popup';
var DEVICE = 'e-device';
var FULLSCREEN = 'e-dlg-fullscreen';
var DLG_CLOSE_ICON_BTN = 'e-dlg-closeicon-btn';
var DLG_HIDE = 'e-popup-close';
var DLG_SHOW = 'e-popup-open';
var DLG_UTIL_DEFAULT_TITLE = 'Information';
var DLG_UTIL_ROOT = 'e-scroll-disabled';
var DLG_UTIL_ALERT = 'e-alert-dialog';
var DLG_UTIL_CONFIRM = 'e-confirm-dialog';
var DLG_RESIZABLE = 'e-dlg-resizable';
var DLG_RESTRICT_LEFT_VALUE = 'e-restrict-left';
var DLG_RESTRICT_WIDTH_VALUE = 'e-resize-viewport';
var DLG_REF_ELEMENT = 'e-dlg-ref-element';
var DLG_USER_ACTION_CLOSED = 'user action';
var DLG_CLOSE_ICON_CLOSED = 'close icon';
var DLG_ESCAPE_CLOSED = 'escape';
var DLG_OVERLAYCLICK_CLOSED = 'overlayClick';
var DLG_DRAG = 'e-draggable';
/**
* Represents the dialog component that displays the information and get input from the user.
* Two types of dialog components are `Modal and Modeless (non-modal)` depending on its interaction with parent application.
* ```html
* <div id="dialog"></div>
* ```
* ```typescript
* <script>
* var dialogObj = new Dialog({ header: 'Dialog' });
* dialogObj.appendTo("#dialog");
* </script>
* ```
*/
var Dialog = /** @class */ (function (_super) {
__extends(Dialog, _super);
/*
* * Constructor for creating the widget
*
* @param
* @param
* @hidden
*/
function Dialog(options, element) {
var _this = _super.call(this, options, element) || this;
_this.needsID = true;
return _this;
}
/**
*Initialize the control rendering
*
* @returns {void}
* @private
*/
Dialog.prototype.render = function () {
this.initialize();
this.initRender();
this.wireEvents();
if (this.width === '100%') {
this.element.style.width = '';
}
if (this.minHeight !== '') {
this.element.style.minHeight = formatUnit(this.minHeight);
}
if (this.enableResize) {
this.setResize();
if (this.isModal) {
this.isModelResize = true;
}
if (this.animationSettings.effect === 'None') {
this.getMinHeight();
}
}
this.renderComplete();
};
Dialog.prototype.initializeValue = function () {
this.dlgClosedBy = DLG_USER_ACTION_CLOSED;
};
/**
*Initialize the event handler
*
* @returns {void}
* @private
*/
Dialog.prototype.preRender = function () {
var _this = this;
this.initializeValue();
this.headerContent = null;
this.allowMaxHeight = true;
this.preventVisibility = true;
this.clonedEle = this.element.cloneNode(true);
this.closeIconClickEventHandler = function (event) {
_this.dlgClosedBy = DLG_CLOSE_ICON_CLOSED;
_this.hide(event);
};
this.dlgOverlayClickEventHandler = function (event) {
_this.dlgClosedBy = DLG_OVERLAYCLICK_CLOSED;
event.preventFocus = false;
_this.trigger('overlayClick', event, function (overlayClickEventArgs) {
if (!overlayClickEventArgs.preventFocus) {
_this.focusContent();
}
_this.dlgClosedBy = DLG_USER_ACTION_CLOSED;
});
};
var localeText = { close: 'Close' };
this.l10n = new L10n('dialog', localeText, this.locale);
this.checkPositionData();
if (isNullOrUndefined(this.target)) {
var prevOnChange = this.isProtectedOnChange;
this.isProtectedOnChange = true;
this.target = document.body;
this.isProtectedOnChange = prevOnChange;
}
};
Dialog.prototype.updatePersistData = function () {
if (this.enablePersistence) {
this.setProperties({ width: parseFloat(this.element.style.width), height: parseFloat(this.element.style.height),
position: { X: parseFloat(this.dragObj.element.style.left), Y: parseFloat(this.dragObj.element.style.top) } }, true);
}
};
Dialog.prototype.isNumberValue = function (value) {
var isNumber = /^[-+]?\d*\.?\d+$/.test(value);
return isNumber;
};
Dialog.prototype.checkPositionData = function () {
if (!isNullOrUndefined(this.position)) {
if (!isNullOrUndefined(this.position.X) && (typeof (this.position.X) !== 'number')) {
var isNumber = this.isNumberValue(this.position.X);
if (isNumber) {
var prevOnChange = this.isProtectedOnChange;
this.isProtectedOnChange = true;
this.position.X = parseFloat(this.position.X);
this.isProtectedOnChange = prevOnChange;
}
}
if (!isNullOrUndefined(this.position.Y) && (typeof (this.position.Y) !== 'number')) {
var isNumber = this.isNumberValue(this.position.Y);
if (isNumber) {
var prevOnChange = this.isProtectedOnChange;
this.isProtectedOnChange = true;
this.position.Y = parseFloat(this.position.Y);
this.isProtectedOnChange = prevOnChange;
}
}
}
};
Dialog.prototype.getEle = function (list, selector) {
var element = undefined;
for (var i = 0; i < list.length; i++) {
if (list[i].classList.contains(selector)) {
element = list[i];
break;
}
}
return element;
};
/* istanbul ignore next */
Dialog.prototype.getMinHeight = function () {
var computedHeaderHeight = '0px';
var computedFooterHeight = '0px';
if (!isNullOrUndefined(this.element.querySelector('.' + DLG_HEADER_CONTENT))) {
computedHeaderHeight = getComputedStyle(this.headerContent).height;
}
var footerEle = this.getEle(this.element.children, DLG_FOOTER_CONTENT);
if (!isNullOrUndefined(footerEle)) {
computedFooterHeight = getComputedStyle(footerEle).height;
}
var headerHeight = parseInt(computedHeaderHeight.slice(0, computedHeaderHeight.indexOf('p')), 10);
var footerHeight = parseInt(computedFooterHeight.slice(0, computedFooterHeight.indexOf('p')), 10);
setMinHeight(headerHeight + 30 + (isNaN(footerHeight) ? 0 : footerHeight));
return (headerHeight + 30 + footerHeight);
};
Dialog.prototype.onResizeStart = function (args, dialogObj) {
dialogObj.trigger('resizeStart', args);
if (!args.cancel && this.isModelResize && !isNullOrUndefined(this.dlgContainer) && this.dlgContainer.classList.contains('e-dlg-' + this.position.X + '-' + this.position.Y)) {
this.setPopupPosition();
this.dlgContainer.classList.remove('e-dlg-' + this.position.X + '-' + this.position.Y);
var targetType = this.getTargetContainer(this.target);
if (targetType instanceof Element) {
var computedStyle = window.getComputedStyle(targetType);
if (computedStyle.getPropertyValue('direction') === 'rtl') {
this.element.style.position = 'absolute';
}
else {
this.element.style.position = 'relative';
}
}
else {
this.element.style.position = 'relative';
}
if (this.element.classList.contains(DLG_RESTRICT_LEFT_VALUE)) {
this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);
}
this.isModelResize = false;
}
return args.cancel;
};
Dialog.prototype.onResizing = function (args, dialogObj) {
dialogObj.trigger('resizing', args);
};
Dialog.prototype.onResizeComplete = function (args, dialogObj) {
dialogObj.trigger('resizeStop', args);
this.updatePersistData();
};
Dialog.prototype.setResize = function () {
if (this.enableResize) {
this.element.classList.add(DLG_RESIZABLE);
var computedHeight = getComputedStyle(this.element).minHeight;
var computedWidth = getComputedStyle(this.element).minWidth;
var direction = '';
for (var i = 0; i < this.resizeHandles.length; i++) {
if (this.resizeHandles[i] === 'All') {
direction = 'south north east west north-east north-west south-east south-west';
break;
}
else {
var directionValue = '';
switch (this.resizeHandles[i].toString()) {
case 'SouthEast':
directionValue = 'south-east';
break;
case 'SouthWest':
directionValue = 'south-west';
break;
case 'NorthEast':
directionValue = 'north-east';
break;
case 'NorthWest':
directionValue = 'north-west';
break;
default:
directionValue = this.resizeHandles[i].toString();
break;
}
direction += directionValue.toLocaleLowerCase() + ' ';
}
}
if (this.enableRtl && direction.trim() === 'south-east') {
direction = 'south-west';
}
else if (this.enableRtl && direction.trim() === 'south-west') {
direction = 'south-east';
}
if (this.isModal && this.enableRtl) {
this.element.classList.add(DLG_RESTRICT_LEFT_VALUE);
}
else if (this.isModal && this.target === document.body) {
this.element.classList.add(DLG_RESTRICT_WIDTH_VALUE);
}
createResize({
element: this.element,
direction: direction,
minHeight: parseInt(computedHeight.slice(0, computedWidth.indexOf('p')), 10),
maxHeight: this.targetEle.clientHeight,
minWidth: parseInt(computedWidth.slice(0, computedWidth.indexOf('p')), 10),
maxWidth: this.targetEle.clientWidth,
boundary: this.target === document.body ? null : this.targetEle,
resizeBegin: this.onResizeStart.bind(this),
resizeComplete: this.onResizeComplete.bind(this),
resizing: this.onResizing.bind(this),
proxy: this
});
this.wireWindowResizeEvent();
}
else {
removeResize();
this.unWireWindowResizeEvent();
if (this.isModal) {
this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);
}
else {
this.element.classList.remove(DLG_RESTRICT_WIDTH_VALUE);
}
this.element.classList.remove(DLG_RESIZABLE);
}
};
Dialog.prototype.getFocusElement = function (target) {
var value = 'input,select,textarea,button:enabled,a,[contenteditable="true"],[tabindex]';
var items = target.querySelectorAll(value);
return { element: items[items.length - 1] };
};
/* istanbul ignore next */
Dialog.prototype.keyDown = function (event) {
var _this = this;
if (event.keyCode === 9) {
if (this.isModal) {
var buttonObj = void 0;
if (!isNullOrUndefined(this.btnObj)) {
buttonObj = this.btnObj[this.btnObj.length - 1];
}
if ((isNullOrUndefined(this.btnObj)) && (!isNullOrUndefined(this.ftrTemplateContent))) {
buttonObj = this.getFocusElement(this.ftrTemplateContent);
}
if (isNullOrUndefined(this.btnObj) && isNullOrUndefined(this.ftrTemplateContent) && !isNullOrUndefined(this.contentEle)) {
buttonObj = this.getFocusElement(this.contentEle);
}
if (!isNullOrUndefined(buttonObj) && document.activeElement === buttonObj.element && !event.shiftKey) {
event.preventDefault();
this.focusableElements(this.element).focus();
}
if (document.activeElement === this.focusableElements(this.element) && event.shiftKey) {
event.preventDefault();
if (!isNullOrUndefined(buttonObj)) {
buttonObj.element.focus();
}
}
}
}
var element = document.activeElement;
var isTagName = (['input', 'textarea'].indexOf(element.tagName.toLowerCase()) > -1);
var isContentEdit = false;
if (!isTagName) {
isContentEdit = element.hasAttribute('contenteditable') && element.getAttribute('contenteditable') === 'true';
}
if (event.keyCode === 27 && this.closeOnEscape) {
this.dlgClosedBy = DLG_ESCAPE_CLOSED;
var query = document.querySelector('.e-popup-open:not(.e-dialog)');
// 'document.querySelector' is used to find the elements rendered based on body
if (!(!isNullOrUndefined(query) && !query.classList.contains('e-toolbar-pop') && !query.classList.contains('e-slider-tooltip'))) {
this.hide(event);
}
}
if ((event.keyCode === 13 && !event.ctrlKey && element.tagName.toLowerCase() !== 'textarea' &&
isTagName && !isNullOrUndefined(this.primaryButtonEle)) ||
(event.keyCode === 13 && event.ctrlKey && (element.tagName.toLowerCase() === 'textarea' ||
isContentEdit)) && !isNullOrUndefined(this.primaryButtonEle)) {
var buttonIndex_1;
var firstPrimary = this.buttons.some(function (data, index) {
buttonIndex_1 = index;
var buttonModel = data.buttonModel;
return !isNullOrUndefined(buttonModel) && buttonModel.isPrimary === true;
});
if (firstPrimary && typeof (this.buttons[buttonIndex_1].click) === 'function' && !this.primaryButtonEle.disabled) {
setTimeout(function () {
_this.buttons[buttonIndex_1].click.call(_this, event);
});
}
}
};
/**
* Initialize the control rendering
*
* @returns {void}
* @private
*/
Dialog.prototype.initialize = function () {
if (!isNullOrUndefined(this.target)) {
this.targetEle = ((typeof this.target) === 'string') ?
document.querySelector(this.target) : this.target;
}
if (!this.isBlazorServerRender()) {
addClass([this.element], ROOT);
}
if (Browser.isDevice) {
addClass([this.element], DEVICE);
}
if (!this.isBlazorServerRender()) {
this.setCSSClass();
}
this.setMaxHeight();
};
/**
* Initialize the rendering
*
* @returns {void}
* @private
*/
Dialog.prototype.initRender = function () {
var _this = this;
this.initialRender = true;
if (!this.isBlazorServerRender()) {
attributes(this.element, { role: 'dialog' });
}
if (this.zIndex === 1000) {
this.setzIndex(this.element, false);
this.calculatezIndex = true;
}
else {
this.calculatezIndex = false;
}
this.setTargetContent();
if (this.header !== '' && !isNullOrUndefined(this.header)) {
this.setHeader();
}
this.renderCloseIcon();
this.setContent();
if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {
this.setFooterTemplate();
}
else if (!isNullOrUndefined(this.buttons[0]) && !isNullOrUndefined(this.buttons[0].buttonModel)) {
this.setButton();
}
if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {
this.setAllowDragging();
}
attributes(this.element, { 'aria-modal': (this.isModal ? 'true' : 'false') });
if (this.isModal) {
this.setIsModal();
}
if (this.element.classList.contains(DLG_UTIL_ALERT) !== true && this.element.classList.contains(DLG_UTIL_CONFIRM) !== true
&& !isNullOrUndefined(this.element.parentElement)) {
var parentEle = this.isModal ? this.dlgContainer.parentElement : this.element.parentElement;
this.refElement = this.createElement('div', { className: DLG_REF_ELEMENT });
parentEle.insertBefore(this.refElement, (this.isModal ? this.dlgContainer : this.element));
}
if (!isNullOrUndefined(this.targetEle)) {
if (this.isModal) {
this.targetEle.appendChild(this.dlgContainer);
}
else {
this.targetEle.appendChild(this.element);
}
}
this.popupObj = new Popup(this.element, {
height: this.height,
width: this.width,
zIndex: this.zIndex,
relateTo: this.target,
actionOnScroll: 'none',
enableRtl: this.enableRtl,
// eslint-disable-next-line
open: function (event) {
var eventArgs = {
container: _this.isModal ? _this.dlgContainer : _this.element,
element: _this.element,
target: _this.target,
preventFocus: false
};
if (_this.enableResize) {
_this.resetResizeIcon();
}
_this.trigger('open', eventArgs, function (openEventArgs) {
if (!openEventArgs.preventFocus) {
_this.focusContent();
}
});
},
// eslint-disable-next-line
close: function (event) {
if (_this.isModal) {
addClass([_this.dlgOverlay], 'e-fade');
}
_this.unBindEvent(_this.element);
if (_this.isModal) {
_this.dlgContainer.style.display = 'none';
}
_this.trigger('close', _this.closeArgs);
var activeEle = document.activeElement;
if (!isNullOrUndefined(activeEle) && !isNullOrUndefined((activeEle).blur)) {
activeEle.blur();
}
if (!isNullOrUndefined(_this.storeActiveElement) && !isNullOrUndefined(_this.storeActiveElement.focus)) {
_this.storeActiveElement.focus();
}
}
});
this.positionChange();
this.setEnableRTL();
if (!this.isBlazorServerRender()) {
addClass([this.element], DLG_HIDE);
if (this.isModal) {
this.setOverlayZindex();
}
}
if (this.visible) {
this.show();
if (this.isModal) {
var targetType = this.getTargetContainer(this.target);
if (targetType instanceof Element) {
var computedStyle = window.getComputedStyle(targetType);
if (computedStyle.getPropertyValue('direction') === 'rtl') {
this.setPopupPosition();
}
}
}
}
else {
if (this.isModal) {
this.dlgOverlay.style.display = 'none';
}
}
this.initialRender = false;
};
Dialog.prototype.getTargetContainer = function (targetValue) {
var targetElement = null;
if (typeof targetValue === 'string') {
if (targetValue.startsWith('#')) {
targetElement = document.getElementById(targetValue.substring(1));
}
else if (targetValue.startsWith('.')) {
var elements = document.getElementsByClassName(targetValue.substring(1));
targetElement = elements.length > 0 ? elements[0] : null;
}
else {
if (!(targetValue instanceof HTMLElement) && targetValue !== document.body) {
targetElement = document.querySelector(targetValue);
}
}
}
else if (targetValue instanceof HTMLElement) {
targetElement = targetValue;
}
return targetElement;
};
Dialog.prototype.resetResizeIcon = function () {
var dialogConHeight = this.getMinHeight();
if (this.targetEle.offsetHeight < dialogConHeight) {
var className = this.enableRtl ? 'e-south-west' : 'e-south-east';
var resizeIcon = this.element.querySelector('.' + className);
if (!isNullOrUndefined(resizeIcon)) {
resizeIcon.style.bottom = '-' + dialogConHeight.toString() + 'px';
}
}
};
Dialog.prototype.setOverlayZindex = function (zIndexValue) {
var zIndex;
if (isNullOrUndefined(zIndexValue)) {
zIndex = parseInt(this.element.style.zIndex, 10) ? parseInt(this.element.style.zIndex, 10) : this.zIndex;
}
else {
zIndex = zIndexValue;
}
this.dlgOverlay.style.zIndex = (zIndex - 1).toString();
this.dlgContainer.style.zIndex = zIndex.toString();
};
Dialog.prototype.positionChange = function () {
if (this.isModal) {
if (!isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y))) {
this.setPopupPosition();
}
else if ((!isNaN(parseFloat(this.position.X)) && isNaN(parseFloat(this.position.Y)))
|| (isNaN(parseFloat(this.position.X)) && !isNaN(parseFloat(this.position.Y)))) {
this.setPopupPosition();
}
else {
this.element.style.top = '0px';
this.element.style.left = '0px';
this.dlgContainer.classList.add('e-dlg-' + this.position.X + '-' + this.position.Y);
}
}
else {
this.setPopupPosition();
}
};
Dialog.prototype.setPopupPosition = function () {
this.popupObj.setProperties({
position: {
X: this.position.X, Y: this.position.Y
}
});
};
Dialog.prototype.setAllowDragging = function () {
var _this = this;
var handleContent = '.' + DLG_HEADER_CONTENT;
if (!this.element.classList.contains(DLG_DRAG)) {
this.dragObj = new Draggable(this.element, {
clone: false,
isDragScroll: true,
abort: '.e-dlg-closeicon-btn',
handle: handleContent,
dragStart: function (event) {
_this.trigger('dragStart', event, function (dragEventArgs) {
if (isBlazor()) {
dragEventArgs.bindEvents(event.dragElement);
}
});
},
dragStop: function (event) {
if (_this.isModal) {
_this.IsDragStop = true;
if (!isNullOrUndefined(_this.position)) {
_this.dlgContainer.classList.remove('e-dlg-' + _this.position.X + '-' + _this.position.Y);
}
// Reset the dialog position after drag completion.
var targetType = _this.getTargetContainer(_this.target);
if (targetType instanceof Element) {
var computedStyle = window.getComputedStyle(targetType);
if (computedStyle.getPropertyValue('direction') === 'rtl') {
_this.element.style.position = 'absolute';
}
else {
_this.element.style.position = 'relative';
}
}
else {
_this.element.style.position = 'relative';
}
}
_this.trigger('dragStop', event);
_this.isModelResize = false;
_this.element.classList.remove(DLG_RESTRICT_LEFT_VALUE);
_this.updatePersistData();
},
drag: function (event) {
_this.trigger('drag', event);
}
});
if (!isNullOrUndefined(this.targetEle)) {
this.dragObj.dragArea = this.targetEle;
}
}
};
Dialog.prototype.setButton = function () {
if (!this.isBlazorServerRender()) {
this.buttonContent = [];
this.btnObj = [];
for (var i = 0; i < this.buttons.length; i++) {
if (isNullOrUndefined(this.buttons[i].buttonModel)) {
continue;
}
var buttonType = !isNullOrUndefined(this.buttons[i].type) ?
this.buttons[i].type.toLowerCase() : 'button';
var btn = this.createElement('button', { className: this.cssClass, attrs: { type: buttonType, tabindex: '0' } });
this.buttonContent.push(btn.outerHTML);
}
this.setFooterTemplate();
}
var footerBtn;
for (var i = 0, childNodes = this.element.children; i < childNodes.length; i++) {
if (childNodes[i].classList.contains(DLG_FOOTER_CONTENT)) {
footerBtn = childNodes[i].querySelectorAll('button');
}
}
for (var i = 0; i < this.buttons.length; i++) {
if (isNullOrUndefined(this.buttons[i].buttonModel)) {
continue;
}
if (!this.isBlazorServerRender()) {
this.btnObj[i] = new Button(this.buttons[i].buttonModel);
}
if (!isNullOrUndefined(this.ftrTemplateContent) && footerBtn.length > 0) {
if (typeof (this.buttons[i].click) === 'function') {
EventHandler.add(footerBtn[i], 'click', this.buttons[i].click, this);
}
if (typeof (this.buttons[i].click) === 'object') {
EventHandler.add(footerBtn[i], 'click', this.buttonClickHandler.bind(this, i), this);
}
}
if (!this.isBlazorServerRender() && !isNullOrUndefined(this.ftrTemplateContent)) {
this.btnObj[i].appendTo(this.ftrTemplateContent.children[i]);
if (this.buttons[i].isFlat) {
this.btnObj[i].element.classList.add('e-flat');
}
this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];
}
}
};
Dialog.prototype.buttonClickHandler = function (index) {
this.trigger('buttons[' + index + '].click', {});
};
Dialog.prototype.setContent = function () {
this.contentEle = this.createElement('div', { className: DLG_CONTENT, id: this.element.id + '_dialog-content' });
if (this.headerEle) {
attributes(this.element, { 'aria-describedby': this.element.id + '_title' + ' ' + this.element.id + '_dialog-content' });
}
else {
attributes(this.element, { 'aria-describedby': this.element.id + '_dialog-content' });
}
if (this.innerContentElement) {
this.contentEle.appendChild(this.innerContentElement);
}
else if (!isNullOrUndefined(this.content) && this.content !== '' || !this.initialRender) {
if (typeof (this.content) === 'string' && !isBlazor()) {
this.setTemplate(this.content, this.contentEle, 'content');
}
else if (this.content instanceof HTMLElement) {
this.contentEle.appendChild(this.content);
}
else {
this.setTemplate(this.content, this.contentEle, 'content');
}
}
if (!isNullOrUndefined(this.headerContent)) {
this.element.insertBefore(this.contentEle, this.element.children[1]);
}
else {
this.element.insertBefore(this.contentEle, this.element.children[0]);
}
if (this.height === 'auto') {
if (!this.isBlazorServerRender() && Browser.isIE && this.element.style.width === '' && !isNullOrUndefined(this.width)) {
this.element.style.width = formatUnit(this.width);
}
this.setMaxHeight();
}
};
Dialog.prototype.setTemplate = function (template, toElement, prop) {
var templateFn;
var templateProps;
if (toElement.classList.contains(DLG_HEADER)) {
templateProps = this.element.id + 'header';
}
else if (toElement.classList.contains(DLG_FOOTER_CONTENT)) {
templateProps = this.element.id + 'footerTemplate';
}
else {
templateProps = this.element.id + 'content';
}
var templateValue;
if (!isNullOrUndefined(template.outerHTML)) {
toElement.appendChild(template);
}
else if ((typeof template === 'string') || (typeof template !== 'string') || (isBlazor() && !this.isStringTemplate)) {
if ((typeof template === 'string')) {
template = this.sanitizeHelper(template);
}
if (this.isVue || typeof template !== 'string') {
templateFn = compile(template);
templateValue = template;
}
else {
toElement.innerHTML = template;
}
}
var fromElements = [];
if (!isNullOrUndefined(templateFn)) {
var isString = (isBlazor() &&
!this.isStringTemplate && (templateValue).indexOf('<div>Blazor') === 0) ?
this.isStringTemplate : true;
for (var _i = 0, _a = templateFn({}, this, prop, templateProps, isString); _i < _a.length; _i++) {
var item = _a[_i];
fromElements.push(item);
}
append([].slice.call(fromElements), toElement);
}
};
/*
* @returns {void}
* @hidden
* @value
*/
Dialog.prototype.sanitizeHelper = function (value) {
if (this.enableHtmlSanitizer) {
var dialogItem = SanitizeHtmlHelper.beforeSanitize();
var beforeEvent = {
cancel: false,
helper: null
};
extend(dialogItem, dialogItem, beforeEvent);
this.trigger('beforeSanitizeHtml', dialogItem);
if (dialogItem.cancel && !isNullOrUndefined(dialogItem.helper)) {
value = dialogItem.helper(value);
}
else if (!dialogItem.cancel) {
value = SanitizeHtmlHelper.serializeValue(dialogItem, value);
}
}
return value;
};
Dialog.prototype.setMaxHeight = function () {
if (!this.allowMaxHeight) {
return;
}
var display = this.element.style.display;
this.element.style.display = 'none';
this.element.style.maxHeight = (!isNullOrUndefined(this.target)) && (this.targetEle.offsetHeight < window.innerHeight) ?
(this.targetEle.offsetHeight - 20) + 'px' : (window.innerHeight - 20) + 'px';
this.element.style.display = display;
if (Browser.isIE && this.height === 'auto' && !isNullOrUndefined(this.contentEle)
&& this.element.offsetHeight < this.contentEle.offsetHeight) {
this.element.style.height = 'inherit';
}
};
Dialog.prototype.setEnableRTL = function () {
if (!this.isBlazorServerRender()) {
if (this.enableRtl) {
addClass([this.element], RTL);
}
else {
removeClass([this.element], RTL);
}
}
if (!isNullOrUndefined(this.element.querySelector('.e-resize-handle'))) {
removeResize();
this.setResize();
}
};
Dialog.prototype.setTargetContent = function () {
var _this = this;
if (isNullOrUndefined(this.content) || this.content === '') {
var isContent = this.element.innerHTML.replace(/\s|<(\/?|\/?)(!--!--)>/g, '') !== '';
if (this.element.children.length > 0 || isContent) {
this.innerContentElement = document.createDocumentFragment();
[].slice.call(this.element.childNodes).forEach(function (el) {
if (el.nodeType !== 8) {
_this.innerContentElement.appendChild(el);
}
});
}
}
};
Dialog.prototype.setHeader = function () {
if (this.headerEle) {
this.headerEle.innerHTML = '';
}
else {
this.headerEle = this.createElement('div', { id: this.element.id + '_title', className: DLG_HEADER });
}
this.createHeaderContent();
this.headerContent.appendChild(this.headerEle);
this.setTemplate(this.header, this.headerEle, 'header');
attributes(this.element, { 'aria-describedby': this.element.id + '_title' });
attributes(this.element, { 'aria-labelledby': this.element.id + '_dialog-header' });
this.element.insertBefore(this.headerContent, this.element.children[0]);
if (this.allowDragging && (!isNullOrUndefined(this.headerContent))) {
this.setAllowDragging();
}
};
Dialog.prototype.setFooterTemplate = function () {
if (this.ftrTemplateContent) {
this.ftrTemplateContent.innerHTML = '';
}
else {
this.ftrTemplateContent = this.createElement('div', {
className: DLG_FOOTER_CONTENT
});
}
if (this.footerTemplate !== '' && !isNullOrUndefined(this.footerTemplate)) {
this.setTemplate(this.footerTemplate, this.ftrTemplateContent, 'footerTemplate');
}
else {
this.ftrTemplateContent.innerHTML = this.buttonContent.join('');
}
this.element.appendChild(this.ftrTemplateContent);
};
Dialog.prototype.createHeaderContent = function () {
if (isNullOrUndefined(this.headerContent)) {
this.headerContent = this.createElement('div', { id: this.element.id + '_dialog-header', className: DLG_HEADER_CONTENT });
}
};
Dialog.prototype.renderCloseIcon = function () {
if (this.showCloseIcon) {
this.closeIcon = this.createElement('button', { className: DLG_CLOSE_ICON_BTN, attrs: { type: 'button' } });
this.closeIconBtnObj = new Button({ cssClass: 'e-flat', iconCss: DLG_CLOSE_ICON + ' ' + ICON });
this.closeIconTitle();
if (!isNullOrUndefined(this.headerContent)) {
prepend([this.closeIcon], this.headerContent);
}
else {
this.createHeaderContent();
prepend([this.closeIcon], this.headerContent);
this.element.insertBefore(this.headerContent, this.element.children[0]);
}
this.closeIconBtnObj.appendTo(this.closeIcon);
}
};
Dialog.prototype.closeIconTitle = function () {
this.l10n.setLocale(this.locale);
var closeIconTitle = this.l10n.getConstant('close');
this.closeIcon.setAttribute('title', closeIconTitle);
this.closeIcon.setAttribute('aria-label', closeIconTitle);
};
Dialog.prototype.setCSSClass = function (oldCSSClass) {
if (oldCSSClass) {
removeClass([this.element], oldCSSClass.split(' '));
if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {
removeClass([this.dlgContainer], oldCSSClass.split(' '));
}
}
if (this.cssClass) {
addClass([this.element], this.cssClass.split(' '));
if (this.isModal && !isNullOrUndefined(this.dlgContainer)) {
addClass([this.dlgContainer], this.cssClass.split(' '));
}
}
};
Dialog.prototype.setIsModal = function () {
this.dlgContainer = this.createElement('div', { className: DLG_CONTAINER });
this.setCSSClass();
this.element.classList.remove(DLG_SHOW);
this.element.parentNode.insertBefore(this.dlgContainer, this.element);
this.dlgContainer.appendChild(this.element);
addClass([this.element], MODAL_DLG);
this.dlgOverlay = this.createElement('div', { className: DLG_OVERLAY });
this.dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
this.dlgContainer.appendChild(this.dlgOverlay);
};
Dialog.prototype.getValidFocusNode = function (items) {
var node;
for (var u = 0; u < items.length; u++) {
node = items[u];
if ((node.clientHeight > 0 || (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href'))) && node.tabIndex > -1 &&
!node.disabled && !this.disableElement(node, '[disabled],[aria-disabled="true"],[type="hidden"]')) {
return node;
}
else {
node = null;
}
}
return node;
};
Dialog.prototype.focusableElements = function (content) {
if (!isNullOrUndefined(content)) {
var value = 'input,select,textarea,button,a,[contenteditable="true"],[tabindex]';
var items = content.querySelectorAll(value);
return this.getValidFocusNode(items);
}
return null;
};
Dialog.prototype.getAutoFocusNode = function (container) {
var node = container.querySelector('.' + DLG_CLOSE_ICON_BTN);
var value = '[autofocus]';
var items = container.querySelectorAll(value);
var validNode = this.getValidFocusNode(items);
if (isBlazor()) {
this.primaryButtonEle = this.element.getElementsByClassName('e-primary')[0];
}
if (!isNullOrUndefined(validNode)) {
node = validNode;
}
else {
validNode = this.focusableElements(this.contentEle);
if (!isNullOrUndefined(validNode)) {
return node = validNode;
}
else if (!isNullOrUndefined(this.primaryButtonEle)) {
return this.element.querySelector('.' + DLG_PRIMARY_BUTTON);
}
}
return node;
};
Dialog.prototype.disableElement = function (element, t) {
var elementMatch = element ? element.matches || element.webkitMatchesSelector || element.msGetRegionContent : null;
if (elementMatch) {
for (; element; element = element.parentNode) {
if (element instanceof Element && elementMatch.call(element, t)) {
/* istanbul ignore next */
return element;
}
}
}
return null;
};
Dialog.prototype.focusContent = function () {
var element = this.getAutoFocusNode(this.element);
var node = !isNullOrUndefined(element) ? element : this.element;
var userAgent = Browser.userAgent;
if (userAgent.indexOf('MSIE ') > 0 || userAgent.indexOf('Trident/') > 0) {
this.element.focus();
}
node.focus();
this.unBindEvent(this.element);
this.bindEvent(this.element);
};
Dialog.prototype.bindEvent = function (element) {
EventHandler.add(element, 'keydown', this.keyDown, this);
};
Dialog.prototype.unBindEvent = function (element) {
EventHandler.remove(element, 'keydown', this.keyDown);
};
Dialog.prototype.updateSanitizeContent = function () {
if (!this.isBlazorServerRender()) {
this.contentEle.innerHTML = this.sanitizeHelper(this.content);
}
};
Dialog.prototype.isBlazorServerRender = function () {
return isBlazor() && this.isServerRendered;
};
/**
* Module required function
*
* @returns {void}
* @private
*/
Dialog.prototype.getModuleName = function () {
return 'dialog';
};
/**
* Called internally if any of the property value changed
*
* @param {DialogModel} newProp - specifies the new property
* @param {DialogModel} oldProp - specifies the old property
* @private
* @returns {void}
*/
Dialog.prototype.onPropertyChanged = function (newProp, oldProp) {
if (!this.element.classList.contains(ROOT)) {
return;
}
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'content':
if (!isNullOrUndefined(this.content) && this.content !== '') {
if (this.isBlazorServerRender()) {
this.contentEle = this.element.querySelector('.e-dlg-content');
}
if (!isNullOrUndefined(this.contentEle) && this.contentEle.getAttribute('role') !== 'dialog') {
if (!this.isBlazorServerRender()) {
this.contentEle.innerHTML = '';
}
if (typeof (this.content) === 'function') {
this.clearTemplate(['content']);
detach(this.contentEle);
this.contentEle = null;
this.setContent();
}
else {
if (typeof (this.content) === 'string') {
this.updateSanitizeContent();
}
else {
this.contentEle.appendChild(this.content);
}
}
this.setMaxHeight();
}
else {
this.setContent();
}
}
else if (!isNullOrUndefined(this.contentEle)) {
detach(this.contentEle);
this.contentEle = null;
}
break;
case 'header':
if (this.header === '' || isNullOrUndefined(this.header)) {
if (this.headerEle) {
detach(this.headerEle);
this.headerEle = null;
}
}
else {
this.setHeader();
}
break;
case 'footerTemplate':
if (this.footerTemplate === '' || isNullOrUndefined(this.footerTemplate)) {
if (!this.ftrTemplateContent) {
return;
}
detach(this.ftrTemplateContent);
this.ftrTemplateContent = null;
this.buttons = [{}];
}
else {
this.setFooterTemplate();
this.buttons = [{}];
}
break;
case 'showCloseIcon':
if (this.element.getElementsByClassName(DLG_CLOSE_ICON).length > 0) {
if (!this.showCloseIcon && (this.header === '' || isNullOrUndefined(this.header))) {
detach(this.headerContent);
this.headerContent = null;
}
else if (!this.showCloseIcon) {
detach(this.closeIcon);
}
}
else {
this.renderCloseIcon();
this.wireEvents();
}
break;
case 'locale':
if (this.showCloseIcon) {
this.closeIconTitle();
}
break;
case 'visible':
if (this.visible) {
this.show();
}
else {
this.hide();
}
break;
case 'isModal':
this.updateIsModal();
break;
case 'height':
setStyleAttribute(this.element, { 'height': formatUnit(newProp.height) });
this.updatePersistData();
break;
case 'width':
setStyleAttribute(this.element, { 'width': formatUnit(newProp.width) });
this.updatePersistData();
break;
case 'zIndex':
this.popupObj.zIndex = this.zIndex;
if (this.isModal) {
this.setOverlayZindex(this.zIndex);
}
if (this.element.style.zIndex !== this.zIndex.toString()) {
this.calculatezIndex = false;
}
break;
case 'cssClass':
this.setCSSClass(oldProp.cssClass);
break;