<commit_before>import {Component, NgZone, EventEmitter, Output} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';

import {UserActions} from '../../actions/user-actions/user-actions';
import {ComponentDataStore}
  from '../../stores/component-data/component-data-store';

@Component({
  selector: 'augury-header',
  templateUrl: 'src/frontend/components/header/header.html',
  inputs: ['searchDisabled', 'theme']
})
export class Header {

  private searchDisabled: boolean;
  private searchIndex: number = 0;
  private totalSearchCount: number = 0;
  private query: string = '';
  private settingOpened: boolean = false;
  private theme: string;

  @Output() newTheme: EventEmitter<string> = new EventEmitter<string>();

  constructor(
    private userActions: UserActions,
    private componentDataStore: ComponentDataStore,
    private _ngZone: NgZone
  ) {

    this.componentDataStore.dataStream
      .subscribe((data: any) => {
        this.totalSearchCount = data.totalSearchCount;
      });

  }

  ngOnChanges() {
    if (this.searchDisabled) {
      this.query = '';
    }
  }

  resetTheme() {
    this.settingOpened = false;
    // document.removeEventListener('click', this.resetTheme.bind(this), false);
  }

  openSettings() {
    this.settingOpened = !this.settingOpened;
    // document.addEventListener('click', this.resetTheme.bind(this), false);
  }

  themeChange(theme, selected) {
    if (selected) {
      this.theme = theme;
      this.newTheme.emit(this.theme);
    }
    this.resetTheme();
  }
<commit_msg>feat: hide theme menu if a click occured outside (#477)<commit_after>import {
  Component,
  NgZone,
  EventEmitter,
  Output,
  ElementRef
} from '@angular/core';
import {FORM_DIRECTIVES} from '@angular/common';

import {UserActions} from '../../actions/user-actions/user-actions';
import {ComponentDataStore}
  from '../../stores/component-data/component-data-store';

@Component({
  selector: 'augury-header',
  templateUrl: 'src/frontend/components/header/header.html',
  inputs: ['searchDisabled', 'theme'],
  host: {
    '(document:click)': 'resetIfSettingOpened($event)'
  }
})
export class Header {

  private searchDisabled: boolean;
  private searchIndex: number = 0;
  private totalSearchCount: number = 0;
  private query: string = '';
  private settingOpened: boolean = false;
  private theme: string;
  private elementRef;

  @Output() newTheme: EventEmitter<string> = new EventEmitter<string>();

  constructor(
    private userActions: UserActions,
    private componentDataStore: ComponentDataStore,
    private _ngZone: NgZone,
    elementRef: ElementRef
  ) {

    this.elementRef = elementRef;

    this.componentDataStore.dataStream
      .subscribe((data: any) => {
        this.totalSearchCount = data.totalSearchCount;
      });

  }

  ngOnChanges() {
    if (this.searchDisabled) {
      this.query = '';
    }
  }

  resetTheme() {
    this.settingOpened = false;
  }

  resetIfSettingOpened(event) {
    let clickedComponent = event.target;
    let inside = false;

    do {
      if (clickedComponent === this.elementRef.nativeElement) {
        inside = true;
      }
      clickedComponent = clickedComponent.parentNode;
    } while (clickedComponent);

    if (!inside) {
      this.resetTheme();
    }
  }

  openSettings() {
    this.settingOpened = !this.settingOpened;
  }

  themeChange(theme, selected) {
    if (selected) {
      this.theme = theme;
      this.newTheme.emit(this.theme);
    }
    this.resetTheme();
  }

{'fraction_non_alphanumeric': 0.1323278315310188, 'fraction_numerical': 0.00199203187250996, 'mean_word_length': 3.4720101781170483, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3819533', 'n_tokens_mistral': 1074, 'n_tokens_neox': 1054, 'n_words': 223}