import { AfterViewInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , ElementRef , HostBinding , Input , OnDestroy , } from '@angular/core' ; @ Component ( { selector : 'kirby-progress-circle' , templateUrl : './progress-circle.component.html' , styleUrls : [ './progress-circle.component.scss' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class ProgressCircleComponent implements AfterViewInit , OnDestroy { readonly SIZE_CONFIG = { sm : { diameter : 40 , strokeWidth : 3 , upperBound : 95 } , md : { diameter : 56 , strokeWidth : 4 , upperBound : 96 } , lg : { diameter : 96 , strokeWidth : 6 , upperBound : 97 } , } ; @ Input ( ) value : number = 0 ; @ Input ( ) size : 'sm' | 'md' | 'lg' = 'md' ; @ Input ( ) themeColor : 'success' | 'warning' | 'danger' = 'success' ; @ HostBinding ( 'class' ) get _cssSize ( ) { return this . size ; } private hasElementBeenVisible ? : boolean ; private observer : IntersectionObserver ; constructor ( private elementRef , private changeDetectorRef ) { } ngAfterViewInit ( ) { if ( ! this . observer ) { this . observer = new IntersectionObserver ( this . onIntersectionChange , { threshold : 0.5 , } ) ; this . observer . observe ( this . elementRef . nativeElement ) ; } } ngOnDestroy ( ) { this . unobserve ( ) ; } private onIntersectionChange = ( entries ) => { this . hasElementBeenVisible = entries && entries . some ( ( entry ) => entry . isIntersecting ) ; if ( this . hasElementBeenVisible ) { this . unobserve ( ) ; this . changeDetectorRef . markForCheck ( ) ; } } ; private unobserve ( ) { if ( this . observer ) { this . observer . unobserve ( this . elementRef . nativeElement ) ; if ( typeof this . observer . disconnect === 'function' ) { this . observer . disconnect ( ) ; } } } @ HostBinding ( 'style.width.px' ) @ HostBinding ( 'style.height.px' ) get _diameter ( ) : number { return this . SIZE_CONFIG [ this . size ] . diameter ; } get _shownValue ( ) { return this . hasElementBeenVisible ? this . value : 0 ; } get _radius ( ) { return this . _diameter / 2 ; } get _strokeWidth ( ) { return this . SIZE_CONFIG [ this . size ] . strokeWidth ; } get _upperBound ( ) { return this . SIZE_CONFIG [ this . size ] . upperBound ; } }