@syncfusion/ej2-calendars 32.2.4 → 32.2.6

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

@@ -4286,13 +4286,14 @@ let DatePicker = class DatePicker extends Calendar {
         if (!isNullOrUndefined(this.cssClass)) {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        const 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 = '';
@@ -4626,9 +4627,10 @@ let DatePicker = class DatePicker extends Calendar {
                 this.previousDate = outOfRange;
                 this.createCalendar();
             }
+            const 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: () => {
@@ -4637,7 +4639,7 @@ let DatePicker = class DatePicker extends Calendar {
                 popup: this.popupObj,
                 event: e || null,
                 cancel: false,
-                appendTo: Browser.isDevice ? this.mobilePopupWrapper : document.body
+                appendTo: Browser.isDevice ? this.mobilePopupWrapper : appendToElement
             };
             const eventArgs = this.preventArgs;
             this.trigger('open', eventArgs, (eventArgs) => {
@@ -4697,7 +4699,8 @@ let DatePicker = class DatePicker extends Calendar {
                 cancel: false
             };
             removeClass(this.inputWrapper.buttons, ACTIVE);
-            removeClass([document.body], OVERFLOW);
+            const appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW);
             const eventArgs = this.preventArgs;
             if (this.isCalendar()) {
                 this.trigger('close', eventArgs, (eventArgs) => {
@@ -5138,6 +5141,16 @@ let DatePicker = class DatePicker extends Calendar {
     getModuleName() {
         return 'datepicker';
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     updateFloatLabelOverflowWidth() {
         const container = this.inputWrapper.container;
         const label = container.querySelector('.e-float-text.e-label-bottom');
@@ -8512,13 +8525,14 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         this.popupObj.hide();
         this.popupWrapper = this.createElement('div', { id: this.element.id + '_popup', className: ROOT$2 + ' ' + POPUP$1 });
         this.renderControl();
+        const 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
         };
         const eventArgs = this.openEventArgs;
         this.trigger('open', eventArgs, (eventArgs) => {
@@ -8600,9 +8614,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         if (!isNullOrUndefined(this.cssClass) && this.cssClass.trim() !== '') {
             this.popupWrapper.className += ' ' + this.cssClass;
         }
+        const 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 :
@@ -8727,7 +8742,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
         }
         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);
@@ -9583,6 +9598,16 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
     getModuleName() {
         return 'daterangepicker';
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     updateFloatLabelOverflowWidth() {
         const container = this.inputWrapper.container;
         const label = container.querySelector('.e-float-text.e-label-bottom');
@@ -9660,9 +9685,10 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     this.targetElement = element;
                 }
                 this.createPopup();
+                const 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,
@@ -9670,7 +9696,7 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                     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
                 };
                 const eventArgs = this.openEventArgs;
                 this.trigger('open', eventArgs, (eventArgs) => {
@@ -9775,7 +9801,8 @@ let DateRangePicker = class DateRangePicker extends CalendarBase {
                             }
                         }
                         this.targetElement = null;
-                        removeClass([document.body], OVERFLOW$1);
+                        const appendToElement = this.getAppendToElement();
+                        removeClass([appendToElement], OVERFLOW$1);
                         EventHandler.remove(document, 'mousedown touchstart', this.documentHandler);
                         if (this.isMobile && this.modal) {
                             this.modal.style.display = 'none';
@@ -11367,7 +11394,8 @@ let TimePicker = class TimePicker extends Component {
                 cancel: false,
                 name: 'open'
             };
-            removeClass([document.body], OVERFLOW$2);
+            const appendToElement = this.getAppendToElement();
+            removeClass([appendToElement], OVERFLOW$2);
             this.trigger('close', args, (args) => {
                 if (!args.cancel) {
                     const animModel = {
@@ -12465,22 +12493,23 @@ let TimePicker = class TimePicker extends Component {
         }
         else {
             this.popupCreation();
+            const 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
             };
             const eventArgs = this.openPopupEventArgs;
             this.trigger('open', eventArgs, (eventArgs) => {
@@ -12611,6 +12640,16 @@ let TimePicker = class TimePicker extends Component {
     getModuleName() {
         return 'timepicker';
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     updateFloatLabelOverflowWidth() {
         const container = this.inputWrapper.container;
         const label = container.querySelector('.e-float-text.e-label-bottom');
@@ -13516,7 +13555,8 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
                     this.listCreation();
                     append([this.listWrapper], this.dateTimeWrapper);
                 }
-                document.body.appendChild(this.dateTimeWrapper);
+                const appendToElement = this.getAppendToElement();
+                appendToElement.appendChild(this.dateTimeWrapper);
                 this.addTimeSelection();
                 this.renderPopup();
                 this.setTimeScrollPosition();
@@ -13594,12 +13634,13 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     }
     renderPopup() {
         this.containerStyle = this.inputWrapper.container.getBoundingClientRect();
+        const 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' });
@@ -13607,7 +13648,7 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             const 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);
         }
         const offset = 4;
         this.popupObject = new Popup(this.dateTimeWrapper, {
@@ -14088,7 +14129,8 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
             }
             else if (this.isTimePopupOpen()) {
                 this.closePopup(e);
-                removeClass([document.body], OVERFLOW$3);
+                const appendToElement = this.getAppendToElement();
+                removeClass([appendToElement], OVERFLOW$3);
                 if (Browser.isDevice && this.timeModal) {
                     this.timeModal.style.display = 'none';
                     this.timeModal.outerHTML = '';
@@ -14611,6 +14653,16 @@ let DateTimePicker = class DateTimePicker extends DatePicker {
     getModuleName() {
         return 'datetimepicker';
     }
+    getAppendToElement() {
+        if (this.isAngular) {
+            const cdkPane = this.element.closest('.cdk-overlay-pane');
+            const popoverEl = this.element.closest('[popover]');
+            if (cdkPane && popoverEl) {
+                return cdkPane;
+            }
+        }
+        return document.body;
+    }
     restoreValue() {
         this.previousDateTime = this.previousDate;
         this.currentDate = this.value ? this.value : new Date();