pdm-ui-kit 0.1.48 → 0.1.50

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
-import { CommonModule } 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, Directive, ContentChildren, NgModule } 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 { OverlayModule } from '@angular/cdk/overlay';
 import { icons } from 'lucide';
@@ -90,32 +90,48 @@ class PdmAlertDialogComponent {
         this.confirmText = 'Continue';
         this.cancelText = 'Cancel';
         this.className = '';
+        /** Close when the ESC key is pressed. Default: `true`. */
+        this.closeOnEsc = true;
         this.openChange = new EventEmitter();
         this.confirm = new EventEmitter();
         this.cancel = new EventEmitter();
     }
+    /**
+     * Returns `true` when at least one consumer listens to `openChange`.
+     * - **Controlled** (has observers): parent manages `open` via two-way binding → only emit.
+     * - **Uncontrolled** (no observers): we own the `open` state → mutate it locally.
+     */
+    get isControlled() {
+        return this.openChange.observed;
+    }
     onTriggerClick() {
-        this.open = true;
+        if (!this.isControlled) {
+            this.open = true;
+        }
         this.openChange.emit(true);
     }
     onCancel() {
         this.cancel.emit();
-        this.open = false;
+        if (!this.isControlled) {
+            this.open = false;
+        }
         this.openChange.emit(false);
     }
     onConfirm() {
         this.confirm.emit();
-        this.open = false;
+        if (!this.isControlled) {
+            this.open = false;
+        }
         this.openChange.emit(false);
     }
     onEsc() {
-        if (this.open) {
+        if (this.open && this.closeOnEsc) {
             this.onCancel();
         }
     }
 }
 PdmAlertDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\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 });
+PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n" }]
@@ -135,6 +151,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], className: [{
                 type: Input
+            }], closeOnEsc: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], confirm: [{
@@ -1785,6 +1803,15 @@ class PdmContextMenuComponent {
         this.x = 0;
         this.y = 0;
     }
+    ngOnInit() {
+        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
+        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
+    }
+    ngOnDestroy() {
+        if (this.boundPointerDown) {
+            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
+        }
+    }
     onContextMenu(event) {
         event.preventDefault();
         this.x = event.clientX;
@@ -1798,9 +1825,11 @@ class PdmContextMenuComponent {
         this.open = false;
     }
     onEsc() {
-        this.open = false;
+        if (this.open) {
+            this.open = false;
+        }
     }
-    onDocumentClick(event) {
+    onDocumentPointerDown(event) {
         if (!this.open)
             return;
         const target = event.target;
@@ -1810,7 +1839,7 @@ class PdmContextMenuComponent {
     }
 }
 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()", "document:click": "onDocumentClick($event)" } }, 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-50 w-52 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\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.ɵ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-50 w-52 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\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 });
 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-50 w-52 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\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" }]
@@ -1829,9 +1858,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], onEsc: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }] } });
 
 class PdmDataTableComponent {
@@ -2575,7 +2601,9 @@ class PdmDropdownMenuComponent {
         }
     }
     onEsc() {
-        this.closePanel();
+        if (this.open) {
+            this.closePanel();
+        }
     }
     openPanel() {
         if (this.overlayRef)
@@ -2679,11 +2707,25 @@ class PdmDrawerComponent {
         this.usernameLabel = 'Username';
         this.usernameValue = '';
         this.responsivePrimaryLabel = '';
+        /** Close when the ESC key is pressed. Default: `true`. */
+        this.closeOnEsc = true;
+        /** Close when the backdrop is clicked. Default: `true`. */
+        this.closeOnBackdropClick = true;
         this.openChange = new EventEmitter();
         this.primaryAction = new EventEmitter();
         this.secondaryAction = new EventEmitter();
         this.bars = [];
     }
+    onEsc() {
+        if (this.open && this.closeOnEsc) {
+            this.close();
+        }
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdropClick) {
+            this.close();
+        }
+    }
     close() {
         this.openChange.emit(false);
     }
@@ -2695,10 +2737,10 @@ class PdmDrawerComponent {
     }
 }
 PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", variant: "variant", className: "className", title: "title", description: "description", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"close()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\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 });
+PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", variant: "variant", className: "className", title: "title", description: "description", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"close()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\n</div>\n" }]
+            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -2735,6 +2777,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], responsivePrimaryLabel: [{
                 type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
             }], openChange: [{
                 type: Output
             }], primaryAction: [{
@@ -2743,6 +2789,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], bars: [{
                 type: Input
+            }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 class PdmEmptyComponent {
@@ -3274,12 +3323,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmMenubarComponent {
-    constructor() {
+    constructor(elementRef, cdr) {
+        this.elementRef = elementRef;
+        this.cdr = cdr;
         this.menus = [];
         this.className = '';
         this.itemSelect = new EventEmitter();
         this.openIndex = -1;
     }
+    ngOnInit() {
+        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
+        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
+    }
+    ngOnDestroy() {
+        if (this.boundPointerDown) {
+            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
+        }
+    }
+    onEsc() {
+        if (this.openIndex >= 0) {
+            this.openIndex = -1;
+            this.cdr.markForCheck();
+        }
+    }
     toggle(index) {
         this.openIndex = this.openIndex === index ? -1 : index;
     }
@@ -3293,18 +3359,32 @@ 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)) {
+            this.openIndex = -1;
+            this.cdr.markForCheck();
+        }
+    }
 }
-PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, deps: [], 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" }, 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-50 mt-1 min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\">\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: 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-50 mt-1 min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\">\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 });
 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-50 mt-1 min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\">\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" }]
-        }], propDecorators: { menus: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menus: [{
                 type: Input
             }], className: [{
                 type: Input
             }], itemSelect: [{
                 type: Output
+            }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 class PdmNativeSelectComponent {
@@ -3362,6 +3442,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Emits `(pdmOutsideClick)` whenever a `pointerdown` event fires outside the host element.
+ *
+ * Uses the CAPTURE phase so it intercepts clicks even when inner elements call
+ * `stopPropagation()` (e.g. CDK overlay panels).
+ *
+ * SSR-safe: no listener is registered when running on the server.
+ *
+ * @example
+ * ```html
+ * <div [pdmOutsideClick]
+ *      (pdmOutsideClick)="close()"
+ *      [pdmOutsideClickDisabled]="!open">
+ * </div>
+ * ```
+ */
+class PdmOutsideClickDirective {
+    constructor(elementRef, document, platformId) {
+        this.elementRef = elementRef;
+        this.document = document;
+        /** When `true`, the outside-click listener is inactive. */
+        this.pdmOutsideClickDisabled = false;
+        /**
+         * Additional elements to exclude from the "outside" check.
+         * Useful when the trigger lives outside the host (e.g. a menubar button
+         * that opens a floating panel bound to a different root element).
+         */
+        this.pdmOutsideClickExclude = [];
+        /** Fires when a `pointerdown` lands outside the host (and excluded elements). */
+        this.pdmOutsideClick = new EventEmitter();
+        this.isBrowser = isPlatformBrowser(platformId);
+    }
+    ngOnInit() {
+        if (!this.isBrowser)
+            return;
+        this.boundHandler = (event) => this.onPointerDown(event);
+        this.document.addEventListener('pointerdown', this.boundHandler, { capture: true });
+    }
+    ngOnDestroy() {
+        if (!this.isBrowser || !this.boundHandler)
+            return;
+        this.document.removeEventListener('pointerdown', this.boundHandler, { capture: true });
+    }
+    onPointerDown(event) {
+        if (this.pdmOutsideClickDisabled)
+            return;
+        const target = event.target;
+        if (!target)
+            return;
+        // Check if click is inside the host element.
+        if (this.elementRef.nativeElement.contains(target))
+            return;
+        // Check if click is inside any excluded element.
+        for (const excluded of this.pdmOutsideClickExclude) {
+            const el = excluded instanceof ElementRef ? excluded.nativeElement : excluded;
+            if (el && el.contains(target))
+                return;
+        }
+        this.pdmOutsideClick.emit(event);
+    }
+}
+PdmOutsideClickDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmOutsideClickDirective, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
+PdmOutsideClickDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmOutsideClickDirective, selector: "[pdmOutsideClick]", inputs: { pdmOutsideClickDisabled: "pdmOutsideClickDisabled", pdmOutsideClickExclude: "pdmOutsideClickExclude" }, outputs: { pdmOutsideClick: "pdmOutsideClick" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmOutsideClickDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[pdmOutsideClick]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }]; }, propDecorators: { pdmOutsideClickDisabled: [{
+                type: Input
+            }], pdmOutsideClickExclude: [{
+                type: Input
+            }], pdmOutsideClick: [{
+                type: Output
+            }] } });
+
 /**
  * Directive used to declare an option inside `<pdm-select>` via content projection.
  *
@@ -3481,7 +3643,9 @@ class PdmSelectComponent {
         this.closePanel();
     }
     onEscape() {
-        this.closePanel();
+        if (this.open) {
+            this.closePanel();
+        }
     }
     openPanel() {
         if (this.overlayRef)
@@ -3645,6 +3809,15 @@ class PdmPopoverComponent {
         this.openChange = new EventEmitter();
         this.panelPlacement = 'bottom';
     }
+    ngOnInit() {
+        this.boundPointerDown = (event) => this.onDocumentPointerDown(event);
+        document.addEventListener('pointerdown', this.boundPointerDown, { capture: true });
+    }
+    ngOnDestroy() {
+        if (this.boundPointerDown) {
+            document.removeEventListener('pointerdown', this.boundPointerDown, { capture: true });
+        }
+    }
     set open(value) {
         this._open = !!value;
         if (this._open) {
@@ -3676,7 +3849,10 @@ class PdmPopoverComponent {
             this.openChange.emit(false);
         }
     }
-    onDocumentClick(event) {
+    onViewportChange() {
+        this.updatePanelPlacement();
+    }
+    onDocumentPointerDown(event) {
         if (!this.open)
             return;
         const target = event.target;
@@ -3685,9 +3861,6 @@ class PdmPopoverComponent {
             this.openChange.emit(false);
         }
     }
-    onViewportChange() {
-        this.updatePanelPlacement();
-    }
     schedulePanelPlacementUpdate() {
         setTimeout(() => this.updatePanelPlacement());
     }
@@ -3713,7 +3886,7 @@ class PdmPopoverComponent {
     }
 }
 PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()", "document:click": "onDocumentClick($event)", "window:resize": "onViewportChange()", "window:scroll": "onViewportChange()" } }, viewQueries: [{ propertyName: "anchorRef", first: true, predicate: ["anchorEl"], descendants: true }, { propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelRef", first: true, predicate: ["panelEl"], descendants: true }], ngImport: i0, template: "<div #anchorEl class=\"relative inline-block\" [ngClass]=\"className\">\n  <button #triggerEl *ngIf=\"showTrigger\" type=\"button\" class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\" [attr.aria-expanded]=\"open\" (click)=\"toggle()\">{{ triggerText }}</button>\n  <div #panelEl *ngIf=\"open || !showTrigger\" [ngClass]=\"panelClasses\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 });
 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" }]
@@ -3741,9 +3914,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }], onEsc: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event']]
             }], onViewportChange: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -3862,8 +4032,22 @@ class PdmSheetComponent {
         this.open = false;
         this.side = 'right';
         this.className = '';
+        /** Close when the ESC key is pressed. Default: `true`. */
+        this.closeOnEsc = true;
+        /** Close when the backdrop is clicked. Default: `true`. */
+        this.closeOnBackdropClick = true;
         this.openChange = new EventEmitter();
     }
+    onEsc() {
+        if (this.open && this.closeOnEsc) {
+            this.close();
+        }
+    }
+    onBackdropClick() {
+        if (this.closeOnBackdropClick) {
+            this.close();
+        }
+    }
     close() {
         this.openChange.emit(false);
     }
@@ -3878,18 +4062,25 @@ class PdmSheetComponent {
     }
 }
 PdmSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"close()\"></button>\n\n  <section [ngClass]=\"['absolute border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 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\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></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"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", className: "className", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 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\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></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"] }, { 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: PdmSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"close()\"></button>\n\n  <section [ngClass]=\"['absolute border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 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\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 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\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], side: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
             }], openChange: [{
                 type: Output
+            }], onEsc: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
             }] } });
 
 class PdmSidebarComponent {
@@ -4500,6 +4691,7 @@ const COMPONENTS = [
     PdmMenubarComponent,
     PdmNativeSelectComponent,
     PdmNavigationMenuComponent,
+    PdmOutsideClickDirective,
     PdmPaginationComponent,
     PdmPopoverComponent,
     PdmProgressComponent,
@@ -4562,6 +4754,7 @@ PdmUiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PdmMenubarComponent,
         PdmNativeSelectComponent,
         PdmNavigationMenuComponent,
+        PdmOutsideClickDirective,
         PdmPaginationComponent,
         PdmPopoverComponent,
         PdmProgressComponent,
@@ -4619,6 +4812,7 @@ PdmUiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PdmMenubarComponent,
         PdmNativeSelectComponent,
         PdmNavigationMenuComponent,
+        PdmOutsideClickDirective,
         PdmPaginationComponent,
         PdmPopoverComponent,
         PdmProgressComponent,
@@ -4654,5 +4848,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, createFlexiblePositionStrategy };
+export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmOutsideClickDirective, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, createFlexiblePositionStrategy };
 //# sourceMappingURL=pdm-ui-kit.mjs.map