pdm-ui-kit 1.0.0 → 1.1.0

package/src/data-table/data-table.component.d.ts

@@ -0,0 +1,200 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { TableResponsiveStrategy } from 'pdm-ui-kit/src/utils';
+import * as i0 from "@angular/core";
+/**
+ * DEPRECATED: Esta interfaz es para backward compatibility
+ * Usar PdmDataTableColumn<T> con tipo genérico en su lugar
+ */
+export interface PdmDataTableRow {
+    id: string;
+    status: string;
+    email: string;
+    amount: string;
+    selected?: boolean;
+}
+/**
+ * Definición de columna para data-table genérico
+ */
+export interface PdmDataTableColumn<T = any> {
+    /**
+     * Key del campo en el objeto de datos
+     * Usado para acceder al valor: row[key]
+     */
+    key: keyof T;
+    /**
+     * Label a mostrar en el header
+     */
+    label: string;
+    /**
+     * Ancho de la columna (CSS width)
+     * Ej: '100px', '20%', 'auto'
+     */
+    width?: string;
+    /**
+     * Si la columna es sortable
+     */
+    sortable?: boolean;
+    /**
+     * Alineación del contenido
+     */
+    align?: 'left' | 'center' | 'right';
+    /**
+     * Función custom para renderizar el valor
+     * Si no se provee, se usa toString() del valor
+     */
+    render?: (value: any, row: T) => string;
+    /**
+     * Template personalizado para la celda
+     * Tiene prioridad sobre render()
+     */
+    cellTemplate?: TemplateRef<{
+        $implicit: T;
+        value: any;
+    }>;
+    /**
+     * Si es true, la columna se oculta en mobile
+     * Solo se muestra en breakpoint md+ (768px)
+     */
+    hideOnMobile?: boolean;
+    /**
+     * CSS classes adicionales para las celdas de esta columna
+     */
+    cellClass?: string;
+    /**
+     * CSS classes adicionales para el header de esta columna
+     */
+    headerClass?: string;
+}
+/**
+ * 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>
+ */
+export declare class PdmDataTableComponent<T = any> {
+    className: string;
+    /**
+     * Columnas a mostrar
+     * Si no se provee, intenta inferir del primer row (legacy mode)
+     */
+    columns: PdmDataTableColumn<T>[];
+    /**
+     * Estrategia responsive de la tabla
+     */
+    responsiveStrategy: TableResponsiveStrategy;
+    /**
+     * Si es true, muestra checkbox de selección en cada fila
+     */
+    selectable: boolean;
+    /**
+     * Si es true, muestra botón de acciones (tres puntos) en cada fila
+     */
+    showActions: boolean;
+    /**
+     * Si es true, muestra filtro de búsqueda
+     */
+    showFilter: boolean;
+    /**
+     * Si es true, muestra controles de paginación
+     */
+    showPagination: boolean;
+    /**
+     * Si es true, muestra selector de columnas
+     */
+    showColumnSelector: boolean;
+    filterPlaceholder: string;
+    columnsLabel: string;
+    previousLabel: string;
+    nextLabel: string;
+    emptyLabel: string;
+    rowsSelectedLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    statusLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    emailLabel: string;
+    /**
+     * @deprecated Use columns configuration instead
+     */
+    amountLabel: string;
+    /**
+     * Datos a mostrar
+     */
+    rows: T[];
+    /**
+     * Página actual (1-indexed)
+     */
+    page: number;
+    /**
+     * Cantidad de filas por página
+     */
+    pageSize: number;
+    /**
+     * Query de filtrado
+     */
+    query: string;
+    /**
+     * Función custom de filtrado
+     * Si no se provee, busca en todos los campos string
+     */
+    filterFn?: (row: T, query: string) => boolean;
+    queryChange: EventEmitter<string>;
+    rowAction: EventEmitter<T>;
+    pageChange: EventEmitter<number>;
+    selectionChange: EventEmitter<{
+        row: T;
+        selected: boolean;
+    }>;
+    columnSort: EventEmitter<{
+        column: PdmDataTableColumn<T>;
+        direction: 'asc' | 'desc';
+    }>;
+    selectedRows: Set<T>;
+    sortColumn?: PdmDataTableColumn<T>;
+    sortDirection: 'asc' | 'desc';
+    /**
+     * Backward compatibility: si no hay columnas definidas, inferir del primer row
+     */
+    get effectiveColumns(): PdmDataTableColumn<T>[];
+    /**
+     * LEGACY: mapeo de keys a labels hardcodeados
+     */
+    private getLegacyLabel;
+    get filteredRows(): T[];
+    get pagedRows(): T[];
+    get totalPages(): number;
+    get selectedCount(): number;
+    onQueryInput(event: Event): void;
+    onToggleRow(row: T, event: Event): void;
+    onToggleAll(event: Event): void;
+    isSelected(row: T): boolean;
+    previous(): void;
+    next(): void;
+    onAction(row: T): void;
+    onSort(column: PdmDataTableColumn<T>): void;
+    getCellValue(row: T, column: PdmDataTableColumn<T>): any;
+    getCellClass(column: PdmDataTableColumn<T>): string;
+    getHeaderClass(column: PdmDataTableColumn<T>): string;
+    getColumnStyle(column: PdmDataTableColumn<T>): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDataTableComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDataTableComponent<any>, "pdm-data-table", never, { "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"; }, { "queryChange": "queryChange"; "rowAction": "rowAction"; "pageChange": "pageChange"; "selectionChange": "selectionChange"; "columnSort": "columnSort"; }, never, never, false>;
+}

package/src/data-table/data-table.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./data-table.component";
+import * as i2 from "./draggable-table.component";
+import * as i3 from "./table.component";
+import * as i4 from "@angular/common";
+export declare class PdmDataTableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDataTableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmDataTableModule, [typeof i1.PdmDataTableComponent, typeof i2.PdmDraggableTableComponent, typeof i3.PdmTableComponent], [typeof i4.CommonModule], [typeof i1.PdmDataTableComponent, typeof i2.PdmDraggableTableComponent, typeof i3.PdmTableComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PdmDataTableModule>;
+}

package/src/data-table/draggable-table.component.d.ts

@@ -0,0 +1,74 @@
+import { AfterViewInit, ElementRef, EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { PdmTableVariant } from './table.component';
+import { TableResponsiveStrategy } from 'pdm-ui-kit/src/utils';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ */
+export declare class PdmDraggableTableComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private readonly renderer;
+    variant: PdmTableVariant;
+    responsiveStrategy: TableResponsiveStrategy;
+    className: string;
+    fullBleed: boolean;
+    /**
+     * Habilita el reordenamiento de filas mediante drag & drop
+     */
+    reorderRows: boolean;
+    /**
+     * 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
+     */
+    dragHandleSelector: string;
+    /**
+     * Emite el nuevo orden de las filas cuando el usuario termina de arrastrar
+     * Array de data-row-id en el nuevo orden
+     */
+    rowOrderChange: EventEmitter<string[]>;
+    tableElement?: ElementRef<HTMLTableElement>;
+    private cleanupListeners;
+    private observer?;
+    private draggedRow;
+    constructor(renderer: Renderer2);
+    ngAfterViewInit(): void;
+    get wrapperClasses(): string[];
+    get tableClasses(): string[];
+    private getResponsiveStrategyClasses;
+    private getVariantWrapperClasses;
+    private getVariantTableClasses;
+    private getCellClasses;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    private syncReorderBehavior;
+    private cleanupReorderBehavior;
+    private getTbody;
+    private setRowsDraggable;
+    /**
+     * Inserta un handle de drag automático si no existe uno custom
+     */
+    private syncAutoDragHandle;
+    private onDragStart;
+    private onDragOver;
+    private onDrop;
+    private onDragEnd;
+    private armDragFromHandle;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDraggableTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDraggableTableComponent, "pdm-draggable-table", never, { "variant": "variant"; "responsiveStrategy": "responsiveStrategy"; "className": "className"; "fullBleed": "fullBleed"; "reorderRows": "reorderRows"; "dragHandleSelector": "dragHandleSelector"; }, { "rowOrderChange": "rowOrderChange"; }, never, ["*"], false>;
+}

package/src/data-table/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pdm-ui-kit/src/data-table" />
+export * from './public-api';

package/src/data-table/public-api.d.ts

@@ -0,0 +1,4 @@
+export * from "./data-table.component";
+export * from "./draggable-table.component";
+export * from "./table.component";
+export * from "./data-table.module";

package/src/data-table/table.component.d.ts

@@ -0,0 +1,55 @@
+import { type TableResponsiveStrategy } from "pdm-ui-kit/src/utils";
+import * as i0 from "@angular/core";
+export declare type PdmTableVariant = "default" | "data" | "interactive";
+/**
+ * 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>
+ */
+export declare class PdmTableComponent {
+    /**
+     * 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
+     */
+    variant: PdmTableVariant;
+    /**
+     * 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
+     */
+    responsiveStrategy: TableResponsiveStrategy;
+    /**
+     * Clases CSS adicionales para el wrapper
+     */
+    className: string;
+    /**
+     * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
+     * Útil cuando la tabla está dentro de un container con padding
+     */
+    fullBleed: boolean;
+    get wrapperClasses(): string[];
+    get tableClasses(): string[];
+    private getResponsiveStrategyClasses;
+    private getVariantWrapperClasses;
+    private getVariantTableClasses;
+    private getCellClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmTableComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmTableComponent, "pdm-table", never, { "variant": "variant"; "responsiveStrategy": "responsiveStrategy"; "className": "className"; "fullBleed": "fullBleed"; }, {}, never, ["*"], false>;
+}

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

@@ -0,0 +1,72 @@
+import { EventEmitter } from "@angular/core";
+import * as i0 from "@angular/core";
+export declare type PdmDialogVariant = "default" | "custom-close";
+/**
+ * @deprecated Use 'responsive' mode instead. Will be removed in v0.3.0
+ */
+export declare type PdmDialogSize = "desktop" | "mobile" | "mobile-fullscreen" | "sm" | "md" | "lg" | "xl" | "responsive";
+export declare type PdmDialogFooterAlign = "right" | "full-width" | "left";
+/**
+ * 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>
+ */
+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
+     */
+    size: PdmDialogSize;
+    title: string;
+    description: string;
+    closeOnBackdrop: boolean;
+    closeOnEsc: boolean;
+    showCloseButton: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    primaryActionText: string;
+    secondaryActionText: string;
+    alignFooter: PdmDialogFooterAlign;
+    headerClassName: string;
+    bodyClassName: string;
+    footerClassName: string;
+    className: string;
+    openChange: EventEmitter<boolean>;
+    primaryAction: EventEmitter<void>;
+    secondaryAction: EventEmitter<void>;
+    onEsc(): void;
+    close(): void;
+    onPrimaryAction(): void;
+    onSecondaryAction(): void;
+    onBackdropClick(): void;
+    get panelClassName(): string;
+    private buildPanelClasses;
+    get bodyWrapperClassName(): string;
+    get headerWrapperClassName(): string;
+    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>;
+}

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

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./dialog.component";
+import * as i2 from "@angular/common";
+export declare class PdmDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmDialogModule, [typeof i1.PdmDialogComponent], [typeof i2.CommonModule], [typeof i1.PdmDialogComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PdmDialogModule>;
+}

package/src/dialog/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pdm-ui-kit/src/dialog" />
+export * from './public-api';

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

@@ -0,0 +1,2 @@
+export * from './dialog.component';
+export * from './dialog.module';

package/src/drawer/drawer.component.d.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare type PdmDrawerPosition = 'bottom' | 'left' | 'right' | 'top';
+export declare type PdmDrawerSize = 'sm' | 'md' | 'lg' | 'full';
+/**
+ * @deprecated Use specific drawer types. Will be removed in v0.3.0
+ */
+export declare type PdmDrawerVariant = 'drawer' | 'responsive-dialog';
+/**
+ * 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>
+ */
+export declare class PdmDrawerComponent {
+    open: boolean;
+    /**
+     * 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)
+     */
+    position: PdmDrawerPosition;
+    /**
+     * 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
+     */
+    size: PdmDrawerSize;
+    /**
+     * @deprecated Use position="bottom" instead
+     */
+    variant: PdmDrawerVariant;
+    className: string;
+    title: string;
+    description: string;
+    /**
+     * Mostrar handle visual (línea para arrastrar)
+     * Solo tiene sentido en position="bottom"
+     */
+    showHandle: boolean;
+    /**
+     * Mostrar botón de cerrar
+     */
+    showCloseButton: boolean;
+    closeOnEsc: boolean;
+    closeOnBackdropClick: boolean;
+    openChange: EventEmitter<boolean>;
+    value: number | string;
+    unit: string;
+    decrementLabel: string;
+    incrementLabel: string;
+    primaryLabel: string;
+    secondaryLabel: string;
+    profileTitle: string;
+    profileDescription: string;
+    nameLabel: string;
+    nameValue: string;
+    usernameLabel: string;
+    usernameValue: string;
+    responsivePrimaryLabel: string;
+    bars: number[];
+    primaryAction: EventEmitter<void>;
+    secondaryAction: EventEmitter<void>;
+    onEsc(): void;
+    onBackdropClick(): void;
+    close(): void;
+    onPrimaryAction(): void;
+    onSecondaryAction(): void;
+    get containerClassName(): string;
+    get panelClassName(): string;
+    private getPositionClasses;
+    private getSizeClasses;
+    get showLegacyContent(): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDrawerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmDrawerComponent, "pdm-drawer", never, { "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"; }, { "openChange": "openChange"; "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, ["*"], false>;
+}

package/src/drawer/drawer.module.d.ts

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./drawer.component";
+import * as i2 from "./sheet.component";
+import * as i3 from "@angular/common";
+import * as i4 from "pdm-ui-kit/src/icon";
+export declare class PdmDrawerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmDrawerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PdmDrawerModule, [typeof i1.PdmDrawerComponent, typeof i2.PdmSheetComponent], [typeof i3.CommonModule, typeof i4.PdmIconModule], [typeof i1.PdmDrawerComponent, typeof i2.PdmSheetComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PdmDrawerModule>;
+}

package/src/drawer/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="pdm-ui-kit/src/drawer" />
+export * from './public-api';

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

@@ -0,0 +1,3 @@
+export * from "./drawer.component";
+export * from "./sheet.component";
+export * from "./drawer.module";

package/src/drawer/sheet.component.d.ts

@@ -0,0 +1,46 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare type PdmSheetSide = 'top' | 'right' | 'bottom' | 'left';
+export declare type PdmSheetSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * 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>
+ */
+export declare class PdmSheetComponent {
+    open: boolean;
+    /**
+     * Lado desde donde aparece el sheet
+     */
+    side: PdmSheetSide;
+    /**
+     * 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%
+     */
+    size: PdmSheetSize;
+    className: string;
+    closeOnEsc: boolean;
+    closeOnBackdropClick: boolean;
+    openChange: EventEmitter<boolean>;
+    onEsc(): void;
+    onBackdropClick(): void;
+    close(): void;
+    get panelClass(): string;
+    private getPositionClass;
+    private getSizingClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PdmSheetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PdmSheetComponent, "pdm-sheet", never, { "open": "open"; "side": "side"; "size": "size"; "className": "className"; "closeOnEsc": "closeOnEsc"; "closeOnBackdropClick": "closeOnBackdropClick"; }, { "openChange": "openChange"; }, never, ["*"], false>;
+}