\n ratings-helper works!\n
\n `,\n styles: [\n ]\n})\nexport class RatingsHelperComponent {\n\n constructor() {}\n\n}\n","import { Component, Input, OnInit } from '@angular/core';\n\n@Component({\n selector: 'ngx-rating-star',\n templateUrl: './star.component.html',\n styleUrls: ['./star.component.scss']\n})\nexport class StarComponent implements OnInit {\n\n private minGradValue = 0;\n private maxGradValue = 100;\n\n private _value!: number;\n\n @Input() set value(val : number){\n this.validateValueBeforeSetting(val);\n this._value = val;\n };\n\n @Input() max: number = 5;\n @Input() min: number = 0;\n\n @Input() size: number = 28;\n @Input() colorActive: string = \"yellow\";\n @Input() colorInactive: string = \"gray\";\n @Input() borderColor: string = \"gray\";\n @Input() disableBorder: boolean = false;\n @Input() disabled: boolean = false;\n\n constructor() { }\n\n ngOnInit(): void {\n this.validateValueBeforeSetting(this.value);\n }\n\n public get value(): number {\n return this._value;\n }\n\n private validateValueBeforeSetting(value : number):void{\n if(this.value < this.min || this.value > this.max){\n this.throwInvalidValue();\n }\n }\n\n get gradientValue(){\n return `linear-gradient(${this.createGradient})`;\n }\n\n get createGradient(){\n const value = this.calculateGradientValue;\n return `90deg, ${this.colorActive} 0%, ${this.colorActive} ${value}%, ${this.colorInactive} ${value}%`\n }\n\n get calculateGradientValue(): number {\n const validRange = this.max - this.min;\n const validRangePercent = validRange / 100;\n const currentPercent = this.value / validRangePercent;\n const validStyleRange = this.maxGradValue - this.minGradValue;\n return ( validStyleRange * currentPercent ) / 100;\n }\n\n private throwInvalidValue(): never{\n throw new Error(`Value cannot be more then max value , or less then min value; ${this.value}, ${this.min} , ${this.max}`)\n }\n}\n","\n