pdm-ui-kit 0.1.46 → 0.1.48

package/fesm2020/pdm-ui-kit.mjs

@@ -6,8 +6,8 @@ import * as i1$2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { icons } from 'lucide';
 import * as i1$1 from '@angular/platform-browser';
-import { format } from 'date-fns';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { format } from 'date-fns';
 
 class PdmAccordionComponent {
     constructor() {
@@ -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 = '';
@@ -1954,21 +2008,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 let nextDatePickerId = 0;
 class PdmDatePickerComponent {
-    constructor(elementRef, cdr) {
+    constructor(elementRef, cdr, overlay, viewContainerRef) {
         this.elementRef = elementRef;
         this.cdr = cdr;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this._value = null;
         this._rangeValue = null;
         this._open = false;
         this.instanceId = `pdm-date-picker-${++nextDatePickerId}`;
         this.triggerFocused = false;
-        this.panelPlacement = 'bottom';
+        this.overlayRef = null;
+        this.backdropSub = null;
         this.id = '';
         this.variant = 'single';
         this.label = '';
         this.labelClassName = '';
         this.className = '';
         this.triggerClassName = '';
+        /**
+         * Additional CSS classes applied to the overlay panel.
+         * Backward-compatible: mapped to `overlayOptions.panelClass` when `overlayOptions` is not set.
+         * When both are supplied, `overlayOptions.panelClass` takes precedence.
+         */
         this.panelClassName = '';
         this.placeholder = 'Pick a date';
         this.rangePlaceholder = 'Pick a date range';
@@ -1991,14 +2053,14 @@ class PdmDatePickerComponent {
         this.monthChange = new EventEmitter();
     }
     set open(value) {
-        this._open = !!value;
-        if (this._open) {
-            this.schedulePanelPlacementUpdate();
+        if (this._open === !!value)
+            return;
+        if (!!value) {
+            this.openPanel();
         }
         else {
-            this.panelPlacement = 'bottom';
+            this.closePanel();
         }
-        this.cdr.markForCheck();
     }
     get open() {
         return this._open;
@@ -2022,6 +2084,9 @@ class PdmDatePickerComponent {
     get rangeValue() {
         return this._rangeValue;
     }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
     get resolvedVariant() {
         return this.variant === 'range' ? 'range' : 'single';
     }
@@ -2066,7 +2131,7 @@ class PdmDatePickerComponent {
         ];
     }
     get triggerClasses() {
-        const focusStyle = this.open || this.triggerFocused;
+        const focusStyle = this._open || this.triggerFocused;
         return [
             'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive relative flex w-full appearance-none items-center gap-2 overflow-hidden rounded-lg border bg-background px-3 py-[7.5px] text-left text-sm shadow-sm outline-none transition-colors',
             'min-h-[36px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
@@ -2077,19 +2142,11 @@ class PdmDatePickerComponent {
             this.triggerClassName
         ];
     }
-    get panelClasses() {
-        return [
-            this.panelPlacement === 'top'
-                ? 'absolute bottom-full left-0 z-50 mb-2'
-                : 'absolute left-0 top-full z-50 mt-2',
-            this.panelClassName
-        ];
-    }
     toggleOpen() {
         if (this.disabled || this.readonly) {
             return;
         }
-        this.setOpen(!this.open);
+        this.setOpen(!this._open);
     }
     onTriggerFocus() {
         this.triggerFocused = true;
@@ -2132,58 +2189,68 @@ class PdmDatePickerComponent {
         this.monthChange.emit(this.cloneDate(month));
     }
     onEscape() {
-        if (this.open) {
-            this.setOpen(false);
-        }
-    }
-    onDocumentClick(event) {
-        if (!this.open) {
-            return;
-        }
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
+        if (this._open) {
             this.setOpen(false);
         }
     }
-    onViewportChange() {
-        this.updatePanelPlacement();
-    }
     setOpen(nextOpen) {
         if (this._open === nextOpen) {
             return;
         }
-        this._open = nextOpen;
-        this.openChange.emit(this._open);
-        if (this._open) {
-            this.schedulePanelPlacementUpdate();
+        if (nextOpen) {
+            this.openPanel();
         }
         else {
-            this.panelPlacement = 'bottom';
+            this.closePanel();
         }
-        this.cdr.markForCheck();
     }
-    schedulePanelPlacementUpdate() {
-        setTimeout(() => this.updatePanelPlacement());
-    }
-    updatePanelPlacement() {
-        if (!this._open) {
+    openPanel() {
+        if (this.overlayRef)
             return;
-        }
         const triggerEl = this.triggerRef?.nativeElement;
-        const panelEl = this.panelRef?.nativeElement;
-        if (!triggerEl || !panelEl || typeof window === 'undefined') {
+        if (!triggerEl)
             return;
+        this._open = true;
+        this.openChange.emit(true);
+        this.cdr.markForCheck();
+        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']);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            // Consumer overrides are spread last — they win over every default above.
+            ...this.overlayOptions,
+            // panelClass always overrides last: it already merges panelClassName + overlayOptions.
+            panelClass: resolvedPanelClass
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.backdropSub = this.overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (!triggerEl.contains(target)) {
+                this.closePanel();
+            }
+        });
+        this.cdr.markForCheck();
+    }
+    closePanel() {
+        if (!this.overlayRef && !this._open)
+            return;
+        this._open = false;
+        this.openChange.emit(false);
+        this.destroyOverlay();
+        this.cdr.markForCheck();
+    }
+    destroyOverlay() {
+        if (this.backdropSub) {
+            this.backdropSub.unsubscribe();
+            this.backdropSub = null;
         }
-        const viewportHeight = window.innerHeight;
-        const gap = 8;
-        const triggerRect = triggerEl.getBoundingClientRect();
-        const panelHeight = panelEl.offsetHeight;
-        const spaceBelow = Math.max(0, viewportHeight - triggerRect.bottom - gap);
-        const spaceAbove = Math.max(0, triggerRect.top - gap);
-        const nextPlacement = spaceBelow < panelHeight && spaceAbove > spaceBelow ? 'top' : 'bottom';
-        if (this.panelPlacement !== nextPlacement) {
-            this.panelPlacement = nextPlacement;
-            this.cdr.markForCheck();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
     }
     formatDate(date) {
@@ -2204,17 +2271,17 @@ class PdmDatePickerComponent {
         return new Date(date.getFullYear(), date.getMonth(), date.getDate());
     }
 }
-PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, host: { listeners: { "document:keydown.escape": "onEscape()", "document:click": "onDocumentClick($event)", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panelEl"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <div class=\"relative inline-block w-full\">\n    <button\n      #triggerEl\n      type=\"button\"\n      [id]=\"triggerId\"\n      [disabled]=\"disabled\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"triggerClasses\"\n      [attr.title]=\"displayText\"\n      (click)=\"toggleOpen()\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur()\"\n    >\n      <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n          <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n          <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </span>\n\n      <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n    </button>\n\n    <div *ngIf=\"open\" #panelEl [id]=\"panelId\" [ngClass]=\"panelClasses\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n      <pdm-calendar\n        [variant]=\"resolvedVariant\"\n        [value]=\"value\"\n        [rangeValue]=\"rangeValue\"\n        [readonly]=\"readonly\"\n        [allowSameDayRange]=\"allowSameDayRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minYear]=\"minYear\"\n        [maxYear]=\"maxYear\"\n        [disabledDates]=\"disabledDates\"\n        [isDateDisabled]=\"isDateDisabled\"\n        (valueChange)=\"onCalendarValueChange($event)\"\n        (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n        (monthChange)=\"onCalendarMonthChange($event)\"\n      ></pdm-calendar>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }, { kind: "component", type: PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmDatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDatePickerComponent, selector: "pdm-date-picker", inputs: { id: "id", variant: "variant", label: "label", labelClassName: "labelClassName", className: "className", triggerClassName: "triggerClassName", panelClassName: "panelClassName", overlayOptions: "overlayOptions", placeholder: "placeholder", rangePlaceholder: "rangePlaceholder", format: "format", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", allowSameDayRange: "allowSameDayRange", closeOnSelect: "closeOnSelect", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", disabledDates: "disabledDates", isDateDisabled: "isDateDisabled", open: "open", value: "value", rangeValue: "rangeValue" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", openChange: "openChange", monthChange: "monthChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: ["variant", "className", "disabledDates", "minDate", "maxDate", "minYear", "maxYear", "isDateDisabled", "allowSameDayRange", "readonly", "value", "rangeValue", "month"], outputs: ["valueChange", "rangeValueChange", "monthChange", "dateClick", "disabledDateClick"] }, { kind: "component", type: PdmLabelComponent, selector: "pdm-label", inputs: ["forId", "required", "className"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <div class=\"relative inline-block w-full\">\n    <button\n      #triggerEl\n      type=\"button\"\n      [id]=\"triggerId\"\n      [disabled]=\"disabled\"\n      [attr.aria-expanded]=\"open\"\n      [attr.aria-controls]=\"panelId\"\n      [attr.aria-haspopup]=\"'dialog'\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"triggerClasses\"\n      [attr.title]=\"displayText\"\n      (click)=\"toggleOpen()\"\n      (focus)=\"onTriggerFocus()\"\n      (blur)=\"onTriggerBlur()\"\n    >\n      <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n          <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n          <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </span>\n\n      <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n    </button>\n\n    <div *ngIf=\"open\" #panelEl [id]=\"panelId\" [ngClass]=\"panelClasses\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n      <pdm-calendar\n        [variant]=\"resolvedVariant\"\n        [value]=\"value\"\n        [rangeValue]=\"rangeValue\"\n        [readonly]=\"readonly\"\n        [allowSameDayRange]=\"allowSameDayRange\"\n        [minDate]=\"minDate\"\n        [maxDate]=\"maxDate\"\n        [minYear]=\"minYear\"\n        [maxYear]=\"maxYear\"\n        [disabledDates]=\"disabledDates\"\n        [isDateDisabled]=\"isDateDisabled\"\n        (valueChange)=\"onCalendarValueChange($event)\"\n        (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n        (monthChange)=\"onCalendarMonthChange($event)\"\n      ></pdm-calendar>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { triggerRef: [{
+            args: [{ selector: 'pdm-date-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\">\n  <pdm-label *ngIf=\"label\" [forId]=\"triggerId\" [required]=\"required\" [className]=\"labelClassName\">\n    {{ label }}\n  </pdm-label>\n\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"triggerId\"\n    [disabled]=\"disabled\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-controls]=\"panelId\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"triggerClasses\"\n    [attr.title]=\"displayText\"\n    (click)=\"toggleOpen()\"\n    (focus)=\"onTriggerFocus()\"\n    (blur)=\"onTriggerBlur()\"\n  >\n    <span class=\"flex h-5 w-5 shrink-0 items-center justify-center p-0.5 text-muted-foreground\" aria-hidden=\"true\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\">\n        <path d=\"M8 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M16 2v4\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <rect x=\"3\" y=\"4.5\" width=\"18\" height=\"16.5\" rx=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></rect>\n        <path d=\"M3 9.5h18\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n\n    <span [ngClass]=\"textClasses\">{{ displayText }}</span>\n  </button>\n</div>\n\n<ng-template #panelTemplate>\n  <div [id]=\"panelId\" role=\"dialog\" [attr.aria-labelledby]=\"label ? triggerId : null\">\n    <pdm-calendar\n      [variant]=\"resolvedVariant\"\n      [value]=\"value\"\n      [rangeValue]=\"rangeValue\"\n      [readonly]=\"readonly\"\n      [allowSameDayRange]=\"allowSameDayRange\"\n      [minDate]=\"minDate\"\n      [maxDate]=\"maxDate\"\n      [minYear]=\"minYear\"\n      [maxYear]=\"maxYear\"\n      [disabledDates]=\"disabledDates\"\n      [isDateDisabled]=\"isDateDisabled\"\n      (valueChange)=\"onCalendarValueChange($event)\"\n      (rangeValueChange)=\"onCalendarRangeValueChange($event)\"\n      (monthChange)=\"onCalendarMonthChange($event)\"\n    ></pdm-calendar>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerRef: [{
                 type: ViewChild,
                 args: ['triggerEl']
-            }], panelRef: [{
+            }], panelTemplateRef: [{
                 type: ViewChild,
-                args: ['panelEl']
+                args: ['panelTemplate']
             }], id: [{
                 type: Input
             }], variant: [{
@@ -2229,6 +2296,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], panelClassName: [{
                 type: Input
+            }], overlayOptions: [{
+                type: Input
             }], placeholder: [{
                 type: Input
             }], rangePlaceholder: [{
@@ -2276,15 +2345,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
-            }], onViewportChange: [{
-                type: HostListener,
-                args: ['window:resize']
-            }, {
-                type: HostListener,
-                args: ['window:scroll']
             }] } });
 
 class PdmDialogComponent {
@@ -2417,20 +2477,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmDropdownMenuComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr, overlay, viewContainerRef) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this.triggerText = 'Open';
         this.variant = 'default';
         this.items = [];
         this.closeOnSelect = true;
-        this.panelClassName = '';
+        /**
+         * Additional CSS classes applied to the trigger wrapper element.
+         * Preserved for backward compatibility.
+         */
         this.className = '';
+        /**
+         * Additional CSS classes applied to the overlay panel.
+         * Backward-compatible: mapped to `overlayOptions.panelClass` when `overlayOptions` is not set.
+         * When both are supplied, `overlayOptions.panelClass` takes precedence.
+         */
+        this.panelClassName = '';
         this.itemSelect = new EventEmitter();
         this.itemsChange = new EventEmitter();
         this.open = false;
+        this.overlayRef = null;
+        this.backdropSub = null;
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
     }
     toggle() {
-        this.open = !this.open;
+        if (this.open) {
+            this.closePanel();
+        }
+        else {
+            this.openPanel();
+        }
     }
     get resolvedItems() {
         if (this.items.length) {
@@ -2489,27 +2571,66 @@ class PdmDropdownMenuComponent {
         this.itemSelect.emit(item.value);
         const shouldClose = this.variant === 'default' ? this.closeOnSelect : false;
         if (shouldClose) {
-            this.open = false;
+            this.closePanel();
         }
     }
     onEsc() {
-        this.open = false;
+        this.closePanel();
     }
-    onDocumentClick(event) {
-        if (!this.open)
+    openPanel() {
+        if (this.overlayRef)
             return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
-            this.open = false;
+        const triggerEl = this.triggerRef?.nativeElement;
+        if (!triggerEl)
+            return;
+        this.open = true;
+        this.cdr.markForCheck();
+        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']);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            // Consumer overrides are spread last — they win over every default above.
+            ...this.overlayOptions,
+            // panelClass always overrides last: it already merges panelClassName + overlayOptions.
+            panelClass: resolvedPanelClass
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        this.backdropSub = this.overlayRef.outsidePointerEvents().subscribe((event) => {
+            const target = event.target;
+            if (!triggerEl.contains(target)) {
+                this.closePanel();
+            }
+        });
+        this.cdr.markForCheck();
+    }
+    closePanel() {
+        if (!this.overlayRef)
+            return;
+        this.open = false;
+        this.destroyOverlay();
+        this.cdr.markForCheck();
+    }
+    destroyOverlay() {
+        if (this.backdropSub) {
+            this.backdropSub.unsubscribe();
+            this.backdropSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
     }
 }
-PdmDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDropdownMenuComponent, selector: "pdm-dropdown-menu", inputs: { triggerText: "triggerText", variant: "variant", items: "items", closeOnSelect: "closeOnSelect", panelClassName: "panelClassName", className: "className" }, outputs: { itemSelect: "itemSelect", itemsChange: "itemsChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    [ngClass]=\"[\n      'absolute left-0 top-full z-50 mt-2 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',\n      panelClassName\n    ]\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDropdownMenuComponent, selector: "pdm-dropdown-menu", inputs: { triggerText: "triggerText", variant: "variant", items: "items", closeOnSelect: "closeOnSelect", className: "className", panelClassName: "panelClassName", overlayOptions: "overlayOptions" }, outputs: { itemSelect: "itemSelect", itemsChange: "itemsChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    'inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    [ngClass]=\"[\n      'absolute left-0 top-full z-50 mt-2 min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',\n      panelClassName\n    ]\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { triggerText: [{
+            args: [{ selector: 'pdm-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    'inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], variant: [{
                 type: Input
@@ -2517,20 +2638,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], closeOnSelect: [{
                 type: Input
+            }], className: [{
+                type: Input
             }], panelClassName: [{
                 type: Input
-            }], className: [{
+            }], overlayOptions: [{
                 type: Input
             }], itemSelect: [{
                 type: Output
             }], itemsChange: [{
                 type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], panelTemplateRef: [{
+                type: ViewChild,
+                args: ['panelTemplate']
             }], onEsc: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class PdmDrawerComponent {
@@ -3365,33 +3491,15 @@ 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'],
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            width: triggerEl.offsetWidth
+            width: triggerEl.offsetWidth,
+            // Consumer overrides are spread last — they win over every default above.
+            ...this.overlayOptions
         });
         const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
         this.overlayRef.attach(portal);
@@ -3422,7 +3530,7 @@ class PdmSelectComponent {
     }
 }
 PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n" }]
@@ -3440,6 +3548,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], overlayOptions: [{
+                type: Input
             }], valueChange: [{
                 type: Output
             }], triggerRef: [{
@@ -3499,7 +3609,7 @@ class PdmPaginationComponent {
     }
 }
 PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
@@ -4544,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