icon.component.ts

/*
 * Copyright (C) 2025 Das Land Schleswig-Holstein vertreten durch den
 * Ministerpräsidenten des Landes Schleswig-Holstein
 * Staatskanzlei
 * Abteilung Digitalisierung und zentrales IT-Management der Landesregierung
 *
 * Lizenziert unter der EUPL, Version 1.2 oder - sobald
 * diese von der Europäischen Kommission genehmigt wurden -
 * Folgeversionen der EUPL ("Lizenz");
 * Sie dürfen dieses Werk ausschließlich gemäß
 * dieser Lizenz nutzen.
 * Eine Kopie der Lizenz finden Sie hier:
 *
 * https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12
 *
 * Sofern nicht durch anwendbare Rechtsvorschriften
 * gefordert oder in schriftlicher Form vereinbart, wird
 * die unter der Lizenz verbreitete Software "so wie sie
 * ist", OHNE JEGLICHE GEWÄHRLEISTUNG ODER BEDINGUNGEN -
 * ausdrücklich oder stillschweigend - verbreitet.
 * Die sprachspezifischen Genehmigungen und Beschränkungen
 * unter der Lizenz sind dem Lizenztext zu entnehmen.
 */
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { SvgIconComponent } from 'angular-svg-icon';
import { VariantProps, cva } from 'class-variance-authority';
import { twMerge } from 'tailwind-merge';

const iconVariants = cva('', {
  variants: {
    size: {
      full: 'size-full',
      small: 'size-4',
      medium: 'size-6',
      large: 'size-8',
      'extra-large': 'size-10',
      xxl: 'size-12',
      unset: '',
    },
    fill: {
      primary: 'fill-primary',
      text: 'fill-text',
      whitetext: 'fill-whitetext',
      error: 'fill-error',
      pdf: 'fill-pdf',
      neutral: 'fill-neutral-500 dark:fill-neutral-400',
      abgelehnt: 'fill-abgelehnt',
    },
  },
});

type IconVariants = VariantProps<typeof iconVariants>;

@Component({
  selector: 'ods-icon',
  standalone: true,
  imports: [CommonModule, SvgIconComponent],
  template: `<svg-icon [src]="'assets/icons/' + name + '.svg'" [svgClass]="twMerge(iconVariants({ size, fill }), class)" />`,
  styles: [':host {@apply block w-fit}'],
})
export class IconComponent {
  @Input({ required: true }) name!: string;
  @Input() class: string;
  @Input() size: IconVariants['size'] = 'medium';
  @Input() fill: IconVariants['fill'] = 'primary';

  readonly iconVariants = iconVariants;
  readonly twMerge = twMerge;
}