feat(cli-migration): migrate to webpack and sass

examples/angular2/angular-cli.json

@@ -18,7 +18,7 @@
       "prefix": "app",
       "mobile": false,
       "styles": [
-        "styles.css"
+        "./node_modules"
       ],
       "scripts": [],
       "environments": {
@@ -41,7 +41,7 @@
     }
   },
   "defaults": {
-    "styleExt": "css",
+    "styleExt": "sass",
     "prefixInterfaces": false,
     "inline": {
       "style": false,

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

@@ -1,11 +1,9 @@
 import { Component } from '@angular/core';
-import {StarRatingComponent} from "./common/star-rating/star-rating.module";
-
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'],
+  styleUrls: ['./app.component.sass'],
   //directives: [StarRatingComponent]
 })
 export class AppComponent {

examples/angular2/src/app/app.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 
 import { AppComponent } from './app.component';
-import {StarRatingModule} from "./common/star-rating/star-rating.module";
+import {StarRatingModule} from "../../node_modules/angular-star-rating/src/star-rating.module";
 
 @NgModule({
   declarations: [

package.json

@@ -44,12 +44,12 @@
     "@angular/platform-browser": "2.0.0-rc.1",
     "@angular/platform-browser-dynamic": "2.0.0-rc.1",
     "@angular/router": "2.0.0-rc.1",
+    "css-star-rating": "^1.1.1",
     "es6-shim": "^0.35.0",
     "reflect-metadata": "0.1.3",
     "rxjs": "5.0.0-beta.6",
     "systemjs": "0.19.26",
-    "zone.js": "^0.6.12",
-    "css-star-rating": "^1.0"
+    "zone.js": "^0.6.12"
   },
   "devDependencies": {
     "css-loader": "^0.25.0",

src/star-rating-config.ts

@@ -0,0 +1,79 @@
+import {Injectable} from '@angular/core';
+import {
+  IStarRatingCompBindings,
+  starRatingSizes,
+  starRatingSpeed,
+  starRatingPosition,
+  starRatingStarTypes,
+  starRatingColors
+} from "./star-rating-struct";
+
+/**
+ * Configuration service for the StarRating component.
+ * You can inject this service, typically in your root component, and customize the values of its properties in
+ * order to provide default values for all the star ratings used in the application.
+ */
+@Injectable()
+export class StarRatingConfig implements IStarRatingCompBindings {
+
+  classEmpty: string = "default-star-empty-icon";
+
+  classHalf: string = "default-star-half-icon";
+
+  classFilled: string = "default-star-filled-icon";
+
+  numOfStars: number = 5;
+
+  size: starRatingSizes = "medium";
+
+  speed: starRatingSpeed = "noticeable";
+
+  labelPosition: starRatingPosition = "left";
+
+  starType: starRatingStarTypes = "svg";
+
+  assetsPath: string = "assets/images/";
+
+  svgPath: string = this.assetsPath + "star-rating.icons.svg";
+  svgEmptySymbolId: string = "star-empty";
+  svgHalfSymbolId: string = "star-half";
+  svgFilledSymbolId: string = "star-filled";
+
+  svgPathEmpty: string = this.svgPath + "#" + this.svgEmptySymbolId;
+
+  svgPathHalf: string = this.svgPath + "#" + this.svgHalfSymbolId;
+
+  svgPathFilled: string = this.svgPath + "#" + this.svgFilledSymbolId;
+
+  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;
+  }
+
+  getHalfStarVisible(rating: number): boolean {
+    return Math.abs(rating % 1) > 0;
+  }
+
+
+}

src/star-rating-struct.ts

@@ -0,0 +1,36 @@
+export type starRatingSizes = "small" | "medium" | "large";
+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 {
+  //Inputs (< bindings)
+  id?: string;
+  labelText?: string;
+  staticColor?: starRatingColors;
+  labelPosition?: starRatingPosition;
+  speed?: starRatingSpeed;
+  size?: starRatingSizes;
+  starType?: starRatingStarTypes;
+  space?: starRatingStarSpace;
+  readOnly?: boolean;
+  disabled?: boolean;
+  showHalfStars?: boolean;
+  rating?: number;
+  numOfStars?: number;
+  getHalfStarVisible?(rating: number): boolean;
+  getColor?(rating: number, numOfStars: number, staticColor?: starRatingColors): starRatingColors;
+  //Outputs (& bindings)
+  onClick?: ($event: any) =>  IStarRatingOnClickEvent;
+  onUpdate?: ($event: any) => IStarRatingOnUpdateEvent;
+}
+
+export interface IStarRatingOnClickEvent {
+  rating: number;
+}
+
+export interface IStarRatingOnUpdateEvent {
+  rating: number;
+}