pdm-ui-kit 0.3.2 → 0.4.1

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChild, ViewChildren, ElementRef, PLATFORM_ID, Directive, Inject, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, inject, ChangeDetectorRef, ViewChild, ViewChildren, ElementRef, PLATFORM_ID, Directive, Inject, ContentChildren, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
@@ -34,10 +34,10 @@ class PdmAccordionComponent {
     }
 }
 PdmAccordionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAccordionComponent, selector: "pdm-accordion", inputs: { items: "items", expandedIndex: "expandedIndex", className: "className" }, outputs: { expandedIndexChange: "expandedIndexChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-border\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex w-full appearance-none items-center justify-between border-0 bg-transparent py-4 text-left text-sm font-medium text-foreground transition-all hover:underline ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-2\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-foreground\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-sm text-muted-foreground\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAccordionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAccordionComponent, selector: "pdm-accordion", inputs: { items: "items", expandedIndex: "expandedIndex", className: "className" }, outputs: { expandedIndexChange: "expandedIndexChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-border\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex w-full appearance-none box-border items-center justify-between border-0 bg-transparent py-4 text-left text-sm font-medium text-foreground transition-all hover:underline ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-2\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-foreground\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-sm text-muted-foreground\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-border\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex w-full appearance-none items-center justify-between border-0 bg-transparent py-4 text-left text-sm font-medium text-foreground transition-all hover:underline ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-2\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-foreground\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-sm text-muted-foreground\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-accordion', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div *ngFor=\"let item of items; let i = index\" class=\"border-b border-border\">\n    <h3>\n      <button\n        type=\"button\"\n        class=\"flex w-full appearance-none box-border items-center justify-between border-0 bg-transparent py-4 text-left text-sm font-medium text-foreground transition-all hover:underline ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"item.disabled\"\n        [attr.aria-expanded]=\"isExpanded(i)\"\n        [attr.aria-controls]=\"item.id + '-panel'\"\n        (click)=\"toggle(i)\"\n      >\n        <span class=\"pr-2\">{{ item.title }}</span>\n        <span class=\"inline-flex h-6 w-6 items-center justify-center text-foreground\" aria-hidden=\"true\">\n          <svg\n            class=\"h-4 w-4 transition-transform\"\n            [ngClass]=\"isExpanded(i) ? 'rotate-180' : ''\"\n            viewBox=\"0 0 16 16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M3.5 6.5L8 11L12.5 6.5\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n          </svg>\n        </span>\n      </button>\n    </h3>\n    <div\n      *ngIf=\"isExpanded(i)\"\n      [id]=\"item.id + '-panel'\"\n      class=\"flex flex-col gap-4 pb-4 text-sm text-muted-foreground\"\n    >\n      <p *ngFor=\"let line of contentLines(item.content)\" class=\"m-0\">{{ line }}</p>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], expandedIndex: [{
@@ -64,10 +64,10 @@ class PdmAlertComponent {
     }
 }
 PdmAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertComponent, selector: "pdm-alert", inputs: { variant: "variant", title: "title", description: "description", details: "details", className: "className" }, ngImport: i0, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertComponent, selector: "pdm-alert", inputs: { variant: "variant", title: "title", description: "description", details: "details", className: "className" }, ngImport: i0, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-alert', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  role=\"alert\"\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background p-4',\n    className\n  ]\"\n>\n  <div [ngClass]=\"['flex gap-3', isDestructive ? 'items-start' : 'items-center']\">\n    <span class=\"inline-flex h-6 w-6 shrink-0 items-center justify-center\">\n      <svg *ngIf=\"!isDestructive && !isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isTitleOnly\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M5 8H19\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M9 8V6.5C9 5.67 9.67 5 10.5 5H13.5C14.33 5 15 5.67 15 6.5V8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <path d=\"M7 8L8 18.5C8.07 19.33 8.77 20 9.6 20H14.4C15.23 20 15.93 19.33 16 18.5L17 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n      </svg>\n      <svg *ngIf=\"isDestructive\" viewBox=\"0 0 24 24\" class=\"h-5 w-5 text-destructive\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n        <path d=\"M12 8V12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n      </svg>\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <h4\n        [ngClass]=\"[\n          'm-0 text-sm font-medium',\n          isDestructive ? 'text-destructive' : 'text-foreground'\n        ]\"\n      >\n        {{ title }}\n      </h4>\n\n      <p\n        *ngIf=\"!isTitleOnly && description\"\n        [ngClass]=\"[\n          'm-0 mt-0.5 text-sm',\n          isDestructive ? 'text-destructive' : 'text-muted-foreground'\n        ]\"\n      >\n        {{ description }}\n      </p>\n\n      <ul *ngIf=\"isDestructive && details.length\" class=\"m-0 mt-1 pl-5 text-sm text-destructive\">\n        <li *ngFor=\"let item of details\">{{ item }}</li>\n      </ul>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -131,10 +131,10 @@ class PdmAlertDialogComponent {
     }
 }
 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 items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[60] w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[60] w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n" }]
+            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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], showTrigger: [{
@@ -215,10 +215,10 @@ class PdmAvatarComponent {
     }
 }
 PdmAvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAvatarComponent, selector: "pdm-avatar", inputs: { src: "src", alt: "alt", fallback: "fallback", shape: "shape", size: "size", groupSources: "groupSources", className: "className" }, ngImport: i0, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-border' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAvatarComponent, selector: "pdm-avatar", inputs: { src: "src", alt: "alt", fallback: "fallback", shape: "shape", size: "size", groupSources: "groupSources", className: "className" }, ngImport: i0, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-solid border-border' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAvatarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-border' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-avatar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!isGroup\" [ngClass]=\"['relative flex shrink-0 overflow-hidden', radiusClass, sizeClasses[size], className]\">\n  <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" [ngClass]=\"['aspect-square h-full w-full object-cover', radiusClass]\" />\n  <div\n    *ngIf=\"!src\"\n    [ngClass]=\"['flex h-full w-full items-center justify-center bg-muted text-xs text-muted-foreground', radiusClass]\"\n  >\n    {{ fallback }}\n  </div>\n</div>\n\n<div *ngIf=\"isGroup\" [ngClass]=\"['inline-flex items-center pr-2', className]\">\n  <div\n    *ngFor=\"let groupSrc of groupSources; let i = index\"\n    [ngClass]=\"[\n      'relative h-8 w-8 shrink-0 overflow-hidden rounded-full',\n      i > 0 ? '-mr-2 border border-solid border-border' : '-mr-2'\n    ]\"\n  >\n    <img [src]=\"groupSrc\" [alt]=\"alt + ' ' + (i + 1)\" class=\"h-full w-full rounded-full object-cover\" />\n  </div>\n</div>\n" }]
         }], propDecorators: { src: [{
                 type: Input
             }], alt: [{
@@ -243,10 +243,10 @@ class PdmBadgeComponent {
     }
 }
 PdmBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBadgeComponent, selector: "pdm-badge", inputs: { variant: "variant", text: "text", className: "className" }, ngImport: i0, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBadgeComponent, selector: "pdm-badge", inputs: { variant: "variant", text: "text", className: "className" }, ngImport: i0, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n" }]
+            args: [{ selector: 'pdm-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  [ngClass]=\"[\n    'inline-flex items-center justify-center text-center align-middle rounded-full px-2.5 py-0.5 text-xs font-semibold',\n    variant === 'default' ? 'bg-primary text-primary-foreground' : '',\n    variant === 'secondary' ? 'bg-secondary text-secondary-foreground' : '',\n    variant === 'destructive' ? 'bg-destructive text-destructive-foreground' : '',\n    variant === 'outline' ? 'border border-solid border-input text-foreground' : '',\n    variant === 'icon' ? 'gap-1 bg-primary text-primary-foreground' : '',\n    variant === 'number' ? 'min-w-5 rounded-full bg-primary px-1.5 text-primary-foreground' : '',\n    variant === 'destructive-number' ? 'min-w-5 rounded-full bg-destructive px-1.5 text-destructive-foreground' : '',\n    variant === 'secondary-number' ? 'min-w-5 rounded-full border border-solid border-input px-1.5 text-foreground' : '',\n    className\n  ]\"\n>\n  <svg\n    *ngIf=\"variant === 'icon'\"\n    viewBox=\"0 0 24 24\"\n    class=\"h-4 w-4\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    aria-hidden=\"true\"\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" stroke-width=\"1.5\"></circle>\n    <path d=\"M8.5 12.5L10.8 14.8L15.8 9.8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n  </svg>\n  <span [ngClass]=\"[variant === 'secondary-number' ? 'font-mono' : '']\">{{ text }}</span>\n</span>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], text: [{
@@ -495,7 +495,7 @@ const ATTACHMENT_CONTROL_CLASSES = {
     ],
 };
 const FOCUS_STACKING_CLASS = "*:focus-visible:relative *:focus-visible:z-10";
-const SEPARATOR_CLASSES = "overflow-hidden rounded-md border border-border bg-secondary shadow-sm";
+const SEPARATOR_CLASSES = "overflow-hidden rounded-md border border-solid border-border bg-secondary shadow-sm";
 class PdmButtonGroupComponent {
     constructor() {
         this.variant = "default";
@@ -597,7 +597,7 @@ class PdmButtonComponent {
         const variant = this.resolvedVariant;
         const toneClass = this.toneClassMap[variant][currentState];
         return [
-            'inline-flex appearance-none items-center justify-center gap-2 rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
+            'inline-flex appearance-none box-border items-center justify-center gap-2 rounded-md border border-solid text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
             variant === 'link' ? 'px-4 py-2 h-9' : '',
             variant === 'icon' ? 'h-9 w-9 p-0' : '',
             variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
@@ -660,13 +660,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 const DAY_MS = 24 * 60 * 60 * 1000;
 class PdmCalendarComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
         this._value = null;
         this._rangeValue = null;
         this._month = null;
-        this.variant = 'single';
-        this.className = '';
+        this.cdr = inject(ChangeDetectorRef);
+        this.variant = "single";
+        this.className = "";
         this.disabledDates = [];
         this.minDate = null;
         this.maxDate = null;
@@ -680,20 +680,20 @@ class PdmCalendarComponent {
         this.monthChange = new EventEmitter();
         this.dateClick = new EventEmitter();
         this.disabledDateClick = new EventEmitter();
-        this.weekdays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+        this.weekdays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
         this.monthOptions = [
-            { value: 0, label: 'Jan' },
-            { value: 1, label: 'Feb' },
-            { value: 2, label: 'Mar' },
-            { value: 3, label: 'Apr' },
-            { value: 4, label: 'May' },
-            { value: 5, label: 'Jun' },
-            { value: 6, label: 'Jul' },
-            { value: 7, label: 'Aug' },
-            { value: 8, label: 'Sep' },
-            { value: 9, label: 'Oct' },
-            { value: 10, label: 'Nov' },
-            { value: 11, label: 'Dec' }
+            { value: 0, label: "Jan" },
+            { value: 1, label: "Feb" },
+            { value: 2, label: "Mar" },
+            { value: 3, label: "Apr" },
+            { value: 4, label: "May" },
+            { value: 5, label: "Jun" },
+            { value: 6, label: "Jul" },
+            { value: 7, label: "Aug" },
+            { value: 8, label: "Sep" },
+            { value: 9, label: "Oct" },
+            { value: 10, label: "Nov" },
+            { value: 11, label: "Dec" },
         ];
         this.trackByIndex = (index) => {
             return index;
@@ -712,7 +712,7 @@ class PdmCalendarComponent {
         this._rangeValue = value
             ? {
                 start: this.normalizeDate(value.start),
-                end: this.normalizeDate(value.end)
+                end: this.normalizeDate(value.end),
             }
             : null;
     }
@@ -726,22 +726,22 @@ class PdmCalendarComponent {
         return this._month;
     }
     get resolvedVariant() {
-        return this.variant === 'range' ? 'range' : 'single';
+        return this.variant === "range" ? "range" : "single";
     }
     get visibleMonths() {
         const baseMonth = this.getAnchorMonth();
-        if (this.resolvedVariant === 'single') {
+        if (this.resolvedVariant === "single") {
             return [
                 {
                     date: baseMonth,
                     title: this.formatMonthYear(baseMonth),
-                    titleStyle: 'dropdowns',
+                    titleStyle: "dropdowns",
                     dropdownMonth: this.formatMonthShort(baseMonth),
                     dropdownYear: String(baseMonth.getFullYear()),
                     showPrevButton: true,
                     showNextButton: true,
-                    weeks: this.buildMonthWeeks(baseMonth, false)
-                }
+                    weeks: this.buildMonthWeeks(baseMonth, false),
+                },
             ];
         }
         const nextMonth = this.addMonths(baseMonth, 1);
@@ -749,19 +749,19 @@ class PdmCalendarComponent {
             {
                 date: baseMonth,
                 title: this.formatMonthYear(baseMonth),
-                titleStyle: 'plain',
+                titleStyle: "plain",
                 showPrevButton: true,
                 showNextButton: false,
-                weeks: this.buildMonthWeeks(baseMonth, true)
+                weeks: this.buildMonthWeeks(baseMonth, true),
             },
             {
                 date: nextMonth,
                 title: this.formatMonthYear(nextMonth),
-                titleStyle: 'plain',
+                titleStyle: "plain",
                 showPrevButton: false,
                 showNextButton: true,
-                weeks: this.buildMonthWeeks(nextMonth, true)
-            }
+                weeks: this.buildMonthWeeks(nextMonth, true),
+            },
         ];
     }
     get singleHeaderMonth() {
@@ -773,8 +773,10 @@ class PdmCalendarComponent {
     get yearOptions() {
         const baseYear = new Date().getFullYear();
         const selectedYear = this.singleHeaderYear;
-        let minYear = this.minYear ?? (this.minDate ? this.minDate.getFullYear() : baseYear - 100);
-        let maxYear = this.maxYear ?? (this.maxDate ? this.maxDate.getFullYear() : baseYear + 10);
+        let minYear = this.minYear ??
+            (this.minDate ? this.minDate.getFullYear() : baseYear - 100);
+        let maxYear = this.maxYear ??
+            (this.maxDate ? this.maxDate.getFullYear() : baseYear + 10);
         const years = [];
         if (selectedYear < minYear) {
             minYear = selectedYear;
@@ -794,99 +796,109 @@ class PdmCalendarComponent {
     }
     get rootClasses() {
         return [
-            'border-border bg-background relative rounded-[10px] border p-3 shadow-sm',
-            this.resolvedVariant === 'range'
-                ? 'inline-flex items-start justify-center gap-4 shrink-0 grow-0 basis-auto'
-                : 'inline-flex flex-col gap-4 shrink-0 grow-0 basis-auto',
-            this.className
+            "border-border bg-background relative rounded-[10px] border border-solid p-3 shadow-sm",
+            this.resolvedVariant === "range"
+                ? "inline-flex items-start justify-center gap-4 shrink-0 grow-0 basis-auto"
+                : "inline-flex flex-col gap-4 shrink-0 grow-0 basis-auto",
+            this.className,
         ];
     }
     get rootStyle() {
-        const width = this.resolvedVariant === 'range' ? '488px' : '250px';
+        const width = this.resolvedVariant === "range" ? "488px" : "250px";
         return {
             width,
             minWidth: width,
             maxWidth: width,
-            minHeight: '293px',
-            flex: '0 0 auto',
-            alignSelf: 'flex-start'
+            minHeight: "293px",
+            flex: "0 0 auto",
+            alignSelf: "flex-start",
         };
     }
     monthPanelClasses(_index) {
-        return ['flex flex-col items-start', this.resolvedVariant === 'range' ? 'w-[224px] gap-4' : 'w-full gap-0'];
+        return [
+            "flex flex-col items-start",
+            this.resolvedVariant === "range" ? "w-[224px] gap-4" : "w-full gap-0",
+        ];
     }
     headerClasses(month) {
-        return ['flex w-full items-center justify-between', month.titleStyle === 'dropdowns' ? '' : 'mb-4'];
+        return [
+            "flex w-full items-center justify-between",
+            month.titleStyle === "dropdowns" ? "" : "mb-4",
+        ];
     }
     navButtonClasses() {
         return [
-            'flex h-8 w-8 appearance-none items-center justify-center rounded-md border-0 bg-transparent p-0 text-foreground',
-            'disabled:pointer-events-none disabled:opacity-40'
+            "flex h-8 w-8 appearance-none box-border items-center justify-center rounded-md border-0 bg-transparent p-0 text-foreground",
+            "disabled:pointer-events-none disabled:opacity-40",
         ];
     }
     navPlaceholderClasses() {
-        return ['h-7 w-7 shrink-0'];
+        return ["h-7 w-7 shrink-0"];
     }
     dropdownWrapClasses() {
-        return ['flex w-40 items-center justify-center gap-2'];
+        return ["flex w-40 items-center justify-center gap-2"];
     }
     dropdownClasses(widthClass) {
-        return ['flex h-8 items-center justify-center gap-1 px-1', widthClass];
+        return ["flex h-8 items-center justify-center gap-1 px-1", widthClass];
     }
     dropdownSelectClasses() {
         return [
-            'text-foreground h-full bg-transparent text-sm font-medium leading-5',
-            'appearance-none border-0 outline-none ring-0 focus:outline-none focus:ring-0 text-center cursor-pointer'
+            "text-foreground h-full bg-transparent text-sm font-medium leading-5",
+            "appearance-none box-border border-0 outline-none ring-0 focus:outline-none focus:ring-0 text-center cursor-pointer",
         ];
     }
     get dropdownSelectStyle() {
         return {
-            appearance: 'none',
-            WebkitAppearance: 'none',
-            MozAppearance: 'none',
-            background: 'transparent',
-            border: '0',
-            boxShadow: 'none',
-            outline: '0',
-            padding: '0',
-            margin: '0'
+            appearance: "none",
+            WebkitAppearance: "none",
+            MozAppearance: "none",
+            background: "transparent",
+            border: "0",
+            boxShadow: "none",
+            outline: "0",
+            padding: "0",
+            margin: "0",
         };
     }
     calendarGridWrapClasses() {
-        return ['flex w-full flex-col items-start'];
+        return ["flex w-full flex-col items-start"];
     }
     weekdayRowClasses() {
-        return ['flex w-full items-center'];
+        return ["flex w-full items-center"];
     }
     weekdayCellClasses() {
-        return ['text-muted-foreground flex h-[21px] w-8 items-center justify-center rounded-md text-xs leading-4'];
+        return [
+            "text-muted-foreground flex h-[21px] w-8 items-center justify-center rounded-md text-xs leading-4",
+        ];
     }
     weekRowClasses() {
-        return ['flex w-full items-start pt-2'];
+        return ["flex w-full items-start pt-2"];
     }
     dayCellClasses(cell) {
         return [
-            'relative flex h-8 w-8 shrink-0 items-center justify-center',
-            cell.rangeFill ? 'bg-accent' : '',
-            cell.rangeLeftCap ? 'rounded-l-md' : '',
-            cell.rangeRightCap ? 'rounded-r-md' : ''
+            "relative flex h-8 w-8 shrink-0 items-center justify-center",
+            cell.rangeFill ? "bg-accent" : "",
+            cell.rangeLeftCap ? "rounded-l-md" : "",
+            cell.rangeRightCap ? "rounded-r-md" : "",
         ];
     }
     dayButtonClasses(cell) {
         return [
-            'relative z-10 flex h-8 w-8 appearance-none items-center justify-center rounded-md border-0 p-0 text-sm leading-5',
+            "relative z-10 flex h-8 w-8 appearance-none box-border items-center justify-center rounded-md border-0 p-0 text-sm leading-5",
             cell.selected
-                ? 'bg-primary text-primary-foreground'
+                ? "bg-primary text-primary-foreground"
                 : cell.rangeFill
-                    ? 'bg-transparent text-accent-foreground'
-                    : 'bg-transparent text-foreground',
-            cell.muted && !cell.rangeFill ? 'opacity-50' : '',
-            cell.disabled ? 'cursor-not-allowed opacity-40' : '',
-            !cell.disabled && !this.readonly && !cell.selected ? 'hover:bg-accent/70' : ''
+                    ? "bg-transparent text-accent-foreground"
+                    : "bg-transparent text-foreground",
+            cell.muted && !cell.rangeFill ? "opacity-50" : "",
+            cell.disabled ? "cursor-not-allowed opacity-40" : "",
+            !cell.disabled && !this.readonly && !cell.selected
+                ? "hover:bg-accent/70"
+                : "",
         ];
     }
     dayLabelClasses(_cell) {
-        return ['font-normal'];
+        return ["font-normal"];
     }
     goToPreviousMonth() {
         this.setAnchorMonth(this.addMonths(this.getAnchorMonth(), -1));
@@ -920,7 +932,7 @@ class PdmCalendarComponent {
             return;
         }
         this.dateClick.emit(date);
-        if (this.resolvedVariant === 'single') {
+        if (this.resolvedVariant === "single") {
             this._value = date;
             this.valueChange.emit(this.cloneDate(date));
             this.syncVisibleMonthToDate(date);
@@ -952,7 +964,10 @@ class PdmCalendarComponent {
             return;
         }
         this._rangeValue = { start, end };
-        this.rangeValueChange.emit({ start: this.cloneDate(start), end: this.cloneDate(end) });
+        this.rangeValueChange.emit({
+            start: this.cloneDate(start),
+            end: this.cloneDate(end),
+        });
         this.syncVisibleMonthToDate(start);
     }
     buildMonthWeeks(month, includeRange) {
@@ -985,11 +1000,18 @@ class PdmCalendarComponent {
     }
     buildCell(date, visibleMonth, includeRange) {
         const normalized = this.cloneDate(date);
-        const inCurrentMonth = normalized.getMonth() === visibleMonth.getMonth() && normalized.getFullYear() === visibleMonth.getFullYear();
+        const inCurrentMonth = normalized.getMonth() === visibleMonth.getMonth() &&
+            normalized.getFullYear() === visibleMonth.getFullYear();
         const disabled = this.isBlocked(normalized);
-        const selectedSingle = this.resolvedVariant === 'single' && !!this._value && this.isSameDay(normalized, this._value);
-        const rangeStart = includeRange && !!this._rangeValue?.start && this.isSameDay(normalized, this._rangeValue.start);
-        const rangeEnd = includeRange && !!this._rangeValue?.end && this.isSameDay(normalized, this._rangeValue.end);
+        const selectedSingle = this.resolvedVariant === "single" &&
+            !!this._value &&
+            this.isSameDay(normalized, this._value);
+        const rangeStart = includeRange &&
+            !!this._rangeValue?.start &&
+            this.isSameDay(normalized, this._rangeValue.start);
+        const rangeEnd = includeRange &&
+            !!this._rangeValue?.end &&
+            this.isSameDay(normalized, this._rangeValue.end);
         const inRange = includeRange &&
             !!this._rangeValue?.start &&
             !!this._rangeValue?.end &&
@@ -1004,7 +1026,7 @@ class PdmCalendarComponent {
             inRange,
             rangeFill: inRange,
             rangeLeftCap: false,
-            rangeRightCap: false
+            rangeRightCap: false,
         };
     }
     getAnchorMonth() {
@@ -1012,10 +1034,10 @@ class PdmCalendarComponent {
         if (this._month) {
             candidate = this.cloneDate(this._month);
         }
-        else if (this.resolvedVariant === 'single' && this._value) {
+        else if (this.resolvedVariant === "single" && this._value) {
             candidate = this.startOfMonth(this._value);
         }
-        else if (this.resolvedVariant === 'range' && this._rangeValue?.start) {
+        else if (this.resolvedVariant === "range" && this._rangeValue?.start) {
             candidate = this.startOfMonth(this._rangeValue.start);
         }
         else {
@@ -1098,7 +1120,7 @@ class PdmCalendarComponent {
         return this.dateValue(a) - this.dateValue(b);
     }
     dateValue(date) {
-        return Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY_MS;
+        return (Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()) / DAY_MS);
     }
     isSameDay(a, b) {
         return this.compareDate(a, b) === 0;
@@ -1108,23 +1130,23 @@ class PdmCalendarComponent {
     }
     dateKey(date) {
         const y = date.getFullYear();
-        const m = String(date.getMonth() + 1).padStart(2, '0');
-        const d = String(date.getDate()).padStart(2, '0');
+        const m = String(date.getMonth() + 1).padStart(2, "0");
+        const d = String(date.getDate()).padStart(2, "0");
         return `${y}-${m}-${d}`;
     }
     formatMonthShort(date) {
-        return date.toLocaleString('en-US', { month: 'short' });
+        return date.toLocaleString("en-US", { month: "short" });
     }
     formatMonthYear(date) {
-        return date.toLocaleString('en-US', { month: 'long', year: 'numeric' });
+        return date.toLocaleString("en-US", { month: "long", year: "numeric" });
     }
 }
-PdmCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmCalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 PdmCalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCalendarComponent, selector: "pdm-calendar", inputs: { variant: "variant", className: "className", disabledDates: "disabledDates", minDate: "minDate", maxDate: "maxDate", minYear: "minYear", maxYear: "maxYear", isDateDisabled: "isDateDisabled", allowSameDayRange: "allowSameDayRange", readonly: "readonly", value: "value", rangeValue: "rangeValue", month: "month" }, outputs: { valueChange: "valueChange", rangeValueChange: "rangeValueChange", monthChange: "monthChange", dateClick: "dateClick", disabledDateClick: "disabledDateClick" }, ngImport: i0, template: "<div [ngClass]=\"rootClasses\" [ngStyle]=\"rootStyle\">\n  <div *ngFor=\"let month of visibleMonths; let monthIndex = index; trackBy: trackByIndex\" [ngClass]=\"monthPanelClasses(monthIndex)\">\n    <div [ngClass]=\"headerClasses(month)\">\n      <button\n        *ngIf=\"month.showPrevButton; else prevPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Previous month\"\n        (click)=\"goToPreviousMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m15 18-6-6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #prevPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n\n      <ng-container *ngIf=\"month.titleStyle === 'dropdowns'; else plainTitle\">\n        <div [ngClass]=\"dropdownWrapClasses()\">\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[72px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderMonth\"\n              aria-label=\"Month\"\n              (change)=\"onSingleMonthChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let monthOption of monthOptions\"\n                [value]=\"monthOption.value\"\n                [selected]=\"monthOption.value === singleHeaderMonth\"\n              >\n                {{ monthOption.label }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[82px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderYear\"\n              aria-label=\"Year\"\n              (change)=\"onSingleYearChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let year of yearOptions\"\n                [value]=\"year\"\n                [selected]=\"year === singleHeaderYear\"\n              >\n                {{ year }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #plainTitle>\n        <div class=\"flex min-w-0 flex-1 items-center justify-center\">\n          <p class=\"m-0 text-foreground text-center text-sm font-medium leading-5\">\n            {{ month.title }}\n          </p>\n        </div>\n      </ng-template>\n\n      <button\n        *ngIf=\"month.showNextButton; else nextPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Next month\"\n        (click)=\"goToNextMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #nextPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n    </div>\n\n    <div [ngClass]=\"calendarGridWrapClasses()\">\n      <div [ngClass]=\"weekdayRowClasses()\">\n        <div *ngFor=\"let day of weekdays; trackBy: trackByIndex\" [ngClass]=\"weekdayCellClasses()\">\n          <span>{{ day }}</span>\n        </div>\n      </div>\n\n      <div *ngFor=\"let week of month.weeks; trackBy: trackByIndex\" [ngClass]=\"weekRowClasses()\">\n        <div *ngFor=\"let cell of week; trackBy: trackByDate\" [ngClass]=\"dayCellClasses(cell)\">\n          <button\n            type=\"button\"\n            [ngClass]=\"dayButtonClasses(cell)\"\n            [disabled]=\"readonly\"\n            [attr.aria-selected]=\"cell.selected\"\n            [attr.aria-disabled]=\"cell.disabled || readonly\"\n            [attr.title]=\"cell.date | date : 'yyyy-MM-dd'\"\n            (click)=\"onDatePressed(cell)\"\n          >\n            <span [ngClass]=\"dayLabelClasses(cell)\">{{ cell.label }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCalendarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\" [ngStyle]=\"rootStyle\">\n  <div *ngFor=\"let month of visibleMonths; let monthIndex = index; trackBy: trackByIndex\" [ngClass]=\"monthPanelClasses(monthIndex)\">\n    <div [ngClass]=\"headerClasses(month)\">\n      <button\n        *ngIf=\"month.showPrevButton; else prevPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Previous month\"\n        (click)=\"goToPreviousMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m15 18-6-6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #prevPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n\n      <ng-container *ngIf=\"month.titleStyle === 'dropdowns'; else plainTitle\">\n        <div [ngClass]=\"dropdownWrapClasses()\">\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[72px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderMonth\"\n              aria-label=\"Month\"\n              (change)=\"onSingleMonthChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let monthOption of monthOptions\"\n                [value]=\"monthOption.value\"\n                [selected]=\"monthOption.value === singleHeaderMonth\"\n              >\n                {{ monthOption.label }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[82px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderYear\"\n              aria-label=\"Year\"\n              (change)=\"onSingleYearChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let year of yearOptions\"\n                [value]=\"year\"\n                [selected]=\"year === singleHeaderYear\"\n              >\n                {{ year }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #plainTitle>\n        <div class=\"flex min-w-0 flex-1 items-center justify-center\">\n          <p class=\"m-0 text-foreground text-center text-sm font-medium leading-5\">\n            {{ month.title }}\n          </p>\n        </div>\n      </ng-template>\n\n      <button\n        *ngIf=\"month.showNextButton; else nextPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Next month\"\n        (click)=\"goToNextMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #nextPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n    </div>\n\n    <div [ngClass]=\"calendarGridWrapClasses()\">\n      <div [ngClass]=\"weekdayRowClasses()\">\n        <div *ngFor=\"let day of weekdays; trackBy: trackByIndex\" [ngClass]=\"weekdayCellClasses()\">\n          <span>{{ day }}</span>\n        </div>\n      </div>\n\n      <div *ngFor=\"let week of month.weeks; trackBy: trackByIndex\" [ngClass]=\"weekRowClasses()\">\n        <div *ngFor=\"let cell of week; trackBy: trackByDate\" [ngClass]=\"dayCellClasses(cell)\">\n          <button\n            type=\"button\"\n            [ngClass]=\"dayButtonClasses(cell)\"\n            [disabled]=\"readonly\"\n            [attr.aria-selected]=\"cell.selected\"\n            [attr.aria-disabled]=\"cell.disabled || readonly\"\n            [attr.title]=\"cell.date | date : 'yyyy-MM-dd'\"\n            (click)=\"onDatePressed(cell)\"\n          >\n            <span [ngClass]=\"dayLabelClasses(cell)\">{{ cell.label }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { variant: [{
+            args: [{ selector: "pdm-calendar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"rootClasses\" [ngStyle]=\"rootStyle\">\n  <div *ngFor=\"let month of visibleMonths; let monthIndex = index; trackBy: trackByIndex\" [ngClass]=\"monthPanelClasses(monthIndex)\">\n    <div [ngClass]=\"headerClasses(month)\">\n      <button\n        *ngIf=\"month.showPrevButton; else prevPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Previous month\"\n        (click)=\"goToPreviousMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m15 18-6-6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #prevPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n\n      <ng-container *ngIf=\"month.titleStyle === 'dropdowns'; else plainTitle\">\n        <div [ngClass]=\"dropdownWrapClasses()\">\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[72px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderMonth\"\n              aria-label=\"Month\"\n              (change)=\"onSingleMonthChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let monthOption of monthOptions\"\n                [value]=\"monthOption.value\"\n                [selected]=\"monthOption.value === singleHeaderMonth\"\n              >\n                {{ monthOption.label }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n          <div [ngClass]=\"dropdownClasses('w-16 sm:w-[82px]')\">\n            <select\n              [ngClass]=\"dropdownSelectClasses()\"\n              [ngStyle]=\"dropdownSelectStyle\"\n              [value]=\"singleHeaderYear\"\n              aria-label=\"Year\"\n              (change)=\"onSingleYearChange($any($event.target).value)\"\n            >\n              <option\n                *ngFor=\"let year of yearOptions\"\n                [value]=\"year\"\n                [selected]=\"year === singleHeaderYear\"\n              >\n                {{ year }}\n              </option>\n            </select>\n            <svg viewBox=\"0 0 24 24\" class=\"h-3 w-3 text-foreground\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n              <path d=\"m6 9 6 6 6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </div>\n        </div>\n      </ng-container>\n\n      <ng-template #plainTitle>\n        <div class=\"flex min-w-0 flex-1 items-center justify-center\">\n          <p class=\"m-0 text-foreground text-center text-sm font-medium leading-5\">\n            {{ month.title }}\n          </p>\n        </div>\n      </ng-template>\n\n      <button\n        *ngIf=\"month.showNextButton; else nextPlaceholder\"\n        type=\"button\"\n        [ngClass]=\"navButtonClasses()\"\n        aria-label=\"Next month\"\n        (click)=\"goToNextMonth()\"\n        [disabled]=\"readonly\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\">\n          <path d=\"m9 18 6-6-6-6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n      </button>\n      <ng-template #nextPlaceholder>\n        <div [ngClass]=\"navPlaceholderClasses()\" aria-hidden=\"true\"></div>\n      </ng-template>\n    </div>\n\n    <div [ngClass]=\"calendarGridWrapClasses()\">\n      <div [ngClass]=\"weekdayRowClasses()\">\n        <div *ngFor=\"let day of weekdays; trackBy: trackByIndex\" [ngClass]=\"weekdayCellClasses()\">\n          <span>{{ day }}</span>\n        </div>\n      </div>\n\n      <div *ngFor=\"let week of month.weeks; trackBy: trackByIndex\" [ngClass]=\"weekRowClasses()\">\n        <div *ngFor=\"let cell of week; trackBy: trackByDate\" [ngClass]=\"dayCellClasses(cell)\">\n          <button\n            type=\"button\"\n            [ngClass]=\"dayButtonClasses(cell)\"\n            [disabled]=\"readonly\"\n            [attr.aria-selected]=\"cell.selected\"\n            [attr.aria-disabled]=\"cell.disabled || readonly\"\n            [attr.title]=\"cell.date | date : 'yyyy-MM-dd'\"\n            (click)=\"onDatePressed(cell)\"\n          >\n            <span [ngClass]=\"dayLabelClasses(cell)\">{{ cell.label }}</span>\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], propDecorators: { variant: [{
                 type: Input
             }], className: [{
                 type: Input
@@ -1239,10 +1261,10 @@ class PdmCarouselComponent {
     }
 }
 PdmCarouselComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCarouselComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCarouselComponent, selector: "pdm-carousel", inputs: { variant: "variant", className: "className", slides: "slides", startIndex: "startIndex", loop: "loop", windowSize: "windowSize", showCounter: "showCounter" }, outputs: { indexChange: "indexChange" }, ngImport: i0, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex items-center\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n        <div class=\"flex h-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCarouselComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCarouselComponent, selector: "pdm-carousel", inputs: { variant: "variant", className: "className", slides: "slides", startIndex: "startIndex", loop: "loop", windowSize: "windowSize", showCounter: "showCounter" }, outputs: { indexChange: "indexChange" }, ngImport: i0, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex items-center\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n        <div class=\"flex h-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-solid border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-solid border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCarouselComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex items-center\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n        <div class=\"flex h-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none items-center justify-center rounded-full border border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-carousel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"[className]\">\n  <div *ngIf=\"variant !== 'orientation'\" class=\"flex items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex items-center\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex items-center\" [ngClass]=\"i > 0 ? 'pl-4' : ''\">\n        <div class=\"flex h-40 w-32 items-center p-1\">\n          <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-solid border-border bg-background py-6 shadow-sm\">\n            <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <p *ngIf=\"variant !== 'orientation' && showCounter\" class=\"m-0 pt-2 text-sm font-medium text-muted-foreground\">\n    {{ slides.length ? (index + 1) : 0 }} / {{ slides.length }}\n  </p>\n\n  <div *ngIf=\"variant === 'orientation'\" class=\"flex flex-col items-center gap-4\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canPrev ? 'opacity-50' : ''\"\n      [disabled]=\"!canPrev\"\n      (click)=\"onPrev()\"\n      aria-label=\"Previous slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M18 15L12 9L6 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n\n    <div class=\"flex w-80 flex-col\">\n      <div *ngFor=\"let slide of visibleSlides; let i = index\" class=\"flex h-36 w-full items-center p-1\" [ngClass]=\"i > 0 ? 'pt-1' : ''\">\n        <div class=\"flex h-full w-full items-center justify-center rounded-lg border border-solid border-border bg-background py-6 shadow-sm\">\n          <div class=\"text-center text-2xl font-semibold text-foreground\">{{ slide }}</div>\n        </div>\n      </div>\n    </div>\n\n    <button\n      type=\"button\"\n      class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center rounded-full border border-solid border-input bg-background p-2.5\"\n      [ngClass]=\"!canNext ? 'opacity-50' : ''\"\n      [disabled]=\"!canNext\"\n      (click)=\"onNext()\"\n      aria-label=\"Next slide\"\n    >\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M6 9L12 15L18 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n</section>\n" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], className: [{
@@ -1298,10 +1320,10 @@ class PdmCardComponent {
     }
 }
 PdmCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCardComponent, selector: "pdm-card", inputs: { className: "className" }, ngImport: i0, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-lg border border-border bg-background py-6 shadow-sm',\n    className\n  ]\"\n>\n  <div class=\"flex w-full flex-col gap-6\">\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardHeader]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardContent]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardFooter]\"></ng-content>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCardComponent, selector: "pdm-card", inputs: { className: "className" }, ngImport: i0, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background py-6 shadow-sm',\n    className\n  ]\"\n>\n  <div class=\"flex w-full flex-col gap-6\">\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardHeader]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardContent]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardFooter]\"></ng-content>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-lg border border-border bg-background py-6 shadow-sm',\n    className\n  ]\"\n>\n  <div class=\"flex w-full flex-col gap-6\">\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardHeader]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardContent]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardFooter]\"></ng-content>\n    </div>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n  [ngClass]=\"[\n    'w-full rounded-lg border border-solid border-border bg-background py-6 shadow-sm',\n    className\n  ]\"\n>\n  <div class=\"flex w-full flex-col gap-6\">\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardHeader]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardContent]\"></ng-content>\n    </div>\n    <div class=\"px-6\">\n      <ng-content select=\"[pdmCardFooter]\"></ng-content>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }] } });
@@ -1424,10 +1446,10 @@ class PdmChartComponent {
     }
 }
 PdmChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmChartComponent, selector: "pdm-chart", inputs: { type: "type", className: "className", title: "title", description: "description", desktopLabel: "desktopLabel", desktopValue: "desktopValue", mobileLabel: "mobileLabel", mobileValue: "mobileValue", labels: "labels", bars: "bars", line: "line", pie: "pie", radar: "radar", radialValue: "radialValue", radialLabel: "radialLabel", radialDescription: "radialDescription", tooltipTitle: "tooltipTitle", tooltipPrimaryLabel: "tooltipPrimaryLabel", tooltipPrimaryValue: "tooltipPrimaryValue", tooltipSecondaryLabel: "tooltipSecondaryLabel", tooltipSecondaryValue: "tooltipSecondaryValue", pieLabels: "pieLabels", tooltipHint: "tooltipHint", radarMetricPrefix: "radarMetricPrefix", emptyLabel: "emptyLabel" }, ngImport: i0, template: "<section [ngClass]=\"['w-full rounded-lg border border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-card\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-border px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-muted-foreground\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmChartComponent, selector: "pdm-chart", inputs: { type: "type", className: "className", title: "title", description: "description", desktopLabel: "desktopLabel", desktopValue: "desktopValue", mobileLabel: "mobileLabel", mobileValue: "mobileValue", labels: "labels", bars: "bars", line: "line", pie: "pie", radar: "radar", radialValue: "radialValue", radialLabel: "radialLabel", radialDescription: "radialDescription", tooltipTitle: "tooltipTitle", tooltipPrimaryLabel: "tooltipPrimaryLabel", tooltipPrimaryValue: "tooltipPrimaryValue", tooltipSecondaryLabel: "tooltipSecondaryLabel", tooltipSecondaryValue: "tooltipSecondaryValue", pieLabels: "pieLabels", tooltipHint: "tooltipHint", radarMetricPrefix: "radarMetricPrefix", emptyLabel: "emptyLabel" }, ngImport: i0, template: "<section [ngClass]=\"['w-full rounded-lg border border-solid border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-card\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-solid border-border px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-solid border-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-56 flex-col gap-2 rounded-lg border border-solid border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-muted-foreground\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['w-full rounded-lg border border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-card\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-border px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-56 flex-col gap-2 rounded-lg border border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-muted-foreground\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['w-full rounded-lg border border-solid border-border bg-card text-card-foreground', className]\">\n  <div *ngIf=\"title || description || desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex w-full items-stretch border-b border-border\">\n    <div class=\"flex min-w-0 flex-1 flex-col gap-1 px-6 pb-3 pt-4\">\n      <h3 *ngIf=\"title\" class=\"m-0 text-sm font-semibold leading-none tracking-tight\">{{ title }}</h3>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n\n    <div *ngIf=\"desktopLabel || desktopValue || mobileLabel || mobileValue\" class=\"flex h-24\">\n      <div class=\"flex h-full w-44 flex-col justify-center border-l border-border bg-muted px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ desktopLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ desktopValue }}</span>\n      </div>\n      <div class=\"flex h-full w-44 flex-col justify-center px-6 py-4\">\n        <span class=\"text-xs text-muted-foreground\">{{ mobileLabel }}</span>\n        <span class=\"mt-1 text-2xl font-semibold\">{{ mobileValue }}</span>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"w-full p-6\">\n    <ng-container [ngSwitch]=\"type\">\n      <div *ngSwitchCase=\"'bar'\" class=\"flex h-60 w-full flex-col justify-end gap-2\">\n        <p *ngIf=\"normalizedBars.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <div class=\"relative h-48 w-full overflow-hidden\">\n          <div class=\"absolute bottom-0 left-0 right-0 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-1/2 border-t border-border opacity-50\"></div>\n          <div class=\"absolute left-0 right-0 top-3/4 border-t border-border opacity-50\"></div>\n          <div class=\"absolute inset-x-0 bottom-0 flex h-48 items-end gap-0.5 px-0.5\">\n            <div *ngFor=\"let bar of normalizedBars\" class=\"w-1.5 rounded-sm bg-primary\" [style.height.px]=\"bar\"></div>\n          </div>\n        </div>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'line'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'area'\" class=\"flex h-60 w-full flex-col gap-2\">\n        <p *ngIf=\"normalizedLine.length === 0\" class=\"m-0 text-sm text-muted-foreground\">{{ emptyLabel }}</p>\n        <svg viewBox=\"0 0 320 180\" class=\"h-48 w-full\">\n          <defs>\n            <linearGradient id=\"pdm-chart-area-gradient\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n              <stop offset=\"0%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.35\"></stop>\n              <stop offset=\"100%\" stop-color=\"hsl(var(--primary))\" stop-opacity=\"0.02\"></stop>\n            </linearGradient>\n          </defs>\n          <line x1=\"0\" y1=\"180\" x2=\"320\" y2=\"180\" stroke=\"hsl(var(--border))\" stroke-width=\"1\"></line>\n          <line x1=\"0\" y1=\"135\" x2=\"320\" y2=\"135\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"90\" x2=\"320\" y2=\"90\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <line x1=\"0\" y1=\"45\" x2=\"320\" y2=\"45\" stroke=\"hsl(var(--border))\" stroke-width=\"1\" opacity=\"0.5\"></line>\n          <path [attr.d]=\"areaPath\" fill=\"url(#pdm-chart-area-gradient)\"></path>\n          <path [attr.d]=\"linePath\" fill=\"none\" stroke=\"hsl(var(--primary))\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        </svg>\n        <div *ngIf=\"labels.length\" class=\"flex h-4 w-full items-center justify-between gap-2\">\n          <span *ngFor=\"let label of labels\" class=\"truncate text-xs text-muted-foreground\">{{ label }}</span>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'pie'\" class=\"flex items-center gap-6\">\n        <div class=\"relative h-40 w-40 rounded-full\" [style.background]=\"pieGradient\">\n          <div class=\"absolute inset-7 rounded-full bg-card\"></div>\n        </div>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let segment of pieSegments\" class=\"flex items-center justify-between rounded-md border border-solid border-border px-3 py-2\">\n            <div class=\"flex items-center gap-2\">\n              <span class=\"size-2.5 rounded-full\" [style.background]=\"segment.color\"></span>\n              <span class=\"text-sm\">{{ segment.label }}</span>\n            </div>\n            <span class=\"text-sm font-medium\">{{ segment.size | number: '1.0-0' }}%</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radar'\" class=\"flex items-center gap-6\">\n        <svg viewBox=\"0 0 160 160\" class=\"h-44 w-44\">\n          <polygon points=\"80,8 144,44 144,116 80,152 16,116 16,44\" fill=\"none\" stroke=\"hsl(var(--border))\"></polygon>\n          <polygon points=\"80,28 126,54 126,106 80,132 34,106 34,54\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.75\"></polygon>\n          <polygon points=\"80,48 109,64 109,96 80,112 51,96 51,64\" fill=\"none\" stroke=\"hsl(var(--border))\" opacity=\"0.55\"></polygon>\n          <polygon [attr.points]=\"radarPoints\" fill=\"hsl(var(--primary))\" fill-opacity=\"0.22\" stroke=\"hsl(var(--primary))\" stroke-width=\"2\"></polygon>\n        </svg>\n        <div class=\"grid flex-1 gap-2\">\n          <div *ngFor=\"let item of radar; index as i\" class=\"flex items-center justify-between rounded-md border border-solid border-border px-3 py-2 text-sm\">\n            <span class=\"text-muted-foreground\">{{ radarMetricPrefix }} {{ i + 1 }}</span>\n            <span class=\"font-medium\">{{ item }}</span>\n          </div>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'radial'\" class=\"flex items-center justify-between gap-6\">\n        <div class=\"relative flex size-44 items-center justify-center\">\n          <svg viewBox=\"0 0 96 96\" class=\"size-40 -rotate-90\">\n            <circle cx=\"48\" cy=\"48\" r=\"42\" fill=\"none\" stroke=\"hsl(var(--muted))\" stroke-width=\"10\"></circle>\n            <circle\n              cx=\"48\"\n              cy=\"48\"\n              r=\"42\"\n              fill=\"none\"\n              stroke=\"hsl(var(--primary))\"\n              stroke-width=\"10\"\n              stroke-linecap=\"round\"\n              stroke-dasharray=\"263.89\"\n              [attr.stroke-dashoffset]=\"radialStrokeOffset\"\n            ></circle>\n          </svg>\n          <div class=\"absolute text-center\">\n            <div class=\"text-2xl font-semibold\">{{ radialValue }}%</div>\n            <div class=\"text-xs text-muted-foreground\">{{ radialLabel }}</div>\n          </div>\n        </div>\n        <div class=\"flex-1\">\n          <p class=\"m-0 text-sm font-medium\">{{ radialLabel }}</p>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ radialDescription }}</p>\n        </div>\n      </div>\n\n      <div *ngSwitchCase=\"'tooltips'\" class=\"grid gap-3\">\n        <div class=\"inline-flex w-fit min-w-56 flex-col gap-2 rounded-lg border border-solid border-border bg-card p-3 shadow-sm\">\n          <p class=\"m-0 text-xs font-medium text-muted-foreground\">{{ tooltipTitle }}</p>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipPrimaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipPrimaryValue }}</span>\n          </div>\n          <div class=\"flex items-center justify-between text-sm\">\n            <span>{{ tooltipSecondaryLabel }}</span>\n            <span class=\"font-semibold\">{{ tooltipSecondaryValue }}</span>\n          </div>\n        </div>\n        <p *ngIf=\"tooltipHint\" class=\"m-0 text-xs text-muted-foreground\">{{ tooltipHint }}</p>\n      </div>\n    </ng-container>\n  </div>\n</section>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], className: [{
@@ -1502,10 +1524,10 @@ class PdmCheckboxComponent {
     }
 }
 PdmCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCheckboxComponent, selector: "pdm-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", variant: "variant", label: "label", description: "description", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border shadow-sm',\n      checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-background text-transparent'\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg viewBox=\"0 0 16 16\" class=\"h-3 w-3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3 8.5L6.4 12L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </span>\n\n  <span [ngClass]=\"['min-w-0 flex-1', hasDescription ? 'flex flex-col gap-2' : 'flex items-center']\">\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{ description }}</span>\n  </span>\n</button>\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 });
+PdmCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCheckboxComponent, selector: "pdm-checkbox", inputs: { id: "id", checked: "checked", disabled: "disabled", variant: "variant", label: "label", description: "description", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full appearance-none box-border border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-solid border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-solid border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 box-border items-center justify-center rounded-sm border border-solid shadow-sm',\n      checked\n        ? 'border-primary bg-primary text-primary-foreground'\n        : 'border-border bg-background text-transparent',\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      class=\"h-3 w-3\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 8.5L6.4 12L13 4\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </span>\n\n  <span\n    [ngClass]=\"[\n      'min-w-0 flex-1',\n      hasDescription ? 'flex flex-col gap-2' : 'flex items-center',\n    ]\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{\n      description\n    }}</span>\n  </span>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCheckboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border shadow-sm',\n      checked ? 'border-primary bg-primary text-primary-foreground' : 'border-border bg-background text-transparent'\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg viewBox=\"0 0 16 16\" class=\"h-3 w-3\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"M3 8.5L6.4 12L13 4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </svg>\n  </span>\n\n  <span [ngClass]=\"['min-w-0 flex-1', hasDescription ? 'flex flex-col gap-2' : 'flex items-center']\">\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{ description }}</span>\n  </span>\n</button>\n" }]
+            args: [{ selector: 'pdm-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  role=\"checkbox\"\n  [attr.id]=\"id || null\"\n  [attr.aria-checked]=\"checked\"\n  [attr.aria-disabled]=\"disabled\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"[\n    'w-full appearance-none box-border border-0 bg-transparent p-0 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n    variant === 'card'\n      ? checked\n        ? 'flex items-start gap-3 rounded-lg border border-solid border-primary bg-muted p-4'\n        : 'flex items-start gap-3 rounded-lg border border-solid border-border bg-background p-4'\n      : hasDescription\n        ? 'flex items-start gap-3'\n        : 'flex items-center gap-3',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n  (click)=\"onToggle()\"\n>\n  <span\n    [ngClass]=\"[\n      'mt-0.5 inline-flex h-4 w-4 shrink-0 box-border items-center justify-center rounded-sm border border-solid shadow-sm',\n      checked\n        ? 'border-primary bg-primary text-primary-foreground'\n        : 'border-border bg-background text-transparent',\n    ]\"\n    aria-hidden=\"true\"\n  >\n    <svg\n      viewBox=\"0 0 16 16\"\n      class=\"h-3 w-3\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M3 8.5L6.4 12L13 4\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </span>\n\n  <span\n    [ngClass]=\"[\n      'min-w-0 flex-1',\n      hasDescription ? 'flex flex-col gap-2' : 'flex items-center',\n    ]\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ label }}</span>\n    <span *ngIf=\"hasDescription\" class=\"text-sm text-muted-foreground\">{{\n      description\n    }}</span>\n  </span>\n</button>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], checked: [{
@@ -1546,10 +1568,10 @@ class PdmCollapsibleComponent {
     }
 }
 PdmCollapsibleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmCollapsibleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCollapsibleComponent, selector: "pdm-collapsible", inputs: { title: "title", open: "open", disabled: "disabled", items: "items", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmCollapsibleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmCollapsibleComponent, selector: "pdm-collapsible", inputs: { title: "title", open: "open", disabled: "disabled", items: "items", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none box-border items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-solid border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmCollapsibleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-collapsible', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex w-full max-w-sm flex-col gap-2', className]\">\n  <button\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"flex w-full appearance-none box-border items-center justify-between rounded-md border-0 bg-transparent px-4 py-2 text-left text-sm font-medium text-foreground hover:bg-accent ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"toggle()\"\n  >\n    <span>{{ title }}</span>\n    <span class=\"inline-flex h-8 w-8 items-center justify-center text-foreground\">\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n        <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </span>\n  </button>\n\n  <div class=\"flex w-full flex-col gap-2\">\n    <div\n      *ngFor=\"let item of visibleItems\"\n      class=\"w-full rounded-md border border-solid border-border bg-background px-4 py-2\"\n    >\n      <span class=\"font-mono text-sm text-foreground\">{{ item }}</span>\n    </div>\n  </div>\n</div>\n" }]
         }], propDecorators: { title: [{
                 type: Input
             }], open: [{
@@ -1765,10 +1787,10 @@ class PdmComboboxComponent {
     }
 }
 PdmComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width", panelClassName: "panelClassName" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmComboboxComponent, selector: "pdm-combobox", inputs: { open: "open", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", className: "className", options: "options", value: "value", width: "width", panelClassName: "panelClassName" }, outputs: { openChange: "openChange", valueChange: "valueChange" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none box-border items-center justify-between gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-solid border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none 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]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmComboboxComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-combobox", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-combobox", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex flex-col gap-1', className]\" [style.width.px]=\"width\">\n  <button\n    #triggerEl\n    type=\"button\"\n    class=\"flex h-9 w-full appearance-none box-border items-center justify-between gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'listbox'\"\n    (click)=\"toggle()\"\n  >\n    <span\n      class=\"min-w-0 flex-1 truncate text-left text-sm font-medium text-foreground\"\n      >{{ selectedLabel }}</span\n    >\n    <svg\n      viewBox=\"0 0 24 24\"\n      class=\"h-4 w-4 text-foreground\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M7 15L12 20L17 15\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n      <path\n        d=\"M17 9L12 4L7 9\"\n        stroke=\"currentColor\"\n        stroke-width=\"1.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      ></path>\n    </svg>\n  </button>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"w-full rounded-md border border-solid border-border bg-popover p-0 text-popover-foreground shadow-md\"\n    >\n      <div class=\"flex items-center gap-2 border-b border-border px-3 py-2\">\n        <svg\n          viewBox=\"0 0 24 24\"\n          class=\"h-4 w-4 text-muted-foreground\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <circle\n            cx=\"11\"\n            cy=\"11\"\n            r=\"7\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n          ></circle>\n          <path\n            d=\"M20 20L16.6 16.6\"\n            stroke=\"currentColor\"\n            stroke-width=\"1.5\"\n            stroke-linecap=\"round\"\n          ></path>\n        </svg>\n        <div class=\"flex-1 py-2 text-sm text-muted-foreground\">\n          {{ searchPlaceholder }}\n        </div>\n      </div>\n\n      <div class=\"p-1\">\n        <button\n          *ngFor=\"let option of options\"\n          type=\"button\"\n          class=\"flex w-full appearance-none 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]=\"option === value ? 'bg-accent text-accent-foreground' : ''\"\n          role=\"option\"\n          [attr.aria-selected]=\"option === value\"\n          (click)=\"select(option)\"\n        >\n          <span class=\"min-w-0 flex-1 truncate\">{{ option }}</span>\n          <svg\n            *ngIf=\"option === value\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-4 w-4 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M5 12.5L9.2 16.7L19 7\"\n              stroke=\"currentColor\"\n              stroke-width=\"1.8\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { open: [{
                 type: Input
             }], placeholder: [{
@@ -1986,10 +2008,10 @@ 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\">{{ hintLabel }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none items-center gap-0.5 rounded-sm border border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon name=\"command\" [size]=\"12\" className=\"text-muted-foreground\" [decorative]=\"true\"></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-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 name=\"search\" [size]=\"16\" className=\"text-muted-foreground\" [decorative]=\"true\"></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full 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 *ngIf=\"group.name\" class=\"px-2 py-1.5 text-xs text-muted-foreground\">{{ group.name }}</div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : ''\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\">\n            <pdm-icon *ngIf=\"item.icon\" [name]=\"item.icon\" [size]=\"16\" [decorative]=\"true\"></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\">{{ item.shortcut }}</span>\n        </button>\n        <div *ngIf=\"groupIndex === 0 && groupedItems.length > 1\" class=\"my-1 border-t border-border\"></div>\n      </ng-container>\n\n      <p *ngIf=\"filteredItems.length === 0\" class=\"m-0 py-6 text-center text-sm text-muted-foreground\">{{ emptyMessage }}</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: 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: 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\">{{ hintLabel }}</span>\n    <button\n      type=\"button\"\n      class=\"inline-flex h-5 appearance-none items-center gap-0.5 rounded-sm border border-border bg-muted px-1.5\"\n      (click)=\"toggleOpen()\"\n    >\n      <pdm-icon name=\"command\" [size]=\"12\" className=\"text-muted-foreground\" [decorative]=\"true\"></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-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 name=\"search\" [size]=\"16\" className=\"text-muted-foreground\" [decorative]=\"true\"></pdm-icon>\n      <input\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"query\"\n        (input)=\"onQueryChange($event)\"\n        class=\"h-10 w-full 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 *ngIf=\"group.name\" class=\"px-2 py-1.5 text-xs text-muted-foreground\">{{ group.name }}</div>\n        <button\n          *ngFor=\"let item of group.items\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"flex w-full appearance-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground\"\n          [ngClass]=\"[\n            item.disabled ? 'opacity-50' : '',\n            item.label === 'Calendar' ? 'bg-accent text-accent-foreground' : ''\n          ]\"\n          (click)=\"select(item.value)\"\n        >\n          <span class=\"inline-flex h-4 w-4 items-center justify-center text-foreground\">\n            <pdm-icon *ngIf=\"item.icon\" [name]=\"item.icon\" [size]=\"16\" [decorative]=\"true\"></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\">{{ item.shortcut }}</span>\n        </button>\n        <div *ngIf=\"groupIndex === 0 && groupedItems.length > 1\" class=\"my-1 border-t border-border\"></div>\n      </ng-container>\n\n      <p *ngIf=\"filteredItems.length === 0\" class=\"m-0 py-6 text-center text-sm text-muted-foreground\">{{ emptyMessage }}</p>\n    </div>\n  </section>\n</div>\n" }]
+            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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], hintLabel: [{
@@ -2140,10 +2162,10 @@ class PdmContextMenuComponent {
     }
 }
 PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentClick()", "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onDocumentClick()", "document:click": "onDocumentClick()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-solid border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-context-menu", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-context-menu", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative\"\n  [ngClass]=\"className\"\n  (contextmenu)=\"onContextMenu($event)\"\n>\n  <div\n    class=\"flex items-center justify-center rounded-md border border-solid border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-48 max-w-xs rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    >\n      <div>\n        <ng-container *ngFor=\"let item of items\">\n          <div\n            *ngIf=\"item.type === 'separator'\"\n            class=\"-mx-1 my-1 h-px bg-muted\"\n          ></div>\n\n          <div\n            *ngIf=\"item.type === 'label'\"\n            class=\"px-2 py-1.5 text-sm font-semibold text-foreground\"\n          >\n            {{ item.label }}\n          </div>\n\n          <button\n            *ngIf=\"!item.type || item.type === 'item'\"\n            type=\"button\"\n            [disabled]=\"item.disabled\"\n            class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n            [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n            (click)=\"select(item)\"\n          >\n            <span\n              class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\"\n            >\n              <svg\n                *ngIf=\"item.checked\"\n                viewBox=\"0 0 24 24\"\n                class=\"h-3.5 w-3.5\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path\n                  d=\"M5 12.5L9.2 16.7L19 7\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"1.8\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                ></path>\n              </svg>\n              <span\n                *ngIf=\"item.selectedDot\"\n                class=\"h-2 w-2 rounded-full bg-foreground\"\n              ></span>\n            </span>\n            <span class=\"min-w-0 flex-1 truncate text-foreground\">{{\n              item.label\n            }}</span>\n            <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{\n              item.shortcut\n            }}</span>\n            <svg\n              *ngIf=\"item.showChevron\"\n              viewBox=\"0 0 24 24\"\n              class=\"h-3.5 w-3.5 text-muted-foreground\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 6L15 12L9 18\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n        </ng-container>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], className: [{
@@ -2397,10 +2419,10 @@ class PdmTableComponent {
     }
     getVariantWrapperClasses() {
         if (this.variant === "interactive") {
-            return ["rounded-xl", "border", "border-border", "bg-background"];
+            return ["rounded-xl", "border border-solid", "border-border", "bg-background"];
         }
         if (this.variant === "data") {
-            return ["rounded-md", "border", "border-border", "bg-background"];
+            return ["rounded-md", "border border-solid", "border-border", "bg-background"];
         }
         return [];
     }
@@ -2725,10 +2747,10 @@ class PdmDataTableComponent {
     }
 }
 PdmDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 appearance-none box-border rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none box-border items-center gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none box-border items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 appearance-none box-border rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none box-border items-center gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none box-border items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], columns: [{
@@ -2987,7 +3009,7 @@ class PdmDatePickerComponent {
     get triggerClasses() {
         const focusStyle = this._open || this.triggerFocused;
         return [
-            "border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive relative flex w-full appearance-none items-center gap-2 overflow-hidden rounded-lg border bg-background px-3 py-[7.5px] text-left text-sm shadow-sm outline-none transition-colors",
+            "border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive relative flex w-full appearance-none box-border items-center gap-2 overflow-hidden rounded-lg border border-solid bg-background px-3 py-[7.5px] text-left text-sm shadow-sm outline-none transition-colors",
             "min-h-[36px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
             focusStyle ? "border-ring ring-2 ring-ring/50" : "",
             this.invalid ? "border-destructive ring-destructive/20" : "",
@@ -3440,7 +3462,7 @@ class PdmDialogComponent {
             Z_INDEX.modal,
             "flex",
             "flex-col",
-            "border",
+            "border border-solid",
             "border-border",
             "bg-background",
             "text-foreground",
@@ -3512,10 +3534,10 @@ 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\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", 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\" [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"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -3637,10 +3659,10 @@ class PdmDraggableTableComponent {
     }
     getVariantWrapperClasses() {
         if (this.variant === 'interactive') {
-            return ['rounded-xl', 'border', 'border-border', 'bg-background'];
+            return ['rounded-xl', 'border border-solid', 'border-border', 'bg-background'];
         }
         if (this.variant === 'data') {
-            return ['rounded-md', 'border', 'border-border', 'bg-background'];
+            return ['rounded-md', 'border border-solid', 'border-border', 'bg-background'];
         }
         return [];
     }
@@ -4010,10 +4032,10 @@ class PdmDropdownMenuComponent {
     }
 }
 PdmDropdownMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDropdownMenuComponent, selector: "pdm-dropdown-menu", inputs: { triggerText: "triggerText", variant: "variant", items: "items", closeOnSelect: "closeOnSelect", className: "className", panelClassName: "panelClassName", overlayOptions: "overlayOptions" }, outputs: { itemSelect: "itemSelect", itemsChange: "itemsChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    'inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDropdownMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDropdownMenuComponent, selector: "pdm-dropdown-menu", inputs: { triggerText: "triggerText", variant: "variant", items: "items", closeOnSelect: "closeOnSelect", className: "className", panelClassName: "panelClassName", overlayOptions: "overlayOptions" }, outputs: { itemSelect: "itemSelect", itemsChange: "itemsChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    'inline-flex h-9 appearance-none 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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none box-border cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDropdownMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    'inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pdm-dropdown-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #triggerEl\n  type=\"button\"\n  [ngClass]=\"[\n    '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 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    className\n  ]\"\n  [attr.aria-expanded]=\"open\"\n  (click)=\"toggle()\"\n>\n  {{ triggerText }}\n</button>\n\n<ng-template #panelTemplate>\n  <div\n    class=\"min-w-32 overflow-hidden rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md\"\n  >\n    <ng-container *ngFor=\"let item of resolvedItems\">\n      <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n      <div\n        *ngIf=\"item.type === 'label'\"\n        [ngClass]=\"['px-2 py-1.5 text-sm font-semibold text-foreground', item.inset ? 'pl-8' : '']\"\n      >\n        {{ item.label }}\n      </div>\n\n      <button\n        *ngIf=\"!item.type || item.type === 'item'\"\n        type=\"button\"\n        [disabled]=\"item.disabled\"\n        [ngClass]=\"[\n          'relative flex w-full appearance-none box-border cursor-default select-none items-center gap-2 rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50',\n          item.inset ? 'pl-8' : ''\n        ]\"\n        (click)=\"select(item)\"\n      >\n        <span class=\"inline-flex h-4 w-4 shrink-0 items-center justify-center\">\n          <svg\n            *ngIf=\"item.checked\"\n            viewBox=\"0 0 24 24\"\n            class=\"h-3.5 w-3.5 text-foreground\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n          <span *ngIf=\"item.radioSelected\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n        </span>\n        <span class=\"min-w-0 flex-1 truncate\">{{ item.label }}</span>\n        <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n        <span *ngIf=\"item.showChevron\" class=\"text-sm text-muted-foreground\">\u203A</span>\n      </button>\n    </ng-container>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], variant: [{
@@ -4147,7 +4169,7 @@ class PdmDrawerComponent {
         const base = [
             'absolute',
             'bg-background',
-            'border',
+            'border border-solid',
             'border-border',
             'shadow-lg',
             'overflow-auto'
@@ -4191,10 +4213,10 @@ class PdmDrawerComponent {
     }
 }
 PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", position: "position", size: "size", variant: "variant", className: "className", title: "title", description: "description", showHandle: "showHandle", showCloseButton: "showCloseButton", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, 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  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\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    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", position: "position", size: "size", variant: "variant", className: "className", title: "title", description: "description", showHandle: "showHandle", showCloseButton: "showCloseButton", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, 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  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \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\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\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    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none box-border rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none box-border rounded-md border border-solid border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none box-border rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\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    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-drawer', 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  <!-- Panel -->\n  <section [ngClass]=\"panelClassName\">\n    <!-- Handle visual (solo para bottom) -->\n    <div \n      *ngIf=\"showHandle && position === 'bottom'\" \n      class=\"mx-auto mb-4 mt-2 h-1 w-10 rounded-full bg-border\">\n    </div>\n\n    <!-- Header (opcional) -->\n    <div *ngIf=\"title || description || showCloseButton\" class=\"flex items-start justify-between gap-4 p-6 pb-4\">\n      <div *ngIf=\"title || description\" class=\"flex-1 min-w-0\">\n        <h3 *ngIf=\"title\" class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">\n          {{ title }}\n        </h3>\n        <p *ngIf=\"description\" class=\"m-0 mt-1 text-sm text-muted-foreground\">\n          {{ description }}\n        </p>\n      </div>\n      \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\"\n        (click)=\"close()\"\n        aria-label=\"Close drawer\"\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    <!-- Content -->\n    <div class=\"px-6 pb-6\">\n      <!-- Contenido gen\u00E9rico -->\n      <ng-container *ngIf=\"!showLegacyContent\">\n        <ng-content></ng-content>\n      </ng-container>\n\n      <!-- LEGACY: contenido espec\u00EDfico hardcodeado (backward compatibility) -->\n      <ng-container *ngIf=\"showLegacyContent\">\n        <!-- Variant: drawer -->\n        <div *ngIf=\"variant === 'drawer'\" class=\"mx-auto flex max-w-sm flex-col items-center\">\n          <div *ngIf=\"value !== ''\" class=\"mt-3 flex w-full items-center justify-center gap-4\">\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n            <div class=\"text-center\">\n              <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n              <div *ngIf=\"unit\" class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n            </div>\n            <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none box-border items-center justify-center rounded-full border border-solid border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n          </div>\n\n          <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n            <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n          </div>\n\n          <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none box-border rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n          <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none box-border rounded-md border border-solid border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n        </div>\n\n        <!-- Variant: responsive-dialog -->\n        <div *ngIf=\"variant === 'responsive-dialog'\" class=\"flex flex-col gap-3\">\n          <div *ngIf=\"nameLabel && nameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n          </div>\n          <div *ngIf=\"usernameLabel && usernameValue\">\n            <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n            <div class=\"h-8 rounded-md border border-solid border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n          </div>\n\n          <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none box-border rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n        </div>\n      </ng-container>\n    </div>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], position: [{
@@ -4272,7 +4294,7 @@ class PdmEmptyComponent {
     }
     get containerClass() {
         if (this.variant === 'outline') {
-            return 'border border-dashed border-border rounded-[12px]';
+            return 'border border-solid border-dashed border-border rounded-[12px]';
         }
         if (this.variant === 'background') {
             return 'rounded-[12px] bg-muted';
@@ -4281,10 +4303,10 @@ 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 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: PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: 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: PdmButtonComponent, selector: "pdm-button", inputs: ["type", "variant", "state", "size", "disabled", "loading", "className"], outputs: ["pressed"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: 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 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" }]
+            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" }]
         }], propDecorators: { variant: [{
                 type: Input
             }], title: [{
@@ -4538,10 +4560,10 @@ class PdmHoverCardComponent {
     }
 }
 PdmHoverCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, viewQueries: [{ propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()" } }, viewQueries: [{ propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-solid border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-hover-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: "pdm-hover-card", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n  (focusin)=\"onFocusIn()\"\n  (focusout)=\"onFocusOut()\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <section\n      [style.width.px]=\"panelWidth\"\n      class=\"rounded-md border border-solid border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content select=\"[pdmHoverContent]\"></ng-content>\n    </section>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { className: [{
                 type: Input
             }], panelClassName: [{
@@ -4617,10 +4639,10 @@ class PdmInputComponent {
     }
 }
 PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", 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", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 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\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground'\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", 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  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 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\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -4694,10 +4716,10 @@ class PdmInputPasswordComponent {
     }
 }
 PdmInputPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputPasswordComponent, selector: "pdm-input-password", inputs: { id: "id", 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  <div class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 file:text-foreground placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 pr-10 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        'text-foreground',\n        inputClassName\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"></path>\n        <path d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">{{ errorText }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmInputPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputPasswordComponent, selector: "pdm-input-password", inputs: { id: "id", 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  <div class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 file:text-foreground placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 pr-10 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        'text-foreground',\n        inputClassName,\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 appearance-none box-border items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path\n          d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"\n        ></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path\n          d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"\n        ></path>\n        <path\n          d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputPasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-input-password', 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  <div class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 file:text-foreground placeholder:text-muted-foreground w-full min-w-0 rounded-lg border bg-transparent px-3 py-1 pr-10 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        'text-foreground',\n        inputClassName\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"></path>\n        <path d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">{{ errorText }}</p>\n</div>\n" }]
+            args: [{ selector: 'pdm-input-password', 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 class=\"relative\">\n    <input\n      [id]=\"id\"\n      [type]=\"inputType\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 file:text-foreground placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 pr-10 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        'text-foreground',\n        inputClassName,\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n    <button\n      type=\"button\"\n      class=\"absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 appearance-none box-border items-center justify-center rounded border-0 bg-transparent p-0 text-muted-foreground outline-none transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-60\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"showPassword ? 'Hide password' : 'Show password'\"\n      (click)=\"toggleVisibility()\"\n    >\n      <svg\n        *ngIf=\"!showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path\n          d=\"M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0\"\n        ></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n      <svg\n        *ngIf=\"showPassword\"\n        aria-hidden=\"true\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"h-4 w-4\"\n      >\n        <path d=\"M3 3l18 18\"></path>\n        <path d=\"M10.58 10.58a2 2 0 1 0 2.83 2.83\"></path>\n        <path\n          d=\"M9.88 5.09A10.94 10.94 0 0 1 12 4.91c5.05 0 9.27 3.11 10.6 7.09a1 1 0 0 1 0 .64 11.9 11.9 0 0 1-1.84 3.2\"\n        ></path>\n        <path\n          d=\"M6.61 6.61A11.81 11.81 0 0 0 1.4 12a1 1 0 0 0 0 .64 11.83 11.83 0 0 0 8.79 7.54\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], value: [{
@@ -4757,10 +4779,10 @@ class PdmInputGroupComponent {
     }
 }
 PdmInputGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputGroupComponent, selector: "pdm-input-group", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", invalid: "invalid", prefixText: "prefixText", suffixText: "suffixText", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", buttonText: "buttonText", className: "className" }, outputs: { valueChange: "valueChange", buttonClick: "buttonClick" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex w-full flex-col items-stretch gap-2 sm:flex-row sm:items-center',\n    disabled ? 'opacity-50' : '',\n    className,\n  ]\"\n>\n  <div\n    [ngClass]=\"[\n      'flex h-9 min-w-0 flex-1 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: 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 items-center overflow-hidden rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50',\n      invalid ? 'border-destructive focus-within:ring-destructive' : '',\n      disabled ? 'cursor-not-allowed' : '',\n    ]\"\n  >\n    <div\n      *ngIf=\"prefixText || prefixIcon\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pr-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"prefixIcon\" [name]=\"prefixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"prefixText\">{{ prefixText }}</span>\n      <ng-content select=\"[pdmInputGroupPrefix]\"></ng-content>\n    </div>\n\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [attr.aria-invalid]=\"invalid\"\n      [ngClass]=\"[\n        'h-full min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-foreground outline-none placeholder:text-muted-foreground aria-invalid:placeholder:text-destructive/70',\n        type === 'file'\n          ? 'text-sm file:mr-2 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground'\n          : '',\n      ]\"\n      (input)=\"onInput($event)\"\n    />\n\n    <div\n      *ngIf=\"!buttonText && (suffixText || suffixIcon)\"\n      class=\"inline-flex h-full shrink-0 items-center gap-2 pl-2 text-sm text-muted-foreground\"\n    >\n      <pdm-icon *ngIf=\"suffixIcon\" [name]=\"suffixIcon\" [size]=\"16\"></pdm-icon>\n      <span *ngIf=\"suffixText\" class=\"font-medium\">{{ suffixText }}</span>\n      <ng-content select=\"[pdmInputGroupSuffix]\"></ng-content>\n    </div>\n  </div>\n\n  <button\n    *ngIf=\"buttonText\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    class=\"inline-flex h-9 w-full shrink-0 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed sm:w-auto\"\n    (click)=\"onButtonClick($event)\"\n  >\n    {{ buttonText }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
+            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"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -4797,14 +4819,14 @@ class PdmInputOtpComponent {
         this.groupSize = 3;
         this.disabled = false;
         this.invalid = false;
-        this.className = '';
+        this.className = "";
         this.valueChange = new EventEmitter();
         this.completed = new EventEmitter();
-        this.values = Array.from({ length: this.length }, () => '');
+        this.values = Array.from({ length: this.length }, () => "");
     }
     ngOnChanges() {
         if (this.values.length !== this.length) {
-            this.values = Array.from({ length: this.length }, (_, index) => this.values[index] ?? '');
+            this.values = Array.from({ length: this.length }, (_, index) => this.values[index] ?? "");
         }
     }
     trackByIndex(index) {
@@ -4812,7 +4834,7 @@ class PdmInputOtpComponent {
     }
     onInput(index, event) {
         const input = event.target;
-        const char = (input.value || '').replace(/\D+/g, '').slice(-1);
+        const char = (input.value || "").replace(/\D+/g, "").slice(-1);
         this.values[index] = char;
         input.value = char;
         this.emit();
@@ -4821,57 +4843,61 @@ class PdmInputOtpComponent {
         }
     }
     onKeyDown(index, event) {
-        if (event.key === 'Backspace' && !this.values[index]) {
+        if (event.key === "Backspace" && !this.values[index]) {
             this.focusInput(index - 1);
             return;
         }
-        if (event.key === 'ArrowLeft') {
+        if (event.key === "ArrowLeft") {
             event.preventDefault();
             this.focusInput(index - 1);
             return;
         }
-        if (event.key === 'ArrowRight') {
+        if (event.key === "ArrowRight") {
             event.preventDefault();
             this.focusInput(index + 1);
         }
     }
     onPaste(event) {
         event.preventDefault();
-        const pastedText = (event.clipboardData?.getData('text') ?? '').replace(/\D+/g, '').slice(0, this.length);
+        const pastedText = (event.clipboardData?.getData("text") ?? "")
+            .replace(/\D+/g, "")
+            .slice(0, this.length);
         if (!pastedText) {
             return;
         }
-        this.values = Array.from({ length: this.length }, (_, index) => pastedText[index] ?? '');
+        this.values = Array.from({ length: this.length }, (_, index) => pastedText[index] ?? "");
         this.emit();
         const nextIndex = Math.min(pastedText.length, this.length - 1);
         this.focusInput(nextIndex);
     }
     getInputClasses(index) {
         const classes = [
-            'h-9 w-9 appearance-none border bg-background text-center text-sm font-normal text-foreground outline-none transition focus:outline-none focus-visible:outline-none',
-            'shadow-sm',
-            'focus:border-input focus:ring-1 focus:ring-primary/30',
-            'disabled:cursor-not-allowed disabled:opacity-50',
+            "h-9 w-9 appearance-none box-border border border-solid bg-background text-center text-sm font-normal text-foreground outline-none transition focus:outline-none focus-visible:outline-none",
+            "shadow-sm",
+            "focus:border-input focus:ring-1 focus:ring-primary/30",
+            "disabled:cursor-not-allowed disabled:opacity-50",
         ];
         if (this.invalid) {
-            classes.push('border-destructive focus:border-destructive focus:ring-destructive');
+            classes.push("border-destructive focus:border-destructive focus:ring-destructive");
         }
         else {
-            classes.push('border-input');
+            classes.push("border-input");
         }
         if (this.isGroupStart(index)) {
-            classes.push('rounded-l-md border-l');
+            classes.push("rounded-l-md border-l");
         }
         else {
-            classes.push('border-l-0');
+            classes.push("border-l-0");
         }
         if (this.isGroupEnd(index)) {
-            classes.push('rounded-r-md');
+            classes.push("rounded-r-md");
         }
-        return classes.join(' ');
+        return classes.join(" ");
     }
     shouldShowSeparator(index) {
-        return this.groupSize > 0 && (index + 1) % this.groupSize === 0 && index < this.length - 1;
+        return (this.groupSize > 0 &&
+            (index + 1) % this.groupSize === 0 &&
+            index < this.length - 1);
     }
     isGroupStart(index) {
         return this.groupSize <= 0 || index % this.groupSize === 0;
@@ -4883,9 +4909,9 @@ class PdmInputOtpComponent {
         return (index + 1) % this.groupSize === 0 || index === this.length - 1;
     }
     emit() {
-        const value = this.values.join('');
+        const value = this.values.join("");
         this.valueChange.emit(value);
-        if (value.length === this.length && !this.values.includes('')) {
+        if (value.length === this.length && !this.values.includes("")) {
             this.completed.emit(value);
         }
     }
@@ -4908,7 +4934,7 @@ PdmInputOtpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", ver
 PdmInputOtpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputOtpComponent, selector: "pdm-input-otp", inputs: { length: "length", groupSize: "groupSize", disabled: "disabled", invalid: "invalid", className: "className" }, outputs: { valueChange: "valueChange", completed: "completed" }, viewQueries: [{ propertyName: "inputs", predicate: ["otpInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"['inline-flex items-center justify-center', className]\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let value of values; let index = index; trackBy: trackByIndex\">\n    <input\n      #otpInput\n      [class]=\"getInputClasses(index)\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      [attr.name]=\"'otp-digit-' + index\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-label]=\"'OTP digit ' + (index + 1)\"\n      (input)=\"onInput(index, $event)\"\n      (keydown)=\"onKeyDown(index, $event)\"\n    />\n    <span\n      *ngIf=\"shouldShowSeparator(index)\"\n      class=\"mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputOtpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-input-otp', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center justify-center', className]\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let value of values; let index = index; trackBy: trackByIndex\">\n    <input\n      #otpInput\n      [class]=\"getInputClasses(index)\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      [attr.name]=\"'otp-digit-' + index\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-label]=\"'OTP digit ' + (index + 1)\"\n      (input)=\"onInput(index, $event)\"\n      (keydown)=\"onKeyDown(index, $event)\"\n    />\n    <span\n      *ngIf=\"shouldShowSeparator(index)\"\n      class=\"mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n</div>\n" }]
+            args: [{ selector: "pdm-input-otp", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['inline-flex items-center justify-center', className]\" (paste)=\"onPaste($event)\">\n  <ng-container *ngFor=\"let value of values; let index = index; trackBy: trackByIndex\">\n    <input\n      #otpInput\n      [class]=\"getInputClasses(index)\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      inputmode=\"numeric\"\n      maxlength=\"1\"\n      [attr.name]=\"'otp-digit-' + index\"\n      autocomplete=\"off\"\n      autocapitalize=\"off\"\n      spellcheck=\"false\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-label]=\"'OTP digit ' + (index + 1)\"\n      (input)=\"onInput(index, $event)\"\n      (keydown)=\"onKeyDown(index, $event)\"\n    />\n    <span\n      *ngIf=\"shouldShowSeparator(index)\"\n      class=\"mx-2 mt-[-1px] h-px w-6 bg-foreground opacity-80\"\n      aria-hidden=\"true\"\n    ></span>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { length: [{
                 type: Input
             }], groupSize: [{
@@ -4925,7 +4951,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], inputs: [{
                 type: ViewChildren,
-                args: ['otpInput']
+                args: ["otpInput"]
             }] } });
 
 class PdmKbdComponent {
@@ -4934,10 +4960,10 @@ class PdmKbdComponent {
     }
 }
 PdmKbdComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmKbdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmKbdComponent, selector: "pdm-kbd", inputs: { className: "className" }, ngImport: i0, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmKbdComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmKbdComponent, selector: "pdm-kbd", inputs: { className: "className" }, ngImport: i0, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmKbdComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-kbd', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n" }]
+            args: [{ selector: 'pdm-kbd', changeDetection: ChangeDetectionStrategy.OnPush, template: "<kbd [ngClass]=\"['inline-flex h-6 min-w-6 items-center justify-center rounded-md border border-solid border-border bg-muted px-1.5 font-mono text-xs font-medium text-muted-foreground', className]\">\n  <ng-content></ng-content>\n</kbd>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }] } });
@@ -5057,10 +5083,10 @@ class PdmMenubarComponent {
     }
 }
 PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClickOrEsc()", "document:keydown.escape": "onDocumentClickOrEsc()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className", panelClassName: "panelClassName" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:click": "onDocumentClickOrEsc()", "document:keydown.escape": "onDocumentClickOrEsc()" } }, viewQueries: [{ propertyName: "menuTemplateRef", first: true, predicate: ["menuTemplate"], descendants: true }], ngImport: i0, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-solid border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none box-border items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-menubar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-menubar", changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  role=\"menubar\"\n  [ngClass]=\"[\n    'inline-flex h-9 items-center gap-0.5 rounded-md border border-solid border-border bg-background p-1 shadow-sm',\n    className,\n  ]\"\n>\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button\n      type=\"button\"\n      class=\"inline-flex h-7 appearance-none box-border items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n      [attr.aria-expanded]=\"openIndex === i\"\n      (click)=\"toggle(i, $event)\"\n    >\n      {{ menu.label }}\n    </button>\n  </div>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #menuTemplate>\n    <div\n      class=\"min-w-40 rounded-md border border-solid border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\"\n    >\n      <button\n        *ngFor=\"let item of menus[openIndex]?.items || []\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none box-border cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </ng-template>\n</nav>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menus: [{
                 type: Input
             }], className: [{
@@ -5096,10 +5122,10 @@ 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 rounded-md border 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: 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: 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 rounded-md border 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" }]
+            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" }]
         }], propDecorators: { id: [{
                 type: Input
             }], value: [{
@@ -5411,10 +5437,10 @@ 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 items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-select", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative', className || 'w-full']\">\n  <button\n    #triggerEl\n    type=\"button\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-expanded]=\"open\"\n    [attr.data-state]=\"open ? 'open' : 'closed'\"\n    aria-haspopup=\"listbox\"\n    (click)=\"toggle()\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive flex h-9 w-full appearance-none items-center justify-between rounded-md border bg-background px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n    ]\"\n  >\n    <span\n      [ngClass]=\"[\n        'min-w-0 flex-1 truncate text-left leading-5',\n        selectedOption\n          ? 'font-medium text-foreground'\n          : 'font-normal text-muted-foreground',\n      ]\"\n    >\n      {{ selectedLabel }}\n    </span>\n    <pdm-icon\n      name=\"chevron-down\"\n      [size]=\"16\"\n      className=\"shrink-0 text-muted-foreground\"\n    ></pdm-icon>\n  </button>\n\n  <!-- Hidden native select kept for screen-reader / form fallback -->\n  <select\n    class=\"sr-only\"\n    tabindex=\"-1\"\n    aria-hidden=\"true\"\n    [value]=\"value\"\n    (change)=\"onChange($event)\"\n  >\n    <option\n      *ngFor=\"let option of resolvedOptions\"\n      [value]=\"option.value\"\n      [disabled]=\"option.disabled\"\n    >\n      {{ option.label }}\n    </option>\n  </select>\n\n  <!-- Slot for content-projected pdm-select-option elements (hidden from layout) -->\n  <span class=\"hidden\">\n    <ng-content select=\"pdm-select-option\"></ng-content>\n  </span>\n</div>\n\n<ng-template #panelTemplate>\n  <div\n    role=\"listbox\"\n    [attr.aria-labelledby]=\"id || null\"\n    class=\"w-full overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md max-h-96\"\n  >\n    <button\n      *ngFor=\"let option of resolvedOptions\"\n      type=\"button\"\n      role=\"option\"\n      [attr.aria-selected]=\"option.value === value\"\n      [disabled]=\"option.disabled\"\n      (click)=\"selectOption(option)\"\n      [ngClass]=\"[\n        'flex w-full appearance-none items-center justify-between rounded-sm border-0 bg-transparent px-2 py-1.5 text-left text-sm outline-none transition-colors',\n        option.disabled\n          ? 'cursor-not-allowed opacity-50'\n          : 'hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground',\n        option.value === value ? 'text-foreground' : '',\n      ]\"\n    >\n      <span class=\"min-w-0 flex-1 truncate leading-5\">{{ option.label }}</span>\n      <span\n        *ngIf=\"option.value === value\"\n        class=\"ml-2 flex shrink-0 items-center justify-end\"\n      >\n        <pdm-icon\n          name=\"check\"\n          [size]=\"16\"\n          className=\"shrink-0 text-current\"\n        ></pdm-icon>\n      </span>\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+            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"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { id: [{
                 type: Input
             }], value: [{
@@ -5490,10 +5516,10 @@ 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 items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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        (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          (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        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }, { kind: "component", type: PdmSelectComponent, selector: "pdm-select", inputs: ["id", "value", "options", "disabled", "invalid", "className", "placeholder", "overlayOptions"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"Pagination\"\n  [ngClass]=\"[\n    'mx-auto flex w-full flex-wrap items-center justify-center gap-4',\n    className,\n  ]\"\n>\n  <div class=\"flex items-center gap-3\" *ngIf=\"rowsPerPageOptions.length > 0\">\n    <span class=\"text-sm font-medium text-foreground\">{{\n      rowsPerPageLabel\n    }}</span>\n    <pdm-select\n      [value]=\"rowsPerPageValue\"\n      [options]=\"rowsPerPageSelectOptions\"\n      [placeholder]=\"rowsPerPageValue\"\n      className=\"w-[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 items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page <= 1\"\n        (click)=\"setPage(page - 1)\"\n      >\n        <pdm-icon name=\"chevron-left\" [size]=\"14\"></pdm-icon>\n        Previous\n      </button>\n    </li>\n    <li *ngFor=\"let pageNumber of visiblePages\">\n      <ng-container *ngIf=\"pageNumber === 'ellipsis'; else pageButton\">\n        <span\n          class=\"inline-flex h-9 min-w-9 items-center justify-center px-2 text-sm text-muted-foreground\"\n          >...</span\n        >\n      </ng-container>\n      <ng-template #pageButton>\n        <button\n          type=\"button\"\n          [ngClass]=\"[\n            'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n            pageNumber === page\n              ? 'appearance-none border border-border bg-muted text-foreground shadow-sm'\n              : 'appearance-none border-0 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n          ]\"\n          (click)=\"setPage(+pageNumber)\"\n        >\n          {{ pageNumber }}\n        </button>\n      </ng-template>\n    </li>\n    <li>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center gap-1 rounded-md border-0 bg-transparent px-2 text-sm text-foreground hover:bg-accent disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        [disabled]=\"page >= pageCount\"\n        (click)=\"setPage(page + 1)\"\n      >\n        Next\n        <pdm-icon name=\"chevron-right\" [size]=\"14\"></pdm-icon>\n      </button>\n    </li>\n  </ul>\n</nav>\n" }]
+            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        (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          (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        (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" }]
         }], propDecorators: { page: [{
                 type: Input
             }], pageCount: [{
@@ -5643,10 +5669,10 @@ class PdmPopoverComponent {
     }
 }
 PdmPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, deps: [{ token: i1$1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmPopoverComponent, selector: "pdm-popover", inputs: { triggerText: "triggerText", className: "className", panelClassName: "panelClassName", showTrigger: "showTrigger", open: "open" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, viewQueries: [{ propertyName: "triggerRef", first: true, predicate: ["triggerEl"], descendants: true }, { propertyName: "panelTemplateRef", first: true, predicate: ["panelTemplate"], descendants: true }], ngImport: i0, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-solid border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmPopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-popover", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
+            args: [{ selector: "pdm-popover", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative inline-block\" [ngClass]=\"className\">\n  <button\n    #triggerEl\n    *ngIf=\"showTrigger\"\n    type=\"button\"\n    class=\"inline-flex h-9 appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-3 text-sm font-medium text-foreground shadow-sm\"\n    [attr.aria-expanded]=\"open\"\n    [attr.aria-haspopup]=\"'dialog'\"\n    (click)=\"toggle()\"\n  >\n    {{ triggerText }}\n  </button>\n\n  <!-- Trigger slot for custom trigger -->\n  <ng-content select=\"[pdmPopoverTrigger]\"></ng-content>\n\n  <!-- Template for CDK Overlay -->\n  <ng-template #panelTemplate>\n    <div\n      class=\"min-w-80 rounded-md border border-solid border-border bg-popover p-4 text-popover-foreground shadow-md\"\n    >\n      <ng-content></ng-content>\n    </div>\n  </ng-template>\n</div>\n", styles: [":host{display:inline-block}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { triggerText: [{
                 type: Input
             }], className: [{
@@ -5717,10 +5743,10 @@ class PdmRadioGroupComponent {
     }
 }
 PdmRadioGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmRadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmRadioGroupComponent, selector: "pdm-radio-group", inputs: { name: "name", value: "value", options: "options", direction: "direction", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2 text-sm',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-input bg-background peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary peer-checked:block\"></span>\n    </span>\n    <span class=\"text-foreground\">{{ option.label }}</span>\n  </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmRadioGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmRadioGroupComponent, selector: "pdm-radio-group", inputs: { name: "name", value: "value", options: "options", direction: "direction", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2 text-sm',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-solid border-input bg-background peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary peer-checked:block\"></span>\n    </span>\n    <span class=\"text-foreground\">{{ option.label }}</span>\n  </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmRadioGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2 text-sm',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-input bg-background peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary peer-checked:block\"></span>\n    </span>\n    <span class=\"text-foreground\">{{ option.label }}</span>\n  </label>\n</div>\n" }]
+            args: [{ selector: 'pdm-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  role=\"radiogroup\"\n  [ngClass]=\"[\n    'gap-2 text-sm',\n    direction === 'horizontal' ? 'inline-flex items-center' : 'grid',\n    className\n  ]\"\n>\n  <label *ngFor=\"let option of options\" [attr.for]=\"optionId(option)\" class=\"inline-flex cursor-pointer items-center gap-2\">\n    <input\n      [id]=\"optionId(option)\"\n      type=\"radio\"\n      [name]=\"name\"\n      [value]=\"option.value\"\n      [checked]=\"value === option.value\"\n      [disabled]=\"option.disabled\"\n      class=\"peer sr-only\"\n      (change)=\"onChange($event)\"\n    />\n    <span class=\"relative block h-4 w-4 rounded-full border border-solid border-input bg-background peer-checked:border-primary peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background\">\n      <span class=\"absolute left-1/2 top-1/2 hidden h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary peer-checked:block\"></span>\n    </span>\n    <span class=\"text-foreground\">{{ option.label }}</span>\n  </label>\n</div>\n" }]
         }], propDecorators: { name: [{
                 type: Input
             }], value: [{
@@ -5742,10 +5768,10 @@ class PdmScrollAreaComponent {
     }
 }
 PdmScrollAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmScrollAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmScrollAreaComponent, selector: "pdm-scroll-area", inputs: { maxHeight: "maxHeight", className: "className" }, ngImport: i0, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-md border border-border', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmScrollAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmScrollAreaComponent, selector: "pdm-scroll-area", inputs: { maxHeight: "maxHeight", className: "className" }, ngImport: i0, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-md border border-solid border-border', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmScrollAreaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-md border border-border', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-scroll-area', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.maxHeight]=\"maxHeight\" [ngClass]=\"['relative overflow-auto rounded-md border border-solid border-border', className]\">\n  <div class=\"p-3\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], propDecorators: { maxHeight: [{
                 type: Input
             }], className: [{
@@ -5864,10 +5890,10 @@ 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 border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", 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: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute z-[60] border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none 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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], side: [{
@@ -5988,10 +6014,10 @@ class PdmSliderComponent {
     }
 }
 PdmSliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSliderComponent, selector: "pdm-slider", inputs: { min: "min", max: "max", step: "step", value: "value", disabled: "disabled", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted\"></div>\n  <div class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-foreground\" [style.width.%]=\"percentage\"></div>\n  <div class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-foreground bg-background shadow-sm\" [style.left.%]=\"percentage\"></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSliderComponent, selector: "pdm-slider", inputs: { min: "min", max: "max", step: "step", value: "value", disabled: "disabled", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div\n    class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted\"\n  ></div>\n  <div\n    class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-foreground\"\n    [style.width.%]=\"percentage\"\n  ></div>\n  <div\n    class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid border-foreground bg-background shadow-sm\"\n    [style.left.%]=\"percentage\"\n  ></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full appearance-none box-border cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSliderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-slider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted\"></div>\n  <div class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-foreground\" [style.width.%]=\"percentage\"></div>\n  <div class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-foreground bg-background shadow-sm\" [style.left.%]=\"percentage\"></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n" }]
+            args: [{ selector: 'pdm-slider', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative h-5 w-full', className]\">\n  <div\n    class=\"absolute left-0 right-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-muted\"\n  ></div>\n  <div\n    class=\"absolute left-0 top-1/2 h-1 -translate-y-1/2 rounded-full bg-foreground\"\n    [style.width.%]=\"percentage\"\n  ></div>\n  <div\n    class=\"absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border border-solid border-foreground bg-background shadow-sm\"\n    [style.left.%]=\"percentage\"\n  ></div>\n  <input\n    type=\"range\"\n    [min]=\"min\"\n    [max]=\"max\"\n    [step]=\"step\"\n    [value]=\"value\"\n    [disabled]=\"disabled\"\n    class=\"absolute inset-0 h-full w-full appearance-none box-border cursor-pointer opacity-0 disabled:cursor-not-allowed\"\n    (input)=\"onInput($event)\"\n  />\n</div>\n" }]
         }], propDecorators: { min: [{
                 type: Input
             }], max: [{
@@ -6027,10 +6053,10 @@ 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 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 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: 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: 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 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 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" }]
+            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" }]
         }], propDecorators: { title: [{
                 type: Input
             }], description: [{
@@ -6061,8 +6087,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmSwitchComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
+    constructor() {
+        this.cdr = inject(ChangeDetectorRef);
         this.id = "";
         this.checked = false;
         this.disabled = false;
@@ -6073,14 +6099,14 @@ class PdmSwitchComponent {
     }
     get rootClasses() {
         return [
-            "peer relative inline-flex appearance-none shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
+            "peer relative inline-flex appearance-none box-border shrink-0 items-center justify-start rounded-full border border-solid border-transparent p-0 outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50",
             this.size === "sm" ? "h-[14px] w-[24px]" : "h-[18.4px] w-[32px]",
             this.checked ? "bg-primary" : "bg-input dark:bg-input/80",
         ];
     }
     get thumbClasses() {
         return [
-            "pointer-events-none self-center block rounded-full bg-background ring-0 transition-transform",
+            "pointer-events-none self-center block shrink-0 rounded-full bg-background ring-0 transition-transform",
             this.size === "sm" ? "size-3" : "size-4",
             this.checked ? "translate-x-[calc(100%-2px)]" : "translate-x-0",
         ];
@@ -6094,12 +6120,12 @@ class PdmSwitchComponent {
         this.cdr.markForCheck();
     }
 }
-PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className", size: "size" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n    [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n    [attr.data-size]=\"size\"\n    [attr.data-slot]=\"'switch'\"\n    [attr.value]=\"checked ? 'on' : 'off'\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"rootClasses\"\n    (click)=\"onToggle()\"\n  >\n    <span\n      [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n      [attr.data-slot]=\"'switch-thumb'\"\n      [ngClass]=\"thumbClasses\"\n    ></span>\n  </button>\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [attr.data-slot]=\"'label'\"\n    class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n    (click)=\"onToggle()\"\n  >\n    {{ label }}\n  </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
             type: Component,
             args: [{ selector: "pdm-switch", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n    [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n    [attr.data-size]=\"size\"\n    [attr.data-slot]=\"'switch'\"\n    [attr.value]=\"checked ? 'on' : 'off'\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"rootClasses\"\n    (click)=\"onToggle()\"\n  >\n    <span\n      [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n      [attr.data-slot]=\"'switch-thumb'\"\n      [ngClass]=\"thumbClasses\"\n    ></span>\n  </button>\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [attr.data-slot]=\"'label'\"\n    class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n    (click)=\"onToggle()\"\n  >\n    {{ label }}\n  </label>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
+        }], propDecorators: { id: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -6132,10 +6158,10 @@ class PdmTabsComponent {
     }
 }
 PdmTabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none box-border flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-solid border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTabsComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-tabs", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-tabs", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none box-border flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-solid border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], value: [{
@@ -6168,10 +6194,10 @@ class PdmTextareaComponent {
     }
 }
 PdmTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTextareaComponent, selector: "pdm-textarea", inputs: { id: "id", value: "value", placeholder: "placeholder", rows: "rows", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", className: "className", textareaClassName: "textareaClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-2', 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  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground flex min-h-20 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n      textareaClassName\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">{{ errorText }}</p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTextareaComponent, selector: "pdm-textarea", inputs: { id: "id", value: "value", placeholder: "placeholder", rows: "rows", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", className: "className", textareaClassName: "textareaClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-2', 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  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground flex min-h-20 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n      textareaClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTextareaComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-2', 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  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground flex min-h-20 w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n      textareaClassName\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">{{ helperText }}</p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">{{ errorText }}</p>\n</div>\n" }]
+            args: [{ selector: 'pdm-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-2', 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  <textarea\n    [id]=\"id\"\n    [rows]=\"rows\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground flex min-h-20 w-full appearance-none box-border rounded-md border border-solid bg-transparent px-3 py-2 text-sm shadow-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',\n      textareaClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n  ></textarea>\n  <p *ngIf=\"!invalid && helperText\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n" }]
         }], propDecorators: { id: [{
                 type: Input
             }], value: [{
@@ -6224,10 +6250,10 @@ class PdmToggleComponent {
     }
 }
 PdmToggleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleComponent, selector: "pdm-toggle", inputs: { pressed: "pressed", disabled: "disabled", size: "size", className: "className" }, outputs: { pressedChange: "pressedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex appearance-none items-center justify-center gap-2 rounded-md border-0 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    sizeClass,\n    pressed\n      ? 'bg-accent text-accent-foreground'\n      : 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n    className\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmToggleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleComponent, selector: "pdm-toggle", inputs: { pressed: "pressed", disabled: "disabled", size: "size", className: "className" }, outputs: { pressedChange: "pressedChange" }, ngImport: i0, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex appearance-none box-border items-center justify-center gap-2 rounded-md border-0 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    sizeClass,\n    pressed\n      ? 'bg-accent text-accent-foreground'\n      : 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n    className,\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex appearance-none items-center justify-center gap-2 rounded-md border-0 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    sizeClass,\n    pressed\n      ? 'bg-accent text-accent-foreground'\n      : 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n    className\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'pdm-toggle', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [disabled]=\"disabled\"\n  [attr.aria-pressed]=\"pressed\"\n  [ngClass]=\"[\n    'inline-flex appearance-none box-border items-center justify-center gap-2 rounded-md border-0 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50',\n    'ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    sizeClass,\n    pressed\n      ? 'bg-accent text-accent-foreground'\n      : 'bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground',\n    className,\n  ]\"\n  (click)=\"toggle()\"\n>\n  <ng-content></ng-content>\n</button>\n" }]
         }], propDecorators: { pressed: [{
                 type: Input
             }], disabled: [{
@@ -6254,10 +6280,10 @@ class PdmToggleGroupComponent {
     }
 }
 PdmToggleGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleGroupComponent, selector: "pdm-toggle-group", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmToggleGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmToggleGroupComponent, selector: "pdm-toggle-group", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-solid border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmToggleGroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-toggle-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-toggle-group", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [ngClass]=\"[\n    'flex flex-wrap items-center rounded-md border border-solid border-border p-1 gap-1',\n    className,\n  ]\"\n  role=\"group\"\n>\n  <button\n    *ngFor=\"let item of items\"\n    type=\"button\"\n    [disabled]=\"item.disabled\"\n    [attr.aria-pressed]=\"item.value === value\"\n    [ngClass]=\"[\n      'inline-flex h-8 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent px-2.5 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n      item.value === value\n        ? 'bg-accent text-accent-foreground'\n        : 'text-foreground hover:bg-accent hover:text-accent-foreground',\n    ]\"\n    (click)=\"onSelect(item.value, item.disabled)\"\n  >\n    {{ item.label }}\n  </button>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], value: [{