├── .gitignore
├── README.md
├── gulpfile.js
├── gulpfile.ts
├── package.json
├── resources
    └── rating-example.png
├── sample
    └── sample1-simple-usage
    │   ├── index.html
    │   └── main.ts
├── src
    └── index.ts
├── tsconfig-aot.json
├── tsconfig.json
└── tslint.json


/.gitignore:
--------------------------------------------------------------------------------
1 | typings/
2 | build/
3 | node_modules
4 | npm-debug.log
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | > This repository is for demonstration purposes of how it can be implemented in Angular and is not maintaned.
  2 | Please fork and maintain your own version of this repository.
  3 | 
  4 | # ngx-rating
  5 | 
  6 | Simple rating control for your angular2 applications using bootstrap3. Does not depend of jquery.
  7 | If you want to use it without bootstrap - simply create proper css classes.
  8 | Please star a project if you liked it, or create an issue if you have problems with it.
  9 | 
 10 | ![angular 2 rating](https://github.com/pleerock/ng2-rating/blob/master/resources/rating-example.png)
 11 | 
 12 | ## Installation
 13 | 
 14 | 1. Install npm module:
 15 | 
 16 |     `npm install ngx-rating --save`
 17 | 
 18 | 2. If you are using system.js you may want to add this into `map` and `package` config:
 19 | 
 20 |     ```json
 21 |     {
 22 |         "map": {
 23 |             "ngx-rating": "node_modules/ngx-rating"
 24 |         },
 25 |         "packages": {
 26 |             "ngx-rating": { "main": "index.js", "defaultExtension": "js" }
 27 |         }
 28 |     }
 29 |     ```
 30 | 
 31 | ## Usage
 32 | 
 33 | Import `RatingModule` module in your app, and use a component in your html:
 34 | 
 35 | ```html
 36 | <rating [(ngModel)]="model.rating"
 37 |         [max]="5"
 38 |         iconClass="fa-star"
 39 |         fullIcon="★"
 40 |         emptyIcon="☆"
 41 |         [readonly]="false"
 42 |         [disabled]="false"
 43 |         [required]="true"
 44 |         [float]="true"
 45 |         [titles]="['one', 'two', 'three', 'four', 'five']">
 46 | </rating>
 47 | ```
 48 | 
 49 | * `<rating>`:
 50 |     * `[(ngModel)]="variable"` Model to be changed on rating selection. This argument is **required**.
 51 |     * `[max]="number"` Number of rating items (rating stars). Default is **5**.
 52 |     * `iconClass="string"` Css class to be used as an icon. Default is **star-icon**.
 53 |     * `fullIcon="string"` UTF character to be used as filled rating item. Default is **★**.
 54 |     * `emptyIcon="string"` UTF character to be used as empty rating item. Default is **☆**.
 55 |     * `[readonly]="true|false"` Indicates if rating should be readonly. If rating is readonly, then the user cannot vote, only can see a result. Default is **false**
 56 |     * `[disabled]="true|false"` Indicates if rating should be disabled. If rating is disabled then it will not be shown. Default is **false**
 57 |     * `[required]="true|false"` Indicates if rating should be required. With this you can use ngForm and validation capabilities of angular 2. Default is **false**
 58 |     * `[float]="true|false"` If set to true then user can select half-of-star too. Default is **false**
 59 |     * `[titles]="true|false"` Array of titles for each item in the rating.
 60 | 
 61 | ## Sample
 62 | 
 63 | ```typescript
 64 | import {Component} from "@angular/core";
 65 | import {RatingModule} from "ngx-rating";
 66 | 
 67 | @Component({
 68 |     selector: "app",
 69 |     template: `
 70 | <div class="container">
 71 | 
 72 |     <!-- regular rating -->
 73 |     <rating [(ngModel)]="starsCount"></rating>
 74 |     <br/><br/>
 75 | 
 76 |     <!-- rating with 10 stars -->
 77 |     <rating [(ngModel)]="starsCount"
 78 |             [max]="10">
 79 |     </rating>
 80 |     <br/><br/>
 81 | 
 82 |     <!-- rating with custom icons -->
 83 |     <rating [(ngModel)]="starsCount"
 84 |             fullIcon="◆"
 85 |             emptyIcon="◇">
 86 |     </rating>
 87 |     <br/><br/>
 88 | 
 89 |     <!-- rating readonly -->
 90 |     <rating [(ngModel)]="starsCount"
 91 |             [readonly]="true">
 92 |     </rating>
 93 |     <br/><br/>
 94 | 
 95 |     <!-- rating disabled -->
 96 |     <rating [(ngModel)]="starsCount"
 97 |             [disabled]="true">
 98 |     </rating>
 99 |     <br/><br/>
100 | 
101 |     <!-- rating required -->
102 |     <rating [(ngModel)]="starsCount"
103 |             [required]="true">
104 |     </rating>
105 |     <br/><br/>
106 | 
107 |     <!-- rating with half stars -->
108 |     <rating [(ngModel)]="starsCount"
109 |             [float]="true">
110 |     </rating>
111 |     <br/><br/>
112 | 
113 |     <!-- rating with custom titles -->
114 |     <rating [(ngModel)]="starsCount"
115 |             [titles]="['one', 'two', 'three', 'four', 'five']">
116 |     </rating>
117 |     <br/><br/>
118 | 
119 | </div>
120 | `,
121 |     directives: [Rating]
122 | })
123 | export class Sample1App {
124 | 
125 |     starsCount: number;
126 | 
127 | }
128 | 
129 | @NgModule({
130 |     imports: [
131 |         // ...
132 |         RatingModule
133 |     ],
134 |     declarations: [
135 |         App
136 |     ],
137 |     bootstrap: [
138 |         App
139 |     ]
140 | })
141 | export class AppModule {
142 | 
143 | }
144 | ```
145 | 
146 | Take a look on samples in [./sample](https://github.com/pleerock/ngx-rating/tree/master/sample) for more examples of
147 | usages.
148 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | eval(require("typescript").transpile(require("fs").readFileSync("./gulpfile.ts").toString()));


--------------------------------------------------------------------------------
/gulpfile.ts:
--------------------------------------------------------------------------------
  1 | import {Gulpclass, Task, SequenceTask, MergedTask} from "gulpclass";
  2 | 
  3 | const gulp = require("gulp");
  4 | const del = require("del");
  5 | const shell = require("gulp-shell");
  6 | const replace = require("gulp-replace");
  7 | const mocha = require("gulp-mocha");
  8 | const chai = require("chai");
  9 | const tslint = require("gulp-tslint");
 10 | const stylish = require("tslint-stylish");
 11 | const ts = require("gulp-typescript");
 12 | const rename = require("gulp-rename");
 13 | const file = require("gulp-file");
 14 | const uglify = require("gulp-uglify");
 15 | 
 16 | const packageName = require("./package.json").name;
 17 | 
 18 | @Gulpclass()
 19 | export class Gulpfile {
 20 | 
 21 |     // -------------------------------------------------------------------------
 22 |     // General tasks
 23 |     // -------------------------------------------------------------------------
 24 | 
 25 |     /**
 26 |      * Cleans build folder.
 27 |      */
 28 |     @Task()
 29 |     clean(cb: Function) {
 30 |         return del(["./build/**"], cb);
 31 |     }
 32 | 
 33 |     /**
 34 |      * Runs typescript files compilation.
 35 |      */
 36 |     @Task()
 37 |     compile() {
 38 |         return gulp.src("package.json", { read: false })
 39 |             .pipe(shell([
 40 |                 "\"node_modules/.bin/ngc\" -p tsconfig-aot.json"
 41 |             ]));
 42 |     }
 43 | 
 44 |     // -------------------------------------------------------------------------
 45 |     // Packaging and Publishing tasks
 46 |     // -------------------------------------------------------------------------
 47 | 
 48 |     /**
 49 |      * Compiles and compiles bundles.
 50 |      */
 51 |     @MergedTask()
 52 |     compileBundles() {
 53 |         const amdTsProject = ts.createProject("tsconfig.json", {
 54 |             module: "amd",
 55 |             outFile: packageName + ".amd.js",
 56 |             typescript: require("typescript")
 57 |         });
 58 |         const systemTsProject = ts.createProject("tsconfig.json", {
 59 |             module: "system",
 60 |             outFile: packageName + ".system.js",
 61 |             typescript: require("typescript")
 62 |         });
 63 |         const amdPureTsProject = ts.createProject("tsconfig.json", {
 64 |             module: "amd",
 65 |             outFile: packageName + ".pure.amd.js",
 66 |             noEmitHelpers: true,
 67 |             noImplicitUseStrict: true,
 68 |             typescript: require("typescript")
 69 |         });
 70 |         const systemPureTsProject = ts.createProject("tsconfig.json", {
 71 |             module: "system",
 72 |             outFile: packageName + ".pure.system.js",
 73 |             noEmitHelpers: true,
 74 |             noImplicitUseStrict: true,
 75 |             typescript: require("typescript")
 76 |         });
 77 | 
 78 |         return [
 79 |             gulp.src("build/bundle/**/*.ts")
 80 |                 .pipe(amdTsProject()).js
 81 |                 .pipe(gulp.dest("build/package")),
 82 | 
 83 |             gulp.src("build/bundle/**/*.ts")
 84 |                 .pipe(systemTsProject()).js
 85 |                 .pipe(gulp.dest("build/package")),
 86 | 
 87 |             gulp.src("build/bundle/**/*.ts")
 88 |                 .pipe(amdPureTsProject()).js
 89 |                 .pipe(gulp.dest("build/package")),
 90 | 
 91 |             gulp.src("build/bundle/**/*.ts")
 92 |                 .pipe(systemPureTsProject()).js
 93 |                 .pipe(gulp.dest("build/package"))
 94 |         ];
 95 |     }
 96 | 
 97 |     /**
 98 |      * Copies all source files into destination folder in a correct structure to build bundles.
 99 |      */
100 |     @Task()
101 |     bundleCopySources() {
102 |         return gulp.src(["./src/**/*.ts"])
103 |             .pipe(gulp.dest("./build/bundle/" + packageName));
104 |     }
105 | 
106 |     /**
107 |      * Creates special main file for bundle build.
108 |      */
109 |     @Task()
110 |     bundleCopyMainFile() {
111 |         return gulp.src("./package.json", { read: false })
112 |             .pipe(file(packageName + ".ts", `export * from "./${packageName}/index";`))
113 |             .pipe(gulp.dest("./build/bundle"));
114 |     }
115 | 
116 |     /**
117 |      * Uglifys bundles.
118 |      */
119 |     @MergedTask()
120 |     uglify() {
121 |         return [
122 |             gulp.src(`./build/package/${packageName}.pure.amd.js`)
123 |                 .pipe(uglify())
124 |                 .pipe(rename(`${packageName}.pure.amd.min.js`))
125 |                 .pipe(gulp.dest("./build/package")),
126 | 
127 |             gulp.src(`./build/package/${packageName}.pure.system.js`)
128 |                 .pipe(uglify())
129 |                 .pipe(rename(`${packageName}.pure.system.min.js`))
130 |                 .pipe(gulp.dest("./build/package")),
131 | 
132 |             gulp.src(`./build/package/${packageName}.amd.js`)
133 |                 .pipe(uglify())
134 |                 .pipe(rename(`${packageName}.amd.min.js`))
135 |                 .pipe(gulp.dest("./build/package")),
136 | 
137 |             gulp.src(`./build/package/${packageName}.system.js`)
138 |                 .pipe(uglify())
139 |                 .pipe(rename(`${packageName}.system.min.js`))
140 |                 .pipe(gulp.dest("./build/package")),
141 |         ];
142 |     }
143 | 
144 |     /**
145 |      * Publishes a package to npm from ./build/package directory.
146 |      */
147 |     @Task()
148 |     npmPublish() {
149 |         return gulp.src("package.json", { read: false })
150 |             .pipe(shell([
151 |                 "cd ./build/package && npm publish"
152 |             ]));
153 |     }
154 | 
155 |     /**
156 |      * Change the "private" state of the packaged package.json file to public.
157 |      */
158 |     @Task()
159 |     packagePreparePackageFile() {
160 |         return gulp.src("./package.json")
161 |             .pipe(replace("\"private\": true,", "\"private\": false,"))
162 |             .pipe(gulp.dest("./build/package"));
163 |     }
164 | 
165 |     /**
166 |      * This task will replace all typescript code blocks in the README (since npm does not support typescript syntax
167 |      * highlighting) and copy this README file into the package folder.
168 |      */
169 |     @Task()
170 |     packageReadmeFile() {
171 |         return gulp.src("./README.md")
172 |             .pipe(replace(/```typescript([\s\S]*?)```/g, "```javascript$1```"))
173 |             .pipe(gulp.dest("./build/package"));
174 |     }
175 | 
176 |     /**
177 |      * Creates a package that can be published to npm.
178 |      */
179 |     @SequenceTask()
180 |     package() {
181 |         return [
182 |             "clean",
183 |             ["bundleCopySources", "bundleCopyMainFile"],
184 |             ["compile", "compileBundles"],
185 |             ["uglify"],
186 |             ["packagePreparePackageFile", "packageReadmeFile"]
187 |         ];
188 |     }
189 | 
190 |     /**
191 |      * Creates a package and publishes it to npm.
192 |      */
193 |     @SequenceTask()
194 |     publish() {
195 |         return ["package", "npmPublish"];
196 |     }
197 | 
198 |     // -------------------------------------------------------------------------
199 |     // Run tests tasks
200 |     // -------------------------------------------------------------------------
201 | 
202 |     /**
203 |      * Runs ts linting to validate source code.
204 |      */
205 |     @Task()
206 |     tslint() {
207 |         return gulp.src(["./src/**/*.ts", "./test/**/*.ts", "./sample/**/*.ts"])
208 |             .pipe(tslint())
209 |             .pipe(tslint.report(stylish, {
210 |                 emitError: true,
211 |                 sort: true,
212 |                 bell: true
213 |             }));
214 |     }
215 | 
216 |     /**
217 |      * Runs unit-tests.
218 |      */
219 |     @Task()
220 |     unit() {
221 |         chai.should();
222 |         chai.use(require("sinon-chai"));
223 |         return gulp.src("./build/es5/test/unit/**/*.js")
224 |             .pipe(mocha());
225 |     }
226 | 
227 |     /**
228 |      * Compiles the code and runs tests.
229 |      */
230 |     @SequenceTask()
231 |     tests() {
232 |         return ["clean", "compile", "tslint", "unit"];
233 |     }
234 | 
235 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ngx-rating",
 3 |   "version": "0.0.9",
 4 |   "description": "Simple rating control for your angular2 applications using bootstrap3.",
 5 |   "license": "MIT",
 6 |   "readmeFilename": "README.md",
 7 |   "private": true,
 8 |   "author": {
 9 |     "name": "Umed Khudoiberdiev",
10 |     "email": "pleerock.me@gmail.com"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/pleerock/ngx-rating.git"
15 |   },
16 |   "bugs": {
17 |     "url": "https://github.com/pleerock/ngx-rating/issues"
18 |   },
19 |   "tags": [
20 |     "rating",
21 |     "angular2",
22 |     "typescript",
23 |     "angular2-rating"
24 |   ],
25 |   "peerDependencies": {
26 |     "@angular/core": "^2.0.0",
27 |     "@angular/forms": "^2.0.0"
28 |   },
29 |   "devDependencies": {
30 |     "@angular/common": "^2.4.3",
31 |     "@angular/compiler": "^2.4.3",
32 |     "@angular/compiler-cli": "^2.4.3",
33 |     "@angular/core": "^2.4.3",
34 |     "@angular/forms": "^2.4.3",
35 |     "@angular/platform-browser": "^2.4.3",
36 |     "@angular/platform-browser-dynamic": "^2.4.3",
37 | 
38 |     "@types/node": "^7.0.0",
39 |     "bootstrap": "^3.3.7",
40 |     "chai": "^3.4.1",
41 |     "del": "^2.2.2",
42 |     "es6-shim": "^0.35.2",
43 |     "gulp": "^3.9.0",
44 |     "gulp-file": "^0.3.0",
45 |     "gulp-mocha": "^3.0.1",
46 |     "gulp-rename": "^1.2.2",
47 |     "gulp-replace": "^0.5.4",
48 |     "gulp-shell": "^0.5.1",
49 |     "gulp-tslint": "^7.0.1",
50 |     "gulp-typescript": "^3.1.4",
51 |     "gulp-uglify": "^2.0.0",
52 |     "gulpclass": "^0.1.1",
53 |     "mocha": "^3.2.0",
54 |     "reflect-metadata": "0.1.9",
55 |     "rxjs": "^5.0.3",
56 |     "sinon": "^1.17.7",
57 |     "sinon-chai": "^2.8.0",
58 |     "systemjs": "0.19.42",
59 |     "tslint": "^4.3.1",
60 |     "tslint-stylish": "^2.1.0-beta",
61 |     "typescript": "^2.1.5",
62 |     "zone.js": "^0.7.6"
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/resources/rating-example.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pleerock/ngx-rating/9a5a7d6f2694d32babbe9d1849b7471f5a6608d4/resources/rating-example.png


--------------------------------------------------------------------------------
/sample/sample1-simple-usage/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <meta>
 4 |     <meta charset="UTF-8"/>
 5 |     <title>ngx-rating</title>
 6 |     <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
 7 | 
 8 |     <script src="../../node_modules/es6-shim/es6-shim.min.js"></script>
 9 |     <script src="../../node_modules/zone.js/dist/zone.js"></script>
10 |     <script src="../../node_modules/reflect-metadata/Reflect.js"></script>
11 |     <script src="../../node_modules/systemjs/dist/system.src.js"></script>
12 | 
13 |     <script>
14 |         System.config({
15 |             baseURL: "/ngx-rating/", // replace with your baseURL here
16 |             defaultJSExtensions: true,
17 |             paths: {
18 |                 // paths serve as alias
19 |                 "npm:": "node_modules/"
20 |             },
21 |             map: {
22 |                 // angular bundles
23 |                 "@angular/core": "npm:@angular/core/bundles/core.umd.js",
24 |                 "@angular/common": "npm:@angular/common/bundles/common.umd.js",
25 |                 "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js",
26 |                 "@angular/platform-browser": "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
27 |                 "@angular/platform-browser-dynamic": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
28 |                 "@angular/http": "npm:@angular/http/bundles/http.umd.js",
29 |                 "@angular/router": "npm:@angular/router/bundles/router.umd.js",
30 |                 "@angular/forms": "npm:@angular/forms/bundles/forms.umd.js",
31 | 
32 |                 // angular testing umd bundles
33 |                 "@angular/core/testing": "npm:@angular/core/bundles/core-testing.umd.js",
34 |                 "@angular/common/testing": "npm:@angular/common/bundles/common-testing.umd.js",
35 |                 "@angular/compiler/testing": "npm:@angular/compiler/bundles/compiler-testing.umd.js",
36 |                 "@angular/platform-browser/testing": "npm:@angular/platform-browser/bundles/platform-browser-testing.umd.js",
37 |                 "@angular/platform-browser-dynamic/testing": "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic-testing.umd.js",
38 |                 "@angular/http/testing": "npm:@angular/http/bundles/http-testing.umd.js",
39 |                 "@angular/router/testing": "npm:@angular/router/bundles/router-testing.umd.js",
40 |                 "@angular/forms/testing": "npm:@angular/forms/bundles/forms-testing.umd.js",
41 | 
42 |                 "rxjs": "npm:rxjs"
43 |             },
44 |             packages: {
45 |                 "app": { main: "main", defaultExtension: "ts" },
46 |                 "rxjs": { defaultExtension: "js" },
47 |                 "@angular/common": { main: "index.js", defaultExtension: "js" },
48 |                 "@angular/compiler": { main: "index.js", defaultExtension: "js" },
49 |                 "@angular/core": { main: "index.js", defaultExtension: "js" },
50 |                 "@angular/http": { main: "index.js", defaultExtension: "js" },
51 |                 "@angular/forms": { main: "index.js", defaultExtension: "js" },
52 |                 "@angular/platform-browser": { main: "index.js", defaultExtension: "js" },
53 |                 "@angular/platform-browser-dynamic": { main: "index.js", defaultExtension: "js" },
54 |                 "@angular/router": { main: "index.js", defaultExtension: "js" },
55 |                 "@angular/router-deprecated": { main: "index.js", defaultExtension: "js" },
56 |                 "@angular/testing": { main: "index.js", defaultExtension: "js" },
57 |                 "@angular/upgrade": { main: "index.js", defaultExtension: "js" }
58 |             }
59 |         });
60 |     </script>
61 |     <script>System.import("../../build/es5/sample/sample1-simple-usage/main").catch(function(err){ console.error(err); });</script>
62 | 
63 | </head>
64 | <base href="#/">
65 | <body>
66 | <div style="margin-top: 200px"></div>
67 | <app>Loading...</app>
68 | </body>
69 | </html>


--------------------------------------------------------------------------------
/sample/sample1-simple-usage/main.ts:
--------------------------------------------------------------------------------
 1 | import {platformBrowserDynamic} from "@angular/platform-browser-dynamic";
 2 | import {Component, NgModule} from "@angular/core";
 3 | import {FormsModule} from "@angular/forms";
 4 | import {RatingModule} from "../../src/index";
 5 | import {BrowserModule} from "@angular/platform-browser";
 6 | 
 7 | @Component({
 8 |     selector: "app",
 9 |     template: `
10 | <div class="container">
11 | 
12 |     <!-- regular rating -->
13 |     <rating [(ngModel)]="starsCount"></rating>
14 |     <br/><br/>
15 | 
16 |     <!-- rating with 10 stars -->
17 |     <rating [(ngModel)]="starsCount"
18 |             [max]="10">
19 |     </rating>
20 |     <br/><br/>
21 |     
22 |     <!-- rating with custom icons -->
23 |     <rating [(ngModel)]="starsCount"
24 |             fullIcon="◆"
25 |             emptyIcon="◇">
26 |     </rating>
27 |     <br/><br/>
28 |     
29 |     <!-- rating readonly -->
30 |     <rating [(ngModel)]="starsCount"
31 |             [readonly]="true">
32 |     </rating>
33 |     <br/><br/>
34 |     
35 |     <!-- rating disabled -->
36 |     <rating [(ngModel)]="starsCount"
37 |             [disabled]="true">
38 |     </rating>
39 |     <br/><br/>
40 |     
41 |     <!-- rating required -->
42 |     <rating [(ngModel)]="starsCount"
43 |             [required]="true">
44 |     </rating>
45 |     <br/><br/>
46 |     
47 |     <!-- rating with half stars -->
48 |     <rating [(ngModel)]="starsCount"
49 |             [float]="true">
50 |     </rating>
51 |     <br/><br/>
52 |     
53 |     <!-- rating with custom titles -->
54 |     <rating [(ngModel)]="starsCount"
55 |             [titles]="['one', 'two', 'three', 'four', 'five']">
56 |     </rating>
57 |     <br/><br/>
58 |     
59 |     <!-- example in ngFor -->
60 |     <div *ngFor="let item of [1, 2, 3]; let index = index">
61 |         <rating [(ngModel)]="starsCounts[index]"
62 |                 [float]="true">
63 |         </rating>
64 |         <br/><br/>
65 |     </div>
66 | 
67 | </div>
68 | `
69 | })
70 | export class Sample1App {
71 | 
72 |     starsCount: number;
73 |     starsCounts: number[] = [];
74 | 
75 | }
76 | 
77 | @NgModule({
78 |     imports: [
79 |         BrowserModule,
80 |         FormsModule,
81 |         RatingModule
82 |     ],
83 |     declarations: [
84 |         Sample1App
85 |     ],
86 |     bootstrap: [
87 |         Sample1App
88 |     ]
89 | })
90 | export class Sample1Module {
91 | 
92 | }
93 | 
94 | platformBrowserDynamic().bootstrapModule(Sample1Module);


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
  1 | import {Component, OnInit, Input, Output, EventEmitter, HostListener, forwardRef, NgModule} from "@angular/core";
  2 | import {ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS, Validator, AbstractControl} from "@angular/forms";
  3 | import {CommonModule} from "@angular/common";
  4 | 
  5 | @Component({
  6 |     selector: "rating",
  7 |     template: `
  8 | <span (mouseleave)="resetHovered()"
  9 |       class="rating"
 10 |       [class.disabled]="disabled"
 11 |       [class.readonly]="readonly"
 12 |       tabindex="0"
 13 |       role="slider" 
 14 |       aria-valuemin="0"
 15 |       [attr.aria-valuemax]="ratingRange.length" 
 16 |       [attr.aria-valuenow]="model">
 17 |     <span *ngFor="let item of ratingRange; let index = index">
 18 |         <i (mouseenter)="setHovered(item)" 
 19 |            (mousemove)="changeHovered($event)"
 20 |            (click)="rate(item)" 
 21 |            [attr.data-icon]="fullIcon"
 22 |            class="{{ iconClass }} half{{ calculateWidth(item) }}"
 23 |            [title]="titles[index] || item">{{ emptyIcon }}</i>
 24 |     </span>
 25 | </span>
 26 | `,
 27 |     providers: [
 28 |         { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Rating), multi: true },
 29 |         { provide: NG_VALIDATORS, useExisting: forwardRef(() => Rating), multi: true },
 30 |     ],
 31 |     styles: [`
 32 | span.rating {
 33 |     cursor: pointer;
 34 |     outline: none;
 35 | }
 36 | span.rating.readonly {
 37 |     cursor: default;
 38 | }
 39 | span.rating.disabled {
 40 |     cursor: not-allowed;
 41 | }
 42 | span.rating i{
 43 |     font-style: normal; 
 44 | }
 45 | .star-icon {
 46 |     color: #ddd;
 47 |     font-size: 2em;
 48 |     position: relative;
 49 | }
 50 | .star-icon:before {
 51 |     color: #FDE16D;
 52 |     content: attr(data-icon) " ";
 53 |     position: absolute;
 54 |     left: 0;
 55 |     overflow: hidden;
 56 |     width: 0;
 57 | } 
 58 | span.rating.disabled .star-icon:before {
 59 |     color: #ECECEC;
 60 |     text-shadow: none;
 61 | }
 62 | .star-icon.half10:before {
 63 |     width: 10%;
 64 | }
 65 | .star-icon.half20:before {
 66 |     width: 20%;
 67 | }
 68 | .star-icon.half30:before {
 69 |     width: 30%;
 70 | }
 71 | .star-icon.half40:before {
 72 |     width: 40%;
 73 | }
 74 | .star-icon.half50:before {
 75 |     width: 50%;
 76 | }
 77 | .star-icon.half60:before {
 78 |     width: 60%;
 79 | }
 80 | .star-icon.half70:before {
 81 |     width: 70%;
 82 | }
 83 | .star-icon.half80:before {
 84 |     width: 80%;
 85 | }
 86 | .star-icon.half90:before {
 87 |     width: 90%;
 88 | }
 89 | .star-icon.half100:before {
 90 |     width: 100%;
 91 | }
 92 | @-moz-document url-prefix() { /* Firefox Hack */
 93 |   .star-icon {
 94 |     font-size: 50px;
 95 |     line-height: 34px;
 96 |   }
 97 | }
 98 | `]
 99 | })
100 | export class Rating implements OnInit, ControlValueAccessor, Validator {
101 | 
102 |     // -------------------------------------------------------------------------
103 |     // Inputs
104 |     // -------------------------------------------------------------------------
105 | 
106 |     @Input()
107 |     iconClass = "star-icon";
108 | 
109 |     @Input()
110 |     fullIcon = "★";
111 | 
112 |     @Input()
113 |     emptyIcon = "☆";
114 | 
115 |     @Input()
116 |     readonly: boolean;
117 | 
118 |     @Input()
119 |     disabled: boolean;
120 | 
121 |     @Input()
122 |     required: boolean;
123 | 
124 |     @Input()
125 |     float: boolean;
126 | 
127 |     @Input()
128 |     titles: string[] = [];
129 | 
130 |     // -------------------------------------------------------------------------
131 |     // Input Accessors
132 |     // -------------------------------------------------------------------------
133 | 
134 |     @Input()
135 |     set max(max: number) {
136 |         this._max = max;
137 |         this.buildRanges();
138 |     }
139 | 
140 |     get max() {
141 |         return this._max;
142 |     }
143 | 
144 |     // -------------------------------------------------------------------------
145 |     // Outputs
146 |     // -------------------------------------------------------------------------
147 | 
148 |     @Output()
149 |     onHover = new EventEmitter();
150 | 
151 |     @Output()
152 |     onLeave = new EventEmitter();
153 | 
154 |     // -------------------------------------------------------------------------
155 |     // Public properties
156 |     // -------------------------------------------------------------------------
157 | 
158 |     model: number;
159 |     ratingRange: number[];
160 |     hovered: number = 0;
161 |     hoveredPercent: number = undefined;
162 | 
163 |     // -------------------------------------------------------------------------
164 |     // Private Properties
165 |     // -------------------------------------------------------------------------
166 | 
167 |     private _max: number = 5;
168 |     private onChange: (m: any) => void;
169 |     private onTouched: (m: any) => void;
170 | 
171 |     // -------------------------------------------------------------------------
172 |     // Implemented from ControlValueAccessor
173 |     // -------------------------------------------------------------------------
174 | 
175 |     writeValue(value: number): void {
176 |         /*if (value % 1 !== value) {
177 |          this.model = Math.round(value);
178 |          return;
179 |          }*/
180 | 
181 |         this.model = value;
182 |     }
183 | 
184 |     registerOnChange(fn: any): void {
185 |         this.onChange = fn;
186 |     }
187 | 
188 |     registerOnTouched(fn: any): void {
189 |         this.onTouched = fn;
190 |     }
191 | 
192 |     // -------------------------------------------------------------------------
193 |     // Implemented from Va..
194 |     // -------------------------------------------------------------------------
195 | 
196 |     validate(c: AbstractControl) {
197 |         if (this.required && !c.value) {
198 |             return {
199 |                 required: true
200 |             };
201 |         }
202 |         return null;
203 |     }
204 | 
205 |     // -------------------------------------------------------------------------
206 |     // Lifecycle callbacks
207 |     // -------------------------------------------------------------------------
208 | 
209 |     ngOnInit() {
210 |         this.buildRanges();
211 |     }
212 | 
213 |     // -------------------------------------------------------------------------
214 |     // Host Bindings
215 |     // -------------------------------------------------------------------------
216 | 
217 |     @HostListener("keydown", ["$event"])
218 |     onKeydown(event: KeyboardEvent): void {
219 |         if ([37, 38, 39, 40].indexOf(event.which) === -1 || this.hovered)
220 |             return;
221 | 
222 |         event.preventDefault();
223 |         event.stopPropagation();
224 |         const increment = this.float ? 0.5 : 1;
225 |         this.rate(this.model + (event.which === 38 || event.which === 39 ? increment : increment * -1));
226 |     }
227 | 
228 |     // -------------------------------------------------------------------------
229 |     // Public Methods
230 |     // -------------------------------------------------------------------------
231 | 
232 |     calculateWidth(item: number) {
233 |         if (this.hovered > 0) {
234 |             if (this.hoveredPercent !== undefined && this.hovered === item)
235 |                 return this.hoveredPercent;
236 | 
237 |             return this.hovered >= item ? 100 : 0;
238 |         }
239 |         return this.model >= item ? 100 : 100 - Math.round((item - this.model) * 10) * 10;
240 |     }
241 | 
242 |     setHovered(hovered: number): void {
243 |         if (!this.readonly && !this.disabled) {
244 |             this.hovered = hovered;
245 |             this.onHover.emit(hovered);
246 |         }
247 |     }
248 | 
249 |     changeHovered(event: MouseEvent): void {
250 |         if (!this.float) return;
251 |         const target = event.target as HTMLElement;
252 |         const relativeX = event.pageX - target.offsetLeft;
253 |         const percent = Math.round((relativeX * 100 / target.offsetWidth) / 10) * 10;
254 |         this.hoveredPercent = percent > 50 ? 100 : 50;
255 |     }
256 | 
257 |     resetHovered() {
258 |         this.hovered = 0;
259 |         this.hoveredPercent = undefined;
260 |         this.onLeave.emit(this.hovered);
261 |     }
262 | 
263 | 
264 |     rate(value: number) {
265 |         if (!this.readonly && !this.disabled && value >= 0 && value <= this.ratingRange.length) {
266 |             const newValue = this.hoveredPercent ? (value - 1) + this.hoveredPercent / 100 : value;
267 |             this.onChange(newValue);
268 |             this.model = newValue;
269 |         }
270 |     }
271 | 
272 |     // -------------------------------------------------------------------------
273 |     // Private Methods
274 |     // -------------------------------------------------------------------------
275 | 
276 |     private buildRanges() {
277 |         this.ratingRange = this.range(1, this.max);
278 |     }
279 | 
280 |     private range(start: number, end: number) {
281 |         const foo: number[] = [];
282 |         for (let i = start; i <= end; i++) {
283 |             foo.push(i);
284 |         }
285 |         return foo;
286 |     }
287 | 
288 | }
289 | 
290 | @NgModule({
291 |     imports: [
292 |         CommonModule
293 |     ],
294 |     declarations: [
295 |         Rating,
296 |     ],
297 |     exports: [
298 |         Rating,
299 |     ],
300 | })
301 | export class RatingModule {
302 | 
303 | }


--------------------------------------------------------------------------------
/tsconfig-aot.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 | 	"outDir": "build/package",
 4 |     "target": "es5",
 5 |     "lib": ["es6", "dom"],
 6 |     "module": "commonjs",
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "sourceMap": true,
11 |     "noEmitHelpers": false,
12 |     "noImplicitAny": true,
13 |     "declaration": true,
14 |     "skipLibCheck": true,
15 |     "stripInternal": true
16 |   },
17 |   "exclude": [
18 | 	"build",
19 |     "node_modules"
20 |   ],
21 |   "files": [
22 |     "./src/index.ts"
23 |   ],
24 |   "angularCompilerOptions": {
25 |     "genDir": "build/factories"
26 |   }
27 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "version": "1.8.0",
 3 |     "compilerOptions": {
 4 |         "outDir": "build/es5",
 5 |         "target": "es5",
 6 |         "lib": ["es6", "dom"],
 7 |         "module": "commonjs",
 8 |         "moduleResolution": "node",
 9 |         "emitDecoratorMetadata": true,
10 |         "experimentalDecorators": true,
11 |         "sourceMap": true,
12 |         "noImplicitAny": true,
13 |         "declaration": true
14 |     },
15 |     "exclude": [
16 |         "build",
17 |         "node_modules",
18 |         "typings/browser.d.ts",
19 |         "typings/browser"
20 |     ]
21 | }
22 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "rules": {
 3 |         "class-name": true,
 4 |         "comment-format": [
 5 |             true,
 6 |             "check-space"
 7 |         ],
 8 |         "indent": [
 9 |             true,
10 |             "spaces"
11 |         ],
12 |         "no-duplicate-variable": true,
13 |         "no-eval": true,
14 |         "no-internal-module": true,
15 |         "no-trailing-whitespace": true,
16 |         "no-var-keyword": true,
17 |         "one-line": [
18 |             true,
19 |             "check-open-brace",
20 |             "check-whitespace"
21 |         ],
22 |         "quotemark": [
23 |             true,
24 |             "double"
25 |         ],
26 |         "semicolon": true,
27 |         "triple-equals": [
28 |             true,
29 |             "allow-null-check"
30 |         ],
31 |         "typedef-whitespace": [
32 |             true,
33 |             {
34 |                 "call-signature": "nospace",
35 |                 "index-signature": "nospace",
36 |                 "parameter": "nospace",
37 |                 "property-declaration": "nospace",
38 |                 "variable-declaration": "nospace"
39 |             }
40 |         ],
41 |         "variable-name": [
42 |             true,
43 |             "ban-keywords"
44 |         ],
45 |         "whitespace": [
46 |             true,
47 |             "check-branch",
48 |             "check-decl",
49 |             "check-operator",
50 |             "check-separator",
51 |             "check-type"
52 |         ]
53 |     }
54 | }


--------------------------------------------------------------------------------