pdm-ui-kit 0.1.18 → 0.1.20

package/fesm2020/pdm-ui-kit.mjs

@@ -1,7 +1,9 @@
 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';
+import { icons } from 'lucide';
+import * as i1$1 from '@angular/platform-browser';
 
 class PdmAccordionComponent {
     constructor() {
@@ -973,8 +975,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+const FALLBACK_NODE = [['circle', { cx: '12', cy: '12', r: '9' }]];
 class PdmIconComponent {
-    constructor() {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
         this.name = 'check';
         this.library = 'lucide';
         this.assetUrl = null;
@@ -983,34 +987,39 @@ class PdmIconComponent {
         this.className = '';
         this.ariaLabel = null;
         this.decorative = false;
+        this.lucideIndex = this.buildLucideIndex();
         this.aliasMapByLibrary = {
-            lucide: {},
+            lucide: {
+                'check-circle': 'circle-check',
+                'alert-circle': 'circle-alert',
+                info: 'circle-info',
+                'sort-asc': 'arrow-up-a-z',
+                'sort-desc': 'arrow-down-z-a'
+            },
             tabler: {
-                'alert-triangle': 'alert-circle',
-                'chevron-down': 'chevron-down',
-                'chevron-right': 'chevron-right',
-                'user-circle': 'user',
-                'settings-2': 'settings',
+                'alert-triangle': 'triangle-alert',
+                'user-circle': 'circle-user',
+                'settings-2': 'settings-2',
                 'external-link': 'external-link'
             },
             hugeicons: {
-                'alert-02': 'alert-circle',
-                'user-circle': 'user',
+                'alert-02': 'circle-alert',
+                'user-circle': 'circle-user',
                 'search-01': 'search',
                 'settings-01': 'settings',
                 'arrow-right-01': 'chevron-right',
                 'arrow-down-01': 'chevron-down'
             },
             phosphor: {
-                'warning-circle': 'alert-circle',
+                'warning-circle': 'circle-alert',
                 'caret-down': 'chevron-down',
                 'caret-right': 'chevron-right',
-                'user-circle': 'user',
+                'user-circle': 'circle-user',
                 gear: 'settings',
                 'arrow-square-out': 'external-link'
             },
             remix: {
-                'alert-line': 'alert-circle',
+                'alert-line': 'circle-alert',
                 'arrow-right-line': 'chevron-right',
                 'arrow-down-s-line': 'chevron-down',
                 'external-link-line': 'external-link',
@@ -1020,8 +1029,9 @@ class PdmIconComponent {
         };
     }
     get resolvedStrokeWidth() {
-        if (this.strokeWidth) {
-            return this.strokeWidth;
+        const value = Number(this.strokeWidth);
+        if (Number.isFinite(value) && value > 0) {
+            return value;
         }
         if (this.library === 'phosphor') {
             return 1.6;
@@ -1031,6 +1041,10 @@ class PdmIconComponent {
         }
         return 1.5;
     }
+    get resolvedSize() {
+        const value = Number(this.size);
+        return Number.isFinite(value) && value > 0 ? value : 16;
+    }
     get iconKey() {
         const raw = `${this.name || ''}`.trim();
         if (!raw) {
@@ -1040,13 +1054,49 @@ class PdmIconComponent {
         const aliases = this.aliasMapByLibrary[this.library] ?? {};
         return aliases[trimmed] ?? trimmed;
     }
+    get svgMarkup() {
+        const node = this.resolveIconNode(this.iconKey) ?? FALLBACK_NODE;
+        const strokeWidth = this.escapeAttr(this.resolvedStrokeWidth);
+        const size = this.escapeAttr(this.resolvedSize);
+        const body = node
+            .map(([tag, attrs]) => {
+            const serializedAttrs = Object.entries(attrs)
+                .map(([key, value]) => `${key}="${this.escapeAttr(value)}"`)
+                .join(' ');
+            return serializedAttrs ? `<${tag} ${serializedAttrs}></${tag}>` : `<${tag}></${tag}>`;
+        })
+            .join('');
+        const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+        return this.sanitizer.bypassSecurityTrustHtml(svg);
+    }
+    resolveIconNode(iconName) {
+        const normalized = this.normalizeIconName(iconName);
+        return this.lucideIndex.get(normalized) ?? null;
+    }
+    normalizeIconName(name) {
+        return `${name || ''}`.toLowerCase().replace(/[^a-z0-9]/g, '');
+    }
+    buildLucideIndex() {
+        const map = new Map();
+        Object.entries(icons).forEach(([iconName, iconNode]) => {
+            map.set(this.normalizeIconName(iconName), iconNode);
+        });
+        return map;
+    }
+    escapeAttr(value) {
+        return `${value ?? ''}`
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
 }
-PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <svg\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <ng-container [ngSwitch]=\"iconKey\">\n    <g *ngSwitchCase=\"'command'\">\n      <path d=\"M9 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H7.5C6.12 9 5 7.88 5 6.5C5 5.12 6.12 4 7.5 4C8.88 4 10 5.12 10 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9H16.5C17.88 9 19 7.88 19 6.5C19 5.12 17.88 4 16.5 4C15.12 4 14 5.12 14 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H7.5C6.12 15 5 16.12 5 17.5C5 18.88 6.12 20 7.5 20C8.88 20 10 18.88 10 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 15H16.5C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20C15.12 20 14 18.88 14 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check'\">\n      <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M8.5 12.2L11 14.7L15.8 9.9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'dot'\">\n      <circle cx=\"12\" cy=\"12\" r=\"2.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'x'\">\n      <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'alert-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 8V12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'info'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 11V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'loader-2'\">\n      <path d=\"M12 3A9 9 0 1 0 21 12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'menu'\">\n      <path d=\"M4 7H20M4 12H20M4 17H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'search'\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'calendar'\">\n      <path d=\"M8 3V6M16 3V6M4 10H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <rect x=\"4\" y=\"6\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'panel-left'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'monitor'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M8 20H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M12 17V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'laptop'\">\n      <rect x=\"5\" y=\"5\" width=\"14\" height=\"10\" rx=\"1.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 18H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sun'\">\n      <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'moon'\">\n      <path d=\"M20 14.5C19.1 17.9 16 20.5 12.3 20.5C7.9 20.5 4.3 16.9 4.3 12.5C4.3 8.8 6.8 5.8 10.2 4.8C9.6 5.8 9.3 7 9.3 8.2C9.3 11.8 12.2 14.7 15.8 14.7C17 14.7 18.1 14.4 19.1 13.8C19.4 13.6 20.1 14 20 14.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-down'\">\n      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-up'\">\n      <path d=\"M17 14L12 9L7 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-left'\">\n      <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-right'\">\n      <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-left'\">\n      <path d=\"M14 18L8 12L14 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M20 18L14 12L20 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-right'\">\n      <path d=\"M10 18L16 12L10 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M4 18L10 12L4 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-up-down'\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-down'\">\n      <path d=\"M12 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 8L12 4L16 8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M8 16L12 20L16 16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'ellipsis'\">\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    </g>\n\n    <g *ngSwitchCase=\"'filter'\">\n      <path d=\"M4 6H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 12H17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 18H14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-asc'\">\n      <path d=\"M7 18V6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 9L7 6L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H20M14 12H18M14 16H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-desc'\">\n      <path d=\"M7 6V18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 15L7 18L10 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H16M14 12H18M14 16H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'plus'\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'minus'\">\n      <path d=\"M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'copy'\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'pencil'\">\n      <path d=\"M12 20H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M16.5 4.5C17.1 3.9 18 3.9 18.6 4.5L19.5 5.4C20.1 6 20.1 6.9 19.5 7.5L9 18L4 19L5 14L16.5 4.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'trash-2'\">\n      <path d=\"M4 7H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7V5C9 4.4 9.4 4 10 4H14C14.6 4 15 4.4 15 5V7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 7L8 19C8 19.6 8.4 20 9 20H15C15.6 20 16 19.6 16 19L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'download'\">\n      <path d=\"M12 4V14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 10L12 14L16 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 19H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'upload'\">\n      <path d=\"M12 20V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 14L12 10L16 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 5H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'home'\">\n      <path d=\"M4 10.5L12 4L20 10.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M6 9.5V20H18V9.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'mail'\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M4 7L12 13L20 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'phone'\">\n      <path d=\"M8.8 4.6C9.2 3.8 10.2 3.5 11 4L13.3 5.2C14.1 5.6 14.4 6.6 14 7.4L13 9.2C12.8 9.6 12.9 10.1 13.2 10.4L14.9 12.1C15.2 12.4 15.7 12.5 16.1 12.3L17.9 11.3C18.7 10.9 19.7 11.2 20.1 12L21.3 14.3C21.8 15.1 21.5 16.1 20.7 16.5L18.8 17.5C16.9 18.5 14.5 18.1 12.9 16.5L7.5 11.1C5.9 9.5 5.5 7.1 6.5 5.2L8.8 4.6Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-in'\">\n      <path d=\"M15 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 17L14 13L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 13H4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-out'\">\n      <path d=\"M9 3H6C4.9 3 4 3.9 4 5V19C4 20.1 4.9 21 6 21H9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M14 17L10 13L14 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 13H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'user'\">\n      <circle cx=\"12\" cy=\"8\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M6 19C6.8 16.7 8.9 15.5 12 15.5C15.1 15.5 17.2 16.7 18 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'settings'\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M19 12A7 7 0 1 0 12 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'credit-card'\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 10H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'smile'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M9 15C9.7 16 10.7 16.5 12 16.5C13.3 16.5 14.3 16 15 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"9\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n      <circle cx=\"15\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'calculator'\">\n      <rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 7H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 12H10M14 12H15M9 16H10M14 16H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'external-link'\">\n      <path d=\"M14 5H19V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 14L19 5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M19 14V19H5V5H10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'folder'\">\n      <path d=\"M3 7C3 5.9 3.9 5 5 5H9L11 7H19C20.1 7 21 7.9 21 9V17C21 18.1 20.1 19 19 19H5C3.9 19 3 18.1 3 17V7Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-right'\">\n      <path d=\"M7 17L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7H17V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchDefault>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n    </ng-container>\n  </svg>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+PdmIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmIconComponent, selector: "pdm-icon", inputs: { name: "name", library: "library", assetUrl: "assetUrl", size: "size", strokeWidth: "strokeWidth", className: "className", ariaLabel: "ariaLabel", decorative: "decorative" }, ngImport: i0, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\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: PdmIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"size\"\n    [style.height.px]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <svg\n    [attr.width]=\"size\"\n    [attr.height]=\"size\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <ng-container [ngSwitch]=\"iconKey\">\n    <g *ngSwitchCase=\"'command'\">\n      <path d=\"M9 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 9H7.5C6.12 9 5 7.88 5 6.5C5 5.12 6.12 4 7.5 4C8.88 4 10 5.12 10 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 9H16.5C17.88 9 19 7.88 19 6.5C19 5.12 17.88 4 16.5 4C15.12 4 14 5.12 14 6.5V8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 15H7.5C6.12 15 5 16.12 5 17.5C5 18.88 6.12 20 7.5 20C8.88 20 10 18.88 10 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M15 15H16.5C17.88 15 19 16.12 19 17.5C19 18.88 17.88 20 16.5 20C15.12 20 14 18.88 14 17.5V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check'\">\n      <path d=\"M5 12.5L9.2 16.7L19 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'check-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M8.5 12.2L11 14.7L15.8 9.9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'dot'\">\n      <circle cx=\"12\" cy=\"12\" r=\"2.5\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'x'\">\n      <path d=\"M6 6L18 18M18 6L6 18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'alert-circle'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 8V12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'info'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 11V16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"12\" cy=\"8\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'loader-2'\">\n      <path d=\"M12 3A9 9 0 1 0 21 12\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'menu'\">\n      <path d=\"M4 7H20M4 12H20M4 17H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'search'\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M20 20L16.6 16.6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'calendar'\">\n      <path d=\"M8 3V6M16 3V6M4 10H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <rect x=\"4\" y=\"6\" width=\"16\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'panel-left'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'monitor'\">\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"13\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M8 20H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M12 17V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'laptop'\">\n      <rect x=\"5\" y=\"5\" width=\"14\" height=\"10\" rx=\"1.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 18H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sun'\">\n      <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M12 2V4M12 20V22M4 12H2M22 12H20M19.07 4.93L17.66 6.34M6.34 17.66L4.93 19.07M19.07 19.07L17.66 17.66M6.34 6.34L4.93 4.93\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'moon'\">\n      <path d=\"M20 14.5C19.1 17.9 16 20.5 12.3 20.5C7.9 20.5 4.3 16.9 4.3 12.5C4.3 8.8 6.8 5.8 10.2 4.8C9.6 5.8 9.3 7 9.3 8.2C9.3 11.8 12.2 14.7 15.8 14.7C17 14.7 18.1 14.4 19.1 13.8C19.4 13.6 20.1 14 20 14.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-down'\">\n      <path d=\"M7 10L12 15L17 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-up'\">\n      <path d=\"M17 14L12 9L7 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-left'\">\n      <path d=\"M15 18L9 12L15 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevron-right'\">\n      <path d=\"M9 18L15 12L9 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-left'\">\n      <path d=\"M14 18L8 12L14 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M20 18L14 12L20 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-right'\">\n      <path d=\"M10 18L16 12L10 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M4 18L10 12L4 6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'chevrons-up-down'\">\n      <path d=\"M7 15L12 20L17 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M17 9L12 4L7 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-down'\">\n      <path d=\"M12 4V20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 8L12 4L16 8\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M8 16L12 20L16 16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'ellipsis'\">\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    </g>\n\n    <g *ngSwitchCase=\"'filter'\">\n      <path d=\"M4 6H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 12H17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 18H14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-asc'\">\n      <path d=\"M7 18V6\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 9L7 6L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H20M14 12H18M14 16H16\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'sort-desc'\">\n      <path d=\"M7 6V18\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M4 15L7 18L10 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 8H16M14 12H18M14 16H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'plus'\">\n      <path d=\"M12 5V19M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'minus'\">\n      <path d=\"M5 12H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'copy'\">\n      <rect x=\"9\" y=\"9\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <rect x=\"4\" y=\"4\" width=\"11\" height=\"11\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n    </g>\n\n    <g *ngSwitchCase=\"'pencil'\">\n      <path d=\"M12 20H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M16.5 4.5C17.1 3.9 18 3.9 18.6 4.5L19.5 5.4C20.1 6 20.1 6.9 19.5 7.5L9 18L4 19L5 14L16.5 4.5Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'trash-2'\">\n      <path d=\"M4 7H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7V5C9 4.4 9.4 4 10 4H14C14.6 4 15 4.4 15 5V7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M7 7L8 19C8 19.6 8.4 20 9 20H15C15.6 20 16 19.6 16 19L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 11V17M14 11V17\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'download'\">\n      <path d=\"M12 4V14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 10L12 14L16 10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 19H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'upload'\">\n      <path d=\"M12 20V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M8 14L12 10L16 14\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M5 5H19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'home'\">\n      <path d=\"M4 10.5L12 4L20 10.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M6 9.5V20H18V9.5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'mail'\">\n      <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M4 7L12 13L20 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'phone'\">\n      <path d=\"M8.8 4.6C9.2 3.8 10.2 3.5 11 4L13.3 5.2C14.1 5.6 14.4 6.6 14 7.4L13 9.2C12.8 9.6 12.9 10.1 13.2 10.4L14.9 12.1C15.2 12.4 15.7 12.5 16.1 12.3L17.9 11.3C18.7 10.9 19.7 11.2 20.1 12L21.3 14.3C21.8 15.1 21.5 16.1 20.7 16.5L18.8 17.5C16.9 18.5 14.5 18.1 12.9 16.5L7.5 11.1C5.9 9.5 5.5 7.1 6.5 5.2L8.8 4.6Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-in'\">\n      <path d=\"M15 3H18C19.1 3 20 3.9 20 5V19C20 20.1 19.1 21 18 21H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M10 17L14 13L10 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M14 13H4\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'log-out'\">\n      <path d=\"M9 3H6C4.9 3 4 3.9 4 5V19C4 20.1 4.9 21 6 21H9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M14 17L10 13L14 9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 13H20\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'user'\">\n      <circle cx=\"12\" cy=\"8\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M6 19C6.8 16.7 8.9 15.5 12 15.5C15.1 15.5 17.2 16.7 18 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'settings'\">\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M19 12A7 7 0 1 0 12 19\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'credit-card'\">\n      <rect x=\"3\" y=\"6\" width=\"18\" height=\"12\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M3 10H21\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'smile'\">\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n      <path d=\"M9 15C9.7 16 10.7 16.5 12 16.5C13.3 16.5 14.3 16 15 15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <circle cx=\"9\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n      <circle cx=\"15\" cy=\"10\" r=\"1\" fill=\"currentColor\"></circle>\n    </g>\n\n    <g *ngSwitchCase=\"'calculator'\">\n      <rect x=\"6\" y=\"3\" width=\"12\" height=\"18\" rx=\"2\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></rect>\n      <path d=\"M9 7H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 12H10M14 12H15M9 16H10M14 16H15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'external-link'\">\n      <path d=\"M14 5H19V10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n      <path d=\"M10 14L19 5\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M19 14V19H5V5H10\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'folder'\">\n      <path d=\"M3 7C3 5.9 3.9 5 5 5H9L11 7H19C20.1 7 21 7.9 21 9V17C21 18.1 20.1 19 19 19H5C3.9 19 3 18.1 3 17V7Z\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchCase=\"'arrow-up-right'\">\n      <path d=\"M7 17L17 7\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\"></path>\n      <path d=\"M9 7H17V15\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\" stroke-linecap=\"round\" stroke-linejoin=\"round\"></path>\n    </g>\n\n    <g *ngSwitchDefault>\n      <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" [attr.stroke-width]=\"resolvedStrokeWidth\"></circle>\n    </g>\n    </ng-container>\n  </svg>\n</ng-template>\n" }]
-        }], propDecorators: { name: [{
+            args: [{ selector: 'pdm-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"assetUrl; else inlineIcon\">\n  <img\n    [src]=\"assetUrl\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [ngClass]=\"className\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    alt=\"\"\n  />\n</ng-container>\n\n<ng-template #inlineIcon>\n  <span\n    [ngClass]=\"className\"\n    [style.display]=\"'inline-flex'\"\n    [style.align-items]=\"'center'\"\n    [style.justify-content]=\"'center'\"\n    [style.line-height]=\"0\"\n    [style.width.px]=\"resolvedSize\"\n    [style.height.px]=\"resolvedSize\"\n    [attr.role]=\"decorative ? null : 'img'\"\n    [attr.aria-hidden]=\"decorative ? 'true' : null\"\n    [attr.aria-label]=\"!decorative ? ariaLabel || name : null\"\n    [innerHTML]=\"svgMarkup\"\n  ></span>\n</ng-template>\n" }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { name: [{
                 type: Input
             }], library: [{
                 type: Input
@@ -2749,17 +2799,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 {