import { Component , Input , HostBinding , ElementRef , ViewEncapsulation , InjectionToken , Inject , Host , TemplateRef } from '@angular/core' ; import { ThyProgressType } from '../interfaces' ; import { UpdateHostClassService } from 'ngx-tethys/core' ; export interface ThyParentProgress { max : number ; bars : ThyProgressBarComponent [ ] ; } export const THY_PROGRESS_COMPONENT = new InjectionToken < ThyParentProgress > ( 'THY_PROGRESS_COMPONENT' ) ; private @ Component ( { selector : 'thy-progress-bar' , templateUrl : './progress-bar.component.html' , encapsulation : ViewEncapsulation . None , providers : [ UpdateHostClassService ] } ) export class ThyProgressBarComponent { private value : number ; color : string ; @ HostBinding ( `class.progress-bar` ) isProgressBar = true ; @ HostBinding ( 'style.width.%' ) percent = 0 ; @ Input ( ) thyTips : string | TemplateRef < HTMLElement > ; @ Input ( ) set thyType ( type ) { this . updateHostClassService . updateClass ( type ? [ `progress-bar-${ type }` ] : [ ] ) ; } @ Input ( ) set thyValue ( value ) { if ( ! value && value !== 0 ) { return ; } this . value = value ; this . recalculatePercentage ( ) ; } @ Input ( ) set thyColor ( color ) { this . color = color || '' ; } constructor ( private updateHostClassService , elementRef , @ Inject ( THY_PROGRESS_COMPONENT ) private progress ) { updateHostClassService . initializeElement ( elementRef . nativeElement ) ; } recalculatePercentage ( ) { this . percent = + ( ( this . value / this . progress . max ) * 100 ) . toFixed ( 2 ) ; } }