@wavemaker/app-ng-runtime 11.11.1-rc.6142 → 11.11.2-rc.6152

package/components/input/epoch/fesm2022/index.mjs

@@ -1538,6 +1538,26 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
             setTimeout(() => displayInputElem.blur());
         }
     }
+    adjustDateTimePickerInModel(element, elementDirective) {
+        if (this.containerTarget === '.modal-container' && element) {
+            setTimeout(() => {
+                elementDirective._datepicker._posService.disable();
+                const inputRect = this.nativeElement.getBoundingClientRect();
+                const elementHeight = $('timepicker')[0]?.offsetHeight || element.offsetHeight;
+                let top;
+                if (inputRect.bottom + elementHeight > window.innerHeight) {
+                    top = inputRect.top - elementHeight + window.scrollY;
+                }
+                else {
+                    top = inputRect.bottom + window.scrollY;
+                }
+                const left = inputRect.left + window.scrollX;
+                element.style.top = `${top}px`;
+                element.style.left = `${left}px`;
+                element.style.transform = 'none';
+            });
+        }
+    }
     onPropertyChange(key, nv, ov) {
         if (key === 'tabindex') {
             return;
@@ -1606,7 +1626,7 @@ class BaseDateTimeComponent extends BaseFormCustomComponent {
     }
     ngAfterViewInit() {
         super.ngAfterViewInit();
-        this.containerTarget = getContainerTargetClass(this.nativeElement);
+        this.containerTarget = this.nativeElement.closest('modal-container') ? '.modal-container' : getContainerTargetClass(this.nativeElement);
         this.isReadOnly = this.dataentrymode != 'undefined' && !this.isDataEntryModeEnabledOnInput(this.dataentrymode);
         // this mobileinput width varies in ios hence setting width here.
         const mobileInput = this.getMobileInput();
@@ -1950,15 +1970,16 @@ class DateComponent extends BaseDateTimeComponent {
         // So actual bootstrap input target width we made it to 0, so bootstrap calculating the calendar container top position improperly.
         // To fix the container top position set the width 1px;
         this.$element.find('.model-holder').width('1px');
-        const dpContainerEl = $('bs-datepicker-container');
-        dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+        const datePickerContainerEl = $('bs-datepicker-container');
+        datePickerContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
         $('.bs-calendar-container').removeAttr('role');
         const datePickerContainer = $('.bs-datepicker-container')[0];
         this.focusTrap = setFocusTrap(datePickerContainer, true);
         this.focusTrap.activate();
         this.addDatepickerKeyboardEvents(this, false);
-        adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
-        adjustContainerRightEdges($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
+        adjustContainerRightEdges(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
+        this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
         if (this.timeZone) {
             const todayBtn = document.querySelector(`.${this.dateContainerCls} .bs-datepicker-buttons .btn-today-wrapper button`);
             const setTodayTZHandler = (event) => {
@@ -2389,8 +2410,10 @@ class DatetimeComponent extends BaseDateTimeComponent {
         this.bsDatePickerDirective.hide();
         this.focusTimePickerPopover(this);
         this.bindTimePickerKeyboardEvents();
-        adjustContainerPosition($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
-        adjustContainerRightEdges($('bs-dropdown-container'), this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        const dropdownContainerEl = $('bs-dropdown-container');
+        adjustContainerPosition(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        adjustContainerRightEdges(dropdownContainerEl, this.nativeElement, this.bsDropdown._dropdown, $('bs-dropdown-container .dropdown-menu'));
+        this.adjustDateTimePickerInModel(dropdownContainerEl[0], this.bsDatePickerDirective);
     }
     onDatePickerOpen() {
         this.isDateOpen = !this.isDateOpen;
@@ -2399,8 +2422,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
         // So actual bootstrap input target width we made it to 0 so bootstrap calculating the calendar container top position impropery.
         // To fix the container top position set the width 1px;
         this.$element.find('.model-holder').width('1px');
-        const dpContainerEl = $('bs-datepicker-container');
-        dpContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
+        const datePickerContainerEl = $('bs-datepicker-container');
+        datePickerContainerEl.attr('aria-label', 'Use Arrow keys to navigate dates, Choose Date from datepicker');
         $('.bs-calendar-container').removeAttr('role');
         const datePickerContainer = $('.bs-datepicker-container')[0];
         this.focusTrap = setFocusTrap(datePickerContainer, true);
@@ -2410,7 +2433,8 @@ class DatetimeComponent extends BaseDateTimeComponent {
             this.hightlightToday(this.activeDate);
         }
         this.addDatepickerKeyboardEvents(this, true);
-        adjustContainerPosition($('bs-datepicker-container'), this.nativeElement, this.bsDatePickerDirective._datepicker);
+        adjustContainerPosition(datePickerContainerEl, this.nativeElement, this.bsDatePickerDirective._datepicker);
+        this.adjustDateTimePickerInModel(datePickerContainerEl[0], this.bsDatePickerDirective);
     }
     /**
      * This is an internal method to update the model