pdm-ui-kit 0.1.32 → 0.1.33

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, ViewChild, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChild, ViewChildren, NgModule } from '@angular/core';
 import { icons } from 'lucide';
 import * as i1$1 from '@angular/platform-browser';
 import { format } from 'date-fns';
@@ -313,7 +313,6 @@ class PdmButtonGroupComponent {
                 '[&>pdm-button>button]:!rounded-none',
                 '[&>pdm-button:first-child>button]:!rounded-l-md',
                 '[&>pdm-button:last-child>button]:!rounded-r-md',
-                '[&>pdm-button:not(:first-child)>button]:!border-l-0',
                 '[&>pdm-input>div>input]:!rounded-none',
                 '[&>pdm-input:first-child>div>input]:!rounded-l-md',
                 '[&>pdm-input:last-child>div>input]:!rounded-r-md',
@@ -331,12 +330,10 @@ class PdmButtonGroupComponent {
                 '[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-l-md',
                 '[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-r-md',
-                '[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-l-0',
                 '[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
                 '[&>pdm-tooltip>span>button]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>button]:!rounded-l-md',
                 '[&>pdm-tooltip:last-child>span>button]:!rounded-r-md',
-                '[&>pdm-tooltip:not(:first-child)>span>button]:!border-l-0',
                 '[&>pdm-tooltip>span>button]:shadow-none',
                 '[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-l-md',
@@ -396,7 +393,6 @@ class PdmButtonGroupComponent {
                 '[&>pdm-input>div>input]:bg-background',
                 '[&>pdm-input>div>input]:shadow-none',
                 '[&>pdm-button>button]:shadow-none',
-                '[&>pdm-button:not(:first-child)>button]:!border-t-0',
                 '[&>pdm-tooltip>span>*]:rounded-none',
                 '[&>pdm-tooltip:first-child>span>*]:rounded-t-md',
                 '[&>pdm-tooltip:last-child>span>*]:rounded-b-md',
@@ -404,12 +400,10 @@ class PdmButtonGroupComponent {
                 '[&>pdm-tooltip>span>pdm-button>button]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>pdm-button>button]:!rounded-t-md',
                 '[&>pdm-tooltip:last-child>span>pdm-button>button]:!rounded-b-md',
-                '[&>pdm-tooltip:not(:first-child)>span>pdm-button>button]:!border-t-0',
                 '[&>pdm-tooltip>span>pdm-button>button]:shadow-none',
                 '[&>pdm-tooltip>span>button]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>button]:!rounded-t-md',
                 '[&>pdm-tooltip:last-child>span>button]:!rounded-b-md',
-                '[&>pdm-tooltip:not(:first-child)>span>button]:!border-t-0',
                 '[&>pdm-tooltip>span>button]:shadow-none',
                 '[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none',
                 '[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-t-md',
@@ -1961,6 +1955,7 @@ class PdmDatePickerComponent {
         this._open = false;
         this.instanceId = `pdm-date-picker-${++nextDatePickerId}`;
         this.triggerFocused = false;
+        this.panelPlacement = 'bottom';
         this.id = '';
         this.variant = 'single';
         this.label = '';
@@ -1990,6 +1985,12 @@ class PdmDatePickerComponent {
     }
     set open(value) {
         this._open = !!value;
+        if (this._open) {
+            this.schedulePanelPlacementUpdate();
+        }
+        else {
+            this.panelPlacement = 'bottom';
+        }
         this.cdr.markForCheck();
     }
     get open() {
@@ -2071,7 +2072,9 @@ class PdmDatePickerComponent {
     }
     get panelClasses() {
         return [
-            'absolute left-0 top-full z-30 mt-2',
+            this.panelPlacement === 'top'
+                ? 'absolute bottom-full left-0 z-30 mb-2'
+                : 'absolute left-0 top-full z-30 mt-2',
             this.panelClassName
         ];
     }
@@ -2135,14 +2138,47 @@ class PdmDatePickerComponent {
             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();
+        }
+        else {
+            this.panelPlacement = 'bottom';
+        }
         this.cdr.markForCheck();
     }
+    schedulePanelPlacementUpdate() {
+        setTimeout(() => this.updatePanelPlacement());
+    }
+    updatePanelPlacement() {
+        if (!this._open) {
+            return;
+        }
+        const triggerEl = this.triggerRef?.nativeElement;
+        const panelEl = this.panelRef?.nativeElement;
+        if (!triggerEl || !panelEl || typeof window === 'undefined') {
+            return;
+        }
+        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();
+        }
+    }
     formatDate(date) {
         try {
             return format(date, this.format || 'MMM d, yyyy');
@@ -2162,11 +2198,17 @@ class PdmDatePickerComponent {
     }
 }
 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)" } }, 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      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\" [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.ɵ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 });
 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      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\" [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: { id: [{
+            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: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panelEl']
+            }], id: [{
                 type: Input
             }], variant: [{
                 type: Input
@@ -2230,6 +2272,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
+            }], onViewportChange: [{
+                type: HostListener,
+                args: ['window:resize']
+            }, {
+                type: HostListener,
+                args: ['window:scroll']
             }] } });
 
 class PdmDialogComponent {
@@ -3140,8 +3188,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmSelectComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
+        this.cdr = cdr;
         this.id = '';
         this.value = '';
         this.options = [];
@@ -3150,6 +3199,8 @@ class PdmSelectComponent {
         this.className = '';
         this.placeholder = 'Select an option';
         this.open = false;
+        this.panelPlacement = 'bottom';
+        this.panelMaxHeightPx = null;
         this.valueChange = new EventEmitter();
     }
     get selectedOption() {
@@ -3158,10 +3209,22 @@ class PdmSelectComponent {
     get selectedLabel() {
         return this.selectedOption?.label || this.placeholder;
     }
+    get panelClasses() {
+        return [
+            'absolute left-0 z-50 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
+            this.panelPlacement === 'top' ? 'bottom-[calc(100%+4px)]' : 'top-[calc(100%+4px)]'
+        ];
+    }
     toggle() {
         if (this.disabled)
             return;
         this.open = !this.open;
+        if (this.open) {
+            this.schedulePanelPlacementUpdate();
+            return;
+        }
+        this.panelPlacement = 'bottom';
+        this.panelMaxHeightPx = null;
     }
     onChange(event) {
         this.valueChange.emit(event.target.value);
@@ -3182,13 +3245,39 @@ class PdmSelectComponent {
     onEscape() {
         this.open = false;
     }
+    onViewportChange() {
+        this.updatePanelPlacement();
+    }
+    schedulePanelPlacementUpdate() {
+        setTimeout(() => this.updatePanelPlacement());
+    }
+    updatePanelPlacement() {
+        if (!this.open)
+            return;
+        const triggerEl = this.triggerRef?.nativeElement;
+        const panelEl = this.panelRef?.nativeElement;
+        if (!triggerEl || !panelEl || typeof window === 'undefined') {
+            return;
+        }
+        const viewportHeight = window.innerHeight;
+        const gap = 4;
+        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';
+        const availableHeight = nextPlacement === 'top' ? spaceAbove : spaceBelow;
+        this.panelPlacement = nextPlacement;
+        this.panelMaxHeightPx = Math.max(120, Math.min(384, Math.floor(availableHeight)));
+        this.cdr.markForCheck();
+    }
 }
-PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }], 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:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\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  <div\n    *ngIf=\"open\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <button\n      *ngFor=\"let option of options\"\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\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 options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\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"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], 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:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()", "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]=\"['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  <div\n    *ngIf=\"open\"\n    #panelEl\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    [ngClass]=\"panelClasses\"\n    [style.max-height.px]=\"panelMaxHeightPx\"\n  >\n    <button\n      *ngFor=\"let option of options\"\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\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 options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\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"] }, { 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    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  <div\n    *ngIf=\"open\"\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"absolute left-0 top-[calc(100%+4px)] z-50 max-h-96 w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <button\n      *ngFor=\"let option of options\"\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\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 options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { id: [{
+            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  <div\n    *ngIf=\"open\"\n    #panelEl\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    [ngClass]=\"panelClasses\"\n    [style.max-height.px]=\"panelMaxHeightPx\"\n  >\n    <button\n      *ngFor=\"let option of options\"\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\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 options\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -3204,12 +3293,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], valueChange: [{
                 type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panelEl']
             }], onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
             }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
+            }], onViewportChange: [{
+                type: HostListener,
+                args: ['window:resize']
+            }, {
+                type: HostListener,
+                args: ['window:scroll']
             }] } });
 
 class PdmPaginationComponent {
@@ -3280,14 +3381,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmPopoverComponent {
-    constructor(elementRef) {
+    constructor(elementRef, cdr) {
         this.elementRef = elementRef;
-        this.open = false;
+        this.cdr = cdr;
+        this._open = false;
         this.triggerText = 'Open';
         this.className = '';
         this.panelClassName = '';
         this.showTrigger = true;
         this.openChange = new EventEmitter();
+        this.panelPlacement = 'bottom';
+    }
+    set open(value) {
+        this._open = !!value;
+        if (this._open) {
+            this.schedulePanelPlacementUpdate();
+        }
+        else {
+            this.panelPlacement = 'bottom';
+        }
+        this.cdr.markForCheck();
+    }
+    get open() {
+        return this._open;
+    }
+    get panelClasses() {
+        return [
+            this.panelPlacement === 'top'
+                ? 'absolute bottom-full left-0 z-30 mb-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md'
+                : 'absolute left-0 top-full z-30 mt-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',
+            this.panelClassName
+        ];
     }
     toggle() {
         this.open = !this.open;
@@ -3308,15 +3432,39 @@ class PdmPopoverComponent {
             this.openChange.emit(false);
         }
     }
+    onViewportChange() {
+        this.updatePanelPlacement();
+    }
+    schedulePanelPlacementUpdate() {
+        setTimeout(() => this.updatePanelPlacement());
+    }
+    updatePanelPlacement() {
+        if (!this.open)
+            return;
+        const anchorEl = this.triggerRef?.nativeElement || this.anchorRef?.nativeElement;
+        const panelEl = this.panelRef?.nativeElement;
+        if (!anchorEl || !panelEl || typeof window === 'undefined') {
+            return;
+        }
+        const viewportHeight = window.innerHeight;
+        const gap = 8;
+        const anchorRect = anchorEl.getBoundingClientRect();
+        const panelHeight = panelEl.offsetHeight;
+        const spaceBelow = Math.max(0, viewportHeight - anchorRect.bottom - gap);
+        const spaceAbove = Math.max(0, anchorRect.top - gap);
+        const nextPlacement = spaceBelow < panelHeight && spaceAbove > spaceBelow ? 'top' : 'bottom';
+        if (this.panelPlacement !== nextPlacement) {
+            this.panelPlacement = nextPlacement;
+            this.cdr.markForCheck();
+        }
+    }
 }
-PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { open: "open", triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div *ngIf=\"open || !showTrigger\" [ngClass]=\"['absolute left-0 top-full z-30 mt-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md', panelClassName]\">\n    <ng-content></ng-content>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchorEl"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panelEl"], descendants: true }], ngImport: i0, template: "<div #anchorEl class=\"relative inline-block\" [ngClass]=\"className\">\n  <button #triggerEl *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div #panelEl *ngIf=\"open || !showTrigger\" [ngClass]=\"panelClasses\">\n    <ng-content></ng-content>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div *ngIf=\"open || !showTrigger\" [ngClass]=\"['absolute left-0 top-full z-30 mt-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md', panelClassName]\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { open: [{
-                type: Input
-            }], triggerText: [{
+            args: [{ selector: 'pdm-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div #anchorEl class=\"relative inline-block\" [ngClass]=\"className\">\n  <button #triggerEl *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div #panelEl *ngIf=\"open || !showTrigger\" [ngClass]=\"panelClasses\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -3326,12 +3474,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], openChange: [{
                 type: Output
+            }], anchorRef: [{
+                type: ViewChild,
+                args: ['anchorEl']
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ['triggerEl']
+            }], panelRef: [{
+                type: ViewChild,
+                args: ['panelEl']
+            }], open: [{
+                type: Input
             }], onEsc: [{
                 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 PdmProgressComponent {