feat(example): start implementing star-rating component

examples/test/app/app.component.ts

@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
-import {StartComponent} from "./component/start/start.component";
 
 @Component({
+  moduleId: module.id,
   selector: 'my-app',
-  templateUrl: "app/app.component.html"
+  templateUrl: "app.component.html"
 })
 export class AppComponent  { name = 'Angular'; }

examples/test/app/app.module.ts

@@ -5,7 +5,7 @@ import { AppComponent }  from './app.component';
 import {StartModule} from "./component/start/start.module";
 
 @NgModule({
-  imports:      [ BrowserModule, StartModule ],
+  imports:      [ BrowserModule, StartModule],
   declarations: [ AppComponent],
   bootstrap:    [ AppComponent ]
 })

examples/test/app/common/config-form/config-form.component.ts

@@ -2,8 +2,9 @@ import {Component, OnInit, Input, Output, OnChanges, EventEmitter} from '@angula
 import {ConfigFormConfig} from "./config-form-config";
 
 @Component({
+  moduleId: module.id,
   selector: 'config-form',
-  templateUrl: 'app/common/config-form/config-form.component.html',
+  templateUrl: 'config-form.component.html',
 })
 export class ConfigFormComponent implements OnInit, OnChanges {
 
@@ -18,4 +19,5 @@ export class ConfigFormComponent implements OnInit, OnChanges {
   ngOnChanges() {
 
   }
+
 }

examples/test/app/common/star-rating/star-rating-config.ts

@@ -0,0 +1,80 @@
+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;
+  }
+
+
+}

examples/test/app/common/star-rating/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;
+}

examples/test/app/common/star-rating/star-rating.component.html

@@ -0,0 +1,19 @@
+<div id="{{id}}"
+     class="star-icon rating {{rating?'value-'+ratingAsInteger:0}} {{hasHalfStarClass?'half':''}} {{color?'color-'+color:''}} {{starType?'star-'+starType:''}} {{speed}} {{size}} {{labelPosition?'label-'+labelPosition:''}}"
+     ng-class="{'read-only':readOnly, 'disabled':disabled, 'spread':spread}">
+
+  <div ng-show="text" class="label-value">{{text}}</div>
+
+  <div class="star-container">
+
+    <div class="star"
+         *ngFor="let star of stars"
+         (click)="onStarClicked(star)">
+
+      <i class="star-empty {{classEmpty}}"></i>
+      <i class="star-empty {{classHalf}}"></i>
+      <i class="star-filled {{classFilled}}"></i>
+
+    </div>
+  </div>
+</div>

examples/test/app/common/star-rating/star-rating.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { StarRatingComponent } from './star-rating.component';
+
+describe('StarRatingComponent', () => {
+  let component: StarRatingComponent;
+  let fixture: ComponentFixture<StarRatingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StarRatingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StarRatingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

examples/test/app/common/star-rating/star-rating.component.ts

@@ -0,0 +1,34 @@
+import {Component, OnInit, Input, Output, OnChanges, EventEmitter, SimpleChanges} from '@angular/core';
+import {
+  starRatingSizes,
+  starRatingSpeed,
+  starRatingColors,
+  starRatingPosition,
+  starRatingStarSpace,
+  starRatingStarTypes,
+  IStarRatingOnClickEvent,
+  IStarRatingOnUpdateEvent
+} from "./star-rating-struct";
+import {StarRatingConfig} from "./star-rating-config";
+
+@Component({
+  moduleId:module.id,
+  selector: 'star-rating-comp',
+  templateUrl: 'star-rating.component.html',
+  styleUrls : ['star-rating.css']
+})
+export class StarRatingComponent implements OnInit, OnChanges {
+
+
+  constructor() {
+
+  }
+
+  ngOnInit(){
+
+  }
+
+  ngOnChanges() {
+
+  }
+}