<commit_before>import {
  Component,
  Input,
  TemplateRef,
  ViewChildren,
  ViewChild,
  QueryList,
  ChangeDetectionStrategy,
  ElementRef,
  ChangeDetectorRef,
  HostListener
} from '@angular/core'
import { NgbModal, NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
import { uniqueId, lowerFirst } from 'lodash-es'
import { ScreenService } from './screen.service'
import { take } from 'rxjs/operators'

export interface ListOverflowItem {
  label: string
  routerLink: string | any[]
}

@Component({
  selector: 'list-overflow',
  templateUrl: './list-overflow.component.html',
  styleUrls: [ './list-overflow.component.scss' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListOverflowComponent<T extends ListOverflowItem> {
  @ViewChild('modal', { static: true }) modal: ElementRef
  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
  @Input() items: T[]
  @Input() itemTemplate: TemplateRef<{item: T}>

  showItemsUntilIndexExcluded: number
  active = false
  isInTouchScreen = false
  isInMobileView = false

  private openedOnHover = false

  constructor (
    private cdr: ChangeDetectorRef,
    private modalService: NgbModal,
    private screenService: ScreenService
  ) {}

  isMenuDisplayed () {
    return !!this.showItemsUntilIndexExcluded
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize () {
    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
    this.isInMobileView = !!this.screenService.isInMobileView()

    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
    let showItemsUntilIndexExcluded: number
    let accWidth = 0

    for (const [index, el] of this.itemsRendered.toArray().entries()) {
      accWidth += el.nativeElement.getBoundingClientRect().width
      if (showItemsUntilIndexExcluded === undefined) {
        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
      }

      const e = document.getElementById(this.getId(index))
      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
    }

    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
    this.cdr.markForCheck()
  }<commit_msg>Fix list overflow when refreshing the page<commit_after>import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  ElementRef,
  HostListener,
  Input,
  QueryList,
  TemplateRef,
  ViewChild,
  ViewChildren
} from '@angular/core'
import { NgbDropdown, NgbModal } from '@ng-bootstrap/ng-bootstrap'
import { lowerFirst, uniqueId } from 'lodash-es'
import { ScreenService } from './screen.service'
import { take } from 'rxjs/operators'

export interface ListOverflowItem {
  label: string
  routerLink: string | any[]
}

@Component({
  selector: 'list-overflow',
  templateUrl: './list-overflow.component.html',
  styleUrls: [ './list-overflow.component.scss' ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ListOverflowComponent<T extends ListOverflowItem> implements AfterViewInit {
  @ViewChild('modal', { static: true }) modal: ElementRef
  @ViewChild('itemsParent', { static: true }) parent: ElementRef<HTMLDivElement>
  @ViewChildren('itemsRendered') itemsRendered: QueryList<ElementRef>
  @Input() items: T[]
  @Input() itemTemplate: TemplateRef<{item: T}>

  showItemsUntilIndexExcluded: number
  active = false
  isInTouchScreen = false
  isInMobileView = false

  private openedOnHover = false

  constructor (
    private cdr: ChangeDetectorRef,
    private modalService: NgbModal,
    private screenService: ScreenService
  ) {}

  ngAfterViewInit () {
    setTimeout(() => this.onWindowResize(), 0)
  }

  isMenuDisplayed () {
    return !!this.showItemsUntilIndexExcluded
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize () {
    this.isInTouchScreen = !!this.screenService.isInTouchScreen()
    this.isInMobileView = !!this.screenService.isInMobileView()

    const parentWidth = this.parent.nativeElement.getBoundingClientRect().width
    let showItemsUntilIndexExcluded: number
    let accWidth = 0

    for (const [index, el] of this.itemsRendered.toArray().entries()) {
      accWidth += el.nativeElement.getBoundingClientRect().width
      if (showItemsUntilIndexExcluded === undefined) {
        showItemsUntilIndexExcluded = (parentWidth < accWidth) ? index : undefined
      }

      const e = document.getElementById(this.getId(index))
      const shouldBeVisible = showItemsUntilIndexExcluded ? index < showItemsUntilIndexExcluded : true
      e.style.visibility = shouldBeVisible ? 'inherit' : 'hidden'
    }

    this.showItemsUntilIndexExcluded = showItemsUntilIndexExcluded
    this.cdr.markForCheck()
  }
{'fraction_non_alphanumeric': 0.1077018121911038, 'fraction_numerical': 0.0006177924217462932, 'mean_word_length': 4.595622119815668, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 12, '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': '4038795', 'n_tokens_mistral': 1436, 'n_tokens_neox': 1413, 'n_words': 303}