pdm-ui-kit 0.1.2 → 0.1.4

package/src/lib/components/dropdown-menu/dropdown-menu.component.ts

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core';
+
+export type PdmDropdownMenuVariant = 'default' | 'checkboxes' | 'radio-group';
+
+export interface PdmMenuItem {
+  type?: 'item' | 'label' | 'separator';
+  label?: string;
+  value?: string;
+  shortcut?: string;
+  disabled?: boolean;
+  inset?: boolean;
+  showChevron?: boolean;
+  checked?: boolean;
+  radioSelected?: boolean;
+}
+
+@Component({
+  selector: 'pdm-dropdown-menu',
+  templateUrl: './dropdown-menu.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmDropdownMenuComponent {
+  @Input() triggerText = 'Open';
+  @Input() variant: PdmDropdownMenuVariant = 'default';
+  @Input() items: PdmMenuItem[] = [];
+  @Input() closeOnSelect = true;
+  @Input() panelClassName = '';
+  @Input() className = '';
+
+  @Output() itemSelect = new EventEmitter<string>();
+  @Output() itemsChange = new EventEmitter<PdmMenuItem[]>();
+
+  open = false;
+
+  constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+  toggle(): void {
+    this.open = !this.open;
+  }
+
+  get resolvedItems(): PdmMenuItem[] {
+    if (this.items.length) {
+      return this.items;
+    }
+
+    if (this.variant === 'checkboxes') {
+      return [
+        { type: 'label', label: 'Appearance' },
+        { type: 'separator' },
+        { type: 'item', label: 'Status Bar', value: 'status-bar', checked: true },
+        { type: 'item', label: 'Activity Bar', value: 'activity-bar', checked: false },
+        { type: 'item', label: 'Panel', value: 'panel', checked: false }
+      ];
+    }
+
+    if (this.variant === 'radio-group') {
+      return [
+        { type: 'label', label: 'Panel Position' },
+        { type: 'separator' },
+        { type: 'item', label: 'Top', value: 'top', radioSelected: true },
+        { type: 'item', label: 'Bottom', value: 'bottom', radioSelected: false },
+        { type: 'item', label: 'Right', value: 'right', radioSelected: false }
+      ];
+    }
+
+    return [
+      { type: 'label', label: 'My Account', inset: true },
+      { type: 'separator' },
+      { type: 'item', label: 'Profile', value: 'profile', shortcut: '⇧⌘P' },
+      { type: 'item', label: 'Billing', value: 'billing', shortcut: '⌘B' },
+      { type: 'item', label: 'Settings', value: 'settings', shortcut: '⌘S' },
+      { type: 'item', label: 'Keyboard shortcuts', value: 'shortcuts', shortcut: '⌘K' },
+      { type: 'separator' },
+      { type: 'item', label: 'Team', value: 'team' },
+      { type: 'item', label: 'Invite users', value: 'invite', showChevron: true },
+      { type: 'item', label: 'New Team', value: 'new-team', shortcut: '⌘+T' },
+      { type: 'separator' },
+      { type: 'item', label: 'GitHub', value: 'github' },
+      { type: 'item', label: 'Support', value: 'support' },
+      { type: 'item', label: 'API', value: 'api', disabled: true },
+      { type: 'separator' },
+      { type: 'item', label: 'Log out', value: 'logout', shortcut: '⇧⌘Q' }
+    ];
+  }
+
+  select(item: PdmMenuItem): void {
+    if (item.disabled || item.type === 'separator' || item.type === 'label' || !item.value) return;
+
+    if (this.variant === 'checkboxes') {
+      const updated = this.resolvedItems.map((entry) =>
+        entry.value === item.value ? { ...entry, checked: !entry.checked } : entry
+      );
+      this.itemsChange.emit(updated);
+    }
+
+    if (this.variant === 'radio-group') {
+      const updated = this.resolvedItems.map((entry) =>
+        entry.type === 'item'
+          ? { ...entry, radioSelected: entry.value === item.value }
+          : entry
+      );
+      this.itemsChange.emit(updated);
+    }
+
+    this.itemSelect.emit(item.value);
+
+    const shouldClose = this.variant === 'default' ? this.closeOnSelect : false;
+    if (shouldClose) {
+      this.open = false;
+    }
+  }
+
+  @HostListener('document:keydown.escape')
+  onEsc(): void {
+    this.open = false;
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (!this.open) return;
+    const target = event.target as Node | null;
+    if (target && !this.elementRef.nativeElement.contains(target)) {
+      this.open = false;
+    }
+  }
+}

package/src/lib/components/empty/empty.component.html

@@ -0,0 +1,29 @@
+<section [ngClass]="['flex flex-col items-center justify-center gap-4 px-6 py-10 text-center text-[hsl(var(--foreground))]', containerClass, className]">
+  <div class="flex h-10 w-10 items-center justify-center rounded-[10px] bg-[hsl(var(--muted))] text-[hsl(var(--muted-foreground))]">
+    <pdm-icon [name]="iconName" [size]="20"></pdm-icon>
+  </div>
+
+  <div class="space-y-2">
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
+    <p class="mx-auto max-w-[420px] text-sm leading-relaxed text-[hsl(var(--muted-foreground))]">
+      {{ description }}
+    </p>
+  </div>
+
+  <div *ngIf="primaryActionLabel || secondaryActionLabel" class="mt-1 flex flex-wrap items-center justify-center gap-3">
+    <pdm-button *ngIf="primaryActionLabel" variant="default" (pressed)="primaryAction.emit()">{{ primaryActionLabel }}</pdm-button>
+    <pdm-button *ngIf="secondaryActionLabel" variant="outline" (pressed)="secondaryAction.emit()">{{ secondaryActionLabel }}</pdm-button>
+  </div>
+
+  <button
+    *ngIf="linkLabel"
+    type="button"
+    class="mt-1 inline-flex items-center gap-2 text-[15px] font-medium text-[hsl(var(--muted-foreground))] underline-offset-4 hover:underline"
+    (click)="linkAction.emit()"
+  >
+    <span>{{ linkLabel }}</span>
+    <pdm-icon name="arrow-up-right" [size]="16"></pdm-icon>
+  </button>
+
+  <ng-content></ng-content>
+</section>

package/src/lib/components/empty/empty.component.ts

@@ -0,0 +1,35 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+export type PdmEmptyVariant = 'default' | 'outline' | 'background';
+
+@Component({
+  selector: 'pdm-empty',
+  templateUrl: './empty.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmEmptyComponent {
+  @Input() variant: PdmEmptyVariant = 'default';
+  @Input() title = 'No Projects Yet';
+  @Input() description = "You haven't created any projects yet. Get started by creating your first project.";
+  @Input() iconName = 'folder';
+  @Input() primaryActionLabel = '';
+  @Input() secondaryActionLabel = '';
+  @Input() linkLabel = '';
+  @Input() className = '';
+
+  @Output() primaryAction = new EventEmitter<void>();
+  @Output() secondaryAction = new EventEmitter<void>();
+  @Output() linkAction = new EventEmitter<void>();
+
+  get containerClass(): string {
+    if (this.variant === 'outline') {
+      return 'border border-dashed border-[hsl(var(--border))] rounded-[12px]';
+    }
+
+    if (this.variant === 'background') {
+      return 'rounded-[12px] bg-[hsl(var(--muted))]';
+    }
+
+    return '';
+  }
+}

package/src/lib/components/field/field.component.html

@@ -0,0 +1,26 @@
+<div [ngClass]="[rootClass, className]">
+  <div [ngClass]="[isHorizontal ? 'grid gap-1.5' : 'grid gap-0']">
+    <label
+      *ngIf="label"
+      [attr.for]="id"
+      [ngClass]="['text-sm font-medium leading-5 text-[hsl(var(--foreground))]', disabled ? 'opacity-70' : '', labelClassName]"
+    >
+      {{ label }}
+      <span *ngIf="required" class="text-[hsl(var(--destructive))]">*</span>
+    </label>
+
+    <p *ngIf="isHorizontal && description && !invalid" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
+    <p *ngIf="isHorizontal && invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
+  </div>
+
+  <div [ngClass]="['grid gap-3', controlClassName]">
+    <p *ngIf="showDescriptionBeforeControl" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
+
+    <ng-content></ng-content>
+    <ng-content select="[pdmFieldControl]"></ng-content>
+
+    <p *ngIf="showDescriptionAfterControl" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
+    <p *ngIf="!isHorizontal && invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
+    <ng-content select="[pdmFieldDescription]"></ng-content>
+  </div>
+</div>

package/src/lib/components/field/field.component.ts

@@ -0,0 +1,42 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmFieldOrientation = 'vertical' | 'horizontal';
+export type PdmFieldDescriptionPosition = 'before' | 'after';
+
+@Component({
+  selector: 'pdm-field',
+  templateUrl: './field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmFieldComponent {
+  @Input() id = '';
+  @Input() label = '';
+  @Input() description = '';
+  @Input() error = '';
+  @Input() required = false;
+  @Input() disabled = false;
+  @Input() invalid = false;
+  @Input() orientation: PdmFieldOrientation = 'vertical';
+  @Input() descriptionPosition: PdmFieldDescriptionPosition = 'after';
+  @Input() className = '';
+  @Input() labelClassName = '';
+  @Input() controlClassName = '';
+
+  get rootClass(): string {
+    return this.orientation === 'horizontal'
+      ? 'grid items-start gap-3 sm:grid-cols-[200px_minmax(0,1fr)] sm:gap-4'
+      : 'grid w-full gap-3';
+  }
+
+  get isHorizontal(): boolean {
+    return this.orientation === 'horizontal';
+  }
+
+  get showDescriptionBeforeControl(): boolean {
+    return !this.isHorizontal && this.descriptionPosition === 'before' && !!this.description && !this.invalid;
+  }
+
+  get showDescriptionAfterControl(): boolean {
+    return !this.isHorizontal && !this.showDescriptionBeforeControl && !!this.description && !this.invalid;
+  }
+}

package/src/lib/components/hover-card/hover-card.component.html

@@ -0,0 +1,24 @@
+<div
+  class="relative inline-flex"
+  [ngClass]="className"
+  (mouseenter)="open = true"
+  (mouseleave)="open = false"
+  (focusin)="open = true"
+  (focusout)="open = false"
+>
+  <div>
+    <ng-content select="[pdmHoverTrigger]"></ng-content>
+  </div>
+
+  <section
+    *ngIf="open"
+    [style.width.px]="panelWidth"
+    [ngClass]="[
+      'absolute z-30 rounded-[10px] border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-4 text-[hsl(var(--popover-foreground))] shadow-[0_10px_30px_rgba(15,23,42,0.15)]',
+      positionClass,
+      panelClassName
+    ]"
+  >
+    <ng-content select="[pdmHoverContent]"></ng-content>
+  </section>
+</div>

package/src/lib/components/hover-card/hover-card.component.ts

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+export type PdmHoverCardSide = 'top' | 'right' | 'bottom' | 'left';
+export type PdmHoverCardAlign = 'start' | 'center' | 'end';
+
+@Component({
+  selector: 'pdm-hover-card',
+  templateUrl: './hover-card.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PdmHoverCardComponent {
+  @Input() className = '';
+  @Input() panelClassName = '';
+  @Input() side: PdmHoverCardSide = 'bottom';
+  @Input() align: PdmHoverCardAlign = 'start';
+  @Input() panelWidth = 304;
+
+  open = false;
+
+  get positionClass(): string {
+    const sideClassMap: Record<PdmHoverCardSide, string> = {
+      top: 'bottom-full mb-2',
+      right: 'left-full ml-2',
+      bottom: 'top-full mt-2',
+      left: 'right-full mr-2'
+    };
+
+    const alignClassMap: Record<PdmHoverCardAlign, string> = {
+      start: this.side === 'top' || this.side === 'bottom' ? 'left-0' : 'top-0',
+      center: this.side === 'top' || this.side === 'bottom' ? 'left-1/2 -translate-x-1/2' : 'top-1/2 -translate-y-1/2',
+      end: this.side === 'top' || this.side === 'bottom' ? 'right-0' : 'bottom-0'
+    };
+
+    return `${sideClassMap[this.side]} ${alignClassMap[this.align]}`;
+  }
+}

package/src/lib/components/icon/icon.component.html

@@ -0,0 +1,286 @@
+<ng-container *ngIf="assetUrl; else inlineIcon">
+  <img
+    [src]="assetUrl"
+    [style.width.px]="size"
+    [style.height.px]="size"
+    [ngClass]="className"
+    [attr.role]="decorative ? null : 'img'"
+    [attr.aria-hidden]="decorative ? 'true' : null"
+    [attr.aria-label]="!decorative ? ariaLabel || name : null"
+    alt=""
+  />
+</ng-container>
+
+<ng-template #inlineIcon>
+  <svg
+    [attr.width]="size"
+    [attr.height]="size"
+    [ngClass]="className"
+    [attr.role]="decorative ? null : 'img'"
+    [attr.aria-hidden]="decorative ? 'true' : null"
+    [attr.aria-label]="!decorative ? ariaLabel || name : null"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <ng-container [ngSwitch]="iconKey">
+    <g *ngSwitchCase="'command'">
+      <path d="M9 9V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M15 9V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 9H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 15H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <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>
+      <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>
+      <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>
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'check'">
+      <path d="M5 12.5L9.2 16.7L19 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'check-circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M8.5 12.2L11 14.7L15.8 9.9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+    </g>
+
+    <g *ngSwitchCase="'dot'">
+      <circle cx="12" cy="12" r="2.5" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'x'">
+      <path d="M6 6L18 18M18 6L6 18" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'alert-circle'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M12 8V12" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <circle cx="12" cy="16" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'info'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M12 11V16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <circle cx="12" cy="8" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'loader-2'">
+      <path d="M12 3A9 9 0 1 0 21 12" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'menu'">
+      <path d="M4 7H20M4 12H20M4 17H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'search'">
+      <circle cx="11" cy="11" r="7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M20 20L16.6 16.6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'calendar'">
+      <path d="M8 3V6M16 3V6M4 10H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <rect x="4" y="6" width="16" height="14" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+    </g>
+
+    <g *ngSwitchCase="'panel-left'">
+      <rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M9 4V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></path>
+    </g>
+
+    <g *ngSwitchCase="'monitor'">
+      <rect x="3" y="4" width="18" height="13" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M8 20H16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M12 17V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'laptop'">
+      <rect x="5" y="5" width="14" height="10" rx="1.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M3 18H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sun'">
+      <circle cx="12" cy="12" r="4" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'moon'">
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'chevron-down'">
+      <path d="M7 10L12 15L17 10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-up'">
+      <path d="M17 14L12 9L7 14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-left'">
+      <path d="M15 18L9 12L15 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevron-right'">
+      <path d="M9 18L15 12L9 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-left'">
+      <path d="M14 18L8 12L14 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M20 18L14 12L20 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-right'">
+      <path d="M10 18L16 12L10 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M4 18L10 12L4 6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'chevrons-up-down'">
+      <path d="M7 15L12 20L17 15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M17 9L12 4L7 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'arrow-up-down'">
+      <path d="M12 4V20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 8L12 4L16 8" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M8 16L12 20L16 16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'ellipsis'">
+      <circle cx="6" cy="12" r="1.5" fill="currentColor"></circle>
+      <circle cx="12" cy="12" r="1.5" fill="currentColor"></circle>
+      <circle cx="18" cy="12" r="1.5" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'filter'">
+      <path d="M4 6H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M7 12H17" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M10 18H14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sort-asc'">
+      <path d="M7 18V6" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M4 9L7 6L10 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 8H20M14 12H18M14 16H16" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'sort-desc'">
+      <path d="M7 6V18" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M4 15L7 18L10 15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 8H16M14 12H18M14 16H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'plus'">
+      <path d="M12 5V19M5 12H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'minus'">
+      <path d="M5 12H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'copy'">
+      <rect x="9" y="9" width="11" height="11" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <rect x="4" y="4" width="11" height="11" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+    </g>
+
+    <g *ngSwitchCase="'pencil'">
+      <path d="M12 20H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'trash-2'">
+      <path d="M4 7H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <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>
+      <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>
+      <path d="M10 11V17M14 11V17" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'download'">
+      <path d="M12 4V14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 10L12 14L16 10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M5 19H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'upload'">
+      <path d="M12 20V10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M8 14L12 10L16 14" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M5 5H19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'home'">
+      <path d="M4 10.5L12 4L20 10.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M6 9.5V20H18V9.5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'mail'">
+      <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M4 7L12 13L20 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'phone'">
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'log-in'">
+      <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>
+      <path d="M10 17L14 13L10 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M14 13H4" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'log-out'">
+      <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>
+      <path d="M14 17L10 13L14 9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M10 13H20" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'user'">
+      <circle cx="12" cy="8" r="3" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'settings'">
+      <circle cx="12" cy="12" r="3" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <path d="M19 12A7 7 0 1 0 12 19" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'credit-card'">
+      <rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M3 10H21" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></path>
+    </g>
+
+    <g *ngSwitchCase="'smile'">
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+      <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>
+      <circle cx="9" cy="10" r="1" fill="currentColor"></circle>
+      <circle cx="15" cy="10" r="1" fill="currentColor"></circle>
+    </g>
+
+    <g *ngSwitchCase="'calculator'">
+      <rect x="6" y="3" width="12" height="18" rx="2" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></rect>
+      <path d="M9 7H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 12H10M14 12H15M9 16H10M14 16H15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'external-link'">
+      <path d="M14 5H19V10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+      <path d="M10 14L19 5" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M19 14V19H5V5H10" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchCase="'folder'">
+      <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>
+    </g>
+
+    <g *ngSwitchCase="'arrow-up-right'">
+      <path d="M7 17L17 7" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round"></path>
+      <path d="M9 7H17V15" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+
+    <g *ngSwitchDefault>
+      <circle cx="12" cy="12" r="9" stroke="currentColor" [attr.stroke-width]="resolvedStrokeWidth"></circle>
+    </g>
+    </ng-container>
+  </svg>
+</ng-template>