File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
div[top-banner-search] |
| styleUrls |
top-banner-search.component.scss |
| templateUrl |
top-banner-search.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Methods
|
actOnResize
|
actOnResize()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
componentId
|
Default value : this.idGenerator.getId()
|
|
|
|
desktopImageBreakpoint
|
Type : string
|
|
|
import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, Inject, Input, OnDestroy, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { DOCUMENT } from '@angular/common';
import { TopBannerData } from 'src/app/core/interfaces/interfaces.component';
import { TopBannerService } from '../top-banner.service';
@Component({
selector: 'div[top-banner-search]',
templateUrl: 'top-banner-search.component.html',
styleUrls: ['top-banner-search.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TopBannerSearchComponent implements OnInit, OnDestroy {
@Input() entity;
data: TopBannerData;
desktopImageBreakpoint: string;
title: string;
home: boolean;
private componentId = this.idGenerator.getId();
image: string;
@HostBinding('class') get class() { return this.home ? 'top-banner-search top-banner-search--home' : 'top-banner-search'; }
constructor(
private util: UtilService,
private constants: ConstantsService,
private changeDetector: ChangeDetectorRef,
private resizer: ResizeContentService,
private idGenerator: IdGeneratorService,
private topBannerService: TopBannerService,
@Inject(DOCUMENT) private document) { }
ngOnInit(): void {
this.data = this.topBannerService.parseJson(this.entity);
this.home = this.data.viewName === 'TopBannerWSearchLargeTop';
this.title = this.util.extract(this.entity, 'PageDetailsData', 'H1Title');
this.desktopImageBreakpoint = `(min-width: ${this.constants.BOOTSTRAP_BREAKPOINTS.MD}px)`;
this.resizer.registerCallback(this.componentId, () => this.actOnResize());
}
ngOnDestroy(): void {
this.resizer.destroyCallback(this.componentId);
}
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();
}
}
<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="search">
<div class="search-title">
<div page-detail-header [entity]="entity.PageDetailsData" [region]="'top'" *ngIf="entity?.PageDetailsData"></div>
<p *ngIf="home && data.introduction">{{ data.introduction }}</p>
</div>
<search-input></search-input>
</div>
</div>
</ng-container>
@import "src/app/styles/helpers";
:host(.top-banner-search) {
position: relative;
min-height: calc-rem(470);
display: flex;
flex-direction: column;
img {
display: flex;
position: absolute;
object-fit: cover;
min-width: 100%;
height: 100%;
z-index: -1;
}
.container {
display: flex;
flex-grow: 1;
.search {
display: flex;
flex-direction: column;
flex: 1 1 auto;
justify-content: center;
align-items: center;
&-title {
margin-bottom: calc-rem(50);
color: white;
@include media-breakpoint-down(sm) {
text-align: center;
}
::ng-deep h1 {
@include font-scale(80, thin);
}
}
}
}
}
:host(.top-banner-search--home) {
min-height: 540px;
@include media-breakpoint-up(md) {
min-height: 737px;
}
@include media-breakpoint-up(lg) {
min-height: 957px;
}
img {
height: 100%;
max-height: 100%;
}
.container {
.search {
justify-content: flex-start;
margin-top: calc-rem(80);
@include media-breakpoint-up(md) {
justify-content: center;
margin-top: 0;
}
&-title {
@include media-breakpoint-up(sm) {
margin-bottom: calc-rem(95);
}
@include media-breakpoint-up(md) {
margin-bottom: calc-rem(170);
}
::ng-deep h1 {
@include media-breakpoint-up(sm) {
@include font-scale(80, thin);
}
@include media-breakpoint-up(lg) {
@include font-scale(120, thin);
}
}
p {
margin-top: calc-rem(-30);
@include font-size(20);
@include media-breakpoint-up(lg) {
@include font-scale(32, light);
}
}
}
}
}
}
Legend
Html element with directive