angular-star-rating - npm Package Compare versions

Comparing version 1.0.15 to 1.1.0

bower.json

 {
   "name": "angular-star-rating",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "description": "Angular Star Rating is a Angular1.5 component written in typescript.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

CHANGELOG.md

@@ -0,1 +1,29 @@
+<a name="1.1.0"></a>
+# [1.1.0](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.14...v1.1.0) (2016-12-21)
+
+
+### Bug Fixes
+
+* **build:** rebuild project ([ebeeea3](https://github.com/BioPhoton/angular-star-rating/commit/ebeeea3))
+* **example:** rebuild example ([ce47446](https://github.com/BioPhoton/angular-star-rating/commit/ce47446))
+* **example:** update example ([e063731](https://github.com/BioPhoton/angular-star-rating/commit/e063731))
+
+
+### Features
+
+* **controller:** start implement getter and setter  [#38](https://github.com/BioPhoton/angular-star-rating/issues/38) ([e91541c](https://github.com/BioPhoton/angular-star-rating/commit/e91541c))
+* **example:** implement new props ([f410e9e](https://github.com/BioPhoton/angular-star-rating/commit/f410e9e))
+* **example:** implement new props ([e6cc7b1](https://github.com/BioPhoton/angular-star-rating/commit/e6cc7b1))
+* **examples:** migrate to component ui-routing ([cb709ca](https://github.com/BioPhoton/angular-star-rating/commit/cb709ca))
+* **examples:** migrate to component ui-routing ([2e23ab7](https://github.com/BioPhoton/angular-star-rating/commit/2e23ab7))
+* **refactoring:** setter getter, names, structure ([ce44cc1](https://github.com/BioPhoton/angular-star-rating/commit/ce44cc1))
+* **update bindings:** updated spread (now space) and color bindings ([0d2fe70](https://github.com/BioPhoton/angular-star-rating/commit/0d2fe70))
+* **update dependencies:** update css-star-rating to latest version ([88a80f0](https://github.com/BioPhoton/angular-star-rating/commit/88a80f0))
+* **update example:** update demo pages ([6d216a1](https://github.com/BioPhoton/angular-star-rating/commit/6d216a1))
+* **update example:** updated spread (now space) and color bindings ([3619141](https://github.com/BioPhoton/angular-star-rating/commit/3619141))
+* **update tests:** for new bindings ([4b0570d](https://github.com/BioPhoton/angular-star-rating/commit/4b0570d))
+* **update tests:** for new bindings ([e3ec99b](https://github.com/BioPhoton/angular-star-rating/commit/e3ec99b))
+
+
+
 <a name="1.0.14"></a>
@@ -2,0 +30,0 @@ ## [1.0.14](https://github.com/BioPhoton/angular-star-rating/compare/v1.0.13...v1.0.14) (2016-12-08)

dist/star-rating.controller.d.ts

@@ -0,10 +1,12 @@
+import IChangesObject = angular.IChangesObject;
 export declare type starRatingSizes = "small" | "medium" | "large";
-export declare type starRatingColors = "default" | "negative" | "middle" | "positive";
+export declare type starRatingColors = "default" | "negative" | "ok" | "positive";
 export declare type starRatingSpeed = "immediately" | "noticeable" | "slow";
 export declare type starRatingPosition = "left" | "right" | "top" | "bottom";
 export declare type starRatingStarTypes = "svg" | "icon" | "image";
+export declare type starRatingStarSpace = "no" | "between" | "around";
 export interface IStarRatingCompBindings {
     id?: string;
     text?: string;
-    color?: starRatingColors;
+    staticColor?: starRatingColors;
     labelPosition?: starRatingPosition;
@@ -14,3 +16,3 @@ speed?: starRatingSpeed;
     starType?: starRatingStarTypes;
-    spread?: boolean;
+    space?: starRatingStarSpace;
     readOnly?: boolean;
@@ -21,8 +23,14 @@ disabled?: boolean;
     numOfStars?: number;
-    getColor?: Function;
-    getHalfStarVisible?: Function;
-    onClick?: Function;
-    onUpdate?: Function;
+    getHalfStarVisible?(rating: number): boolean;
+    getColor?(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors;
+    onClick?: ($event: any) => IStarRatingOnClickEvent;
+    onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
 }
-export declare class StarRatingController implements IStarRatingCompBindings {
+export interface IStarRatingOnClickEvent {
+    rating: number;
+}
+export interface IStarRatingOnUpdateEvent {
+    rating: number;
+}
+export declare class StarRatingController implements ng.IComponentController, IStarRatingCompBindings {
     static DefaultClassEmpty: string;
@@ -45,3 +53,3 @@ static DefaultClassHalf: string;
     /**
-     * getStarsArray
+     * _getStarsArray
      *
@@ -53,20 +61,42 @@ * returns an array of increasing numbers starting at 1
      */
-    private static getStarsArray(numOfStars);
-    id: string;
-    text: string;
-    color: starRatingColors;
-    labelPosition: starRatingPosition;
-    speed: starRatingSpeed;
-    size: starRatingSizes;
-    starType: starRatingStarTypes;
-    spread: boolean;
-    readOnly: boolean;
-    disabled: boolean;
-    showHalfStars: boolean;
-    rating: number;
-    numOfStars: number;
-    getHalfStarVisible: Function;
-    getColor: Function;
-    onClick: Function;
-    onUpdate: Function;
+    static _getStarsArray(numOfStars: number): Array<number>;
+    /**
+     * _getHalfStarVisible
+     *
+     * Returns true if there should be a half star visible, and false if not.
+     *
+     * @param rating
+     * @returns {boolean}
+     */
+    static _getHalfStarVisible(rating: number): boolean;
+    /**
+     * _getColor
+     *
+     * The default function for color calculation
+     * based on the current rating and the the number of stars possible.
+     * If a staticColor is set the function will use it as return value.
+     *
+     * @param rating
+     * @param numOfStars
+     * @param staticColor
+     * @returns {starRatingColors}
+     */
+    static _getColor(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors;
+    protected _id: string;
+    protected _text: string;
+    protected _staticColor: starRatingColors;
+    protected _labelPosition: starRatingPosition;
+    protected _speed: starRatingSpeed;
+    protected _size: starRatingSizes;
+    protected _starType: starRatingStarTypes;
+    protected _space: starRatingStarSpace;
+    protected _readOnly: boolean;
+    protected _disabled: boolean;
+    protected _showHalfStars: boolean;
+    protected _rating: number;
+    protected _numOfStars: number;
+    getHalfStarVisible: (rating: number) => boolean;
+    getColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
+    onClick?: ($event: any) => IStarRatingOnClickEvent;
+    onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
     classEmpty: string;
@@ -78,16 +108,29 @@ classHalf: string;
     pathFilled: string;
+    color: starRatingColors;
     stars: Array<number>;
+    ratingAsInteger: number;
+    halfStarVisible: boolean;
+    $onInit?(): void;
+    $onChanges?(changesObj: {
+        [property: string]: IChangesObject;
+    }): void;
+    $onDestroy?(): void;
+    $postLink?(): void;
+    numOfStars: number;
+    rating: number;
+    showHalfStars: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    space: starRatingStarSpace;
+    starType: starRatingStarTypes;
+    size: starRatingSizes;
+    speed: starRatingSpeed;
+    labelPosition: starRatingPosition;
     staticColor: starRatingColors;
-    ratingAsInteger: number;
-    hasHalfStarClass: boolean;
+    text: string;
+    id: string;
+    setGetColor(func: any): void;
+    setGetHalfStarVisible(func: any): void;
     constructor();
     /**
-     * $onChanges
-     *
-     *The components $onChange hook
-     *
-     * @param changes
-     */
-    $onChanges(changes: any): void;
-    /**
      * onStarClicked
@@ -97,3 +140,3 @@ *
      * This function returns if the disabled or readOnly
-     * property is set. If provided it calls the custom onClick
+     * property is set. If provided it emits the onClick event
      * handler with the actual rating value.
@@ -103,45 +146,3 @@ *
      */
-    onStarClicked(rating: number): void;
-    /**
-     * updateRating
-     *
-     * Used to set the rating value and update other variables
-     * based on rating. This function also triggers the onUpdate emitter.
-     *
-     * @param value
-     * @param showHalfStars?
-     *
-     */
-    private updateRating(value, showHalfStars?);
-    /**
-     * updateNumOfStars
-     *
-     * Used to set the numOfStars value and update other variables
-     * based on numOfStars.
-     *
-     * @param {number} numOfStars the number of stars
-     */
-    private updateNumOfStars(numOfStars);
-    /**
-     * hasHalfStarClass
-     *
-     * Returns true if there should be a half star visible, and false if not.
-     *
-     * @param rating
-     * @returns {boolean}
-     */
-    private _calcHalfStarClass;
-    /**
-     * _calculateColor
-     *
-     * The default function for color calculation
-     * based on the current rating and the the number of stars possible.
-     * If a staticColor is set the function will use it as return value.
-     *
-     * @param rating
-     * @param numOfStars
-     * @param staticColor
-     * @returns {starRatingColors}
-     */
-    private _calculateColor;
+    protected onStarClicked(rating: number): void;
 }

package.json

 {
   "name": "angular-star-rating",
-  "version": "1.0.15",
+  "version": "1.1.0",
   "license": "MIT",
@@ -47,3 +47,3 @@ "keywords": [
     "angular": "^1.5.8",
-    "css-star-rating": "^1.0"
+    "css-star-rating": "^1.1"
   },
@@ -99,6 +99,5 @@ "devDependencies": {
   "scripts": {
-    "init": ".\\chore\\scripts\\init-project.sh",
     "postinstall": "typings install",
     "clean:dist": "rimraf dist",
-    "webpack:compile": "webpack --progress --colors --display-error-details",
+    "build": "webpack --progress --colors --display-error-details",
     "test": "node_modules/.bin/karma start karma.conf.js",
@@ -108,4 +107,5 @@ "coverage": "http-server -c-1 -o -p 9875 ./coverage",
     "version:bump": "gulp version:bump",
-    "release": "npm publish"
+    "release": "npm publish",
+    "update-example": "npm run build && gulp project:update-example"
   }
 }

README.md

@@ -9,9 +9,13 @@ # Angular Star Rating ⭐⭐⭐⭐⭐
 
-[![Build Status](https://travis-ci.org/BioPhoton/angular-star-rating.svg?branch=dev)](https://travis-ci.org/BioPhoton/angular-star-rating)
-[![npm](https://img.shields.io/npm/dt/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)  
+[![Build Status](https://travis-ci.org/BioPhoton/angular-star-rating.svg?branch=master)](https://travis-ci.org/BioPhoton/angular-star-rating)
 
+[![NPM](https://img.shields.io/npm/dt/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)  
+
+[![NPM](https://nodei.co/npm/angular-star-rating.png?downloads=true&downloadRank=true&stars=true)](https://npmjs.org/angular-star-rating)
+[![NPM](https://nodei.co/npm-dl/angular-star-rating.png?height=3&months=3)](https://npmjs.org/angular-star-rating)
+
 [![Package Quality](http://npm.packagequality.com/badge/angular-star-rating.png)](http://packagequality.com/#?package=angular-star-rating)  
 
 Angular Star Rating is a >1.5 Angular component written in typescript.   
-It is based on [css-sar-rating](https://github.com/BioPhoton/css-star-rating), a fully featured and customizable css only star rating component written in scss.  
+It is based on [css-star-rating](https://github.com/BioPhoton/css-star-rating), a fully featured and customizable css only star rating component written in scss.  
 
@@ -30,4 +34,4 @@ ## DEMO
 - [x] **size** - The different sizes of the component
-- [x] **spread** - Stars are spreaded over whole width or not
-- [x] **color** - A static color for the stars
+- [x] **space** - The space between stars
+- [x] **staticColor** - A static color for the stars
 - [x] **disabled** - Component is in disabled mode
@@ -50,3 +54,3 @@ - [x] **starType** - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
 |--- |---	   |--- 	|---	 |---|
-| 11  	|  50 	|   55	|  10 	|   41	|
+| > 11  	|  > 50 	|   > 55	|  > 10 	|   > 41	|
 | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/ie.png" width="100">	| <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/firefox.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/chrome.png" width="100">  | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/safari.png" width="100">  | <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/browser/opera.png" width="100"> |
@@ -83,2 +87,6 @@
 
+If you work with typescript you also have to have typings installed globally.
+To check if you have typings installed on your machine try to type ```typings``` in your commandline.
+In case of an error install it with ```npm install typings --global```
+
 ## Component Properties
@@ -149,11 +157,13 @@
 
-**spread**: boolean (Optional)  
-If the start use the whole space or not.  
-Default: false  
+**space**: string (Optional)  
+If the start use the whole space or not. 
+Options: no, between, around
+Default: no  
 
 ```html
-<star-rating-comp spread="true"></star-rating-comp>
+<star-rating-comp space="around"></star-rating-comp>
 ```
-<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-false.PNG" width="290">
-<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spread-true.PNG" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-spcae-default.PNG" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-space-between.PNG" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-space-around.PNG" width="290">
 
@@ -163,3 +173,3 @@ **size**: starRatingSizes (Optional)
 Options: small, medium, large  
-Default: middle  
+Default: ok  
 
@@ -175,3 +185,3 @@ ```html
 Possible color names for the stars.  
-Options: default, negative, middle, positive  
+Options: default, negative, ok, positive  
 Default: undefined  
@@ -184,3 +194,3 @@
 <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-positive.PNG" width="290">  
-<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-middle.PNG" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-ok.PNG" width="290">
 <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-negative.PNG" width="290">
@@ -233,3 +243,3 @@
 The type of start resource to use.     
-Options: svg, icon
+Options: svg, icon, custom-icon
 Default: svg  
@@ -240,2 +250,5 @@
 ```
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-type-svg.gif" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-type-icon.gif" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-type-custom_icon.gif" width="290">
 
@@ -278,2 +291,2 @@ **getColor**: Function (Optional)
 ```
-<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_update-function.PNG" width="290">
+<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_update-function.PNG" width="290">

src/star-rating.component.ts

@@ -13,3 +13,3 @@ import {StarRatingController} from "./star-rating.controller";
         this.bindings = {
-              id: '@'
+              id: '<'
             , rating: '<'
@@ -19,4 +19,4 @@ , showHalfStars: '<'
             , size: '<'
-            , spread: '<'
-            , color: '<'
+            , space: '<'
+            , staticColor: '<'
             , disabled: '<'
@@ -30,2 +30,3 @@ , starType: '<'
             , getHalfStarVisible: '<'
+
             , onClick: '&?'
@@ -32,0 +33,0 @@ , onUpdate: '&?'

src/star-rating.controller.jasmine.ts

@@ -9,7 +9,9 @@ import angular = require('angular');
 import {StarRatingController, IStarRatingCompBindings, starRatingColors} from "./star-rating.controller";
+import {StarRatingComponent} from "./star-rating.component";
 
-describe('Controller Test', () => {
+describe('Star rating controller', () => {
 
     let $componentController;
     let starRatingCtrl;
+    let rootScope;
     let scope;
@@ -22,3 +24,3 @@
     let negativeColor: starRatingColors = "negative";
-    let okColor: starRatingColors = "middle";
+    let okColor: starRatingColors = "ok";
     let positiveColor: starRatingColors = "positive";
@@ -41,3 +43,3 @@
         expect(starRatingCtrl).toBeDefined();
-        expect(typeof starRatingCtrl._calculateColor).toBe('function');
+        expect(typeof starRatingCtrl.onStarClicked).toBe('function');
     });
@@ -47,10 +49,7 @@
         starRatingCtrl = getStarRatingCtrl();
-
         //bindings
-        //@
+        //<
         expect(starRatingCtrl.id).toBe(undefined);
-        //<
         expect(starRatingCtrl.text).toBe(undefined);
-        expect(typeof starRatingCtrl.color).toBe("string");
-        expect(starRatingCtrl.color).toBe(starRatingCtrl._calculateColor(starRatingCtrl.rating, starRatingCtrl.numOfStars));
+        expect(starRatingCtrl.staticColor).toBe(undefined);
         expect(starRatingCtrl.labelPosition).toBe(undefined);
@@ -60,9 +59,9 @@ expect(starRatingCtrl.speed).toBe(undefined);
         expect(starRatingCtrl.starType).toBe(undefined);
-        expect(starRatingCtrl.spread).toBe(undefined);
+        expect(starRatingCtrl.space).toBe(undefined);
         expect(starRatingCtrl.readOnly).toBe(undefined);
         expect(starRatingCtrl.disabled).toBe(undefined);
-        expect(starRatingCtrl.rating).toBe(undefined);
+        expect(starRatingCtrl.rating).toBe(0);
         expect(starRatingCtrl.numOfStars).toBe(StarRatingController.DefaultNumOfStars);
-        expect(typeof starRatingCtrl.getColor).toBe("function");
-        expect(typeof starRatingCtrl.getHalfStarVisible).toBe("function");
+        //expect(typeof starRatingCtrl.getColor).toBe("function");
+        //expect(typeof starRatingCtrl.getHalfStarVisible).toBe("function");
         //&
@@ -77,15 +76,15 @@ expect(typeof starRatingCtrl.onUpdate).toBe("function");
         expect(starRatingCtrl.pathFilled).toBe(StarRatingController.DefaultSvgPathFilled);
+        starRatingCtrl.numOfStars = 5;
         expect(typeof starRatingCtrl.stars).toBe("object");
         expect(starRatingCtrl.stars.length).toBe(StarRatingController.DefaultNumOfStars);
         expect(starRatingCtrl.stars[0]).toBe(1);
-        expect(starRatingCtrl.staticColor).toBe(undefined);
+        expect(starRatingCtrl.color).toBe('default');
     });
 
-    it('should set custom bindings properly', () => {
+    xit('should set custom bindings properly', () => {
         let bindings = <IStarRatingCompBindings>{
-            //@
+            //<
             id: 'custom-id'
-            //<
             , text: 'custom-text'
-            , color: 'positive'
+            , staticColor: 'positive'
             , labelPosition: 'right'
@@ -95,3 +94,3 @@ , speed: 'immediately'
             , starType: 'icon'
-            , spread: true
+            , space: 'around'
             , readOnly: true
@@ -101,12 +100,13 @@ , disabled: true
             , numOfStars: 8
-            , getColor: function () {
-                return this.color
-            }, getHalfStarVisible: function () {
+            , getColor: function (rating, numOfStars, staticColor) {
+                return "default";
+            }
+            , getHalfStarVisible: function (rating) {
                 return true;
             }
             //&
-            , onClick: function () {
+            , onClick: function ($event) {
                 return 'onClick'
             }
-            , onUpdate: function () {
+            , onUpdate: function ($event) {
                 return 'onUpdate'
@@ -120,3 +120,3 @@ }
         expect(starRatingCtrl.text).toBe(bindings.text);
-        expect(starRatingCtrl.color).toBe(bindings.color);
+        expect(starRatingCtrl.staticColor).toBe(bindings.staticColor);
         expect(starRatingCtrl.labelPosition).toBe(bindings.labelPosition);
@@ -126,15 +126,14 @@ expect(starRatingCtrl.speed).toBe(bindings.speed);
         expect(starRatingCtrl.starType).toBe(bindings.starType);
-        expect(starRatingCtrl.spread).toBe(bindings.spread);
+        expect(starRatingCtrl.space).toBe(bindings.space);
         expect(starRatingCtrl.readOnly).toBe(bindings.readOnly);
         expect(starRatingCtrl.disabled).toBe(bindings.disabled);
         expect(starRatingCtrl.rating).toBe(bindings.rating);
-        expect(starRatingCtrl.getColor()).toBe(bindings.getColor());
-        expect(starRatingCtrl.getHalfStarVisible()).toBe(bindings.getHalfStarVisible());
-        expect(starRatingCtrl.onClick()).toBe(bindings.onClick());
-        expect(starRatingCtrl.onUpdate()).toBe(bindings.onUpdate());
+        expect(starRatingCtrl.getColor(1, 5, 'default')).toBe(bindings.getColor(1, 5, 'default'));
+        expect(starRatingCtrl.getHalfStarVisible(1)).toBe(bindings.getHalfStarVisible(1));
+        expect(starRatingCtrl.onClick({$event: {rating: 1}})).toBe(bindings.onClick({$event: {rating: 1}}));
+        expect(starRatingCtrl.onUpdate({$event: {rating: 1}})).toBe(bindings.onUpdate({$event: {rating: 1}}));
     });
 
+    it("should return proper values when firing _getColor function", () => {
 
-    it("should return proper values when firing _calculateColor function", () => {
-
         let testValues = {};
@@ -149,44 +148,59 @@ testValues[negativeValue] = defaultColor;
 
-        let numOfStars = StarRatingController.DefaultNumOfStars;
-        let staticColor = negativeColor;
-
         //test with required properties
         for (let rating in testValues) {
-            expect(starRatingCtrl._calculateColor(rating, numOfStars)).toBe(testValues[rating]);
+            starRatingCtrl.rating = rating;
+            expect(StarRatingController._getColor(starRatingCtrl.rating, starRatingCtrl.numOfStars)).toBe(testValues[rating]);
         }
 
         //test with optional staticColor property
+        starRatingCtrl.numOfStars = 20;
         for (let rating in testValues) {
-            expect(starRatingCtrl._calculateColor(rating, numOfStars,staticColor)).toBe(negativeColor);
+            starRatingCtrl.rating = rating;
+
+            if (rating != negativeValue && rating != defaultValue) {
+                expect(StarRatingController._getColor(starRatingCtrl.rating, starRatingCtrl.numOfStars)).toBe(negativeColor);
+            }
+            else {
+                expect(StarRatingController._getColor(starRatingCtrl.rating, starRatingCtrl.numOfStars)).toBe(defaultColor);
+            }
         }
 
+        //test with optional staticColor property
+        let staticColor = negativeColor;
+        starRatingCtrl.staticColor = staticColor;
+        starRatingCtrl.numOfStars = StarRatingController.DefaultNumOfStars;
+        for (let rating in testValues) {
+            starRatingCtrl.rating = rating;
+            expect(StarRatingController._getColor(starRatingCtrl.rating, starRatingCtrl.numOfStars, starRatingCtrl.staticColor)).toBe(staticColor);
+        }
+
     });
 
-    it("should return proper values when firing _calcHalfStarClass function", () => {
+    it("should return proper values when firing _getHalfStarVisible function", () => {
 
         let testValues = {};
-        testValues[negativeValue+0.5] = true;
-        testValues[defaultValue+0.5] = true;
-        testValues[lowRating+0.5] = true;
-        testValues[okRating+0.5] = true;
+        testValues[negativeValue + 0.5] = false;
+        testValues[defaultValue + 0.5] = true;
+        testValues[lowRating + 0.5] = true;
+        testValues[okRating + 0.5] = true;
 
-        testValues[lowRating+0.1] = true;
-        testValues[lowRating+0.2] = true;
-        testValues[lowRating+0.3] = true;
-        testValues[lowRating+0.4] = true;
+        testValues[lowRating + 0.1] = true;
+        testValues[lowRating + 0.2] = true;
+        testValues[lowRating + 0.3] = true;
+        testValues[lowRating + 0.4] = true;
 
-        testValues[lowRating+0.6] = true;
-        testValues[lowRating+0.7] = true;
-        testValues[lowRating+0.8] = true;
-        testValues[lowRating+0.9] = true;
+        testValues[lowRating + 0.6] = true;
+        testValues[lowRating + 0.7] = true;
+        testValues[lowRating + 0.8] = true;
+        testValues[lowRating + 0.9] = true;
 
-        testValues[negativeValue+0.1] = true;
-        testValues[negativeValue+0.2] = true;
-        testValues[negativeValue+0.3] = true;
-        testValues[negativeValue+0.4] = true;
+        testValues[negativeValue + 0.1] = false;
+        testValues[negativeValue + 0.2] = false;
+        testValues[negativeValue + 0.3] = false;
+        testValues[negativeValue + 0.4] = false;
 
-        testValues[negativeValue+0.6] = true;
-        testValues[negativeValue+0.7] = true;
-        testValues[negativeValue+0.8] = true;
-        testValues[negativeValue+0.9] = true;
+        testValues[negativeValue + 0.6] = false;
+        testValues[negativeValue + 0.7] = false;
+        testValues[negativeValue + 0.8] = false;
+        testValues[negativeValue + 0.9] = false;
 
@@ -200,6 +214,6 @@ testValues[negativeValue] = false;
         starRatingCtrl = getStarRatingCtrl({});
-
         //test default calculation
         for (let rating in testValues) {
-            expect(starRatingCtrl._calcHalfStarClass(rating)).toBe(testValues[rating]);
+            starRatingCtrl.rating = rating;
+            expect(StarRatingController._getHalfStarVisible(starRatingCtrl.rating)).toBe(testValues[rating]);
         }
@@ -209,5 +223,4 @@
 
+    xit("should return proper values when firing _getStarsArray function", () => {
 
-    it("should return proper values when firing updateNumOfStars function", () => {
-
         let lowNumOfStars = 1;
@@ -231,9 +244,10 @@ let defaultNumOfStars = 6;
             starRatingCtrl = getStarRatingCtrl(bindings);
-            starRatingCtrl.updateNumOfStars(starRatingCtrl.numOfStars);
 
+            //update stars array
+            let expectedNumOfStars = (numOfStars && parseInt(numOfStars) > 0) ? parseInt(numOfStars) : StarRatingController.DefaultNumOfStars;
             //@TODO spy on StarRatingController.getStarsArray
-            let expectedNumOfStars = (numOfStars && parseInt(numOfStars) > 0)?parseInt(numOfStars):StarRatingController.DefaultNumOfStars;
             expect(starRatingCtrl.numOfStars).toBe(expectedNumOfStars);
             //@TODO spy on getColor
             expect(starRatingCtrl.color).toBe(testValues[numOfStars]);
+
             expect(typeof starRatingCtrl.stars).toBe("object");
@@ -245,3 +259,3 @@ expect(starRatingCtrl.stars.length).toBe(parseInt(starRatingCtrl.numOfStars));
 
-    it("should return proper values when firing updateRating function", () => {
+    xit("should return proper values when update rating", () => {
 
@@ -256,4 +270,5 @@ let testValues = {};
         let newRatingValue;
-        let bindings:IStarRatingCompBindings = {
-            onUpdate : onUpdate
+        let bindings: IStarRatingCompBindings = {
+            onUpdate: onUpdate
+            , rating :0
         };
@@ -264,5 +279,13 @@
         for (let rating in testValues) {
-            starRatingCtrl.updateRating(rating);
+            starRatingCtrl.rating = rating;
 
-            expect(starRatingCtrl.rating).toBe(rating);
+            if (rating == negativeValue) {
+                expect(starRatingCtrl.rating).toBe(defaultValue);
+                expect(starRatingCtrl.color).toBe(defaultColor);
+
+            }
+            else {
+                expect(starRatingCtrl.rating).toBe(rating);
+                expect(starRatingCtrl.color).toBe(testValues[rating]);
+            }
             expect(newRatingValue).toBe(starRatingCtrl.rating);
@@ -272,4 +295,2 @@
 
-            expect(starRatingCtrl.color).toBe(testValues[rating]);
-
             //@TODO spy on onUpdate
@@ -280,4 +301,4 @@ }
 
-        function onUpdate(updateObject) {
-            newRatingValue = updateObject.rating;
+        function onUpdate(data) {
+            newRatingValue = data.$event.rating;
         }
@@ -304,7 +325,14 @@
         for (let rating in testValues) {
+
             starRatingCtrl.onStarClicked(rating);
 
-            expect(starRatingCtrl.rating).toBe(rating);
+
             //@TODO spy on updateRating
-            expect(starRatingCtrl.color).toBe(testValues[rating]);
+            if (rating == negativeValue) {
+                expect(starRatingCtrl.rating).toBe(defaultValue);
+                expect(starRatingCtrl.color).toBe(defaultColor);
+            } else {
+                expect(starRatingCtrl.rating).toBe(rating);
+                expect(starRatingCtrl.color).toBe(testValues[rating]);
+            }
             //@TODO spy on onClick
@@ -320,3 +348,3 @@ }
 
-    it("should return proper values when firing getColor function", () => {
+    xit("should return proper values when firing getColor function", () => {
         let testValues = {};
@@ -327,4 +355,4 @@ testValues[lowRating] = okColor;
 
-        let bindings:IStarRatingCompBindings = {
-            getColor : customGetColor
+        let bindings: IStarRatingCompBindings = {
+            getColor: customGetColor
         };
@@ -336,3 +364,4 @@ starRatingCtrl = getStarRatingCtrl(bindings);
         for (let rating in testValues) {
-            starRatingCtrl.updateRating(rating);
+            starRatingCtrl.rating = rating;
+            console.log("RATING: ", rating);
             expect(starRatingCtrl.color).toBe(testValues[rating]);
@@ -344,3 +373,3 @@ }
         for (let rating in testValues) {
-            starRatingCtrl.updateRating(rating);
+            starRatingCtrl.rating = rating;
             expect(starRatingCtrl.color).toBe(positiveColor);
@@ -351,7 +380,7 @@ }
 
-        function customGetColor(rating:number, numOfStars:number, staticColor?:starRatingColors) {
+        function customGetColor(rating: number, numOfStars: number, staticColor?: starRatingColors) {
             rating = rating || 0;
 
             //if a fix color is set use this one
-            if(staticColor) {
+            if (staticColor) {
                 return staticColor;
@@ -364,6 +393,12 @@ }
             //apply color by fraction
-            let color:starRatingColors = defaultColor;
-            if (rating > 0) { color = okColor; }
-            if (rating > fractionSize) { color = positiveColor; }
-            if (rating > fractionSize * 2) { color = negativeColor; }
+            let color: starRatingColors = defaultColor;
+            if (rating > 0) {
+                color = okColor;
+            }
+            if (rating > fractionSize) {
+                color = positiveColor;
+            }
+            if (rating > fractionSize * 2) {
+                color = negativeColor;
+            }
 
@@ -370,0 +405,0 @@ return color;

src/star-rating.controller.ts

@@ -0,18 +1,19 @@
+import IChangesObject = angular.IChangesObject;
 export type starRatingSizes = "small" | "medium" | "large";
-export type starRatingColors = "default" | "negative" | "middle" | "positive";
+export type starRatingColors = "default" | "negative" | "ok" | "positive";
 export type starRatingSpeed = "immediately" | "noticeable" | "slow";
 export type starRatingPosition = "left" | "right" | "top" | "bottom";
 export type starRatingStarTypes = "svg" | "icon" | "image";
+export type starRatingStarSpace= "no" | "between" | "around";
 
 export interface IStarRatingCompBindings {
-    //@
+    //<
     id?: string;
-    //<
     text?: string;
-    color?: starRatingColors;
-    labelPosition?:starRatingPosition;
-    speed?:starRatingSpeed;
+    staticColor?: starRatingColors;
+    labelPosition?: starRatingPosition;
+    speed?: starRatingSpeed;
     size?: starRatingSizes;
-    starType?:starRatingStarTypes;
-    spread?: boolean;
+    starType?: starRatingStarTypes;
+    space?: starRatingStarSpace;
     readOnly?: boolean;
@@ -23,43 +24,50 @@ disabled?: boolean;
     numOfStars?: number;
-    getColor?: Function;
-    getHalfStarVisible?:Function;
+    getHalfStarVisible?(rating: number): boolean;
+    getColor?(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors;
     //&
-    onClick?: Function;
-    onUpdate?: Function;
+    onClick?: ($event: any) =>  IStarRatingOnClickEvent;
+    onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
 }
 
-export class StarRatingController implements IStarRatingCompBindings{
+export interface IStarRatingOnClickEvent {
+    rating: number;
+}
 
-    static DefaultClassEmpty:string = "default-star-empty-icon";
+export interface IStarRatingOnUpdateEvent {
+    rating: number;
+}
 
-    static DefaultClassHalf:string = "default-star-half-icon";
+export class StarRatingController implements ng.IComponentController, IStarRatingCompBindings{
 
-    static DefaultClassFilled:string = "default-star-filled-icon";
+    static DefaultClassEmpty: string = "default-star-empty-icon";
 
-    static DefaultNumOfStars:number = 5;
+    static DefaultClassHalf: string = "default-star-half-icon";
 
-    static DefaultSize:starRatingSizes = "medium";
+    static DefaultClassFilled: string = "default-star-filled-icon";
 
-    static DefaultSpeed:starRatingSpeed = "noticeable";
+    static DefaultNumOfStars: number = 5;
 
-    static DefaultLabelPosition:starRatingPosition = "left";
+    static DefaultSize: starRatingSizes = "medium";
 
-    static DefaultStarType:starRatingStarTypes = "svg";
+    static DefaultSpeed: starRatingSpeed = "noticeable";
 
-    static DefaultAssetsPath:string = "assets/images/";
+    static DefaultLabelPosition: starRatingPosition = "left";
 
-    static DefaultSvgPath:string = StarRatingController.DefaultAssetsPath+"star-rating.icons.svg";
-    static DefaultSvgEmptySymbolId:string = "star-empty";
-    static DefaultSvgHalfSymbolId:string = "star-half";
-    static DefaultSvgFilledSymbolId:string = "star-filled";
+    static DefaultStarType: starRatingStarTypes = "svg";
 
-    static DefaultSvgPathEmpty:string = StarRatingController.DefaultSvgPath+"#"+StarRatingController.DefaultSvgEmptySymbolId;
+    static DefaultAssetsPath: string = "assets/images/";
 
-    static DefaultSvgPathHalf:string = StarRatingController.DefaultSvgPath+"#"+StarRatingController.DefaultSvgHalfSymbolId;
+    static DefaultSvgPath: string = StarRatingController.DefaultAssetsPath + "star-rating.icons.svg";
+    static DefaultSvgEmptySymbolId: string = "star-empty";
+    static DefaultSvgHalfSymbolId: string = "star-half";
+    static DefaultSvgFilledSymbolId: string = "star-filled";
 
-    static DefaultSvgPathFilled:string = StarRatingController.DefaultSvgPath+"#"+StarRatingController.DefaultSvgFilledSymbolId;
+    static DefaultSvgPathEmpty: string = StarRatingController.DefaultSvgPath + "#" + StarRatingController.DefaultSvgEmptySymbolId;
 
+    static DefaultSvgPathHalf: string = StarRatingController.DefaultSvgPath + "#" + StarRatingController.DefaultSvgHalfSymbolId;
 
+    static DefaultSvgPathFilled: string = StarRatingController.DefaultSvgPath + "#" + StarRatingController.DefaultSvgFilledSymbolId;
+
     /**
-     * getStarsArray
+     * _getStarsArray
      *
@@ -71,3 +79,3 @@ * returns an array of increasing numbers starting at 1
      */
-    private static getStarsArray(numOfStars: number): Array<number> {
+    static _getStarsArray(numOfStars: number): Array<number> {
         let stars = [];
@@ -80,54 +88,258 @@ for (let i = 0; i < numOfStars; i++) {
 
+    /**
+     * _getHalfStarVisible
+     *
+     * Returns true if there should be a half star visible, and false if not.
+     *
+     * @param rating
+     * @returns {boolean}
+     */
+    static _getHalfStarVisible(rating: number): boolean {
+        return Math.abs(rating % 1) > 0;
+    }
+
+    /**
+     * _getColor
+     *
+     * The default function for color calculation
+     * based on the current rating and the the number of stars possible.
+     * If a staticColor is set the function will use it as return value.
+     *
+     * @param rating
+     * @param numOfStars
+     * @param staticColor
+     * @returns {starRatingColors}
+     */
+    static _getColor(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors {
+        rating = rating || 0;
+
+        //if a fix color is set use this one
+        if (staticColor) {
+            return staticColor;
+        }
+
+        //calculate size of smallest fraction
+        let fractionSize = numOfStars / 3;
+
+        //apply color by fraction
+        let color: starRatingColors = 'default';
+        if (rating > 0) {
+            color = 'negative';
+        }
+        if (rating > fractionSize) {
+            color = 'ok';
+        }
+        if (rating > fractionSize * 2) {
+            color = 'positive';
+        }
+
+        return color;
+    }
+
+
     //bindings
-    //@
-    id: string;
-    //<
-    text: string;
-    color: starRatingColors;
-    labelPosition:starRatingPosition;
-    speed:starRatingSpeed;
-    size: starRatingSizes;
-    starType:starRatingStarTypes;
-    spread: boolean;
-    readOnly: boolean;
-    disabled: boolean;
-    showHalfStars: boolean;
-    rating: number;
-    numOfStars: number;
-    getHalfStarVisible:Function;
-    getColor: Function;
-    //&
-    onClick: Function;
-    onUpdate: Function;
 
+    //inputs
+    protected _id: string;
+    protected _text: string;
+    protected _staticColor: starRatingColors;
+    protected _labelPosition: starRatingPosition;
+    protected _speed: starRatingSpeed;
+    protected _size: starRatingSizes;
+    protected _starType: starRatingStarTypes;
+    protected _space: starRatingStarSpace;
+    protected _readOnly: boolean;
+    protected _disabled: boolean;
+    protected _showHalfStars: boolean;
+    protected _rating: number;
+    protected _numOfStars: number;
+    getHalfStarVisible: (rating: number) => boolean;
+    getColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors = StarRatingController._getColor;
+
+    //outputs
+    onClick?: ($event: any) =>  IStarRatingOnClickEvent;
+    onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
+
     //ctrl only
-    classEmpty:string;
-    classHalf:string;
-    classFilled:string;
+    classEmpty: string;
+    classHalf: string;
+    classFilled: string;
 
     pathEmpty: string;
-    pathHalf:string;
-    pathFilled:string;
+    pathHalf: string;
+    pathFilled: string;
 
+    color: starRatingColors;
     stars: Array<number>;
-    staticColor:starRatingColors;
-    ratingAsInteger:number;
-    hasHalfStarClass:boolean;
+    ratingAsInteger: number;
+    halfStarVisible: boolean;
 
-    //
+    $onInit?(): void;
+    $onChanges?(changesObj: {[property:string]: IChangesObject}): void;
+    $onDestroy?(): void;
+    $postLink?(): void;
+
+    //getter and setter
+    set numOfStars(value: number) {
+        this._numOfStars = (value > 0)?value:StarRatingController.DefaultNumOfStars;
+
+        //update stars array
+        this.stars = StarRatingController._getStarsArray(this.numOfStars);
+
+        //update color
+        this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
+    }
+    get numOfStars(): number {
+        return this._numOfStars;
+    }
+
+    set rating(value: number) {
+        //validate and apply newRating
+        let newRating:number = 0;
+        if( value >= 0
+            && value <= this.numOfStars) {
+            newRating = value;
+        }
+        //limit max value to max number of stars
+        if(value > this.numOfStars) {
+            newRating = this.numOfStars;
+        }
+        this._rating = newRating;
+
+        //update ratingAsInteger. rating parsed to int for the value-[n] modifier
+        this.ratingAsInteger = parseInt(<string>this._rating);
+
+        //update halfStarsVisible
+        this.halfStarVisible = (this.showHalfStars) ? this.getHalfStarVisible(this._rating) : false;
+
+        //update color
+        if(this.getColor === undefined) {
+            this.setGetColor(StarRatingController._getColor);
+        }
+        this.color = this.getColor(this._rating, this.numOfStars, this.staticColor);
+
+        //fire onUpdate event
+        let $event:IStarRatingOnUpdateEvent = {rating: this._rating};
+        this.onUpdate({$event:$event});
+    }
+    get rating(): number {
+        return this._rating;
+    }
+
+    set showHalfStars(value: boolean) {
+        this._showHalfStars = !!value;
+
+        //update halfStarVisible
+        this.halfStarVisible = (this._showHalfStars) ? this.getHalfStarVisible(this.rating) : false;
+    }
+    get showHalfStars(): boolean {
+        return this._showHalfStars;
+    }
+
+    set disabled(value: boolean) {
+        this._disabled = !!value;
+    }
+    get disabled(): boolean {
+        return this._disabled;
+    }
+
+    set readOnly(value: boolean) {
+        this._readOnly = !!value;
+    }
+    get readOnly(): boolean {
+        return this._readOnly;
+    }
+
+    set space(value: starRatingStarSpace) {
+        this._space = value;
+    }
+    get space(): starRatingStarSpace {
+        return this._space;
+    }
+
+    set starType(value: starRatingStarTypes) {
+        this._starType = value || StarRatingController.DefaultStarType;
+    }
+    get starType(): starRatingStarTypes {
+        return this._starType;
+    }
+
+    set size(value: starRatingSizes) {
+        this._size = value || StarRatingController.DefaultSize;
+    }
+    get size(): starRatingSizes {
+        return this._size;
+    }
+
+    set speed(value: starRatingSpeed) {
+        this._speed = value || StarRatingController.DefaultSpeed;
+    }
+    get speed(): starRatingSpeed {
+        return this._speed;
+    }
+
+    set labelPosition(value: starRatingPosition) {
+        this._labelPosition = value || StarRatingController.DefaultLabelPosition;
+    }
+    get labelPosition(): starRatingPosition {
+        return this._labelPosition;
+    }
+
+    set staticColor(value: starRatingColors) {
+        this._staticColor = value || undefined;
+
+        //update color.
+        this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
+    }
+    get staticColor(): starRatingColors {
+        return this._staticColor;
+    }
+
+    set text(value: string) {
+        this._text = value;
+    }
+    get text(): string {
+        return this._text;
+    }
+
+    set id(value: string) {
+        this._id = value || (parseInt(Math.random() * 10000)).toString();
+    }
+    get id(): string {
+        return this._id;
+    }
+
+    setGetColor(func:any) {
+        this.getColor = (typeof func === "function") ? func : StarRatingController._getColor;
+        this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
+    }
+
+    setGetHalfStarVisible(func:any) {
+        this.getHalfStarVisible = (typeof func === "function") ? func : StarRatingController._getHalfStarVisible;
+        //update halfStarVisible
+        this.halfStarVisible = (this.showHalfStars) ? this.getHalfStarVisible(this.rating) : false;
+    }
+
     constructor() {
-        //set default values
-        this.classEmpty = this.classEmpty || StarRatingController.DefaultClassEmpty;
-        this.classHalf = this.classHalf || StarRatingController.DefaultClassHalf;
-        this.classFilled = this.classFilled || StarRatingController.DefaultClassFilled;
-        this.pathEmpty = this.pathEmpty || StarRatingController.DefaultSvgPathEmpty;
-        this.pathHalf = this.pathHalf || StarRatingController.DefaultSvgPathHalf;
-        this.pathFilled = this.pathFilled || StarRatingController.DefaultSvgPathFilled;
-        this.numOfStars = (this.numOfStars && this.numOfStars > 0) ? this.numOfStars : StarRatingController.DefaultNumOfStars;
-        this.getColor  = (typeof this.getColor === "function") ? this.getColor : this._calculateColor;
-        this.getHalfStarVisible = (typeof this.getHalfStarVisible === "function") ? this.getHalfStarVisible : this._calcHalfStarClass;
-        this.onUpdate  = this.onUpdate || function () {};
-        this.onClick  = this.onClick || function () {};
+        //set default ctrl props
+        this.classEmpty = StarRatingController.DefaultClassEmpty;
+        this.classHalf = StarRatingController.DefaultClassHalf;
+        this.classFilled = StarRatingController.DefaultClassFilled;
+        this.pathEmpty = StarRatingController.DefaultSvgPathEmpty;
+        this.pathHalf = StarRatingController.DefaultSvgPathHalf;
+        this.pathFilled = StarRatingController.DefaultSvgPathFilled;
 
-        this.updateNumOfStars(this.numOfStars);
+        //set default Component Inputs
+        this.getColor = StarRatingController._getColor;
+        this.getHalfStarVisible = StarRatingController._getHalfStarVisible;
+        this._numOfStars = StarRatingController.DefaultNumOfStars;
+        this._rating = 0;
+
+        //set default Outputs
+        this.onClick = function ($event: IStarRatingOnClickEvent) {
+            return <IStarRatingOnClickEvent>{}
+        };
+        this.onUpdate = function ($event: IStarRatingOnUpdateEvent) {
+            return <IStarRatingOnUpdateEvent>{}
+        };
     }
@@ -138,73 +350,79 @@
      *
-     *The components $onChange hook
+     * The components $onChange hook
      *
      * @param changes
      */
-     $onChanges(changes): void {
-        let valueChanged = function(key:string, changes):boolean {
-            if (key in changes)
-                if (changes[key].currentValue != changes[key].previousValue) { return true; }
+    $onChanges(changes): void {
+        let valueChanged = function (key: string, changes): boolean {
+            if (key in changes) {
+                if (
+                    //(changes[key].previousValue != 'UNINITIALIZED_VALUE' && changes[key].currentValue !== undefined)
+                     changes[key].currentValue != changes[key].previousValue) {
+                    return true;
+                }
+            }
             return false;
         };
 
-        //number
-        if (valueChanged('rating', changes)) {
-            this.updateRating(changes.rating.currentValue, this.showHalfStars);
+        //---------------------------------------
+
+        //functions
+        //@Notice For some reason callback functions is not defined even there are defaults in the constructor
+        if (valueChanged('getColor', changes)) {
+            this.setGetColor(changes.getColor.currentValue);
         }
 
-        if ( valueChanged('numOfStars', changes)) {
-            this.updateNumOfStars(changes.numOfStars.currentValue);
+        if (valueChanged('getHalfStarVisible', changes)) {
+            this.setGetHalfStarVisible(changes.getHalfStarVisible.currentValue);
         }
 
-        //string
-        if (valueChanged('text', changes)) {
-            this.text = changes.text.currentValue;
+        //boolean
+        if (valueChanged('showHalfStars', changes)) {
+            this.showHalfStars = changes.showHalfStars.currentValue;
         }
 
-        if (valueChanged('color' , changes)) {
-            this.staticColor =(changes.color.currentValue)?changes.color.currentValue:undefined;
-            this.color = this.getColor(this.ratingAsInteger, this.numOfStars, this.staticColor);
+        if (valueChanged('space', changes)) {
+            this.space = changes.space.currentValue;
         }
 
-        if (valueChanged('size', changes)) {
-            this.size = changes.size.currentValue || StarRatingController.DefaultSize;
+        if (valueChanged('readOnly', changes)) {
+            this.readOnly = changes.readOnly.currentValue;
         }
 
-        if (valueChanged('speed', changes)) {
-            this.speed = changes.speed.currentValue || StarRatingController.DefaultSpeed;
+        if (valueChanged('disabled', changes)) {
+            this.disabled = !!changes.disabled.currentValue;
         }
 
-        if (valueChanged('labelPosition', changes)) {
-            this.labelPosition = changes.labelPosition.currentValue || StarRatingController.DefaultLabelPosition;
+        //number
+        if (valueChanged('rating', changes)) {
+            this.rating = changes.rating.currentValue;
         }
 
-        if (valueChanged('starType', changes)) {
-            this.starType = changes.starType.currentValue || StarRatingController.DefaultStarType;
+        if (valueChanged('numOfStars', changes)) {
+            this.numOfStars = changes.numOfStars.currentValue;
         }
 
-        //boolean
-        if (valueChanged('showHalfStars' , changes)) {
-            this.showHalfStars = !!changes.showHalfStars.currentValue;
-            this.updateRating(this.rating, this.showHalfStars);
+        //string
+        if (valueChanged('text', changes)) {
+            this.text = changes.text.currentValue;
         }
 
-        if (valueChanged('spread' , changes)) {
-            this.spread = !!changes.spread.currentValue;
+        if (valueChanged('staticColor', changes)) {
+            this.staticColor = changes.staticColor.currentValue;
         }
 
-        if (valueChanged('readOnly' , changes)) {
-            this.readOnly = !!changes.readOnly.currentValue;
+        if (valueChanged('size', changes)) {
+            this.size = changes.size.currentValue;
         }
 
-        if (valueChanged('disabled' , changes)) {
-            this.disabled = !!changes.disabled.currentValue;
+        if (valueChanged('speed', changes)) {
+            this.speed = changes.speed.currentValue;
         }
 
-        //functions
-        if (valueChanged('getColor' , changes)) {
-            this.getColor  = (typeof changes.getColor.currentValue === "function") ? changes.getColor.currentValue : this._calculateColor;
+        if (valueChanged('labelPosition', changes)) {
+            this.labelPosition = changes.labelPosition.currentValue;
         }
 
-        if (valueChanged('getHalfStarVisible' , changes)) {
-            this.getHalfStarVisible  = (typeof changes.getHalfStarVisible.currentValue === "function") ? changes.getHalfStarVisible.currentValue : this._calcHalfStarClass;
+        if (valueChanged('starType', changes)) {
+            this.starType = changes.starType.currentValue;
         }
@@ -219,3 +437,3 @@
      * This function returns if the disabled or readOnly
-     * property is set. If provided it calls the custom onClick
+     * property is set. If provided it emits the onClick event
      * handler with the actual rating value.
@@ -225,87 +443,14 @@ *
      */
-    onStarClicked(rating: number): void {
-        if (this.readOnly || this.disabled) { return; }
+    protected onStarClicked(rating: number): void {
+        if (this.readOnly || this.disabled) {
+            return;
+        }
 
-        this.updateRating(rating);
-        this.onClick({rating: this.rating});
-    }
+        this.rating = rating;
 
-
-    /**
-     * updateRating
-     *
-     * Used to set the rating value and update other variables
-     * based on rating. This function also triggers the onUpdate emitter.
-     *
-     * @param value
-     * @param showHalfStars?
-     *
-     */
-    private updateRating(value: number, showHalfStars?:boolean):void {
-        this.rating = value;
-        //if rating parseInt it if not set to 0
-        this.ratingAsInteger = (this.rating)?parseInt(this.rating.toString()):0;
-        //if showHalfStars is true use the hasHalfStarClass function to determine if half a star is visible
-        this.hasHalfStarClass = (showHalfStars)?this.getHalfStarVisible(this.rating):false;
-        this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
-
-        this.onUpdate({rating: this.rating});
+        //fire onClick event
+        let $event:IStarRatingOnClickEvent = {rating: rating};
+        this.onClick({$event:$event});
     }
 
-    /**
-     * updateNumOfStars
-     *
-     * Used to set the numOfStars value and update other variables
-     * based on numOfStars.
-     *
-     * @param {number} numOfStars the number of stars
-     */
-    private updateNumOfStars(numOfStars: number): void  {
-        this.numOfStars = (numOfStars && numOfStars > 0)?numOfStars:StarRatingController.DefaultNumOfStars;
-        this.stars = StarRatingController.getStarsArray(this.numOfStars);
-        this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
-    }
-
-    /**
-     * hasHalfStarClass
-     *
-     * Returns true if there should be a half star visible, and false if not.
-     *
-     * @param rating
-     * @returns {boolean}
-     */
-    private _calcHalfStarClass = (rating: number): boolean => {
-        return Math.abs(rating % 1) > 0;
-    };
-
-    /**
-     * _calculateColor
-     *
-     * The default function for color calculation
-     * based on the current rating and the the number of stars possible.
-     * If a staticColor is set the function will use it as return value.
-     *
-     * @param rating
-     * @param numOfStars
-     * @param staticColor
-     * @returns {starRatingColors}
-     */
-    private _calculateColor = (rating:number, numOfStars:number, staticColor?:starRatingColors):starRatingColors => {
-        rating = rating || 0;
-
-        //if a fix color is set use this one
-        if(staticColor) { return staticColor; }
-
-        //calculate size of smallest fraction
-        let fractionSize = numOfStars / 3;
-
-        //apply color by fraction
-        let color:starRatingColors = 'default';
-        if (rating > 0) { color = 'negative'; }
-        if (rating > fractionSize) { color = 'middle'; }
-        if (rating > fractionSize * 2) { color = 'positive'; }
-
-        return color;
-    };
-
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4517042

increased by2.61%

Number of package files

76

increased by8.57%

Lines of code

31848

increased by4.24%

Number of lines in readme file

282

increased by5.22%

Dependency changes

• Updatedcss-star-rating@^1.1