import { Component , ElementRef , HostBinding , Input , ViewChild } from '@angular/core' ; import { ResizeDimensions } from '../../../directives/resize' ; import { CardTabComponent } from '../card-tab/card-tab.component' ; import { CardTabsService } from '../card-tabs.service' ; @ Component ( { selector : 'ux-card-tabset' , templateUrl : './card-tabset.component.html' , providers : [ CardTabsService ] } ) export class CardTabsetComponent { @ HostBinding ( 'class' ) @ Input ( ) set position ( direction ) { this . tabService . setPosition ( direction ) ; } get position ( ) : string { return this . tabService . position$ . getValue ( ) ; } @ ViewChild ( 'tablist' , { static : true } ) tablist : ElementRef ; offset : number = 0 ; bounds : CardTabsBounds = { lower : 0 , upper : 0 } ; private _width : number ; private _innerWidth : number ; constructor ( public tabService ) { } select ( tab , element ) { this . tabService . select ( tab ) ; this . moveIntoView ( element ) ; } resize ( dimensions ) { this . _width = dimensions . width ; this . _innerWidth = this . tablist . nativeElement . scrollWidth ; this . bounds . lower = 0 ; this . bounds . upper = - ( this . _innerWidth - this . _width ) ; } previous ( ) { this . offset += this . _width ; this . offset = Math . min ( this . offset , this . bounds . lower ) ; } next ( ) { this . offset -= this . _width ; this . offset = Math . max ( this . offset , this . bounds . upper ) ; } private moveIntoView ( element ) { if ( ! this . _width || ! this . _innerWidth ) { return ; } const { offsetLeft , offsetWidth } = element ; const { marginLeft , marginRight } = getComputedStyle ( element ) ; const viewportStart = Math . abs ( this . offset ) ; const viewportEnd = viewportStart + this . _width ; const cardWidth = parseFloat ( marginLeft ) + offsetWidth + parseFloat ( marginRight ) ; if ( offsetLeft < viewportStart ) { this . offset -= ( offsetLeft - parseFloat ( marginLeft ) ) - viewportStart ; } if ( ( offsetLeft + cardWidth ) > viewportEnd ) { this . offset -= ( offsetLeft + cardWidth ) - viewportEnd ; } } } export interface CardTabsBounds { lower : number ; upper : number ; }