import { animate , state , style , transition , trigger } from '@angular/animations' ; import { ChangeDetectionStrategy , Component , Inject , Optional } from '@angular/core' ; import { LayoutFacade } from '../../../layout-core/+state/layout.facade' ; import { NavLink } from '../../interfaces/nav-link.interface' ; import { NAV_LINKS } from '../../layouts.tokens' ; @ Component ( { selector : 'medium-stories-nav-submenu' , templateUrl : './nav-submenu.component.html' , styleUrls : [ './nav-submenu.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , animations : [ trigger ( 'openClose' , [ state ( 'open' , style ( { top : '0' } ) ) , state ( 'closed' , style ( { top : '-33rem' } ) ) , transition ( '* => open' , [ animate ( '0.5s' ) ] ) , transition ( 'closed => open' , [ animate ( '0.5s' ) ] ) , transition ( 'open => closed' , [ animate ( '0.5s' ) ] ) ] ) ] } ) export class NavSubmenuComponent { constructor ( public layoutFacade , @ Optional ( ) @ Inject ( NAV_LINKS ) public navLinks ) { } param navItemId param navSubItemId hasSubmenu ( navItemId , navSubItemId ) { return ( navItemId !== null && navSubItemId !== null && this . navLinks [ navItemId ] && ! ! this . navLinks [ navItemId ] . children && this . navLinks [ navItemId ] . children [ navSubItemId ] && ! ! this . navLinks [ navItemId ] . children [ navSubItemId ] . children ) ; } param event onMouseleave ( event ) { if ( event . clientY > 112 ) { this . layoutFacade . hideSubMenu ( ) ; } } trackByFn ( index , navLink ) { return navLink . label ; } }