pdm-ui-kit 0.1.0 → 0.1.2

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

@@ -1,126 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<div [ngClass]="[rootClass, className]">
-  <div class="grid gap-2">
-    <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="description && !invalid" class="text-sm leading-5 text-[hsl(var(--muted-foreground))]">{{ description }}</p>
-    <p *ngIf="invalid && error" class="text-sm leading-5 text-[hsl(var(--destructive))]">{{ error }}</p>
-
-    <ng-content select="[pdmFieldDescription]"></ng-content>
-  </div>
-
-  <div [ngClass]="controlClassName">
-    <ng-content></ng-content>
-    <ng-content select="[pdmFieldControl]"></ng-content>
-  </div>
-</div>

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

@@ -1,28 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-
-export type PdmFieldOrientation = 'vertical' | 'horizontal';
-
-@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() 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';
-  }
-}

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

@@ -1,24 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-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

@@ -1,286 +0,0 @@
-<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>