link.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { twMerge } from 'tailwind-merge';

@Component({
  selector: 'ods-link',
  standalone: true,
  imports: [CommonModule],
  template: `<a
    [target]="openInNewTab ? '_blank' : '_self'"
    [href]="url"
    [class]="
      twMerge(
        'block rounded border-2 border-transparent text-text outline-2 outline-offset-2 outline-focus hover:border-primary-600 focus-visible:border-transparent focus-visible:outline',
        class
      )
    "
    [attr.data-test-id]="linkTestId"
    (focus)="isFocused = true"
    (blur)="isFocused = false"
    [class.ods-focused]="isFocused"
  >
    <ng-content />
  </a>`,
})
export class LinkComponent {
  @Input({ required: true }) url!: string;
  @Input() openInNewTab: boolean = false;
  @Input() class: string = '';
  @Input() linkTestId: string | null = null;

  public isFocused: boolean = false;
  readonly twMerge = twMerge;
}