@syncfusion/ej2-calendars 32.2.3 → 32.2.5

package/dist/es6/ej2-calendars.es5.js

@@ -4332,13 +4332,14 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        var appendToElement = this.getAppendToElement();
         if (Browser.isDevice) {
             this.modelHeader();
             this.modal = this.createElement('div');
             this.modal.className = '' + ROOT$1 + ' e-date-modal';
-            document.body.className += ' ' + OVERFLOW;
+            appendToElement.className += ' ' + OVERFLOW;
             this.modal.style.display = 'block';
-            document.body.appendChild(this.modal);
+            appendToElement.appendChild(this.modal);
         }
         //this.calendarElement represent the Calendar object from the Calendar class.
         this.calendarElement.querySelector('table tbody').className = '';
@@ -4673,9 +4674,10 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                 this.previousDate = outOfRange;
                 this.createCalendar();
             }
+            var appendToElement = this.getAppendToElement();
             if (Browser.isDevice) {
                 this.mobilePopupWrapper = this.createElement('div', { className: 'e-datepick-mob-popup-wrap' });
-                document.body.appendChild(this.mobilePopupWrapper);
+                appendToElement.appendChild(this.mobilePopupWrapper);
             }
             this.preventArgs = {
                 preventDefault: function () {
@@ -4684,7 +4686,7 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                 popup: this.popupObj,
                 event: e || null,
                 cancel: false,
-                appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body
+                appendTo: Browser.isDevice ? this.mobilePopupWrapper : appendToElement
             };
             var eventArgs = this.preventArgs;
             this.trigger('open', eventArgs, function (eventArgs) {
@@ -4745,7 +4747,8 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
                 cancel: false
             };
             removeClass(this.inputWrapper.buttons, ACTIVE);
-            removeClass([document.body], OVERFLOW);
+            var appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW);
             var eventArgs = this.preventArgs;
             if (this.isCalendar()) {
                 this.trigger('close', eventArgs, function (eventArgs) {
@@ -5189,6 +5192,16 @@ var DatePicker = /** @__PURE__ @class */ (function (_super) {
     DatePicker.prototype.getModuleName = function () {
         return 'datepicker';
     };
+    DatePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DatePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');
@@ -8610,13 +8623,14 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         this.popupObj.hide();
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: ROOT$2 + ' ' + POPUP$1 });
         this.renderControl();
+        var appendToElement = this.getAppendToElement();
         this.openEventArgs = {
             popup: this.popupObj || null,
             cancel: false,
             date: this.inputElement.value,
             model: this,
             event: event ? event : null,
-            appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body
+            appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : appendToElement
         };
         var eventArgs = this.openEventArgs;
         this.trigger('open', eventArgs, function (eventArgs) {
@@ -8700,9 +8714,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        var appendToElement = this.getAppendToElement();
         if (this.isMobile && this.isCustomWindow) {
             this.modal = this.createElement('div');
-            document.body.appendChild(this.modal);
+            appendToElement.appendChild(this.modal);
         }
         this.popupObj = new Popup(this.popupWrapper, {
             relateTo: this.isMobile && this.isCustomWindow ? document.body :
@@ -8827,7 +8842,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
         }
         if (this.isMobile && this.isCustomWindow) {
             addClass([this.modal], [DEVICE$1, ROOT$2, 'e-range-modal']);
-            document.body.className += ' ' + OVERFLOW$1;
+            appendToElement.className += ' ' + OVERFLOW$1;
             this.modal.style.display = 'block';
         }
         EventHandler.add(document, 'mousedown touchstart', this.documentHandler, this);
@@ -9683,6 +9698,16 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
     DateRangePicker.prototype.getModuleName = function () {
         return 'daterangepicker';
     };
+    DateRangePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DateRangePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');
@@ -9761,9 +9786,10 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                     this.targetElement = element;
                 }
                 this.createPopup();
+                var appendToElement = this.getAppendToElement();
                 if (this.isMobile || Browser.isDevice) {
                     this.mobileRangePopupWrap = this.createElement('div', { className: 'e-daterangepick-mob-popup-wrap' });
-                    document.body.appendChild(this.mobileRangePopupWrap);
+                    appendToElement.appendChild(this.mobileRangePopupWrap);
                 }
                 this.openEventArgs = {
                     popup: this.popupObj || null,
@@ -9771,7 +9797,7 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                     date: this.inputElement.value,
                     model: this,
                     event: event ? event : null,
-                    appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : document.body
+                    appendTo: this.isMobile || Browser.isDevice ? this.mobileRangePopupWrap : appendToElement
                 };
                 var eventArgs = this.openEventArgs;
                 this.trigger('open', eventArgs, function (eventArgs) {
@@ -9877,7 +9903,8 @@ var DateRangePicker = /** @__PURE__ @class */ (function (_super) {
                             }
                         }
                         _this.targetElement = null;
-                        removeClass([document.body], OVERFLOW$1);
+                        var appendToElement = _this.getAppendToElement();
+                        removeClass([appendToElement], OVERFLOW$1);
                         EventHandler.remove(document, 'mousedown touchstart', _this.documentHandler);
                         if (_this.isMobile && _this.modal) {
                             _this.modal.style.display = 'none';
@@ -11495,7 +11522,8 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
                 cancel: false,
                 name: 'open'
             };
-            removeClass([document.body], OVERFLOW$2);
+            var appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW$2);
             this.trigger('close', args, function (args) {
                 if (!args.cancel) {
                     var animModel = {
@@ -12596,22 +12624,23 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
         }
         else {
             this.popupCreation();
+            var appendToElement = this.getAppendToElement();
             if (Browser.isDevice && this.listWrapper) {
                 this.modal = this.createElement('div');
                 this.modal.className = '' + ROOT$3 + ' e-time-modal';
-                document.body.className += ' ' + OVERFLOW$2;
-                document.body.appendChild(this.modal);
+                appendToElement.className += ' ' + OVERFLOW$2;
+                appendToElement.appendChild(this.modal);
             }
             if (Browser.isDevice) {
                 this.mobileTimePopupWrap = this.createElement('div', { className: 'e-timepicker-mob-popup-wrap' });
-                document.body.appendChild(this.mobileTimePopupWrap);
+                appendToElement.appendChild(this.mobileTimePopupWrap);
             }
             this.openPopupEventArgs = {
                 popup: this.popupObj || null,
                 cancel: false,
                 event: event || null,
                 name: 'open',
-                appendTo: Browser.isDevice ? this.mobileTimePopupWrap : document.body
+                appendTo: Browser.isDevice ? this.mobileTimePopupWrap : appendToElement
             };
             var eventArgs = this.openPopupEventArgs;
             this.trigger('open', eventArgs, function (eventArgs) {
@@ -12742,6 +12771,16 @@ var TimePicker = /** @__PURE__ @class */ (function (_super) {
     TimePicker.prototype.getModuleName = function () {
         return 'timepicker';
     };
+    TimePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     TimePicker.prototype.updateFloatLabelOverflowWidth = function () {
         var container = this.inputWrapper.container;
         var label = container.querySelector('.e-float-text.e-label-bottom');
@@ -13665,7 +13704,8 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
                     this.listCreation();
                     append([this.listWrapper], this.dateTimeWrapper);
                 }
-                document.body.appendChild(this.dateTimeWrapper);
+                var appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(this.dateTimeWrapper);
                 this.addTimeSelection();
                 this.renderPopup();
                 this.setTimeScrollPosition();
@@ -13745,12 +13785,13 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
     DateTimePicker.prototype.renderPopup = function () {
         var _this = this;
         this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
+        var appendToElement = this.getAppendToElement();
         if (Browser.isDevice) {
             this.timeModal = createElement('div');
             this.timeModal.className = '' + ROOT$4 + ' e-time-modal';
-            document.body.className += ' ' + OVERFLOW$3;
+            appendToElement.className += ' ' + OVERFLOW$3;
             this.timeModal.style.display = 'block';
-            document.body.appendChild(this.timeModal);
+            appendToElement.appendChild(this.timeModal);
         }
         if (Browser.isDevice) {
             this.modelWrapper = createElement('div', { className: 'e-datetime-mob-popup-wrap' });
@@ -13758,7 +13799,7 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             var dlgOverlay = createElement('div', { className: 'e-dlg-overlay' });
             dlgOverlay.style.zIndex = (this.zIndex - 1).toString();
             this.modelWrapper.appendChild(dlgOverlay);
-            document.body.appendChild(this.modelWrapper);
+            appendToElement.appendChild(this.modelWrapper);
         }
         var offset = 4;
         this.popupObject = new Popup(this.dateTimeWrapper, {
@@ -14240,7 +14281,8 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
             }
             else if (this.isTimePopupOpen()) {
                 this.closePopup(e);
-                removeClass([document.body], OVERFLOW$3);
+                var appendToElement = this.getAppendToElement();
+                removeClass([appendToElement], OVERFLOW$3);
                 if (Browser.isDevice && this.timeModal) {
                     this.timeModal.style.display = 'none';
                     this.timeModal.outerHTML = '';
@@ -14765,6 +14807,16 @@ var DateTimePicker = /** @__PURE__ @class */ (function (_super) {
     DateTimePicker.prototype.getModuleName = function () {
         return 'datetimepicker';
     };
+    DateTimePicker.prototype.getAppendToElement = function () {
+        if (this.isAngular) {
+            var cdkPane = this.element.closest('.cdk-overlay-pane');
+            var popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    };
     DateTimePicker.prototype.restoreValue = function () {
         this.previousDateTime = this.previousDate;
         this.currentDate = this.value ? this.value : new Date();