pdm-ui-kit 0.1.47 → 0.1.49

package/fesm2020/pdm-ui-kit.mjs

@@ -1932,6 +1932,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Creates a flexible position strategy that automatically adjusts
+ * to keep the overlay within the viewport edges.
+ *
+ * The strategy tries positions in this order:
+ * 1. Bottom-left (origin bottom edge, aligns to left)
+ * 2. Top-left (origin top edge, aligns to left)
+ * 3. Bottom-right (origin bottom edge, aligns to right)
+ * 4. Top-right (origin top edge, aligns to right)
+ *
+ * CDK Overlay will use the first position that fits within the viewport.
+ */
+function createFlexiblePositionStrategy(overlay, triggerElement, offset = 4) {
+    return overlay
+        .position()
+        .flexibleConnectedTo(triggerElement)
+        .withPositions([
+        // Bottom-left (default) - opens downward from left edge
+        {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+            offsetY: offset
+        },
+        // Top-left - opens upward from left edge
+        {
+            originX: 'start',
+            originY: 'top',
+            overlayX: 'start',
+            overlayY: 'bottom',
+            offsetY: -offset
+        },
+        // Bottom-right - opens downward from right edge
+        {
+            originX: 'end',
+            originY: 'bottom',
+            overlayX: 'end',
+            overlayY: 'top',
+            offsetY: offset
+        },
+        // Top-right - opens upward from right edge
+        {
+            originX: 'end',
+            originY: 'top',
+            overlayX: 'end',
+            overlayY: 'bottom',
+            offsetY: -offset
+        }
+    ])
+        .withFlexibleDimensions(false)
+        .withPush(true);
+}
+
 class PdmLabelComponent {
     constructor() {
         this.forId = '';
@@ -2159,27 +2213,7 @@ class PdmDatePickerComponent {
         this._open = true;
         this.openChange.emit(true);
         this.cdr.markForCheck();
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(triggerEl)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 8
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -8
-            }
-        ])
-            .withFlexibleDimensions(false)
-            .withPush(true);
+        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
         // Resolve panelClass: overlayOptions.panelClass wins; otherwise map panelClassName.
         const resolvedPanelClass = this.overlayOptions?.panelClass
             ?? (this.panelClassName ? ['block', this.panelClassName] : ['block']);
@@ -2551,27 +2585,7 @@ class PdmDropdownMenuComponent {
             return;
         this.open = true;
         this.cdr.markForCheck();
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(triggerEl)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 8
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -8
-            }
-        ])
-            .withFlexibleDimensions(false)
-            .withPush(true);
+        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
         // Resolve panelClass: overlayOptions.panelClass wins; otherwise map panelClassName.
         const resolvedPanelClass = this.overlayOptions?.panelClass
             ?? (this.panelClassName ? ['block', this.panelClassName] : ['block']);
@@ -3477,27 +3491,7 @@ class PdmSelectComponent {
             return;
         this.open = true;
         this.cdr.markForCheck();
-        const positionStrategy = this.overlay
-            .position()
-            .flexibleConnectedTo(triggerEl)
-            .withPositions([
-            {
-                originX: 'start',
-                originY: 'bottom',
-                overlayX: 'start',
-                overlayY: 'top',
-                offsetY: 4
-            },
-            {
-                originX: 'start',
-                originY: 'top',
-                overlayX: 'start',
-                overlayY: 'bottom',
-                offsetY: -4
-            }
-        ])
-            .withFlexibleDimensions(false)
-            .withPush(true);
+        const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 4);
         this.overlayRef = this.overlay.create({
             // Fix: use a token array — DOMTokenList.add() rejects space-containing strings.
             panelClass: ['block'],
@@ -4660,5 +4654,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule };
+export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, createFlexiblePositionStrategy };
 //# sourceMappingURL=pdm-ui-kit.mjs.map