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`;
}
|