@angular/core#AfterViewInit TypeScript Examples

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements AfterViewInit {
    ngOnInit() {
  }
    ngAfterViewInit() {
    }
}

@Component({
  selector: 'app-site-request',
  templateUrl: './site-request.component.html',
  styleUrls: ['./site-request.component.scss']
})
export class SiteRequestComponent implements OnInit, AfterViewInit {
  showModal = false;
  @Output() deny: EventEmitter<void> = new EventEmitter<void>();
  @Output() accept: EventEmitter<void> = new EventEmitter<void>();

  @Input() host!: string;
  @Input() origin!: string;
  @Input() permissions!: Pick<ISiteConnection, 'canRequestSign' | 'canRequestPublicKey'>;
  now: Date = new Date();

  constructor() { }

  ngOnInit(): void {
  }

  async ngAfterViewInit(): Promise<void> {
    await new Promise(resolve => setTimeout(resolve, 100)); // hack because for some reason Angular is not working as we want
    this.showModal = true;
  }

  onAccept(): void {
    this.accept.emit();
  }

  async onClose(): Promise<void> {
    this.showModal = false;
    await new Promise(resolve => setTimeout(resolve, 300)); // This is to wait until the animation is done
    this.deny.emit();
  }

}

@Component({
  selector: 'da-analysis',
  templateUrl: './analysis.component.html',
  styleUrls: ['./analysis.component.scss'],
})
export class AnalysisComponent implements OnInit, AfterViewInit {
  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    window.dispatchEvent(new Event('resize'));
  }
}

@Component({
  selector: 'app-component-typeahead',
  templateUrl: './typeahead.component.html'
})
export class TypeaheadComponent implements AfterViewInit {
  selected: string;
  states: string[];

  constructor(private typeaheadService: TypeaheadService) {
  }

  ngAfterViewInit() {
    this.states = this.typeaheadService.states;
  }
}

@Component({
  selector: 'fa-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.css']
})
export class LayoutComponent implements OnInit, AfterViewInit {

  constructor(public settings: SettingsService) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    initLayout();
  }

}

@Component({
  selector: 'app-browse',
  templateUrl: './browse.component.html',
  styleUrls: ['./browse.component.scss']
})
export class BrowseComponent implements AfterViewInit {

  @ViewChild('resultTable', { static: true }) resultTable: ResultTableComponent
  @ViewChild('chartSidebar', { static: true }) chartSidebar: ChartSidebarComponent
  @ViewChild('statusBar', { static: true }) statusBar: StatusBarComponent

  constructor(private searchService: SearchService) { }

  ngAfterViewInit() {
    const $tableColumn = $('#table-column')
    $tableColumn.on('scroll', () => {
      const pos = $tableColumn[0].scrollTop + $tableColumn[0].offsetHeight
      const max = $tableColumn[0].scrollHeight
      if (pos >= max - 5) {
        this.searchService.updateScroll()
      }
    })

    this.searchService.onNewSearch(() => {
      $tableColumn.scrollTop(0)
    })
  }
}

@Component({
  selector: 'lg-side-nav',
  templateUrl: './side-nav.component.html',
  styleUrls: [ './side-nav.component.scss' ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class LgSideNavComponent implements AfterViewInit, OnDestroy {
  private ngUnsubscribe: Subject<void> = new Subject<void>();

  @HostBinding('class.lg-side-nav') class = true;

  @ContentChildren(forwardRef(() => LgSideNavBarLinkDirective), {
    descendants: true,
  })
  navQueryList: QueryList<LgSideNavBarLinkDirective>;

  @ContentChild(LgSideNavContentComponent, { read: ElementRef })
  sideNavContent: ElementRef;

  ngAfterViewInit(): void {
    this.navQueryList.forEach((navItem: LgSideNavBarLinkDirective) => {
      navItem.activated
        .pipe(takeUntil(this.ngUnsubscribe))
        .subscribe(() => this.focusContent());
    });
  }

  focusContent(): void {
    this.sideNavContent.nativeElement.focus();
  }

  ngOnDestroy(): void {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

@Component({
  selector: 'dynhooks-childtest',
  templateUrl: './childTest.c.html',
  styleUrls: ['./childTest.c.scss'],
})
export class ChildTestComponent implements DoCheck, OnInit, OnChanges, AfterViewInit, OnDestroy {

  constructor(private cd: ChangeDetectorRef, @Optional() @Inject(BLUBBSERVICETOKEN) private blubbService: any) {
    console.log('CHILD_TEST', this.blubbService);
  }


  ngOnInit () {
    // console.log('textbox init');
  }

  ngOnChanges(changes: any) {
    // console.log('textbox changes');
  }

  ngDoCheck() {
    // console.log('textbox doCheck');
  }

  ngAfterViewInit() {
    // console.log('textbox afterviewinit');
  }

  ngOnDestroy() {
    // console.log('textbox destroy');
  }

}

@Component({
  selector: 'app-project-status',
  templateUrl: './project-status.component.html',
  styleUrls: ['./project-status.component.scss'],
})
export class ProjectStatusComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(public projectApiService: ProjectApiService) {}
  licenseStatusCode = 'unknown';
  @Input() project: Project;
  projectStatus$: Observable<ProjectScanStateDto>;
  securityStatusCode = 'unknown';

  ngAfterViewInit(): void {
    this.projectStatus$ = this.projectApiService.projectIdStatsProjectScanStatusGet(`${this.project.id}`);
    this.projectStatus$.pipe(untilDestroyed(this)).subscribe(status => {
      this.licenseStatusCode = status.licenseStatus.code;
      this.securityStatusCode = status.securityStatus.code;
    });
  }

  ngOnDestroy(): void {}

  ngOnInit() {}
}

@Component({
  selector: 'app-the-amazing-list',
  templateUrl: './the-amazing-list.component.html',
  styleUrls: ['./the-amazing-list.component.scss'],
  host: { role: 'list' },
})
export class TheAmazingListComponent implements OnInit, AfterViewInit {
  @Input() listItems: Partial<AppUserCard>[] = [];
  @ViewChildren(TheAmazingListItemComponent)
  listItemsElements: QueryList<TheAmazingListItemComponent>;
  private listKeyManager: FocusKeyManager<TheAmazingListItemComponent>;

  @HostListener('window:keydown', ['$event'])
  onKeydown(event) {
    this.listKeyManager.onKeydown(event);
  }

  constructor() {}

  ngOnInit(): void {}

  ngAfterViewInit() {
    this.listKeyManager = new FocusKeyManager(this.listItemsElements);
  }
}

@Component({
  templateUrl: './share-dialog.component.html',
  styleUrls: ['./share-dialog.component.scss']
})
export class ShareDialogComponent implements AfterViewInit {

  public link = new FormControl(this.data.url);

  @ViewChild('shareLink') private linkElement: ElementRef;

  constructor(
    public dialogRef: MatDialogRef<ShareDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: ShareDialogData,
  ) { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.linkElement.nativeElement.select();
  }

}

@Component({
  selector: 'ngx-tiny-mce',
  template: '',
})
export class TinyMCEComponent implements OnDestroy, AfterViewInit {

  @Output() editorKeyup = new EventEmitter<any>();

  editor: any;

  constructor(
    private host: ElementRef,
    private locationStrategy: LocationStrategy,
  ) { }

  ngAfterViewInit() {
    tinymce.init({
      target: this.host.nativeElement,
      plugins: ['link', 'paste', 'table'],
      skin_url: `${this.locationStrategy.getBaseHref()}assets/skins/lightgray`,
      setup: editor => {
        this.editor = editor;
        editor.on('keyup', () => {
          this.editorKeyup.emit(editor.getContent());
        });
      },
      height: '320',
    });
  }

  ngOnDestroy() {
    tinymce.remove(this.editor);
  }
}

@Component({
  templateUrl: './template.html',
  styleUrls: ['./style.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PaletteComponent implements AfterViewInit {
  @ViewChild('ref')
  private readonly ref: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    Array.from(this.ref.nativeElement.querySelectorAll('.indicator'))
      .map(el => {
        const bgColor = getComputedStyle(el).backgroundColor;
        if (bgColor === 'rgba(0, 0, 0, 0)') {
          return () => {
            // do nothing
          };
        }
        const color =
          bgColor +
          ', #' +
          bgColor
            .slice(4, -1)
            .split(',')
            .map(v => parseInt(v.trim()).toString(16).padStart(2, '0'))
            .join('');
        const slot = el.querySelector('.value');
        return () => {
          slot.innerHTML = color;
        };
      })
      .forEach(fn => fn());
  }
}

/**
 * [EmptyState Component](https://brightlayer-ui-components.github.io/angular/?path=/info/components-empty-state--readme)
 *
 * The `<blui-empty-state>` component can display a particular icon, text, and actions.
 * Icon components are passed as a child element with the `emptyIcon` attribute - these will typically be a Material icon, Brightlayer UI icon, or Progress Icon.
 */
@Component({
    selector: 'blui-empty-state',
    templateUrl: './empty-state.component.html',
    styleUrls: ['./empty-state.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    host: {
        class: 'blui-empty-state',
    },
})
export class EmptyStateComponent implements AfterViewInit {
    /** The secondary text to display (second line) */
    @Input() description: string;
    /** The primary text to display (first line) */
    @Input() title: string;

    /** Used to check if an icon has been provided ngAfterViewInit */
    @ViewChild('emptyIcon') emptyIcon: ElementRef;

    ngAfterViewInit(): void {
        const required = { selector: 'emptyIcon', ref: this.emptyIcon };
        requireContent([required], this);
    }
}

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class HeaderComponent implements AfterViewInit {
    public routes: any[];
    public app_version = app_package["version"];

    @ViewChild('linkMenu', {static: false})
    private linkMenu: ElementRef;

    constructor(private route: ActivatedRoute) {
        this.routes = stixRoutes;
    }

    ngAfterViewInit() {
        setTimeout(() => this.onResize(), 1000); //very hacky workaround: check menu size after 1 second to allow stuff to load
    }

    public showHamburger: boolean = false;

    @HostListener('window:resize', ['$event'])
    public onResize(event?: any) {
         //if the element overflows, show hamburger instead
        this.showHamburger = this.linkMenu.nativeElement.offsetWidth < this.linkMenu.nativeElement.scrollWidth;
    }

}

@Component({
  selector: 'app-search-page',
  templateUrl: './search-page.component.html',
  styleUrls: ['./search-page.component.scss'],
})
export class SearchPageComponent implements AfterViewInit {
  public constructor(private engineService: EngineService) {}

  public executeSearch() {
    this.engineService.get().executeFirstSearch();
  }

  public ngAfterViewInit(): void {
    this.executeSearch();
  }
}

@Component({
  selector: 'app-share-report',
  templateUrl: './share-report.component.html',
  styleUrls: ['./share-report.component.scss'],
})
export class ShareReportComponent implements OnInit, AfterViewInit {
  @ViewChild('simpleEmailInput') simpleEmailInput: ElementRef;

  email = '';

  constructor(private modalController: ModalController) {}

  async cancel() {
    await this.modalController.dismiss();
  }

  shareReport(emailInput) {
    if (!(emailInput.value.trim().length > 0) || emailInput.invalid) {
      return;
    }

    if (emailInput.valid) {
      this.modalController.dismiss({
        email: this.email,
      });
    } else {
      emailInput.control.markAllAsTouched();
    }
  }

  ngOnInit() {}

  ngAfterViewInit() {
    const emailInputField = this.simpleEmailInput.nativeElement as HTMLInputElement;
    setTimeout(() => {
      emailInputField.focus();
    }, 600);
  }
}

@Directive({
  selector: '[appLoading]'
})
export class LoadingDirective implements AfterViewInit, OnDestroy {
  componentDestroyed$: Subject<boolean> = new Subject<boolean>();

  appLoading$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  @Input() set appLoading(status: boolean | null) {
    this.appLoading$.next(status || false);
  }

  // Todo: In the future maybe we could make this dinamyc IE use multiple kinds of loading
  loadingComponentRef!: ComponentRef<PulseLoadingComponent>;
  rootNode!: HTMLElement;

  constructor(
    private readonly el: ElementRef,
    private readonly vcr: ViewContainerRef,
    private readonly renderer: Renderer2,
    private readonly componentFactoryResolver: ComponentFactoryResolver,
  ) { }

  appLoadingSubscription: Subscription = this.appLoading$
    .pipe(takeUntil(this.componentDestroyed$))
    .pipe(filter(status => !(!status && !this.loadingComponentRef)))
    .subscribe((status) => {
      if (!!status) {
        this.loadingComponentRef = this.componentFactoryResolver.resolveComponentFactory(PulseLoadingComponent)
          .create(this.vcr.injector);

        this.rootNode = (this.loadingComponentRef.hostView as EmbeddedViewRef<ApplicationRef>).rootNodes[0] as HTMLElement;

        this.renderer.appendChild(this.el.nativeElement, this.rootNode);
      } else {
        this.renderer.removeChild(this.el.nativeElement, this.rootNode);
        this.loadingComponentRef.destroy();
      }
    });

  ngAfterViewInit(): void {
  }

  ngOnDestroy(): void {
    this.componentDestroyed$.next();
    this.componentDestroyed$.complete();
  }

}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [TuiDestroyService]
})
export class UserProfileComponent implements AfterViewInit {
  constructor(
    private readonly headerStore: HeaderStore,
    private readonly router: Router,
    private readonly cdr: ChangeDetectorRef,
    private readonly authService: AuthService,
    private readonly walletConnectorService: WalletConnectorService,
    private translateService: TranslateService,
    @Inject(TuiDialogService) private readonly dialogService: TuiDialogService,
    @Inject(Injector) private injector: Injector,
    @Inject(WINDOW) private readonly window: Window,
    @Self() private readonly destroy$: TuiDestroyService
  ) {
    this.isMobile$ = this.headerStore.getMobileDisplayStatus();
    this.isConfirmModalOpened$ = this.headerStore.getConfirmModalOpeningStatus();
    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        this.headerStore.setMobileMenuOpeningStatus(false);
        this.headerStore.setConfirmModalOpeningStatus(false);
      }
    });
    this.currentUser$ = this.authService.getCurrentUser();
  }

  @ViewChildren('dropdownOptionTemplate') dropdownOptionsTemplates: QueryList<TemplateRef<unknown>>;

  public readonly isConfirmModalOpened$: Observable<boolean>;

  public readonly isMobile$: Observable<boolean>;

  public readonly currentUser$: Observable<UserInterface>;

  public currentBlockchain: BlockchainData;

  public dropdownIsOpened = false;

  @ViewChildren('dropdownOptionTemplate') public dropdownItems: QueryList<TemplateRef<unknown>>;

  ngAfterViewInit(): void {
    this.walletConnectorService.networkChange$.pipe(takeUntil(this.destroy$)).subscribe(network => {
      this.currentBlockchain = network;
      this.cdr.markForCheck();
    });
    this.walletConnectorService.addressChange$.pipe(takeUntil(this.destroy$)).subscribe(address => {
      this.authService.setCurrentUser(address);
      this.cdr.markForCheck();
    });
  }

  public logout(): void {
    this.authService.serverlessSignOut();
  }

  public getDropdownStatus(status: boolean): void {
    this.dropdownIsOpened = status;
  }
}

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.scss']
})
export class SearchBarComponent implements AfterViewInit {

  @ViewChild('searchIcon', { static: true }) searchIcon: ElementRef
  @ViewChild('quantityDropdown', { static: true }) quantityDropdown: ElementRef
  @ViewChild('similarityDropdown', { static: true }) similarityDropdown: ElementRef
  @ViewChild('diffSlider', { static: true }) diffSlider: ElementRef

  isError = false
  showAdvanced = false
  searchSettings = getDefaultSearch()
  private sliderInitialized = false

  constructor(public searchService: SearchService) { }

  ngAfterViewInit() {
    $(this.searchIcon.nativeElement).popup({
      onShow: () => this.isError // Only show the popup if there is an error
    })
    this.searchService.onSearchErrorStateUpdate((isError) => {
      this.isError = isError
    })
    $(this.quantityDropdown.nativeElement).dropdown({
      onChange: (value: string) => {
        this.searchSettings.quantity = value as 'all' | 'any'
      }
    })
    $(this.similarityDropdown.nativeElement).dropdown({
      onChange: (value: string) => {
        this.searchSettings.similarity = value as 'similar' | 'exact'
      }
    })
  }

  onSearch(query: string) {
    this.searchSettings.query = query
    this.searchSettings.limit = 50 + 1
    this.searchSettings.offset = 0
    this.searchService.newSearch(this.searchSettings)
  }

  onAdvancedSearchClick() {
    this.showAdvanced = !this.showAdvanced

    if (!this.sliderInitialized) {
      setTimeout(() => { // Initialization requires this element to not be collapsed
        $(this.diffSlider.nativeElement).slider({
          min: 0,
          max: 6,
          start: 0,
          end: 6,
          step: 1,
          onChange: (_length: number, min: number, max: number) => {
            this.searchSettings.minDiff = min
            this.searchSettings.maxDiff = max
          }
        })
      }, 50)
      this.sliderInitialized = true
    }
  }

  isLoading() {
    return this.searchService.isLoading()
  }
}

@Component({
  selector: 'lg-swatch',
  template: `
    <div #swatch class="swatch__color" [ngStyle]="{ background: color.background }"></div>
    <div class="swatch__details">
      <span class="swatch__name">{{ color.name }}</span>
      <span class="swatch__text lg-font-size-0-6">#{{ color.hex }}</span>
      <span class="swatch__text lg-font-size-0-6">{{ color.rgb }}</span>
    </div>
  `,
  styles: [
    `
      :host {
        margin-right: var(--component-margin);
        margin-bottom: var(--component-margin);
        border: solid var(--border-width) var(--border-color);
        border-radius: var(--border-radius-sm);
        display: inline-block;
      }
      .swatch__details {
        padding: var(--space-sm);
      }
      .swatch__color {
        width: 14rem;
        height: 10rem;
      }
      .swatch__name {
        display: block;
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--space-xxxs);
      }
      .swatch__text {
        display: block;
        margin-bottom: var(--space-xxxs);
      }
    `,
  ],
})
class SwatchComponent implements AfterViewInit {
  @HostBinding('class') class = 'swatch';

  @ViewChild('swatch') swatch;

  @Input()
  color: Color;

  @Input()
  set name(val: string) {
    this.color = {
      name: val,
      background: `var(${val})`,
      rgb: null,
      hex: null,
    };
  }
  get name() {
    return this.color.name;
  }

  ngAfterViewInit() {
    const styles = window.getComputedStyle(this.swatch.nativeElement);

    this.color.rgb = styles.backgroundColor;
    this.color.hex = convert.rgb.hex(styles.backgroundColor.match(/\d+/g));
  }
}

@Component({
  selector: 'dynhooks-inlinetest',
  templateUrl: './inlineTest.c.html',
  styleUrls: ['./inlineTest.c.scss'],
})
export class InlineTestComponent implements OnDynamicMount, OnDynamicChanges, DoCheck, OnInit, OnChanges, AfterViewInit, OnDestroy {
  @Input() backgroundColor: string = '#25436c';
  @Input() nr!: number;
  @Input() config: any;
  mountContext: any;
  mountContentChildren!: Array<DynamicContentChild>;
  changesContext: any;
  changesContentChildren!: Array<DynamicContentChild>;

  constructor(private cd: ChangeDetectorRef) {
  }

  ngOnInit () {
    // console.log('textbox init');
  }

  ngOnChanges(changes: any) {
    // console.log('textbox changes');
  }

  ngDoCheck() {
    // console.log('textbox doCheck');
  }

  ngAfterViewInit() {
    // console.log('textbox afterviewinit');
  }

  ngOnDestroy() {
    // console.log('textbox destroy');
  }

  onDynamicMount(data: OnDynamicData) {
    this.mountContext = data.context;
    this.mountContentChildren = (data as any).contentChildren;
  }

  onDynamicChanges(data: OnDynamicData) {
    if (data.hasOwnProperty('context')) {
      this.changesContext = data.context;
    }
    if (data.hasOwnProperty('contentChildren')) {
      this.changesContentChildren = (data as any).contentChildren;
    }
  }

}

@Component({
  selector: "app-input-dialog",
  templateUrl: "./input-dialog.component.html",
  styleUrls: ["./input-dialog.component.scss"],
})
export class InputDialogComponent implements OnInit, AfterViewInit {
  @Input()
  title: string;
  @Input()
  message: string;
  @Input()
  placeholder: string;
  @Input()
  callback: any;
  @Input()
  confirmText: string;
  @Input()
  cancelText: string;
  @ViewChild("inputField")
  inputField: ElementRef;

  public form = new FormGroup({
    value: new FormControl("", [Validators.required]),
  });

  /* Just a restyled modal to show a confirmation for delete actions */
  constructor(private bsModalRef: BsModalRef) {}

  ngOnInit(): void {}

  ngAfterViewInit(): void {
    this.inputField.nativeElement.focus();
  }

  /**
   * Launch a callback on yes (which is the actual action), then close
   */
  confirm(): void {
    if (this.callback && this.form.valid) {
      this.callback(this.form.value.value);
      this.bsModalRef.hide();
    }
  }

  close(): void {
    this.callback(constants.confirmClosed);
    this.bsModalRef.hide();
  }

  checkAndConfirm(): void {
    this.confirm();
  }
}

@Component({
  selector: 'app-bill-of-materials',
  templateUrl: './bill-of-materials.component.html',
  styleUrls: ['./bill-of-materials.component.scss'],
})
export class BillOfMaterialsComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(private bomGlobalFilterMessageService: BomGlobalFilterMessageService) {}

  filter = '';

  hasNoScans: boolean;

  @Input() project: Project;

  @ViewChild('searchInput') searchInput: ElementRef;

  clearSearchField() {
    this.filter = '';
    this.bomGlobalFilterMessageService.send('');
  }

  ngAfterViewInit(): void {
    if (!this.searchInput) {
      return;
    }

    fromEvent(this.searchInput.nativeElement, 'input')
      .pipe(
        map((event: any) => event.target.value),
        filter(res => res.length > 2 || res.length === 0),
        debounceTime(500),
        distinctUntilChanged(),
        untilDestroyed(this),
      )
      .subscribe((text: string) => {
        this.bomGlobalFilterMessageService.send(text);
      });
  }

  ngOnDestroy(): void {}

  ngOnInit() {
    if (this.project && this.project.wasImported) {
      this.hasNoScans = false;
    } else {
      this.hasNoScans = !this.project || _.isEmpty(this.project.scans);
    }
  }
}

@Component({
  selector: 'app-the-amazing-list',
  templateUrl: './the-amazing-list.component.html',
  styleUrls: ['./the-amazing-list.component.scss'],
  host: {
    role: 'list',
  },
})
export class TheAmazingListComponent implements OnInit, AfterViewInit {
  @Input() listItems: Partial<AppUserCard>[] = [];
  @ViewChildren(TheAmazingListItemComponent)
  listItemsElements: QueryList<TheAmazingListItemComponent>;
  popoverMenuTrigger: CdkOverlayOrigin;
  menuShown = false;
  menuPositions = [
    {
      offsetY: 4,
      originX: 'end',
      originY: 'bottom',
      overlayX: 'end',
      overlayY: 'top',
    },
    {
      offsetY: -4,
      originX: 'end',
      originY: 'top',
      overlayX: 'end',
      overlayY: 'bottom',
    },
  ];
  menuPopoverOrigin = {
    originY: null,
  };

  private listKeyManager: FocusKeyManager<TheAmazingListItemComponent>;

  @HostListener('window:keydown', ['$event'])
  onKeydown(event) {
    this.listKeyManager.onKeydown(event);
  }
  constructor(private cdRef: ChangeDetectorRef) {}

  popoverPositionChanged($event, popover) {
    if (popover.originY !== $event.connectionPair.originY) {
      popover.originY = $event.connectionPair.originY;
    }
    this.cdRef.detectChanges();
  }

  ngOnInit(): void {}

  openMenu($event, itemTrigger) {
    if ($event) {
      $event.stopImmediatePropagation();
    }
    this.popoverMenuTrigger = itemTrigger;
    this.menuShown = true;
  }

  ngAfterViewInit() {
    this.listKeyManager = new FocusKeyManager(this.listItemsElements);
  }
}

@Component({
  selector: "ns-ad-wrapper",
  templateUrl: "./ad-wrapper.component.html",
  styleUrls: ["./ad-wrapper.component.css"]
})
export class AdWrapperComponent implements AfterViewInit {
  height: number;

  private testing = envConfig.adTesting;
  private androidBannerId: string = "ca-app-pub-7265627701189310/9591754412";
  private iosBannerId: string = "ca-app-pub-7265627701189310/7896363511";

  constructor(
    private privacyService: PrivacyService
  ) {
    if (!this.privacyService.showAds) {
      this.height = 0;
    } else if (Screen.mainScreen.heightDIPs <= 400) {
      this.height = 32;
    } else if (Screen.mainScreen.heightDIPs <= 720) {
      this.height = 50;
    } else {
      this.height = 90;
    }
  }

  ngAfterViewInit(): void {
    if (this.privacyService.showAds) {
      setTimeout(() => this.createBanner(), 0);
    }
  }

  createBanner() {
    Admob.createBanner({
      testing: this.testing,
      size: Admob.AD_SIZE.SMART_BANNER,
      iosBannerId: this.iosBannerId,
      androidBannerId: this.androidBannerId,
      margins: {
        bottom: 0
      }
    }).then(() =>  console.log("admob createBanner donex"))
    .catch(error =>  console.log("admob createBanner error: " + error));
  }

}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit, AfterViewInit {
    @ViewChild('spinner', { static: false }) spinner;
    @ViewChild('status', { static: false }) status;
    @ViewChild('webview', { static: false }) webview;
    helpStatus: string;
    extraHelpStatus: string;
    devMode: boolean;
    webUrl = environment.configuration.web_url;
    shortenerUrl = environment.configuration.shortenerUrl;
    constructor(
        private spinnerService: LoadingSpinnerService,
        public statusService: StatusBarService,
        private adbService: AdbClientService,
        public appService: AppService,
        public webService: WebviewService,
        public dragService: DragAndDropService,
        private electronService: ElectronService
    ) {
        this.devMode = isDevMode();
    }
    ngOnInit() {
        this.adbService
            .setupAdb()
            .then(() => this.appService.downloadScrCpyBinary(this.adbService))
            .then(() => this.adbService.connectedStatus())
            .then(() => {
                if (!localStorage.getItem('first_run')) {
                    localStorage.setItem('first_run', 'true');
                    this.statusService.showStatus(
                        'Thanks for downloading SideQuest! Please click "Setup" on the top menu to begin and then "Sign Up" to get app updates, remote installing and more!'
                    );
                }
                this.dragService.setupDragAndDrop(this.webview.nativeElement);
            });
    }
    ngAfterViewInit() {
        this.spinnerService.setSpinner(this.spinner);
        this.statusService.setStatus(this.status);
        this.webService.setWebView(this.webview.nativeElement);
    }
    setExterHelp() {
        let uninstall_instructions = `
      <div class="card-panel grey lighten-2 z-depth-1">
        <div class="row valign-wrapper">
          <div class="col s2">
            <img src="assets/images/app-icon.png" alt="" class="circle responsive-img">
          </div>
          <div class="col s10">
            <span class="black-text">
              SOLUTION: You may be able to resolve this issue by uninstalling the app first.<br><br>Click the <i class="material-icons vertical-align">apps</i> icon at the top, then click the <i class="material-icons vertical-align">settings</i> icon beside this app and finally click "Uninstall". You can then try to install this app again.
            </span>
          </div>
        </div>
      </div>`;
        switch (true) {
            case this.helpStatus.indexOf('INSTALL_FAILED_UPDATE_INCOMPATIBLE') > -1:
                this.extraHelpStatus = uninstall_instructions;
                break;
            default:
                this.extraHelpStatus = null;
                break;
        }
    }
}

@Component({
  selector: 'app-goto-item',
  templateUrl: './goto-item.component.html',
  styleUrls: ['./goto-item.component.scss'],
})
export class GotoItemComponent implements OnInit, AfterViewInit {
  static readonly DIALOG_WIDTH = '500px'

  // @ts-ignore
  @ViewChild('itemInput') itemInput: ElementRef

  private _itemKey = ''
  filteredKeys = new BehaviorSubject<string[]>([])
  autoCompleter: DataStoreAutoCompleter

  constructor(
    public dialogRef: MatDialogRef<GotoItemComponent>,
    @Inject(MAT_DIALOG_DATA) public data: GotoItemConfig,
    private readonly dataStore: DataStore) {
    this.autoCompleter = dataStore.createAutoCompleter()
  }

  ngOnInit(): void {
  }

  get itemKey() {
    return this._itemKey
  }

  set itemKey(value: string) {
    this._itemKey = value
    this.filteredKeys.next(this.autoCompleter.queryKeys(value, 10))
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.itemInput?.nativeElement?.focus()
      this.itemInput?.nativeElement?.select()
    })
  }

  close() {
    this.dialogRef.close()
  }

  go() {
    const itemID = this.autoCompleter.keyToID(this.itemKey)
    if (itemID === undefined) {
      this.errorItemNotFound()
      return
    }
    this.dialogRef.close(itemID)
  }

  errorItemNotFound() {
    alert('Error: Item not found')
  }

  onFormKeyDown(event: KeyboardEvent) {
    if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
      this.go()
    }
  }
}

@Component({
  selector: 'app-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.css']
})
export class DataTableComponent implements OnInit, AfterViewInit {

  @Input('dataForTable') dataForTable: Tasks[];
  @Input('displayColoumns') displayColoumns: string[];
  @Input('pageSize') pageSize: number[];

  @ViewChild(MatPaginator) paginator!: MatPaginator;
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatTable) table!: MatTable<Tasks>;
  dataSource: DataTableDataSource;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = [];

  constructor(private router: Router, public applicationSettingService: ApplicationSettingsService) {
    this.dataSource = new DataTableDataSource();
  }

  ngOnInit(): void {
    if(this.dataForTable != undefined) {
      this.dataSource.data = this.dataForTable;
      this.displayedColumns = this.displayColoumns;
    }
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
    this.table.dataSource = this.dataSource;
  }

  openTaskDetails(id: string) {
    this.router.navigate(['/TaskDetails', id]);
  }

  selectedAssignee(item) {
    console.log(item)
  }
}