feat(direction and types): added direction in component and changed t…

…ype names

README.MD

@@ -39,7 +39,7 @@ It also provides callbacks for all calculation functions used in the component a
 - [x] **numOfStars** - The max number of stars you can rate
 - [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] **staticColor** - A static color for the stars
 - [x] **disabled** - Component is in disabled mode
 - [x] **starType** - Stars can be displayed as svg, character or icon-font like fontawesome, glyphicons or ionicons
 - [x] **labelText** - The value of the label text

examples/angular2/src/app/app.component.html

@@ -16,6 +16,7 @@ <h1>
   [disabled]="starRatingConfig.disabled"
   [readOnly]="starRatingConfig.readOnly"
   [rating]="starRatingConfig.rating"
+  [direction]="starRatingConfig.direction"
   [showHalfStars]="starRatingConfig.showHalfStars"
   [getColor]="starRatingConfig.getColor"
   [getHalfStarVisible]="starRatingConfig.getHalfStarVisible"

examples/angular2/src/app/app.component.ts

@@ -28,6 +28,7 @@ export class AppComponent {
     this.starRatingConfig.disabled  = false;
     this.starRatingConfig.readOnly = false;
     this.starRatingConfig.rating = 2.7;
+    this.starRatingConfig.direction = "rtl";
     this.starRatingConfig.showHalfStars = true;
     this.starRatingConfig.getColor = (rating: number, numOfStars: number, staticColor?: starRatingColors) => {
       return staticColor || "ok";

src/star-rating-config.ts

@@ -4,7 +4,7 @@ import {
   starRatingSpeed,
   starRatingPosition,
   starRatingStarTypes,
-  starRatingColors
+  starRatingColor
 } from "./star-rating-struct";
 
 /**
@@ -45,9 +45,7 @@ export class StarRatingConfig {
 
   svgPathFilled: string = this.svgPath + "#" + this.svgFilledSymbolId;
 
-  getColor:(rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
-  /*
-  getColor(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors {
+  getColor(rating: number, numOfStars: number, staticColor?: starRatingColor): starRatingColor {
     rating = rating || 0;
 
     //if a fix color is set use this one
@@ -59,7 +57,7 @@ export class StarRatingConfig {
     let fractionSize = numOfStars / 3;
 
     //apply color by fraction
-    let color: starRatingColors = 'default';
+    let color: starRatingColor = 'default';
     if (rating > 0) {
       color = 'negative';
     }
@@ -72,7 +70,6 @@ export class StarRatingConfig {
 
     return color;
   }
-*/
   getHalfStarVisible(rating: number): boolean {
     return Math.abs(rating % 1) > 0;
   }

src/star-rating-struct.ts

@@ -1,9 +1,10 @@
 export type starRatingSizes = "small" | "medium" | "large";
-export type starRatingColors = "default" | "negative" | "ok" | "positive";
+export type starRatingColor = "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 type starRatingDirection= "rtl" | "ltr";
 
 export interface IStarRatingOnClickEvent {
   rating: number;

src/star-rating.component.ts

@@ -2,12 +2,12 @@ import {Component, Input, OnChanges, Output, EventEmitter} from "@angular/core";
 import {
     starRatingSizes,
     starRatingSpeed,
-    starRatingColors,
+    starRatingColor,
     starRatingPosition,
     starRatingStarSpace,
     starRatingStarTypes,
     IStarRatingOnClickEvent,
-    IStarRatingOnRatingChangeEven
+    IStarRatingOnRatingChangeEven, starRatingDirection
 } from "./star-rating-struct";
 import {StarRatingConfig} from "./star-rating-config";
 
@@ -86,9 +86,9 @@ export class StarRatingComponent implements OnChanges {
      * @param rating
      * @param numOfStars
      * @param staticColor
-     * @returns {starRatingColors}
+     * @returns {starRatingColor}
      */
-    static _getColor(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors {
+    static _getColor(rating: number, numOfStars: number, staticColor?: starRatingColor): starRatingColor {
         rating = rating || 0;
 
         //if a fix color is set use this one
@@ -100,7 +100,7 @@ export class StarRatingComponent implements OnChanges {
         let fractionSize = numOfStars / 3;
 
         //apply color by fraction
-        let color: starRatingColors = 'default';
+        let color: starRatingColor = 'default';
         if (rating > 0) {
             color = 'negative';
         }
@@ -167,14 +167,14 @@ export class StarRatingComponent implements OnChanges {
     /**
      * staticColor
      */
-    protected _staticColor: starRatingColors;
+    protected _staticColor: starRatingColor;
 
-    get staticColor(): starRatingColors {
+    get staticColor(): starRatingColor {
         return this._staticColor;
     }
 
     @Input()
-    set staticColor(value: starRatingColors) {
+    set staticColor(value: starRatingColor) {
         this._staticColor = value || undefined;
 
         //update color.
@@ -183,6 +183,26 @@ export class StarRatingComponent implements OnChanges {
 
     /////////////////////////////////////////////
 
+    /**
+     * direction
+     */
+    protected _direction: starRatingDirection;
+
+    get direction(): starRatingDirection {
+        return this._direction;
+    }
+
+    @Input()
+    set direction(value: starRatingDirection) {
+        this._direction = value || undefined;
+
+        //update color.
+        this.setColor();
+    }
+
+    /////////////////////////////////////////////
+
+
     /**
      * numOfStars
      */
@@ -363,7 +383,7 @@ export class StarRatingComponent implements OnChanges {
      * getColor
      */
     @Input()
-    getColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
+    getColor: (rating: number, numOfStars: number, staticColor?: starRatingColor) => starRatingColor;
     /////////////////////////////////////////////
 
     /**
@@ -391,7 +411,7 @@ export class StarRatingComponent implements OnChanges {
     pathHalf: string;
     pathFilled: string;
 
-    color: starRatingColors;
+    color: starRatingColor;
     stars: Array<number>;
     ratingAsInteger: number;
     halfStarVisible: boolean;
@@ -532,6 +552,10 @@ export class StarRatingComponent implements OnChanges {
             this.staticColor = changes['staticColor'].currentValue;
         }
 
+        if (valueChanged('direction', changes)) {
+            this.direction = changes['direction'].currentValue;
+        }
+
         if (valueChanged('size', changes)) {
             this.size = changes['size'].currentValue;
         }