All files / card si-action-card.component.ts

100% Statements 8/8
100% Branches 0/0
100% Functions 0/0
100% Lines 8/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60                                                                        1x 1x 4x           4x                 4x   4x 4x 4x    
/**
 * Copyright (c) Siemens 2016 - 2025
 * SPDX-License-Identifier: MIT
 */
import { booleanAttribute, ChangeDetectionStrategy, Component, input, model } from '@angular/core';
import { SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
import { SiCardBaseDirective } from './si-card-base.directive';
 
/**
 * An action card component that extends the base card component with option to
 * either select the whole card or trigger an action.
 *
 * Usage:
 * as selectable card:
 * `<button si-card selectable type="button" [(selected)]="isSelected">...</button>`
 *
 * or as an action card:
 * `<button si-card type="button" (click)="doSomeAction()">...</button>`
 */
@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'button[si-action-card]',
  imports: [SiTranslatePipe],
  templateUrl: './si-action-card.component.html',
  styleUrl: './si-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {
    class: 'action-card',
    '[attr.aria-pressed]': 'selectable() ? (selected() ? "true" : "false") : undefined',
    '[attr.aria-labelledby]': 'heading() ? headingId : undefined',
    '[attr.aria-describedby]': 'subHeading() ? `${subHeadingId} ${contentId}` : contentId',
    '[class.selected]': 'selectable() && selected()',
    '(click)': 'selectable() ? selected.set(!selected()) : null'
  }
})
export class SiActionCardComponent extends SiCardBaseDirective {
  private static idCounter = 0;
  private id = `__si-action-card-${SiActionCardComponent.idCounter++}`;
  /**
   * Makes whole card selectable.
   *
   * @defaultValue false
   */
  readonly selectable = input(false, {
    transform: booleanAttribute
  });
  /**
   * Indicates if the card is selected.
   * Ignored when `selectable` is not set to `true`.
   *
   * @defaultValue false
   * */
  readonly selected = model(false);
 
  protected headingId = `${this.id}-heading`;
  protected subHeadingId = `${this.id}-subHeading`;
  protected contentId = `${this.id}-content`;
}