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' ); } |