import { Observable , Subscription } from "rxjs" ; import { Store , select } from "@ngrx/store" ; import { ChangeDetectionStrategy , Component , ElementRef , Input , Renderer2 } from "@angular/core" ; import type { OnDestroy , OnInit } from "@angular/core" ; import { OptionsSelectors } from "src/web/browser-window/app/store/selectors" ; import { State } from "src/web/browser-window/app/store/reducers/options" ; @ Component ( { selector : "electron-mail-unread-badge" , templateUrl : "./unread-badge.component.html" , styleUrls : [ "./unread-badge.component.scss" ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class UnreadBadgeComponent implements OnInit , OnDestroy { @ Input ( ) value ! : number ; @ Input ( ) alwaysRenderTheValue = false ; readonly doNotRenderNotificationBadgeValue$ : Observable < boolean > ; private readonly subscription = new Subscription ( ) ; constructor ( private readonly store , private readonly elementRef , private readonly renderer ) { this . doNotRenderNotificationBadgeValue$ = this . store . pipe ( select ( OptionsSelectors . CONFIG . doNotRenderNotificationBadgeValue ) ) ; } ngOnInit ( ) { this . subscription . add ( this . store . pipe ( select ( OptionsSelectors . CONFIG . unreadBgColor ) ) . subscribe ( ( value ) => this . setStyle ( "backgroundColor" , value ) ) ) ; this . subscription . add ( this . store . pipe ( select ( OptionsSelectors . CONFIG . unreadTextColor ) ) . subscribe ( ( value ) => this . setStyle ( "color" , value ) ) ) ; } ngOnDestroy ( ) { this . subscription . unsubscribe ( ) ; } private setStyle ( prop , value ) { this . renderer . setStyle ( this . elementRef . nativeElement , prop , value ) ; } }