pdm-ui-kit 0.4.2 → 1.1.0

package/fesm2015/pdm-ui-kit-src-data-table.mjs

@@ -0,0 +1,806 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ViewChild, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { TABLE_RESPONSIVE } from 'pdm-ui-kit/src/utils';
+
+/**
+ * Componente base de tabla con soporte responsive
+ *
+ * SIMPLIFICADO: Ya no incluye drag & drop (usar pdm-draggable-table para eso)
+ *
+ * @example
+ * // Tabla simple con scroll horizontal
+ * <pdm-table variant="default">
+ *   <thead><tr><th>Name</th><th>Email</th></tr></thead>
+ *   <tbody><tr><td>John</td><td>john@example.com</td></tr></tbody>
+ * </pdm-table>
+ *
+ * @example
+ * // Tabla interactiva con wrap en mobile
+ * <pdm-table variant="interactive" responsiveStrategy="wrap">
+ *   ...
+ * </pdm-table>
+ */
+class PdmTableComponent {
+    constructor() {
+        /**
+         * Variante visual de la tabla
+         * - default: tabla básica sin estilos extra
+         * - data: tabla con bordes y espaciado para data
+         * - interactive: tabla con hover, sticky header y estilos interactivos
+         */
+        this.variant = "default";
+        /**
+         * Estrategia responsive para la tabla
+         * - scroll: scroll horizontal en mobile (default, más simple)
+         * - wrap: permite que el contenido haga wrap
+         * - stack: convierte filas en cards en mobile (requiere data-label en celdas)
+         * - collapse: oculta columnas menos importantes en mobile
+         */
+        this.responsiveStrategy = "scroll";
+        /**
+         * Clases CSS adicionales para el wrapper
+         */
+        this.className = "";
+        /**
+         * Si es true, aplica padding negativo en mobile para scroll edge-to-edge
+         * Útil cuando la tabla está dentro de un container con padding
+         */
+        this.fullBleed = false;
+    }
+    get wrapperClasses() {
+        const baseClasses = ["relative", "w-full"];
+        const strategyClasses = this.getResponsiveStrategyClasses();
+        const variantClasses = this.getVariantWrapperClasses();
+        // Full bleed: scroll edge-to-edge en mobile
+        if (this.fullBleed && this.responsiveStrategy === "scroll") {
+            baseClasses.push("-mx-4", "px-4", "sm:mx-0", "sm:px-0");
+        }
+        return [
+            ...baseClasses,
+            ...strategyClasses,
+            ...variantClasses,
+            this.className,
+        ].filter(Boolean);
+    }
+    get tableClasses() {
+        const baseClasses = ["w-full", "caption-bottom", "text-sm"];
+        const variantClasses = this.getVariantTableClasses();
+        const cellClasses = this.getCellClasses();
+        return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
+    }
+    getResponsiveStrategyClasses() {
+        const strategy = TABLE_RESPONSIVE[this.responsiveStrategy];
+        if (this.responsiveStrategy === "scroll") {
+            return ["overflow-x-auto"];
+        }
+        if (this.responsiveStrategy === "wrap") {
+            return ["overflow-x-auto"];
+        }
+        if (this.responsiveStrategy === "stack") {
+            // Stack requiere lógica en el template, aquí solo el wrapper
+            return [];
+        }
+        if (this.responsiveStrategy === "collapse") {
+            return ["overflow-x-auto"];
+        }
+        return ["overflow-auto"];
+    }
+    getVariantWrapperClasses() {
+        if (this.variant === "interactive") {
+            return ["rounded-xl", "border border-solid", "border-border", "bg-background"];
+        }
+        if (this.variant === "data") {
+            return ["rounded-md", "border border-solid", "border-border", "bg-background"];
+        }
+        return [];
+    }
+    getVariantTableClasses() {
+        if (this.variant === "data") {
+            return [
+                "border-collapse",
+                "text-foreground",
+                "[&_thead_tr]:border-b",
+                "[&_thead_tr]:border-border",
+                "[&_tbody_tr]:border-b",
+                "[&_tbody_tr]:border-border",
+                "[&_tbody_tr:last-child]:border-b-0",
+                "[&_th]:h-10",
+                "[&_th]:px-2",
+                "[&_th]:text-left",
+                "[&_th]:align-middle",
+                "[&_th]:font-medium",
+                "[&_td]:p-2",
+                "[&_td]:align-middle",
+            ];
+        }
+        if (this.variant === "interactive") {
+            return [
+                "text-foreground",
+                "[&_thead]:sticky",
+                "[&_thead]:top-0",
+                "[&_thead]:z-10",
+                "[&_thead]:bg-muted/70",
+                "[&_thead_tr]:border-b",
+                "[&_thead_tr]:border-border",
+                "[&_th]:h-12",
+                "[&_th]:px-4",
+                "[&_th]:text-left",
+                "[&_th]:align-middle",
+                "[&_th]:text-sm",
+                "[&_th]:font-medium",
+                "[&_tbody_tr]:border-b",
+                "[&_tbody_tr]:border-border",
+                "[&_tbody_tr]:transition-colors",
+                "[&_tbody_tr:hover]:bg-muted/50",
+                "[&_tbody_tr:last-child]:border-b-0",
+                "[&_td]:h-14",
+                "[&_td]:px-4",
+                "[&_td]:align-middle",
+                "[&_td]:text-sm",
+                "[&_svg]:text-muted-foreground",
+            ];
+        }
+        return [];
+    }
+    getCellClasses() {
+        // Manejo responsive de whitespace
+        if (this.responsiveStrategy === "scroll") {
+            // En scroll, permitir wrap en mobile, nowrap en desktop
+            return [
+                "[&_td]:whitespace-normal",
+                "[&_th]:whitespace-normal",
+                "sm:[&_td]:whitespace-nowrap",
+                "sm:[&_th]:whitespace-nowrap",
+            ];
+        }
+        if (this.responsiveStrategy === "wrap") {
+            // En wrap, siempre permitir wrap
+            return [
+                "[&_td]:whitespace-normal",
+                "[&_td]:break-words",
+                "[&_th]:whitespace-normal",
+            ];
+        }
+        // Default: nowrap (comportamiento anterior para backward compatibility)
+        return [];
+    }
+}
+PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed" }, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "pdm-table", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { variant: [{
+                type: Input
+            }], responsiveStrategy: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], fullBleed: [{
+                type: Input
+            }] } });
+
+/**
+ * Data-table genérico con paginación, filtrado y selección
+ *
+ * NUEVO: Ahora es genérico y configurable via columnas
+ *
+ * @example
+ * // Definir columnas
+ * columns: PdmDataTableColumn<User>[] = [
+ *   { key: 'name', label: 'Name', sortable: true },
+ *   { key: 'email', label: 'Email', sortable: true },
+ *   { key: 'role', label: 'Role', hideOnMobile: true },
+ *   { key: 'createdAt', label: 'Created', render: (val) => formatDate(val) }
+ * ];
+ *
+ * // En el template
+ * <pdm-data-table
+ *   [columns]="columns"
+ *   [rows]="users"
+ *   [selectable]="true"
+ *   (selectionChange)="onSelect($event)">
+ * </pdm-data-table>
+ */
+class PdmDataTableComponent {
+    constructor() {
+        this.className = '';
+        /**
+         * Columnas a mostrar
+         * Si no se provee, intenta inferir del primer row (legacy mode)
+         */
+        this.columns = [];
+        /**
+         * Estrategia responsive de la tabla
+         */
+        this.responsiveStrategy = 'scroll';
+        /**
+         * Si es true, muestra checkbox de selección en cada fila
+         */
+        this.selectable = false;
+        /**
+         * Si es true, muestra botón de acciones (tres puntos) en cada fila
+         */
+        this.showActions = false;
+        /**
+         * Si es true, muestra filtro de búsqueda
+         */
+        this.showFilter = true;
+        /**
+         * Si es true, muestra controles de paginación
+         */
+        this.showPagination = true;
+        /**
+         * Si es true, muestra selector de columnas
+         */
+        this.showColumnSelector = false;
+        // Labels i18n
+        this.filterPlaceholder = 'Filter...';
+        this.columnsLabel = 'Columns';
+        this.previousLabel = 'Previous';
+        this.nextLabel = 'Next';
+        this.emptyLabel = 'No results.';
+        this.rowsSelectedLabel = 'row(s) selected';
+        // DEPRECATED: Labels hardcodeados para backward compatibility
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.statusLabel = 'Status';
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.emailLabel = 'Email';
+        /**
+         * @deprecated Use columns configuration instead
+         */
+        this.amountLabel = 'Amount';
+        /**
+         * Datos a mostrar
+         */
+        this.rows = [];
+        /**
+         * Página actual (1-indexed)
+         */
+        this.page = 1;
+        /**
+         * Cantidad de filas por página
+         */
+        this.pageSize = 10;
+        /**
+         * Query de filtrado
+         */
+        this.query = '';
+        this.queryChange = new EventEmitter();
+        this.rowAction = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.selectionChange = new EventEmitter();
+        this.columnSort = new EventEmitter();
+        // Estado interno
+        this.selectedRows = new Set();
+        this.sortDirection = 'asc';
+    }
+    /**
+     * Backward compatibility: si no hay columnas definidas, inferir del primer row
+     */
+    get effectiveColumns() {
+        if (this.columns.length > 0) {
+            return this.columns;
+        }
+        // Legacy mode: inferir columnas del primer row (solo para PdmDataTableRow)
+        if (this.rows.length > 0) {
+            const firstRow = this.rows[0];
+            return Object.keys(firstRow)
+                .filter(key => key !== 'selected')
+                .map(key => ({
+                key: key,
+                label: this.getLegacyLabel(key),
+                align: key === 'amount' ? 'right' : 'left'
+            }));
+        }
+        return [];
+    }
+    /**
+     * LEGACY: mapeo de keys a labels hardcodeados
+     */
+    getLegacyLabel(key) {
+        const map = {
+            status: this.statusLabel,
+            email: this.emailLabel,
+            amount: this.amountLabel
+        };
+        return map[key] || key.charAt(0).toUpperCase() + key.slice(1);
+    }
+    get filteredRows() {
+        const q = this.query.trim().toLowerCase();
+        if (!q)
+            return this.rows;
+        if (this.filterFn) {
+            return this.rows.filter(row => this.filterFn(row, q));
+        }
+        // Filtrado default: buscar en todos los campos string
+        return this.rows.filter(row => {
+            return Object.values(row).some(val => typeof val === 'string' && val.toLowerCase().includes(q));
+        });
+    }
+    get pagedRows() {
+        const start = (this.page - 1) * this.pageSize;
+        return this.filteredRows.slice(start, start + this.pageSize);
+    }
+    get totalPages() {
+        return Math.max(1, Math.ceil(this.filteredRows.length / this.pageSize));
+    }
+    get selectedCount() {
+        return this.selectedRows.size;
+    }
+    onQueryInput(event) {
+        const value = event.target.value;
+        this.queryChange.emit(value);
+    }
+    onToggleRow(row, event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.selectedRows.add(row);
+        }
+        else {
+            this.selectedRows.delete(row);
+        }
+        this.selectionChange.emit({ row, selected: checked });
+    }
+    onToggleAll(event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.pagedRows.forEach(row => this.selectedRows.add(row));
+        }
+        else {
+            this.pagedRows.forEach(row => this.selectedRows.delete(row));
+        }
+    }
+    isSelected(row) {
+        return this.selectedRows.has(row);
+    }
+    previous() {
+        if (this.page <= 1)
+            return;
+        this.pageChange.emit(this.page - 1);
+    }
+    next() {
+        if (this.page >= this.totalPages)
+            return;
+        this.pageChange.emit(this.page + 1);
+    }
+    onAction(row) {
+        this.rowAction.emit(row);
+    }
+    onSort(column) {
+        if (!column.sortable)
+            return;
+        if (this.sortColumn === column) {
+            this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
+        }
+        else {
+            this.sortColumn = column;
+            this.sortDirection = 'asc';
+        }
+        this.columnSort.emit({ column, direction: this.sortDirection });
+    }
+    getCellValue(row, column) {
+        const value = row[column.key];
+        if (column.render) {
+            return column.render(value, row);
+        }
+        return value != null ? String(value) : '';
+    }
+    getCellClass(column) {
+        const classes = ['px-2', 'py-2'];
+        if (column.align === 'center')
+            classes.push('text-center');
+        if (column.align === 'right')
+            classes.push('text-right');
+        if (column.hideOnMobile)
+            classes.push('hidden', 'md:table-cell');
+        if (column.cellClass)
+            classes.push(column.cellClass);
+        return classes.join(' ');
+    }
+    getHeaderClass(column) {
+        const classes = ['px-2', 'py-2', 'text-left', 'font-medium'];
+        if (column.hideOnMobile)
+            classes.push('hidden', 'md:table-cell');
+        if (column.headerClass)
+            classes.push(column.headerClass);
+        return classes.join(' ');
+    }
+    getColumnStyle(column) {
+        return column.width ? { width: column.width } : {};
+    }
+}
+PdmDataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PdmDataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDataTableComponent, selector: "pdm-data-table", inputs: { className: "className", columns: "columns", responsiveStrategy: "responsiveStrategy", selectable: "selectable", showActions: "showActions", showFilter: "showFilter", showPagination: "showPagination", showColumnSelector: "showColumnSelector", filterPlaceholder: "filterPlaceholder", columnsLabel: "columnsLabel", previousLabel: "previousLabel", nextLabel: "nextLabel", emptyLabel: "emptyLabel", rowsSelectedLabel: "rowsSelectedLabel", statusLabel: "statusLabel", emailLabel: "emailLabel", amountLabel: "amountLabel", rows: "rows", page: "page", pageSize: "pageSize", query: "query", filterFn: "filterFn" }, outputs: { queryChange: "queryChange", rowAction: "rowAction", pageChange: "pageChange", selectionChange: "selectionChange", columnSort: "columnSort" }, ngImport: i0, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 appearance-none box-border rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none box-border items-center gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none box-border items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: PdmTableComponent, selector: "pdm-table", inputs: ["variant", "responsiveStrategy", "className", "fullBleed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-data-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [ngClass]=\"['flex w-full flex-col', className]\">\n  <!-- Toolbar: Filtro + Selector de columnas -->\n  <div\n    *ngIf=\"showFilter || showColumnSelector\"\n    class=\"flex w-full flex-col gap-2 py-4 sm:flex-row sm:items-center\"\n  >\n    <input\n      *ngIf=\"showFilter\"\n      type=\"text\"\n      [placeholder]=\"filterPlaceholder\"\n      [value]=\"query\"\n      (input)=\"onQueryInput($event)\"\n      class=\"h-9 flex-1 appearance-none box-border rounded-md border border-solid border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n    />\n\n    <button\n      *ngIf=\"showColumnSelector\"\n      type=\"button\"\n      class=\"inline-flex h-9 appearance-none box-border items-center gap-2 rounded-md border border-solid border-input bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm whitespace-nowrap\"\n    >\n      <span>{{ columnsLabel }}</span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        class=\"h-4 w-4 text-foreground\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M7 10L12 15L17 10\"\n          stroke=\"currentColor\"\n          stroke-width=\"1.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        ></path>\n      </svg>\n    </button>\n  </div>\n\n  <!-- Tabla con responsive -->\n  <pdm-table\n    variant=\"data\"\n    [responsiveStrategy]=\"responsiveStrategy\"\n    [fullBleed]=\"false\"\n  >\n    <thead>\n      <tr>\n        <!-- Columna de selecci\u00F3n -->\n        <th *ngIf=\"selectable\" class=\"w-10 px-2 py-2 text-left font-medium\">\n          <input\n            type=\"checkbox\"\n            (change)=\"onToggleAll($event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </th>\n\n        <!-- Columnas din\u00E1micas -->\n        <th\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getHeaderClass(column)\"\n          [ngStyle]=\"getColumnStyle(column)\"\n        >\n          <!-- Header sortable -->\n          <button\n            *ngIf=\"column.sortable\"\n            type=\"button\"\n            (click)=\"onSort(column)\"\n            class=\"inline-flex appearance-none box-border items-center gap-1 rounded-sm border-0 bg-transparent px-3 py-2 text-sm hover:underline\"\n          >\n            <span>{{ column.label }}</span>\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 6L4 10L8 14M16 18L20 14L16 10\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              ></path>\n            </svg>\n          </button>\n\n          <!-- Header no sortable -->\n          <span *ngIf=\"!column.sortable\">{{ column.label }}</span>\n        </th>\n\n        <!-- Columna de acciones -->\n        <th *ngIf=\"showActions\" class=\"w-10 px-2 py-2\"></th>\n      </tr>\n    </thead>\n\n    <tbody>\n      <!-- Filas con datos -->\n      <tr *ngFor=\"let row of pagedRows\">\n        <!-- Celda de selecci\u00F3n -->\n        <td *ngIf=\"selectable\" class=\"px-2 py-2\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"isSelected(row)\"\n            (change)=\"onToggleRow(row, $event)\"\n            class=\"h-4 w-4 box-border rounded-sm border border-solid border-input accent-primary\"\n          />\n        </td>\n\n        <!-- Celdas din\u00E1micas -->\n        <td\n          *ngFor=\"let column of effectiveColumns\"\n          [ngClass]=\"getCellClass(column)\"\n        >\n          <!-- Template personalizado si existe -->\n          <ng-container *ngIf=\"column.cellTemplate; else defaultCell\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                column.cellTemplate;\n                context: { $implicit: row, value: row[column.key] }\n              \"\n            >\n            </ng-container>\n          </ng-container>\n\n          <!-- Renderizado default -->\n          <ng-template #defaultCell>\n            {{ getCellValue(row, column) }}\n          </ng-template>\n        </td>\n\n        <!-- Celda de acciones -->\n        <td *ngIf=\"showActions\" class=\"px-2 py-2\">\n          <button\n            type=\"button\"\n            class=\"inline-flex h-8 w-8 appearance-none box-border items-center justify-center border-0 bg-transparent p-0 hover:text-foreground\"\n            (click)=\"onAction(row)\"\n          >\n            <svg\n              viewBox=\"0 0 24 24\"\n              class=\"h-4 w-4\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle cx=\"6\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"12\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n              <circle cx=\"18\" cy=\"12\" r=\"1.5\" fill=\"currentColor\"></circle>\n            </svg>\n          </button>\n        </td>\n      </tr>\n\n      <!-- Fila vac\u00EDa -->\n      <tr *ngIf=\"pagedRows.length === 0\">\n        <td\n          [attr.colspan]=\"\n            effectiveColumns.length +\n            (selectable ? 1 : 0) +\n            (showActions ? 1 : 0)\n          \"\n          class=\"px-3 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ emptyLabel }}\n        </td>\n      </tr>\n    </tbody>\n  </pdm-table>\n\n  <!-- Footer: Info + Paginaci\u00F3n -->\n  <div\n    *ngIf=\"showPagination || selectable\"\n    class=\"flex w-full flex-wrap items-center gap-2 py-4 sm:flex-nowrap\"\n  >\n    <p\n      *ngIf=\"selectable\"\n      class=\"m-0 flex-1 pr-2 text-sm text-muted-foreground whitespace-nowrap\"\n    >\n      {{ selectedCount }} of {{ rows.length }} {{ rowsSelectedLabel }}\n    </p>\n\n    <div *ngIf=\"showPagination\" class=\"flex items-center gap-2 ml-auto\">\n      <span class=\"text-sm text-muted-foreground whitespace-nowrap\">\n        Page {{ page }} of {{ totalPages }}\n      </span>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page <= 1\"\n        (click)=\"previous()\"\n      >\n        {{ previousLabel }}\n      </button>\n      <button\n        type=\"button\"\n        class=\"h-9 appearance-none box-border rounded-md border border-solid border-input bg-background px-4 text-sm font-medium text-foreground shadow-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\"\n        [disabled]=\"page >= totalPages\"\n        (click)=\"next()\"\n      >\n        {{ nextLabel }}\n      </button>\n    </div>\n  </div>\n</section>\n" }]
+        }], propDecorators: { className: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], responsiveStrategy: [{
+                type: Input
+            }], selectable: [{
+                type: Input
+            }], showActions: [{
+                type: Input
+            }], showFilter: [{
+                type: Input
+            }], showPagination: [{
+                type: Input
+            }], showColumnSelector: [{
+                type: Input
+            }], filterPlaceholder: [{
+                type: Input
+            }], columnsLabel: [{
+                type: Input
+            }], previousLabel: [{
+                type: Input
+            }], nextLabel: [{
+                type: Input
+            }], emptyLabel: [{
+                type: Input
+            }], rowsSelectedLabel: [{
+                type: Input
+            }], statusLabel: [{
+                type: Input
+            }], emailLabel: [{
+                type: Input
+            }], amountLabel: [{
+                type: Input
+            }], rows: [{
+                type: Input
+            }], page: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }], query: [{
+                type: Input
+            }], filterFn: [{
+                type: Input
+            }], queryChange: [{
+                type: Output
+            }], rowAction: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], selectionChange: [{
+                type: Output
+            }], columnSort: [{
+                type: Output
+            }] } });
+
+/**
+ * Tabla con funcionalidad de reordenamiento de filas mediante drag & drop
+ *
+ * Extiende pdm-table agregando la capacidad de reordenar filas.
+ * Si no necesitás drag & drop, usá pdm-table directamente (más simple y liviano).
+ *
+ * @example
+ * <pdm-draggable-table
+ *   variant="interactive"
+ *   [reorderRows]="true"
+ *   (rowOrderChange)="onOrderChange($event)">
+ *   <tbody>
+ *     <tr data-row-id="1"><td>Row 1</td></tr>
+ *     <tr data-row-id="2"><td>Row 2</td></tr>
+ *   </tbody>
+ * </pdm-draggable-table>
+ *
+ * IMPORTANTE: Cada <tr> debe tener un atributo data-row-id único
+ */
+class PdmDraggableTableComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.variant = 'default';
+        this.responsiveStrategy = 'scroll';
+        this.className = '';
+        this.fullBleed = false;
+        /**
+         * Habilita el reordenamiento de filas mediante drag & drop
+         */
+        this.reorderRows = false;
+        /**
+         * Selector CSS para identificar los handles de drag
+         * Por defecto busca: [data-drag-handle], [data-slot=row-drag-handle], .row-drag-handle
+         * Si no encuentra ninguno, inserta un handle automático
+         */
+        this.dragHandleSelector = '[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle,[data-auto-drag-handle]';
+        /**
+         * Emite el nuevo orden de las filas cuando el usuario termina de arrastrar
+         * Array de data-row-id en el nuevo orden
+         */
+        this.rowOrderChange = new EventEmitter();
+        this.cleanupListeners = [];
+        this.draggedRow = null;
+    }
+    ngAfterViewInit() {
+        this.syncReorderBehavior();
+    }
+    // Getters para clases CSS (mismo comportamiento que pdm-table)
+    get wrapperClasses() {
+        const baseClasses = ['relative', 'w-full'];
+        const strategyClasses = this.getResponsiveStrategyClasses();
+        const variantClasses = this.getVariantWrapperClasses();
+        if (this.fullBleed && this.responsiveStrategy === 'scroll') {
+            baseClasses.push('-mx-4', 'px-4', 'sm:mx-0', 'sm:px-0');
+        }
+        return [
+            ...baseClasses,
+            ...strategyClasses,
+            ...variantClasses,
+            this.className
+        ].filter(Boolean);
+    }
+    get tableClasses() {
+        const baseClasses = ['w-full', 'caption-bottom', 'text-sm'];
+        const variantClasses = this.getVariantTableClasses();
+        const cellClasses = this.getCellClasses();
+        return [...baseClasses, ...variantClasses, ...cellClasses].filter(Boolean);
+    }
+    getResponsiveStrategyClasses() {
+        if (this.responsiveStrategy === 'scroll' || this.responsiveStrategy === 'wrap' || this.responsiveStrategy === 'collapse') {
+            return ['overflow-x-auto'];
+        }
+        return [];
+    }
+    getVariantWrapperClasses() {
+        if (this.variant === 'interactive') {
+            return ['rounded-xl', 'border border-solid', 'border-border', 'bg-background'];
+        }
+        if (this.variant === 'data') {
+            return ['rounded-md', 'border border-solid', 'border-border', 'bg-background'];
+        }
+        return [];
+    }
+    getVariantTableClasses() {
+        if (this.variant === 'data') {
+            return [
+                'border-collapse', 'text-foreground',
+                '[&_thead_tr]:border-b', '[&_thead_tr]:border-border',
+                '[&_tbody_tr]:border-b', '[&_tbody_tr]:border-border',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_th]:h-10', '[&_th]:px-2', '[&_th]:text-left', '[&_th]:align-middle', '[&_th]:font-medium',
+                '[&_td]:p-2', '[&_td]:align-middle'
+            ];
+        }
+        if (this.variant === 'interactive') {
+            return [
+                'text-foreground',
+                '[&_thead]:sticky', '[&_thead]:top-0', '[&_thead]:z-10', '[&_thead]:bg-muted/70',
+                '[&_thead_tr]:border-b', '[&_thead_tr]:border-border',
+                '[&_th]:h-12', '[&_th]:px-4', '[&_th]:text-left', '[&_th]:align-middle', '[&_th]:text-sm', '[&_th]:font-medium',
+                '[&_tbody_tr]:border-b', '[&_tbody_tr]:border-border',
+                '[&_tbody_tr]:transition-colors', '[&_tbody_tr:hover]:bg-muted/50',
+                '[&_tbody_tr:last-child]:border-b-0',
+                '[&_td]:h-14', '[&_td]:px-4', '[&_td]:align-middle', '[&_td]:text-sm',
+                '[&_svg]:text-muted-foreground'
+            ];
+        }
+        return [];
+    }
+    getCellClasses() {
+        if (this.responsiveStrategy === 'scroll') {
+            return ['[&_td]:whitespace-normal', '[&_th]:whitespace-normal', 'sm:[&_td]:whitespace-nowrap', 'sm:[&_th]:whitespace-nowrap'];
+        }
+        if (this.responsiveStrategy === 'wrap') {
+            return ['[&_td]:whitespace-normal', '[&_td]:break-words', '[&_th]:whitespace-normal'];
+        }
+        return [];
+    }
+    ngOnChanges(changes) {
+        if (changes['reorderRows'] || changes['variant']) {
+            this.syncReorderBehavior();
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupReorderBehavior();
+    }
+    syncReorderBehavior() {
+        this.cleanupReorderBehavior();
+        if (!this.reorderRows) {
+            return;
+        }
+        const tbody = this.getTbody();
+        if (!tbody) {
+            return;
+        }
+        this.setRowsDraggable(tbody, true);
+        this.cleanupListeners.push(this.renderer.listen(tbody, 'mousedown', (event) => this.armDragFromHandle(event)), this.renderer.listen(tbody, 'dragstart', (event) => this.onDragStart(event)), this.renderer.listen(tbody, 'dragover', (event) => this.onDragOver(event, tbody)), this.renderer.listen(tbody, 'drop', (event) => this.onDrop(event)), this.renderer.listen(tbody, 'dragend', () => this.onDragEnd()));
+        // Observer para detectar cambios en el DOM (filas agregadas/removidas)
+        this.observer = new MutationObserver(() => this.setRowsDraggable(tbody, true));
+        this.observer.observe(tbody, { childList: true });
+    }
+    cleanupReorderBehavior() {
+        this.cleanupListeners.forEach((dispose) => dispose());
+        this.cleanupListeners = [];
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+        const tbody = this.getTbody();
+        if (tbody) {
+            this.setRowsDraggable(tbody, false);
+        }
+        this.draggedRow = null;
+    }
+    getTbody() {
+        var _a, _b;
+        return (_b = (_a = this.tableElement) === null || _a === void 0 ? void 0 : _a.nativeElement.tBodies.item(0)) !== null && _b !== void 0 ? _b : null;
+    }
+    setRowsDraggable(tbody, enabled) {
+        const rows = Array.from(tbody.rows);
+        rows.forEach((row) => {
+            this.syncAutoDragHandle(row, enabled);
+            row.draggable = false;
+            if (!enabled) {
+                delete row.dataset['dragging'];
+                delete row.dataset['dragArmed'];
+            }
+        });
+    }
+    /**
+     * Inserta un handle de drag automático si no existe uno custom
+     */
+    syncAutoDragHandle(row, enabled) {
+        const firstCell = row.cells.item(0);
+        if (!firstCell) {
+            return;
+        }
+        const existingAutoHandle = firstCell.querySelector('[data-auto-drag-handle]');
+        if (!enabled) {
+            existingAutoHandle === null || existingAutoHandle === void 0 ? void 0 : existingAutoHandle.remove();
+            return;
+        }
+        const hasCustomHandle = !!firstCell.querySelector('[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle');
+        if (hasCustomHandle || existingAutoHandle) {
+            return;
+        }
+        // Crear handle automático
+        const button = this.renderer.createElement('button');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.setAttribute(button, 'aria-label', 'Drag row');
+        this.renderer.setAttribute(button, 'data-auto-drag-handle', 'true');
+        this.renderer.addClass(button, 'inline-flex');
+        this.renderer.addClass(button, 'h-7');
+        this.renderer.addClass(button, 'w-7');
+        this.renderer.addClass(button, 'items-center');
+        this.renderer.addClass(button, 'justify-center');
+        this.renderer.addClass(button, 'cursor-grab');
+        this.renderer.addClass(button, 'active:cursor-grabbing');
+        this.renderer.addClass(button, 'text-muted-foreground');
+        const dots = this.renderer.createElement('span');
+        this.renderer.addClass(dots, 'text-sm');
+        this.renderer.addClass(dots, 'leading-none');
+        this.renderer.setProperty(dots, 'textContent', '⋮⋮');
+        this.renderer.appendChild(button, dots);
+        this.renderer.insertBefore(firstCell, button, firstCell.firstChild);
+    }
+    onDragStart(event) {
+        const target = event.target;
+        const row = target === null || target === void 0 ? void 0 : target.closest('tr');
+        if (!row) {
+            return;
+        }
+        const handle = target === null || target === void 0 ? void 0 : target.closest(this.dragHandleSelector);
+        const isArmed = row.dataset['dragArmed'] === 'true';
+        if ((!handle || !row.contains(handle)) && !isArmed) {
+            event.preventDefault();
+            return;
+        }
+        this.draggedRow = row;
+        this.draggedRow.dataset['dragging'] = 'true';
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', '');
+        }
+    }
+    onDragOver(event, tbody) {
+        if (!this.draggedRow) {
+            return;
+        }
+        event.preventDefault();
+        const target = event.target;
+        const targetRow = target === null || target === void 0 ? void 0 : target.closest('tr');
+        if (!targetRow || targetRow === this.draggedRow) {
+            return;
+        }
+        const rect = targetRow.getBoundingClientRect();
+        const shouldInsertBefore = event.clientY < rect.top + rect.height / 2;
+        tbody.insertBefore(this.draggedRow, shouldInsertBefore ? targetRow : targetRow.nextSibling);
+    }
+    onDrop(event) {
+        event.preventDefault();
+    }
+    onDragEnd() {
+        const tbody = this.getTbody();
+        if (tbody) {
+            Array.from(tbody.rows).forEach((row) => {
+                row.draggable = false;
+                delete row.dataset['dragArmed'];
+            });
+        }
+        if (this.draggedRow) {
+            delete this.draggedRow.dataset['dragging'];
+            this.draggedRow = null;
+        }
+        if (!tbody) {
+            return;
+        }
+        const order = Array.from(tbody.rows).map((row, index) => row.getAttribute('data-row-id') || String(index));
+        this.rowOrderChange.emit(order);
+    }
+    armDragFromHandle(event) {
+        const target = event.target;
+        const handle = target === null || target === void 0 ? void 0 : target.closest(this.dragHandleSelector);
+        if (!handle) {
+            return;
+        }
+        const row = handle.closest('tr');
+        if (!row) {
+            return;
+        }
+        row.draggable = true;
+        row.dataset['dragArmed'] = 'true';
+    }
+}
+PdmDraggableTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDraggableTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PdmDraggableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmDraggableTableComponent, selector: "pdm-draggable-table", inputs: { variant: "variant", responsiveStrategy: "responsiveStrategy", className: "className", fullBleed: "fullBleed", reorderRows: "reorderRows", dragHandleSelector: "dragHandleSelector" }, outputs: { rowOrderChange: "rowOrderChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDraggableTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pdm-draggable-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { variant: [{
+                type: Input
+            }], responsiveStrategy: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], fullBleed: [{
+                type: Input
+            }], reorderRows: [{
+                type: Input
+            }], dragHandleSelector: [{
+                type: Input
+            }], rowOrderChange: [{
+                type: Output
+            }], tableElement: [{
+                type: ViewChild,
+                args: ['tableElement']
+            }] } });
+
+const COMPONENTS = [
+    PdmDataTableComponent,
+    PdmDraggableTableComponent,
+    PdmTableComponent,
+];
+class PdmDataTableModule {
+}
+PdmDataTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+PdmDataTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableModule, declarations: [PdmDataTableComponent,
+        PdmDraggableTableComponent,
+        PdmTableComponent], imports: [CommonModule], exports: [PdmDataTableComponent,
+        PdmDraggableTableComponent,
+        PdmTableComponent] });
+PdmDataTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmDataTableModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule],
+                    declarations: COMPONENTS,
+                    exports: COMPONENTS
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PdmDataTableComponent, PdmDataTableModule, PdmDraggableTableComponent, PdmTableComponent };
+//# sourceMappingURL=pdm-ui-kit-src-data-table.mjs.map