@angular/animations#style TypeScript Examples

LIST_ANIMATION = trigger('listAnimation', [
  state('hidden', style({ opacity: '0.4' })),
  state(
    'shown',
    style({
      opacity: '1'
    })
  ),
  transition('hidden => shown', animate('0.28s ease-in-out'))
])

ANIMATIONS = {
  LIST_ANIMATION: trigger('listAnimation', [
    transition('* <=> *', [
      query(
        ':enter',
        [
          style({
            opacity: 0,
          }),
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 1,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
      query(
        ':leave',
        [
          stagger(100, [
            animate(
              '0.5s ease',
              style({
                opacity: 0,
              })
            ),
          ]),
        ],
        { optional: true }
      ),
    ]),
  ]),
}

slideInOutDownAnimation = [
  trigger(
    "slideInOut",
    [
      state("in", style({
        opacity: 1,
        transform: "translateY(0) scaleY(1)"
      })),
      state("void", style({
        opacity: 0,
        transform: "translateY(-20%) scaleY(0)"
      })),
      transition("void => *", [animate("500ms 200ms ease-out")]),
      transition("* => void", [animate("600ms ease-in")])
    ]
  )
]

function getElementHeight(el) {
  /**
   *
   * TODO: Move helpers in separate common module.
   * TODO: Provide window through di token.
   * */
  const style = window.getComputedStyle(el);
  const marginTop = parseInt(style.getPropertyValue('margin-top'), 10);
  const marginBottom = parseInt(style.getPropertyValue('margin-bottom'), 10);
  return el.offsetHeight + marginTop + marginBottom;
}

@Component({
  selector: 'devtools-app-menu',
  templateUrl: './app-menu.component.html',
  styleUrls: ['./app-menu.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('openCloseMenu', [
      transition(':enter', [
        style({
          width: '0',
        }),
        animate(100, style({width: '*'})),
      ]),
    ]),
  ],
})
export class AppMenuComponent {

  @Output()
  public close = new EventEmitter<void>();  // eslint-disable-line @angular-eslint/no-output-native

  @HostListener('document:keydown.escape')
  public onBackdropClick(): void {
    this.close.emit();
  }

  public onMenuItemClick(): void {
    this.close.emit();
  }
}

@Component({
  selector: 'app-expandable',
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss'],
  animations: [
    trigger('openClose', [
      state('*', style({height: '*'})),
      transition(':enter', [style({height: '0'}), animate('100ms ease')]),
      transition(':leave', [animate('100ms ease', style({height: '0'}))]),
    ])
  ]
})
export class ExpandableComponent {
  @Input() opened: boolean = true;
  @Input() panelTitle: string = '';
  @Input() panelInfo: string = '';

  constructor() { }

  toggle() {
    this.opened = !this.opened;
  }

}

MessageAnimations: {
  readonly inOut: AnimationTriggerMetadata;
} = {
  inOut: trigger('inOut', [
    state(
      'flyRight, flyLeft',
      style({ opacity: 1, transform: 'translateX(0)' }),
    ),
    state('slideDown', style({ opacity: 1, transform: 'translateY(0)' })),
    transition('* => slideDown', [
      style({ opacity: 0, transform: 'translateY(-50%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('slideUp', style({ opacity: 0, 'margin-top': '-50%' })),
    transition('* => slideUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 200ms ease-in-out'),
    ]),

    state('flyLeft', style({ opacity: 1, transform: 'translateX(0)' })),
    transition('* => flyLeft', [
      style({ opacity: 0, transform: 'translateX(5%)' }),
      animate('100ms ease-in-out'),
    ]),
    state('flyUp', style({ opacity: 0, 'margin-top': '-30%' })),
    transition('* => flyUp', [
      style({ opacity: 1, 'margin-top': '0' }),
      animate('100ms 150ms ease-in-out'),
    ]),
    state('void', style({ opacity: 0 })),
    state('true', style({ opacity: 1 })),
    state('false', style({ opacity: 0 })),
    transition('* => true', animate('150ms cubic-bezier(0.0, 0.0, 0.2, 1)')),
    transition('* => void', animate('150ms cubic-bezier(0.4, 0.0, 1, 1)')),
  ]),
}

@Component({
  selector: 'splash',
  templateUrl: './splash.component.html',
  animations: [
  // the fade-in/fade-out animation.
  trigger('fadeOut', [
    transition(':leave', [
      query(':leave', animateChild(), {optional: true}),
      animate(300, style({opacity: 0}))
    ]),
  ]),
],
  styleUrls: ['./splash.component.scss']
})
export class SplashComponent implements OnInit {

  showSplash = false

  constructor() { }

  ngOnInit(): void {
    // Force reset splash key
    // localStorage.removeItem(SPLASH_KEY)

    const show = localStorage.getItem(SPLASH_KEY) === null
    this.showSplash = show
  }

  dontShowSplashAgainClick() {
    console.debug('dontShowSplashAgainClick()')
    localStorage.setItem(SPLASH_KEY, '1')
  }

  onClick() {
    this.showSplash = !this.showSplash
  }

}

/**
   * Animates the reactions
   */
  animate(): boolean {
    try {
      if (!this.emojiWindow.nativeElement.parentElement) {
        return false;
      }

      const height = this.emojiWindow.nativeElement.parentElement.offsetHeight;
      const time = +new Date(); //little trick, gives unix time in ms

      for (let i = 0; i < this.items.length; i++) {
        const item = this.items[i];

        const transformString =
          "translate3d(" + item.x(time) + "px, " + item.y + "px, 0px)";
        item.element.style.transform = transformString;
        item.element.style.visibility = "visible";
        item.y += item.ySpeed;
      }
      this.requestAnimation();
    } catch (error) {
      logger(error);
    }
    return true;
  }

@Component({
  selector: 'app-error-toastr',
  templateUrl: './error-toastr.component.html',
  styleUrls: ['./error-toastr.component.scss'],
  animations: [
    trigger('flyInOut', [
      state('inactive', style({ opacity: 0 })),
      state('active', style({ opacity: 1 })),
      state('removed', style({ opacity: 0 })),
      transition(
        'inactive => active',
        animate('{{ easeTime }}ms {{ easing }}')
      ),
      transition(
        'active => removed',
        animate('{{ easeTime }}ms {{ easing }}')
      )
    ])
  ],
  preserveWhitespaces: false
})
export class ErrorToastrComponent extends Toast {
  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
  }
}

fadeAnimation = trigger('fadeAnimation', [
  transition(':enter', [
    style({
      transform: 'scale3d(1.075, 1.075, 1)',
      opacity: 0,
    }),
    animate('250ms ease-out', style({
      transform: 'scale3d(1, 1, 1)',
      opacity: 1
    })),
  ]),
  transition(':leave', [
    animate('250ms ease-out', style({
      transform: 'scale3d(0.95, 0.95, 1)',
      opacity: 0
    }))
  ])
])

private initShapesLayer = () => {

    const field = this.serverMap['field'];
    const totalSum = this.inject.data.map(row => row[this.dataIndex]).reduce((a, b) => a + b);

    this.geoJson = new L.TopoJSON(this.shapes, {
      style: (feature) => this.style(feature, this.color),
      onEachFeature: this.onEachFeature
    });
  
    this.geoJson.eachLayer((layer) => {
      this.boundaries.push(layer._bounds);
      layer.bindPopup(this.mapUtilsService.makeGeoJsonPopup(layer.feature.properties[field], this.inject.data,
        this.inject.labels, this.labelIdx, totalSum), this.customOptions);
      layer.on('mouseover', function () { layer.openPopup(); });
      layer.on('mouseout', function () { layer.closePopup(); });
      layer.on("click", () => this.openLinkedDashboard(layer.feature.properties.name))
    });
    if (this.map) {

      this.geoJson.addTo(this.map);
      if (this.inject.zoom) this.map.zoom = this.inject.zoom
      else this.map.fitBounds(this.boundaries);

    }else{
      console.log('map not yet ready');
    }

    this.geoJson.on('add', this.onloadLayer());
  }

fadeAnimation = trigger('fadeAnimation', [
    transition(':enter', [
        style({
            transform: 'scale3d(1.075, 1.075, 1)',
            opacity: 0,
        }),
        animate('250ms ease-out', style({
            transform: 'scale3d(1, 1, 1)',
            opacity: 1
        })),
    ]),
    transition(':leave', [
        animate('250ms ease-out', style({
            transform: 'scale3d(0.95, 0.95, 1)',
            opacity: 0
        }))
    ])
])

defaultRouterTransition = trigger('defaultRouterAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({opacity: 0,})],
      {optional: true}
    ),
    query(
      ':leave',
      [style({opacity: 1,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 0}))],
      {optional: true}
    ),
    query(
      ':enter',
      [style({opacity: 0,}), animate('0.3s cubic-bezier(.785, .135, .15, .86)', style({opacity: 1}))],
      {optional: true}
    )
  ])
])

export function collapseButtonAnimations(timings: number | string): AnimationTriggerMetadata[] {
    return [
        trigger('toggleCollapsed', [
            state('0', style({transform: 'rotate(0deg)'})),
            state('1', style({transform: 'rotate(-180deg)'})),
            transition('0 <=> 1', [
                animate(timings)
            ])
        ]),
    ];
}

public static fadeIn = [
    trigger('fadeIn', [
      transition(':enter', [
        style({
          opacity: 0
        }),
        animate(400)
      ]),
      transition(':leave', [
        style({
          display: 'none'
        })
      ]),
    ])
  ];

reusable = animation(
  [
    style({
      opacity: "{{opacity}}",
      transform: "scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})"
    }),
    animate("{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)", style("*"))
  ],
  {
    params: {
      duration: "200ms",
      delay: "0ms",
      opacity: "0",
      scale: "1",
      x: "0",
      y: "0",
      z: "0"
    }
  }
)

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss'],
  animations: [
    trigger('toggleHeight', [
      state('inactive', style({
        height: '0',
        opacity: '0'
      })),
      state('active', style({
        height: '*',
        opacity: '1'
      })),
      transition('inactive => active', animate('200ms ease-in')),
      transition('active => inactive', animate('200ms ease-out'))
    ])
  ]
})
export class NavigationComponent implements OnInit {
  sidebarVisible: boolean;
  navigationSubState: any = {
    Icon: 'inactive',
    Component: 'inactive',
    Directive: 'inactive',
    Error: 'inactive',
    Form: 'inactive'
  };

  constructor(private navigationService: NavigationService) {
    navigationService.sidebarVisibilitySubject.subscribe((value) => {
      this.sidebarVisible = value;
    });
  }

  toggleNavigationSub(menu, event) {
    event.preventDefault();
    this.navigationSubState[menu] = (this.navigationSubState[menu] === 'inactive' ? 'active' : 'inactive');
  }

  ngOnInit() {
  }
}

private onScreenMovement() {
    this.setPosition();
    this.setPositionY();
    if (!this.panelRef.nativeElement.style.transition) {
      this.panelRef.nativeElement.style.transition = "transform 0.5s ease-out";
    }
  }

@Component({
  selector: 'app-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: ['./side-nav.component.scss'],
  animations: [
    trigger('indicatorRotate', [
      state('collapsed', style({ transform: 'rotate(0deg)' })),
      state('expanded', style({ transform: 'rotate(180deg)' })),
      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
    ]),
  ],
})
export class SideNavComponent implements OnInit {
  constructor(public navService: NavService, public router: Router, public route: ActivatedRoute) {
    if (this.depth === undefined) {
      this.depth = 0;
    }
  }

  // tslint:disable:member-ordering
  expanded: boolean = false;
  @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
  @Input() depth: number;
  // tslint:enable:member-ordering
  @Input() item: NavItem;

  isActive(): boolean {
    return this.router.isActive(
      this.router.createUrlTree([this.item.route], { relativeTo: this.route }).toString(),
      true,
    );
  }

  ngOnInit() {
    // subscribing to the url, if the item has a route and url, then it doesn't have children and expanded is set to 0.
    this.navService.currentUrl.subscribe((url: string) => {
      if (this.item.route && url) {
        this.expanded = url.indexOf(`/${this.item.route}`) === 0;
        this.ariaExpanded = this.expanded;
      }
    });
  }

  onItemSelected(item: NavItem) {
    if (!item.children || !item.children.length) {
      this.router.navigate([item.route], {
        relativeTo: this.route,
        state: {
          item,
        },
      });
    }
    if (item.children && item.children.length) {
      this.expanded = !this.expanded;
    }
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [
    trigger('socialBtnText', [
      state(
        'btn-active-text',
        style({
          width: '80px',
          visibility: 'visible',
        })
      ),
      state(
        'btn-inactive-text',
        style({
          width: '0px',
          visibility: 'hidden',
        })
      ),
      transition('btn-active-text => btn-inactive-text', [
        group([
          animate(
            '0s',
            style({
              width: '80px',
            })
          ),
          animate(
            '0s',
            style({
              visibility: 'hidden',
            })
          ),
        ]),
      ]),
      transition('btn-inactive-text => btn-active-text', [
        animate(
          '0.3s ease',
          style({
            width: '80px',
          })
        ),
        animate(
          '0.3s ease',
          style({
            visibility: 'visible',
          })
        ),
      ]),
    ]),
  ],
})
export class AppComponent {
  title = 'ng-dynamic-components';
  selectedCardType: SocialCardType;
  cardTypes = SocialCardType;

  setCardType(type: SocialCardType) {
    this.selectedCardType = type;
  }
}

@Component({
  selector: 'devtools-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: [
    trigger('openCloseMenu', [
      transition(':enter', [
        style({
          width: '0',
        }),
        animate(100, style({width: '*'})),
      ]),
    ]),
  ],
})
export class AppComponent implements OnDestroy {
  public showPrimaryOutlet = true;
  public showDetailsOutlet = false;
  public menuOpen = false;
  public readonly connnectedToHost = MicrofrontendPlatform.isConnectedToHost();

  private _destroy$ = new Subject<void>();

  constructor(private _shellService: ShellService, private _cdRef: ChangeDetectorRef) {
    this.installNavigationEndListener();
  }

  private installNavigationEndListener(): void {
    this._shellService.isDetailsOutletActive$()
      .pipe(takeUntil(this._destroy$))
      .subscribe(isDetailsOutletActive => {
        this.showDetailsOutlet = isDetailsOutletActive;

        // Force showing primary outlet if details outlet is deactivated through navigation
        if (!isDetailsOutletActive) {
          this.showPrimaryOutlet = true;
        }

        this._cdRef.markForCheck();
      });
  }

  public get primaryTitle$(): Observable<string> {
    return this._shellService.primaryTitle$;
  }

  public get detailsTitle$(): Observable<string> {
    return this._shellService.detailsTitle$;
  }

  public onCollapsePrimaryClick(): void {
    this.showPrimaryOutlet = false;
  }

  public onExpandPrimaryClick(): void {
    this.showPrimaryOutlet = true;
  }

  public onDetailsDblClick(): void {
    this.showPrimaryOutlet = !this.showPrimaryOutlet;
  }

  public onOpenMenuClick(): void {
    this.menuOpen = true;
  }

  @HostListener('document:keydown.escape')
  public onMenuClose(): void {
    this.menuOpen = false;
  }

  public ngOnDestroy(): void {
    this._destroy$.next();
  }
}

@Component({
	selector: 'app-store-subscribe-promotion',
	templateUrl: 'subscribe-promotion.component.html',
	styleUrls: ['subscribe-promotion.component.scss'],
	animations: [
		trigger('zwRotation', [
			state('in', style({ transform: 'scale(1)' })),
			state('out', style({ transform: 'scale(0)' })),

			transition('in => out', animate(100)),
			transition('out => in', animate(100)),
		])
	]
})

export class StoreSubscribePromotionComponent implements OnInit {
	@Input() subscription: EgVault.Subscription | null = null;
	zeroWidthRotation = [
		{ emoteUrl: '/assets/brand/promo/zerowidth-emote1.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote1z.webp' },
		{ emoteUrl: '/assets/brand/promo/zerowidth-emote2.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote2z.webp' },
		{ emoteUrl: '/assets/brand/promo/zerowidth-emote3.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote3z.webp' },
		{ emoteUrl: '/assets/brand/promo/zerowidth-emote4.webp', modifierUrl: '/assets/brand/promo/zerowidth-emote4z.webp' }
	] as StoreSubscribePromotionComponent.ZeroWidthCombination[];
	zwTransition = new BehaviorSubject <'in' | 'out' | null>('in');
	currentZeroWidth = new BehaviorSubject<StoreSubscribePromotionComponent.ZeroWidthCombination>(this.zeroWidthRotation[0]);

	constructor(
		public themingService: ThemingService,
		public clientService: ClientService,
		private dialog: MatDialog
	) {}

	uploadCustomAvatar(): void {
		this.dialog.open(CustomAvatarDialogComponent);
	}

	getUserColor(): Observable<string> {
		return this.clientService.getColor().pipe(
			map(s => s === 'currentColor' ? '' : s)
		);
	}

	ngOnInit(): void {
		const nextRotation = (at: number) => {
			const cur = this.zeroWidthRotation[at];

			if (typeof cur !== 'undefined') {
				setTimeout(() => this.zwTransition.next('out'), 2500);
				setTimeout(() => {
					this.zwTransition.next('in');
					this.currentZeroWidth.next(cur);
					nextRotation(at +  1);
				}, 3000);
			} else {
				nextRotation(0);
			}
		};
		nextRotation(0);
	}
}

@Component({
  selector: 'aui-accordion-item',
  templateUrl: 'accordion-item.component.html',
  styleUrls: ['accordion-item.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
  preserveWhitespaces: false,
  animations: [
    trigger('expand', [
      state('*', style({ height: 0 })),
      state('expanded', style({ height: '*' })),
      transition('* <=> expanded', [animate('0.1s ease-in-out')]),
    ]),
  ],
  viewProviders: [AccordionItemComponent],
})
export class AccordionItemComponent
  extends CdkAccordionItem
  implements AfterContentInit
{
  @Input()
  background = true;

  @ContentChild(AccordionItemContentDirective, {
    read: TemplateRef,
    static: true,
  })
  _lazyContentTpl: TemplateRef<unknown>;

  lazyContentTpl: TemplateRef<unknown>;

  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
  constructor(
    accordion: AccordionComponent,
    cdr: ChangeDetectorRef,
    uniqueSelectionDispatcher: UniqueSelectionDispatcher,
  ) {
    super(accordion, cdr, uniqueSelectionDispatcher);
  }

  ngAfterContentInit() {
    if (this._lazyContentTpl) {
      // Render the content as soon as the accordion becomes open.
      this.opened
        .pipe(
          startWith(null as void),
          filter(() => !!this.expanded),
          take(1),
        )
        .subscribe(() => {
          this.lazyContentTpl = this._lazyContentTpl;
        });
    }
  }
}

speedDialFabAnimations = [
  trigger('fabToggler', [
    state('false', style({
      transform: 'rotate(0deg)'
    })),
    state('true', style({
      transform: 'rotate(225deg)'
    })),
    transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
  ]),
  trigger('fabsStagger', [
    transition('* => *', [

      query(':enter', style({opacity: 0}), {optional: true}),

      query(':enter', stagger('40ms',
        [
          animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
            keyframes(
              [
                style({opacity: 0, transform: 'translateY(10px)'}),
                style({opacity: 1, transform: 'translateY(0)'}),
              ]
            )
          )
        ]
      ), {optional: true}),

      query(':leave',
        animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
          keyframes([
            style({opacity: 1}),
            style({opacity: 0}),
          ])
        ), {optional: true}
      )

    ])
  ])
]

@Component({
    selector: 'app-menu-list-item',
    templateUrl: './menu-list-item.component.html',
    styleUrls: ['./menu-list-item.component.css'],
    animations: [
        trigger('indicatorRotate', [
            state('collapsed', style({ transform: 'rotate(0deg)' })),
            state('expanded', style({ transform: 'rotate(180deg)' })),
            transition('expanded <=> collapsed',
                animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
            ),
        ])
    ]
})
export class MenuListItemComponent implements OnInit {
    expanded: boolean = false;

    @HostBinding('attr.aria-expanded') ariaExpanded = this.expanded;
    @Input() item: NavItem;
    @Input() depth: number;

  constructor(public navService: NavService, public router: Router,
    private authenticationService: AuthenticationService, private dialog: MatDialog) {

        if (this.depth === undefined) {
            this.depth = 0;
        }
    }

    ngOnInit() {
        this.navService.getCurrentUrl().subscribe((url: string) => {
            if (this.item.route) {
                this.expanded = url.indexOf(`/${this.item.route}`) === 0;
                this.ariaExpanded = this.expanded;
            }
        });
    }

    onItemSelected(item: NavItem) {
        this.dialog.closeAll();

        if (!item.children || !item.children.length) {
            if (item.route) {
                this.router.navigate([item.route]);
            } else {
                this.handleSpecial(item);
            }
        } 

        if (item.children && item.children.length) {
            this.expanded = !this.expanded;
        }
    }

    handleSpecial(item: NavItem) {
        if (item.displayName == 'Sign Out') {
            this.handleSignOut();
        }
    }

    handleSignOut() {
        const dialogData = new ConfirmationDialogModel('Confirm', 'Are you sure you want to logout?');
        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
            maxWidth: '400px',
            closeOnNavigation: true,
            data: dialogData
        })

        dialogRef.afterClosed().subscribe(dialogResult => {
          if (dialogResult) {
              this.authenticationService.logout();
            }
        });
  }
}

@Component({
  selector: 'app-menu-sheet',
  templateUrl: './menu-sheet.component.html',
  styleUrls: ['./menu-sheet.component.scss'],
  animations: [
    trigger('enterTrigger', [
      state('fadeIn', style({
        opacity: '1',
        transform: 'translateY(0%)'
      })),
      transition('void => *', [style({ opacity: '0', transform: 'translateY(50%)' }), animate('500ms')])
    ])
  ]
})
export class MenuSheetComponent implements OnInit {
  public menu: MenuSheetMenu = null;
  public selectedMenu: MenuSheetMenu = null;

  private navStack = new Stack<MenuSheetMenu>();

  constructor(
    private navParams: NavParams,
    public theme: GlobalThemeService,
    private modalCtrl: ModalController,
    private nav: GlobalNavService
  ) { }

  ngOnInit(): void {
    let options = this.navParams.data as MenuSheetComponentOptions;
    this.menu = options.menu;
    this.selectedMenu = this.menu;
  }

  ionViewWillEnter() {
  }

  public onMenuItemClicked(menuItem: MenuSheetMenu) {
    if (menuItem.items) {
      this.navStack.push(this.selectedMenu); // Saves the current menu to be able to go back
      this.selectedMenu = menuItem; // Enters the submenu
    }
    else {
      this.dismiss();

      if (typeof menuItem.routeOrAction === "string")
        void this.nav.navigateTo(null, menuItem.routeOrAction);
      else {
        void menuItem.routeOrAction();
      }
    }
  }

  public canGoBack(): boolean {
    return this.navStack.length > 0;
  }

  public goBack() {
    let previousMenu = this.navStack.pop();
    this.selectedMenu = previousMenu;
  }

  private dismiss() {
    void this.modalCtrl.dismiss();
  }
}

fadeInSteps = [
  style({
    opacity: 0,
    // transform: 'translateY(-10px)'
  }),
  // animate(1000)
  animate('500ms ease-in')
]

@Component({
  selector: 'app-banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.less'],
  animations: [
    trigger('openClose', [
      state('open', style({ transform: 'translateY(0%)' })),
      state('closed', style({ transform: 'translateY(-100%)', display: 'none'})),
      transition('open => closed', [
        sequence([
          animate('0.25s 0s ease-in', keyframes([
            style({transform: 'translateY(0%)'}),
            style({transform: 'translateY(-100%)'})
          ])),
          style({display: 'none'})
        ])
      ]),
      transition('closed => open', [
        sequence([
          style({display: 'flex'}),
          animate('0.25s 0s ease-out', keyframes([
            style({transform: 'translateY(-100%)'}),
            style({transform: 'translateY(0%)'})
          ]))
        ])
      ])
    ])
  ]
})
export class BannerComponent implements OnInit {

  @Input() message: string = null;
  @Input() buttonMessage: string = null;
  @Output() result = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  close(value) {
    this.message = null;
    this.result.emit(value);
  }

}