import { Component, ContentChild, EventEmitter, HostBinding, Input, OnChanges, OnInit, Output, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core'; import {MatMenu, MenuPositionX, MenuPositionY} from '@angular/material/menu'; import {BdcWalkService} from '../bdc-walk.service'; import {BdcWalkTriggerDirective} from './tutorial-trigger.directive'; @Component({ selector: 'bdc-walk-popup', templateUrl: './tutorial-popup.component.html', styleUrls: ['./tutorial-popup.component.scss'], encapsulation: ViewEncapsulation.None }) export class BdcWalkPopupComponent implements OnInit, OnChanges { @Input() name: string; @Input() header: string; @Input() xPosition: MenuPositionX = 'before'; @Input() yPosition: MenuPositionY = 'below'; @Input() arrow = true; @Input() horizontal = false; @Input() closeOnClick = false; @Input() alignCenter: boolean | undefined; // by default only if size < 70 it will auto-align to center @Input() offsetX = 0; @Input() offsetY = 0; @Input() class = ''; @Input() showCloseButton = true; @Input() showButton = false; @Input() buttonText = 'Got it'; @Input() sideNoteText: string; @Input() mustCompleted: { [taskName: string]: any | boolean } = {}; @Input() mustNotDisplaying: string[] = []; @Input() onCloseCompleteTask: { [taskName: string]: any | boolean } = {}; @Input() onButtonCompleteTask: { [taskName: string]: any | boolean } = {}; @Output() opened = new EventEmitter<void>(); @Output() closed = new EventEmitter<void>(); @HostBinding('attr.class') className = undefined; @ViewChild(MatMenu, { static: true }) menu: MatMenu; @ContentChild(TemplateRef) templateRef: TemplateRef<any>; trigger: BdcWalkTriggerDirective; data: any; constructor(private tutorialService: BdcWalkService) { } ngOnInit() { } ngOnChanges() { if (this.trigger) { this.trigger.reposition(); } } _getClass() { return `bdc-walk-popup ${this.class} ` + (this.arrow ? ' arrow' : '') + (this.horizontal ? ' horizontal' : ''); } getValue(taskName: string): any { return this.tutorialService.getTaskCompleted(taskName); } }