pdm-ui-kit 0.2.0 → 0.3.0

package/fesm2020/pdm-ui-kit.mjs

@@ -2,11 +2,11 @@ import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChild, ViewChildren, ElementRef, PLATFORM_ID, Directive, Inject, ContentChildren, NgModule } from '@angular/core';
-import * as i1$2 from '@angular/cdk/overlay';
+import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
-import { icons } from 'lucide';
-import * as i1$1 from '@angular/platform-browser';
 import { TemplatePortal } from '@angular/cdk/portal';
+import { icons } from 'lucide';
+import * as i1$2 from '@angular/platform-browser';
 import { format } from 'date-fns';
 
 class PdmAccordionComponent {
@@ -314,198 +314,224 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+const ROOT_LAYOUT = {
+    horizontal: "flex flex-col sm:flex-row sm:items-center sm:flex-wrap",
+    vertical: "flex flex-col items-stretch",
+};
+const ATTACHMENT_EDGE_CLASSES = {
+    horizontal: [
+        "[&>*]:rounded-none",
+        "[&>*:first-child]:rounded-l-md",
+        "[&>*:last-child]:rounded-r-md",
+        "[&>*:not(:first-child)]:border-l-0",
+        "[&>*:not(:first-child)]:-ml-px",
+    ],
+    vertical: [
+        "[&>*]:rounded-none",
+        "[&>*:first-child]:rounded-t-md",
+        "[&>*:last-child]:rounded-b-md",
+        "[&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:first-child)]:-mt-px",
+    ],
+};
+const ATTACHMENT_CONTROL_CLASSES = {
+    horizontal: [
+        "[&>pdm-button]:flex",
+        "[&>pdm-button>button]:h-9",
+        "[&>pdm-button>button]:!rounded-none",
+        "[&>pdm-button>button]:shadow-none",
+        "[&>pdm-button:first-child>button]:!rounded-l-md",
+        "[&>pdm-button:last-child>button]:!rounded-r-md",
+        "[&>pdm-input]:flex-1",
+        "[&>pdm-input>div]:w-full",
+        "[&>pdm-input>div]:!rounded-none",
+        "[&>pdm-input>div]:shadow-none",
+        "[&>pdm-input>div>input]:!rounded-none",
+        "[&>pdm-input>div>input]:bg-background",
+        "[&>pdm-input>div>input]:shadow-none",
+        "[&>pdm-input:first-child>div]:!rounded-l-md",
+        "[&>pdm-input:last-child>div]:!rounded-r-md",
+        "[&>pdm-input:first-child>div>input]:!rounded-l-md",
+        "[&>pdm-input:last-child>div>input]:!rounded-r-md",
+        "[&>pdm-input-group>div]:!rounded-none",
+        "[&>pdm-input-group>div]:shadow-none",
+        "[&>pdm-input-group:first-child>div]:!rounded-l-md",
+        "[&>pdm-input-group:last-child>div]:!rounded-r-md",
+        "[&>pdm-select>select]:!rounded-none",
+        "[&>pdm-select>select]:shadow-none",
+        "[&>pdm-select>div>button]:!rounded-none",
+        "[&>pdm-select>div>button]:shadow-none",
+        "[&>pdm-select:first-child>select]:!rounded-l-md",
+        "[&>pdm-select:last-child>select]:!rounded-r-md",
+        "[&>pdm-select:first-child>div>button]:!rounded-l-md",
+        "[&>pdm-select:last-child>div>button]:!rounded-r-md",
+        "[&>pdm-select:not(:first-child)>div>button]:!rounded-l-none",
+        "[&>pdm-select:not(:last-child)>div>button]:!rounded-r-none",
+        "[&>pdm-tooltip>span>*]:rounded-none",
+        "[&>pdm-tooltip>span>*]:shadow-none",
+        "[&>pdm-tooltip:not(:first-child)>span>*]:border-l-0",
+        "[&>pdm-tooltip>span>button]:!rounded-none",
+        "[&>pdm-tooltip>span>button]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>button]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>button]:!rounded-r-md",
+        "[&>pdm-tooltip>span>input]:!rounded-none",
+        "[&>pdm-tooltip>span>input]:bg-background",
+        "[&>pdm-tooltip>span>input]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>input]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>input]:!rounded-r-md",
+        "[&>pdm-tooltip>span>select]:!rounded-none",
+        "[&>pdm-tooltip>span>select]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>select]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>select]:!rounded-r-md",
+        "[&>pdm-tooltip>span>pdm-button>button]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-button>button]:shadow-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>span>pdm-input>div]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input>div]:shadow-none",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:bg-background",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-input>div]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input>div]:!rounded-r-md",
+        "[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input>div>input]:!rounded-r-md",
+        "[&>pdm-tooltip>span>pdm-input-group>div]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input-group>div]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-input-group>div]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input-group>div]:!rounded-r-md",
+        "[&>pdm-tooltip>span>pdm-select>select]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-select>select]:shadow-none",
+        "[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-r-md",
+        "[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-l-md",
+        "[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-r-md",
+        "[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-l-none",
+        "[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-r-none",
+    ],
+    vertical: [
+        "[&>*]:rounded-none",
+        "[&>*:first-child]:rounded-t-md",
+        "[&>*:last-child]:rounded-b-md",
+        "[&>*:not(:first-child)]:border-t-0",
+        "[&>*:not(:first-child)]:-mt-px",
+        "[&>pdm-button]:flex",
+        "[&>pdm-button>button]:h-9",
+        "[&>pdm-button>button]:!rounded-none",
+        "[&>pdm-button>button]:shadow-none",
+        "[&>pdm-button:first-child>button]:!rounded-t-md",
+        "[&>pdm-button:last-child>button]:!rounded-b-md",
+        "[&>pdm-input>div]:!rounded-none",
+        "[&>pdm-input>div]:shadow-none",
+        "[&>pdm-input>div>input]:!rounded-none",
+        "[&>pdm-input>div>input]:bg-background",
+        "[&>pdm-input>div>input]:shadow-none",
+        "[&>pdm-input:first-child>div]:!rounded-t-md",
+        "[&>pdm-input:last-child>div]:!rounded-b-md",
+        "[&>pdm-input:first-child>div>input]:!rounded-t-md",
+        "[&>pdm-input:last-child>div>input]:!rounded-b-md",
+        "[&>pdm-input-group>div]:!rounded-none",
+        "[&>pdm-input-group>div]:shadow-none",
+        "[&>pdm-input-group:first-child>div]:!rounded-t-md",
+        "[&>pdm-input-group:last-child>div]:!rounded-b-md",
+        "[&>pdm-select>select]:!rounded-none",
+        "[&>pdm-select>select]:shadow-none",
+        "[&>pdm-select>div>button]:!rounded-none",
+        "[&>pdm-select>div>button]:shadow-none",
+        "[&>pdm-select:first-child>select]:!rounded-t-md",
+        "[&>pdm-select:last-child>select]:!rounded-b-md",
+        "[&>pdm-select:first-child>div>button]:!rounded-t-md",
+        "[&>pdm-select:last-child>div>button]:!rounded-b-md",
+        "[&>pdm-select:not(:first-child)>div>button]:!rounded-t-none",
+        "[&>pdm-select:not(:last-child)>div>button]:!rounded-b-none",
+        "[&>pdm-tooltip>span>*]:rounded-none",
+        "[&>pdm-tooltip>span>*]:shadow-none",
+        "[&>pdm-tooltip:not(:first-child)>span>*]:border-t-0",
+        "[&>pdm-tooltip>span>button]:!rounded-none",
+        "[&>pdm-tooltip>span>button]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>button]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>button]:!rounded-b-md",
+        "[&>pdm-tooltip>span>input]:!rounded-none",
+        "[&>pdm-tooltip>span>input]:bg-background",
+        "[&>pdm-tooltip>span>input]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>input]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>input]:!rounded-b-md",
+        "[&>pdm-tooltip>span>select]:!rounded-none",
+        "[&>pdm-tooltip>span>select]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>select]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>select]:!rounded-b-md",
+        "[&>pdm-tooltip>span>pdm-button>button]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-button>button]:shadow-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>span>pdm-input>div]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input>div]:shadow-none",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:bg-background",
+        "[&>pdm-tooltip>span>pdm-input>div>input]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-input>div]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input>div]:!rounded-b-md",
+        "[&>pdm-tooltip:first-child>span>pdm-input>div>input]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input>div>input]:!rounded-b-md",
+        "[&>pdm-tooltip>span>pdm-input-group>div]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-input-group>div]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-input-group>div]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>pdm-input-group>div]:!rounded-b-md",
+        "[&>pdm-tooltip>span>pdm-select>select]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-select>select]:shadow-none",
+        "[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none",
+        "[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none",
+        "[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-b-md",
+        "[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-t-md",
+        "[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-b-md",
+        "[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-t-none",
+        "[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-b-none",
+    ],
+};
+const FOCUS_STACKING_CLASS = "*:focus-visible:relative *:focus-visible:z-10";
+const SEPARATOR_CLASSES = "overflow-hidden rounded-md border border-border bg-secondary shadow-sm";
 class PdmButtonGroupComponent {
     constructor() {
-        this.variant = 'default';
+        this.variant = "default";
         this.separated = true;
-        this.className = '';
+        this.className = "";
+    }
+    get axis() {
+        return this.orientation ?? this.direction ?? "horizontal";
+    }
+    get isVertical() {
+        return this.variant === "orientation" || this.axis === "vertical";
+    }
+    get shouldAttach() {
+        return !this.separated && this.variant !== "default";
+    }
+    get ariaOrientation() {
+        return this.isVertical ? "vertical" : "horizontal";
     }
     get rootClasses() {
-        const effectiveOrientation = this.orientation ?? this.direction ?? 'horizontal';
-        const isVertical = this.variant === 'orientation' || effectiveOrientation === 'vertical';
-        const isGroup = this.variant === 'group';
-        const isAttached = !this.separated && this.variant !== 'default';
-        const isSeparator = this.variant === 'separator';
-        const attachedClasses = isAttached && !isGroup
-            ? isVertical
-                ? [
-                    '[&>*]:rounded-none',
-                    '[&>*:first-child]:rounded-t-md',
-                    '[&>*:last-child]:rounded-b-md',
-                    '[&>*:not(:first-child)]:border-t-0',
-                    '[&>*:not(:first-child)]:-mt-px'
-                ].join(' ')
-                : [
-                    '[&>*]:rounded-none',
-                    '[&>*:first-child]:rounded-l-md',
-                    '[&>*:last-child]:rounded-r-md',
-                    '[&>*:not(:first-child)]:border-l-0',
-                    '[&>*:not(:first-child)]:-ml-px'
-                ].join(' ')
-            : '';
-        const groupHorizontalClasses = isGroup && !isVertical && !this.separated
-            ? [
-                '[&>*]:rounded-none',
-                '[&>*:first-child]:rounded-l-md',
-                '[&>*:last-child]:rounded-r-md',
-                '[&>*:not(:first-child)]:-ml-px',
-                '[&>*:not(:first-child)]:border-l-0',
-                '[&>pdm-button]:flex',
-                '[&>pdm-button>button]:h-9',
-                '[&>pdm-input]:flex-1',
-                '[&>pdm-input>div]:w-full',
-                '[&>pdm-select>select]:!rounded-none',
-                '[&>pdm-select:first-child>select]:!rounded-l-md',
-                '[&>pdm-select:last-child>select]:!rounded-r-md',
-                '[&>pdm-select>select]:shadow-none',
-                '[&>pdm-select>div>button]:!rounded-none',
-                '[&>pdm-select:first-child>div>button]:!rounded-l-md',
-                '[&>pdm-select:last-child>div>button]:!rounded-r-md',
-                '[&>pdm-select:not(:first-child)>div>button]:!rounded-l-none',
-                '[&>pdm-select:not(:last-child)>div>button]:!rounded-r-none',
-                '[&>pdm-select>div>button]:shadow-none',
-                '[&>pdm-button>button]:!rounded-none',
-                '[&>pdm-button:first-child>button]:!rounded-l-md',
-                '[&>pdm-button:last-child>button]:!rounded-r-md',
-                '[&>pdm-input>div>input]:!rounded-none',
-                '[&>pdm-input:first-child>div>input]:!rounded-l-md',
-                '[&>pdm-input:last-child>div>input]:!rounded-r-md',
-                '[&>pdm-input-group>div]:!rounded-none',
-                '[&>pdm-input-group:first-child>div]:!rounded-l-md',
-                '[&>pdm-input-group:last-child>div]:!rounded-r-md',
-                '[&>pdm-input>div>input]:bg-background',
-                '[&>pdm-input>div>input]:shadow-none',
-                '[&>pdm-button>button]:rounded-l-none',
-                '[&>pdm-button>button]:shadow-none',
-                '[&>pdm-tooltip>span>*]:rounded-none',
-                '[&>pdm-tooltip:first-child>span>*]:rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>*]:rounded-r-md',
-                '[&>pdm-tooltip:not(:first-child)>span>*]:border-l-0',
-                '[&>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>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>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',
-                '[&>pdm-tooltip:last-child>span>pdm-input>div>input]:!rounded-r-md',
-                '[&>pdm-tooltip>span>pdm-input>div>input]:shadow-none',
-                '[&>pdm-tooltip>span>input]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>input]:!rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>input]:!rounded-r-md',
-                '[&>pdm-tooltip>span>input]:shadow-none',
-                '[&>pdm-tooltip>span>pdm-input-group>div]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-input-group>div]:!rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>pdm-input-group>div]:!rounded-r-md',
-                '[&>pdm-tooltip>span>pdm-select>select]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-r-md',
-                '[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
-                '[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-r-md',
-                '[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-l-none',
-                '[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-r-none',
-                '[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
-                '[&>pdm-tooltip>span>select]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>select]:!rounded-l-md',
-                '[&>pdm-tooltip:last-child>span>select]:!rounded-r-md',
-                '[&>pdm-tooltip>span>select]:shadow-none'
-            ].join(' ')
-            : '';
-        const groupVerticalClasses = isGroup && isVertical && !this.separated
-            ? [
-                '[&>*]:rounded-none',
-                '[&>*:first-child]:rounded-t-md',
-                '[&>*:last-child]:rounded-b-md',
-                '[&>*:not(:first-child)]:-mt-px',
-                '[&>*:not(:first-child)]:border-t-0',
-                '[&>pdm-button]:flex',
-                '[&>pdm-button>button]:h-9',
-                '[&>pdm-button>button]:!rounded-none',
-                '[&>pdm-button:first-child>button]:!rounded-t-md',
-                '[&>pdm-button:last-child>button]:!rounded-b-md',
-                '[&>pdm-input>div>input]:!rounded-none',
-                '[&>pdm-input:first-child>div>input]:!rounded-t-md',
-                '[&>pdm-input:last-child>div>input]:!rounded-b-md',
-                '[&>pdm-input-group>div]:!rounded-none',
-                '[&>pdm-input-group:first-child>div]:!rounded-t-md',
-                '[&>pdm-input-group:last-child>div]:!rounded-b-md',
-                '[&>pdm-select>select]:!rounded-none',
-                '[&>pdm-select:first-child>select]:!rounded-t-md',
-                '[&>pdm-select:last-child>select]:!rounded-b-md',
-                '[&>pdm-select>select]:shadow-none',
-                '[&>pdm-select>div>button]:!rounded-none',
-                '[&>pdm-select:first-child>div>button]:!rounded-t-md',
-                '[&>pdm-select:last-child>div>button]:!rounded-b-md',
-                '[&>pdm-select:not(:first-child)>div>button]:!rounded-t-none',
-                '[&>pdm-select:not(:last-child)>div>button]:!rounded-b-none',
-                '[&>pdm-select>div>button]:shadow-none',
-                '[&>pdm-input>div>input]:bg-background',
-                '[&>pdm-input>div>input]:shadow-none',
-                '[&>pdm-button>button]:shadow-none',
-                '[&>pdm-tooltip>span>*]:rounded-none',
-                '[&>pdm-tooltip:first-child>span>*]:rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>*]:rounded-b-md',
-                '[&>pdm-tooltip:not(:first-child)>span>*]:border-t-0',
-                '[&>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>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>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',
-                '[&>pdm-tooltip:last-child>span>pdm-input>div>input]:!rounded-b-md',
-                '[&>pdm-tooltip>span>pdm-input>div>input]:shadow-none',
-                '[&>pdm-tooltip>span>input]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>input]:!rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>input]:!rounded-b-md',
-                '[&>pdm-tooltip>span>input]:shadow-none',
-                '[&>pdm-tooltip>span>pdm-input-group>div]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-input-group>div]:!rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>pdm-input-group>div]:!rounded-b-md',
-                '[&>pdm-tooltip>span>pdm-select>select]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-select>select]:!rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>pdm-select>select]:!rounded-b-md',
-                '[&>pdm-tooltip>span>pdm-select>select]:shadow-none',
-                '[&>pdm-tooltip>span>pdm-select>div>button]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>pdm-select>div>button]:!rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>pdm-select>div>button]:!rounded-b-md',
-                '[&>pdm-tooltip:not(:first-child)>span>pdm-select>div>button]:!rounded-t-none',
-                '[&>pdm-tooltip:not(:last-child)>span>pdm-select>div>button]:!rounded-b-none',
-                '[&>pdm-tooltip>span>pdm-select>div>button]:shadow-none',
-                '[&>pdm-tooltip>span>select]:!rounded-none',
-                '[&>pdm-tooltip:first-child>span>select]:!rounded-t-md',
-                '[&>pdm-tooltip:last-child>span>select]:!rounded-b-md',
-                '[&>pdm-tooltip>span>select]:shadow-none'
-            ].join(' ')
-            : '';
         return [
-            'inline-flex w-fit',
-            isVertical ? 'flex-col items-stretch' : 'items-center',
-            this.variant === 'default' || this.separated ? 'gap-2' : 'gap-0',
-            isGroup ? '*:focus-visible:relative *:focus-visible:z-10' : '',
-            attachedClasses,
-            groupHorizontalClasses,
-            groupVerticalClasses,
-            isSeparator
-                ? 'overflow-hidden rounded-md border border-border bg-secondary shadow-sm'
-                : '',
-            this.className
+            ROOT_LAYOUT[this.isVertical ? "vertical" : "horizontal"],
+            this.variant === "default" || this.separated ? "gap-2" : "gap-0",
+            this.shouldAttach
+                ? ATTACHMENT_EDGE_CLASSES[this.isVertical ? "vertical" : "horizontal"].join(" ")
+                : "",
+            this.shouldAttach
+                ? ATTACHMENT_CONTROL_CLASSES[this.isVertical ? "vertical" : "horizontal"].join(" ")
+                : "",
+            this.shouldAttach ? FOCUS_STACKING_CLASS : "",
+            this.variant === "separator" ? SEPARATOR_CLASSES : "",
+            this.className,
         ];
     }
 }
 PdmButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", orientation: "orientation", direction: "direction", separated: "separated", className: "className" }, ngImport: i0, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || orientation === 'vertical' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonGroupComponent, selector: "pdm-button-group", inputs: { variant: "variant", orientation: "orientation", direction: "direction", separated: "separated", className: "className" }, ngImport: i0, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"ariaOrientation\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"variant === 'orientation' || orientation === 'vertical' || direction === 'vertical' ? 'vertical' : 'horizontal'\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n" }]
+            args: [{ selector: "pdm-button-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"group\"\n  [attr.aria-orientation]=\"ariaOrientation\"\n  [ngClass]=\"rootClasses\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], orientation: [{
@@ -1535,35 +1561,212 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Z-Index helper for overlay components.
+ *
+ * CRITICAL: Consumer custom panelClass MUST NOT replace the base z-index.
+ * This helper ensures z-index is preserved when merging custom classes.
+ */
+/**
+ * Base z-index class for overlays - MUST be included in any overlay panel.
+ * This ensures overlays appear above modals (z-50) and drawers (z-40).
+ */
+const OVERLAY_BASE_Z_INDEX = "z-[70]";
+/**
+ * Merge consumer's panelClass with our base z-index.
+ * Consumer classes are APPENDED, not replacing our z-index guarantee.
+ *
+ * @param baseZIndex - Base z-index class to enforce (default: OVERLAY_BASE_Z_INDEX)
+ * @param consumerClasses - Optional additional classes from consumer
+ * @returns Array of classes safe for CDK Overlay panelClass
+ */
+function mergeOverlayPanelClass(baseZIndex = OVERLAY_BASE_Z_INDEX, consumerClasses) {
+    const baseClasses = baseZIndex.split(" ");
+    if (!consumerClasses) {
+        return baseClasses;
+    }
+    const consumerClassArray = Array.isArray(consumerClasses)
+        ? consumerClasses
+        : consumerClasses.split(" ");
+    // Consumer classes are appended AFTER base classes
+    // This ensures z-index from baseClasses is preserved first
+    return [...baseClasses, ...consumerClassArray];
+}
+/**
+ * Create OverlayConfig with guaranteed z-index.
+ * Use this instead of direct OverlayConfig to ensure z-index enforcement.
+ *
+ * @param baseConfig - Base overlay configuration
+ * @param consumerPanelClass - Optional consumer panelClass to merge
+ * @returns OverlayConfig with z-index guarantee
+ */
+function createZIndexEnforcedOverlay(baseConfig, consumerPanelClass) {
+    const mergedClasses = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, consumerPanelClass);
+    const existingPanelClass = baseConfig.panelClass;
+    if (existingPanelClass) {
+        const existingArray = Array.isArray(existingPanelClass)
+            ? existingPanelClass
+            : existingPanelClass.split(" ");
+        return {
+            ...baseConfig,
+            panelClass: [...mergedClasses, ...existingArray],
+        };
+    }
+    return {
+        ...baseConfig,
+        panelClass: mergedClasses,
+    };
+}
+/**
+ * Helper to extract z-index from a class string for debugging.
+ */
+function extractZIndex(classes) {
+    const classArray = Array.isArray(classes) ? classes : classes.split(" ");
+    for (const cls of classArray) {
+        if (cls.startsWith("z-") || cls.startsWith("z-[")) {
+            return cls;
+        }
+    }
+    return null;
+}
+
 class PdmComboboxComponent {
-    constructor() {
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
         this.open = false;
-        this.placeholder = 'Select framework...';
-        this.searchPlaceholder = 'Search framework';
-        this.className = '';
-        this.options = ['Next.js', 'SvelteKit', 'Nuxt.js', 'Remix', 'Astro'];
-        this.value = '';
+        this.placeholder = "Select framework...";
+        this.searchPlaceholder = "Search framework";
+        this.className = "";
+        this.options = [
+            "Next.js",
+            "SvelteKit",
+            "Nuxt.js",
+            "Remix",
+            "Astro",
+        ];
+        this.value = "";
         this.width = 200;
+        this.panelClassName = "";
         this.openChange = new EventEmitter();
         this.valueChange = new EventEmitter();
+        this.overlayRef = null;
+        this.outsideClickSub = null;
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
     }
     get selectedLabel() {
         return this.value || this.placeholder;
     }
     toggle() {
-        this.openChange.emit(!this.open);
+        if (this.open) {
+            this.close();
+        }
+        else {
+            this.openPanel();
+        }
     }
     select(option) {
         this.valueChange.emit(option);
+        this.value = option;
+        this.close();
+    }
+    onEscape() {
+        if (this.open) {
+            this.close();
+        }
+    }
+    openPanel() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.triggerRef?.nativeElement;
+        if (!triggerEl)
+            return;
+        this.open = true;
+        this.openChange.emit(true);
+        this.cdr.markForCheck();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
+            this.close();
+        });
+        this.cdr.markForCheck();
+    }
+    close() {
+        if (!this.overlayRef)
+            return;
+        this.open = false;
         this.openChange.emit(false);
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    getPositionConfigs() {
+        return [
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 4,
+            },
+            {
+                originX: "start",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "bottom",
+                offsetY: -4,
+            },
+            {
+                originX: "end",
+                originY: "bottom",
+                overlayX: "end",
+                overlayY: "top",
+                offsetY: 4,
+            },
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "end",
+                overlayY: "top",
+                offsetY: 4,
+            },
+        ];
     }
 }
-PdmComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\">{{ selectedLabel }}</span>\n    <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <div class=\"h-9 flex-1 py-2 text-sm text-muted-foreground\">{{ searchPlaceholder }}</div>\n    </div>\n\n    <div class=\"p-1\">\n      <button\n        *ngFor=\"let option of options\"\n        type=\"button\"\n        class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n        [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n        (click)=\"select(option)\"\n      >\n        <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n        <svg *ngIf=\"option === value\" viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      </button>\n    </div>\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 });
+PdmComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width", panelClassName: "panelClassName" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, 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]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\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: PdmComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-combobox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\">{{ selectedLabel }}</span>\n    <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </button>\n\n  <div\n    *ngIf=\"open\"\n    class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <div class=\"h-9 flex-1 py-2 text-sm text-muted-foreground\">{{ searchPlaceholder }}</div>\n    </div>\n\n    <div class=\"p-1\">\n      <button\n        *ngFor=\"let option of options\"\n        type=\"button\"\n        class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n        [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n        (click)=\"select(option)\"\n      >\n        <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n        <svg *ngIf=\"option === value\" viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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      </button>\n    </div>\n  </div>\n</div>\n" }]
-        }], propDecorators: { open: [{
+            args: [{ selector: "pdm-combobox", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { open: [{
                 type: Input
             }], placeholder: [{
                 type: Input
@@ -1577,10 +1780,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], width: [{
                 type: Input
+            }], panelClassName: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], valueChange: [{
                 type: Output
+            }], triggerRef: [{
+                type: ViewChild,
+                args: ["triggerEl"]
+            }], panelTemplateRef: [{
+                type: ViewChild,
+                args: ["panelTemplate"]
+            }], onEscape: [{
+                type: HostListener,
+                args: ["document:keydown.escape"]
             }] } });
 
 const FALLBACK_NODE = [['circle', { cx: '12', cy: '12', r: '9' }]];
@@ -1699,12 +1913,12 @@ class PdmIconComponent {
             .replace(/>/g, '&gt;');
     }
 }
-PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
 PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\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: PdmIconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { name: [{
+        }], ctorParameters: function () { return [{ type: i1$2.DomSanitizer }]; }, propDecorators: { name: [{
                 type: Input
             }], library: [{
                 type: Input
@@ -1794,72 +2008,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmContextMenuComponent {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
+    constructor(overlay, viewContainerRef, _elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this._elementRef = _elementRef;
+        this.cdr = cdr;
         this.items = [
-            { type: 'item', label: 'Back', value: 'back', inset: true, shortcut: '⌘[' },
-            { type: 'item', label: 'Forward', value: 'forward', inset: true, shortcut: '⌘]', disabled: true },
-            { type: 'item', label: 'Reload', value: 'reload', inset: true, shortcut: '⌘R' },
-            { type: 'item', label: 'More Tools', value: 'more-tools', inset: true, showChevron: true },
-            { type: 'separator' },
-            { type: 'item', label: 'Show Bookmarks Bar', value: 'show-bookmarks', checked: true },
-            { type: 'item', label: 'Show Full URLs', value: 'show-urls', inset: true },
-            { type: 'separator' },
-            { type: 'label', label: 'People' },
-            { type: 'separator' },
-            { type: 'item', label: 'Pedro Duarte', value: 'pedro', selectedDot: true },
-            { type: 'item', label: 'Colm Tuite', value: 'colm', inset: true }
+            { type: "item", label: "Back", value: "back", inset: true, shortcut: "⌘[" },
+            {
+                type: "item",
+                label: "Forward",
+                value: "forward",
+                inset: true,
+                shortcut: "⌘]",
+                disabled: true,
+            },
+            {
+                type: "item",
+                label: "Reload",
+                value: "reload",
+                inset: true,
+                shortcut: "⌘R",
+            },
+            {
+                type: "item",
+                label: "More Tools",
+                value: "more-tools",
+                inset: true,
+                showChevron: true,
+            },
+            { type: "separator" },
+            {
+                type: "item",
+                label: "Show Bookmarks Bar",
+                value: "show-bookmarks",
+                checked: true,
+            },
+            { type: "item", label: "Show Full URLs", value: "show-urls", inset: true },
+            { type: "separator" },
+            { type: "label", label: "People" },
+            { type: "separator" },
+            { type: "item", label: "Pedro Duarte", value: "pedro", selectedDot: true },
+            { type: "item", label: "Colm Tuite", value: "colm", inset: true },
         ];
-        this.className = '';
-        this.triggerLabel = 'Right click here';
+        this.className = "";
+        this.triggerLabel = "Right click here";
         this.width = 300;
         this.height = 150;
+        this.panelClassName = "";
         this.itemSelect = new EventEmitter();
         this.open = false;
         this.x = 0;
         this.y = 0;
+        this.overlayRef = null;
+        this.outsideClickSub = null;
     }
-    ngOnInit() {
-        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
-        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
-    }
+    ngOnInit() { }
     ngOnDestroy() {
-        if (this.boundPointerDown) {
-            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
-        }
+        this.destroyOverlay();
     }
     onContextMenu(event) {
         event.preventDefault();
+        event.stopPropagation();
         this.x = event.clientX;
         this.y = event.clientY;
         this.open = true;
+        this.cdr.markForCheck();
+        this.createOverlay();
     }
     select(item) {
-        if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value)
+        if (item.disabled ||
+            item.type === "separator" ||
+            item.type === "label" ||
+            !item.value)
             return;
         this.itemSelect.emit(item.value);
         this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
     }
-    onEsc() {
-        if (this.open) {
-            this.open = false;
+    onDocumentClick(event) {
+        if (this.open && event.type === "click") {
+            // Don't close on click inside the menu
+            if (this.overlayRef &&
+                this.overlayRef.overlayElement.contains(event.target)) {
+                return;
+            }
+            this.close();
         }
     }
-    onDocumentPointerDown(event) {
-        if (!this.open)
-            return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
-            this.open = false;
+    createOverlay() {
+        this.destroyOverlay();
+        // Create global position strategy at cursor position
+        const positionStrategy = this.overlay
+            .position()
+            .global()
+            .left(`${this.x}px`)
+            .top(`${this.y}px`);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.menuTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
+            this.close();
+        });
+    }
+    close() {
+        this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
+        }
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
     }
 }
-PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-[70] min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm 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          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\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 });
+PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentClick()", "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm 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            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\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: PdmContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-[70] min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm 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          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\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.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { items: [{
+            args: [{ selector: "pdm-context-menu", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm 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            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -1869,11 +2151,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], height: [{
                 type: Input
+            }], panelClassName: [{
+                type: Input
             }], itemSelect: [{
                 type: Output
-            }], onEsc: [{
+            }], menuTemplateRef: [{
+                type: ViewChild,
+                args: ["menuTemplate"]
+            }], onDocumentClick: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:keydown.escape"]
+            }, {
+                type: HostListener,
+                args: ["document:click"]
             }] } });
 
 /**
@@ -2045,7 +2335,7 @@ class PdmTableComponent {
          * - data: tabla con bordes y espaciado para data
          * - interactive: tabla con hover, sticky header y estilos interactivos
          */
-        this.variant = 'default';
+        this.variant = "default";
         /**
          * Estrategia responsive para la tabla
          * - scroll: scroll horizontal en mobile (default, más simple)
@@ -2053,11 +2343,11 @@ class PdmTableComponent {
          * - stack: convierte filas en cards en mobile (requiere data-label en celdas)
          * - collapse: oculta columnas menos importantes en mobile
          */
-        this.responsiveStrategy = 'scroll';
+        this.responsiveStrategy = "scroll";
         /**
          * Clases CSS adicionales para el wrapper
          */
-        this.className = '';
+        this.className = "";
         /**
          * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
          * Útil cuando la tabla está dentro de un container con padding
@@ -2065,119 +2355,128 @@ class PdmTableComponent {
         this.fullBleed = false;
     }
     get wrapperClasses() {
-        const baseClasses = ['relative', 'w-full'];
+        const baseClasses = ["relative", "w-full"];
         const strategyClasses = this.getResponsiveStrategyClasses();
         const variantClasses = this.getVariantWrapperClasses();
         // Full bleed: scroll edge-to-edge en mobile
-        if (this.fullBleed && this.responsiveStrategy === 'scroll') {
-            baseClasses.push('-mx-4', 'px-4', 'sm:mx-0', 'sm:px-0');
+        if (this.fullBleed && this.responsiveStrategy === "scroll") {
+            baseClasses.push("-mx-4", "px-4", "sm:mx-0", "sm:px-0");
         }
         return [
             ...baseClasses,
             ...strategyClasses,
             ...variantClasses,
-            this.className
+            this.className,
         ].filter(Boolean);
     }
     get tableClasses() {
-        const baseClasses = ['w-full', 'caption-bottom', 'text-sm'];
+        const baseClasses = ["w-full", "caption-bottom", "text-sm"];
         const variantClasses = this.getVariantTableClasses();
         const cellClasses = this.getCellClasses();
         return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
     }
     getResponsiveStrategyClasses() {
         const strategy = TABLE_RESPONSIVE[this.responsiveStrategy];
-        if (this.responsiveStrategy === 'scroll') {
-            return ['overflow-x-auto'];
+        if (this.responsiveStrategy === "scroll") {
+            return ["overflow-x-auto"];
         }
-        if (this.responsiveStrategy === 'wrap') {
-            return ['overflow-x-auto'];
+        if (this.responsiveStrategy === "wrap") {
+            return ["overflow-x-auto"];
         }
-        if (this.responsiveStrategy === 'stack') {
+        if (this.responsiveStrategy === "stack") {
             // Stack requiere lógica en el template, aquí solo el wrapper
             return [];
         }
-        if (this.responsiveStrategy === 'collapse') {
-            return ['overflow-x-auto'];
+        if (this.responsiveStrategy === "collapse") {
+            return ["overflow-x-auto"];
         }
-        return ['overflow-auto'];
+        return ["overflow-auto"];
     }
     getVariantWrapperClasses() {
-        if (this.variant === 'interactive') {
-            return ['rounded-xl', 'border', 'border-border', 'bg-background'];
+        if (this.variant === "interactive") {
+            return ["rounded-xl", "border", "border-border", "bg-background"];
         }
-        if (this.variant === 'data') {
-            return ['rounded-md', 'border', 'border-border', 'bg-background'];
+        if (this.variant === "data") {
+            return ["rounded-md", "border", "border-border", "bg-background"];
         }
         return [];
     }
     getVariantTableClasses() {
-        if (this.variant === 'data') {
+        if (this.variant === "data") {
             return [
-                'border-collapse',
-                'text-foreground',
-                '[&_thead_tr]:border-b',
-                '[&_thead_tr]:border-border',
-                '[&_tbody_tr]:border-b',
-                '[&_tbody_tr]:border-border',
-                '[&_tbody_tr:last-child]:border-b-0',
-                '[&_th]:h-10',
-                '[&_th]:px-2',
-                '[&_th]:text-left',
-                '[&_th]:align-middle',
-                '[&_th]:font-medium',
-                '[&_td]:p-2',
-                '[&_td]:align-middle'
+                "border-collapse",
+                "text-foreground",
+                "[&_thead_tr]:border-b",
+                "[&_thead_tr]:border-border",
+                "[&_tbody_tr]:border-b",
+                "[&_tbody_tr]:border-border",
+                "[&_tbody_tr:last-child]:border-b-0",
+                "[&_th]:h-10",
+                "[&_th]:px-2",
+                "[&_th]:text-left",
+                "[&_th]:align-middle",
+                "[&_th]:font-medium",
+                "[&_td]:p-2",
+                "[&_td]:align-middle",
             ];
         }
-        if (this.variant === 'interactive') {
+        if (this.variant === "interactive") {
             return [
-                'text-foreground',
-                '[&_thead]:sticky',
-                '[&_thead]:top-0',
-                '[&_thead]:z-10',
-                '[&_thead]:bg-muted/70',
-                '[&_thead_tr]:border-b',
-                '[&_thead_tr]:border-border',
-                '[&_th]:h-12',
-                '[&_th]:px-4',
-                '[&_th]:text-left',
-                '[&_th]:align-middle',
-                '[&_th]:text-sm',
-                '[&_th]:font-medium',
-                '[&_tbody_tr]:border-b',
-                '[&_tbody_tr]:border-border',
-                '[&_tbody_tr]:transition-colors',
-                '[&_tbody_tr:hover]:bg-muted/50',
-                '[&_tbody_tr:last-child]:border-b-0',
-                '[&_td]:h-14',
-                '[&_td]:px-4',
-                '[&_td]:align-middle',
-                '[&_td]:text-sm',
-                '[&_svg]:text-muted-foreground'
+                "text-foreground",
+                "[&_thead]:sticky",
+                "[&_thead]:top-0",
+                "[&_thead]:z-10",
+                "[&_thead]:bg-muted/70",
+                "[&_thead_tr]:border-b",
+                "[&_thead_tr]:border-border",
+                "[&_th]:h-12",
+                "[&_th]:px-4",
+                "[&_th]:text-left",
+                "[&_th]:align-middle",
+                "[&_th]:text-sm",
+                "[&_th]:font-medium",
+                "[&_tbody_tr]:border-b",
+                "[&_tbody_tr]:border-border",
+                "[&_tbody_tr]:transition-colors",
+                "[&_tbody_tr:hover]:bg-muted/50",
+                "[&_tbody_tr:last-child]:border-b-0",
+                "[&_td]:h-14",
+                "[&_td]:px-4",
+                "[&_td]:align-middle",
+                "[&_td]:text-sm",
+                "[&_svg]:text-muted-foreground",
             ];
         }
         return [];
     }
     getCellClasses() {
         // Manejo responsive de whitespace
-        if (this.responsiveStrategy === 'scroll') {
+        if (this.responsiveStrategy === "scroll") {
             // En scroll, permitir wrap en mobile, nowrap en desktop
-            return ['[&_td]:whitespace-normal', '[&_th]:whitespace-normal', 'sm:[&_td]:whitespace-nowrap', 'sm:[&_th]:whitespace-nowrap'];
+            return [
+                "[&_td]:whitespace-normal",
+                "[&_th]:whitespace-normal",
+                "sm:[&_td]:whitespace-nowrap",
+                "sm:[&_th]:whitespace-nowrap",
+            ];
         }
-        if (this.responsiveStrategy === 'wrap') {
+        if (this.responsiveStrategy === "wrap") {
             // En wrap, siempre permitir wrap
-            return ['[&_td]:whitespace-normal', '[&_td]:break-words', '[&_th]:whitespace-normal'];
+            return [
+                "[&_td]:whitespace-normal",
+                "[&_td]:break-words",
+                "[&_th]:whitespace-normal",
+            ];
         }
         // Default: nowrap (comportamiento anterior para backward compatibility)
         return [];
     }
 }
 PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed" }, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed" }, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
+            args: [{ selector: "pdm-table", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { variant: [{
                 type: Input
             }], responsiveStrategy: [{
@@ -2423,10 +2722,10 @@ class PdmDataTableComponent {
     }
 }
 PdmDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div *ngIf=\"showFilter || showColumnSelector\" class=\"flex w-full items-center justify-between gap-2 py-4\">\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button \n      *ngIf=\"showColumnSelector\"\n      type=\"button\" \n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table \n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\">\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input \n            type=\"checkbox\" \n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\">\n          \n          <!-- Header sortable -->\n          <button \n            *ngIf=\"column.sortable\"\n            type=\"button\" \n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\">\n            <span>{{ column.label }}</span>\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input \n            type=\"checkbox\" \n            [checked]=\"isSelected(row)\" \n            (change)=\"onToggleRow(row, $event)\" \n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\">\n          \n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container \n              *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, value: row[column.key] }\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button \n            type=\"button\" \n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\" \n            (click)=\"onAction(row)\">\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td \n          [attr.colspan]=\"effectiveColumns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)\" \n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\">\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div *ngIf=\"showPagination || selectable\" class=\"flex w-full items-center gap-2 py-4 flex-wrap sm:flex-nowrap\">\n    <p *ngIf=\"selectable\" class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\">\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page <= 1\" \n        (click)=\"previous()\">\n        {{ previousLabel }}\n      </button>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page >= totalPages\" \n        (click)=\"next()\">\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div *ngIf=\"showFilter || showColumnSelector\" class=\"flex w-full items-center justify-between gap-2 py-4\">\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button \n      *ngIf=\"showColumnSelector\"\n      type=\"button\" \n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table \n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\">\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input \n            type=\"checkbox\" \n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\">\n          \n          <!-- Header sortable -->\n          <button \n            *ngIf=\"column.sortable\"\n            type=\"button\" \n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\">\n            <span>{{ column.label }}</span>\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input \n            type=\"checkbox\" \n            [checked]=\"isSelected(row)\" \n            (change)=\"onToggleRow(row, $event)\" \n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\">\n          \n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container \n              *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, value: row[column.key] }\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button \n            type=\"button\" \n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\" \n            (click)=\"onAction(row)\">\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td \n          [attr.colspan]=\"effectiveColumns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)\" \n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\">\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div *ngIf=\"showPagination || selectable\" class=\"flex w-full items-center gap-2 py-4 flex-wrap sm:flex-nowrap\">\n    <p *ngIf=\"selectable\" class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\">\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page <= 1\" \n        (click)=\"previous()\">\n        {{ previousLabel }}\n      </button>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page >= totalPages\" \n        (click)=\"next()\">\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], columns: [{
@@ -2559,8 +2858,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 let nextDatePickerId = 0;
 class PdmDatePickerComponent {
-    constructor(elementRef, cdr, overlay, viewContainerRef) {
-        this.elementRef = elementRef;
+    constructor(cdr, overlay, viewContainerRef) {
         this.cdr = cdr;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
@@ -2571,21 +2869,21 @@ class PdmDatePickerComponent {
         this.triggerFocused = false;
         this.overlayRef = null;
         this.backdropSub = null;
-        this.id = '';
-        this.variant = 'single';
-        this.label = '';
-        this.labelClassName = '';
-        this.className = '';
-        this.triggerClassName = '';
+        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';
-        this.format = 'MMM d, yyyy';
+        this.panelClassName = "";
+        this.placeholder = "Pick a date";
+        this.rangePlaceholder = "Pick a date range";
+        this.format = "MMM d, yyyy";
         this.disabled = false;
         this.readonly = false;
         this.required = false;
@@ -2606,7 +2904,7 @@ class PdmDatePickerComponent {
     set open(value) {
         if (this._open === !!value)
             return;
-        if (!!value) {
+        if (value) {
             this.openPanel();
         }
         else {
@@ -2627,7 +2925,7 @@ class PdmDatePickerComponent {
         this._rangeValue = value
             ? {
                 start: this.normalizeDate(value.start),
-                end: this.normalizeDate(value.end)
+                end: this.normalizeDate(value.end),
             }
             : null;
         this.cdr.markForCheck();
@@ -2639,7 +2937,7 @@ class PdmDatePickerComponent {
         this.destroyOverlay();
     }
     get resolvedVariant() {
-        return this.variant === 'range' ? 'range' : 'single';
+        return this.variant === "range" ? "range" : "single";
     }
     get triggerId() {
         return this.id || `${this.instanceId}-trigger`;
@@ -2648,13 +2946,13 @@ class PdmDatePickerComponent {
         return `${this.id || this.instanceId}-panel`;
     }
     get hasSingleValue() {
-        return this.resolvedVariant === 'single' && !!this._value;
+        return this.resolvedVariant === "single" && !!this._value;
     }
     get hasRangeValue() {
-        return this.resolvedVariant === 'range' && !!this._rangeValue?.start;
+        return this.resolvedVariant === "range" && !!this._rangeValue?.start;
     }
     get displayText() {
-        if (this.resolvedVariant === 'single') {
+        if (this.resolvedVariant === "single") {
             return this._value ? this.formatDate(this._value) : this.placeholder;
         }
         const start = this._rangeValue?.start ?? null;
@@ -2668,29 +2966,29 @@ class PdmDatePickerComponent {
         return `${this.formatDate(start)} - ${this.formatDate(end)}`;
     }
     get textClasses() {
-        const hasValue = this.resolvedVariant === 'single' ? this.hasSingleValue : this.hasRangeValue;
+        const hasValue = this.resolvedVariant === "single"
+            ? this.hasSingleValue
+            : this.hasRangeValue;
         return [
-            'min-w-0 flex-1 truncate text-left text-sm leading-5',
-            hasValue ? 'text-foreground' : 'text-muted-foreground'
+            "min-w-0 flex-1 truncate text-left text-sm leading-5",
+            hasValue ? "text-foreground" : "text-muted-foreground",
         ];
     }
     get rootClasses() {
         return [
-            'grid gap-2',
-            this.resolvedVariant === 'range' ? 'w-[280px]' : 'w-[197px]',
-            this.className
+            "grid gap-2",
+            this.resolvedVariant === "range" ? "w-[280px]" : "w-[197px]",
+            this.className,
         ];
     }
     get triggerClasses() {
         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',
-            focusStyle
-                ? 'border-ring ring-2 ring-ring/50'
-                : '',
-            this.invalid ? 'border-destructive ring-destructive/20' : '',
-            this.triggerClassName
+            "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",
+            focusStyle ? "border-ring ring-2 ring-ring/50" : "",
+            this.invalid ? "border-destructive ring-destructive/20" : "",
+            this.triggerClassName,
         ];
     }
     toggleOpen() {
@@ -2721,16 +3019,22 @@ class PdmDatePickerComponent {
         this._rangeValue = value
             ? {
                 start: this.normalizeDate(value.start),
-                end: this.normalizeDate(value.end)
+                end: this.normalizeDate(value.end),
             }
             : null;
         this.rangeValueChange.emit(this._rangeValue
             ? {
-                start: this._rangeValue.start ? this.cloneDate(this._rangeValue.start) : null,
-                end: this._rangeValue.end ? this.cloneDate(this._rangeValue.end) : null
+                start: this._rangeValue.start
+                    ? this.cloneDate(this._rangeValue.start)
+                    : null,
+                end: this._rangeValue.end
+                    ? this.cloneDate(this._rangeValue.end)
+                    : null,
             }
             : null);
-        if (this.closeOnSelect && this._rangeValue?.start && this._rangeValue?.end) {
+        if (this.closeOnSelect &&
+            this._rangeValue?.start &&
+            this._rangeValue?.end) {
             this.setOpen(false);
             return;
         }
@@ -2765,20 +3069,26 @@ class PdmDatePickerComponent {
         this.openChange.emit(true);
         this.cdr.markForCheck();
         const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
-        // Resolve panelClass: overlayOptions.panelClass wins; otherwise map panelClassName.
+        // CRITICAL: Use mergeOverlayPanelClass to ensure z-index is never lost.
+        // Consumer classes are appended AFTER base z-index.
+        const zIndexEnforced = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        // Resolve panelClass: overlayOptions.panelClass wins; otherwise use z-index enforced.
         const resolvedPanelClass = this.overlayOptions?.panelClass
-            ?? (this.panelClassName ? ['block', this.panelClassName] : ['block']);
+            ? mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.overlayOptions.panelClass)
+            : zIndexEnforced;
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
-            // Consumer overrides are spread last — they win over every default above.
+            // Consumer overrides are spread first.
             ...this.overlayOptions,
-            // panelClass always overrides last: it already merges panelClassName + overlayOptions.
-            panelClass: resolvedPanelClass
+            // panelClass always enforced last to preserve z-index.
+            panelClass: resolvedPanelClass,
         });
         const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
         this.overlayRef.attach(portal);
-        this.backdropSub = this.overlayRef.outsidePointerEvents().subscribe((event) => {
+        this.backdropSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe((event) => {
             const target = event.target;
             if (!triggerEl.contains(target)) {
                 this.closePanel();
@@ -2806,10 +3116,10 @@ class PdmDatePickerComponent {
     }
     formatDate(date) {
         try {
-            return format(date, this.format || 'MMM d, yyyy');
+            return format(date, this.format || "MMM d, yyyy");
         }
         catch {
-            return format(date, 'MMM d, yyyy');
+            return format(date, "MMM d, yyyy");
         }
     }
     normalizeDate(value) {
@@ -2822,17 +3132,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 }, { token: i1$2.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmDatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.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  <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: [{
+            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.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerRef: [{
                 type: ViewChild,
-                args: ['triggerEl']
+                args: ["triggerEl"]
             }], panelTemplateRef: [{
                 type: ViewChild,
-                args: ['panelTemplate']
+                args: ["panelTemplate"]
             }], id: [{
                 type: Input
             }], variant: [{
@@ -2895,7 +3205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], onEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:keydown.escape"]
             }] } });
 
 /**
@@ -2905,15 +3215,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * 1. base (z-0) - Elementos normales del DOM
  * 2. dropdown (z-10) - Selects, combobox, date-pickers
  * 3. sticky (z-20) - Headers, navigation bars
- * 4. overlay (z-30) - Popovers, hover cards, context menus
+ * 4. drawerBackdrop (z-30) - Backdrop de drawers
  * 5. drawer (z-40) - Sidebar drawer, sheets laterales
- * 6. modal (z-50) - Dialogs, alert-dialogs
- * 7. modal-backdrop (z-40) - Backdrop de modals
- * 8. popover (z-60) - Tooltips, dropdowns DENTRO de modals
+ * 6. modalBackdrop (z-40) - Backdrop de modals ( mismo nivel que drawer)
+ * 7. modal (z-50) - Dialogs, alert-dialogs
+ * 8. popover (z-[70]) - Tooltips, dropdowns DENTRO de modals
  * 9. toast (z-[100]) - Notificaciones que deben estar sobre TODO
  *
  * REGLA CRÍTICA:
- * - Componentes overlay (select options, dropdown menu, tooltip) SIEMPRE z-60 o mayor
+ * - Componentes overlay (select options, dropdown menu, tooltip) SIEMPRE z-[70] o mayor
  * - Esto permite que funcionen DENTRO de modals (z-50)
  * - Backdrop de modal debe ser z-40 para estar DEBAJO del contenido del modal (z-50)
  */
@@ -2921,57 +3231,53 @@ const Z_INDEX = {
     /**
      * Base - contenido normal del DOM
      */
-    base: 'z-0',
+    base: "z-0",
     /**
      * Dropdown - Selects, combobox, date-pickers
-     * Debe estar SOBRE contenido normal pero BAJO modals
+     * Debe estar SOBRE contenido normal pero BAJO overlays
      */
-    dropdown: 'z-10',
+    dropdown: "z-10",
     /**
      * Sticky - Headers, navigation fija
      */
-    sticky: 'z-20',
-    /**
-     * Overlay - Popovers, hover cards, context menus
-     * Debe estar SOBRE sticky pero BAJO modals
-     */
-    overlay: 'z-30',
+    sticky: "z-20",
     /**
      * Drawer backdrop - Backdrop de sidebar drawer
-     * Debe estar DEBAJO del drawer panel
+     * Debe estar DEBAJO del drawer panel y DEBAJO de modals
      */
-    drawerBackdrop: 'z-40',
+    drawerBackdrop: "z-30",
     /**
      * Drawer - Sidebar drawer, sheets laterales
      * Debe estar SOBRE su backdrop pero BAJO modals
      */
-    drawer: 'z-50',
+    drawer: "z-40",
     /**
      * Modal backdrop - Backdrop de dialogs
-     * Debe estar SOBRE drawers pero DEBAJO del contenido del modal
+     * Mismo nivel que drawer backdrop (z-40)
      */
-    modalBackdrop: 'z-50',
+    modalBackdrop: "z-40",
     /**
-     * Modal - Dialogs, alert-dialogs, sheets
+     * Modal - Dialogs, alert-dialogs
      * Debe estar SOBRE su backdrop
      */
-    modal: 'z-[60]',
+    modal: "z-50",
     /**
      * Popover - Tooltips, dropdowns, selects options DENTRO de modals
      * CRÍTICO: Debe ser MAYOR que modal (z-50) para aparecer sobre modals
+     * USAR SIEMPRE mergeOverlayPanelClass() para asegurar este valor
      */
-    popover: 'z-[70]',
+    popover: "z-[70]",
     /**
      * Toast - Notificaciones globales
      * Debe estar sobre TODO
      */
-    toast: 'z-[100]'
+    toast: "z-[100]",
 };
 /**
  * Helper para debugging z-index issues
  */
 function logZIndexStack(element) {
-    if (typeof window === 'undefined')
+    if (typeof window === "undefined")
         return;
     let current = element;
     const stack = [];
@@ -2979,11 +3285,12 @@ function logZIndexStack(element) {
         const computed = window.getComputedStyle(current);
         const zIndex = computed.zIndex;
         const position = computed.position;
-        if (zIndex !== 'auto') {
+        if (zIndex !== "auto") {
             stack.push({
-                element: current.tagName + (current.className ? `.${current.className.split(' ')[0]}` : ''),
+                element: current.tagName +
+                    (current.className ? `.${current.className.split(" ")[0]}` : ""),
                 zIndex,
-                position
+                position,
             });
         }
         current = current.parentElement;
@@ -3014,7 +3321,7 @@ function logZIndexStack(element) {
 class PdmDialogComponent {
     constructor() {
         this.open = false;
-        this.variant = 'default';
+        this.variant = "default";
         /**
          * Tamaño del dialog
          * - responsive: fullscreen mobile, modal desktop (recomendado)
@@ -3024,21 +3331,21 @@ class PdmDialogComponent {
          * - xl: 800px max
          * - desktop/mobile/mobile-fullscreen: legacy, deprecado
          */
-        this.size = 'responsive';
-        this.title = 'Edit profile';
-        this.description = '';
+        this.size = "responsive";
+        this.title = "Edit profile";
+        this.description = "";
         this.closeOnBackdrop = true;
         this.closeOnEsc = true;
         this.showCloseButton = true;
         this.showHeader = true;
         this.showFooter = true;
-        this.primaryActionText = 'Save changes';
-        this.secondaryActionText = 'Cancel';
-        this.alignFooter = 'right';
-        this.headerClassName = '';
-        this.bodyClassName = '';
-        this.footerClassName = '';
-        this.className = '';
+        this.primaryActionText = "Save changes";
+        this.secondaryActionText = "Cancel";
+        this.alignFooter = "right";
+        this.headerClassName = "";
+        this.bodyClassName = "";
+        this.footerClassName = "";
+        this.className = "";
         this.openChange = new EventEmitter();
         this.primaryAction = new EventEmitter();
         this.secondaryAction = new EventEmitter();
@@ -3064,131 +3371,148 @@ class PdmDialogComponent {
     }
     get panelClassName() {
         // Legacy sizes (backward compatibility)
-        if (this.size === 'desktop') {
-            return this.buildClasses(['max-w-[640px]', 'max-h-[calc(100vh-2rem)]', 'rounded-[10px]']);
+        if (this.size === "desktop") {
+            return this.buildPanelClasses([
+                "max-w-[640px]",
+                "max-h-[calc(100vh-2rem)]",
+                "rounded-[10px]",
+            ]);
         }
-        if (this.size === 'mobile') {
-            return this.buildClasses(['max-w-[320px]', 'min-h-[240px]', 'rounded-[10px]']);
+        if (this.size === "mobile") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "min-h-[240px]",
+                "rounded-[10px]",
+            ]);
         }
-        if (this.size === 'mobile-fullscreen') {
-            return this.buildClasses(['max-w-[320px]', 'h-[min(100dvh,640px)]', 'rounded-none', 'sm:rounded-[10px]']);
+        if (this.size === "mobile-fullscreen") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "h-[min(100dvh,640px)]",
+                "rounded-none",
+                "sm:rounded-[10px]",
+            ]);
         }
         // New responsive mode (recomendado)
-        if (this.size === 'responsive') {
-            return this.buildClasses([
+        if (this.size === "responsive") {
+            return this.buildPanelClasses([
                 // Mobile: fullscreen con bordes redondeados solo arriba
-                'w-full',
-                'h-full',
-                'max-h-[100dvh]',
-                'rounded-t-[10px]',
-                'sm:rounded-[10px]',
+                "w-full",
+                "h-full",
+                "max-h-[100dvh]",
+                "rounded-t-[10px]",
+                "sm:rounded-[10px]",
                 // Desktop: modal centrado
-                'sm:w-auto',
-                'sm:h-auto',
-                'sm:max-w-[640px]',
-                'sm:max-h-[calc(100vh-4rem)]'
+                "sm:w-auto",
+                "sm:h-auto",
+                "sm:max-w-[640px]",
+                "sm:max-h-[calc(100vh-4rem)]",
             ]);
         }
         // New size options
         const sizeMap = {
-            sm: 'sm:max-w-[400px]',
-            md: 'sm:max-w-[500px]',
-            lg: 'sm:max-w-[640px]',
-            xl: 'sm:max-w-[800px]'
+            sm: "sm:max-w-[400px]",
+            md: "sm:max-w-[500px]",
+            lg: "sm:max-w-[640px]",
+            xl: "sm:max-w-[800px]",
         };
         const maxWidth = sizeMap[this.size] || sizeMap.lg;
-        return this.buildClasses([
+        return this.buildPanelClasses([
             // Mobile: fullscreen
-            'w-full',
-            'h-full',
-            'max-h-[100dvh]',
-            'rounded-t-[10px]',
+            "w-full",
+            "h-full",
+            "max-h-[100dvh]",
+            "rounded-t-[10px]",
             // Desktop: modal
-            'sm:rounded-[10px]',
-            'sm:w-auto',
-            'sm:h-auto',
+            "sm:rounded-[10px]",
+            "sm:w-auto",
+            "sm:h-auto",
             maxWidth,
-            'sm:max-h-[calc(100vh-4rem)]'
+            "sm:max-h-[calc(100vh-4rem)]",
         ]);
     }
-    buildClasses(sizeClasses) {
+    buildPanelClasses(sizeClasses) {
         const base = [
-            'relative',
+            "relative",
             Z_INDEX.modal,
-            'flex',
-            'flex-col',
-            'border',
-            'border-border',
-            'bg-background',
-            'text-foreground',
-            'shadow-lg',
-            'overflow-hidden',
+            "flex",
+            "flex-col",
+            "border",
+            "border-border",
+            "bg-background",
+            "text-foreground",
+            "shadow-lg",
+            "overflow-hidden",
             ...sizeClasses,
-            this.className
+            this.className,
         ];
-        return base.filter(Boolean).join(' ');
+        return base.filter(Boolean).join(" ");
     }
     get bodyWrapperClassName() {
+        // min-h-0 is CRITICAL for flex child to shrink and allow internal scroll
         const base = [
-            'flex-1',
-            'overflow-y-auto',
-            'px-4',
-            'py-6',
-            'sm:px-6',
-            this.bodyClassName
+            "flex-1",
+            "min-h-0",
+            "overflow-y-auto",
+            "px-4",
+            "py-6",
+            "sm:px-6",
+            this.bodyClassName,
         ];
-        return base.filter(Boolean).join(' ');
+        return base.filter(Boolean).join(" ");
     }
     get headerWrapperClassName() {
         const base = [
-            'flex',
-            'items-start',
-            'justify-between',
-            'gap-3',
-            'p-4',
-            'sm:p-6',
-            'border-b',
-            'border-border',
-            this.headerClassName
+            "flex",
+            "items-start",
+            "justify-between",
+            "gap-3",
+            "p-4",
+            "sm:p-6",
+            "border-b",
+            "border-border",
+            this.headerClassName,
         ];
-        return base.filter(Boolean).join(' ');
+        return base.filter(Boolean).join(" ");
     }
     get footerWrapperClassName() {
-        const effectiveAlign = this.alignFooter === 'right' && this.variant === 'custom-close' ? 'left' : this.alignFooter;
+        const effectiveAlign = this.alignFooter === "right" && this.variant === "custom-close"
+            ? "left"
+            : this.alignFooter;
         const base = [
-            'p-4',
-            'sm:p-6',
-            'border-t',
-            'border-border',
+            "p-4",
+            "sm:p-6",
+            "border-t",
+            "border-border",
             // Mobile: siempre full-width
-            'flex',
-            'flex-col',
-            'gap-2',
+            "flex",
+            "flex-col",
+            "gap-2",
             // Desktop: según alignFooter
-            effectiveAlign === 'full-width'
-                ? 'sm:flex-col'
-                : 'sm:flex-row sm:items-center',
-            effectiveAlign === 'left' ? 'sm:justify-start' : '',
-            effectiveAlign === 'right' ? 'sm:justify-end' : '',
-            this.footerClassName
+            effectiveAlign === "full-width"
+                ? "sm:flex-col"
+                : "sm:flex-row sm:items-center",
+            effectiveAlign === "left" ? "sm:justify-start" : "",
+            effectiveAlign === "right" ? "sm:justify-end" : "",
+            this.footerClassName,
         ];
-        return base.filter(Boolean).join(' ');
+        return base.filter(Boolean).join(" ");
     }
     get containerClassName() {
-        // Container con backdrop z-50
+        // Container con backdrop z-40
         // Mobile: fullscreen desde el bottom
         // Desktop: centrado
         return responsive({
             default: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,
-            sm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`
+            sm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,
         });
     }
 }
 PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\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 });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\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: PdmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n" }]
+            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full 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 sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -3231,7 +3555,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], onEsc: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:keydown.escape"]
             }] } });
 
 /**
@@ -3682,12 +4006,12 @@ class PdmDropdownMenuComponent {
         }
     }
 }
-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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.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: "<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: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], variant: [{
                 type: Input
@@ -4044,35 +4368,178 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmHoverCardComponent {
-    constructor() {
-        this.className = '';
-        this.panelClassName = '';
-        this.side = 'bottom';
-        this.align = 'start';
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.className = "";
+        this.panelClassName = "";
+        this.side = "bottom";
+        this.align = "start";
         this.panelWidth = 304;
         this.open = false;
+        this.overlayRef = null;
+        this.showTimeout = null;
+        this.hideTimeout = null;
     }
-    get positionClass() {
-        const sideClassMap = {
-            top: 'bottom-full mb-2',
-            right: 'left-full ml-2',
-            bottom: 'top-full mt-2',
-            left: 'right-full mr-2'
-        };
-        const alignClassMap = {
-            start: this.side === 'top' || this.side === 'bottom' ? 'left-0' : 'top-0',
-            center: this.side === 'top' || this.side === 'bottom' ? 'left-1/2 -translate-x-1/2' : 'top-1/2 -translate-y-1/2',
-            end: this.side === 'top' || this.side === 'bottom' ? 'right-0' : 'bottom-0'
+    ngOnDestroy() {
+        this.clearTimeouts();
+        this.destroyOverlay();
+    }
+    onMouseEnter() {
+        this.clearTimeouts();
+        this.showTimeout = setTimeout(() => this.show(), 150);
+    }
+    onMouseLeave() {
+        this.clearTimeouts();
+        this.hideTimeout = setTimeout(() => this.hide(), 150);
+    }
+    onFocusIn() {
+        this.clearTimeouts();
+        this.show();
+    }
+    onFocusOut() {
+        this.clearTimeouts();
+        this.hide();
+    }
+    clearTimeouts() {
+        if (this.showTimeout) {
+            clearTimeout(this.showTimeout);
+            this.showTimeout = null;
+        }
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+            this.hideTimeout = null;
+        }
+    }
+    show() {
+        if (this.open)
+            return;
+        this.open = true;
+        this.cdr.markForCheck();
+        this.createOverlay();
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.elementRef.nativeElement.querySelector("[pdmHoverTrigger]") ||
+            this.elementRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    getPositionConfigs() {
+        // Map our side/align to CDK positions
+        const configs = [];
+        // Primary position based on side
+        switch (this.side) {
+            case "top":
+                configs.push({
+                    originX: this.getAlignX(),
+                    originY: "top",
+                    overlayX: this.getAlignX(),
+                    overlayY: "bottom",
+                    offsetY: -8,
+                });
+                break;
+            case "right":
+                configs.push({
+                    originX: "end",
+                    originY: this.getAlignY(),
+                    overlayX: "start",
+                    overlayY: this.getAlignY(),
+                    offsetX: 8,
+                });
+                break;
+            case "bottom":
+            default:
+                configs.push({
+                    originX: this.getAlignX(),
+                    originY: "bottom",
+                    overlayX: this.getAlignX(),
+                    overlayY: "top",
+                    offsetY: 8,
+                });
+                break;
+            case "left":
+                configs.push({
+                    originX: "start",
+                    originY: this.getAlignY(),
+                    overlayX: "end",
+                    overlayY: this.getAlignY(),
+                    offsetX: -8,
+                });
+                break;
+        }
+        // Add fallback positions
+        switch (this.side) {
+            case "top":
+            case "bottom":
+                configs.push({
+                    originX: "center",
+                    originY: this.side === "top" ? "top" : "bottom",
+                    overlayX: "center",
+                    overlayY: this.side === "top" ? "bottom" : "top",
+                    offsetY: this.side === "top" ? -8 : 8,
+                });
+                break;
+            case "left":
+            case "right":
+                configs.push({
+                    originX: this.side === "left" ? "start" : "end",
+                    originY: "center",
+                    overlayX: this.side === "left" ? "end" : "start",
+                    overlayY: "center",
+                    offsetX: this.side === "left" ? -8 : 8,
+                });
+                break;
+        }
+        return configs;
+    }
+    getAlignX() {
+        return this.align;
+    }
+    getAlignY() {
+        // Map 'start'/'end' to 'top'/'bottom' for Y axis
+        const alignMap = {
+            start: "top",
+            center: "center",
+            end: "bottom",
         };
-        return `${sideClassMap[this.side]} ${alignClassMap[this.align]}`;
+        return alignMap[this.align];
     }
 }
-PdmHoverCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-[70] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\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 });
+PdmHoverCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, viewQueries: [{ propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-hover-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-[70] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n" }]
-        }], propDecorators: { className: [{
+            args: [{ selector: "pdm-hover-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
                 type: Input
             }], panelClassName: [{
                 type: Input
@@ -4082,6 +4549,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], panelWidth: [{
                 type: Input
+            }], panelTemplateRef: [{
+                type: ViewChild,
+                args: ["panelTemplate"]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ["focusin"]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
             }] } });
 
 class PdmItemComponent {
@@ -4106,21 +4588,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class PdmInputComponent {
     constructor() {
-        this.id = '';
-        this.type = 'text';
-        this.value = '';
-        this.placeholder = '';
+        this.id = "";
+        this.type = "text";
+        this.value = "";
+        this.placeholder = "";
         this.disabled = false;
         this.readonly = false;
         this.required = false;
         this.invalid = false;
-        this.size = 'regular';
-        this.roundness = 'default';
-        this.className = '';
-        this.inputClassName = '';
-        this.label = '';
-        this.helperText = '';
-        this.errorText = '';
+        this.size = "regular";
+        this.roundness = "default";
+        this.className = "";
+        this.inputClassName = "";
+        this.label = "";
+        this.helperText = "";
+        this.errorText = "";
         this.valueChange = new EventEmitter();
         this.blurred = new EventEmitter();
     }
@@ -4132,10 +4614,10 @@ class PdmInputComponent {
     }
 }
 PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\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 aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\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 });
+PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\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 aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\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: PdmInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-input', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\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 aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n" }]
+            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\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 aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -4249,18 +4731,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class PdmInputGroupComponent {
     constructor() {
-        this.id = '';
-        this.type = 'text';
-        this.value = '';
-        this.placeholder = '';
+        this.id = "";
+        this.type = "text";
+        this.value = "";
+        this.placeholder = "";
         this.disabled = false;
         this.invalid = false;
-        this.prefixText = '';
-        this.suffixText = '';
-        this.prefixIcon = '';
-        this.suffixIcon = '';
-        this.buttonText = '';
-        this.className = '';
+        this.prefixText = "";
+        this.suffixText = "";
+        this.prefixIcon = "";
+        this.suffixIcon = "";
+        this.buttonText = "";
+        this.className = "";
         this.valueChange = new EventEmitter();
         this.buttonClick = new EventEmitter();
     }
@@ -4272,10 +4754,10 @@ class PdmInputGroupComponent {
     }
 }
 PdmInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full items-center gap-2',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : ''\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n      'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file' ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground' : ''\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 shrink-0 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 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\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: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 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 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\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: 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: PdmInputGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-input-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex w-full items-center gap-2',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : ''\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n      'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file' ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground' : ''\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 shrink-0 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 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n" }]
+            args: [{ selector: "pdm-input-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 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 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -4458,35 +4940,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmMenubarComponent {
-    constructor(elementRef, cdr) {
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.cdr = cdr;
         this.menus = [];
-        this.className = '';
+        this.className = "";
+        this.panelClassName = "";
         this.itemSelect = new EventEmitter();
         this.openIndex = -1;
+        this.overlayRef = null;
+        this.outsideClickSub = null;
     }
-    ngOnInit() {
-        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
-        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
-    }
+    ngOnInit() { }
     ngOnDestroy() {
-        if (this.boundPointerDown) {
-            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
-        }
+        this.destroyOverlay();
     }
-    onEsc() {
+    onDocumentClickOrEsc(event) {
+        // Close on escape
+        if (event.type === "keydown") {
+            if (this.openIndex >= 0) {
+                this.openIndex = -1;
+                this.cdr.markForCheck();
+            }
+            return;
+        }
+        // Close on click outside
         if (this.openIndex >= 0) {
-            this.openIndex = -1;
-            this.cdr.markForCheck();
+            const target = event.target;
+            if (!this.elementRef.nativeElement.contains(target)) {
+                this.openIndex = -1;
+                this.cdr.markForCheck();
+            }
         }
     }
-    toggle(index) {
+    toggle(index, event) {
+        event.stopPropagation();
         this.openIndex = this.openIndex === index ? -1 : index;
+        this.cdr.markForCheck();
+        if (this.openIndex >= 0) {
+            this.createOverlay(event);
+        }
+        else {
+            this.destroyOverlay();
+        }
     }
     select(value) {
         this.itemSelect.emit(value);
         this.openIndex = -1;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
     }
     selectItem(item) {
         if (item.disabled || !item.value) {
@@ -4494,32 +4998,83 @@ class PdmMenubarComponent {
         }
         this.select(item.value);
     }
-    onDocumentPointerDown(event) {
-        if (this.openIndex < 0)
-            return;
-        const target = event.target;
-        if (!target)
-            return;
-        if (!this.elementRef.nativeElement.contains(target)) {
+    createOverlay(event) {
+        this.destroyOverlay();
+        const triggerEl = event.currentTarget;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.menuTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
             this.openIndex = -1;
             this.cdr.markForCheck();
+            this.destroyOverlay();
+        });
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
         }
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    getPositionConfigs() {
+        return [
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 4,
+            },
+            {
+                originX: "start",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "bottom",
+                offsetY: -4,
+            },
+        ];
     }
 }
-PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-[70] mt-1 min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm 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        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClickOrEsc()", "document:keydown.escape": "onDocumentClickOrEsc()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm 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        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-[70] mt-1 min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm 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        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menus: [{
+            args: [{ selector: "pdm-menubar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm 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        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menus: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], panelClassName: [{
+                type: Input
             }], itemSelect: [{
                 type: Output
-            }], onEsc: [{
+            }], menuTemplateRef: [{
+                type: ViewChild,
+                args: ["menuTemplate"]
+            }], onDocumentClickOrEsc: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:click"]
+            }, {
+                type: HostListener,
+                args: ["document:keydown.escape"]
             }] } });
 
 class PdmNativeSelectComponent {
@@ -4735,18 +5290,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmSelectComponent {
-    constructor(elementRef, cdr, overlay, viewContainerRef) {
-        this.elementRef = elementRef;
+    constructor(cdr, overlay, viewContainerRef) {
         this.cdr = cdr;
         this.overlay = overlay;
         this.viewContainerRef = viewContainerRef;
-        this.id = '';
-        this.value = '';
+        this.id = "";
+        this.value = "";
         this.options = [];
         this.disabled = false;
         this.invalid = false;
-        this.className = '';
-        this.placeholder = 'Select an option';
+        this.className = "";
+        this.placeholder = "Select an option";
         this.open = false;
         this.valueChange = new EventEmitter();
         this.overlayRef = null;
@@ -4769,7 +5323,7 @@ class PdmSelectComponent {
             return this.projectedOptions.map((d) => ({
                 label: d.resolvedLabel,
                 value: d.value,
-                disabled: d.disabled
+                disabled: d.disabled,
             }));
         }
         return this.options;
@@ -4821,11 +5375,13 @@ class PdmSelectComponent {
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             width: triggerEl.offsetWidth,
             // Consumer overrides are spread last — they win over every default above.
-            ...this.overlayOptions
+            ...this.overlayOptions,
         });
         const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
         this.overlayRef.attach(portal);
-        this.backdropSub = this.overlayRef.outsidePointerEvents().subscribe((event) => {
+        this.backdropSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe((event) => {
             const target = event.target;
             if (!triggerEl.contains(target)) {
                 this.closePanel();
@@ -4851,12 +5407,12 @@ 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", 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 });
+PdmSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.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", 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", styles: [":host{display:block}\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" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$2.Overlay }, { type: i0.ViewContainerRef }]; }, 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  <!-- 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", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
                 type: Input
             }], value: [{
                 type: Input
@@ -4876,16 +5432,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], triggerRef: [{
                 type: ViewChild,
-                args: ['triggerEl']
+                args: ["triggerEl"]
             }], panelTemplateRef: [{
                 type: ViewChild,
-                args: ['panelTemplate']
+                args: ["panelTemplate"]
             }], projectedOptions: [{
                 type: ContentChildren,
                 args: [PdmSelectOptionDirective]
             }], onEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
+                args: ["document:keydown.escape"]
             }] } });
 
 class PdmPaginationComponent {
@@ -4956,51 +5512,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmPopoverComponent {
-    constructor(elementRef, cdr) {
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
         this.elementRef = elementRef;
         this.cdr = cdr;
         this._open = false;
-        this.triggerText = 'Open';
-        this.className = '';
-        this.panelClassName = '';
+        this.triggerText = "Open";
+        this.className = "";
+        this.panelClassName = "";
         this.showTrigger = true;
         this.openChange = new EventEmitter();
-        this.panelPlacement = 'bottom';
-    }
-    ngOnInit() {
-        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
-        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
+        this.overlayRef = null;
+        this.outsideClickSub = null;
     }
+    ngOnInit() { }
     ngOnDestroy() {
-        if (this.boundPointerDown) {
-            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
-        }
+        this.destroyOverlay();
     }
     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;
     }
-    get panelClasses() {
-        const baseClasses = 'min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md';
-        return [
-            this.panelPlacement === 'top'
-                ? `absolute bottom-full left-0 ${Z_INDEX.popover} mb-2 ${baseClasses}`
-                : `absolute left-0 top-full ${Z_INDEX.popover} mt-2 ${baseClasses}`,
-            this.panelClassName
-        ];
-    }
     toggle() {
         this.open = !this.open;
-        this.openChange.emit(this.open);
     }
     onEsc() {
         if (this.open) {
@@ -5008,48 +5552,99 @@ class PdmPopoverComponent {
             this.openChange.emit(false);
         }
     }
-    onViewportChange() {
-        this.updatePanelPlacement();
-    }
-    onDocumentPointerDown(event) {
-        if (!this.open)
+    openPanel() {
+        if (this.overlayRef)
             return;
-        const target = event.target;
-        if (target && !this.elementRef.nativeElement.contains(target)) {
+        const triggerEl = this.triggerRef?.nativeElement;
+        if (!triggerEl)
+            return;
+        this._open = true;
+        this.openChange.emit(true);
+        this.cdr.markForCheck();
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX, this.panelClassName);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.panelTemplateRef, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+        // Close on click outside
+        this.outsideClickSub = this.overlayRef
+            .outsidePointerEvents()
+            .subscribe(() => {
             this.open = false;
             this.openChange.emit(false);
-        }
-    }
-    schedulePanelPlacementUpdate() {
-        setTimeout(() => this.updatePanelPlacement());
+        });
+        this.cdr.markForCheck();
     }
-    updatePanelPlacement() {
-        if (!this.open)
-            return;
-        const anchorEl = this.triggerRef?.nativeElement || this.anchorRef?.nativeElement;
-        const panelEl = this.panelRef?.nativeElement;
-        if (!anchorEl || !panelEl || typeof window === 'undefined') {
+    closePanel() {
+        if (!this.overlayRef)
             return;
+        this._open = false;
+        this.openChange.emit(false);
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    destroyOverlay() {
+        if (this.outsideClickSub) {
+            this.outsideClickSub.unsubscribe();
+            this.outsideClickSub = null;
         }
-        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();
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
         }
     }
+    getPositionConfigs() {
+        return [
+            // Bottom (default)
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 8,
+            },
+            // Top (fallback)
+            {
+                originX: "start",
+                originY: "top",
+                overlayX: "start",
+                overlayY: "bottom",
+                offsetY: -8,
+            },
+            // Right
+            {
+                originX: "end",
+                originY: "bottom",
+                overlayX: "start",
+                overlayY: "top",
+                offsetY: 8,
+            },
+            // Left
+            {
+                originX: "start",
+                originY: "bottom",
+                overlayX: "end",
+                overlayY: "top",
+                offsetY: 8,
+            },
+        ];
+    }
 }
-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()", "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 });
+PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { 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()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    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\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\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 #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: [{
+            args: [{ selector: "pdm-popover", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    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\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -5059,26 +5654,17 @@ 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: [{
+                args: ["triggerEl"]
+            }], panelTemplateRef: [{
                 type: ViewChild,
-                args: ['panelEl']
+                args: ["panelTemplate"]
             }], open: [{
                 type: Input
             }], onEsc: [{
                 type: HostListener,
-                args: ['document:keydown.escape']
-            }], onViewportChange: [{
-                type: HostListener,
-                args: ['window:resize']
-            }, {
-                type: HostListener,
-                args: ['window:scroll']
+                args: ["document:keydown.escape"]
             }] } });
 
 class PdmProgressComponent {
@@ -5530,8 +6116,8 @@ class PdmTabsComponent {
     constructor(cdr) {
         this.cdr = cdr;
         this.items = [];
-        this.value = '';
-        this.className = '';
+        this.value = "";
+        this.className = "";
         this.valueChange = new EventEmitter();
     }
     select(item) {
@@ -5543,10 +6129,10 @@ class PdmTabsComponent {
     }
 }
 PdmTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: "pdm-tabs", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], value: [{
@@ -5654,8 +6240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class PdmToggleGroupComponent {
     constructor() {
         this.items = [];
-        this.value = '';
-        this.className = '';
+        this.value = "";
+        this.className = "";
         this.valueChange = new EventEmitter();
     }
     onSelect(next, disabled) {
@@ -5665,10 +6251,10 @@ class PdmToggleGroupComponent {
     }
 }
 PdmToggleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleGroupComponent, selector: "pdm-toggle-group", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['inline-flex items-center rounded-md border border-border p-1', className]\" role=\"group\">\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground'\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleGroupComponent, selector: "pdm-toggle-group", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-toggle-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center rounded-md border border-border p-1', className]\" role=\"group\">\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground'\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n" }]
+            args: [{ selector: "pdm-toggle-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], value: [{
@@ -5680,33 +6266,173 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmTooltipComponent {
-    constructor() {
-        this.text = '';
-        this.side = 'top';
-        this.className = '';
+    constructor(overlay, viewContainerRef, elementRef, cdr) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        this.elementRef = elementRef;
+        this.cdr = cdr;
+        this.text = "";
+        this.side = "top";
+        this.className = "";
         this.open = false;
+        this.overlayRef = null;
+    }
+    ngOnDestroy() {
+        this.destroyOverlay();
+    }
+    onMouseEnter() {
+        this.show();
+    }
+    onMouseLeave() {
+        this.hide();
+    }
+    onFocusIn() {
+        this.show();
     }
-    get positionClass() {
-        if (this.side === 'bottom')
-            return 'top-full left-1/2 -translate-x-1/2 mt-2';
-        if (this.side === 'left')
-            return 'right-full top-1/2 -translate-y-1/2 mr-2';
-        if (this.side === 'right')
-            return 'left-full top-1/2 -translate-y-1/2 ml-2';
-        return 'bottom-full left-1/2 -translate-x-1/2 mb-2';
+    onFocusOut() {
+        this.hide();
+    }
+    show() {
+        if (this.open || !this.text)
+            return;
+        this.open = true;
+        this.cdr.markForCheck();
+        this.createOverlay();
+    }
+    hide() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.cdr.markForCheck();
+        this.destroyOverlay();
+    }
+    createOverlay() {
+        if (this.overlayRef)
+            return;
+        const triggerEl = this.elementRef.nativeElement.querySelector(":scope > *") ||
+            this.elementRef.nativeElement;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(triggerEl)
+            .withPositions(this.getPositionConfigs())
+            .withFlexibleDimensions(false)
+            .withPush(true);
+        const panelClass = mergeOverlayPanelClass(OVERLAY_BASE_Z_INDEX);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            panelClass,
+        });
+        const portal = new TemplatePortal(this.tooltipTemplate, this.viewContainerRef);
+        this.overlayRef.attach(portal);
+    }
+    destroyOverlay() {
+        if (this.overlayRef) {
+            this.overlayRef.detach();
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    getPositionConfigs() {
+        const offset = 4;
+        switch (this.side) {
+            case "bottom":
+                return [
+                    {
+                        originX: "center",
+                        originY: "bottom",
+                        overlayX: "center",
+                        overlayY: "top",
+                        offsetY: offset,
+                    },
+                    {
+                        originX: "center",
+                        originY: "top",
+                        overlayX: "center",
+                        overlayY: "bottom",
+                        offsetY: -offset,
+                    },
+                ];
+            case "left":
+                return [
+                    {
+                        originX: "start",
+                        originY: "center",
+                        overlayX: "end",
+                        overlayY: "center",
+                        offsetX: -offset,
+                    },
+                    {
+                        originX: "end",
+                        originY: "center",
+                        overlayX: "start",
+                        overlayY: "center",
+                        offsetX: offset,
+                    },
+                ];
+            case "right":
+                return [
+                    {
+                        originX: "end",
+                        originY: "center",
+                        overlayX: "start",
+                        overlayY: "center",
+                        offsetX: offset,
+                    },
+                    {
+                        originX: "start",
+                        originY: "center",
+                        overlayX: "end",
+                        overlayY: "center",
+                        offsetX: -offset,
+                    },
+                ];
+            case "top":
+            default:
+                return [
+                    {
+                        originX: "center",
+                        originY: "top",
+                        overlayX: "center",
+                        overlayY: "bottom",
+                        offsetY: -offset,
+                    },
+                    {
+                        originX: "center",
+                        originY: "bottom",
+                        overlayX: "center",
+                        overlayY: "top",
+                        offsetY: offset,
+                    },
+                ];
+        }
     }
 }
-PdmTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTooltipComponent, selector: "pdm-tooltip", inputs: { text: "text", side: "side", className: "className" }, ngImport: i0, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-[70] overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\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 });
+PdmTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTooltipComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTooltipComponent, selector: "pdm-tooltip", inputs: { text: "text", side: "side", className: "className" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, viewQueries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltipTemplate"], descendants: true }], ngImport: i0, template: "<span\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <ng-content></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #tooltipTemplate>\n    <span\n      class=\"pointer-events-none overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95\"\n    >\n      {{ text }}\n    </span>\n  </ng-template>\n</span>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-[70] overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n" }]
-        }], propDecorators: { text: [{
+            args: [{ selector: "pdm-tooltip", changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <ng-content></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #tooltipTemplate>\n    <span\n      class=\"pointer-events-none overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95\"\n    >\n      {{ text }}\n    </span>\n  </ng-template>\n</span>\n", styles: [":host{display:inline-flex}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { text: [{
                 type: Input
             }], side: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], tooltipTemplate: [{
+                type: ViewChild,
+                args: ["tooltipTemplate"]
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ["mouseenter"]
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ["mouseleave"]
+            }], onFocusIn: [{
+                type: HostListener,
+                args: ["focusin"]
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ["focusout"]
             }] } });
 
 const COMPONENTS = [
@@ -5907,5 +6633,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS, PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDraggableTableComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmOutsideClickDirective, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, logZIndexStack, overflowResponsive, responsive, spacingResponsive, widthResponsive };
+export { BREAKPOINTS, OVERLAY_BASE_Z_INDEX, PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDraggableTableComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmOutsideClickDirective, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, createZIndexEnforcedOverlay, extractZIndex, logZIndexStack, mergeOverlayPanelClass, overflowResponsive, responsive, spacingResponsive, widthResponsive };
 //# sourceMappingURL=pdm-ui-kit.mjs.map