pdm-ui-kit 1.4.0 → 1.6.0

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,10 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, HostListener, inject, ChangeDetectorRef, ViewChild, ViewChildren, Directive, ContentChildren, ElementRef, PLATFORM_ID, Inject } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, NgModule, HostListener, inject, ChangeDetectorRef, ViewChild, Directive, ContentChild, ViewChildren, ContentChildren, ElementRef, PLATFORM_ID, Inject } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, isPlatformBrowser, DOCUMENT } from '@angular/common';
+import * as i2 from '@angular/cdk/a11y';
+import { A11yModule } from '@angular/cdk/a11y';
+import { responsive as responsive$1, Z_INDEX as Z_INDEX$1, cn, TABLE_RESPONSIVE as TABLE_RESPONSIVE$1 } from 'pdm-ui-kit/src/utils';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i3 from 'pdm-ui-kit/src/label';
@@ -9,11 +12,8 @@ import { PdmLabelModule as PdmLabelModule$1 } from 'pdm-ui-kit/src/label';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { format } from 'date-fns';
 import { createFlexiblePositionStrategy as createFlexiblePositionStrategy$1, mergeOverlayPanelClass as mergeOverlayPanelClass$1, OVERLAY_BASE_Z_INDEX as OVERLAY_BASE_Z_INDEX$1 } from 'pdm-ui-kit/src/overlay';
-import * as i2 from 'pdm-ui-kit/src/icon';
+import * as i2$1 from 'pdm-ui-kit/src/icon';
 import { PdmIconModule as PdmIconModule$1 } from 'pdm-ui-kit/src/icon';
-import { TABLE_RESPONSIVE as TABLE_RESPONSIVE$1, Z_INDEX as Z_INDEX$1, responsive as responsive$1 } from 'pdm-ui-kit/src/utils';
-import * as i2$1 from '@angular/cdk/a11y';
-import { A11yModule } from '@angular/cdk/a11y';
 import * as i2$2 from 'pdm-ui-kit/src/button';
 import { PdmButtonModule as PdmButtonModule$1 } from 'pdm-ui-kit/src/button';
 import { icons } from 'lucide';
@@ -114,12 +114,17 @@ class PdmAlertDialogComponent {
     constructor() {
         this.open = false;
         this.showTrigger = false;
-        this.triggerText = 'Show dialog';
-        this.title = 'Are you absolutely sure?';
-        this.description = '';
-        this.confirmText = 'Continue';
-        this.cancelText = 'Cancel';
-        this.className = '';
+        this.triggerText = "Show dialog";
+        this.title = "Are you absolutely sure?";
+        this.description = "";
+        this.confirmText = "Continue";
+        this.cancelText = "Cancel";
+        this.size = "responsive";
+        this.maxWidth = "";
+        this.className = "";
+        this.bodyClassName = "";
+        this.showFooter = true;
+        this.closeOnBackdrop = true;
         /** Close when the ESC key is pressed. Default: `true`. */
         this.closeOnEsc = true;
         this.openChange = new EventEmitter();
@@ -134,6 +139,70 @@ class PdmAlertDialogComponent {
     get isControlled() {
         return this.openChange.observed;
     }
+    get panelClassName() {
+        if (this.size === "desktop") {
+            return this.buildPanelClasses([
+                "max-w-[640px]",
+                "max-h-[calc(100vh-2rem)]",
+                "rounded-[10px]",
+            ]);
+        }
+        if (this.size === "mobile") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "min-h-[240px]",
+                "rounded-[10px]",
+            ]);
+        }
+        if (this.size === "mobile-fullscreen") {
+            return this.buildPanelClasses([
+                "max-w-[320px]",
+                "h-[min(100dvh,640px)]",
+                "rounded-none",
+                "sm:rounded-[10px]",
+            ]);
+        }
+        if (this.size === "responsive") {
+            return this.buildPanelClasses([
+                "w-full",
+                "h-full",
+                "max-h-[100dvh]",
+                "rounded-t-[10px]",
+                "sm:rounded-[10px]",
+                "sm:w-auto",
+                "sm:h-auto",
+                "sm:max-w-[640px]",
+                "sm:max-h-[calc(100vh-4rem)]",
+            ]);
+        }
+        const sizeMap = {
+            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.buildPanelClasses([
+            "w-full",
+            "h-full",
+            "max-h-[100dvh]",
+            "rounded-t-[10px]",
+            "sm:rounded-[10px]",
+            "sm:w-auto",
+            "sm:h-auto",
+            maxWidth,
+            "sm:max-h-[calc(100vh-4rem)]",
+        ]);
+    }
+    get containerClassName() {
+        return responsive$1({
+            default: `fixed inset-x-0 bottom-0 ${Z_INDEX$1.modalBackdrop} flex items-end justify-center`,
+            sm: `fixed inset-0 ${Z_INDEX$1.modalBackdrop} flex items-center justify-center p-4`,
+        });
+    }
+    get bodyWrapperClassName() {
+        return cn("flex-1 min-h-0 overflow-y-auto px-4 py-4 sm:px-6", this.bodyClassName);
+    }
     onTriggerClick() {
         if (!this.isControlled) {
             this.open = true;
@@ -154,17 +223,26 @@ class PdmAlertDialogComponent {
         }
         this.openChange.emit(false);
     }
+    onBackdropClick() {
+        if (this.closeOnBackdrop) {
+            this.onCancel();
+        }
+    }
     onEsc() {
         if (this.open && this.closeOnEsc) {
             this.onCancel();
         }
     }
+    buildPanelClasses(sizeClasses) {
+        const maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : "";
+        return cn("relative", Z_INDEX$1.modal, "flex flex-col border border-solid border-border bg-background text-foreground shadow-lg overflow-hidden", ...sizeClasses, maxWidthClass, this.className);
+    }
 }
 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", 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 box-border items-center justify-center rounded-md border border-solid 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-[60] w-full max-w-lg rounded-lg border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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", size: "size", maxWidth: "maxWidth", className: "className", bodyClassName: "bodyClassName", showFooter: "showFooter", closeOnBackdrop: "closeOnBackdrop", 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 box-border items-center justify-center rounded-md border border-solid 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\" [ngClass]=\"containerClassName\">\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"alertdialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <div class=\"flex flex-col gap-2 p-4 sm:p-6\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showFooter\" class=\"flex flex-col gap-2 p-4 sm:p-6 border-t border-border sm:flex-row sm:justify-end\">\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\" (click)=\"onCancel()\">{{ cancelText }}</button>\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\" (click)=\"onConfirm()\">{{ confirmText }}</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"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], 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 box-border items-center justify-center rounded-md border border-solid 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-[60] w-full max-w-lg rounded-lg border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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" }]
+            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 box-border items-center justify-center rounded-md border border-solid 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\" [ngClass]=\"containerClassName\">\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"alertdialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <div class=\"flex flex-col gap-2 p-4 sm:p-6\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n    <div *ngIf=\"showFooter\" class=\"flex flex-col gap-2 p-4 sm:p-6 border-t border-border sm:flex-row sm:justify-end\">\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\" (click)=\"onCancel()\">{{ cancelText }}</button>\n      <button type=\"button\" class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\" (click)=\"onConfirm()\">{{ confirmText }}</button>\n    </div>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], showTrigger: [{
@@ -179,8 +257,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], cancelText: [{
                 type: Input
+            }], size: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
             }], className: [{
                 type: Input
+            }], bodyClassName: [{
+                type: Input
+            }], showFooter: [{
+                type: Input
+            }], closeOnBackdrop: [{
+                type: Input
             }], closeOnEsc: [{
                 type: Input
             }], openChange: [{
@@ -191,7 +279,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"]
             }] } });
 
 const COMPONENTS$C = [
@@ -202,13 +290,13 @@ class PdmAlertModule {
 }
 PdmAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 PdmAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, declarations: [PdmAlertComponent,
-        PdmAlertDialogComponent], imports: [CommonModule], exports: [PdmAlertComponent,
+        PdmAlertDialogComponent], imports: [CommonModule, A11yModule], exports: [PdmAlertComponent,
         PdmAlertDialogComponent] });
-PdmAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, imports: [CommonModule] });
+PdmAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, imports: [CommonModule, A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, A11yModule],
                     declarations: COMPONENTS$C,
                     exports: COMPONENTS$C
                 }]
@@ -2458,7 +2546,7 @@ class PdmCommandComponent {
     }
 }
 PdmCommandComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCommandComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCommandComponent, selector: "pdm-command", inputs: { open: "open", hintLabel: "hintLabel", hintKey: "hintKey", placeholder: "placeholder", emptyMessage: "emptyMessage", items: "items", className: "className" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border 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]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCommandComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCommandComponent, selector: "pdm-command", inputs: { open: "open", hintLabel: "hintLabel", hintKey: "hintKey", placeholder: "placeholder", emptyMessage: "emptyMessage", items: "items", className: "className" }, outputs: { itemSelect: "itemSelect", openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border 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]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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: PdmCommandComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-command', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngIf=\"!open\" class=\"flex items-center gap-1\">\n    <span class=\"text-sm font-medium text-muted-foreground\">{{\n      hintLabel\n    }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none box-border items-center gap-0.5 rounded-sm border border-solid border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon\n        name=\"command\"\n        [size]=\"12\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <span class=\"text-xs text-muted-foreground\">{{ hintKey }}</span>\n    </button>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    class=\"flex w-full flex-col overflow-hidden rounded-lg border border-solid border-border bg-popover text-popover-foreground shadow-md\"\n  >\n    <div class=\"flex items-center gap-2 border-b border-border px-3\">\n      <pdm-icon\n        name=\"search\"\n        [size]=\"16\"\n        className=\"text-muted-foreground\"\n        [decorative]=\"true\"\n      ></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full appearance-none box-border bg-transparent py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground\"\n      />\n    </div>\n\n    <div class=\"max-h-[50vh] overflow-y-auto p-1 md:max-h-72\">\n      <ng-container *ngFor=\"let group of groupedItems; let groupIndex = index\">\n        <div\n          *ngIf=\"group.name\"\n          class=\"px-2 py-1.5 text-xs text-muted-foreground\"\n        >\n          {{ group.name }}\n        </div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none box-border 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]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : '',\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span\n            class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\"\n          >\n            <pdm-icon\n              *ngIf=\"item.icon\"\n              [name]=\"item.icon\"\n              [size]=\"16\"\n              [decorative]=\"true\"\n            ></pdm-icon>\n          </span>\n          <span class=\"min-w-0 flex-1 text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n            item.shortcut\n          }}</span>\n        </button>\n        <div\n          *ngIf=\"groupIndex === 0 && groupedItems.length > 1\"\n          class=\"my-1 border-t border-border\"\n        ></div>\n      </ng-container>\n\n      <p\n        *ngIf=\"filteredItems.length === 0\"\n        class=\"m-0 py-6 text-center text-sm text-muted-foreground\"\n      >\n        {{ emptyMessage }}\n      </p>\n    </div>\n  </section>\n</div>\n" }]
@@ -3466,40 +3554,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }] });
 
+class PdmDialogHeaderDirective {
+}
+PdmDialogHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PdmDialogHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogHeaderDirective, selector: "[pdmHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pdmHeader]" }]
+        }] });
+class PdmDialogFooterDirective {
+}
+PdmDialogFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PdmDialogFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogFooterDirective, selector: "[pdmFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pdmFooter]" }]
+        }] });
 /**
- * Modal/Dialog component con soporte responsive
- *
- * MEJORADO en v0.2.0:
- * - Modo 'responsive' (default): fullscreen en mobile, modal en desktop
- * - Tamaños predefinidos: sm, md, lg, xl
- * - Mejor manejo de scroll en mobile
- *
- * @example
- * // Responsive (recomendado)
- * <pdm-dialog [open]="isOpen" size="responsive">
- *   <p>Content</p>
- * </pdm-dialog>
- *
- * @example
- * // Tamaño fijo
- * <pdm-dialog [open]="isOpen" size="lg">
- *   <p>Content</p>
- * </pdm-dialog>
+ * Responsive modal/dialog component.
  */
 class PdmDialogComponent {
     constructor() {
         this.open = false;
         this.variant = "default";
         /**
-         * Tamaño del dialog
-         * - responsive: fullscreen mobile, modal desktop (recomendado)
-         * - sm: 400px max
-         * - md: 500px max
-         * - lg: 640px max (default)
-         * - xl: 800px max
-         * - desktop/mobile/mobile-fullscreen: legacy, deprecado
+         * Dialog size. Responsive mode is fullscreen on mobile and a modal on desktop.
          */
         this.size = "responsive";
+        /**
+         * Custom desktop maximum width, such as `800px` or `min(90vw, 800px)`.
+         * Overrides `size` at the `sm` breakpoint; responsive mobile mode remains fullscreen.
+         */
+        this.maxWidth = "";
         this.title = "";
         this.description = "";
         this.closeOnBackdrop = true;
@@ -3538,7 +3624,6 @@ class PdmDialogComponent {
         }
     }
     get panelClassName() {
-        // Legacy sizes (backward compatibility)
         if (this.size === "desktop") {
             return this.buildPanelClasses([
                 "max-w-[640px]",
@@ -3561,23 +3646,19 @@ class PdmDialogComponent {
                 "sm:rounded-[10px]",
             ]);
         }
-        // New responsive mode (recomendado)
         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]",
-                // Desktop: modal centrado
                 "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]",
@@ -3586,12 +3667,10 @@ class PdmDialogComponent {
         };
         const maxWidth = sizeMap[this.size] || sizeMap.lg;
         return this.buildPanelClasses([
-            // Mobile: fullscreen
             "w-full",
             "h-full",
             "max-h-[100dvh]",
             "rounded-t-[10px]",
-            // Desktop: modal
             "sm:rounded-[10px]",
             "sm:w-auto",
             "sm:h-auto",
@@ -3611,65 +3690,25 @@ class PdmDialogComponent {
             "text-foreground",
             "shadow-lg",
             "overflow-hidden",
-            ...sizeClasses,
-            this.className,
         ];
-        return base.filter(Boolean).join(" ");
+        const maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : "";
+        return cn(...base, ...sizeClasses, maxWidthClass, this.className);
     }
     get bodyWrapperClassName() {
-        // min-h-0 is CRITICAL for flex child to shrink and allow internal scroll
-        const base = [
-            "flex-1",
-            "min-h-0",
-            "overflow-y-auto",
-            "px-4",
-            "py-6",
-            "sm:px-6",
-            this.bodyClassName,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("flex-1 min-h-0 overflow-y-auto px-4 py-6 sm:px-6", this.bodyClassName);
     }
     get headerWrapperClassName() {
-        const base = [
-            "flex",
-            "items-start",
-            "justify-between",
-            "gap-3",
-            "p-4",
-            "sm:p-6",
-            "border-b",
-            "border-border",
-            this.headerClassName,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("flex items-start justify-between gap-3 p-4 sm:p-6 border-b border-border", this.headerClassName);
     }
     get footerWrapperClassName() {
         const effectiveAlign = this.alignFooter === "right" && this.variant === "custom-close"
             ? "left"
             : this.alignFooter;
-        const base = [
-            "p-4",
-            "sm:p-6",
-            "border-t",
-            "border-border",
-            // Mobile: siempre full-width
-            "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,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("p-4 sm:p-6 border-t border-border flex flex-col gap-2", effectiveAlign === "full-width"
+            ? "sm:flex-col"
+            : "sm:flex-row sm:items-center", effectiveAlign === "left" ? "sm:justify-start" : "", effectiveAlign === "right" ? "sm:justify-end" : "", this.footerClassName);
     }
     get containerClassName() {
-        // Container con backdrop z-40
-        // Mobile: fullscreen desde el bottom
-        // Desktop: centrado
         return responsive$1({
             default: `fixed inset-x-0 bottom-0 ${Z_INDEX$1.modalBackdrop} flex items-end justify-center`,
             sm: `fixed inset-0 ${Z_INDEX$1.modalBackdrop} flex items-center justify-center p-4`,
@@ -3677,16 +3716,18 @@ class PdmDialogComponent {
     }
 }
 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\" cdkTrapFocus [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 box-border 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 box-border items-center justify-center rounded-md border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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"] }, { kind: "directive", type: i2$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], 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", maxWidth: "maxWidth", 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()" } }, queries: [{ propertyName: "customHeader", first: true, predicate: PdmDialogHeaderDirective, descendants: true }, { propertyName: "customFooter", first: true, predicate: PdmDialogFooterDirective, descendants: true }], 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\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <ng-container *ngIf=\"customHeader; else defaultHeader\">\n        <ng-content select=\"[pdmHeader]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultHeader>\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 box-border 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      </ng-template>\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=\"customFooter; else defaultFooter\">\n        <ng-content select=\"[pdmFooter]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultFooter>\n        <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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      </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"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], 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\" cdkTrapFocus [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 box-border 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 box-border items-center justify-center rounded-md border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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"] }]
+            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\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <ng-container *ngIf=\"customHeader; else defaultHeader\">\n        <ng-content select=\"[pdmHeader]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultHeader>\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 box-border 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      </ng-template>\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=\"customFooter; else defaultFooter\">\n        <ng-content select=\"[pdmFooter]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultFooter>\n        <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid 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 box-border items-center justify-center rounded-md border border-solid 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 box-border 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      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
                 type: Input
             }], size: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
@@ -3715,6 +3756,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], className: [{
                 type: Input
+            }], customHeader: [{
+                type: ContentChild,
+                args: [PdmDialogHeaderDirective]
+            }], customFooter: [{
+                type: ContentChild,
+                args: [PdmDialogFooterDirective]
             }], openChange: [{
                 type: Output
             }], primaryAction: [{
@@ -3728,11 +3775,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 const COMPONENTS$o = [
     PdmDialogComponent,
+    PdmDialogHeaderDirective,
+    PdmDialogFooterDirective,
 ];
 class PdmDialogModule {
 }
 PdmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent], imports: [CommonModule, A11yModule], exports: [PdmDialogComponent] });
+PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent,
+        PdmDialogHeaderDirective,
+        PdmDialogFooterDirective], imports: [CommonModule, A11yModule], exports: [PdmDialogComponent,
+        PdmDialogHeaderDirective,
+        PdmDialogFooterDirective] });
 PdmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, imports: [CommonModule, A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, decorators: [{
             type: NgModule,
@@ -4045,7 +4098,7 @@ 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", size: "size", 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 box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid 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 box-border 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: i2.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", size: "size", 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 box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid 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 box-border 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: i2$1.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 box-border border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-solid 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 box-border 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" }]
@@ -4310,7 +4363,7 @@ class PdmEmptyComponent {
     }
 }
 PdmEmptyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmEmptyComponent, selector: "pdm-empty", inputs: { variant: "variant", title: "title", description: "description", iconName: "iconName", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", linkLabel: "linkLabel", className: "className" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", linkAction: "linkAction" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\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: i2$2.PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmEmptyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmEmptyComponent, selector: "pdm-empty", inputs: { variant: "variant", title: "title", description: "description", iconName: "iconName", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel", linkLabel: "linkLabel", className: "className" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", linkAction: "linkAction" }, ngImport: i0, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\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: i2$2.PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: i2$1.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: PdmEmptyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-empty', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-foreground', containerClass, className]\">\n  <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n    <pdm-icon [name]=\"iconName\" [size]=\"20\"></pdm-icon>\n  </div>\n\n  <div class=\"space-y-2\">\n    <h3 class=\"m-0 text-2xl font-semibold leading-none tracking-tight\">{{ title }}</h3>\n    <p class=\"m-0 mx-auto max-w-md text-sm leading-relaxed text-muted-foreground\">\n      {{ description }}\n    </p>\n  </div>\n\n  <div *ngIf=\"primaryActionLabel || secondaryActionLabel\" class=\"mt-1 flex flex-wrap items-center justify-center gap-3\">\n    <pdm-button *ngIf=\"primaryActionLabel\" variant=\"default\" (pressed)=\"primaryAction.emit()\">{{ primaryActionLabel }}</pdm-button>\n    <pdm-button *ngIf=\"secondaryActionLabel\" variant=\"outline\" (pressed)=\"secondaryAction.emit()\">{{ secondaryActionLabel }}</pdm-button>\n  </div>\n\n  <button\n    *ngIf=\"linkLabel\"\n    type=\"button\"\n    class=\"mt-1 inline-flex appearance-none box-border items-center gap-2 border-0 bg-transparent p-0 text-sm font-medium text-muted-foreground underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    (click)=\"linkAction.emit()\"\n  >\n    <span>{{ linkLabel }}</span>\n    <pdm-icon name=\"arrow-up-right\" [size]=\"16\"></pdm-icon>\n  </button>\n\n  <ng-content></ng-content>\n</section>\n" }]
@@ -4815,6 +4868,8 @@ class PdmInputComponent {
         this.invalid = false;
         this.size = "regular";
         this.roundness = "default";
+        this.icon = "";
+        this.iconPosition = "left";
         this.className = "";
         this.inputClassName = "";
         this.label = "";
@@ -4843,10 +4898,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    [attr.aria-describedby]=\"descriptionAttrId\"\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 appearance-none box-border rounded-lg border border-solid 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\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" 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 });
+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", icon: "icon", iconPosition: "iconPosition", 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  <div [ngClass]=\"icon ? 'relative' : ''\">\n    <pdm-icon\n      *ngIf=\"icon\"\n      [name]=\"icon\"\n      [size]=\"16\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[\n        'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n        iconPosition === 'right' ? 'right-3' : 'left-3',\n      ]\"\n    ></pdm-icon>\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      [attr.aria-describedby]=\"descriptionAttrId\"\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 appearance-none box-border rounded-lg border border-solid 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        icon && iconPosition === 'left' ? 'pl-9' : '',\n        icon && iconPosition === 'right' ? 'pr-9' : '',\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  </div>\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" 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"] }, { kind: "component", type: i2$1.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: 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    [attr.aria-describedby]=\"descriptionAttrId\"\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 appearance-none box-border rounded-lg border border-solid 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\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\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  <div [ngClass]=\"icon ? 'relative' : ''\">\n    <pdm-icon\n      *ngIf=\"icon\"\n      [name]=\"icon\"\n      [size]=\"16\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[\n        'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n        iconPosition === 'right' ? 'right-3' : 'left-3',\n      ]\"\n    ></pdm-icon>\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      [attr.aria-describedby]=\"descriptionAttrId\"\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 appearance-none box-border rounded-lg border border-solid 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        icon && iconPosition === 'left' ? 'pl-9' : '',\n        icon && iconPosition === 'right' ? 'pr-9' : '',\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  </div>\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -4867,6 +4922,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], roundness: [{
                 type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
             }], className: [{
                 type: Input
             }], inputClassName: [{
@@ -4908,7 +4967,7 @@ 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 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 box-border items-center overflow-hidden rounded-md border border-solid 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 appearance-none box-border 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 box-border items-center justify-center rounded-md border border-solid 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: i2.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 box-border items-center overflow-hidden rounded-md border border-solid 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 appearance-none box-border 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 box-border items-center justify-center rounded-md border border-solid 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: i2$1.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 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 box-border items-center overflow-hidden rounded-md border border-solid 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 appearance-none box-border 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 box-border items-center justify-center rounded-md border border-solid 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"] }]
@@ -5519,7 +5578,7 @@ class PdmNativeSelectComponent {
     }
 }
 PdmNativeSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNativeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNativeSelectComponent, selector: "pdm-native-select", inputs: { id: "id", value: "value", disabled: "disabled", invalid: "invalid", options: "options", placeholder: "placeholder", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\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 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\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: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmNativeSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNativeSelectComponent, selector: "pdm-native-select", inputs: { id: "id", value: "value", disabled: "disabled", invalid: "invalid", options: "options", placeholder: "placeholder", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\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 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\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: "component", type: i2$1.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: PdmNativeSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-native-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\">\n  <select\n    [id]=\"id\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    (change)=\"onChange($event)\"\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 flex h-9 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 pr-9 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'\n    ]\"\n  >\n    <option value=\"\" disabled>{{ placeholder }}</option>\n    <option *ngFor=\"let option of options\" [value]=\"option.value\" [disabled]=\"option.disabled\">{{ option.label }}</option>\n  </select>\n  <pdm-icon className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground\" name=\"chevron-down\" [size]=\"16\"></pdm-icon>\n</div>\n" }]
@@ -5685,7 +5744,7 @@ class PdmPaginationComponent {
     }
 }
 PdmPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        [attr.aria-label]=\"'Go to previous page'\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          [attr.aria-label]=\"'Go to page ' + pageNumber\"\n          [attr.aria-current]=\"pageNumber === page ? 'page' : null\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        [attr.aria-label]=\"'Go to next page'\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: i3$1.PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPaginationComponent, selector: "pdm-pagination", inputs: { page: "page", pageCount: "pageCount", maxVisible: "maxVisible", className: "className", rowsPerPageLabel: "rowsPerPageLabel", rowsPerPage: "rowsPerPage", rowsPerPageOptions: "rowsPerPageOptions" }, outputs: { pageChange: "pageChange", rowsPerPageChange: "rowsPerPageChange" }, ngImport: i0, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        [attr.aria-label]=\"'Go to previous page'\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          [attr.aria-label]=\"'Go to page ' + pageNumber\"\n          [attr.aria-current]=\"pageNumber === page ? 'page' : null\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        [attr.aria-label]=\"'Go to next page'\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: i3$1.PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[100px] sm:w-[120px]\"\n      (valueChange)=\"onRowsPerPageChangeValue($event)\"\n    ></pdm-select>\n  </div>\n\n  <ul class=\"m-0 flex list-none items-center gap-1 p-0\">\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        [attr.aria-label]=\"'Go to previous page'\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none box-border border border-solid border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none box-border border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          [attr.aria-label]=\"'Go to page ' + pageNumber\"\n          [attr.aria-current]=\"pageNumber === page ? 'page' : null\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none box-border items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        [attr.aria-label]=\"'Go to next page'\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
@@ -6202,7 +6261,7 @@ class PdmSelectComponent {
     }
 }
 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 box-border items-center justify-between rounded-md border border-solid 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=\"w-full overflow-y-auto rounded-md border border-solid 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 box-border 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: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSelectComponent, selector: "pdm-select", inputs: { id: "id", value: "value", options: "options", disabled: "disabled", invalid: "invalid", className: "className", placeholder: "placeholder", overlayOptions: "overlayOptions" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, queries: [{ propertyName: "projectedOptions", predicate: PdmSelectOptionDirective }], viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none box-border items-center justify-between rounded-md border border-solid 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=\"w-full overflow-y-auto rounded-md border border-solid 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 box-border 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: i2$1.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 box-border items-center justify-between rounded-md border border-solid 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=\"w-full overflow-y-auto rounded-md border border-solid 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 box-border 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"] }]
@@ -6484,7 +6543,7 @@ class PdmSonnerComponent {
     }
 }
 PdmSonnerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSonnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSonnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSonnerComponent, selector: "pdm-sonner", inputs: { title: "title", description: "description", tone: "tone", className: "className" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border 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)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\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: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSonnerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSonnerComponent, selector: "pdm-sonner", inputs: { title: "title", description: "description", tone: "tone", className: "className" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border 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)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\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: i2$1.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: PdmSonnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pdm-sonner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm items-start gap-3 rounded-lg border border-solid p-4 shadow-lg', toneClass, className]\" role=\"status\" aria-live=\"polite\">\n  <div class=\"grid gap-0.5\">\n    <p *ngIf=\"title\" class=\"m-0 text-sm font-semibold\">{{ title }}</p>\n    <p *ngIf=\"description\" class=\"m-0 text-sm opacity-90\">{{ description }}</p>\n    <ng-content></ng-content>\n  </div>\n  <button type=\"button\" class=\"ml-auto appearance-none box-border 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)=\"dismissed.emit()\" aria-label=\"Dismiss\">\n    <pdm-icon name=\"x\" [size]=\"14\"></pdm-icon>\n  </button>\n</div>\n" }]
@@ -8014,5 +8073,5 @@ PdmPaginationHarness.hostSelector = 'pdm-pagination';
  * Generated bundle index. Do not edit.
  */
 
-export { BREAKPOINTS, OVERLAY_BASE_Z_INDEX, PdmAccordionComponent, PdmAccordionModule, PdmAlertComponent, PdmAlertDialogComponent, PdmAlertModule, PdmAspectRatioComponent, PdmAspectRatioModule, PdmAvatarComponent, PdmAvatarModule, PdmBadgeComponent, PdmBadgeModule, PdmBreadcrumbComponent, PdmBreadcrumbModule, PdmButtonComponent, PdmButtonGroupComponent, PdmButtonHarness, PdmButtonModule, PdmCalendarComponent, PdmCalendarModule, PdmCardComponent, PdmCardModule, PdmCarouselComponent, PdmCarouselModule, PdmChartComponent, PdmChartModule, PdmCheckboxComponent, PdmCheckboxHarness, PdmCheckboxModule, PdmCollapsibleComponent, PdmCollapsibleModule, PdmComboboxComponent, PdmComboboxModule, PdmCommandComponent, PdmCommandModule, PdmContextMenuComponent, PdmContextMenuModule, PdmDataTableComponent, PdmDataTableModule, PdmDatePickerComponent, PdmDialogComponent, PdmDialogHarness, PdmDialogModule, PdmDraggableTableComponent, PdmDrawerComponent, PdmDrawerModule, PdmDropdownMenuComponent, PdmDropdownMenuModule, PdmEmptyComponent, PdmEmptyModule, PdmFieldComponent, PdmFieldModule, PdmHoverCardComponent, PdmHoverCardModule, PdmIconComponent, PdmIconModule, PdmInputComponent, PdmInputGroupComponent, PdmInputHarness, PdmInputModule, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmItemModule, PdmKbdComponent, PdmKbdModule, PdmLabelComponent, PdmLabelModule, PdmMenubarComponent, PdmMenubarModule, PdmNativeSelectComponent, PdmNativeSelectModule, PdmNavigationMenuComponent, PdmNavigationMenuModule, PdmOutsideClickDirective, PdmOutsideClickModule, PdmPaginationComponent, PdmPaginationHarness, PdmPaginationModule, PdmPopoverComponent, PdmPopoverModule, PdmProgressComponent, PdmProgressModule, PdmRadioGroupComponent, PdmRadioGroupModule, PdmScrollAreaComponent, PdmScrollAreaModule, PdmSelectComponent, PdmSelectHarness, PdmSelectModule, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSeparatorModule, PdmSheetComponent, PdmSidebarComponent, PdmSidebarModule, PdmSkeletonComponent, PdmSkeletonModule, PdmSliderComponent, PdmSliderModule, PdmSonnerComponent, PdmSonnerModule, PdmSpinnerComponent, PdmSpinnerModule, PdmSwitchComponent, PdmSwitchModule, PdmTableComponent, PdmTabsComponent, PdmTabsModule, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmToggleModule, PdmTooltipComponent, PdmTooltipModule, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, createZIndexEnforcedOverlay, extractZIndex, logZIndexStack, mergeOverlayPanelClass, overflowResponsive, responsive, spacingResponsive, widthResponsive };
+export { BREAKPOINTS, OVERLAY_BASE_Z_INDEX, PdmAccordionComponent, PdmAccordionModule, PdmAlertComponent, PdmAlertDialogComponent, PdmAlertModule, PdmAspectRatioComponent, PdmAspectRatioModule, PdmAvatarComponent, PdmAvatarModule, PdmBadgeComponent, PdmBadgeModule, PdmBreadcrumbComponent, PdmBreadcrumbModule, PdmButtonComponent, PdmButtonGroupComponent, PdmButtonHarness, PdmButtonModule, PdmCalendarComponent, PdmCalendarModule, PdmCardComponent, PdmCardModule, PdmCarouselComponent, PdmCarouselModule, PdmChartComponent, PdmChartModule, PdmCheckboxComponent, PdmCheckboxHarness, PdmCheckboxModule, PdmCollapsibleComponent, PdmCollapsibleModule, PdmComboboxComponent, PdmComboboxModule, PdmCommandComponent, PdmCommandModule, PdmContextMenuComponent, PdmContextMenuModule, PdmDataTableComponent, PdmDataTableModule, PdmDatePickerComponent, PdmDialogComponent, PdmDialogFooterDirective, PdmDialogHarness, PdmDialogHeaderDirective, PdmDialogModule, PdmDraggableTableComponent, PdmDrawerComponent, PdmDrawerModule, PdmDropdownMenuComponent, PdmDropdownMenuModule, PdmEmptyComponent, PdmEmptyModule, PdmFieldComponent, PdmFieldModule, PdmHoverCardComponent, PdmHoverCardModule, PdmIconComponent, PdmIconModule, PdmInputComponent, PdmInputGroupComponent, PdmInputHarness, PdmInputModule, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmItemModule, PdmKbdComponent, PdmKbdModule, PdmLabelComponent, PdmLabelModule, PdmMenubarComponent, PdmMenubarModule, PdmNativeSelectComponent, PdmNativeSelectModule, PdmNavigationMenuComponent, PdmNavigationMenuModule, PdmOutsideClickDirective, PdmOutsideClickModule, PdmPaginationComponent, PdmPaginationHarness, PdmPaginationModule, PdmPopoverComponent, PdmPopoverModule, PdmProgressComponent, PdmProgressModule, PdmRadioGroupComponent, PdmRadioGroupModule, PdmScrollAreaComponent, PdmScrollAreaModule, PdmSelectComponent, PdmSelectHarness, PdmSelectModule, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSeparatorModule, PdmSheetComponent, PdmSidebarComponent, PdmSidebarModule, PdmSkeletonComponent, PdmSkeletonModule, PdmSliderComponent, PdmSliderModule, PdmSonnerComponent, PdmSonnerModule, PdmSpinnerComponent, PdmSpinnerModule, PdmSwitchComponent, PdmSwitchModule, PdmTableComponent, PdmTabsComponent, PdmTabsModule, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmToggleModule, PdmTooltipComponent, PdmTooltipModule, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, createZIndexEnforcedOverlay, extractZIndex, logZIndexStack, mergeOverlayPanelClass, overflowResponsive, responsive, spacingResponsive, widthResponsive };
 //# sourceMappingURL=pdm-ui-kit.mjs.map