All files / src/app/shared/cms/components/cms-image-enhanced cms-image-enhanced.component.html

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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (pagelet?.hasParam('Link') && !pagelet.hasParam('LinkText')) {
  @if (isRouterLink(pagelet, 'Link')) {
    <a class="teaser-link" [attr.title]="pagelet.stringParam('LinkTitle')" [routerLink]="routerLink(pagelet, 'Link')">
      <ng-container *ngTemplateOutlet="imageEnhanced" />
    </a>
  } @else {
    <a class="teaser-link" [attr.title]="pagelet.stringParam('LinkTitle')" [href]="pagelet.stringParam('Link')">
      <ng-container *ngTemplateOutlet="imageEnhanced" />
    </a>
  }
} @else {
  <ng-container *ngTemplateOutlet="imageEnhanced" />
}
 
<ng-template #imageEnhanced>
  <div class="enhanced-image-container" [ngClass]="pagelet.stringParam('CSSClass')">
    <picture class="enhanced-image">
      @if (pagelet.hasParam('ImageXS')) {
        <source media="(max-width: 767px)" [srcset]="pagelet.stringParam('ImageXS')" />
      }
      @if (pagelet.hasParam('ImageSM')) {
        <source media="(max-width: 991px)" [srcset]="pagelet.stringParam('ImageSM')" />
      }
      @if (pagelet.hasParam('ImageMD')) {
        <source media="(max-width: 1199px)" [srcset]="pagelet.stringParam('ImageMD')" />
      }
      <img
        class="enhanced-image"
        [alt]="pagelet.stringParam('AlternateText') || ('image.alt_text.default' | translate)"
        [attr.fetchpriority]="loading === 'eager' ? 'high' : null"
        [attr.loading]="loading"
        [src]="pagelet.stringParam('Image')"
      />
    </picture>
    <div class="enhanced-image-text">
      @if (pagelet.hasParam('Heading1')) {
        <h1>{{ pagelet.stringParam('Heading1') }}</h1>
      }
      @if (pagelet.hasParam('Heading2')) {
        <h2>{{ pagelet.stringParam('Heading2') }}</h2>
      }
      @if (pagelet.hasParam('Description')) {
        <div class="d-none d-sm-inline" [ishServerHtml]="pagelet.stringParam('Description')"></div>
      }
      @if (pagelet.hasParam('Link') && pagelet.hasParam('LinkText')) {
        <a
          class="btn btn-lg btn-primary"
          [attr.title]="pagelet.stringParam('LinkTitle')"
          [routerLink]="routerLink(pagelet, 'Link')"
        >
          {{ pagelet.stringParam('LinkText') }}
        </a>
      }
    </div>
  </div>
</ng-template>