import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks' ; import { Subject } from 'rxjs/Rx' ; import { PriceSpecGroup } from './../price-spec-manager/price-spec-group' ; import { Component , Input , Output , OnChanges } from '@angular/core' ; import { PriceSpec } from '../price-spec-manager/price-spec' ; @ Component ( { selector : 'spec-list' , templateUrl : './spec-list.component.html' , styleUrls : [ './spec-list.component.scss' ] , } ) export class SpecListComponent implements OnChanges { @ Input ( ) specGroup : PriceSpecGroup ; @ Input ( ) isRecommendedList = false ; @ Output ( ) onSelectedSpec = new Subject < PriceSpec > ( ) ; specs : PriceSpec [ ] ; constructor ( ) { } ngOnChanges ( changes ) { if ( this . specGroup ) { this . specs = this . isRecommendedList ? this . specGroup . recommendedSpecs : this . specGroup . additionalSpecs ; } } selectSpec ( spec ) { this . onSelectedSpec . next ( spec ) ; } selectSpecByEnterKey ( element ) { const spec = this . specs . find ( s => element . id . endsWith ( s . skuCode ) ) ; if ( spec ) { this . selectSpec ( spec ) ; } } getAriaLabelledByForSpec ( spec ) { const specDivId = `${ this . specGroup . id }${ spec . skuCode }` ; return ! ! this . isRecommendedList ? `recommendedTierHeaderId ${ specDivId }` : `additionalTierHeaderId ${ specDivId }` ; } getAriaDescribedByForTopFeatures ( spec ) { let describedByIds = [ ] ; spec . topLevelFeatures . forEach ( ( _element , index ) => { describedByIds . push ( this . getTopFeatureId ( spec , index ) ) ; } ) ; return describedByIds . join ( ' ' ) ; } getTopFeatureId ( spec , index ) { return `${ spec . skuCode }-topFeature${ index }` ; } }