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

52.63% Statements 30/57
100% Branches 1/1
0% Functions 0/4
52.63% Lines 30/57

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 581x 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 {
  Component,
  type EffectCleanupRegisterFn,
  ElementRef,
  afterRenderEffect,
  inject,
  viewChild,
} from '@angular/core';
 
import { ContextPagelayoutComponent } from './context-pagelayout.component';
 
@Component({
  selector: 'gc-form-pagelayout',
  templateUrl: './form-pagelayout.component.html',
  styleUrls: ['./form-pagelayout.component.css'],
  standalone: false,
})
export class FormPagelayoutComponent {
  protected readonly $breadcrumbContainer = viewChild<ElementRef<HTMLElement>>(
    'breadcrumbContainer',
  );
 
  constructor() {
    const contextPage = inject(ContextPagelayoutComponent, { optional: true });
    if (contextPage) {
      afterRenderEffect({
        read: onCleanup => this.observeBreadcrumbPosition(onCleanup),
      });
    }
  }
 
  private observeBreadcrumbPosition(onCleanup: EffectCleanupRegisterFn) {
    const viewChild = this.$breadcrumbContainer();
    if (viewChild) {
      const element = viewChild.nativeElement;
      const intersectionObserver = new IntersectionObserver(
        ([e]) => {
          element.classList.toggle('surface-contrast', e.intersectionRatio < 1);
          element.classList.toggle('surface-view', e.intersectionRatio >= 1);
        },
        {
          threshold: 1,
          rootMargin: '0px',
        },
      );
      intersectionObserver.observe(element);
      onCleanup(() => {
        intersectionObserver.disconnect();
      });
    }
  }
}