pdm-ui-kit 0.1.17 → 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() {
@@ -2694,24 +2694,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             }] } });
 
 class PdmSwitchComponent {
-    constructor() {
+    constructor(cdr) {
+        this.cdr = cdr;
         this.id = '';
         this.checked = false;
         this.disabled = false;
         this.label = '';
         this.className = '';
+        this.size = 'default';
         this.checkedChange = new EventEmitter();
     }
-    onToggle(event) {
-        this.checkedChange.emit(event.target.checked);
+    get rootClasses() {
+        return [
+            'peer relative inline-flex shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',
+            this.size === 'sm' ? 'h-[14px] w-[24px]' : 'h-[18.4px] w-[32px]',
+            this.checked ? 'bg-primary' : 'bg-input dark:bg-input/80'
+        ];
+    }
+    get thumbClasses() {
+        return [
+            'pointer-events-none block rounded-full bg-background ring-0 transition-transform',
+            this.size === 'sm' ? 'size-3' : 'size-4',
+            this.checked ? 'translate-x-[calc(100%-2px)]' : 'translate-x-0'
+        ];
+    }
+    onToggle() {
+        if (this.disabled)
+            return;
+        const next = !this.checked;
+        this.checked = next;
+        this.checkedChange.emit(next);
+        this.cdr.markForCheck();
     }
 }
-PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-muted transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-disabled:opacity-50 peer-checked:bg-primary\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-background shadow-sm transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm text-foreground\">{{ label }}</span>\n</label>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmSwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PdmSwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmSwitchComponent, selector: "pdm-switch", inputs: { id: "id", checked: "checked", disabled: "disabled", label: "label", className: "className", size: "size" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n    [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n    [attr.data-size]=\"size\"\n    [attr.data-slot]=\"'switch'\"\n    [attr.value]=\"checked ? 'on' : 'off'\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"rootClasses\"\n    (click)=\"onToggle()\"\n  >\n    <span\n      [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n      [attr.data-slot]=\"'switch-thumb'\"\n      [ngClass]=\"thumbClasses\"\n    ></span>\n  </button>\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [attr.data-slot]=\"'label'\"\n    class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n    (click)=\"onToggle()\"\n  >\n    {{ label }}\n  </label>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [attr.for]=\"id\" [ngClass]=\"['inline-flex items-center gap-2', className]\">\n  <input\n    [id]=\"id\"\n    type=\"checkbox\"\n    class=\"peer sr-only\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    (change)=\"onToggle($event)\"\n  />\n  <span class=\"relative inline-flex h-6 w-11 items-center rounded-full border border-transparent bg-muted transition-colors peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-disabled:opacity-50 peer-checked:bg-primary\">\n    <span class=\"h-5 w-5 translate-x-0.5 rounded-full bg-background shadow-sm transition-transform peer-checked:translate-x-5\"></span>\n  </span>\n  <span *ngIf=\"label\" class=\"text-sm text-foreground\">{{ label }}</span>\n</label>\n" }]
-        }], propDecorators: { id: [{
+            args: [{ selector: 'pdm-switch', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [ngClass]=\"['flex items-center space-x-2', className]\">\n  <button\n    type=\"button\"\n    role=\"switch\"\n    [attr.aria-checked]=\"checked\"\n    [attr.aria-disabled]=\"disabled\"\n    [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n    [attr.data-disabled]=\"disabled ? 'true' : 'false'\"\n    [attr.data-size]=\"size\"\n    [attr.data-slot]=\"'switch'\"\n    [attr.value]=\"checked ? 'on' : 'off'\"\n    [id]=\"id\"\n    [disabled]=\"disabled\"\n    [ngClass]=\"rootClasses\"\n    (click)=\"onToggle()\"\n  >\n    <span\n      [attr.data-state]=\"checked ? 'checked' : 'unchecked'\"\n      [attr.data-slot]=\"'switch-thumb'\"\n      [ngClass]=\"thumbClasses\"\n    ></span>\n  </button>\n  <label\n    *ngIf=\"label\"\n    [attr.for]=\"id\"\n    [attr.data-slot]=\"'label'\"\n    class=\"flex cursor-pointer items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50\"\n    (click)=\"onToggle()\"\n  >\n    {{ label }}\n  </label>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { id: [{
                 type: Input
             }], checked: [{
                 type: Input
@@ -2721,22 +2742,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], className: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], checkedChange: [{
                 type: Output
             }] } });
 
 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 {