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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 1x 69x 69x 69x 69x 69x 69x 69x 69x 69x 69x 69x 69x 69x 70x 69x 40x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { Component, computed, input } from '@angular/core';
import { MenuItem as MenuItemLegacy } from '@siemens/element-ng/common';
import {
ContentActionBarMainItem,
SiContentActionBarComponent,
ViewType
} from '@siemens/element-ng/content-action-bar';
import { MenuItem } from '@siemens/element-ng/menu';
import { SiTranslatePipe, TranslatableString } from '@siemens/element-translate-ng/translate';
@Component({
selector: 'si-card',
imports: [SiContentActionBarComponent, SiTranslatePipe],
templateUrl: './si-card.component.html',
styleUrl: './si-card.component.scss',
host: {
class: 'card',
'[class.card-horizontal]': 'classCardHorizontal()',
'[style.--si-card-img-object-fit]': 'imgObjectFit()',
'[style.--si-card-img-object-position]': 'imgObjectPosition()'
}
})
export class SiCardComponent {
/**
* Card header text.
*/
readonly heading = input<TranslatableString>();
/**
* Card secondary header text.
*/
readonly subHeading = input<TranslatableString>();
/**
* Input list of primary action items. Supports up to **4** actions and omits additional ones.
*
* @defaultValue []
*/
readonly primaryActions = input<(MenuItemLegacy | ContentActionBarMainItem)[]>([]);
/**
* Input list of secondary action items.
*
* @defaultValue []
*/
readonly secondaryActions = input<(MenuItemLegacy | MenuItem)[]>([]);
/**
* A param that will be passed to the `action` in the primary/secondary actions.
* This allows to re-use the same primary/secondary action arrays across rows
* in a table.
*/
readonly actionParam = input<any>();
/**
* The view type of the content action bar of the card. Default is `collapsible`
* for dashboards. However, in some cases you might need to change to `expanded`
* or `mobile`.
*
* @defaultValue 'collapsible'
*/
readonly actionBarViewType = input<ViewType>('collapsible');
/**
* Optional setting of html title attribute for the content action bar.
* Helpful for a11y when only one action is configured in expand mode.
*
* @defaultValue ''
*/
readonly actionBarTitle = input<TranslatableString>('');
/**
* Image source for the card.
*/
readonly imgSrc = input<string>();
/**
* Alt text for a provided image.
*/
readonly imgAlt = input<TranslatableString>();
/**
* Defines if an image is placed on top or start (left) of the card.
*
* @defaultValue 'vertical'
*/
readonly imgDir = input<('horizontal' | 'vertical') | undefined>('vertical');
/**
* Sets the image [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property.
*
* @defaultValue 'scale-down'
*/
readonly imgObjectFit = input<('contain' | 'cover' | 'fill' | 'none' | 'scale-down') | undefined>(
'scale-down'
);
/**
* Sets the image [object-position](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) CSS property.
*/
readonly imgObjectPosition = input<string>();
/**
* In case the card uses an image and horizontal direction is used we set flex row direction.
*/
protected readonly classCardHorizontal = computed(
() => !!this.imgSrc() && this.imgDir() === 'horizontal'
);
/**
* Returns `true` when primary or secondary actions are set.
*/
readonly displayContentActionBar = computed(
() => this.primaryActions()?.length > 0 || this.secondaryActions()?.length > 0
);
}
|