import { Component , EventEmitter , forwardRef , Input , OnChanges , Output , SimpleChanges , } from '@angular/core' ; import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ; @ Component ( { selector : 'kirby-range' , templateUrl : './range.component.html' , styleUrls : [ './range.component.scss' ] , providers : [ { provide : NG_VALUE_ACCESSOR , multi : true , useExisting : forwardRef ( ( ) => RangeComponent ) , } , ] , } ) export class RangeComponent implements OnChanges , ControlValueAccessor { @ Input ( ) minLabel : string ; @ Input ( ) maxLabel : string ; @ Input ( ) debounce : number ; @ Input ( ) max : number ; @ Input ( ) min : number ; @ Input ( ) pin : boolean ; @ Input ( ) step = 1 ; @ Input ( ) ticks : boolean ; @ Input ( ) disabled = false ; @ Input ( ) set value ( value ) { if ( value !== this . currentValue ) { this . currentValue = value ; this . propagateChange ( this . currentValue ) ; this . change . emit ( this . currentValue ) ; } } get value ( ) : number { return this . currentValue ; } @ Output ( ) change : EventEmitter < number > = new EventEmitter < number > ( ) ; private currentValue : number ; ngOnChanges ( _ ) { if ( ! this . ticks ) return ; const amountOfTicks = ( this . max - this . min ) / this . step ; if ( amountOfTicks > 9 ) { this . step = ( this . max - this . min ) / 9 ; } this . value = this . getTicks ( ) . reduce ( ( a , b ) => { return Math . abs ( b - this . value ) < Math . abs ( a - this . value ) ? b : a ; } ) ; } private getTicks ( ) { const ticks = [ ] ; for ( let value = Number ( this . min ) ; value <= Number ( this . max ) ; value += Number ( this . step ) ) { ticks . push ( value ) ; } return ticks ; } public setDisabledState ? ( isDisabled ) { this . disabled = isDisabled ; } public _onRangeValueChange ( $event ) { this . writeValue ( $event . detail . value ) ; } public onTouched = ( ) => { } ; public propagateChange = ( _ ) => { } ; public writeValue ( value ) { if ( value !== undefined ) { this . value = value ; } } public registerOnTouched ( fn ) { this . onTouched = fn ; } public registerOnChange ( fn ) { this . propagateChange = fn ; } }