import { Observable , Subject , animationFrameScheduler , auditTime , combineLatest , defer , finalize , fromEvent , map , mapTo , merge , startWith , takeLast , takeUntil , tap } from "rxjs" ; import { getElement , getElementOffset , getElementSize , getElements , watchElementSize } from "~/browser" ; import { Component } from "../../_" ; /**
 * Content tabs
 */ export interface ContentTabs { active : HTMLLabelElement ; } param el returns export function watchContentTabs ( el ) { const inputs = getElements ( ":scope > input" , el ) ; return merge ( ... inputs . map ( input => fromEvent ( input , "change" ) . pipe ( mapTo < ContentTabs > ( { active : getElement ( `label[for=${ input . id }]` ) } ) ) ) ) . pipe ( startWith ( { active : getElement ( `label[for=${ inputs [ 0 ] . id }]` ) } as ContentTabs ) ) ; } param el returns export function mountContentTabs ( el ) { const container = getElement ( ".tabbed-labels" , el ) ; return defer ( ( ) => { const push$ = new Subject < ContentTabs > ( ) ; combineLatest ( [ push$ , watchElementSize ( el ) ] ) . pipe ( auditTime ( 1 , animationFrameScheduler ) , takeUntil ( push$ . pipe ( takeLast ( 1 ) ) ) ) . subscribe ( { next ( [ { active } ] ) { const offset = getElementOffset ( active ) ; const { width } = getElementSize ( active ) ; el . style . setProperty ( "--md-indicator-x" , `${ offset . x }px` ) ; el . style . setProperty ( "--md-indicator-width" , `${ width }px` ) ; container . scrollTo ( { behavior : "smooth" , left : offset . x } ) ; } , complete ( ) { el . style . removeProperty ( "--md-indicator-x" ) ; el . style . removeProperty ( "--md-indicator-width" ) ; } } ) ; return watchContentTabs ( el ) . pipe ( tap ( state => push$ . next ( state ) ) , finalize ( ( ) => push$ . complete ( ) ) , map ( state => ( { ref : el , ... state } ) ) ) ; } ) ; }