import { TimelineLite , Sine , SlowMo } from 'gsap' ; import { createMaybeRandomTween } from '../../../../shared/lib/maybe-random' ; const { customElement } = Polymer . decorators ; /**
 * The options argument for the `show` and `change` methods in gdq-omnibar-label.
 * avatarIconName - The name of the icon to use for the avatar. Must be present in gdq-omnibar-icons.
 * flagHoldDuration - How long, in seconds, to display the flag before hiding it.
 * ringColor - The color to apply to the ring around the label icon.
 * flagColor - The color to apply to the expanded rect that sometimes shows around the label.
 */ export interface LabelShowAndChangeOptions { avatarIconName : string ; flagHoldDuration : number ; ringColor : string ; flagColor : string ; } const FLAG_ENTRANCE_DURATION = 0.334 ; @ customElement ( 'gdq-omnibar-label' ) export default class GDQOmnibarLabelElement extends Polymer . Element { _showing : boolean ; ready ( ) { super . ready ( ) ; this . show = this . show . bind ( this ) ; this . change = this . change . bind ( this ) ; this . playFlag = this . playFlag . bind ( this ) ; this . hide = this . hide . bind ( this ) ; } param text param options returns show ( text , { avatarIconName , flagHoldDuration , ringColor , flagColor } ) { const showTL = new TimelineLite ( ) ; showTL . set ( this , { '--gdq-omnibar-label-ring-color' : ringColor , '--gdq-omnibar-label-flag-color' : flagColor } ) ; showTL . set ( this . $ [ 'avatar-icon' ] , { icon : `omnibar:${ avatarIconName }` } ) ; showTL . set ( this . $ [ 'flag-text' ] , { textContent : text } ) ; showTL . add ( createMaybeRandomTween ( { target : ( this . $ . avatar as HTMLDivElement ) . style , propName : 'opacity' , duration : 0.465 , start : { probability : 1 , normalValue : 1 } , end : { probability : 0 , normalValue : 1 } } ) ) ; showTL . add ( this . playFlag ( flagHoldDuration ) ) ; showTL . call ( ( ) => { this . _showing = true ; } ) ; return showTL ; } param text param options returns change ( text , { avatarIconName , flagHoldDuration , ringColor , flagColor } ) { const changeTL = new TimelineLite ( ) ; changeTL . add ( this . playFlag ( flagHoldDuration ) , 0 ) ; changeTL . to ( this . $ [ 'avatar-icon' ] , 0.182 , { opacity : 0 , ease : Sine . easeIn , onComplete : ( ) => { ( this . $ [ 'avatar-icon' ] as IronIconElement ) . icon = `omnibar:${ avatarIconName }` ; ( this . $ [ 'flag-text' ] as HTMLDivElement ) . textContent = text ; createMaybeRandomTween ( { target : ( this . $ [ 'avatar-icon' ] as IronIconElement ) . style , propName : 'opacity' , duration : 0.465 , start : { probability : 1 , normalValue : 1 } , end : { probability : 0 , normalValue : 1 } } ) ; } } , 0 ) ; changeTL . set ( this . $ [ 'avatar-icon' ] , { opacity : 1 } ) ; changeTL . to ( this . $ [ 'avatar-ring' ] , FLAG_ENTRANCE_DURATION , { rotation : '+=360' , ease : Sine . easeInOut } , 0 ) ; changeTL . to ( this , FLAG_ENTRANCE_DURATION , { '--gdq-omnibar-label-ring-color' : ringColor , '--gdq-omnibar-label-flag-color' : flagColor , ease : Sine . easeInOut } , 0 ) ; return changeTL ; } param holdDuration returns playFlag ( holdDuration ) { const playFlagTL = new TimelineLite ( ) ; playFlagTL . addLabel ( 'enter' , '+=0' ) ; playFlagTL . addLabel ( 'exit' , `enter+=${ holdDuration }` ) ; playFlagTL . to ( this . $ . avatar , 0.232 , { x : 5 , ease : Sine . easeInOut } , 'enter' ) ; playFlagTL . fromTo ( this . $ . flag , FLAG_ENTRANCE_DURATION , { clipPath : 'inset(0 100% 0 0)' } , { clipPath : 'inset(0 0% 0 0)' , immediateRender : false , ease : Sine . easeInOut } , 'enter' ) ; playFlagTL . fromTo ( this . $ . flag , FLAG_ENTRANCE_DURATION , { clipPath : 'inset(0 0% 0 0)' } , { clipPath : 'inset(0 100% 0 0)' , immediateRender : false , ease : Sine . easeInOut } , 'exit' ) ; playFlagTL . to ( this . $ . avatar , 0.232 , { x : 0 , ease : Sine . easeInOut } , `exit+=${ FLAG_ENTRANCE_DURATION - 0.232 }` ) ; return playFlagTL ; } returns hide ( ) { const hideTL = new TimelineLite ( ) ; hideTL . to ( this . $ . avatar , 0.434 , { opacity : 0 , ease : SlowMo . ease . config ( 0.5 , 0.7 , false ) } ) ; hideTL . call ( ( ) => { this . _showing = false ; } ) ; return hideTL ; } }