pdm-ui-kit 0.1.18 → 0.1.19

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, NgModule } from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, ViewChild, NgModule } from '@angular/core';
 
 class PdmAccordionComponent {
     constructor() {
@@ -2749,17 +2749,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmTableComponent {
-    constructor() {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.variant = 'default';
+        this.reorderRows = false;
+        this.dragHandleSelector = '[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle,[data-auto-drag-handle]';
         this.className = '';
+        this.rowOrderChange = new EventEmitter();
+        this.cleanupListeners = [];
+        this.draggedRow = null;
+    }
+    ngAfterViewInit() {
+        this.syncReorderBehavior();
+    }
+    ngOnChanges(changes) {
+        if (changes['reorderRows'] || changes['variant']) {
+            this.syncReorderBehavior();
+        }
+    }
+    ngOnDestroy() {
+        this.cleanupReorderBehavior();
+    }
+    get wrapperClasses() {
+        return [
+            'relative w-full overflow-auto',
+            this.variant === 'interactive' ? 'overflow-x-auto overflow-y-hidden rounded-xl border border-border bg-background' : '',
+            this.variant === 'data' ? 'overflow-hidden rounded-md border border-border bg-background' : '',
+            this.className
+        ];
+    }
+    get tableClasses() {
+        return [
+            'w-full caption-bottom text-sm',
+            this.variant === 'data'
+                ? 'border-collapse text-foreground [&_thead_tr]:border-b [&_thead_tr]:border-border [&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr:last-child]:border-b-0 [&_th]:h-10 [&_th]:px-2 [&_th]:text-left [&_th]:align-middle [&_th]:font-medium [&_td]:p-2 [&_td]:align-middle'
+                : '',
+            this.variant === 'interactive'
+                ? 'text-foreground [&_thead]:sticky [&_thead]:top-0 [&_thead]:z-10 [&_thead]:bg-muted/70 [&_thead_tr]:border-b [&_thead_tr]:border-border [&_th]:h-12 [&_th]:px-4 [&_th]:text-left [&_th]:align-middle [&_th]:text-sm [&_th]:font-medium [&_th]:whitespace-nowrap [&_tbody_tr]:border-b [&_tbody_tr]:border-border [&_tbody_tr]:transition-colors [&_tbody_tr:hover]:bg-muted/50 [&_tbody_tr:last-child]:border-b-0 [&_td]:h-14 [&_td]:px-4 [&_td]:align-middle [&_td]:text-sm [&_td]:whitespace-nowrap [&_td:first-child]:w-10 [&_td:last-child]:w-10 [&_svg]:text-muted-foreground'
+                : ''
+        ];
+    }
+    syncReorderBehavior() {
+        this.cleanupReorderBehavior();
+        if (!this.isReorderEnabled) {
+            return;
+        }
+        const tbody = this.getTbody();
+        if (!tbody) {
+            return;
+        }
+        this.setRowsDraggable(tbody, true);
+        this.cleanupListeners.push(this.renderer.listen(tbody, 'mousedown', (event) => this.armDragFromHandle(event)), this.renderer.listen(tbody, 'dragstart', (event) => this.onDragStart(event)), this.renderer.listen(tbody, 'dragover', (event) => this.onDragOver(event, tbody)), this.renderer.listen(tbody, 'drop', (event) => this.onDrop(event)), this.renderer.listen(tbody, 'dragend', () => this.onDragEnd()));
+        this.observer = new MutationObserver(() => this.setRowsDraggable(tbody, true));
+        this.observer.observe(tbody, { childList: true });
+    }
+    cleanupReorderBehavior() {
+        this.cleanupListeners.forEach((dispose) => dispose());
+        this.cleanupListeners = [];
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = undefined;
+        }
+        const tbody = this.getTbody();
+        if (tbody) {
+            this.setRowsDraggable(tbody, false);
+        }
+        this.draggedRow = null;
+    }
+    get isReorderEnabled() {
+        return this.reorderRows;
+    }
+    getTbody() {
+        return this.tableElement?.nativeElement.tBodies.item(0) ?? null;
+    }
+    setRowsDraggable(tbody, enabled) {
+        const rows = Array.from(tbody.rows);
+        rows.forEach((row) => {
+            this.syncAutoDragHandle(row, enabled);
+            row.draggable = false;
+            if (!enabled) {
+                delete row.dataset['dragging'];
+                delete row.dataset['dragArmed'];
+            }
+        });
+    }
+    syncAutoDragHandle(row, enabled) {
+        const firstCell = row.cells.item(0);
+        if (!firstCell) {
+            return;
+        }
+        const existingAutoHandle = firstCell.querySelector('[data-auto-drag-handle]');
+        if (!enabled) {
+            existingAutoHandle?.remove();
+            return;
+        }
+        const hasCustomHandle = !!firstCell.querySelector('[data-drag-handle],[data-slot=row-drag-handle],.row-drag-handle');
+        if (hasCustomHandle || existingAutoHandle) {
+            return;
+        }
+        const button = this.renderer.createElement('button');
+        this.renderer.setAttribute(button, 'type', 'button');
+        this.renderer.setAttribute(button, 'aria-label', 'Drag row');
+        this.renderer.setAttribute(button, 'data-auto-drag-handle', 'true');
+        this.renderer.addClass(button, 'inline-flex');
+        this.renderer.addClass(button, 'h-7');
+        this.renderer.addClass(button, 'w-7');
+        this.renderer.addClass(button, 'items-center');
+        this.renderer.addClass(button, 'justify-center');
+        this.renderer.addClass(button, 'cursor-grab');
+        this.renderer.addClass(button, 'active:cursor-grabbing');
+        this.renderer.addClass(button, 'text-muted-foreground');
+        const dots = this.renderer.createElement('span');
+        this.renderer.addClass(dots, 'text-sm');
+        this.renderer.addClass(dots, 'leading-none');
+        this.renderer.setProperty(dots, 'textContent', '⋮⋮');
+        this.renderer.appendChild(button, dots);
+        this.renderer.insertBefore(firstCell, button, firstCell.firstChild);
+    }
+    onDragStart(event) {
+        const target = event.target;
+        const row = target?.closest('tr');
+        if (!row) {
+            return;
+        }
+        const handle = target?.closest(this.dragHandleSelector);
+        const isArmed = row.dataset['dragArmed'] === 'true';
+        if ((!handle || !row.contains(handle)) && !isArmed) {
+            event.preventDefault();
+            return;
+        }
+        this.draggedRow = row;
+        this.draggedRow.dataset['dragging'] = 'true';
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('text/plain', '');
+        }
+    }
+    onDragOver(event, tbody) {
+        if (!this.draggedRow) {
+            return;
+        }
+        event.preventDefault();
+        const target = event.target;
+        const targetRow = target?.closest('tr');
+        if (!targetRow || targetRow === this.draggedRow) {
+            return;
+        }
+        const rect = targetRow.getBoundingClientRect();
+        const shouldInsertBefore = event.clientY < rect.top + rect.height / 2;
+        tbody.insertBefore(this.draggedRow, shouldInsertBefore ? targetRow : targetRow.nextSibling);
+    }
+    onDrop(event) {
+        event.preventDefault();
+    }
+    onDragEnd() {
+        const tbody = this.getTbody();
+        if (tbody) {
+            Array.from(tbody.rows).forEach((row) => {
+                row.draggable = false;
+                delete row.dataset['dragArmed'];
+            });
+        }
+        if (this.draggedRow) {
+            delete this.draggedRow.dataset['dragging'];
+            this.draggedRow = null;
+        }
+        if (!tbody) {
+            return;
+        }
+        const order = Array.from(tbody.rows).map((row, index) => row.getAttribute('data-row-id') || String(index));
+        this.rowOrderChange.emit(order);
+    }
+    armDragFromHandle(event) {
+        const target = event.target;
+        const handle = target?.closest(this.dragHandleSelector);
+        if (!handle) {
+            return;
+        }
+        const row = handle.closest('tr');
+        if (!row) {
+            return;
+        }
+        row.draggable = true;
+        row.dataset['dragArmed'] = 'true';
     }
 }
-PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { className: "className" }, ngImport: i0, template: "<div [ngClass]=\"['relative w-full overflow-auto', className]\">\n  <table class=\"w-full caption-bottom text-sm\">\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 });
+PdmTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+PdmTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmTableComponent, selector: "pdm-table", inputs: { variant: "variant", reorderRows: "reorderRows", dragHandleSelector: "dragHandleSelector", className: "className" }, outputs: { rowOrderChange: "rowOrderChange" }, viewQueries: [{ propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['relative w-full overflow-auto', className]\">\n  <table class=\"w-full caption-bottom text-sm\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
-        }], propDecorators: { className: [{
+            args: [{ selector: 'pdm-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"wrapperClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table-container' : null\">\n  <table #tableElement [ngClass]=\"tableClasses\" [attr.data-slot]=\"variant === 'interactive' ? 'table' : null\">\n    <ng-content></ng-content>\n  </table>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { variant: [{
+                type: Input
+            }], reorderRows: [{
+                type: Input
+            }], dragHandleSelector: [{
                 type: Input
+            }], className: [{
+                type: Input
+            }], rowOrderChange: [{
+                type: Output
+            }], tableElement: [{
+                type: ViewChild,
+                args: ['tableElement']
             }] } });
 
 class PdmTabsComponent {