All files / lib/page-layout overview-pagelayout.component.ts

63.49% Statements 40/63
85.71% Branches 6/7
60% Functions 3/5
63.49% Lines 40/63

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 641x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x         1x 1x 1x 1x     1x 1x                                   1x  
/*******************************************************************************
 * Copyright bei
 * Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
 *
 *******************************************************************************/
import {
  ChangeDetectionStrategy,
  Component,
  ElementRef,
  OnDestroy,
  Optional,
  effect,
  viewChild,
} from '@angular/core';
 
import { ContextPagelayoutComponent } from './context-pagelayout.component';
 
@Component({
  selector: 'gc-overview-pagelayout',
  templateUrl: './overview-pagelayout.component.html',
  styleUrls: ['./overview-pagelayout.component.css'],
  changeDetection: ChangeDetectionStrategy.Default,
  standalone: false,
})
export class OverviewPagelayoutComponent implements OnDestroy {
  protected $breadcrumbContainer = viewChild<ElementRef<HTMLElement>>(
    'breadcrumbContainer',
  );
 
  private intersectionObserver?: IntersectionObserver;
 
  constructor(@Optional() contextPage: ContextPagelayoutComponent | null) {
    if (contextPage) {
      effect(() => {
        const el = this.$breadcrumbContainer();
        this.observeBreadcrumbPosition(el?.nativeElement);
      });
    }
  }
 
  ngOnDestroy(): void {
    this.intersectionObserver?.disconnect();
  }
 
  private observeBreadcrumbPosition(element: HTMLElement | undefined) {
    this.intersectionObserver?.disconnect();
    this.intersectionObserver = undefined;

    if (element) {
      this.intersectionObserver = new IntersectionObserver(
        ([e]) => {
          element.classList.toggle('surface-contrast', e.intersectionRatio < 1);
          element.classList.toggle('surface-view', e.intersectionRatio >= 1);
        },
        {
          threshold: 1,
          rootMargin: '0px',
        },
      );
      this.intersectionObserver.observe(element);
    }
  }
}