pdm-ui-kit 0.1.50 → 0.2.0

package/fesm2020/pdm-ui-kit.mjs

@@ -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-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmAlertDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmAlertDialogComponent, selector: "pdm-alert-dialog", inputs: { open: "open", showTrigger: "showTrigger", triggerText: "triggerText", title: "title", description: "description", confirmText: "confirmText", cancelText: "cancelText", className: "className", closeOnEsc: "closeOnEsc" }, outputs: { openChange: "openChange", confirm: "confirm", cancel: "cancel" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-[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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmAlertDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-alert-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"showTrigger && !open\"\n  type=\"button\"\n  class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n  (click)=\"onTriggerClick()\"\n>\n  {{ triggerText }}\n</button>\n\n<div *ngIf=\"open\" class=\"fixed inset-0 z-50 flex items-center justify-center p-5\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onCancel()\"></div>\n  <section\n    role=\"alertdialog\"\n    aria-modal=\"true\"\n    [ngClass]=\"[\n      'relative z-10 w-full max-w-lg rounded-lg border border-border bg-background p-6 text-foreground shadow-lg',\n      className\n    ]\"\n  >\n    <div class=\"flex flex-col gap-2\">\n      <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight\">{{ title }}</h2>\n      <p *ngIf=\"description\" class=\"m-0 text-sm text-muted-foreground\">{{ description }}</p>\n    </div>\n    <div class=\"mt-4 flex items-center justify-end gap-2\">\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm\"\n        (click)=\"onCancel()\"\n      >\n        {{ cancelText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm\"\n        (click)=\"onConfirm()\"\n      >\n        {{ confirmText }}\n      </button>\n    </div>\n  </section>\n</div>\n" }]
+            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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], showTrigger: [{
@@ -255,30 +255,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Breadcrumb component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Modo responsive real con overflow-x-auto
+ * - Collapse inteligente en mobile
+ *
+ * @example
+ * <pdm-breadcrumb
+ *   mode="responsive"
+ *   [items]="['Home', 'Products', 'Electronics', 'Laptops']">
+ * </pdm-breadcrumb>
+ */
 class PdmBreadcrumbComponent {
     constructor() {
         this.mode = 'link-component';
         this.items = ['Home', 'Components', 'Breadcrumb'];
         this.className = '';
+        /**
+         * Cantidad mínima de items para mostrar en mobile cuando mode="responsive"
+         * Default: 2 (primer y último item)
+         */
+        this.minItemsMobile = 2;
     }
     get renderedItems() {
-        if ((this.mode === 'collapsed' || this.mode === 'responsive') && this.items.length > 3) {
+        if (this.mode === 'collapsed' && this.items.length > 3) {
             return [this.items[0], '...', this.items[this.items.length - 2], this.items[this.items.length - 1]];
         }
+        // Responsive mode: no collapse en el TS, se maneja en el template con CSS
         return this.items;
     }
+    /**
+     * Determina si un item debe estar visible en mobile (modo responsive)
+     */
+    shouldShowInMobile(index) {
+        if (this.mode !== 'responsive')
+            return true;
+        const totalItems = this.items.length;
+        if (totalItems <= this.minItemsMobile)
+            return true;
+        // Siempre mostrar primero y último
+        return index === 0 || index === totalItems - 1;
+    }
 }
 PdmBreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBreadcrumbComponent, selector: "pdm-breadcrumb", inputs: { mode: "mode", items: "items", className: "className" }, ngImport: i0, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"['inline-flex items-center gap-1.5 text-sm', className]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <span [ngClass]=\"[last ? 'text-foreground' : 'text-muted-foreground']\">{{ item }}</span>\n\n    <ng-container *ngIf=\"!last\">\n      <span class=\"inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\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 d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\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 d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\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 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmBreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmBreadcrumbComponent, selector: "pdm-breadcrumb", inputs: { mode: "mode", items: "items", className: "className", minItemsMobile: "minItemsMobile" }, ngImport: i0, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"[\n    'inline-flex items-center gap-1.5 text-sm',\n    mode === 'responsive' ? 'overflow-x-auto max-w-full pb-1 scrollbar-thin' : '',\n    className\n  ]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <!-- Item text -->\n    <span \n      [ngClass]=\"[\n        last ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground transition-colors cursor-pointer',\n        mode === 'responsive' && !shouldShowInMobile(i) ? 'hidden sm:inline' : '',\n        'whitespace-nowrap'\n      ]\">\n      {{ item }}\n    </span>\n\n    <!-- Separator -->\n    <ng-container *ngIf=\"!last\">\n      <span \n        [ngClass]=\"[\n          'inline-flex h-6 w-6 flex-shrink-0 items-center justify-center text-muted-foreground',\n          mode === 'responsive' && !shouldShowInMobile(i) && !shouldShowInMobile(i + 1) ? 'hidden sm:inline-flex' : ''\n        ]\" \n        aria-hidden=\"true\">\n        <!-- Custom separator (slash) -->\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\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 d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        \n        <!-- Default separator (chevron) -->\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\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 d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      \n      <!-- Ellipsis indicator for responsive mode (only shown when items are hidden) -->\n      <span \n        *ngIf=\"mode === 'responsive' && !shouldShowInMobile(i) && i === 0\"\n        class=\"inline-flex sm:hidden text-muted-foreground\">\n        ...\n      </span>\n    </ng-container>\n\n    <!-- Dropdown indicator -->\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\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 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmBreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"['inline-flex items-center gap-1.5 text-sm', className]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <span [ngClass]=\"[last ? 'text-foreground' : 'text-muted-foreground']\">{{ item }}</span>\n\n    <ng-container *ngIf=\"!last\">\n      <span class=\"inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\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 d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\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 d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\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 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\n" }]
+            args: [{ selector: 'pdm-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  aria-label=\"breadcrumb\"\n  [ngClass]=\"[\n    'inline-flex items-center gap-1.5 text-sm',\n    mode === 'responsive' ? 'overflow-x-auto max-w-full pb-1 scrollbar-thin' : '',\n    className\n  ]\"\n>\n  <ng-container *ngFor=\"let item of renderedItems; let i = index; let last = last\">\n    <!-- Item text -->\n    <span \n      [ngClass]=\"[\n        last ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground transition-colors cursor-pointer',\n        mode === 'responsive' && !shouldShowInMobile(i) ? 'hidden sm:inline' : '',\n        'whitespace-nowrap'\n      ]\">\n      {{ item }}\n    </span>\n\n    <!-- Separator -->\n    <ng-container *ngIf=\"!last\">\n      <span \n        [ngClass]=\"[\n          'inline-flex h-6 w-6 flex-shrink-0 items-center justify-center text-muted-foreground',\n          mode === 'responsive' && !shouldShowInMobile(i) && !shouldShowInMobile(i + 1) ? 'hidden sm:inline-flex' : ''\n        ]\" \n        aria-hidden=\"true\">\n        <!-- Custom separator (slash) -->\n        <svg\n          *ngIf=\"mode === 'custom-separator' && item !== '...'\"\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 d=\"M8 20L16 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\n        </svg>\n        \n        <!-- Default separator (chevron) -->\n        <svg\n          *ngIf=\"(mode !== 'custom-separator' && item !== '...') || item === '...'\"\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 d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n      \n      <!-- Ellipsis indicator for responsive mode (only shown when items are hidden) -->\n      <span \n        *ngIf=\"mode === 'responsive' && !shouldShowInMobile(i) && i === 0\"\n        class=\"inline-flex sm:hidden text-muted-foreground\">\n        ...\n      </span>\n    </ng-container>\n\n    <!-- Dropdown indicator -->\n    <ng-container *ngIf=\"mode === 'dropdown' && i === 1 && item !== '...' && !last\">\n      <span class=\"-ml-2 inline-flex h-6 w-6 items-center justify-center text-muted-foreground\" aria-hidden=\"true\">\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 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n        </svg>\n      </span>\n    </ng-container>\n  </ng-container>\n</nav>\n" }]
         }], propDecorators: { mode: [{
                 type: Input
             }], items: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], minItemsMobile: [{
+                type: Input
             }] } });
 
 class PdmButtonGroupComponent {
@@ -1058,10 +1091,10 @@ class PdmCalendarComponent {
     }
 }
 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.ɵ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-[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-[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 });
+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-[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-[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" }]
+            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: [{
                 type: Input
             }], className: [{
@@ -1199,66 +1232,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Card component - Visual container primitivo
+ *
+ * BREAKING CHANGE en v0.2.0: variant="login" eliminado.
+ * Card es ahora un componente UI puro sin lógica de negocio.
+ *
+ * Para crear un login form, componer con primitivos:
+ *
+ * @example
+ * <pdm-card>
+ *   <div pdmCardHeader>
+ *     <h3 class="text-lg font-semibold">Login</h3>
+ *     <p class="text-sm text-muted-foreground">Enter your credentials</p>
+ *   </div>
+ *   <div pdmCardContent>
+ *     <form [formGroup]="form">
+ *       <pdm-field>
+ *         <pdm-label>Email</pdm-label>
+ *         <pdm-input type="email" formControlName="email" />
+ *       </pdm-field>
+ *       <pdm-field>
+ *         <pdm-label>Password</pdm-label>
+ *         <pdm-input-password formControlName="password" />
+ *       </pdm-field>
+ *     </form>
+ *   </div>
+ *   <div pdmCardFooter>
+ *     <pdm-button (click)="onLogin()">Login</pdm-button>
+ *   </div>
+ * </pdm-card>
+ */
 class PdmCardComponent {
     constructor() {
-        this.variant = 'default';
         this.className = '';
-        this.title = 'Login to your account';
-        this.description = 'Enter your email below to login to your account';
-        this.actionText = 'Sign up';
-        this.emailLabel = 'Email';
-        this.emailPlaceholder = 'm@example.com';
-        this.passwordLabel = 'Password';
-        this.passwordHint = 'Forgot password?';
-        this.primaryActionText = 'Login';
-        this.secondaryActionText = 'Login with Google';
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-        this.actionPressed = new EventEmitter();
-    }
-    onPrimaryAction() {
-        this.primaryAction.emit();
-    }
-    onSecondaryAction() {
-        this.secondaryAction.emit();
-    }
-    onActionPressed() {
-        this.actionPressed.emit();
     }
 }
 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: { variant: "variant", className: "className", title: "title", description: "description", actionText: "actionText", emailLabel: "emailLabel", emailPlaceholder: "emailPlaceholder", passwordLabel: "passwordLabel", passwordHint: "passwordHint", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionPressed: "actionPressed" }, 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  <ng-container *ngIf=\"variant === 'login'; else defaultCard\">\n    <div class=\"flex w-full items-start gap-1.5 px-6\">\n      <div class=\"min-w-0 flex-1\">\n        <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h3>\n        <p class=\"m-0 mt-1.5 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border-0 bg-transparent px-4 py-2 text-sm font-medium text-foreground\"\n        (click)=\"onActionPressed()\"\n      >\n        {{ actionText }}\n      </button>\n    </div>\n\n    <div class=\"mt-6 flex flex-col gap-4 px-6\">\n      <div class=\"w-full\">\n        <label class=\"mb-3 block text-sm font-medium text-foreground\">{{ emailLabel }}</label>\n        <input\n          type=\"email\"\n          [placeholder]=\"emailPlaceholder\"\n          class=\"h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        />\n      </div>\n\n      <div class=\"w-full\">\n        <div class=\"mb-3 flex w-full items-center justify-between gap-4\">\n          <label class=\"text-sm font-medium text-foreground\">{{ passwordLabel }}</label>\n          <button type=\"button\" class=\"appearance-none border-0 bg-transparent p-0 text-sm text-foreground\">\n            {{ passwordHint }}\n          </button>\n        </div>\n        <input\n          type=\"password\"\n          class=\"h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mt-6 flex w-full flex-col gap-2 px-6\">\n      <button\n        type=\"button\"\n        class=\"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\"\n        (click)=\"onPrimaryAction()\"\n      >\n        {{ primaryActionText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"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\"\n        (click)=\"onSecondaryAction()\"\n      >\n        {{ secondaryActionText }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultCard>\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  </ng-template>\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"] }], 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-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  <ng-container *ngIf=\"variant === 'login'; else defaultCard\">\n    <div class=\"flex w-full items-start gap-1.5 px-6\">\n      <div class=\"min-w-0 flex-1\">\n        <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h3>\n        <p class=\"m-0 mt-1.5 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        type=\"button\"\n        class=\"inline-flex h-9 appearance-none items-center justify-center rounded-md border-0 bg-transparent px-4 py-2 text-sm font-medium text-foreground\"\n        (click)=\"onActionPressed()\"\n      >\n        {{ actionText }}\n      </button>\n    </div>\n\n    <div class=\"mt-6 flex flex-col gap-4 px-6\">\n      <div class=\"w-full\">\n        <label class=\"mb-3 block text-sm font-medium text-foreground\">{{ emailLabel }}</label>\n        <input\n          type=\"email\"\n          [placeholder]=\"emailPlaceholder\"\n          class=\"h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        />\n      </div>\n\n      <div class=\"w-full\">\n        <div class=\"mb-3 flex w-full items-center justify-between gap-4\">\n          <label class=\"text-sm font-medium text-foreground\">{{ passwordLabel }}</label>\n          <button type=\"button\" class=\"appearance-none border-0 bg-transparent p-0 text-sm text-foreground\">\n            {{ passwordHint }}\n          </button>\n        </div>\n        <input\n          type=\"password\"\n          class=\"h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mt-6 flex w-full flex-col gap-2 px-6\">\n      <button\n        type=\"button\"\n        class=\"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\"\n        (click)=\"onPrimaryAction()\"\n      >\n        {{ primaryActionText }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"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\"\n        (click)=\"onSecondaryAction()\"\n      >\n        {{ secondaryActionText }}\n      </button>\n    </div>\n  </ng-container>\n\n  <ng-template #defaultCard>\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  </ng-template>\n</section>\n" }]
-        }], propDecorators: { variant: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], description: [{
-                type: Input
-            }], actionText: [{
-                type: Input
-            }], emailLabel: [{
-                type: Input
-            }], emailPlaceholder: [{
-                type: Input
-            }], passwordLabel: [{
-                type: Input
-            }], passwordHint: [{
-                type: Input
-            }], primaryActionText: [{
-                type: Input
-            }], secondaryActionText: [{
+            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" }]
+        }], propDecorators: { className: [{
                 type: Input
-            }], primaryAction: [{
-                type: Output
-            }], secondaryAction: [{
-                type: Output
-            }], actionPressed: [{
-                type: Output
             }] } });
 
 class PdmChartComponent {
@@ -1753,10 +1769,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-72 overflow-y-auto p-1\">\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\">{{ 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 });
 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-72 overflow-y-auto p-1\">\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\">{{ 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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], hintLabel: [{
@@ -1839,10 +1855,10 @@ class PdmContextMenuComponent {
     }
 }
 PdmContextMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-50 w-52 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmContextMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmContextMenuComponent, selector: "pdm-context-menu", inputs: { items: "items", className: "className", triggerLabel: "triggerLabel", width: "width", height: "height" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-[70] min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmContextMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-50 w-52 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"relative\" [ngClass]=\"className\" (contextmenu)=\"onContextMenu($event)\">\n  <div\n    class=\"flex items-center justify-center rounded-md border border-dashed border-border\"\n    [style.width.px]=\"width\"\n    [style.height.px]=\"height\"\n  >\n    <span class=\"text-sm font-medium text-foreground\">{{ triggerLabel }}</span>\n  </div>\n\n  <div\n    *ngIf=\"open\"\n    class=\"fixed z-[70] min-w-48 max-w-xs rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-52\"\n    [style.left.px]=\"x + 4\"\n    [style.top.px]=\"y + 2\"\n  >\n    <div>\n      <ng-container *ngFor=\"let item of items\">\n        <div *ngIf=\"item.type === 'separator'\" class=\"-mx-1 my-1 h-px bg-muted\"></div>\n\n        <div *ngIf=\"item.type === 'label'\" class=\"px-2 py-1.5 text-sm font-semibold text-foreground\">\n          {{ item.label }}\n        </div>\n\n        <button\n          *ngIf=\"!item.type || item.type === 'item'\"\n          type=\"button\"\n          [disabled]=\"item.disabled\"\n          class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent py-1.5 pr-2 text-left text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n          [ngClass]=\"item.inset ? 'pl-8' : 'px-2'\"\n          (click)=\"select(item)\"\n        >\n          <span class=\"mr-2 inline-flex w-4 shrink-0 items-center justify-center text-foreground\">\n            <svg *ngIf=\"item.checked\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n            <span *ngIf=\"item.selectedDot\" class=\"h-2 w-2 rounded-full bg-foreground\"></span>\n          </span>\n          <span class=\"min-w-0 flex-1 truncate text-foreground\">{{ item.label }}</span>\n          <span *ngIf=\"item.shortcut\" class=\"text-xs text-muted-foreground\">{{ item.shortcut }}</span>\n          <svg *ngIf=\"item.showChevron\" viewBox=\"0 0 24 24\" class=\"h-3.5 w-3.5 text-muted-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M9 6L15 12L9 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n          </svg>\n        </button>\n      </ng-container>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { items: [{
                 type: Input
             }], className: [{
@@ -1860,31 +1876,459 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Sistema de responsive utilities para PDM UI Kit
+ *
+ * Proporciona constantes, tipos y helpers para manejar responsive design
+ * de forma consistente en todos los componentes.
+ */
+/**
+ * Breakpoints estándar de Tailwind CSS
+ * Mobile-first approach: los estilos base son para mobile, los breakpoints son MIN-WIDTH
+ */
+const BREAKPOINTS = {
+    sm: '640px',
+    md: '768px',
+    lg: '1024px',
+    xl: '1280px',
+    '2xl': '1536px' // extra large desktop
+};
+/**
+ * Helper para generar clases responsive de forma programática
+ *
+ * @example
+ * responsive({ default: 'block', sm: 'flex', lg: 'grid' })
+ * // Returns: 'block sm:flex lg:grid'
+ */
+function responsive(config) {
+    const classes = [];
+    if (config.default) {
+        classes.push(config.default);
+    }
+    ['sm', 'md', 'lg', 'xl', '2xl'].forEach(bp => {
+        if (config[bp]) {
+            classes.push(`${bp}:${config[bp]}`);
+        }
+    });
+    return classes.join(' ');
+}
+/**
+ * Helper para overflow responsive
+ * Maneja el caso común de scroll en mobile, auto en desktop
+ *
+ * @example
+ * overflowResponsive('x', 'scroll', 'auto')
+ * // Returns: 'overflow-x-scroll sm:overflow-x-auto'
+ */
+function overflowResponsive(axis, mobile, desktop) {
+    const axisClass = axis === 'both' ? 'overflow' : `overflow-${axis}`;
+    const mobileClass = `${axisClass}-${mobile}`;
+    if (!desktop || desktop === mobile) {
+        return mobileClass;
+    }
+    return `${mobileClass} sm:${axisClass}-${desktop}`;
+}
+/**
+ * Helper para spacing responsive
+ * Útil para padding/margin que necesita ajustarse por breakpoint
+ *
+ * @example
+ * spacingResponsive('px', { default: '4', sm: '6', lg: '8' })
+ * // Returns: 'px-4 sm:px-6 lg:px-8'
+ */
+function spacingResponsive(property, values) {
+    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
+        acc[key] = `${property}-${value}`;
+        return acc;
+    }, {}));
+}
+/**
+ * Helper para width responsive
+ *
+ * @example
+ * widthResponsive({ default: 'full', sm: 'auto', lg: '1/2' })
+ * // Returns: 'w-full sm:w-auto lg:w-1/2'
+ */
+function widthResponsive(values) {
+    return responsive(Object.entries(values).reduce((acc, [key, value]) => {
+        acc[key] = `w-${value}`;
+        return acc;
+    }, {}));
+}
+/**
+ * Clases comunes para containers responsive
+ * Pensadas para wrappers que contienen contenido que puede desbordar
+ */
+const RESPONSIVE_CONTAINER = {
+    // Container con scroll horizontal en mobile, contenido visible en desktop
+    tableWrapper: 'relative w-full overflow-x-auto sm:overflow-x-visible',
+    // Container con padding negativo en mobile para scroll edge-to-edge
+    tableWrapperFullBleed: 'relative w-full -mx-4 px-4 overflow-x-auto sm:mx-0 sm:px-0 sm:overflow-x-visible',
+    // Container con max-width responsive
+    contentWrapper: 'w-full mx-auto px-4 sm:px-6 lg:px-8 max-w-screen-2xl',
+    // Container para modals/dialogs
+    modalWrapper: 'w-full max-w-lg mx-auto px-4 sm:px-0',
+    // Container para forms
+    formWrapper: 'w-full max-w-md mx-auto space-y-4'
+};
+/**
+ * Clases comunes para display responsive
+ */
+const RESPONSIVE_DISPLAY = {
+    // Ocultar en mobile, mostrar en desktop
+    hideOnMobile: 'hidden sm:block',
+    // Mostrar solo en mobile
+    showOnMobile: 'block sm:hidden',
+    // Stack en mobile, flex en desktop
+    stackToFlex: 'flex flex-col sm:flex-row',
+    // Stack en mobile, grid en desktop
+    stackToGrid: 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
+};
+/**
+ * Clases para table responsive strategies
+ */
+const TABLE_RESPONSIVE = {
+    // Scroll horizontal (default, más simple)
+    scroll: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full min-w-full',
+        cell: 'whitespace-nowrap'
+    },
+    // Permitir wrap del contenido
+    wrap: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full',
+        cell: 'whitespace-normal break-words'
+    },
+    // Stack en mobile (cada fila se convierte en card)
+    // Requiere lógica adicional en el componente
+    stack: {
+        wrapper: 'relative w-full',
+        table: 'w-full',
+        row: 'block sm:table-row border-b sm:border-b-0',
+        cell: 'block sm:table-cell py-2 sm:py-0 before:content-[attr(data-label)] before:font-medium before:inline-block before:w-32 sm:before:content-none'
+    },
+    // Collapse: ocultar columnas menos importantes en mobile
+    // Se usa con clases de visibility en las columnas específicas
+    collapse: {
+        wrapper: 'relative w-full overflow-x-auto',
+        table: 'w-full',
+        cell: 'whitespace-nowrap',
+        // Estas clases se aplican a columnas opcionales
+        optionalColumn: 'hidden md:table-cell'
+    }
+};
+
+/**
+ * Componente base de tabla con soporte responsive
+ *
+ * SIMPLIFICADO: Ya no incluye drag & drop (usar pdm-draggable-table para eso)
+ *
+ * @example
+ * // Tabla simple con scroll horizontal
+ * <pdm-table variant="default">
+ *   <thead><tr><th>Name</th><th>Email</th></tr></thead>
+ *   <tbody><tr><td>John</td><td>john@example.com</td></tr></tbody>
+ * </pdm-table>
+ *
+ * @example
+ * // Tabla interactiva con wrap en mobile
+ * <pdm-table variant="interactive" responsiveStrategy="wrap">
+ *   ...
+ * </pdm-table>
+ */
+class PdmTableComponent {
+    constructor() {
+        /**
+         * Variante visual de la tabla
+         * - default: tabla básica sin estilos extra
+         * - data: tabla con bordes y espaciado para data
+         * - interactive: tabla con hover, sticky header y estilos interactivos
+         */
+        this.variant = 'default';
+        /**
+         * Estrategia responsive para la tabla
+         * - scroll: scroll horizontal en mobile (default, más simple)
+         * - wrap: permite que el contenido haga wrap
+         * - stack: convierte filas en cards en mobile (requiere data-label en celdas)
+         * - collapse: oculta columnas menos importantes en mobile
+         */
+        this.responsiveStrategy = 'scroll';
+        /**
+         * Clases CSS adicionales para el wrapper
+         */
+        this.className = '';
+        /**
+         * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
+         * Útil cuando la tabla está dentro de un container con padding
+         */
+        this.fullBleed = false;
+    }
+    get wrapperClasses() {
+        const baseClasses = ['relative', 'w-full'];
+        const strategyClasses = this.getResponsiveStrategyClasses();
+        const variantClasses = this.getVariantWrapperClasses();
+        // Full bleed: scroll edge-to-edge en mobile
+        if (this.fullBleed && this.responsiveStrategy === 'scroll') {
+            baseClasses.push('-mx-4', 'px-4', 'sm:mx-0', 'sm:px-0');
+        }
+        return [
+            ...baseClasses,
+            ...strategyClasses,
+            ...variantClasses,
+            this.className
+        ].filter(Boolean);
+    }
+    get tableClasses() {
+        const baseClasses = ['w-full', 'caption-bottom', 'text-sm'];
+        const variantClasses = this.getVariantTableClasses();
+        const cellClasses = this.getCellClasses();
+        return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
+    }
+    getResponsiveStrategyClasses() {
+        const strategy = TABLE_RESPONSIVE[this.responsiveStrategy];
+        if (this.responsiveStrategy === 'scroll') {
+            return ['overflow-x-auto'];
+        }
+        if (this.responsiveStrategy === 'wrap') {
+            return ['overflow-x-auto'];
+        }
+        if (this.responsiveStrategy === 'stack') {
+            // Stack requiere lógica en el template, aquí solo el wrapper
+            return [];
+        }
+        if (this.responsiveStrategy === 'collapse') {
+            return ['overflow-x-auto'];
+        }
+        return ['overflow-auto'];
+    }
+    getVariantWrapperClasses() {
+        if (this.variant === 'interactive') {
+            return ['rounded-xl', 'border', 'border-border', 'bg-background'];
+        }
+        if (this.variant === 'data') {
+            return ['rounded-md', 'border', 'border-border', 'bg-background'];
+        }
+        return [];
+    }
+    getVariantTableClasses() {
+        if (this.variant === 'data') {
+            return [
+                'border-collapse',
+                'text-foreground',
+                '[&_thead_tr]:border-b',
+                '[&_thead_tr]:border-border',
+                '[&_tbody_tr]:border-b',
+                '[&_tbody_tr]:border-border',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_th]:h-10',
+                '[&_th]:px-2',
+                '[&_th]:text-left',
+                '[&_th]:align-middle',
+                '[&_th]:font-medium',
+                '[&_td]:p-2',
+                '[&_td]:align-middle'
+            ];
+        }
+        if (this.variant === 'interactive') {
+            return [
+                'text-foreground',
+                '[&_thead]:sticky',
+                '[&_thead]:top-0',
+                '[&_thead]:z-10',
+                '[&_thead]:bg-muted/70',
+                '[&_thead_tr]:border-b',
+                '[&_thead_tr]:border-border',
+                '[&_th]:h-12',
+                '[&_th]:px-4',
+                '[&_th]:text-left',
+                '[&_th]:align-middle',
+                '[&_th]:text-sm',
+                '[&_th]:font-medium',
+                '[&_tbody_tr]:border-b',
+                '[&_tbody_tr]:border-border',
+                '[&_tbody_tr]:transition-colors',
+                '[&_tbody_tr:hover]:bg-muted/50',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_td]:h-14',
+                '[&_td]:px-4',
+                '[&_td]:align-middle',
+                '[&_td]:text-sm',
+                '[&_svg]:text-muted-foreground'
+            ];
+        }
+        return [];
+    }
+    getCellClasses() {
+        // Manejo responsive de whitespace
+        if (this.responsiveStrategy === 'scroll') {
+            // En scroll, permitir wrap en mobile, nowrap en desktop
+            return ['[&_td]:whitespace-normal', '[&_th]:whitespace-normal', 'sm:[&_td]:whitespace-nowrap', 'sm:[&_th]:whitespace-nowrap'];
+        }
+        if (this.responsiveStrategy === 'wrap') {
+            // En wrap, siempre permitir wrap
+            return ['[&_td]:whitespace-normal', '[&_td]:break-words', '[&_th]:whitespace-normal'];
+        }
+        // Default: nowrap (comportamiento anterior para backward compatibility)
+        return [];
+    }
+}
+PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed" }, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], responsiveStrategy: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], fullBleed: [{
+                type: Input
+            }] } });
+
+/**
+ * Data-table genérico con paginación, filtrado y selección
+ *
+ * NUEVO: Ahora es genérico y configurable via columnas
+ *
+ * @example
+ * // Definir columnas
+ * columns: PdmDataTableColumn<User>[] = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'email', label: 'Email', sortable: true },
+ *   { key: 'role', label: 'Role', hideOnMobile: true },
+ *   { key: 'createdAt', label: 'Created', render: (val) => formatDate(val) }
+ * ];
+ *
+ * // En el template
+ * <pdm-data-table
+ *   [columns]="columns"
+ *   [rows]="users"
+ *   [selectable]="true"
+ *   (selectionChange)="onSelect($event)">
+ * </pdm-data-table>
+ */
 class PdmDataTableComponent {
     constructor() {
         this.className = '';
+        /**
+         * Columnas a mostrar
+         * Si no se provee, intenta inferir del primer row (legacy mode)
+         */
+        this.columns = [];
+        /**
+         * Estrategia responsive de la tabla
+         */
+        this.responsiveStrategy = 'scroll';
+        /**
+         * Si es true, muestra checkbox de selección en cada fila
+         */
+        this.selectable = false;
+        /**
+         * Si es true, muestra botón de acciones (tres puntos) en cada fila
+         */
+        this.showActions = false;
+        /**
+         * Si es true, muestra filtro de búsqueda
+         */
+        this.showFilter = true;
+        /**
+         * Si es true, muestra controles de paginación
+         */
+        this.showPagination = true;
+        /**
+         * Si es true, muestra selector de columnas
+         */
+        this.showColumnSelector = false;
+        // Labels i18n
         this.filterPlaceholder = 'Filter...';
         this.columnsLabel = 'Columns';
-        this.statusLabel = 'Status';
-        this.emailLabel = 'Email';
-        this.amountLabel = 'Amount';
         this.previousLabel = 'Previous';
         this.nextLabel = 'Next';
         this.emptyLabel = 'No results.';
+        this.rowsSelectedLabel = 'row(s) selected';
+        // DEPRECATED: Labels hardcodeados para backward compatibility
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.statusLabel = 'Status';
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.emailLabel = 'Email';
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.amountLabel = 'Amount';
+        /**
+         * Datos a mostrar
+         */
         this.rows = [];
+        /**
+         * Página actual (1-indexed)
+         */
         this.page = 1;
-        this.pageSize = 5;
+        /**
+         * Cantidad de filas por página
+         */
+        this.pageSize = 10;
+        /**
+         * Query de filtrado
+         */
         this.query = '';
         this.queryChange = new EventEmitter();
         this.rowAction = new EventEmitter();
         this.pageChange = new EventEmitter();
         this.selectionChange = new EventEmitter();
+        this.columnSort = new EventEmitter();
+        // Estado interno
+        this.selectedRows = new Set();
+        this.sortDirection = 'asc';
+    }
+    /**
+     * Backward compatibility: si no hay columnas definidas, inferir del primer row
+     */
+    get effectiveColumns() {
+        if (this.columns.length > 0) {
+            return this.columns;
+        }
+        // Legacy mode: inferir columnas del primer row (solo para PdmDataTableRow)
+        if (this.rows.length > 0) {
+            const firstRow = this.rows[0];
+            return Object.keys(firstRow)
+                .filter(key => key !== 'selected')
+                .map(key => ({
+                key: key,
+                label: this.getLegacyLabel(key),
+                align: key === 'amount' ? 'right' : 'left'
+            }));
+        }
+        return [];
+    }
+    /**
+     * LEGACY: mapeo de keys a labels hardcodeados
+     */
+    getLegacyLabel(key) {
+        const map = {
+            status: this.statusLabel,
+            email: this.emailLabel,
+            amount: this.amountLabel
+        };
+        return map[key] || key.charAt(0).toUpperCase() + key.slice(1);
     }
     get filteredRows() {
         const q = this.query.trim().toLowerCase();
         if (!q)
             return this.rows;
-        return this.rows.filter((r) => r.email.toLowerCase().includes(q));
+        if (this.filterFn) {
+            return this.rows.filter(row => this.filterFn(row, q));
+        }
+        // Filtrado default: buscar en todos los campos string
+        return this.rows.filter(row => {
+            return Object.values(row).some(val => typeof val === 'string' && val.toLowerCase().includes(q));
+        });
     }
     get pagedRows() {
         const start = (this.page - 1) * this.pageSize;
@@ -1894,14 +2338,33 @@ class PdmDataTableComponent {
         return Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize));
     }
     get selectedCount() {
-        return this.rows.filter((row) => row.selected).length;
+        return this.selectedRows.size;
     }
     onQueryInput(event) {
         const value = event.target.value;
         this.queryChange.emit(value);
     }
     onToggleRow(row, event) {
-        this.selectionChange.emit({ id: row.id, selected: event.target.checked });
+        const checked = event.target.checked;
+        if (checked) {
+            this.selectedRows.add(row);
+        }
+        else {
+            this.selectedRows.delete(row);
+        }
+        this.selectionChange.emit({ row, selected: checked });
+    }
+    onToggleAll(event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.pagedRows.forEach(row => this.selectedRows.add(row));
+        }
+        else {
+            this.pagedRows.forEach(row => this.selectedRows.delete(row));
+        }
+    }
+    isSelected(row) {
+        return this.selectedRows.has(row);
     }
     previous() {
         if (this.page <= 1)
@@ -1914,25 +2377,75 @@ class PdmDataTableComponent {
         this.pageChange.emit(this.page + 1);
     }
     onAction(row) {
-        this.rowAction.emit(row.id);
+        this.rowAction.emit(row);
+    }
+    onSort(column) {
+        if (!column.sortable)
+            return;
+        if (this.sortColumn === column) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortColumn = column;
+            this.sortDirection = 'asc';
+        }
+        this.columnSort.emit({ column, direction: this.sortDirection });
+    }
+    getCellValue(row, column) {
+        const value = row[column.key];
+        if (column.render) {
+            return column.render(value, row);
+        }
+        return value != null ? String(value) : '';
+    }
+    getCellClass(column) {
+        const classes = ['px-2', 'py-2'];
+        if (column.align === 'center')
+            classes.push('text-center');
+        if (column.align === 'right')
+            classes.push('text-right');
+        if (column.hideOnMobile)
+            classes.push('hidden', 'md:table-cell');
+        if (column.cellClass)
+            classes.push(column.cellClass);
+        return classes.join(' ');
+    }
+    getHeaderClass(column) {
+        const classes = ['px-2', 'py-2', 'text-left', 'font-medium'];
+        if (column.hideOnMobile)
+            classes.push('hidden', 'md:table-cell');
+        if (column.headerClass)
+            classes.push(column.headerClass);
+        return classes.join(' ');
+    }
+    getColumnStyle(column) {
+        return column.width ? { width: column.width } : {};
     }
 }
 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", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full max-w-3xl flex-col items-end', className]\">\n  <div class=\"flex w-full items-center justify-between py-4\">\n    <input\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 type=\"button\" 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\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"w-full overflow-hidden rounded-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">{{ statusLabel }}</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm\">\n              <span>{{ emailLabel }}</span>\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n              </svg>\n            </button>\n          </th>\n          <th class=\"w-24 px-2 py-2 text-right font-medium\">{{ amountLabel }}</th>\n          <th class=\"px-2 py-2\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngFor=\"let row of pagedRows\" class=\"border-b border-border last:border-b-0\">\n          <td class=\"px-2 py-2\"><input type=\"checkbox\" [checked]=\"row.selected\" (change)=\"onToggleRow(row, $event)\" class=\"h-4 w-4 rounded-sm border border-input\" /></td>\n          <td class=\"px-2 py-2\">{{ row.status }}</td>\n          <td class=\"px-2 py-2\">{{ row.email }}</td>\n          <td class=\"px-2 py-2 text-right\">{{ row.amount }}</td>\n          <td class=\"px-2 py-2\">\n            <button type=\"button\" class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0\" (click)=\"onAction(row)\">\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              </svg>\n            </button>\n          </td>\n        </tr>\n        <tr *ngIf=\"pagedRows.length === 0\">\n          <td colspan=\"5\" class=\"px-3 py-6 text-center text-sm text-muted-foreground\">{{ emptyLabel }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex w-full items-center gap-2 py-4\">\n    <p class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" 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]=\"page <= 1\" (click)=\"previous()\">{{ previousLabel }}</button>\n    <button type=\"button\" 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]=\"page >= totalPages\" (click)=\"next()\">{{ nextLabel }}</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 });
+PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div *ngIf=\"showFilter || showColumnSelector\" class=\"flex w-full items-center justify-between gap-2 py-4\">\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button \n      *ngIf=\"showColumnSelector\"\n      type=\"button\" \n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table \n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\">\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input \n            type=\"checkbox\" \n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\">\n          \n          <!-- Header sortable -->\n          <button \n            *ngIf=\"column.sortable\"\n            type=\"button\" \n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\">\n            <span>{{ column.label }}</span>\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input \n            type=\"checkbox\" \n            [checked]=\"isSelected(row)\" \n            (change)=\"onToggleRow(row, $event)\" \n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\">\n          \n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container \n              *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, value: row[column.key] }\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button \n            type=\"button\" \n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\" \n            (click)=\"onAction(row)\">\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td \n          [attr.colspan]=\"effectiveColumns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)\" \n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\">\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div *ngIf=\"showPagination || selectable\" class=\"flex w-full items-center gap-2 py-4 flex-wrap sm:flex-nowrap\">\n    <p *ngIf=\"selectable\" class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\">\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page <= 1\" \n        (click)=\"previous()\">\n        {{ previousLabel }}\n      </button>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page >= totalPages\" \n        (click)=\"next()\">\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 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 max-w-3xl flex-col items-end', className]\">\n  <div class=\"flex w-full items-center justify-between py-4\">\n    <input\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 type=\"button\" 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\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <div class=\"w-full overflow-hidden rounded-md border border-border bg-background\">\n    <table class=\"w-full border-collapse text-sm text-foreground\">\n      <thead>\n        <tr class=\"border-b border-border\">\n          <th class=\"w-10 px-2 text-left font-medium\"><input type=\"checkbox\" class=\"h-4 w-4 rounded-sm border border-input\" /></th>\n          <th class=\"w-32 px-2 py-2 text-left font-medium\">{{ statusLabel }}</th>\n          <th class=\"px-2 py-2 text-left font-medium\">\n            <button type=\"button\" class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm\">\n              <span>{{ emailLabel }}</span>\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n              </svg>\n            </button>\n          </th>\n          <th class=\"w-24 px-2 py-2 text-right font-medium\">{{ amountLabel }}</th>\n          <th class=\"px-2 py-2\"></th>\n        </tr>\n      </thead>\n\n      <tbody>\n        <tr *ngFor=\"let row of pagedRows\" class=\"border-b border-border last:border-b-0\">\n          <td class=\"px-2 py-2\"><input type=\"checkbox\" [checked]=\"row.selected\" (change)=\"onToggleRow(row, $event)\" class=\"h-4 w-4 rounded-sm border border-input\" /></td>\n          <td class=\"px-2 py-2\">{{ row.status }}</td>\n          <td class=\"px-2 py-2\">{{ row.email }}</td>\n          <td class=\"px-2 py-2 text-right\">{{ row.amount }}</td>\n          <td class=\"px-2 py-2\">\n            <button type=\"button\" class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0\" (click)=\"onAction(row)\">\n              <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n                <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              </svg>\n            </button>\n          </td>\n        </tr>\n        <tr *ngIf=\"pagedRows.length === 0\">\n          <td colspan=\"5\" class=\"px-3 py-6 text-center text-sm text-muted-foreground\">{{ emptyLabel }}</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n\n  <div class=\"flex w-full items-center gap-2 py-4\">\n    <p class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground\">{{ selectedCount }} of {{ rows.length }} row(s) selected.</p>\n    <button type=\"button\" 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]=\"page <= 1\" (click)=\"previous()\">{{ previousLabel }}</button>\n    <button type=\"button\" 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]=\"page >= totalPages\" (click)=\"next()\">{{ nextLabel }}</button>\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 *ngIf=\"showFilter || showColumnSelector\" class=\"flex w-full items-center justify-between gap-2 py-4\">\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button \n      *ngIf=\"showColumnSelector\"\n      type=\"button\" \n      class=\"inline-flex h-9 appearance-none items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\">\n      <span>{{ columnsLabel }}</span>\n      <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4 text-foreground\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n        <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table \n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\">\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input \n            type=\"checkbox\" \n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\">\n          \n          <!-- Header sortable -->\n          <button \n            *ngIf=\"column.sortable\"\n            type=\"button\" \n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\">\n            <span>{{ column.label }}</span>\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M8 6L4 10L8 14M16 18L20 14L16 10\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input \n            type=\"checkbox\" \n            [checked]=\"isSelected(row)\" \n            (change)=\"onToggleRow(row, $event)\" \n            class=\"h-4 w-4 rounded-sm border border-input\" \n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td \n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\">\n          \n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container \n              *ngTemplateOutlet=\"column.cellTemplate; context: { $implicit: row, value: row[column.key] }\">\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button \n            type=\"button\" \n            class=\"inline-flex h-8 w-8 appearance-none items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\" \n            (click)=\"onAction(row)\">\n            <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td \n          [attr.colspan]=\"effectiveColumns.length + (selectable ? 1 : 0) + (showActions ? 1 : 0)\" \n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\">\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div *ngIf=\"showPagination || selectable\" class=\"flex w-full items-center gap-2 py-4 flex-wrap sm:flex-nowrap\">\n    <p *ngIf=\"selectable\" class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\">\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page <= 1\" \n        (click)=\"previous()\">\n        {{ previousLabel }}\n      </button>\n      <button \n        type=\"button\" \n        class=\"h-9 appearance-none rounded-md border border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed\" \n        [disabled]=\"page >= totalPages\" \n        (click)=\"next()\">\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
         }], propDecorators: { className: [{
                 type: Input
-            }], filterPlaceholder: [{
+            }], columns: [{
                 type: Input
-            }], columnsLabel: [{
+            }], responsiveStrategy: [{
                 type: Input
-            }], statusLabel: [{
+            }], selectable: [{
                 type: Input
-            }], emailLabel: [{
+            }], showActions: [{
                 type: Input
-            }], amountLabel: [{
+            }], showFilter: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showColumnSelector: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], columnsLabel: [{
                 type: Input
             }], previousLabel: [{
                 type: Input
@@ -1940,6 +2453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], emptyLabel: [{
                 type: Input
+            }], rowsSelectedLabel: [{
+                type: Input
+            }], statusLabel: [{
+                type: Input
+            }], emailLabel: [{
+                type: Input
+            }], amountLabel: [{
+                type: Input
             }], rows: [{
                 type: Input
             }], page: [{
@@ -1948,6 +2469,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], query: [{
                 type: Input
+            }], filterFn: [{
+                type: Input
             }], queryChange: [{
                 type: Output
             }], rowAction: [{
@@ -1956,6 +2479,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }], selectionChange: [{
                 type: Output
+            }], columnSort: [{
+                type: Output
             }] } });
 
 /**
@@ -2373,30 +2898,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
-class PdmDialogComponent {
-    constructor() {
-        this.open = false;
-        this.variant = 'default';
-        this.size = 'desktop';
-        this.title = 'Edit profile';
-        this.description = '';
-        this.closeOnBackdrop = true;
-        this.closeOnEsc = true;
-        this.showCloseButton = true;
-        this.showHeader = true;
-        this.showFooter = true;
-        this.primaryActionText = 'Save changes';
-        this.secondaryActionText = 'Cancel';
-        this.alignFooter = 'right';
-        this.headerClassName = '';
-        this.bodyClassName = '';
-        this.footerClassName = '';
-        this.className = '';
-        this.openChange = new EventEmitter();
-        this.primaryAction = new EventEmitter();
-        this.secondaryAction = new EventEmitter();
-    }
-    onEsc() {
+/**
+ * Z-Index Scale - Sistema centralizado de z-index
+ *
+ * JERARQUÍA (de menor a mayor):
+ * 1. base (z-0) - Elementos normales del DOM
+ * 2. dropdown (z-10) - Selects, combobox, date-pickers
+ * 3. sticky (z-20) - Headers, navigation bars
+ * 4. overlay (z-30) - Popovers, hover cards, context menus
+ * 5. drawer (z-40) - Sidebar drawer, sheets laterales
+ * 6. modal (z-50) - Dialogs, alert-dialogs
+ * 7. modal-backdrop (z-40) - Backdrop de modals
+ * 8. popover (z-60) - Tooltips, dropdowns DENTRO de modals
+ * 9. toast (z-[100]) - Notificaciones que deben estar sobre TODO
+ *
+ * REGLA CRÍTICA:
+ * - Componentes overlay (select options, dropdown menu, tooltip) SIEMPRE z-60 o mayor
+ * - Esto permite que funcionen DENTRO de modals (z-50)
+ * - Backdrop de modal debe ser z-40 para estar DEBAJO del contenido del modal (z-50)
+ */
+const Z_INDEX = {
+    /**
+     * Base - contenido normal del DOM
+     */
+    base: 'z-0',
+    /**
+     * Dropdown - Selects, combobox, date-pickers
+     * Debe estar SOBRE contenido normal pero BAJO modals
+     */
+    dropdown: 'z-10',
+    /**
+     * Sticky - Headers, navigation fija
+     */
+    sticky: 'z-20',
+    /**
+     * Overlay - Popovers, hover cards, context menus
+     * Debe estar SOBRE sticky pero BAJO modals
+     */
+    overlay: 'z-30',
+    /**
+     * Drawer backdrop - Backdrop de sidebar drawer
+     * Debe estar DEBAJO del drawer panel
+     */
+    drawerBackdrop: 'z-40',
+    /**
+     * Drawer - Sidebar drawer, sheets laterales
+     * Debe estar SOBRE su backdrop pero BAJO modals
+     */
+    drawer: 'z-50',
+    /**
+     * Modal backdrop - Backdrop de dialogs
+     * Debe estar SOBRE drawers pero DEBAJO del contenido del modal
+     */
+    modalBackdrop: 'z-50',
+    /**
+     * Modal - Dialogs, alert-dialogs, sheets
+     * Debe estar SOBRE su backdrop
+     */
+    modal: 'z-[60]',
+    /**
+     * Popover - Tooltips, dropdowns, selects options DENTRO de modals
+     * CRÍTICO: Debe ser MAYOR que modal (z-50) para aparecer sobre modals
+     */
+    popover: 'z-[70]',
+    /**
+     * Toast - Notificaciones globales
+     * Debe estar sobre TODO
+     */
+    toast: 'z-[100]'
+};
+/**
+ * Helper para debugging z-index issues
+ */
+function logZIndexStack(element) {
+    if (typeof window === 'undefined')
+        return;
+    let current = element;
+    const stack = [];
+    while (current && current !== document.body) {
+        const computed = window.getComputedStyle(current);
+        const zIndex = computed.zIndex;
+        const position = computed.position;
+        if (zIndex !== 'auto') {
+            stack.push({
+                element: current.tagName + (current.className ? `.${current.className.split(' ')[0]}` : ''),
+                zIndex,
+                position
+            });
+        }
+        current = current.parentElement;
+    }
+    console.table(stack);
+}
+
+/**
+ * Modal/Dialog component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Modo 'responsive' (default): fullscreen en mobile, modal en desktop
+ * - Tamaños predefinidos: sm, md, lg, xl
+ * - Mejor manejo de scroll en mobile
+ *
+ * @example
+ * // Responsive (recomendado)
+ * <pdm-dialog [open]="isOpen" size="responsive">
+ *   <p>Content</p>
+ * </pdm-dialog>
+ *
+ * @example
+ * // Tamaño fijo
+ * <pdm-dialog [open]="isOpen" size="lg">
+ *   <p>Content</p>
+ * </pdm-dialog>
+ */
+class PdmDialogComponent {
+    constructor() {
+        this.open = false;
+        this.variant = 'default';
+        /**
+         * Tamaño del dialog
+         * - responsive: fullscreen mobile, modal desktop (recomendado)
+         * - sm: 400px max
+         * - md: 500px max
+         * - lg: 640px max (default)
+         * - xl: 800px max
+         * - desktop/mobile/mobile-fullscreen: legacy, deprecado
+         */
+        this.size = 'responsive';
+        this.title = 'Edit profile';
+        this.description = '';
+        this.closeOnBackdrop = true;
+        this.closeOnEsc = true;
+        this.showCloseButton = true;
+        this.showHeader = true;
+        this.showFooter = true;
+        this.primaryActionText = 'Save changes';
+        this.secondaryActionText = 'Cancel';
+        this.alignFooter = 'right';
+        this.headerClassName = '';
+        this.bodyClassName = '';
+        this.footerClassName = '';
+        this.className = '';
+        this.openChange = new EventEmitter();
+        this.primaryAction = new EventEmitter();
+        this.secondaryAction = new EventEmitter();
+    }
+    onEsc() {
         if (this.open && this.closeOnEsc) {
             this.close();
         }
@@ -2416,47 +3063,132 @@ class PdmDialogComponent {
         }
     }
     get panelClassName() {
+        // Legacy sizes (backward compatibility)
+        if (this.size === 'desktop') {
+            return this.buildClasses(['max-w-[640px]', 'max-h-[calc(100vh-2rem)]', 'rounded-[10px]']);
+        }
+        if (this.size === 'mobile') {
+            return this.buildClasses(['max-w-[320px]', 'min-h-[240px]', 'rounded-[10px]']);
+        }
+        if (this.size === 'mobile-fullscreen') {
+            return this.buildClasses(['max-w-[320px]', 'h-[min(100dvh,640px)]', 'rounded-none', 'sm:rounded-[10px]']);
+        }
+        // New responsive mode (recomendado)
+        if (this.size === 'responsive') {
+            return this.buildClasses([
+                // Mobile: fullscreen con bordes redondeados solo arriba
+                'w-full',
+                'h-full',
+                'max-h-[100dvh]',
+                'rounded-t-[10px]',
+                'sm:rounded-[10px]',
+                // Desktop: modal centrado
+                'sm:w-auto',
+                'sm:h-auto',
+                'sm:max-w-[640px]',
+                'sm:max-h-[calc(100vh-4rem)]'
+            ]);
+        }
+        // New size options
+        const sizeMap = {
+            sm: 'sm:max-w-[400px]',
+            md: 'sm:max-w-[500px]',
+            lg: 'sm:max-w-[640px]',
+            xl: 'sm:max-w-[800px]'
+        };
+        const maxWidth = sizeMap[this.size] || sizeMap.lg;
+        return this.buildClasses([
+            // Mobile: fullscreen
+            'w-full',
+            'h-full',
+            'max-h-[100dvh]',
+            'rounded-t-[10px]',
+            // Desktop: modal
+            'sm:rounded-[10px]',
+            'sm:w-auto',
+            'sm:h-auto',
+            maxWidth,
+            'sm:max-h-[calc(100vh-4rem)]'
+        ]);
+    }
+    buildClasses(sizeClasses) {
         const base = [
-            'relative z-10 w-full border border-border bg-background text-foreground shadow-lg',
-            this.size === 'desktop' ? 'max-w-[640px] max-h-[calc(100vh-2rem)] rounded-[10px] overflow-visible' : '',
-            this.size === 'mobile' ? 'max-w-[320px] min-h-[240px] rounded-[10px] overflow-visible' : '',
-            this.size === 'mobile-fullscreen'
-                ? 'max-w-[320px] h-[min(100dvh,640px)] rounded-none sm:rounded-[10px] overflow-visible'
-                : '',
+            'relative',
+            Z_INDEX.modal,
+            'flex',
+            'flex-col',
+            'border',
+            'border-border',
+            'bg-background',
+            'text-foreground',
+            'shadow-lg',
+            'overflow-hidden',
+            ...sizeClasses,
             this.className
         ];
         return base.filter(Boolean).join(' ');
     }
     get bodyWrapperClassName() {
         const base = [
-            'min-h-0 flex-1',
-            this.size === 'mobile-fullscreen' ? 'overflow-y-auto px-4 py-6' : 'px-6 py-6',
+            'flex-1',
+            'overflow-y-auto',
+            'px-4',
+            'py-6',
+            'sm:px-6',
             this.bodyClassName
         ];
         return base.filter(Boolean).join(' ');
     }
     get headerWrapperClassName() {
-        return ['flex items-start justify-between gap-3 p-4', this.headerClassName].filter(Boolean).join(' ');
+        const base = [
+            'flex',
+            'items-start',
+            'justify-between',
+            'gap-3',
+            'p-4',
+            'sm:p-6',
+            'border-b',
+            'border-border',
+            this.headerClassName
+        ];
+        return base.filter(Boolean).join(' ');
     }
     get footerWrapperClassName() {
         const effectiveAlign = this.alignFooter === 'right' && this.variant === 'custom-close' ? 'left' : this.alignFooter;
         const base = [
             'p-4',
+            'sm:p-6',
+            'border-t',
+            'border-border',
+            // Mobile: siempre full-width
+            'flex',
+            'flex-col',
+            'gap-2',
+            // Desktop: según alignFooter
             effectiveAlign === 'full-width'
-                ? 'flex flex-col gap-2'
-                : effectiveAlign === 'left'
-                    ? 'flex items-center gap-2 justify-start'
-                    : 'flex items-center gap-2 justify-end',
+                ? 'sm:flex-col'
+                : 'sm:flex-row sm:items-center',
+            effectiveAlign === 'left' ? 'sm:justify-start' : '',
+            effectiveAlign === 'right' ? 'sm:justify-end' : '',
             this.footerClassName
         ];
         return base.filter(Boolean).join(' ');
     }
+    get containerClassName() {
+        // Container con backdrop z-50
+        // Mobile: fullscreen desde el bottom
+        // Desktop: centrado
+        return responsive({
+            default: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,
+            sm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`
+        });
+    }
 }
 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\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0\">\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 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    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\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 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)=\"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 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)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\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)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", 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\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0\">\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 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    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\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 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)=\"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 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)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\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)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n" }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
@@ -2502,6 +3234,303 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Tabla con funcionalidad de reordenamiento de filas mediante drag & drop
+ *
+ * Extiende pdm-table agregando la capacidad de reordenar filas.
+ * Si no necesitás drag & drop, usá pdm-table directamente (más simple y liviano).
+ *
+ * @example
+ * <pdm-draggable-table
+ *   variant="interactive"
+ *   [reorderRows]="true"
+ *   (rowOrderChange)="onOrderChange($event)">
+ *   <tbody>
+ *     <tr data-row-id="1"><td>Row 1</td></tr>
+ *     <tr data-row-id="2"><td>Row 2</td></tr>
+ *   </tbody>
+ * </pdm-draggable-table>
+ *
+ * IMPORTANTE: Cada <tr> debe tener un atributo data-row-id único
+ */
+class PdmDraggableTableComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.variant = 'default';
+        this.responsiveStrategy = 'scroll';
+        this.className = '';
+        this.fullBleed = false;
+        /**
+         * Habilita el reordenamiento de filas mediante drag & drop
+         */
+        this.reorderRows = false;
+        /**
+         * Selector CSS para identificar los handles de drag
+         * Por defecto busca: [data-drag-handle], [data-slot=row-drag-handle], .row-drag-handle
+         * Si no encuentra ninguno, inserta un handle automático
+         */
+        this.dragHandleSelector = '[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle,[data-auto-drag-handle]';
+        /**
+         * Emite el nuevo orden de las filas cuando el usuario termina de arrastrar
+         * Array de data-row-id en el nuevo orden
+         */
+        this.rowOrderChange = new EventEmitter();
+        this.cleanupListeners = [];
+        this.draggedRow = null;
+    }
+    ngAfterViewInit() {
+        this.syncReorderBehavior();
+    }
+    // Getters para clases CSS (mismo comportamiento que pdm-table)
+    get wrapperClasses() {
+        const baseClasses = ['relative', 'w-full'];
+        const strategyClasses = this.getResponsiveStrategyClasses();
+        const variantClasses = this.getVariantWrapperClasses();
+        if (this.fullBleed && this.responsiveStrategy === 'scroll') {
+            baseClasses.push('-mx-4', 'px-4', 'sm:mx-0', 'sm:px-0');
+        }
+        return [
+            ...baseClasses,
+            ...strategyClasses,
+            ...variantClasses,
+            this.className
+        ].filter(Boolean);
+    }
+    get tableClasses() {
+        const baseClasses = ['w-full', 'caption-bottom', 'text-sm'];
+        const variantClasses = this.getVariantTableClasses();
+        const cellClasses = this.getCellClasses();
+        return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
+    }
+    getResponsiveStrategyClasses() {
+        if (this.responsiveStrategy === 'scroll' || this.responsiveStrategy === 'wrap' || this.responsiveStrategy === 'collapse') {
+            return ['overflow-x-auto'];
+        }
+        return [];
+    }
+    getVariantWrapperClasses() {
+        if (this.variant === 'interactive') {
+            return ['rounded-xl', 'border', 'border-border', 'bg-background'];
+        }
+        if (this.variant === 'data') {
+            return ['rounded-md', 'border', 'border-border', 'bg-background'];
+        }
+        return [];
+    }
+    getVariantTableClasses() {
+        if (this.variant === 'data') {
+            return [
+                'border-collapse', 'text-foreground',
+                '[&_thead_tr]:border-b', '[&_thead_tr]:border-border',
+                '[&_tbody_tr]:border-b', '[&_tbody_tr]:border-border',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_th]:h-10', '[&_th]:px-2', '[&_th]:text-left', '[&_th]:align-middle', '[&_th]:font-medium',
+                '[&_td]:p-2', '[&_td]:align-middle'
+            ];
+        }
+        if (this.variant === 'interactive') {
+            return [
+                'text-foreground',
+                '[&_thead]:sticky', '[&_thead]:top-0', '[&_thead]:z-10', '[&_thead]:bg-muted/70',
+                '[&_thead_tr]:border-b', '[&_thead_tr]:border-border',
+                '[&_th]:h-12', '[&_th]:px-4', '[&_th]:text-left', '[&_th]:align-middle', '[&_th]:text-sm', '[&_th]:font-medium',
+                '[&_tbody_tr]:border-b', '[&_tbody_tr]:border-border',
+                '[&_tbody_tr]:transition-colors', '[&_tbody_tr:hover]:bg-muted/50',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_td]:h-14', '[&_td]:px-4', '[&_td]:align-middle', '[&_td]:text-sm',
+                '[&_svg]:text-muted-foreground'
+            ];
+        }
+        return [];
+    }
+    getCellClasses() {
+        if (this.responsiveStrategy === 'scroll') {
+            return ['[&_td]:whitespace-normal', '[&_th]:whitespace-normal', 'sm:[&_td]:whitespace-nowrap', 'sm:[&_th]:whitespace-nowrap'];
+        }
+        if (this.responsiveStrategy === 'wrap') {
+            return ['[&_td]:whitespace-normal', '[&_td]:break-words', '[&_th]:whitespace-normal'];
+        }
+        return [];
+    }
+    ngOnChanges(changes) {
+        if (changes['reorderRows'] || changes['variant']) {
+            this.syncReorderBehavior();
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupReorderBehavior();
+    }
+    syncReorderBehavior() {
+        this.cleanupReorderBehavior();
+        if (!this.reorderRows) {
+            return;
+        }
+        const tbody = this.getTbody();
+        if (!tbody) {
+            return;
+        }
+        this.setRowsDraggable(tbody, true);
+        this.cleanupListeners.push(this.renderer.listen(tbody, 'mousedown', (event) => this.armDragFromHandle(event)), this.renderer.listen(tbody, 'dragstart', (event) => this.onDragStart(event)), this.renderer.listen(tbody, 'dragover', (event) => this.onDragOver(event, tbody)), this.renderer.listen(tbody, 'drop', (event) => this.onDrop(event)), this.renderer.listen(tbody, 'dragend', () => this.onDragEnd()));
+        // Observer para detectar cambios en el DOM (filas agregadas/removidas)
+        this.observer = new MutationObserver(() => this.setRowsDraggable(tbody, true));
+        this.observer.observe(tbody, { childList: true });
+    }
+    cleanupReorderBehavior() {
+        this.cleanupListeners.forEach((dispose) => dispose());
+        this.cleanupListeners = [];
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+        const tbody = this.getTbody();
+        if (tbody) {
+            this.setRowsDraggable(tbody, false);
+        }
+        this.draggedRow = null;
+    }
+    getTbody() {
+        return this.tableElement?.nativeElement.tBodies.item(0) ?? null;
+    }
+    setRowsDraggable(tbody, enabled) {
+        const rows = Array.from(tbody.rows);
+        rows.forEach((row) => {
+            this.syncAutoDragHandle(row, enabled);
+            row.draggable = false;
+            if (!enabled) {
+                delete row.dataset['dragging'];
+                delete row.dataset['dragArmed'];
+            }
+        });
+    }
+    /**
+     * Inserta un handle de drag automático si no existe uno custom
+     */
+    syncAutoDragHandle(row, enabled) {
+        const firstCell = row.cells.item(0);
+        if (!firstCell) {
+            return;
+        }
+        const existingAutoHandle = firstCell.querySelector('[data-auto-drag-handle]');
+        if (!enabled) {
+            existingAutoHandle?.remove();
+            return;
+        }
+        const hasCustomHandle = !!firstCell.querySelector('[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle');
+        if (hasCustomHandle || existingAutoHandle) {
+            return;
+        }
+        // Crear handle automático
+        const button = this.renderer.createElement('button');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.setAttribute(button, 'aria-label', 'Drag row');
+        this.renderer.setAttribute(button, 'data-auto-drag-handle', 'true');
+        this.renderer.addClass(button, 'inline-flex');
+        this.renderer.addClass(button, 'h-7');
+        this.renderer.addClass(button, 'w-7');
+        this.renderer.addClass(button, 'items-center');
+        this.renderer.addClass(button, 'justify-center');
+        this.renderer.addClass(button, 'cursor-grab');
+        this.renderer.addClass(button, 'active:cursor-grabbing');
+        this.renderer.addClass(button, 'text-muted-foreground');
+        const dots = this.renderer.createElement('span');
+        this.renderer.addClass(dots, 'text-sm');
+        this.renderer.addClass(dots, 'leading-none');
+        this.renderer.setProperty(dots, 'textContent', '⋮⋮');
+        this.renderer.appendChild(button, dots);
+        this.renderer.insertBefore(firstCell, button, firstCell.firstChild);
+    }
+    onDragStart(event) {
+        const target = event.target;
+        const row = target?.closest('tr');
+        if (!row) {
+            return;
+        }
+        const handle = target?.closest(this.dragHandleSelector);
+        const isArmed = row.dataset['dragArmed'] === 'true';
+        if ((!handle || !row.contains(handle)) && !isArmed) {
+            event.preventDefault();
+            return;
+        }
+        this.draggedRow = row;
+        this.draggedRow.dataset['dragging'] = 'true';
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', '');
+        }
+    }
+    onDragOver(event, tbody) {
+        if (!this.draggedRow) {
+            return;
+        }
+        event.preventDefault();
+        const target = event.target;
+        const targetRow = target?.closest('tr');
+        if (!targetRow || targetRow === this.draggedRow) {
+            return;
+        }
+        const rect = targetRow.getBoundingClientRect();
+        const shouldInsertBefore = event.clientY < rect.top + rect.height / 2;
+        tbody.insertBefore(this.draggedRow, shouldInsertBefore ? targetRow : targetRow.nextSibling);
+    }
+    onDrop(event) {
+        event.preventDefault();
+    }
+    onDragEnd() {
+        const tbody = this.getTbody();
+        if (tbody) {
+            Array.from(tbody.rows).forEach((row) => {
+                row.draggable = false;
+                delete row.dataset['dragArmed'];
+            });
+        }
+        if (this.draggedRow) {
+            delete this.draggedRow.dataset['dragging'];
+            this.draggedRow = null;
+        }
+        if (!tbody) {
+            return;
+        }
+        const order = Array.from(tbody.rows).map((row, index) => row.getAttribute('data-row-id') || String(index));
+        this.rowOrderChange.emit(order);
+    }
+    armDragFromHandle(event) {
+        const target = event.target;
+        const handle = target?.closest(this.dragHandleSelector);
+        if (!handle) {
+            return;
+        }
+        const row = handle.closest('tr');
+        if (!row) {
+            return;
+        }
+        row.draggable = true;
+        row.dataset['dragArmed'] = 'true';
+    }
+}
+PdmDraggableTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDraggableTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PdmDraggableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDraggableTableComponent, selector: "pdm-draggable-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed", reorderRows: "reorderRows", dragHandleSelector: "dragHandleSelector" }, outputs: { rowOrderChange: "rowOrderChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDraggableTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-draggable-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { variant: [{
+                type: Input
+            }], responsiveStrategy: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], fullBleed: [{
+                type: Input
+            }], reorderRows: [{
+                type: Input
+            }], dragHandleSelector: [{
+                type: Input
+            }], rowOrderChange: [{
+                type: Output
+            }], tableElement: [{
+                type: ViewChild,
+                args: ['tableElement']
+            }] } });
+
 class PdmDropdownMenuComponent {
     constructor(elementRef, cdr, overlay, viewContainerRef) {
         this.elementRef = elementRef;
@@ -2616,7 +3645,7 @@ class PdmDropdownMenuComponent {
         const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 8);
         // Resolve panelClass: overlayOptions.panelClass wins; otherwise map panelClassName.
         const resolvedPanelClass = this.overlayOptions?.panelClass
-            ?? (this.panelClassName ? ['block', this.panelClassName] : ['block']);
+            ?? (this.panelClassName ? [Z_INDEX.popover, this.panelClassName] : [Z_INDEX.popover]);
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
@@ -2687,13 +3716,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Drawer/Sheet component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Posicionamiento configurable (bottom, left, right, top)
+ * - Tamaños predefinidos
+ * - Responsive: bottom sheet en mobile, side panel en desktop
+ * - Contenido genérico via ng-content
+ *
+ * @example
+ * // Drawer simple desde el bottom
+ * <pdm-drawer [open]="isOpen" position="bottom">
+ *   <h3>Title</h3>
+ *   <p>Content</p>
+ * </pdm-drawer>
+ *
+ * @example
+ * // Side panel desde la right
+ * <pdm-drawer [open]="isOpen" position="right" size="md">
+ *   <p>Content</p>
+ * </pdm-drawer>
+ */
 class PdmDrawerComponent {
     constructor() {
         this.open = false;
+        /**
+         * Posición del drawer
+         * - bottom: desde abajo (default, mejor para mobile)
+         * - left: side panel desde izquierda
+         * - right: side panel desde derecha
+         * - top: desde arriba (poco común)
+         */
+        this.position = 'bottom';
+        /**
+         * Tamaño del drawer
+         * - sm: 400px (side) / 50vh (bottom/top)
+         * - md: 500px (side) / 66vh (bottom/top) (default)
+         * - lg: 640px (side) / 80vh (bottom/top)
+         * - full: 100% ancho/alto
+         */
+        this.size = 'md';
+        /**
+         * @deprecated Use position="bottom" instead
+         */
         this.variant = 'drawer';
         this.className = '';
         this.title = '';
         this.description = '';
+        /**
+         * Mostrar handle visual (línea para arrastrar)
+         * Solo tiene sentido en position="bottom"
+         */
+        this.showHandle = true;
+        /**
+         * Mostrar botón de cerrar
+         */
+        this.showCloseButton = true;
+        this.closeOnEsc = true;
+        this.closeOnBackdropClick = true;
+        this.openChange = new EventEmitter();
+        // DEPRECATED: contenido específico que se movió a ng-content
         this.value = '';
         this.unit = '';
         this.decrementLabel = '-';
@@ -2707,14 +3790,9 @@ class PdmDrawerComponent {
         this.usernameLabel = 'Username';
         this.usernameValue = '';
         this.responsivePrimaryLabel = '';
-        /** Close when the ESC key is pressed. Default: `true`. */
-        this.closeOnEsc = true;
-        /** Close when the backdrop is clicked. Default: `true`. */
-        this.closeOnBackdropClick = true;
-        this.openChange = new EventEmitter();
+        this.bars = [];
         this.primaryAction = new EventEmitter();
         this.secondaryAction = new EventEmitter();
-        this.bars = [];
     }
     onEsc() {
         if (this.open && this.closeOnEsc) {
@@ -2735,14 +3813,67 @@ class PdmDrawerComponent {
     onSecondaryAction() {
         this.secondaryAction.emit();
     }
+    get containerClassName() {
+        return `fixed inset-0 ${Z_INDEX.drawer} ${this.className}`;
+    }
+    get panelClassName() {
+        const base = [
+            'absolute',
+            'bg-background',
+            'border',
+            'border-border',
+            'shadow-lg',
+            'overflow-auto'
+        ];
+        // Posicionamiento
+        const positionClasses = this.getPositionClasses();
+        // Tamaño
+        const sizeClasses = this.getSizeClasses();
+        return [...base, ...positionClasses, ...sizeClasses].filter(Boolean).join(' ');
+    }
+    getPositionClasses() {
+        const map = {
+            bottom: ['inset-x-0', 'bottom-0', 'rounded-t-xl'],
+            top: ['inset-x-0', 'top-0', 'rounded-b-xl'],
+            left: ['inset-y-0', 'left-0', 'rounded-r-xl'],
+            right: ['inset-y-0', 'right-0', 'rounded-l-xl']
+        };
+        return map[this.position] || map.bottom;
+    }
+    getSizeClasses() {
+        const isVertical = this.position === 'bottom' || this.position === 'top';
+        if (this.size === 'full') {
+            return ['w-full', 'h-full'];
+        }
+        const sizeMap = {
+            sm: isVertical ? 'max-h-[50vh]' : 'max-w-[400px]',
+            md: isVertical ? 'max-h-[66vh]' : 'max-w-[500px]',
+            lg: isVertical ? 'max-h-[80vh]' : 'max-w-[640px]'
+        };
+        const maxDimension = sizeMap[this.size] || sizeMap.md;
+        if (isVertical) {
+            return ['w-full', maxDimension];
+        }
+        else {
+            return ['h-full', maxDimension];
+        }
+    }
+    get showLegacyContent() {
+        // Mostrar contenido legacy si variant está siendo usado
+        return this.variant === 'drawer' || this.variant === 'responsive-dialog';
+    }
 }
 PdmDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDrawerComponent, selector: "pdm-drawer", inputs: { open: "open", variant: "variant", className: "className", title: "title", description: "description", value: "value", unit: "unit", decrementLabel: "decrementLabel", incrementLabel: "incrementLabel", primaryLabel: "primaryLabel", secondaryLabel: "secondaryLabel", profileTitle: "profileTitle", profileDescription: "profileDescription", nameLabel: "nameLabel", nameValue: "nameValue", usernameLabel: "usernameLabel", usernameValue: "usernameValue", responsivePrimaryLabel: "responsivePrimaryLabel", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick", bars: "bars" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-drawer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\" [ngClass]=\"className\">\n  <div class=\"absolute inset-0 bg-foreground/30\" (click)=\"onBackdropClick()\"></div>\n\n  <section\n    *ngIf=\"variant === 'drawer'; else responsiveDialog\"\n    class=\"absolute inset-x-0 bottom-0 mx-auto w-full max-w-6xl rounded-t-lg border border-border bg-background p-6 shadow-lg\"\n  >\n    <div class=\"mx-auto mb-4 h-1 w-10 rounded-full bg-border\"></div>\n\n    <div class=\"mx-auto flex max-w-sm flex-col items-center\">\n      <h3 class=\"m-0 text-sm font-semibold text-foreground\">{{ title }}</h3>\n      <p class=\"m-0 mt-1 text-xs text-muted-foreground\">{{ description }}</p>\n\n      <div class=\"mt-3 flex w-full items-center justify-center gap-4\">\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ decrementLabel }}</button>\n        <div class=\"text-center\">\n          <div class=\"text-5xl font-semibold leading-none text-foreground\">{{ value }}</div>\n          <div class=\"mt-1 text-xs tracking-wide text-muted-foreground\">{{ unit }}</div>\n        </div>\n        <button type=\"button\" class=\"inline-flex h-6 w-6 appearance-none items-center justify-center rounded-full border border-border bg-transparent p-0 text-muted-foreground\">{{ incrementLabel }}</button>\n      </div>\n\n      <div *ngIf=\"bars.length\" class=\"mt-3 flex h-14 w-full items-end gap-1\">\n        <div *ngFor=\"let bar of bars\" class=\"flex-1 bg-foreground\" [style.height.px]=\"bar\"></div>\n      </div>\n\n      <button *ngIf=\"primaryLabel\" type=\"button\" class=\"mt-3 h-9 w-full appearance-none rounded-md bg-primary text-sm font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ primaryLabel }}</button>\n      <button *ngIf=\"secondaryLabel\" type=\"button\" class=\"mt-2 h-9 w-full appearance-none rounded-md border border-input bg-background text-sm font-medium text-foreground\" (click)=\"onSecondaryAction()\">{{ secondaryLabel }}</button>\n    </div>\n  </section>\n\n  <ng-template #responsiveDialog>\n    <section class=\"absolute left-1/2 top-1/2 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-background p-6 shadow-lg\">\n      <div class=\"flex items-start justify-between\">\n        <div>\n          <h3 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ profileTitle }}</h3>\n          <p class=\"m-0 mt-1 text-sm text-muted-foreground\">{{ profileDescription }}</p>\n        </div>\n        <button type=\"button\" class=\"h-5 w-5 appearance-none border-0 bg-transparent p-0 text-muted-foreground\" (click)=\"close()\">\u00D7</button>\n      </div>\n\n      <div class=\"mt-3 flex flex-col gap-3\">\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ nameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ nameValue }}</div>\n        </div>\n        <div>\n          <label class=\"mb-1 block text-xs font-medium text-foreground\">{{ usernameLabel }}</label>\n          <div class=\"h-8 rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground\">{{ usernameValue }}</div>\n        </div>\n      </div>\n\n      <button *ngIf=\"responsivePrimaryLabel\" type=\"button\" class=\"mt-3 h-8 w-full appearance-none rounded-md bg-primary text-xs font-medium text-primary-foreground\" (click)=\"onPrimaryAction()\">{{ responsivePrimaryLabel }}</button>\n    </section>\n  </ng-template>\n</div>\n" }]
+            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" }]
         }], propDecorators: { open: [{
                 type: Input
+            }], position: [{
+                type: Input
+            }], size: [{
+                type: Input
             }], variant: [{
                 type: Input
             }], className: [{
@@ -2751,6 +3882,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], description: [{
                 type: Input
+            }], showHandle: [{
+                type: Input
+            }], showCloseButton: [{
+                type: Input
+            }], closeOnEsc: [{
+                type: Input
+            }], closeOnBackdropClick: [{
+                type: Input
+            }], openChange: [{
+                type: Output
             }], value: [{
                 type: Input
             }], unit: [{
@@ -2777,18 +3918,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], responsivePrimaryLabel: [{
                 type: Input
-            }], closeOnEsc: [{
-                type: Input
-            }], closeOnBackdropClick: [{
+            }], bars: [{
                 type: Input
-            }], openChange: [{
-                type: Output
             }], primaryAction: [{
                 type: Output
             }], secondaryAction: [{
                 type: Output
-            }], bars: [{
-                type: Input
             }], onEsc: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -2933,10 +4068,10 @@ class PdmHoverCardComponent {
     }
 }
 PdmHoverCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-30 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmHoverCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmHoverCardComponent, selector: "pdm-hover-card", inputs: { className: "className", panelClassName: "panelClassName", side: "side", align: "align", panelWidth: "panelWidth" }, ngImport: i0, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-[70] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmHoverCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-hover-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-30 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-hover-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"relative inline-flex\"\n  [ngClass]=\"className\"\n  (mouseenter)=\"open = true\"\n  (mouseleave)=\"open = false\"\n  (focusin)=\"open = true\"\n  (focusout)=\"open = false\"\n>\n  <div>\n    <ng-content select=\"[pdmHoverTrigger]\"></ng-content>\n  </div>\n\n  <section\n    *ngIf=\"open\"\n    [style.width.px]=\"panelWidth\"\n    [ngClass]=\"[\n      'absolute z-[70] rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',\n      positionClass,\n      panelClassName\n    ]\"\n  >\n    <ng-content select=\"[pdmHoverContent]\"></ng-content>\n  </section>\n</div>\n" }]
         }], propDecorators: { className: [{
                 type: Input
             }], panelClassName: [{
@@ -3372,10 +4507,10 @@ class PdmMenubarComponent {
     }
 }
 PdmMenubarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-50 mt-1 min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmMenubarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmMenubarComponent, selector: "pdm-menubar", inputs: { menus: "menus", className: "className" }, outputs: { itemSelect: "itemSelect" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-[70] mt-1 min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmMenubarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-50 mt-1 min-w-48 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n" }]
+            args: [{ selector: 'pdm-menubar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav role=\"menubar\" [ngClass]=\"['inline-flex h-9 items-center gap-0.5 rounded-md border border-border bg-background p-1 shadow-sm', className]\">\n  <div *ngFor=\"let menu of menus; let i = index\" class=\"relative\">\n    <button type=\"button\" class=\"inline-flex h-7 appearance-none items-center rounded-sm border-0 bg-transparent px-3 text-sm text-foreground hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\" (click)=\"toggle(i)\">{{ menu.label }}</button>\n    <div *ngIf=\"openIndex === i\" class=\"absolute left-0 top-full z-[70] mt-1 min-w-40 rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md sm:min-w-48\">\n      <button\n        *ngFor=\"let item of menu.items\"\n        type=\"button\"\n        [disabled]=\"item.disabled || !item.value\"\n        class=\"relative flex w-full appearance-none cursor-default select-none items-center rounded-sm border-0 bg-transparent px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent focus-visible:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n        (click)=\"selectItem(item)\"\n      >\n        {{ item.label }}\n      </button>\n    </div>\n  </div>\n</nav>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { menus: [{
                 type: Input
             }], className: [{
@@ -3425,21 +4560,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+/**
+ * Navigation Menu component - Navegación horizontal responsive
+ *
+ * MEJORAS en v0.2.0:
+ * - Modo scroll: overflow-x-auto con scroll indicators en mobile
+ * - Modo compact: items abreviados en mobile, completos en desktop
+ * - Scroll smooth automático al item activo
+ *
+ * @example
+ * <!-- Scroll horizontal (default) -->
+ * <pdm-navigation-menu [items]="navItems"></pdm-navigation-menu>
+ *
+ * <!-- Compact mode -->
+ * <pdm-navigation-menu [items]="navItems" mobileMode="compact"></pdm-navigation-menu>
+ */
 class PdmNavigationMenuComponent {
     constructor() {
         this.items = [];
         this.className = '';
+        /**
+         * Mobile behavior: 'scroll' (horizontal scroll) o 'compact' (items reducidos)
+         * @default 'scroll'
+         */
+        this.mobileMode = 'scroll';
     }
 }
 PdmNavigationMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNavigationMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmNavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNavigationMenuComponent, selector: "pdm-navigation-menu", inputs: { items: "items", className: "className" }, ngImport: i0, template: "<nav [ngClass]=\"['relative z-10 flex max-w-max flex-1 items-center justify-center', className]\">\n  <ul class=\"group flex flex-1 list-none items-center justify-center space-x-1\">\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          item.active ? 'bg-accent text-accent-foreground' : 'text-foreground'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmNavigationMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmNavigationMenuComponent, selector: "pdm-navigation-menu", inputs: { items: "items", className: "className", mobileMode: "mobileMode" }, ngImport: i0, template: "<nav\n  [ngClass]=\"[\n    'relative z-10 flex w-full items-center',\n    mobileMode === 'scroll' ? 'overflow-x-auto scrollbar-thin' : '',\n    className\n  ]\"\n>\n  <ul\n    [ngClass]=\"[\n      'group flex list-none items-center gap-1',\n      mobileMode === 'scroll' ? 'flex-nowrap' : 'flex-wrap justify-center'\n    ]\"\n  >\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 whitespace-nowrap',\n          item.active ? 'bg-accent text-accent-foreground' : 'text-foreground'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmNavigationMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [ngClass]=\"['relative z-10 flex max-w-max flex-1 items-center justify-center', className]\">\n  <ul class=\"group flex flex-1 list-none items-center justify-center space-x-1\">\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 w-max items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          item.active ? 'bg-accent text-accent-foreground' : 'text-foreground'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
+            args: [{ selector: 'pdm-navigation-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n  [ngClass]=\"[\n    'relative z-10 flex w-full items-center',\n    mobileMode === 'scroll' ? 'overflow-x-auto scrollbar-thin' : '',\n    className\n  ]\"\n>\n  <ul\n    [ngClass]=\"[\n      'group flex list-none items-center gap-1',\n      mobileMode === 'scroll' ? 'flex-nowrap' : 'flex-wrap justify-center'\n    ]\"\n  >\n    <li *ngFor=\"let item of items\">\n      <a\n        [href]=\"item.href || '#'\"\n        [ngClass]=\"[\n          'group inline-flex h-9 items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 whitespace-nowrap',\n          item.active ? 'bg-accent text-accent-foreground' : 'text-foreground'\n        ]\"\n      >\n        {{ item.label }}\n      </a>\n    </li>\n  </ul>\n</nav>\n" }]
         }], propDecorators: { items: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], mobileMode: [{
+                type: Input
             }] } });
 
 /**
@@ -3657,8 +4814,9 @@ class PdmSelectComponent {
         this.cdr.markForCheck();
         const positionStrategy = createFlexiblePositionStrategy(this.overlay, triggerEl, 4);
         this.overlayRef = this.overlay.create({
-            // Fix: use a token array — DOMTokenList.add() rejects space-containing strings.
-            panelClass: ['block'],
+            // CRÍTICO: z-[70] para aparecer SOBRE modals (z-[60])
+            // panelClass se aplica al cdk-overlay-pane wrapper
+            panelClass: [Z_INDEX.popover],
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             width: triggerEl.offsetWidth,
@@ -3773,10 +4931,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-[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 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 });
 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-[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 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" }]
         }], propDecorators: { page: [{
                 type: Input
             }], pageCount: [{
@@ -3832,10 +4990,11 @@ class PdmPopoverComponent {
         return this._open;
     }
     get panelClasses() {
+        const baseClasses = 'min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md';
         return [
             this.panelPlacement === 'top'
-                ? 'absolute bottom-full left-0 z-30 mb-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md'
-                : 'absolute left-0 top-full z-30 mt-2 min-w-80 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md',
+                ? `absolute bottom-full left-0 ${Z_INDEX.popover} mb-2 ${baseClasses}`
+                : `absolute left-0 top-full ${Z_INDEX.popover} mt-2 ${baseClasses}`,
             this.panelClassName
         ];
     }
@@ -4027,14 +5186,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Sheet/Side panel component con soporte responsive
+ *
+ * MEJORADO en v0.2.0:
+ * - Tamaños configurables
+ * - Mejor manejo de overflow
+ * - Responsive sizes
+ *
+ * @example
+ * <pdm-sheet [open]="isOpen" side="right" size="md">
+ *   <h3>Settings</h3>
+ *   <p>Content here</p>
+ * </pdm-sheet>
+ */
 class PdmSheetComponent {
     constructor() {
         this.open = false;
+        /**
+         * Lado desde donde aparece el sheet
+         */
         this.side = 'right';
+        /**
+         * Tamaño del sheet
+         * - sm: 320px (side) / 40vh (top/bottom)
+         * - md: 400px (side) / 50vh (top/bottom) (default)
+         * - lg: 500px (side) / 66vh (top/bottom)
+         * - xl: 640px (side) / 80vh (top/bottom)
+         * - full: 100%
+         */
+        this.size = 'md';
         this.className = '';
-        /** Close when the ESC key is pressed. Default: `true`. */
         this.closeOnEsc = true;
-        /** Close when the backdrop is clicked. Default: `true`. */
         this.closeOnBackdropClick = true;
         this.openChange = new EventEmitter();
     }
@@ -4052,24 +5235,56 @@ class PdmSheetComponent {
         this.openChange.emit(false);
     }
     get panelClass() {
-        if (this.side === 'left')
-            return 'left-0 top-0 h-full w-full max-w-[360px] border-r';
-        if (this.side === 'top')
-            return 'top-0 left-0 w-full border-b';
-        if (this.side === 'bottom')
-            return 'bottom-0 left-0 w-full border-t';
-        return 'right-0 top-0 h-full w-full max-w-[360px] border-l';
+        const base = 'absolute bg-background border-border shadow-lg overflow-auto';
+        const position = this.getPositionClass();
+        const sizing = this.getSizingClass();
+        return `${base} ${position} ${sizing} ${this.className}`.trim();
+    }
+    getPositionClass() {
+        const map = {
+            left: 'left-0 top-0 h-full border-r',
+            right: 'right-0 top-0 h-full border-l',
+            top: 'top-0 left-0 w-full border-b',
+            bottom: 'bottom-0 left-0 w-full border-t'
+        };
+        return map[this.side];
+    }
+    getSizingClass() {
+        if (this.size === 'full') {
+            return 'w-full h-full';
+        }
+        const isHorizontal = this.side === 'left' || this.side === 'right';
+        if (isHorizontal) {
+            const widthMap = {
+                sm: 'w-full max-w-[320px] sm:max-w-[320px]',
+                md: 'w-full max-w-[360px] sm:max-w-[400px]',
+                lg: 'w-full max-w-[400px] sm:max-w-[500px]',
+                xl: 'w-full max-w-[500px] sm:max-w-[640px]'
+            };
+            return widthMap[this.size] || widthMap.md;
+        }
+        else {
+            const heightMap = {
+                sm: 'max-h-[40vh]',
+                md: 'max-h-[50vh]',
+                lg: 'max-h-[66vh]',
+                xl: 'max-h-[80vh]'
+            };
+            return heightMap[this.size] || heightMap.md;
+        }
     }
 }
 PdmSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSheetComponent, selector: "pdm-sheet", inputs: { open: "open", side: "side", className: "className", closeOnEsc: "closeOnEsc", closeOnBackdropClick: "closeOnBackdropClick" }, outputs: { openChange: "openChange" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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 });
 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 border border-border bg-background p-6 shadow-lg', panelClass, className]\" role=\"dialog\" aria-modal=\"true\">\n    <button type=\"button\" class=\"absolute right-3 top-3 appearance-none rounded-sm border-0 bg-transparent p-0 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\" (click)=\"close()\">\n      <pdm-icon name=\"x\" [size]=\"16\"></pdm-icon>\n    </button>\n    <ng-content></ng-content>\n  </section>\n</div>\n" }]
+            args: [{ selector: 'pdm-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" class=\"fixed inset-0 z-50\">\n  <button type=\"button\" class=\"absolute inset-0 appearance-none border-0 bg-foreground/80 p-0\" aria-label=\"Close sheet\" (click)=\"onBackdropClick()\"></button>\n\n  <section [ngClass]=\"['absolute 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" }]
         }], propDecorators: { open: [{
                 type: Input
             }], side: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], className: [{
                 type: Input
             }], closeOnEsc: [{
@@ -4083,21 +5298,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 args: ['document:keydown.escape']
             }] } });
 
+/**
+ * Sidebar component - Navegación lateral responsive
+ *
+ * MEJORAS en v0.2.0:
+ * - Mobile drawer mode: overlay fullscreen en mobile, sidebar fijo en desktop
+ * - Sidebar mode: sidebar persistente con widths responsive
+ * - Backdrop automático en mobile drawer mode
+ *
+ * @example
+ * <!-- Mobile drawer (default) -->
+ * <pdm-sidebar [open]="sidebarOpen" (openChange)="sidebarOpen = $event">
+ *   <nav>Menu items...</nav>
+ * </pdm-sidebar>
+ *
+ * <!-- Sidebar persistente -->
+ * <pdm-sidebar mobileMode="sidebar" [collapsed]="collapsed">
+ *   <nav>Menu items...</nav>
+ * </pdm-sidebar>
+ */
 class PdmSidebarComponent {
     constructor() {
+        /**
+         * Mobile behavior: 'drawer' (overlay) o 'sidebar' (persistente)
+         * @default 'drawer'
+         */
+        this.mobileMode = 'drawer';
+        /**
+         * Collapsed state (solo aplica en mobileMode="sidebar")
+         */
         this.collapsed = false;
+        /**
+         * Open state (solo aplica en mobileMode="drawer")
+         */
+        this.open = false;
         this.className = '';
+        /**
+         * Emite cuando el drawer se cierra (solo en mobileMode="drawer")
+         */
+        this.openChange = new EventEmitter();
+    }
+    onBackdropClick() {
+        if (this.mobileMode === 'drawer') {
+            this.open = false;
+            this.openChange.emit(false);
+        }
     }
 }
 PdmSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSidebarComponent, selector: "pdm-sidebar", inputs: { collapsed: "collapsed", className: "className" }, ngImport: i0, template: "<aside [ngClass]=\"['h-full border-r border-border bg-background transition-all', collapsed ? 'w-14' : 'w-64', className]\">\n  <ng-content></ng-content>\n</aside>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSidebarComponent, selector: "pdm-sidebar", inputs: { mobileMode: "mobileMode", collapsed: "collapsed", open: "open", className: "className" }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<!-- Mobile drawer mode -->\n<ng-container *ngIf=\"mobileMode === 'drawer'\">\n  <!-- Backdrop -->\n  <div\n    *ngIf=\"open\"\n    class=\"fixed inset-0 z-40 bg-black/50 lg:hidden\"\n    (click)=\"onBackdropClick()\"\n  ></div>\n  \n  <!-- Drawer -->\n  <aside\n    [ngClass]=\"[\n      'fixed inset-y-0 left-0 z-50 h-full w-64 transform border-r border-border bg-background transition-transform duration-300 lg:relative lg:z-auto lg:translate-x-0',\n      open ? 'translate-x-0' : '-translate-x-full',\n      className\n    ]\"\n  >\n    <ng-content></ng-content>\n  </aside>\n</ng-container>\n\n<!-- Sidebar persistente mode -->\n<aside\n  *ngIf=\"mobileMode === 'sidebar'\"\n  [ngClass]=\"[\n    'h-full border-r border-border bg-background transition-all',\n    collapsed ? 'w-14 sm:w-14' : 'w-48 sm:w-56 lg:w-64',\n    className\n  ]\"\n>\n  <ng-content></ng-content>\n</aside>\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: PdmSidebarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside [ngClass]=\"['h-full border-r border-border bg-background transition-all', collapsed ? 'w-14' : 'w-64', className]\">\n  <ng-content></ng-content>\n</aside>\n" }]
-        }], propDecorators: { collapsed: [{
+            args: [{ selector: 'pdm-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Mobile drawer mode -->\n<ng-container *ngIf=\"mobileMode === 'drawer'\">\n  <!-- Backdrop -->\n  <div\n    *ngIf=\"open\"\n    class=\"fixed inset-0 z-40 bg-black/50 lg:hidden\"\n    (click)=\"onBackdropClick()\"\n  ></div>\n  \n  <!-- Drawer -->\n  <aside\n    [ngClass]=\"[\n      'fixed inset-y-0 left-0 z-50 h-full w-64 transform border-r border-border bg-background transition-transform duration-300 lg:relative lg:z-auto lg:translate-x-0',\n      open ? 'translate-x-0' : '-translate-x-full',\n      className\n    ]\"\n  >\n    <ng-content></ng-content>\n  </aside>\n</ng-container>\n\n<!-- Sidebar persistente mode -->\n<aside\n  *ngIf=\"mobileMode === 'sidebar'\"\n  [ngClass]=\"[\n    'h-full border-r border-border bg-background transition-all',\n    collapsed ? 'w-14 sm:w-14' : 'w-48 sm:w-56 lg:w-64',\n    className\n  ]\"\n>\n  <ng-content></ng-content>\n</aside>\n" }]
+        }], propDecorators: { mobileMode: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], open: [{
                 type: Input
             }], className: [{
                 type: Input
+            }], openChange: [{
+                type: Output
             }] } });
 
 class PdmSkeletonComponent {
@@ -4264,212 +5526,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
-class PdmTableComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.variant = 'default';
-        this.reorderRows = false;
-        this.dragHandleSelector = '[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle,[data-auto-drag-handle]';
-        this.className = '';
-        this.rowOrderChange = new EventEmitter();
-        this.cleanupListeners = [];
-        this.draggedRow = null;
-    }
-    ngAfterViewInit() {
-        this.syncReorderBehavior();
-    }
-    ngOnChanges(changes) {
-        if (changes['reorderRows'] || changes['variant']) {
-            this.syncReorderBehavior();
-        }
-    }
-    ngOnDestroy() {
-        this.cleanupReorderBehavior();
-    }
-    get wrapperClasses() {
-        return [
-            'relative w-full overflow-auto',
-            this.variant === 'interactive' ? 'overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-background' : '',
-            this.variant === 'data' ? 'overflow-hidden rounded-md border border-border bg-background' : '',
-            this.className
-        ];
-    }
-    get tableClasses() {
-        return [
-            'w-full caption-bottom text-sm',
-            this.variant === 'data'
-                ? 'border-collapse text-foreground [&_thead_tr]:border-b [&_thead_tr]:border-border [&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr:last-child]:border-b-0 [&_th]:h-10 [&_th]:px-2 [&_th]:text-left [&_th]:align-middle [&_th]:font-medium [&_td]:p-2 [&_td]:align-middle'
-                : '',
-            this.variant === 'interactive'
-                ? 'text-foreground [&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10 [&_thead]:bg-muted/70 [&_thead_tr]:border-b [&_thead_tr]:border-border [&_th]:h-12 [&_th]:px-4 [&_th]:text-left [&_th]:align-middle [&_th]:text-sm [&_th]:font-medium [&_th]:whitespace-nowrap [&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/50 [&_tbody_tr:last-child]:border-b-0 [&_td]:h-14 [&_td]:px-4 [&_td]:align-middle [&_td]:text-sm [&_td]:whitespace-nowrap [&_td:first-child]:w-10 [&_td:last-child]:w-10 [&_svg]:text-muted-foreground'
-                : ''
-        ];
-    }
-    syncReorderBehavior() {
-        this.cleanupReorderBehavior();
-        if (!this.isReorderEnabled) {
-            return;
-        }
-        const tbody = this.getTbody();
-        if (!tbody) {
-            return;
-        }
-        this.setRowsDraggable(tbody, true);
-        this.cleanupListeners.push(this.renderer.listen(tbody, 'mousedown', (event) => this.armDragFromHandle(event)), this.renderer.listen(tbody, 'dragstart', (event) => this.onDragStart(event)), this.renderer.listen(tbody, 'dragover', (event) => this.onDragOver(event, tbody)), this.renderer.listen(tbody, 'drop', (event) => this.onDrop(event)), this.renderer.listen(tbody, 'dragend', () => this.onDragEnd()));
-        this.observer = new MutationObserver(() => this.setRowsDraggable(tbody, true));
-        this.observer.observe(tbody, { childList: true });
-    }
-    cleanupReorderBehavior() {
-        this.cleanupListeners.forEach((dispose) => dispose());
-        this.cleanupListeners = [];
-        if (this.observer) {
-            this.observer.disconnect();
-            this.observer = undefined;
-        }
-        const tbody = this.getTbody();
-        if (tbody) {
-            this.setRowsDraggable(tbody, false);
-        }
-        this.draggedRow = null;
-    }
-    get isReorderEnabled() {
-        return this.reorderRows;
-    }
-    getTbody() {
-        return this.tableElement?.nativeElement.tBodies.item(0) ?? null;
-    }
-    setRowsDraggable(tbody, enabled) {
-        const rows = Array.from(tbody.rows);
-        rows.forEach((row) => {
-            this.syncAutoDragHandle(row, enabled);
-            row.draggable = false;
-            if (!enabled) {
-                delete row.dataset['dragging'];
-                delete row.dataset['dragArmed'];
-            }
-        });
-    }
-    syncAutoDragHandle(row, enabled) {
-        const firstCell = row.cells.item(0);
-        if (!firstCell) {
-            return;
-        }
-        const existingAutoHandle = firstCell.querySelector('[data-auto-drag-handle]');
-        if (!enabled) {
-            existingAutoHandle?.remove();
-            return;
-        }
-        const hasCustomHandle = !!firstCell.querySelector('[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle');
-        if (hasCustomHandle || existingAutoHandle) {
-            return;
-        }
-        const button = this.renderer.createElement('button');
-        this.renderer.setAttribute(button, 'type', 'button');
-        this.renderer.setAttribute(button, 'aria-label', 'Drag row');
-        this.renderer.setAttribute(button, 'data-auto-drag-handle', 'true');
-        this.renderer.addClass(button, 'inline-flex');
-        this.renderer.addClass(button, 'h-7');
-        this.renderer.addClass(button, 'w-7');
-        this.renderer.addClass(button, 'items-center');
-        this.renderer.addClass(button, 'justify-center');
-        this.renderer.addClass(button, 'cursor-grab');
-        this.renderer.addClass(button, 'active:cursor-grabbing');
-        this.renderer.addClass(button, 'text-muted-foreground');
-        const dots = this.renderer.createElement('span');
-        this.renderer.addClass(dots, 'text-sm');
-        this.renderer.addClass(dots, 'leading-none');
-        this.renderer.setProperty(dots, 'textContent', '⋮⋮');
-        this.renderer.appendChild(button, dots);
-        this.renderer.insertBefore(firstCell, button, firstCell.firstChild);
-    }
-    onDragStart(event) {
-        const target = event.target;
-        const row = target?.closest('tr');
-        if (!row) {
-            return;
-        }
-        const handle = target?.closest(this.dragHandleSelector);
-        const isArmed = row.dataset['dragArmed'] === 'true';
-        if ((!handle || !row.contains(handle)) && !isArmed) {
-            event.preventDefault();
-            return;
-        }
-        this.draggedRow = row;
-        this.draggedRow.dataset['dragging'] = 'true';
-        if (event.dataTransfer) {
-            event.dataTransfer.effectAllowed = 'move';
-            event.dataTransfer.setData('text/plain', '');
-        }
-    }
-    onDragOver(event, tbody) {
-        if (!this.draggedRow) {
-            return;
-        }
-        event.preventDefault();
-        const target = event.target;
-        const targetRow = target?.closest('tr');
-        if (!targetRow || targetRow === this.draggedRow) {
-            return;
-        }
-        const rect = targetRow.getBoundingClientRect();
-        const shouldInsertBefore = event.clientY < rect.top + rect.height / 2;
-        tbody.insertBefore(this.draggedRow, shouldInsertBefore ? targetRow : targetRow.nextSibling);
-    }
-    onDrop(event) {
-        event.preventDefault();
-    }
-    onDragEnd() {
-        const tbody = this.getTbody();
-        if (tbody) {
-            Array.from(tbody.rows).forEach((row) => {
-                row.draggable = false;
-                delete row.dataset['dragArmed'];
-            });
-        }
-        if (this.draggedRow) {
-            delete this.draggedRow.dataset['dragging'];
-            this.draggedRow = null;
-        }
-        if (!tbody) {
-            return;
-        }
-        const order = Array.from(tbody.rows).map((row, index) => row.getAttribute('data-row-id') || String(index));
-        this.rowOrderChange.emit(order);
-    }
-    armDragFromHandle(event) {
-        const target = event.target;
-        const handle = target?.closest(this.dragHandleSelector);
-        if (!handle) {
-            return;
-        }
-        const row = handle.closest('tr');
-        if (!row) {
-            return;
-        }
-        row.draggable = true;
-        row.dataset['dragArmed'] = 'true';
-    }
-}
-PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", reorderRows: "reorderRows", dragHandleSelector: "dragHandleSelector", className: "className" }, outputs: { rowOrderChange: "rowOrderChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { variant: [{
-                type: Input
-            }], reorderRows: [{
-                type: Input
-            }], dragHandleSelector: [{
-                type: Input
-            }], className: [{
-                type: Input
-            }], rowOrderChange: [{
-                type: Output
-            }], tableElement: [{
-                type: ViewChild,
-                args: ['tableElement']
-            }] } });
-
 class PdmTabsComponent {
     constructor(cdr) {
         this.cdr = cdr;
@@ -4487,10 +5543,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 role=\"tablist\" class=\"inline-flex h-8 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground\">\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-1.5 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',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTabsComponent, selector: "pdm-tabs", inputs: { items: "items", value: "value", className: "className" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", 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 role=\"tablist\" class=\"inline-flex h-8 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground\">\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-1.5 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',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pdm-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['w-full', className]\">\n  <div\n    role=\"tablist\"\n    class=\"inline-flex h-8 w-full items-center overflow-x-auto scrollbar-thin rounded-lg bg-muted p-[3px] text-muted-foreground md:w-fit\"\n  >\n    <button\n      *ngFor=\"let item of items\"\n      role=\"tab\"\n      [attr.aria-selected]=\"value === item.value\"\n      [disabled]=\"item.disabled\"\n      [ngClass]=\"[\n        'relative inline-flex h-[calc(100%-1px)] appearance-none flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-3 py-0.5 text-sm font-medium transition-all focus-visible:border-ring focus-visible:outline-none focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 md:flex-initial md:px-4',\n        value === item.value ? 'bg-background text-foreground shadow-sm' : 'bg-transparent text-muted-foreground'\n      ]\"\n      (click)=\"select(item)\"\n      type=\"button\"\n    >\n      {{ item.label }}\n    </button>\n  </div>\n  <div class=\"mt-4\">\n    <ng-content></ng-content>\n  </div>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], value: [{
@@ -4641,10 +5697,10 @@ class PdmTooltipComponent {
     }
 }
 PdmTooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTooltipComponent, selector: "pdm-tooltip", inputs: { text: "text", side: "side", className: "className" }, ngImport: i0, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-50 overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmTooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTooltipComponent, selector: "pdm-tooltip", inputs: { text: "text", side: "side", className: "className" }, ngImport: i0, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-[70] overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-50 overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n" }]
+            args: [{ selector: 'pdm-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"relative inline-flex\" [ngClass]=\"className\" (mouseenter)=\"open = true\" (mouseleave)=\"open = false\" (focusin)=\"open = true\" (focusout)=\"open = false\">\n  <ng-content></ng-content>\n  <span *ngIf=\"open\" [ngClass]=\"['pointer-events-none absolute z-[70] overflow-hidden rounded-md bg-foreground px-3 py-1.5 text-xs text-background animate-in fade-in-0 zoom-in-95', positionClass]\">\n    {{ text }}\n  </span>\n</span>\n" }]
         }], propDecorators: { text: [{
                 type: Input
             }], side: [{
@@ -4675,6 +5731,7 @@ const COMPONENTS = [
     PdmDataTableComponent,
     PdmDatePickerComponent,
     PdmDialogComponent,
+    PdmDraggableTableComponent,
     PdmDropdownMenuComponent,
     PdmDrawerComponent,
     PdmEmptyComponent,
@@ -4738,6 +5795,7 @@ PdmUiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PdmDataTableComponent,
         PdmDatePickerComponent,
         PdmDialogComponent,
+        PdmDraggableTableComponent,
         PdmDropdownMenuComponent,
         PdmDrawerComponent,
         PdmEmptyComponent,
@@ -4796,6 +5854,7 @@ PdmUiKitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version:
         PdmDataTableComponent,
         PdmDatePickerComponent,
         PdmDialogComponent,
+        PdmDraggableTableComponent,
         PdmDropdownMenuComponent,
         PdmDrawerComponent,
         PdmEmptyComponent,
@@ -4848,5 +5907,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmOutsideClickDirective, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, createFlexiblePositionStrategy };
+export { BREAKPOINTS, PdmAccordionComponent, PdmAlertComponent, PdmAlertDialogComponent, PdmAspectRatioComponent, PdmAvatarComponent, PdmBadgeComponent, PdmBreadcrumbComponent, PdmButtonComponent, PdmButtonGroupComponent, PdmCalendarComponent, PdmCardComponent, PdmCarouselComponent, PdmChartComponent, PdmCheckboxComponent, PdmCollapsibleComponent, PdmComboboxComponent, PdmCommandComponent, PdmContextMenuComponent, PdmDataTableComponent, PdmDatePickerComponent, PdmDialogComponent, PdmDraggableTableComponent, PdmDrawerComponent, PdmDropdownMenuComponent, PdmEmptyComponent, PdmFieldComponent, PdmHoverCardComponent, PdmIconComponent, PdmInputComponent, PdmInputGroupComponent, PdmInputOtpComponent, PdmInputPasswordComponent, PdmItemComponent, PdmKbdComponent, PdmLabelComponent, PdmMenubarComponent, PdmNativeSelectComponent, PdmNavigationMenuComponent, PdmOutsideClickDirective, PdmPaginationComponent, PdmPopoverComponent, PdmProgressComponent, PdmRadioGroupComponent, PdmScrollAreaComponent, PdmSelectComponent, PdmSelectOptionDirective, PdmSeparatorComponent, PdmSheetComponent, PdmSidebarComponent, PdmSkeletonComponent, PdmSliderComponent, PdmSonnerComponent, PdmSpinnerComponent, PdmSwitchComponent, PdmTableComponent, PdmTabsComponent, PdmTextareaComponent, PdmToggleComponent, PdmToggleGroupComponent, PdmTooltipComponent, PdmUiKitModule, RESPONSIVE_CONTAINER, RESPONSIVE_DISPLAY, TABLE_RESPONSIVE, Z_INDEX, createFlexiblePositionStrategy, logZIndexStack, overflowResponsive, responsive, spacingResponsive, widthResponsive };
 //# sourceMappingURL=pdm-ui-kit.mjs.map