pdm-ui-kit 0.1.19 → 0.1.21

package/fesm2020/pdm-ui-kit.mjs

@@ -2,6 +2,8 @@ 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, ViewChild, NgModule } from '@angular/core';
+import { icons } from 'lucide';
+import * as i1$1 from '@angular/platform-browser';
 
 class PdmAccordionComponent {
     constructor() {
@@ -388,23 +390,40 @@ class PdmButtonComponent {
     get isDisabled() {
         return this.disabled || this.loading || this.variant === 'loading';
     }
+    get resolvedVariant() {
+        return this.isValidVariant(this.variant) ? this.variant : 'default';
+    }
+    get resolvedState() {
+        return this.state === 'hover' ? 'hover' : 'default';
+    }
+    get resolvedSize() {
+        if (this.size === 'small' || this.size === 'large') {
+            return this.size;
+        }
+        return 'default';
+    }
+    get showsIconSlot() {
+        const variant = this.resolvedVariant;
+        return variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded';
+    }
     get rootClasses() {
-        const currentState = this.state === 'hover' ? 'hover' : 'default';
-        const toneClass = this.toneClassMap[this.variant][currentState];
+        const currentState = this.resolvedState;
+        const variant = this.resolvedVariant;
+        const toneClass = this.toneClassMap[variant][currentState];
         return [
             'inline-flex items-center justify-center gap-2 rounded-md border text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-clip-padding',
-            this.variant === 'link' ? 'px-4 py-2 h-9' : '',
-            this.variant === 'icon' ? 'h-9 w-9 p-0' : '',
-            this.variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
-            this.variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
-            this.variant !== 'icon' && this.variant !== 'icon-circle' && this.variant !== 'rounded'
-                ? this.size === 'small'
+            variant === 'link' ? 'px-4 py-2 h-9' : '',
+            variant === 'icon' ? 'h-9 w-9 p-0' : '',
+            variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
+            variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
+            variant !== 'icon' && variant !== 'icon-circle' && variant !== 'rounded'
+                ? this.resolvedSize === 'small'
                     ? 'h-8 px-3 text-xs'
-                    : this.size === 'large'
+                    : this.resolvedSize === 'large'
                         ? 'h-10 px-8'
                         : 'h-9 px-4'
                 : '',
-            this.variant === 'link' && this.state === 'hover' ? 'underline underline-offset-4' : '',
+            variant === 'link' && currentState === 'hover' ? 'underline underline-offset-4' : '',
             toneClass,
             this.className
         ];
@@ -414,12 +433,27 @@ class PdmButtonComponent {
             this.pressed.emit(event);
         }
     }
+    isValidVariant(value) {
+        return (value === 'default' ||
+            value === 'primary' ||
+            value === 'destructive' ||
+            value === 'outline' ||
+            value === 'subtle' ||
+            value === 'secondary' ||
+            value === 'ghost' ||
+            value === 'link' ||
+            value === 'with-icon' ||
+            value === 'icon' ||
+            value === 'icon-circle' ||
+            value === 'rounded' ||
+            value === 'loading');
+    }
 }
 PdmButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\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 });
+PdmButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PdmButtonComponent, selector: "pdm-button", inputs: { type: "type", variant: "variant", state: "state", size: "size", disabled: "disabled", loading: "loading", className: "className" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\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: PdmButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded'\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
+            args: [{ selector: 'pdm-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [type]=\"type\"\n  [disabled]=\"isDisabled\"\n  [attr.aria-busy]=\"loading\"\n  [ngClass]=\"rootClasses\"\n  (click)=\"onClick($event)\"\n>\n  <span\n    *ngIf=\"loading\"\n    class=\"inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-r-transparent\"\n    aria-hidden=\"true\"\n  ></span>\n  <ng-content select=\"[pdmButtonIcon]\" *ngIf=\"showsIconSlot\"></ng-content>\n  <ng-content></ng-content>\n</button>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }], variant: [{
@@ -973,8 +1007,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 +1019,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 +1061,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 +1073,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 +1086,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", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\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", styles: [":host{display:inline-flex;align-items:center;justify-content:center;line-height:0;flex-shrink:0}:host svg{display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { name: [{
                 type: Input
             }], library: [{
                 type: Input