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