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