Template Literal Type Constraints for Angular Component String Literal Datatypes

type ColorVariant = 'primary' | 'secondary' | 'accent';
type ComponentSize = 'sm' | 'md' | 'lg';
type DesignSystemToken = `ds-${ColorVariant}-${ComponentSize}`;
 
import { Component, Input, booleanAttribute } from '@angular/core';
 
@Component({
  selector: 'app-badge',
  standalone: true,
  template: `<span [class]="tokenClass">{{ label }}</span>`
})
export class BadgeComponent {
  @Input({ required: true }) label!: string;
  @Input({ required: true }) token!: DesignSystemToken;
  @Input({ transform: booleanAttribute }) disabled = false;
 
  get tokenClass(): string {
    return `badge-variant-${this.token}`;
  }
 
  static isValidToken(val: string): val is DesignSystemToken {
    return /^ds-(primary|secondary|accent)-(sm|md|lg)$/.test(val);
  }
}