File
Implements
Metadata
selector |
alternative-document |
styleUrls |
alternative-document.component.scss |
templateUrl |
alternative-document.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
product
|
|
Alternative documents include 'final variant', 'obsolete products' etc.
|
Methods
Public
replacementSearch
|
replacementSearch()
|
|
|
search
|
Type : SearchService
|
|
import { Component, OnInit, Input } from '@angular/core';
import { SearchFactory, SearchService } from 'skf-search-angular-service';
import { PublicationService } from 'src/app/core/services/publication-service/publication.service';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { LoadingIndicatorService } from 'src/app/core/services/loading-indicator.service';
import { AppConfig } from '../../../app.config';
@Component ({
selector: 'alternative-document',
templateUrl: 'alternative-document.component.html',
styleUrls: ['alternative-document.component.scss']
})
export class AlternativeDocumentComponent implements OnInit {
/** Alternative documents include 'final variant', 'obsolete products' etc. */
@Input() product;
description: string;
prefixSuffix;
contactUs: string;
pubName: string;
search: SearchService;
// Labels
finalVariant1: string;
finalVariant2: string;
finalVariant3: string;
finalVariant4: string;
finalVariant5: string;
obsoleteLabel: string;
constructor(
private searchFactory: SearchFactory,
private loadingService: LoadingIndicatorService,
private publicationService: PublicationService,
private labelService: LabelService
) {
this.search = this.searchFactory.get(`site-search-v2-${AppConfig.settings.searchEnvironment.name}`);
}
ngOnInit() {
this.pubName = this.publicationService.getPublicationPath();
this.prefixSuffix = `${this.pubName}/products/bearings-units-housings/principles/general-bearing-knowledge/bearing-basics/basic-bearing-designation-system/index.html`;
this.contactUs = `${this.pubName}/our-company/contact-us/index.html?WT.oss=6205/C3&WT.z_oss_boost=1&tabname=All&WT.z_oss_rank=1`;
// Fetch labels
this.labelService.getLabel('finalVariantTextIntro').then(res => this.finalVariant1 = res);
this.labelService.getLabel('finalVariantTextLinkPrefixSuffix').then(res => this.finalVariant2 = res);
this.labelService.getLabel('finalVariantTextMiddle').then(res => this.finalVariant3 = res);
this.labelService.getLabel('finalVariantTextLinkContact').then(res => this.finalVariant4 = res);
this.labelService.getLabel('finalVariantTextEnd').then(res => this.finalVariant5 = res);
this.labelService.getLabel('obsoleteProductText').then(res => this.obsoleteLabel = res);
}
public replacementSearch() {
this.loadingService.show();
this.search.doSearch({queryString: this.product.replacement_designation});
}
}
<div class="special-document">
<div class="info">
<i class="fas fa-info-circle" aria-hidden="true"></i>
</div>
<div>
<div class="title">
<span>{{ product.designation }}</span>
</div>
<div class="desc">
<div *ngIf="product.collection == 'final_variants'" class="final-variant">
<span>{{ finalVariant1 }}</span>
<a class="link" href="{{prefixSuffix}}">{{ finalVariant2 }}</a>
<span>{{ finalVariant3 }}</span>
<a class="link" href="{{contactUs}}">{{ finalVariant4 }}</a>
<span>{{ finalVariant5 }}</span>
</div>
<div *ngIf="product.collection == 'obsoletes'" class="obsolete">
<span>{{ obsoleteLabel }}</span>
<span (click)="replacementSearch()" class="link">{{product.replacement_designation}}</span>
</div>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.special-document {
display: flex;
flex-direction: row;
margin-bottom: 30px;
@media(max-width: 575px) {
.title { @include font-size(15); }
.desc { @include font-size(13); }
}
@media(min-width: 576px) {
.title { @include font-size(17); }
.desc { @include font-size(15); }
}
.info {
display: flex;
align-items: center;
margin-right: 10px;
@include font-size(20);
color: $blue;
}
.title {
display: flex;
flex-direction: row;
text-decoration: none;
font-weight: 600;
}
.desc {
display: flex;
flex-direction: row;
.link {
margin-right: 4px;
}
}
}
Legend
Html element with directive