pdm-ui-kit 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pdm-ui-kit",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "PDM UI Kit Angular components - Responsive by default",
   "author": "Corelusa",
   "license": "MIT",
@@ -25,7 +25,9 @@
     "lucide": ">=0.575.0"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "date-fns": "^2.30.0",
+    "tailwind-merge": "^3.6.0",
     "tslib": "^2.3.0"
   },
   "module": "fesm2015/pdm-ui-kit.mjs",

package/src/alert/alert-dialog.component.d.ts

@@ -1,5 +1,6 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter } from "@angular/core";
 import * as i0 from "@angular/core";
+declare type PdmAlertDialogSize = "desktop" | "mobile" | "mobile-fullscreen" | "sm" | "md" | "lg" | "xl" | "responsive";
 export declare class PdmAlertDialogComponent {
     open: boolean;
     showTrigger: boolean;
@@ -8,7 +9,12 @@ export declare class PdmAlertDialogComponent {
     description: string;
     confirmText: string;
     cancelText: string;
+    size: PdmAlertDialogSize;
+    maxWidth: string;
     className: string;
+    bodyClassName: string;
+    showFooter: boolean;
+    closeOnBackdrop: boolean;
     /** Close when the ESC key is pressed. Default: `true`. */
     closeOnEsc: boolean;
     openChange: EventEmitter<boolean>;
@@ -20,10 +26,16 @@ export declare class PdmAlertDialogComponent {
      * - **Uncontrolled** (no observers): we own the `open` state → mutate it locally.
      */
     private get isControlled();
+    get panelClassName(): string;
+    get containerClassName(): string;
+    get bodyWrapperClassName(): string;
     onTriggerClick(): void;
     onCancel(): void;
     onConfirm(): void;
+    onBackdropClick(): void;
     onEsc(): void;
+    private buildPanelClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmAlertDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmAlertDialogComponent, "pdm-alert-dialog", never, { "open": "open"; "showTrigger": "showTrigger"; "triggerText": "triggerText"; "title": "title"; "description": "description"; "confirmText": "confirmText"; "cancelText": "cancelText"; "className": "className"; "closeOnEsc": "closeOnEsc"; }, { "openChange": "openChange"; "confirm": "confirm"; "cancel": "cancel"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmAlertDialogComponent, "pdm-alert-dialog", never, { "open": "open"; "showTrigger": "showTrigger"; "triggerText": "triggerText"; "title": "title"; "description": "description"; "confirmText": "confirmText"; "cancelText": "cancelText"; "size": "size"; "maxWidth": "maxWidth"; "className": "className"; "bodyClassName": "bodyClassName"; "showFooter": "showFooter"; "closeOnBackdrop": "closeOnBackdrop"; "closeOnEsc": "closeOnEsc"; }, { "openChange": "openChange"; "confirm": "confirm"; "cancel": "cancel"; }, never, ["*"], false>;
 }
+export {};

package/src/alert/alert.module.d.ts

@@ -2,8 +2,9 @@ import * as i0 from "@angular/core";
 import * as i1 from "./alert.component";
 import * as i2 from "./alert-dialog.component";
 import * as i3 from "@angular/common";
+import * as i4 from "@angular/cdk/a11y";
 export declare class PdmAlertModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmAlertModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmAlertModule, [typeof i1.PdmAlertComponent, typeof i2.PdmAlertDialogComponent], [typeof i3.CommonModule], [typeof i1.PdmAlertComponent, typeof i2.PdmAlertDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmAlertModule, [typeof i1.PdmAlertComponent, typeof i2.PdmAlertDialogComponent], [typeof i3.CommonModule, typeof i4.A11yModule], [typeof i1.PdmAlertComponent, typeof i2.PdmAlertDialogComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PdmAlertModule>;
 }

package/src/dialog/dialog.component.d.ts

@@ -6,39 +6,29 @@ export declare type PdmDialogVariant = "default" | "custom-close";
  */
 export declare type PdmDialogSize = "desktop" | "mobile" | "mobile-fullscreen" | "sm" | "md" | "lg" | "xl" | "responsive";
 export declare type PdmDialogFooterAlign = "right" | "full-width" | "left";
+export declare class PdmDialogHeaderDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogHeaderDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PdmDialogHeaderDirective, "[pdmHeader]", never, {}, {}, never, never, false>;
+}
+export declare class PdmDialogFooterDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogFooterDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PdmDialogFooterDirective, "[pdmFooter]", never, {}, {}, never, never, false>;
+}
 /**
- * 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.
  */
 export declare class PdmDialogComponent {
     open: boolean;
     variant: PdmDialogVariant;
     /**
-     * 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.
      */
     size: PdmDialogSize;
+    /**
+     * Custom desktop maximum width, such as `800px` or `min(90vw, 800px)`.
+     * Overrides `size` at the `sm` breakpoint; responsive mobile mode remains fullscreen.
+     */
+    maxWidth: string;
     title: string;
     description: string;
     closeOnBackdrop: boolean;
@@ -53,6 +43,8 @@ export declare class PdmDialogComponent {
     bodyClassName: string;
     footerClassName: string;
     className: string;
+    customHeader?: PdmDialogHeaderDirective;
+    customFooter?: PdmDialogFooterDirective;
     openChange: EventEmitter<boolean>;
     primaryAction: EventEmitter<void>;
     secondaryAction: EventEmitter<void>;
@@ -68,5 +60,5 @@ export declare class PdmDialogComponent {
     get footerWrapperClassName(): string;
     get containerClassName(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDialogComponent, "pdm-dialog", never, { "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"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDialogComponent, "pdm-dialog", never, { "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"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, ["customHeader", "customFooter"], ["[pdmHeader]", "*", "[pdmFooter]"], false>;
 }

package/src/dialog/dialog.module.d.ts

@@ -4,6 +4,6 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/cdk/a11y";
 export declare class PdmDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmDialogModule, [typeof i1.PdmDialogComponent], [typeof i2.CommonModule, typeof i3.A11yModule], [typeof i1.PdmDialogComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmDialogModule, [typeof i1.PdmDialogComponent, typeof i1.PdmDialogHeaderDirective, typeof i1.PdmDialogFooterDirective], [typeof i2.CommonModule, typeof i3.A11yModule], [typeof i1.PdmDialogComponent, typeof i1.PdmDialogHeaderDirective, typeof i1.PdmDialogFooterDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PdmDialogModule>;
 }

package/src/utils/cn.d.ts

@@ -0,0 +1,15 @@
+import { type ClassValue } from "clsx";
+/**
+ * Merge Tailwind classes intelligently.
+ *
+ * Combines `clsx` (conditional/array/object inputs) with `tailwind-merge`
+ * (deduplicates conflicting Tailwind utilities, last wins). This is the
+ * shadcn/ui `cn()` pattern. Use it wherever the library composes a
+ * user-supplied `className` override with internal base classes, so the
+ * override reliably wins regardless of generated CSS order.
+ *
+ * @example
+ * cn("max-w-[640px]", "max-w-[800px]") // => "max-w-[800px]"
+ * cn("p-4", condition && "p-6")        // => "p-6" when condition is true
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/src/utils/public-api.d.ts

@@ -1,3 +1,4 @@
 export * from "./responsive";
 export * from "./z-index";
 export * from "./validators";
+export * from "./cn";