All files / card si-card-base.directive.ts

100% Statements 10/10
100% Branches 2/2
100% Functions 1/1
100% Lines 10/10

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