@koobiq/components 18.39.2 → 18.39.4

package/fesm2022/koobiq-components-datepicker.mjs

@@ -9,7 +9,7 @@ import { KbqButtonModule } from '@koobiq/components/button';
 import * as i3 from '@koobiq/components/select';
 import { KbqSelectModule } from '@koobiq/components/select';
 import * as i4 from '@koobiq/components/form-field';
-import { KbqFormFieldControl, KbqFormFieldModule } from '@koobiq/components/form-field';
+import { KbqFormFieldControl, KbqFormField, KbqFormFieldModule } from '@koobiq/components/form-field';
 import * as i1$2 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import { Subject, Subscription, merge, of } from 'rxjs';
@@ -939,7 +939,7 @@ class KbqDatepicker {
     createPopupPositionStrategy() {
         return this.overlay
             .position()
-            .flexibleConnectedTo(this.datepickerInput.elementRef)
+            .flexibleConnectedTo(this.datepickerInput.getOrigin())
             .withTransformOriginOn('.kbq-datepicker__content')
             .withFlexibleDimensions(false)
             .withViewportMargin(8)
@@ -1324,7 +1324,10 @@ class KbqDatepickerInput {
         this.adapter = adapter;
         this.dateFormats = dateFormats;
         /** @docs-private */
+        this.formField = inject(KbqFormField, { optional: true, host: true });
+        /** @docs-private */
         this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
+        /** @docs-private */
         this.externalConfiguration = inject(KBQ_DATEPICKER_CONFIGURATION, { optional: true });
         this.stateChanges = new Subject();
         this.controlType = 'datepicker';
@@ -1611,6 +1614,10 @@ class KbqDatepickerInput {
     updateErrorState() {
         this.errorStateTracker.updateErrorState();
     }
+    /** Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input. */
+    getOrigin() {
+        return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
+    }
     saveTimePart(selected) {
         if (!this.value) {
             return selected;