import { Component , Input , QueryList , ContentChildren , Output , EventEmitter , ElementRef , Renderer2 , AfterContentInit } from '@angular/core' ; import { isInt } from '../util/util' ; import { NglTab } from './tab' ; import { InputBoolean } from '../util/convert' ; @ Component ( { selector : 'ngl-tabset' , templateUrl : './tabs.html' , } ) export class NglTabs implements AfterContentInit { @ Input ( ) set variant ( variant ) { const el = this . element . nativeElement ; this . renderer . removeClass ( el , `slds-tabs_${ this . variant }` ) ; this . _variant = variant ; this . renderer . addClass ( el , `slds-tabs_${ this . variant }` ) ; } get variant ( ) { return this . _variant || 'default' ; } @ ContentChildren ( NglTab ) tabs : QueryList < NglTab > ; activeTab : NglTab ; selected : string | number | NglTab ; @ Input ( 'selected' ) set setSelected ( selected ) { if ( selected === this . selected ) { return ; } this . selected = selected ; if ( ! this . tabs ) { return ; } this . activate ( ) ; } @ Output ( ) selectedChange = new EventEmitter < NglTab > ( ) ; /**
     * Whether every tab's content is instantiated when visible, and destroyed when hidden.
     */ @ Input ( ) @ InputBoolean ( ) lazy = true ; private _variant : 'default' | 'scoped' ; constructor ( private element , private renderer ) { this . renderer . addClass ( this . element . nativeElement , `slds-tabs_${ this . variant }` ) ; } ngAfterContentInit ( ) { this . activate ( ) ; if ( ! this . activeTab ) { setTimeout ( ( ) => this . select ( this . tabs . first ) ) ; } } select ( tab ) { this . selectedChange . emit ( tab ) ; } move ( evt , moves ) { evt . preventDefault ( ) ; const tabs = this . tabs . toArray ( ) ; const selectedIndex = tabs . indexOf ( this . activeTab ) ; this . select ( tabs [ ( tabs . length + selectedIndex + moves ) % tabs . length ] ) ; } tabClass ( tab ) { return `slds-tabs_${ this . variant }__content slds-${ tab . active ? 'show' : 'hide' }` ; } trackByTab ( index , tab ) { return tab . uid ; } private activate ( ) { if ( this . activeTab ) { this . activeTab . active = false ; } this . activeTab = this . findTab ( ) ; if ( this . activeTab ) { this . activeTab . active = true ; } } private findTab ( value = this . selected ) { if ( value instanceof NglTab ) { return value ; } if ( isInt ( value ) ) { return this . tabs . toArray ( ) [ + value ] ; } return this . tabs . toArray ( ) . find ( ( t ) => { return t . id && t . id === value ; } ) ; } }