pdm-ui-kit 1.4.0 → 1.6.0

package/fesm2015/pdm-ui-kit-src-dialog.mjs

@@ -1,45 +1,43 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, NgModule } from '@angular/core';
-import { Z_INDEX, responsive } from 'pdm-ui-kit/src/utils';
+import { Directive, EventEmitter, Component, ChangeDetectionStrategy, Input, ContentChild, Output, HostListener, NgModule } from '@angular/core';
+import { Z_INDEX, cn, responsive } from 'pdm-ui-kit/src/utils';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 
+class PdmDialogHeaderDirective {
+}
+PdmDialogHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PdmDialogHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogHeaderDirective, selector: "[pdmHeader]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pdmHeader]" }]
+        }] });
+class PdmDialogFooterDirective {
+}
+PdmDialogFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PdmDialogFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogFooterDirective, selector: "[pdmFooter]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogFooterDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: "[pdmFooter]" }]
+        }] });
 /**
- * Modal/Dialog component con soporte responsive
- *
- * MEJORADO en v0.2.0:
- * - Modo 'responsive' (default): fullscreen en mobile, modal en desktop
- * - Tamaños predefinidos: sm, md, lg, xl
- * - Mejor manejo de scroll en mobile
- *
- * @example
- * // Responsive (recomendado)
- * <pdm-dialog [open]="isOpen" size="responsive">
- *   <p>Content</p>
- * </pdm-dialog>
- *
- * @example
- * // Tamaño fijo
- * <pdm-dialog [open]="isOpen" size="lg">
- *   <p>Content</p>
- * </pdm-dialog>
+ * Responsive modal/dialog component.
  */
 class PdmDialogComponent {
     constructor() {
         this.open = false;
         this.variant = "default";
         /**
-         * Tamaño del dialog
-         * - responsive: fullscreen mobile, modal desktop (recomendado)
-         * - sm: 400px max
-         * - md: 500px max
-         * - lg: 640px max (default)
-         * - xl: 800px max
-         * - desktop/mobile/mobile-fullscreen: legacy, deprecado
+         * Dialog size. Responsive mode is fullscreen on mobile and a modal on desktop.
          */
         this.size = "responsive";
+        /**
+         * Custom desktop maximum width, such as `800px` or `min(90vw, 800px)`.
+         * Overrides `size` at the `sm` breakpoint; responsive mobile mode remains fullscreen.
+         */
+        this.maxWidth = "";
         this.title = "";
         this.description = "";
         this.closeOnBackdrop = true;
@@ -78,7 +76,6 @@ class PdmDialogComponent {
         }
     }
     get panelClassName() {
-        // Legacy sizes (backward compatibility)
         if (this.size === "desktop") {
             return this.buildPanelClasses([
                 "max-w-[640px]",
@@ -101,23 +98,19 @@ class PdmDialogComponent {
                 "sm:rounded-[10px]",
             ]);
         }
-        // New responsive mode (recomendado)
         if (this.size === "responsive") {
             return this.buildPanelClasses([
-                // Mobile: fullscreen con bordes redondeados solo arriba
                 "w-full",
                 "h-full",
                 "max-h-[100dvh]",
                 "rounded-t-[10px]",
                 "sm:rounded-[10px]",
-                // Desktop: modal centrado
                 "sm:w-auto",
                 "sm:h-auto",
                 "sm:max-w-[640px]",
                 "sm:max-h-[calc(100vh-4rem)]",
             ]);
         }
-        // New size options
         const sizeMap = {
             sm: "sm:max-w-[400px]",
             md: "sm:max-w-[500px]",
@@ -126,12 +119,10 @@ class PdmDialogComponent {
         };
         const maxWidth = sizeMap[this.size] || sizeMap.lg;
         return this.buildPanelClasses([
-            // Mobile: fullscreen
             "w-full",
             "h-full",
             "max-h-[100dvh]",
             "rounded-t-[10px]",
-            // Desktop: modal
             "sm:rounded-[10px]",
             "sm:w-auto",
             "sm:h-auto",
@@ -151,65 +142,25 @@ class PdmDialogComponent {
             "text-foreground",
             "shadow-lg",
             "overflow-hidden",
-            ...sizeClasses,
-            this.className,
         ];
-        return base.filter(Boolean).join(" ");
+        const maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : "";
+        return cn(...base, ...sizeClasses, maxWidthClass, this.className);
     }
     get bodyWrapperClassName() {
-        // min-h-0 is CRITICAL for flex child to shrink and allow internal scroll
-        const base = [
-            "flex-1",
-            "min-h-0",
-            "overflow-y-auto",
-            "px-4",
-            "py-6",
-            "sm:px-6",
-            this.bodyClassName,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("flex-1 min-h-0 overflow-y-auto px-4 py-6 sm:px-6", this.bodyClassName);
     }
     get headerWrapperClassName() {
-        const base = [
-            "flex",
-            "items-start",
-            "justify-between",
-            "gap-3",
-            "p-4",
-            "sm:p-6",
-            "border-b",
-            "border-border",
-            this.headerClassName,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("flex items-start justify-between gap-3 p-4 sm:p-6 border-b border-border", this.headerClassName);
     }
     get footerWrapperClassName() {
         const effectiveAlign = this.alignFooter === "right" && this.variant === "custom-close"
             ? "left"
             : this.alignFooter;
-        const base = [
-            "p-4",
-            "sm:p-6",
-            "border-t",
-            "border-border",
-            // Mobile: siempre full-width
-            "flex",
-            "flex-col",
-            "gap-2",
-            // Desktop: según alignFooter
-            effectiveAlign === "full-width"
-                ? "sm:flex-col"
-                : "sm:flex-row sm:items-center",
-            effectiveAlign === "left" ? "sm:justify-start" : "",
-            effectiveAlign === "right" ? "sm:justify-end" : "",
-            this.footerClassName,
-        ];
-        return base.filter(Boolean).join(" ");
+        return cn("p-4 sm:p-6 border-t border-border flex flex-col gap-2", effectiveAlign === "full-width"
+            ? "sm:flex-col"
+            : "sm:flex-row sm:items-center", effectiveAlign === "left" ? "sm:justify-start" : "", effectiveAlign === "right" ? "sm:justify-end" : "", this.footerClassName);
     }
     get containerClassName() {
-        // Container con backdrop z-40
-        // Mobile: fullscreen desde el bottom
-        // Desktop: centrado
         return responsive({
             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`,
@@ -217,16 +168,18 @@ class PdmDialogComponent {
     }
 }
 PdmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDialogComponent, selector: "pdm-dialog", inputs: { open: "open", variant: "variant", size: "size", maxWidth: "maxWidth", title: "title", description: "description", closeOnBackdrop: "closeOnBackdrop", closeOnEsc: "closeOnEsc", showCloseButton: "showCloseButton", showHeader: "showHeader", showFooter: "showFooter", primaryActionText: "primaryActionText", secondaryActionText: "secondaryActionText", alignFooter: "alignFooter", headerClassName: "headerClassName", bodyClassName: "bodyClassName", footerClassName: "footerClassName", className: "className" }, outputs: { openChange: "openChange", primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, host: { listeners: { "document:keydown.escape": "onEsc()" } }, queries: [{ propertyName: "customHeader", first: true, predicate: PdmDialogHeaderDirective, descendants: true }, { propertyName: "customFooter", first: true, predicate: PdmDialogFooterDirective, descendants: true }], ngImport: i0, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <ng-container *ngIf=\"customHeader; else defaultHeader\">\n        <ng-content select=\"[pdmHeader]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <div class=\"min-w-0 flex-1\">\n          <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n          <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n        </div>\n        <button\n          *ngIf=\"showCloseButton\"\n          type=\"button\"\n          class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n          (click)=\"close()\"\n          aria-label=\"Close dialog\"\n        >\n          <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </ng-template>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"customFooter; else defaultFooter\">\n        <ng-content select=\"[pdmFooter]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultFooter>\n        <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n        </ng-container>\n\n        <ng-template #defaultActions>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n            (click)=\"onPrimaryAction()\"\n          >\n            {{ primaryActionText }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-dialog", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <ng-container *ngIf=\"customHeader; else defaultHeader\">\n        <ng-content select=\"[pdmHeader]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <div class=\"min-w-0 flex-1\">\n          <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n          <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n        </div>\n        <button\n          *ngIf=\"showCloseButton\"\n          type=\"button\"\n          class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n          (click)=\"close()\"\n          aria-label=\"Close dialog\"\n        >\n          <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </ng-template>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"customFooter; else defaultFooter\">\n        <ng-content select=\"[pdmFooter]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultFooter>\n        <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n        </ng-container>\n\n        <ng-template #defaultActions>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n            (click)=\"onPrimaryAction()\"\n          >\n            {{ primaryActionText }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </div>\n  </section>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], propDecorators: { open: [{
                 type: Input
             }], variant: [{
                 type: Input
             }], size: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
             }], title: [{
                 type: Input
             }], description: [{
@@ -255,6 +208,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], className: [{
                 type: Input
+            }], customHeader: [{
+                type: ContentChild,
+                args: [PdmDialogHeaderDirective]
+            }], customFooter: [{
+                type: ContentChild,
+                args: [PdmDialogFooterDirective]
             }], openChange: [{
                 type: Output
             }], primaryAction: [{
@@ -268,11 +227,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 const COMPONENTS = [
     PdmDialogComponent,
+    PdmDialogHeaderDirective,
+    PdmDialogFooterDirective,
 ];
 class PdmDialogModule {
 }
 PdmDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent], imports: [CommonModule, A11yModule], exports: [PdmDialogComponent] });
+PdmDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, declarations: [PdmDialogComponent,
+        PdmDialogHeaderDirective,
+        PdmDialogFooterDirective], imports: [CommonModule, A11yModule], exports: [PdmDialogComponent,
+        PdmDialogHeaderDirective,
+        PdmDialogFooterDirective] });
 PdmDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, imports: [CommonModule, A11yModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDialogModule, decorators: [{
             type: NgModule,
@@ -287,5 +252,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { PdmDialogComponent, PdmDialogModule };
+export { PdmDialogComponent, PdmDialogFooterDirective, PdmDialogHeaderDirective, PdmDialogModule };
 //# sourceMappingURL=pdm-ui-kit-src-dialog.mjs.map

package/fesm2015/pdm-ui-kit-src-dialog.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pdm-ui-kit-src-dialog.mjs","sources":["../../../src/dialog/dialog.component.ts","../../../src/dialog/dialog.component.html","../../../src/dialog/dialog.module.ts","../../../src/dialog/pdm-ui-kit-src-dialog.ts"],"sourcesContent":["import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n} from \"@angular/core\";\nimport { responsive } from \"pdm-ui-kit/src/utils\";\nimport { Z_INDEX } from \"pdm-ui-kit/src/utils\";\n\nexport type PdmDialogVariant = \"default\" | \"custom-close\";\n\n/**\n * @deprecated Use 'responsive' mode instead. Will be removed in v0.3.0\n */\nexport type PdmDialogSize =\n\t| \"desktop\"\n\t| \"mobile\"\n\t| \"mobile-fullscreen\"\n\t| \"sm\"\n\t| \"md\"\n\t| \"lg\"\n\t| \"xl\"\n\t| \"responsive\";\n\nexport type PdmDialogFooterAlign = \"right\" | \"full-width\" | \"left\";\n\n/**\n * Modal/Dialog component con soporte responsive\n *\n * MEJORADO en v0.2.0:\n * - Modo 'responsive' (default): fullscreen en mobile, modal en desktop\n * - Tamaños predefinidos: sm, md, lg, xl\n * - Mejor manejo de scroll en mobile\n *\n * @example\n * // Responsive (recomendado)\n * <pdm-dialog [open]=\"isOpen\" size=\"responsive\">\n *   <p>Content</p>\n * </pdm-dialog>\n *\n * @example\n * // Tamaño fijo\n * <pdm-dialog [open]=\"isOpen\" size=\"lg\">\n *   <p>Content</p>\n * </pdm-dialog>\n */\n@Component({\n\tselector: \"pdm-dialog\",\n\ttemplateUrl: \"./dialog.component.html\",\n\tstyles: [\n\t\t`\n    :host {\n      display: block;\n    }\n  `,\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmDialogComponent {\n\t@Input() open = false;\n\t@Input() variant: PdmDialogVariant = \"default\";\n\n\t/**\n\t * Tamaño del dialog\n\t * - responsive: fullscreen mobile, modal desktop (recomendado)\n\t * - sm: 400px max\n\t * - md: 500px max\n\t * - lg: 640px max (default)\n\t * - xl: 800px max\n\t * - desktop/mobile/mobile-fullscreen: legacy, deprecado\n\t */\n\t@Input() size: PdmDialogSize = \"responsive\";\n\n\t@Input() title = \"\";\n\t@Input() description = \"\";\n\t@Input() closeOnBackdrop = true;\n\t@Input() closeOnEsc = true;\n\t@Input() showCloseButton = true;\n\t@Input() showHeader = true;\n\t@Input() showFooter = true;\n\t@Input() primaryActionText = \"Save changes\";\n\t@Input() secondaryActionText = \"Cancel\";\n\t@Input() alignFooter: PdmDialogFooterAlign = \"right\";\n\t@Input() headerClassName = \"\";\n\t@Input() bodyClassName = \"\";\n\t@Input() footerClassName = \"\";\n\t@Input() className = \"\";\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t@Output() primaryAction = new EventEmitter<void>();\n\t@Output() secondaryAction = new EventEmitter<void>();\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEsc(): void {\n\t\tif (this.open && this.closeOnEsc) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\tclose(): void {\n\t\tthis.openChange.emit(false);\n\t}\n\n\tonPrimaryAction(): void {\n\t\tthis.primaryAction.emit();\n\t}\n\n\tonSecondaryAction(): void {\n\t\tthis.secondaryAction.emit();\n\t}\n\n\tonBackdropClick(): void {\n\t\tif (this.closeOnBackdrop) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\tget panelClassName(): string {\n\t\t// Legacy sizes (backward compatibility)\n\t\tif (this.size === \"desktop\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[640px]\",\n\t\t\t\t\"max-h-[calc(100vh-2rem)]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"min-h-[240px]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile-fullscreen\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"h-[min(100dvh,640px)]\",\n\t\t\t\t\"rounded-none\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\t// New responsive mode (recomendado)\n\t\tif (this.size === \"responsive\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t// Mobile: fullscreen con bordes redondeados solo arriba\n\t\t\t\t\"w-full\",\n\t\t\t\t\"h-full\",\n\t\t\t\t\"max-h-[100dvh]\",\n\t\t\t\t\"rounded-t-[10px]\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\t// Desktop: modal centrado\n\t\t\t\t\"sm:w-auto\",\n\t\t\t\t\"sm:h-auto\",\n\t\t\t\t\"sm:max-w-[640px]\",\n\t\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t\t]);\n\t\t}\n\n\t\t// New size options\n\t\tconst sizeMap = {\n\t\t\tsm: \"sm:max-w-[400px]\",\n\t\t\tmd: \"sm:max-w-[500px]\",\n\t\t\tlg: \"sm:max-w-[640px]\",\n\t\t\txl: \"sm:max-w-[800px]\",\n\t\t};\n\n\t\tconst maxWidth = sizeMap[this.size as keyof typeof sizeMap] || sizeMap.lg;\n\n\t\treturn this.buildPanelClasses([\n\t\t\t// Mobile: fullscreen\n\t\t\t\"w-full\",\n\t\t\t\"h-full\",\n\t\t\t\"max-h-[100dvh]\",\n\t\t\t\"rounded-t-[10px]\",\n\t\t\t// Desktop: modal\n\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\"sm:w-auto\",\n\t\t\t\"sm:h-auto\",\n\t\t\tmaxWidth,\n\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t]);\n\t}\n\n\tprivate buildPanelClasses(sizeClasses: string[]): string {\n\t\tconst base = [\n\t\t\t\"relative\",\n\t\t\tZ_INDEX.modal, // z-50 - debe estar sobre backdrop (z-40)\n\t\t\t\"flex\",\n\t\t\t\"flex-col\",\n\t\t\t\"border border-solid\",\n\t\t\t\"border-border\",\n\t\t\t\"bg-background\",\n\t\t\t\"text-foreground\",\n\t\t\t\"shadow-lg\",\n\t\t\t\"overflow-hidden\",\n\t\t\t...sizeClasses,\n\t\t\tthis.className,\n\t\t];\n\n\t\treturn base.filter(Boolean).join(\" \");\n\t}\n\n\tget bodyWrapperClassName(): string {\n\t\t// min-h-0 is CRITICAL for flex child to shrink and allow internal scroll\n\t\tconst base = [\n\t\t\t\"flex-1\",\n\t\t\t\"min-h-0\",\n\t\t\t\"overflow-y-auto\",\n\t\t\t\"px-4\",\n\t\t\t\"py-6\",\n\t\t\t\"sm:px-6\",\n\t\t\tthis.bodyClassName,\n\t\t];\n\n\t\treturn base.filter(Boolean).join(\" \");\n\t}\n\n\tget headerWrapperClassName(): string {\n\t\tconst base = [\n\t\t\t\"flex\",\n\t\t\t\"items-start\",\n\t\t\t\"justify-between\",\n\t\t\t\"gap-3\",\n\t\t\t\"p-4\",\n\t\t\t\"sm:p-6\",\n\t\t\t\"border-b\",\n\t\t\t\"border-border\",\n\t\t\tthis.headerClassName,\n\t\t];\n\n\t\treturn base.filter(Boolean).join(\" \");\n\t}\n\n\tget footerWrapperClassName(): string {\n\t\tconst effectiveAlign =\n\t\t\tthis.alignFooter === \"right\" && this.variant === \"custom-close\"\n\t\t\t\t? \"left\"\n\t\t\t\t: this.alignFooter;\n\n\t\tconst base = [\n\t\t\t\"p-4\",\n\t\t\t\"sm:p-6\",\n\t\t\t\"border-t\",\n\t\t\t\"border-border\",\n\t\t\t// Mobile: siempre full-width\n\t\t\t\"flex\",\n\t\t\t\"flex-col\",\n\t\t\t\"gap-2\",\n\t\t\t// Desktop: según alignFooter\n\t\t\teffectiveAlign === \"full-width\"\n\t\t\t\t? \"sm:flex-col\"\n\t\t\t\t: \"sm:flex-row sm:items-center\",\n\t\t\teffectiveAlign === \"left\" ? \"sm:justify-start\" : \"\",\n\t\t\teffectiveAlign === \"right\" ? \"sm:justify-end\" : \"\",\n\t\t\tthis.footerClassName,\n\t\t];\n\n\t\treturn base.filter(Boolean).join(\" \");\n\t}\n\n\tget containerClassName(): string {\n\t\t// Container con backdrop z-40\n\t\t// Mobile: fullscreen desde el bottom\n\t\t// Desktop: centrado\n\t\treturn responsive({\n\t\t\tdefault: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,\n\t\t\tsm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,\n\t\t});\n\t}\n}\n","<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n  \n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <div class=\"min-w-0 flex-1\">\n        <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n        <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n      </div>\n      <button\n        *ngIf=\"showCloseButton\"\n        type=\"button\"\n        class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n        (click)=\"close()\"\n        aria-label=\"Close dialog\"\n      >\n        <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n      </ng-container>\n\n      <ng-template #defaultActions>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n          (click)=\"onSecondaryAction()\"\n        >\n          {{ secondaryActionText }}\n        </button>\n        <button\n          type=\"button\"\n          class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n          (click)=\"onPrimaryAction()\"\n        >\n          {{ primaryActionText }}\n        </button>\n      </ng-template>\n    </div>\n  </section>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { PdmDialogComponent } from './dialog.component';\n\nconst COMPONENTS = [\n  PdmDialogComponent,\n];\n\n@NgModule({\n  imports: [CommonModule, A11yModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmDialogModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"pdm-ui-kit-src-dialog.mjs","sources":["../../../src/dialog/dialog.component.ts","../../../src/dialog/dialog.component.html","../../../src/dialog/dialog.module.ts","../../../src/dialog/pdm-ui-kit-src-dialog.ts"],"sourcesContent":["import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tContentChild,\n\tDirective,\n\tEventEmitter,\n\tHostListener,\n\tInput,\n\tOutput,\n} from \"@angular/core\";\nimport { cn, responsive, Z_INDEX } from \"pdm-ui-kit/src/utils\";\n\nexport type PdmDialogVariant = \"default\" | \"custom-close\";\n\n/**\n * @deprecated Use 'responsive' mode instead. Will be removed in v0.3.0\n */\nexport type PdmDialogSize =\n\t| \"desktop\"\n\t| \"mobile\"\n\t| \"mobile-fullscreen\"\n\t| \"sm\"\n\t| \"md\"\n\t| \"lg\"\n\t| \"xl\"\n\t| \"responsive\";\n\nexport type PdmDialogFooterAlign = \"right\" | \"full-width\" | \"left\";\n\n@Directive({ selector: \"[pdmHeader]\" })\nexport class PdmDialogHeaderDirective {}\n\n@Directive({ selector: \"[pdmFooter]\" })\nexport class PdmDialogFooterDirective {}\n\n/**\n * Responsive modal/dialog component.\n */\n@Component({\n\tselector: \"pdm-dialog\",\n\ttemplateUrl: \"./dialog.component.html\",\n\tstyles: [\n\t\t`\n        :host {\n          display: block;\n        }\n      `,\n\t],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PdmDialogComponent {\n\t@Input() open = false;\n\t@Input() variant: PdmDialogVariant = \"default\";\n\n\t/**\n\t * Dialog size. Responsive mode is fullscreen on mobile and a modal on desktop.\n\t */\n\t@Input() size: PdmDialogSize = \"responsive\";\n\n\t/**\n\t * Custom desktop maximum width, such as `800px` or `min(90vw, 800px)`.\n\t * Overrides `size` at the `sm` breakpoint; responsive mobile mode remains fullscreen.\n\t */\n\t@Input() maxWidth = \"\";\n\n\t@Input() title = \"\";\n\t@Input() description = \"\";\n\t@Input() closeOnBackdrop = true;\n\t@Input() closeOnEsc = true;\n\t@Input() showCloseButton = true;\n\t@Input() showHeader = true;\n\t@Input() showFooter = true;\n\t@Input() primaryActionText = \"Save changes\";\n\t@Input() secondaryActionText = \"Cancel\";\n\t@Input() alignFooter: PdmDialogFooterAlign = \"right\";\n\t@Input() headerClassName = \"\";\n\t@Input() bodyClassName = \"\";\n\t@Input() footerClassName = \"\";\n\t@Input() className = \"\";\n\n\t@ContentChild(PdmDialogHeaderDirective) customHeader?: PdmDialogHeaderDirective;\n\t@ContentChild(PdmDialogFooterDirective) customFooter?: PdmDialogFooterDirective;\n\n\t@Output() openChange = new EventEmitter<boolean>();\n\t@Output() primaryAction = new EventEmitter<void>();\n\t@Output() secondaryAction = new EventEmitter<void>();\n\n\t@HostListener(\"document:keydown.escape\")\n\tonEsc(): void {\n\t\tif (this.open && this.closeOnEsc) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\tclose(): void {\n\t\tthis.openChange.emit(false);\n\t}\n\n\tonPrimaryAction(): void {\n\t\tthis.primaryAction.emit();\n\t}\n\n\tonSecondaryAction(): void {\n\t\tthis.secondaryAction.emit();\n\t}\n\n\tonBackdropClick(): void {\n\t\tif (this.closeOnBackdrop) {\n\t\t\tthis.close();\n\t\t}\n\t}\n\n\tget panelClassName(): string {\n\t\tif (this.size === \"desktop\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[640px]\",\n\t\t\t\t\"max-h-[calc(100vh-2rem)]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"min-h-[240px]\",\n\t\t\t\t\"rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"mobile-fullscreen\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"max-w-[320px]\",\n\t\t\t\t\"h-[min(100dvh,640px)]\",\n\t\t\t\t\"rounded-none\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t]);\n\t\t}\n\n\t\tif (this.size === \"responsive\") {\n\t\t\treturn this.buildPanelClasses([\n\t\t\t\t\"w-full\",\n\t\t\t\t\"h-full\",\n\t\t\t\t\"max-h-[100dvh]\",\n\t\t\t\t\"rounded-t-[10px]\",\n\t\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\t\"sm:w-auto\",\n\t\t\t\t\"sm:h-auto\",\n\t\t\t\t\"sm:max-w-[640px]\",\n\t\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t\t]);\n\t\t}\n\n\t\tconst sizeMap = {\n\t\t\tsm: \"sm:max-w-[400px]\",\n\t\t\tmd: \"sm:max-w-[500px]\",\n\t\t\tlg: \"sm:max-w-[640px]\",\n\t\t\txl: \"sm:max-w-[800px]\",\n\t\t};\n\t\tconst maxWidth = sizeMap[this.size as keyof typeof sizeMap] || sizeMap.lg;\n\n\t\treturn this.buildPanelClasses([\n\t\t\t\"w-full\",\n\t\t\t\"h-full\",\n\t\t\t\"max-h-[100dvh]\",\n\t\t\t\"rounded-t-[10px]\",\n\t\t\t\"sm:rounded-[10px]\",\n\t\t\t\"sm:w-auto\",\n\t\t\t\"sm:h-auto\",\n\t\t\tmaxWidth,\n\t\t\t\"sm:max-h-[calc(100vh-4rem)]\",\n\t\t]);\n\t}\n\n\tprivate buildPanelClasses(sizeClasses: string[]): string {\n\t\tconst base = [\n\t\t\t\"relative\",\n\t\t\tZ_INDEX.modal,\n\t\t\t\"flex\",\n\t\t\t\"flex-col\",\n\t\t\t\"border border-solid\",\n\t\t\t\"border-border\",\n\t\t\t\"bg-background\",\n\t\t\t\"text-foreground\",\n\t\t\t\"shadow-lg\",\n\t\t\t\"overflow-hidden\",\n\t\t];\n\t\tconst maxWidthClass = this.maxWidth ? `sm:max-w-[${this.maxWidth}]` : \"\";\n\n\t\treturn cn(...base, ...sizeClasses, maxWidthClass, this.className);\n\t}\n\n\tget bodyWrapperClassName(): string {\n\t\treturn cn(\n\t\t\t\"flex-1 min-h-0 overflow-y-auto px-4 py-6 sm:px-6\",\n\t\t\tthis.bodyClassName,\n\t\t);\n\t}\n\n\tget headerWrapperClassName(): string {\n\t\treturn cn(\n\t\t\t\"flex items-start justify-between gap-3 p-4 sm:p-6 border-b border-border\",\n\t\t\tthis.headerClassName,\n\t\t);\n\t}\n\n\tget footerWrapperClassName(): string {\n\t\tconst effectiveAlign =\n\t\t\tthis.alignFooter === \"right\" && this.variant === \"custom-close\"\n\t\t\t\t? \"left\"\n\t\t\t\t: this.alignFooter;\n\n\t\treturn cn(\n\t\t\t\"p-4 sm:p-6 border-t border-border flex flex-col gap-2\",\n\t\t\teffectiveAlign === \"full-width\"\n\t\t\t\t? \"sm:flex-col\"\n\t\t\t\t: \"sm:flex-row sm:items-center\",\n\t\t\teffectiveAlign === \"left\" ? \"sm:justify-start\" : \"\",\n\t\t\teffectiveAlign === \"right\" ? \"sm:justify-end\" : \"\",\n\t\t\tthis.footerClassName,\n\t\t);\n\t}\n\n\tget containerClassName(): string {\n\t\treturn responsive({\n\t\t\tdefault: `fixed inset-x-0 bottom-0 ${Z_INDEX.modalBackdrop} flex items-end justify-center`,\n\t\t\tsm: `fixed inset-0 ${Z_INDEX.modalBackdrop} flex items-center justify-center p-4`,\n\t\t});\n\t}\n}\n","<div *ngIf=\"open\" [ngClass]=\"containerClassName\">\n  <!-- Backdrop -->\n  <div class=\"absolute inset-0 bg-foreground/30 backdrop-blur-sm\" (click)=\"onBackdropClick()\"></div>\n\n  <!-- Dialog Panel -->\n  <section role=\"dialog\" aria-modal=\"true\" cdkTrapFocus [ngClass]=\"panelClassName\">\n    <!-- Header -->\n    <div *ngIf=\"showHeader\" [ngClass]=\"headerWrapperClassName\">\n      <ng-container *ngIf=\"customHeader; else defaultHeader\">\n        <ng-content select=\"[pdmHeader]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultHeader>\n        <div class=\"min-w-0 flex-1\">\n          <h2 class=\"m-0 text-lg font-semibold leading-none tracking-tight text-foreground\">{{ title }}</h2>\n          <p *ngIf=\"description\" class=\"m-0 mt-2 text-sm text-muted-foreground\">{{ description }}</p>\n        </div>\n        <button\n          *ngIf=\"showCloseButton\"\n          type=\"button\"\n          class=\"inline-flex h-6 w-6 flex-shrink-0 appearance-none box-border items-center justify-center rounded-sm border-0 bg-transparent p-0 text-foreground opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none\"\n          (click)=\"close()\"\n          aria-label=\"Close dialog\"\n        >\n          <svg viewBox=\"0 0 24 24\" class=\"h-4 w-4\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n            <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"></path>\n          </svg>\n        </button>\n      </ng-template>\n    </div>\n\n    <!-- Body -->\n    <div [ngClass]=\"bodyWrapperClassName\">\n      <ng-content></ng-content>\n    </div>\n\n    <!-- Footer -->\n    <div *ngIf=\"showFooter\" [ngClass]=\"footerWrapperClassName\">\n      <ng-container *ngIf=\"customFooter; else defaultFooter\">\n        <ng-content select=\"[pdmFooter]\"></ng-content>\n      </ng-container>\n      <ng-template #defaultFooter>\n        <ng-container *ngIf=\"variant === 'custom-close'; else defaultActions\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n        </ng-container>\n\n        <ng-template #defaultActions>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md border border-solid border-input bg-background px-4 py-2 text-sm font-medium text-foreground shadow-sm sm:w-auto\"\n            (click)=\"onSecondaryAction()\"\n          >\n            {{ secondaryActionText }}\n          </button>\n          <button\n            type=\"button\"\n            class=\"inline-flex h-9 w-full appearance-none box-border items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm sm:w-auto\"\n            (click)=\"onPrimaryAction()\"\n          >\n            {{ primaryActionText }}\n          </button>\n        </ng-template>\n      </ng-template>\n    </div>\n  </section>\n</div>\n","import { CommonModule } from '@angular/common';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { NgModule } from '@angular/core';\nimport {\n  PdmDialogComponent,\n  PdmDialogFooterDirective,\n  PdmDialogHeaderDirective,\n} from './dialog.component';\n\nconst COMPONENTS = [\n  PdmDialogComponent,\n  PdmDialogHeaderDirective,\n  PdmDialogFooterDirective,\n];\n\n@NgModule({\n  imports: [CommonModule, A11yModule],\n  declarations: COMPONENTS,\n  exports: COMPONENTS\n})\nexport class PdmDialogModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2015/pdm-ui-kit-src-input.mjs

@@ -17,6 +17,8 @@ class PdmInputComponent {
         this.invalid = false;
         this.size = "regular";
         this.roundness = "default";
+        this.icon = "";
+        this.iconPosition = "left";
         this.className = "";
         this.inputClassName = "";
         this.label = "";
@@ -45,10 +47,10 @@ class PdmInputComponent {
     }
 }
 PdmInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-describedby]=\"descriptionAttrId\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmInputComponent, selector: "pdm-input", inputs: { id: "id", type: "type", value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", required: "required", invalid: "invalid", size: "size", roundness: "roundness", icon: "icon", iconPosition: "iconPosition", className: "className", inputClassName: "inputClassName", label: "label", helperText: "helperText", errorText: "errorText" }, outputs: { valueChange: "valueChange", blurred: "blurred" }, ngImport: i0, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <div [ngClass]=\"icon ? 'relative' : ''\">\n    <pdm-icon\n      *ngIf=\"icon\"\n      [name]=\"icon\"\n      [size]=\"16\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[\n        'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n        iconPosition === 'right' ? 'right-3' : 'left-3',\n      ]\"\n    ></pdm-icon>\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-describedby]=\"descriptionAttrId\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        size === 'large' ? 'h-10 px-4 text-sm' : '',\n        size === 'regular' ? 'h-9 px-3 text-sm' : '',\n        size === 'small' ? 'h-8 px-2 text-sm' : '',\n        size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n        icon && iconPosition === 'left' ? 'pl-9' : '',\n        icon && iconPosition === 'right' ? 'pr-9' : '',\n        roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n        type === 'file' ? 'text-sm' : 'text-foreground',\n        inputClassName,\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  </div>\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.PdmIconComponent, selector: "pdm-icon", inputs: ["name", "library", "assetUrl", "size", "strokeWidth", "className", "ariaLabel", "decorative"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <input\n    [id]=\"id\"\n    [type]=\"type\"\n    [value]=\"value\"\n    [placeholder]=\"placeholder\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [required]=\"required\"\n    [attr.aria-invalid]=\"invalid\"\n    [attr.aria-describedby]=\"descriptionAttrId\"\n    [ngClass]=\"[\n      'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n      size === 'large' ? 'h-10 px-4 text-sm' : '',\n      size === 'regular' ? 'h-9 px-3 text-sm' : '',\n      size === 'small' ? 'h-8 px-2 text-sm' : '',\n      size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n      roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n      type === 'file' ? 'text-sm' : 'text-foreground',\n      inputClassName,\n    ]\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur($event)\"\n  />\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
+            args: [{ selector: "pdm-input", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['grid w-full gap-3', className]\">\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [ngClass]=\"[\n      'text-sm font-medium leading-none',\n      invalid ? 'text-destructive' : 'text-foreground',\n    ]\"\n    >{{ label }}</label\n  >\n  <div [ngClass]=\"icon ? 'relative' : ''\">\n    <pdm-icon\n      *ngIf=\"icon\"\n      [name]=\"icon\"\n      [size]=\"16\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[\n        'pointer-events-none absolute top-1/2 -translate-y-1/2 text-muted-foreground',\n        iconPosition === 'right' ? 'right-3' : 'left-3',\n      ]\"\n    ></pdm-icon>\n    <input\n      [id]=\"id\"\n      [type]=\"type\"\n      [value]=\"value\"\n      [placeholder]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      [required]=\"required\"\n      [attr.aria-invalid]=\"invalid\"\n      [attr.aria-describedby]=\"descriptionAttrId\"\n      [ngClass]=\"[\n        'border-input focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50 aria-invalid:ring-2 aria-invalid:ring-destructive aria-invalid:border-destructive aria-invalid:placeholder:text-destructive/70 placeholder:text-muted-foreground w-full min-w-0 appearance-none box-border rounded-lg border border-solid bg-transparent px-3 py-1 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        size === 'large' ? 'h-10 px-4 text-sm' : '',\n        size === 'regular' ? 'h-9 px-3 text-sm' : '',\n        size === 'small' ? 'h-8 px-2 text-sm' : '',\n        size === 'mini' ? 'h-6 px-1.5 text-xs' : '',\n        icon && iconPosition === 'left' ? 'pl-9' : '',\n        icon && iconPosition === 'right' ? 'pr-9' : '',\n        roundness === 'round' ? 'rounded-full' : 'rounded-lg',\n        type === 'file' ? 'text-sm' : 'text-foreground',\n        inputClassName,\n      ]\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur($event)\"\n    />\n  </div>\n  <p *ngIf=\"!invalid && helperText\" [id]=\"helperAttrId\" class=\"m-0 text-sm text-muted-foreground\">\n    {{ helperText }}\n  </p>\n  <p *ngIf=\"invalid && errorText\" [id]=\"errorAttrId\" class=\"m-0 text-sm text-destructive\">\n    {{ errorText }}\n  </p>\n</div>\n", styles: [":host{display:block}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { id: [{
                 type: Input
             }], type: [{
@@ -69,6 +71,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], roundness: [{
                 type: Input
+            }], icon: [{
+                type: Input
+            }], iconPosition: [{
+                type: Input
             }], className: [{
                 type: Input
             }], inputClassName: [{