fix(date-picker): dynamic datepicker position fix #347

tedi/components/form/date-picker/date-picker.component.html

@@ -38,6 +38,7 @@
     style="display: flex; align-items: center"
     position="bottom-end"
     [withArrow]="false"
+    [preventOverflow]="true"
   >
     <button
       tedi-button

tedi/components/form/date-picker/date-picker.component.spec.ts

@@ -1252,4 +1252,30 @@ describe("DatePickerComponent", () => {
       expect(component.inputValue()).toBe("");
     });
   });
+
+  describe("inputValue signal to DOM synchronization", () => {
+    it("should update visible input value when inputValue signal changes", () => {
+      const input = getInput();
+
+      expect(input.value).toBe("");
+
+      component.inputValue.set("20.03.2024");
+      fixture.detectChanges();
+
+      expect(input.value).toBe("20.03.2024");
+    });
+
+    it("should clear visible input value when inputValue signal is set to empty string", () => {
+      component.inputValue.set("15.06.2024");
+      fixture.detectChanges();
+
+      const input = getInput();
+      expect(input.value).toBe("15.06.2024");
+
+      component.inputValue.set("");
+      fixture.detectChanges();
+
+      expect(input.value).toBe("");
+    });
+  });
 });

tedi/components/overlay/popover/popover.component.html

@@ -7,6 +7,7 @@
   [floatUiLoose]="floatUiComponent"
   [targetElement]="popoverTrigger().host.nativeElement"
   [loosePlacement]="position()"
+  [preventOverflow]="position().includes('auto') ? false : preventOverflow()"
   [applyClass]="floatUiContainerClass()"
   [disableAnimation]="true"
 >

tedi/components/overlay/popover/popover.component.spec.ts

@@ -11,6 +11,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
   template: `
     <tedi-popover
       [position]="position"
+      [preventOverflow]="preventOverflow"
       [dismissible]="dismissible"
       [hideOnScroll]="hideOnScroll"
       [withBorder]="withBorder"
@@ -26,6 +27,7 @@ import { PopoverContentComponent } from "./popover-content/popover-content.compo
 })
 class TestHostComponent {
   position: PopoverPosition = "top";
+  preventOverflow = false;
   dismissible = true;
   hideOnScroll = false;
   withBorder = false;
@@ -61,11 +63,18 @@ describe("PopoverComponent", () => {
 
   it("should have default inputs", () => {
     expect(component.position()).toBe("top");
+    expect(component.preventOverflow()).toBe(false);
     expect(component.dismissible()).toBe(true);
     expect(component.hideOnScroll()).toBe(false);
     expect(component.withBorder()).toBe(false);
   });
 
+  it("should update preventOverflow when input changes", () => {
+    hostComponent.preventOverflow = true;
+    fixture.detectChanges();
+    expect(component.preventOverflow()).toBe(true);
+  });
+
   it("should initialize the ViewChild floatUiComponent", () => {
     const instance = component.floatUiComponent();
     expect(instance).toBeInstanceOf(NgxFloatUiContentComponent);

tedi/components/overlay/popover/popover.component.ts

@@ -38,6 +38,11 @@ export class PopoverComponent implements AfterContentChecked {
    * @default top
    */
   position = input<PopoverPosition>("top");
+  /**
+   * Should position flip to opposite direction when overflowing screen?
+   * @default false
+   */
+  preventOverflow = input(false);
   /**
    * Is dismissible by clicking outside of content?
    * @default true