File

/home/workflows/workspace/libs/design-system/indicators/software-status-indicator/src/lib/software-status-indicator-size.directive.ts

Description

Directive for icon buttons

Metadata

Index

Properties
  • Protected Readonly font
Inputs

Inputs

size
Type : SoftwareStatusSize
Required :  true
Default value : { alias: 'hraSoftwareStatusSize' }

Size of icon button to use

Properties

Protected Readonly font
Type : unknown
Default value : computed(() => STATUS_FONTS[this.size()])

Font

import { computed, Directive, input } from '@angular/core';

/** Input options for Software status size */
export type SoftwareStatusSize = 'small' | 'medium' | 'large';

/** Record of button fonts */
const STATUS_FONTS: Record<SoftwareStatusSize, string> = {
  small: 'var(--mat-sys-label-micro)',
  medium: 'var(--mat-sys-label-medium)',
  large: 'var(--mat-sys-label-large)',
};

/**
 * Directive for icon buttons
 */
@Directive({
  selector: '[hraSoftwareStatusSize]',
  host: {
    '[style.font]': 'font()',
  },
})
export class SoftwareStatusSizeDirective {
  /** Size of icon button to use */
  readonly size = input.required<SoftwareStatusSize>({ alias: 'hraSoftwareStatusSize' });

  /** Font */
  protected readonly font = computed(() => STATUS_FONTS[this.size()]);
}

results matching ""

    No results matching ""