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 | 1x 73x 73x 73x 73x 73x 73x 73x 73x 74x | /**
* Copyright (c) Siemens 2016 - 2025
* SPDX-License-Identifier: MIT
*/
import { computed, Directive, input } from '@angular/core';
import { TranslatableString } from '@siemens/element-translate-ng/translate';
@Directive({
host: {
class: 'card',
'[class.card-horizontal]': 'classCardHorizontal()',
'[style.--si-card-img-object-fit]': 'imgObjectFit()',
'[style.--si-card-img-object-position]': 'imgObjectPosition()'
}
})
export abstract class SiCardBaseDirective {
/**
* Card header text.
*/
readonly heading = input<TranslatableString>();
/**
* Card secondary header text.
*/
readonly subHeading = 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'
);
}
|