pdm-ui-kit 0.1.19 → 0.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/components/button/button.component.mjs +45 -13
- package/esm2020/lib/components/icon/icon.component.mjs +70 -20
- package/fesm2015/pdm-ui-kit.mjs +114 -30
- package/fesm2015/pdm-ui-kit.mjs.map +1 -1
- package/fesm2020/pdm-ui-kit.mjs +112 -30
- package/fesm2020/pdm-ui-kit.mjs.map +1 -1
- package/lib/components/button/button.component.d.ts +8 -3
- package/lib/components/icon/icon.component.d.ts +11 -1
- package/package.json +4 -2
package/fesm2015/pdm-ui-kit.mjs
CHANGED
|
@@ -2,6 +2,8 @@ import * as i1 from '@angular/common';
|
|
|
2
2
|
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, HostListener, ViewChildren, ViewChild, NgModule } from '@angular/core';
|
|
5
|
+
import { icons } from 'lucide';
|
|
6
|
+
import * as i1$1 from '@angular/platform-browser';
|
|
5
7
|
|
|
6
8
|
class PdmAccordionComponent {
|
|
7
9
|
constructor() {
|
|
@@ -390,23 +392,40 @@ class PdmButtonComponent {
|
|
|
390
392
|
get isDisabled() {
|
|
391
393
|
return this.disabled || this.loading || this.variant === 'loading';
|
|
392
394
|
}
|
|
395
|
+
get resolvedVariant() {
|
|
396
|
+
return this.isValidVariant(this.variant) ? this.variant : 'default';
|
|
397
|
+
}
|
|
398
|
+
get resolvedState() {
|
|
399
|
+
return this.state === 'hover' ? 'hover' : 'default';
|
|
400
|
+
}
|
|
401
|
+
get resolvedSize() {
|
|
402
|
+
if (this.size === 'small' || this.size === 'large') {
|
|
403
|
+
return this.size;
|
|
404
|
+
}
|
|
405
|
+
return 'default';
|
|
406
|
+
}
|
|
407
|
+
get showsIconSlot() {
|
|
408
|
+
const variant = this.resolvedVariant;
|
|
409
|
+
return variant === 'with-icon' || variant === 'icon' || variant === 'icon-circle' || variant === 'rounded';
|
|
410
|
+
}
|
|
393
411
|
get rootClasses() {
|
|
394
|
-
const currentState = this.
|
|
395
|
-
const
|
|
412
|
+
const currentState = this.resolvedState;
|
|
413
|
+
const variant = this.resolvedVariant;
|
|
414
|
+
const toneClass = this.toneClassMap[variant][currentState];
|
|
396
415
|
return [
|
|
397
416
|
'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',
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
? this.
|
|
417
|
+
variant === 'link' ? 'px-4 py-2 h-9' : '',
|
|
418
|
+
variant === 'icon' ? 'h-9 w-9 p-0' : '',
|
|
419
|
+
variant === 'icon-circle' ? 'h-10 w-10 rounded-full p-0' : '',
|
|
420
|
+
variant === 'rounded' ? 'h-9 w-9 rounded-full p-0' : '',
|
|
421
|
+
variant !== 'icon' && variant !== 'icon-circle' && variant !== 'rounded'
|
|
422
|
+
? this.resolvedSize === 'small'
|
|
404
423
|
? 'h-8 px-3 text-xs'
|
|
405
|
-
: this.
|
|
424
|
+
: this.resolvedSize === 'large'
|
|
406
425
|
? 'h-10 px-8'
|
|
407
426
|
: 'h-9 px-4'
|
|
408
427
|
: '',
|
|
409
|
-
|
|
428
|
+
variant === 'link' && currentState === 'hover' ? 'underline underline-offset-4' : '',
|
|
410
429
|
toneClass,
|
|
411
430
|
this.className
|
|
412
431
|
];
|
|
@@ -416,12 +435,27 @@ class PdmButtonComponent {
|
|
|
416
435
|
this.pressed.emit(event);
|
|
417
436
|
}
|
|
418
437
|
}
|
|
438
|
+
isValidVariant(value) {
|
|
439
|
+
return (value === 'default' ||
|
|
440
|
+
value === 'primary' ||
|
|
441
|
+
value === 'destructive' ||
|
|
442
|
+
value === 'outline' ||
|
|
443
|
+
value === 'subtle' ||
|
|
444
|
+
value === 'secondary' ||
|
|
445
|
+
value === 'ghost' ||
|
|
446
|
+
value === 'link' ||
|
|
447
|
+
value === 'with-icon' ||
|
|
448
|
+
value === 'icon' ||
|
|
449
|
+
value === 'icon-circle' ||
|
|
450
|
+
value === 'rounded' ||
|
|
451
|
+
value === 'loading');
|
|
452
|
+
}
|
|
419
453
|
}
|
|
420
454
|
PdmButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
421
|
-
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=\"
|
|
455
|
+
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 });
|
|
422
456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmButtonComponent, decorators: [{
|
|
423
457
|
type: Component,
|
|
424
|
-
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=\"
|
|
458
|
+
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" }]
|
|
425
459
|
}], propDecorators: { type: [{
|
|
426
460
|
type: Input
|
|
427
461
|
}], variant: [{
|
|
@@ -976,8 +1010,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
976
1010
|
type: Output
|
|
977
1011
|
}] } });
|
|
978
1012
|
|
|
1013
|
+
const FALLBACK_NODE = [['circle', { cx: '12', cy: '12', r: '9' }]];
|
|
979
1014
|
class PdmIconComponent {
|
|
980
|
-
constructor() {
|
|
1015
|
+
constructor(sanitizer) {
|
|
1016
|
+
this.sanitizer = sanitizer;
|
|
981
1017
|
this.name = 'check';
|
|
982
1018
|
this.library = 'lucide';
|
|
983
1019
|
this.assetUrl = null;
|
|
@@ -986,34 +1022,39 @@ class PdmIconComponent {
|
|
|
986
1022
|
this.className = '';
|
|
987
1023
|
this.ariaLabel = null;
|
|
988
1024
|
this.decorative = false;
|
|
1025
|
+
this.lucideIndex = this.buildLucideIndex();
|
|
989
1026
|
this.aliasMapByLibrary = {
|
|
990
|
-
lucide: {
|
|
1027
|
+
lucide: {
|
|
1028
|
+
'check-circle': 'circle-check',
|
|
1029
|
+
'alert-circle': 'circle-alert',
|
|
1030
|
+
info: 'circle-info',
|
|
1031
|
+
'sort-asc': 'arrow-up-a-z',
|
|
1032
|
+
'sort-desc': 'arrow-down-z-a'
|
|
1033
|
+
},
|
|
991
1034
|
tabler: {
|
|
992
|
-
'alert-triangle': 'alert
|
|
993
|
-
'
|
|
994
|
-
'
|
|
995
|
-
'user-circle': 'user',
|
|
996
|
-
'settings-2': 'settings',
|
|
1035
|
+
'alert-triangle': 'triangle-alert',
|
|
1036
|
+
'user-circle': 'circle-user',
|
|
1037
|
+
'settings-2': 'settings-2',
|
|
997
1038
|
'external-link': 'external-link'
|
|
998
1039
|
},
|
|
999
1040
|
hugeicons: {
|
|
1000
|
-
'alert-02': 'alert
|
|
1001
|
-
'user-circle': 'user',
|
|
1041
|
+
'alert-02': 'circle-alert',
|
|
1042
|
+
'user-circle': 'circle-user',
|
|
1002
1043
|
'search-01': 'search',
|
|
1003
1044
|
'settings-01': 'settings',
|
|
1004
1045
|
'arrow-right-01': 'chevron-right',
|
|
1005
1046
|
'arrow-down-01': 'chevron-down'
|
|
1006
1047
|
},
|
|
1007
1048
|
phosphor: {
|
|
1008
|
-
'warning-circle': 'alert
|
|
1049
|
+
'warning-circle': 'circle-alert',
|
|
1009
1050
|
'caret-down': 'chevron-down',
|
|
1010
1051
|
'caret-right': 'chevron-right',
|
|
1011
|
-
'user-circle': 'user',
|
|
1052
|
+
'user-circle': 'circle-user',
|
|
1012
1053
|
gear: 'settings',
|
|
1013
1054
|
'arrow-square-out': 'external-link'
|
|
1014
1055
|
},
|
|
1015
1056
|
remix: {
|
|
1016
|
-
'alert-line': 'alert
|
|
1057
|
+
'alert-line': 'circle-alert',
|
|
1017
1058
|
'arrow-right-line': 'chevron-right',
|
|
1018
1059
|
'arrow-down-s-line': 'chevron-down',
|
|
1019
1060
|
'external-link-line': 'external-link',
|
|
@@ -1023,8 +1064,9 @@ class PdmIconComponent {
|
|
|
1023
1064
|
};
|
|
1024
1065
|
}
|
|
1025
1066
|
get resolvedStrokeWidth() {
|
|
1026
|
-
|
|
1027
|
-
|
|
1067
|
+
const value = Number(this.strokeWidth);
|
|
1068
|
+
if (Number.isFinite(value) && value > 0) {
|
|
1069
|
+
return value;
|
|
1028
1070
|
}
|
|
1029
1071
|
if (this.library === 'phosphor') {
|
|
1030
1072
|
return 1.6;
|
|
@@ -1034,6 +1076,10 @@ class PdmIconComponent {
|
|
|
1034
1076
|
}
|
|
1035
1077
|
return 1.5;
|
|
1036
1078
|
}
|
|
1079
|
+
get resolvedSize() {
|
|
1080
|
+
const value = Number(this.size);
|
|
1081
|
+
return Number.isFinite(value) && value > 0 ? value : 16;
|
|
1082
|
+
}
|
|
1037
1083
|
get iconKey() {
|
|
1038
1084
|
var _a, _b;
|
|
1039
1085
|
const raw = `${this.name || ''}`.trim();
|
|
@@ -1044,13 +1090,51 @@ class PdmIconComponent {
|
|
|
1044
1090
|
const aliases = (_a = this.aliasMapByLibrary[this.library]) !== null && _a !== void 0 ? _a : {};
|
|
1045
1091
|
return (_b = aliases[trimmed]) !== null && _b !== void 0 ? _b : trimmed;
|
|
1046
1092
|
}
|
|
1093
|
+
get svgMarkup() {
|
|
1094
|
+
var _a;
|
|
1095
|
+
const node = (_a = this.resolveIconNode(this.iconKey)) !== null && _a !== void 0 ? _a : FALLBACK_NODE;
|
|
1096
|
+
const strokeWidth = this.escapeAttr(this.resolvedStrokeWidth);
|
|
1097
|
+
const size = this.escapeAttr(this.resolvedSize);
|
|
1098
|
+
const body = node
|
|
1099
|
+
.map(([tag, attrs]) => {
|
|
1100
|
+
const serializedAttrs = Object.entries(attrs)
|
|
1101
|
+
.map(([key, value]) => `${key}="${this.escapeAttr(value)}"`)
|
|
1102
|
+
.join(' ');
|
|
1103
|
+
return serializedAttrs ? `<${tag} ${serializedAttrs}></${tag}>` : `<${tag}></${tag}>`;
|
|
1104
|
+
})
|
|
1105
|
+
.join('');
|
|
1106
|
+
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>`;
|
|
1107
|
+
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
1108
|
+
}
|
|
1109
|
+
resolveIconNode(iconName) {
|
|
1110
|
+
var _a;
|
|
1111
|
+
const normalized = this.normalizeIconName(iconName);
|
|
1112
|
+
return (_a = this.lucideIndex.get(normalized)) !== null && _a !== void 0 ? _a : null;
|
|
1113
|
+
}
|
|
1114
|
+
normalizeIconName(name) {
|
|
1115
|
+
return `${name || ''}`.toLowerCase().replace(/[^a-z0-9]/g, '');
|
|
1116
|
+
}
|
|
1117
|
+
buildLucideIndex() {
|
|
1118
|
+
const map = new Map();
|
|
1119
|
+
Object.entries(icons).forEach(([iconName, iconNode]) => {
|
|
1120
|
+
map.set(this.normalizeIconName(iconName), iconNode);
|
|
1121
|
+
});
|
|
1122
|
+
return map;
|
|
1123
|
+
}
|
|
1124
|
+
escapeAttr(value) {
|
|
1125
|
+
return `${value !== null && value !== void 0 ? value : ''}`
|
|
1126
|
+
.replace(/&/g, '&')
|
|
1127
|
+
.replace(/"/g, '"')
|
|
1128
|
+
.replace(/</g, '<')
|
|
1129
|
+
.replace(/>/g, '>');
|
|
1130
|
+
}
|
|
1047
1131
|
}
|
|
1048
|
-
PdmIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1049
|
-
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 });
|
|
1132
|
+
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 });
|
|
1133
|
+
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 });
|
|
1050
1134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PdmIconComponent, decorators: [{
|
|
1051
1135
|
type: Component,
|
|
1052
|
-
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" }]
|
|
1053
|
-
}], propDecorators: { name: [{
|
|
1136
|
+
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"] }]
|
|
1137
|
+
}], ctorParameters: function () { return [{ type: i1$1.DomSanitizer }]; }, propDecorators: { name: [{
|
|
1054
1138
|
type: Input
|
|
1055
1139
|
}], library: [{
|
|
1056
1140
|
type: Input
|