File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
div[top-banner-top] |
| styleUrls |
./top-banner-top.component.scss |
| templateUrl |
./top-banner-top.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
actOnResize
|
actOnResize()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
componentId
|
Default value : this.idGenerator.getId()
|
|
|
|
desktopImageBreakpoint
|
Type : string
|
|
|
import { Component, Input, OnInit, ChangeDetectionStrategy, Inject, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { TopBannerData } from 'src/app/core/interfaces/interfaces.component';
import { TopBannerService } from '../top-banner.service';
@Component({
selector: 'div[top-banner-top]',
templateUrl: './top-banner-top.component.html',
styleUrls: ['./top-banner-top.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TopBannerTopComponent implements OnInit, OnDestroy {
@Input() entity;
data: TopBannerData;
desktopImageBreakpoint: string;
windowWidth: any;
private componentId = this.idGenerator.getId();
constructor(
private constants: ConstantsService,
private resizer: ResizeContentService,
private changeDetector: ChangeDetectorRef,
private idGenerator: IdGeneratorService,
private topBannerService: TopBannerService,
@Inject(DOCUMENT) private document) { }
ngOnInit(): void {
this.data = this.topBannerService.parseJson(this.entity);
this.desktopImageBreakpoint = `(min-width: ${this.constants.BOOTSTRAP_BREAKPOINTS.MD}px)`;
this.resizer.registerCallback(this.componentId, () => this.actOnResize());
}
actOnResize(): void {
const currentWidth = window.innerWidth || this.document.documentElement.clientWidth;
this.data.imageAlt = this.topBannerService.getImageMetaData('alt', currentWidth, this.entity);
this.data.imageTitle = this.topBannerService.getImageMetaData('title', currentWidth, this.entity);
this.changeDetector.detectChanges();
}
ngOnDestroy(): void {
this.resizer.destroyCallback(this.componentId);
}
}
<ng-container *ngIf="data">
<picture>
<source [media]="desktopImageBreakpoint" [srcset]="data.bannerImageUrl" *ngIf="data.bannerImageUrl">
<source media="(min-width: 0px)" [srcset]="data.mobileBannerImageUrl" *ngIf="data.mobileBannerImageUrl">
<img [title]="data.imageTitle" [src]="data.bannerImageUrl" [alt]="data.imageAlt" *ngIf="data.bannerImageUrl">
</picture>
<div breadcrumb [themeColor]="'light'" *ngIf="data.includeBreadcrumb"></div>
<div class="container">
<div class="row content-box">
<div class="col-sm-12 col-xl-5 intro">
<div class="introduction">
<div page-detail-header [entity]="entity.PageDetailsData" [region]="'top'" *ngIf="entity?.PageDetailsData"></div>
<div class="intro-text" *ngIf="data.introduction">
{{data.introduction}}
</div>
</div>
</div>
<div class="col-sm-12 col-xl-7 highlighted-boxes" *ngIf="data.box1">
<div class="box-grid">
<a component-link [linkObject]="data.box1.link.linkObject" class="box1 highlighted-box" *ngIf="data.box1?.link?.linkObject">
<div class="highlighted-text" *ngIf="data.box1.description">{{data.box1.description}}</div>
<div class="link-box" *ngIf="data.box1.link.title">
<div class="highlighted-link">{{data.box1.link.title | uppercase}}</div>
<i *ngIf="data.box1.link.newWindow" class="icon-link-openNewWindow" ></i>
<i class="icon-chevronLarge-next" ></i>
</div>
</a>
<a component-link [linkObject]="data.box2.link.linkObject" class="box2 highlighted-box" *ngIf="data.box2?.link?.linkObject">
<div class="highlighted-text" *ngIf="data.box2.description">{{data.box2.description}}</div>
<div class="link-box" *ngIf="data.box2.link.title">
<div class="highlighted-link">{{data.box2.link.title | uppercase}}</div>
<i *ngIf="data.box2.link.newWindow" class="icon-link-openNewWindow" ></i>
<i class="icon-chevronLarge-next" ></i>
</div>
</a>
<a component-link [linkObject]="data.box3.link.linkObject" class="box3 highlighted-box" *ngIf="data.box3?.link?.linkObject">
<div class="highlighted-text" *ngIf="data.box3.description">{{data.box3.description}}</div>
<div class="link-box" *ngIf="data.box3.link.title">
<div class="highlighted-link">{{data.box3.link.title | uppercase}}</div>
<i *ngIf="data.box3.link.newWindow" class="icon-link-openNewWindow" ></i>
<i class="icon-chevronLarge-next" ></i>
</div>
</a>
</div>
</div>
</div>
</div>
</ng-container>
@import "src/app/styles/helpers";
:host {
position: relative;
min-height: calc-rem(470);
padding-bottom: calc-rem(30);
@include media-breakpoint-up(md) {
min-height: calc-rem(737);
}
}
img {
position: absolute;
object-fit: cover;
height: 100%;
min-width: 100%;
z-index: -1;
}
@include media-breakpoint-down(md) {
padding-top: 1.25rem;
}
.content-box {
height: 100%;
.intro {
margin-bottom: calc-rem(50);
z-index: 10;
@include media-breakpoint-down(md) {
.introduction {
align-items: center;
}
}
.introduction {
display: flex;
flex-direction: column;
color: white;
@include media-breakpoint-down(lg) {
text-align: center;
}
::ng-deep .title {
@include media-breakpoint-down(lg) {
text-align: center;
}
h1 {
@include font-scale(90, thin);
color: white;
}
}
.intro-text {
@include font-scale(18, light);
color: white;
}
i {
font-family: 'SKF Chevin OT Light';
color: white;
}
}
}
.highlighted-boxes {
display: flex;
justify-content: center;
@include media-breakpoint-up(xl) {
justify-content: flex-end;
}
.box-grid {
display: grid;
display: -ms-grid;
-ms-grid-columns: 360px 360px;
-ms-grid-rows: 290px 290px;
grid-template-columns: 360px 360px;
grid-template-rows: 290px 290px;
@include media-breakpoint-down(md) {
display: flex;
flex-direction: column;
.highlighted-box {
margin-bottom: calc-rem(10);
}
}
.box1 {
grid-column: 2;
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row: 1;
@include media-breakpoint-up(xl) {
grid-column: 2;
grid-row: 2;
-ms-grid-column: 2;
-ms-grid-row: 2;
}
}
.box2 {
grid-column: 1;
grid-row: 1;
-ms-grid-column: 1;
-ms-grid-row: 1;
@include media-breakpoint-up(xl) {
grid-column: 2;
grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row: 1;
}
}
.box3 {
grid-column: 1;
grid-row: 2;
-ms-grid-column: 1;
-ms-grid-row: 2;
}
.highlighted-box {
width: 100%;
height: 280px;
max-width: 350px;
background-color: $purple;
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2.5rem;
&[target=_blank]:after {
content: none;
}
.highlighted-text {
@include font-scale(16, medium);
text-align: center;
margin-bottom: calc-rem(15);
color: white;
overflow: hidden;
}
.link-box {
display: flex;
justify-content: center;
align-items: center;
color: white;
.highlighted-link {
@include font-scale(14, uppercase);
color: white;
}
i {
@include font-size(14);
margin-left: calc-rem(4);
transform: translateY(2px);
}
}
&.disabled {
pointer-events: none;
}
&:hover {
background-color: $blue;
.link-box {
.highlighted-link {
text-decoration: underline;
}
}
}
}
}
}
}
Legend
Html element with directive