import { ChangeDetectionStrategy , ChangeDetectorRef , Component , Input , ViewRef } from '@angular/core' ; import { BgsHeroStat } from '../../../models/battlegrounds/stats/bgs-hero-stat' ; import { getTribeIcon } from '../../../services/battlegrounds/bgs-utils' ; @ Component ( { selector : 'bgs-hero-tribes' , styleUrls : [ `../../../../css/global/reset-styles.scss` , `../../../../css/component/battlegrounds/hero-selection/bgs-hero-selection-layout.component.scss` , `../../../../css/component/battlegrounds/hero-selection/bgs-hero-tribes.component.scss` , ] , template : `
		<div class="tribes">
			<div
				class="title"
				[helpTooltip]="'battlegrounds.hero-stats.winning-tribes-tooltip' | owTranslate"
				[owTranslate]="'battlegrounds.hero-stats.winning-tribes'"
			></div>
			<div class="composition">
				<div *ngFor="let tribe of tribes || []; trackBy: trackByTribeFn" class="tribe">
					<div class="icon-container">
						<img class="icon" [src]="getIcon(tribe.tribe)" [helpTooltip]="tribe.tribe" />
					</div>
					<div class="tribe-name">{{ tribe.tribe }}</div>
					<div class="value">{{ tribe.percent }}%</div>
				</div>
			</div>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class BgsHeroTribesComponent { tribes : readonly { tribe : string ; percent : string ; } [ ] ; @ Input ( ) set hero ( value ) { if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } constructor ( private readonly cdr ) { } getIcon ( tribe ) { return getTribeIcon ( tribe ) ; } trackByTribeFn ( index , item ) { return item . tribe ; } private getTribe ( tribe ) { if ( tribe === 'mechanical' ) { tribe = 'mech' ; } else if ( tribe === 'blank' ) { tribe = 'no tribe' ; } return tribe . charAt ( 0 ) . toUpperCase ( ) + tribe . slice ( 1 ) ; } }