Socket
Socket
Sign inDemoInstall

angular-star-rating

Package Overview
Dependencies
13
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.2.4 to 2.0.0-beta.0

.travis.yml
compile
dist/star-rating.component.spec.d.ts
dist/star-rating.module.d.ts
src/star-rating-config.ts
src/star-rating-struct.ts
src/star-rating.component.html
src/star-rating.component.spec.ts
src/star-rating.module.ts

7

dist/index.d.ts

@@ -1,5 +0,2 @@

import "angular";
export { starRatingSizes, starRatingColors, starRatingSpeed, starRatingPosition, starRatingStarTypes, starRatingStarSpace, IStarRatingCompBindings, IStarRatingOnClickEvent, IStarRatingOnUpdateEvent } from "./star-rating.structs";
export { StarRatingController } from "./star-rating.controller";
export { StarRatingComponent } from "./star-rating.component";
export declare const angularStars: string;
export { StarRatingComponent } from './star-rating.component';
export { StarRatingModule } from './star-rating.module';

147

dist/star-rating.component.d.ts

@@ -1,7 +0,144 @@

export declare class StarRatingComponent implements ng.IComponentOptions {
bindings: any;
controller: any;
templateUrl: string;
replace: boolean;
import { OnInit, OnChanges, EventEmitter } from '@angular/core';
export declare type starRatingSizes = "small" | "medium" | "large";
export declare type starRatingColors = "default" | "negative" | "middle" | "positive";
export declare type starRatingSpeed = "immediately" | "noticeable" | "slow";
export declare type starRatingPosition = "left" | "right" | "top" | "bottom";
export declare type starRatingStarTypes = "svg" | "icon" | "image";
export interface IStarRatingOnClickEvent {
rating: number;
}
export interface IStarRatingOnUpdateEvent {
rating: number;
}
export interface IStarRatingCompOneWayBindings {
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?: (rating: number) => boolean;
getColor?: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
}
export interface IStarRatingCompInputs extends IStarRatingCompOneWayBindings {
}
export interface IStarRatingCompOutputs {
onClick?: EventEmitter<IStarRatingOnClickEvent>;
onUpdate?: EventEmitter<IStarRatingOnUpdateEvent>;
}
export declare class StarRatingComponent implements OnInit, OnChanges, IStarRatingCompInputs, IStarRatingCompOutputs {
static DefaultClassEmpty: string;
static DefaultClassHalf: string;
static DefaultClassFilled: string;
static DefaultNumOfStars: number;
static DefaultSize: starRatingSizes;
static DefaultSpeed: starRatingSpeed;
static DefaultLabelPosition: starRatingPosition;
static DefaultStarType: starRatingStarTypes;
static DefaultAssetsPath: string;
static DefaultSvgPath: string;
static DefaultSvgEmptySymbolId: string;
static DefaultSvgHalfSymbolId: string;
static DefaultSvgFilledSymbolId: string;
static DefaultSvgPathEmpty: string;
static DefaultSvgPathHalf: string;
static DefaultSvgPathFilled: string;
/**
* getStarsArray
*
* returns an array of increasing numbers starting at 1
*
* @param numOfStars
* @returns {Array}
*/
private static getStarsArray(numOfStars);
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: (rating: number) => boolean;
getColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
onClick: EventEmitter<IStarRatingOnClickEvent>;
onUpdate: EventEmitter<IStarRatingOnUpdateEvent>;
classEmpty: string;
classHalf: string;
classFilled: string;
pathEmpty: string;
pathHalf: string;
pathFilled: string;
stars: Array<number>;
staticColor: starRatingColors;
ratingAsInteger: number;
hasHalfStarClass: boolean;
constructor();
ngOnInit(): void;
ngOnChanges(changes: any): any;
/**
* onStarClicked
*
* Is fired when a star is clicked. And updated the rating value.
* This function returns if the disabled or readOnly
* property is set. If provided it calls the custom onClick
* handler with the actual rating value.
*
* @param rating
*/
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?
*
*/
protected updateRating(value: number, showHalfStars?: boolean): void;
/**
* updateNumOfStars
*
* Used to set the numOfStars value and update other variables
* based on numOfStars.
*
* @param {number} numOfStars the number of stars
*/
protected updateNumOfStars(numOfStars: number): void;
/**
* hasHalfStarClass
*
* Returns true if there should be a half star visible, and false if not.
*
* @param rating
* @returns {boolean}
*/
protected _calcHalfStarClass: (rating: number) => boolean;
/**
* _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}
*/
protected _calculateColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
}

38

package.json
{
"name": "angular-star-rating",
"version": "1.2.4",
"version": "2.0.0-beta.0",
"license": "MIT",

@@ -19,9 +19,7 @@ "keywords": [

"Angular Component",
"Angular1",
"Angular1 Component",
"Angular1.5",
"Angular1.5 Component",
"Angular2",
"Angular2 Component",
"Typescript"
],
"description": "Angular Star Rating is a Angular1.5 component written in typescript.",
"description": "Angular Star Rating is a Angular2 component written in typescript. Based on css only techniquest utilizing scc and css3 features ",
"author": "Michael Hladky",

@@ -36,15 +34,24 @@ "contributors": [

"type": "git",
"url": "git+https://github.com/BioPhoton/angular1-star-rating.git"
"url": "git+https://github.com/BioPhoton/angular-star-rating.git"
},
"bugs": {
"url": "https://github.com/BioPhoton/angular1-star-rating/issues"
"url": "https://github.com/BioPhoton/angular-star-rating/issues"
},
"homepage": "https://github.com/BioPhoton/angular1-star-rating#readme",
"homepage": "https://github.com/BioPhoton/angular-star-rating#readme",
"main": "dist/index.js",
"dependencies": {
"angular": "^1.5.8",
"css-star-rating": "^1.1"
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@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"
},
"devDependencies": {
"angular-mocks": "^1.5.8",
"css-loader": "^0.25.0",

@@ -77,3 +84,2 @@ "del": "^2.2.2",

"karma-sourcemap-loader": "^0.3.7",
"karma-typescript-preprocessor": "^0.3.1",
"karma-webpack": "^1.8.0",

@@ -100,10 +106,8 @@ "merge-stream": "^1.0.0",

"clean:dist": "rimraf dist",
"build": "webpack --progress --colors --display-error-details",
"test": "node_modules/.bin/karma start karma.conf.js",
"webpack:compile": "webpack --progress --colors --display-error-details",
"coverage": "http-server -c-1 -o -p 9875 ./coverage",
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
"version:bump": "gulp version:bump",
"release": "npm publish",
"update-example": "npm run build && gulp project:update-example && cd examples/angular1 && npm run build"
"release": "npm publish"
}
}

211

README.md
# Angular Star Rating ⭐⭐⭐⭐⭐
#### ⭐ Angular 1.5 Component written in typescript, based on css only techniques. ⭐
#### ⭐ Angular Component written in typescript, based on css only techniques. ⭐
![License](https://img.shields.io/npm/l/angular-star-rating.svg)
![Bower Version](https://img.shields.io/bower/v/angular1-star-rating.svg)
![License](https://img.shields.io/npm/l/angular-star-rating.svg)
![Bower Version](https://img.shields.io/bower/v/angular2-star-rating.svg)
[![NPM Version](https://img.shields.io/npm/v/angular-star-rating.svg)](https://www.npmjs.com/package/angular-star-rating)
[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/angular1-star-rating)
[![Build Status](https://travis-ci.org/BioPhoton/angular1-star-rating.svg?branch=master)](https://travis-ci.org/BioPhoton/angular1-star-rating)
[![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/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)
[![NPM](https://nodei.co/npm-dl/angular-star-rating.png?height=3&months=9)](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-star-rating](https://github.com/BioPhoton/css-star-rating), a fully featured and customizable css only star rating component written in scss.
Angular Star Rating is a >2 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.
![Angular1-Star-Rating](https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/example-usage.gif)
## DEMO
- [x] [Example-App](https://github.com/BioPhoton/angular1-star-rating/tree/master/examples/angular1)
- [x] [Example-App-Plnkr](https://run.plnkr.co/plunks/2tw2z7/)
![alt tag](https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/example-usage.gif)

@@ -34,8 +32,7 @@ ## Features

- [x] **size** - The different sizes of the component
- [x] **space** - The space between stars
- [x] **staticColor** - A static color for the stars
- [x] **spread** - Stars are spreaded over whole width or not
- [x] **color** - 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
- [x] **labelVisible** - If the label is visible or not
- [x] **text** - The value of the label text
- [x] **labelPosition** - The position of the label

@@ -47,4 +44,4 @@ - [x] **speed** - The duration of the animation

- [x] **getHalfStarVisible** - Custom function to calculate value for displaying half stars or not
- [x] **onClick** - Event emitter for onClick action
- [x] **onUpdate** - Event emitter for onUpdate event
- [x] **onClick** - Hook for Click action
- [x] **onUpdate** - Hook for onUpdate event

@@ -56,4 +53,4 @@ ## Browser support

|--- |--- |--- |--- |---|
| > 11 | > 50 | > 55 | > 10 | > 41 |
| <img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/ie.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/firefox.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/chrome.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/safari.png" width="100"> | <img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/browser/opera.png" width="100"> |
| 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"> |

@@ -65,12 +62,9 @@

- clone & build this repository
- [download as .zip](https://github.com/BioPhoton/angular1-star-rating/releases)
- [download as .zip](https://github.com/BioPhoton/angular-star-rating/releases)
- via **[npm](https://www.npmjs.org/)**: by running `$ npm install angular-star-rating` from your console
- via **[bower](https://bower.io/)**: by running `$ bower install angular1-star-rating` from your console
- via **[cdn](https://cdn.rawgit.com/BioPhoton/angular1-star-rating/2062d6bf/dist/index.js)**: by adding the git-cdn reference in your index.html
```html
<script src="https://cdn.rawgit.com/BioPhoton/angular1-star-rating/2062d6bf/dist/index.js"></script>
```
- via **[bower](https://bower.io/)**: by running `$ bower install angular2-star-rating` from your console
**Load library**
```html
<script src="[bower or npm folder or git-cdn path]/angular-star-rating/dist/index.js"></script>
<script src="[bower or npm folder]/angular-star-rating/dist/index.js"></script>
```

@@ -86,6 +80,6 @@

<star-rating-comp
size="'large'"
rating="3"
label-text="'Rating: '"
on-update="crtl.onUpdate($event)">
[size]="'large'"
[rating]="3"
[text]="'Rating:'"
[(onUpdate)]="crtl.onUpdate(rating)">
</star-rating-comp>

@@ -96,3 +90,3 @@ ```

### Input (< bindings)
### Inputs

@@ -104,3 +98,3 @@ **id**: string (Optional)

```html
<star-rating-comp id="'my-id'"></star-rating-comp>
<star-rating-comp [id]="'my-id'"></star-rating-comp>
```

@@ -110,8 +104,8 @@

The actual star rating value
Default: 0
Default: no
```html
<star-rating-comp rating="3"></star-rating-comp>
<star-rating-comp [rating]="3"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-value.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-value.PNG" width="290">

@@ -124,6 +118,6 @@ **showHalfStars**: boolean (Optional)

```html
<star-rating-comp show-half-stars="true"></star-rating-comp>
<star-rating-comp [showHalfStars]="true"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_half_stars-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-show_half_stars-true.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-show_half_stars-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-show_half_stars-true.PNG" width="290">

@@ -135,14 +129,14 @@ **numOfStars**: number (Optional)

```html
<star-rating-comp num-of-stars="6"></star-rating-comp>
<star-rating-comp [numOfStars]="6"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-num_of_stars.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-num_of_stars.PNG" width="290">
**label-text**: string (Optional)
The label text next to the stars.
**text**: string (Optional)
The text next to the stars.
Default: undefined
```html
<star-rating-comp label-text="'My text!'"></star-rating-comp>
<star-rating-comp [text]="'My text!'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label_text.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-text.PNG" width="290">

@@ -155,20 +149,18 @@ **labelPosition**: starRatingPosition (Optional)

```html
<star-rating-comp label-position="'top'"></star-rating-comp>
<star-rating-comp [labelPosition]="'top'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-top.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-bottom.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-right.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-label-left.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-top.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-bottom.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-right.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-label-left.PNG" width="290">
**space**: starRatingStarSpace (Optional)
If the start use the whole space or not.
Options: no, between, around
Default: no
**spread**: boolean (Optional)
If the start use the whole space or not.
Default: false
```html
<star-rating-comp space="around"></star-rating-comp>
<star-rating-comp [space]="true"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-default.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-around.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-space-between.PNG" width="290">
<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">

@@ -178,23 +170,23 @@ **size**: starRatingSizes (Optional)

Options: small, medium, large
Default: ok
Default: middle
```html
<star-rating-comp size="'small'"></star-rating-comp>
<star-rating-comp [size]="'small'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-small.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-medium.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-size-large.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-small.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-medium.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-size-large.PNG" width="290">
**color**: starRatingColors (Optional)
Possible color names for the stars.
Options: default, negative, ok, positive
Options: default, negative, middle, positive
Default: undefined
```html
<star-rating-comp color="'positive'"></star-rating-comp>
<star-rating-comp [color]="'positive'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-default.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-positive.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-ok.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-color-negative.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-color-default.PNG" width="290">
<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-negative.PNG" width="290">

@@ -206,6 +198,6 @@ **disabled**: boolean (Optional)

```html
<star-rating-comp disabled="true"></star-rating-comp>
<star-rating-comp [disabled]="true"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-true.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-true.PNG" width="290">

@@ -218,6 +210,6 @@ **direction**: string (Optional)

```html
<star-rating-comp direction="'ltr'"></star-rating-comp>
<star-rating-comp [direction]="'ltr'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-direction-rtl.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-direction-ltr.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-direction-rtl.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-direction-ltr.PNG" width="290">

@@ -229,6 +221,6 @@ **readOnly**: boolean (Optional)

```html
<star-rating-comp read-only="true"></star-rating-comp>
<star-rating-comp {readOnly]="true"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-disabled-false.PNG" width="290">

@@ -241,29 +233,26 @@ **speed**: starRatingSpeed (Optional)

```html
<star-rating-comp speed="'slow'"></star-rating-comp>
<star-rating-comp [speed]="'slow'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-immediately.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-noticeable.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-animation_speed-slow.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-immediately.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-noticeable.gif" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-animation_speed-slow.gif" width="290">
**starType**: starRatingStarTypes (Optional)
The type of start resource to use.
Options: svg, icon, custom-icon
Options: svg, icon
Default: svg
```html
<star-rating-comp star-type="'icon'"></star-rating-comp>
<star-rating-comp [starType]="'icon'"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-svg.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-icon.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-type-custom_icon.PNG" width="290">
**getColor**: Function (Optional)
Calculation of the color by rating.
Params: rating, numOfStars, staticColor
Return: colorName as string
Params: rating, number,numOfStars and staticColor
Return: color name
```html
<star-rating-comp get-color="parentCtrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>
<star-rating-comp [getColor]="ctrl.getColor(rating, numOfStars, staticColor)"></star-rating-comp>
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_color-function.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-get_color-function.PNG" width="290">

@@ -276,44 +265,22 @@ **getHalfStarVisible**: Function (Optional)

```html
<star-rating-comp get-half-star-visible="parentCtrl.getHalfStarVisible(rating)" rating="3.1"></star-rating-comp>
<star-rating-comp [getHalfStarClass]="ctrl.getHalfStarClass(rating)" rating="3.2"></star-rating-comp>
```
```javascript
function getHalfStarVisible(rating) {
var absDiff = Math.abs(rating % 1);
if(absDiff == 0.1) {
return false;
}
return absDiff > 0;
}
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_half_star_visible-default.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-get_half_star_visible-custom.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-get_half_star_class-function.PNG" width="290">
### Output (& bindings)
### & bindings
**onClick**: Function (Optional)
Callback function for star click event
Params: $event
Params: rating
```html
<star-rating-comp on-click="parentCtrl.onClick($event)"></star-rating-comp>
<star-rating-comp (onClick)="ctrl.onClick(rating)"></star-rating-comp>
```
```javascript
function onClick($event) {
parent.clickCount = parent.clickCount + 1;
}
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-on_click-counter.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_click-function.PNG" width="290">
**onUpdate**: Function (Optional)
Callback function for rating update event
Params: $event
Params: rating
```html
<star-rating-comp on-update="parentCtrl.onUpdate($event)"></star-rating-comp>
<star-rating-comp (onUpdate)="ctrl.onUpdate(rating)"></star-rating-comp>
```
```javascript
function onUpdate($event) {
parent.rating = $event.rating;
}
```
<img src="https://raw.githubusercontent.com/BioPhoton/angular1-star-rating/master/resources/prop-on_update-2waybinding.PNG" width="290">
<img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/prop-on_update-function.PNG" width="290">

429

src/star-rating.component.ts

@@ -1,38 +0,403 @@

import {StarRatingController} from "./star-rating.controller";
import starRatingTpl = require('./star-rating.tpl.html');
import {Component, OnInit, Input, Output, OnChanges, EventEmitter} from '@angular/core';
import {
starRatingSizes,
starRatingSpeed,
starRatingColors,
starRatingPosition,
starRatingStarSpace,
starRatingStarTypes,
IStarRatingOnClickEvent,
IStarRatingOnUpdateEvent
} from "./star-rating-struct";
import {StarRatingConfig} from "./star-rating-config";
export class StarRatingComponent implements ng.IComponentOptions {
@Component({
selector: 'star-rating-comp',
templateUrl: './star-rating.component.html',
styleUrls : 'css-star-rating/dist/css/star-rating.css'
})
export class StarRatingComponent implements OnInit, OnChanges {
public bindings: any;
public controller: any;
public templateUrl: string;
public replace: boolean;
/**
* _getStarsArray
*
* returns an array of increasing numbers starting at 1
*
* @param numOfStars
* @returns {Array}
*/
static _getStarsArray(numOfStars: number): Array<number> {
let stars = [];
for (let i = 0; i < numOfStars; i++) {
stars.push(i + 1);
}
return stars;
}
constructor() {
this.bindings = {
id: '<'
, rating: '<'
, showHalfStars: '<'
, numOfStars: '<'
, size: '<'
, space: '<'
, staticColor: '<'
, disabled: '<'
, starType: '<'
, labelText: '<'
, labelVisible: '<'
, labelPosition: '<'
, speed : '<'
, readOnly: '<'
, getColor: '<'
, getHalfStarVisible: '<'
//Inputs
///////////////////////////////////////////////////////////////////////////////////////////
, onClick: '&?'
, onUpdate: '&?'
};
this.replace = true;
this.controller = StarRatingController;
this.templateUrl = <string>starRatingTpl;
/**
* id property to identify the DOM element
*/
protected _id: string;
get id(): string { return this._id; }
@Input('id')
set id(value: string) {
this._id = value || '';
}
/////////////////////////////////////////////
/**
* labelText
*/
protected _labelText: string;
get labelText(): string {
return this._labelText;
}
@Input('labelText')
set labelText(value: string) {
this._labelText = value;
}
/////////////////////////////////////////////
/**
* labelPosition
*/
protected _labelPosition: starRatingPosition;
get labelPosition(): starRatingPosition {
return this._labelPosition;
}
@Input('labelPosition')
set labelPosition(value: starRatingPosition) {
this._labelPosition = value || this.config.labelPosition;
}
/////////////////////////////////////////////
/**
* staticColor
*/
protected _staticColor: starRatingColors;
get staticColor(): starRatingColors {
return this._staticColor;
}
@Input('staticColor')
set staticColor(value: starRatingColors) {
this._staticColor = value || undefined;
//update color.
//this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
}
/////////////////////////////////////////////
/**
* numOfStars
*/
protected _numOfStars: number;
get numOfStars(): number {
return this._numOfStars;
}
@Input('numOfStars')
set numOfStars(value: number) {
this._numOfStars = (value > 0) ? value : this.config.numOfStars;
//update stars array
this.stars = StarRatingComponent._getStarsArray(this.numOfStars);
//update color
//this.color = this.getColor(this.rating, this.numOfStars, this.staticColor);
}
/////////////////////////////////////////////
/**
* speed
*/
protected _speed: starRatingSpeed;
get speed(): starRatingSpeed {
return this._speed;
}
@Input('speed')
set speed(value: starRatingSpeed) {
this._speed = value || this.config.speed;
}
/////////////////////////////////////////////
/**
* size
*/
protected _size: starRatingSizes;
get size(): starRatingSizes {
return this._size;
}
@Input('size')
set size(value: starRatingSizes) {
this._size = value || this.config.size;
}
/////////////////////////////////////////////
/**
* starType
*/
protected _starType: starRatingStarTypes;
get starType(): starRatingStarTypes {
return this._starType;
}
@Input('starType')
set starType(value: starRatingStarTypes) {
this._starType = value || this.config.starType;
}
/////////////////////////////////////////////
/**
* space
*/
protected _space: starRatingStarSpace;
get space(): starRatingStarSpace {
return this._space;
}
@Input('space')
set space(value: starRatingStarSpace) {
this._space = value;
}
/////////////////////////////////////////////
/**
* readOnly
*/
protected _readOnly: boolean;
get readOnly(): boolean {
return this._readOnly;
}
@Input('readOnly')
set readOnly(value: boolean) {
this._readOnly = !!value;
}
/////////////////////////////////////////////
/**
* disabled
*/
protected _disabled: boolean;
get disabled(): boolean {
return this._disabled;
}
@Input('disabled')
set disabled(value: boolean) {
this._disabled = !!value;
}
/////////////////////////////////////////////
/**
* rating
*/
protected _rating: number;
get rating(): number {
return this._rating;
}
@Input('rating')
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(this._rating.toString());
//update halfStarsVisible
//this.halfStarVisible = (this.showHalfStars) ? this.getHalfStarVisible(this._rating) : false;
//fire onUpdate event
let $event: IStarRatingOnUpdateEvent = {rating: this._rating};
//this.onUpdate.emit($event);
}
/**
* showHalfStars
*/
protected _showHalfStars: boolean;
get showHalfStars(): boolean {
return this._showHalfStars;
}
@Input('showHalfStars')
set showHalfStars(value: boolean) {
this._showHalfStars = !!value;
//update halfStarVisible
//this.halfStarVisible = (this._showHalfStars) ? this.getHalfStarVisible(this.rating) : false;
}
/////////////////////////////////////////////
//getHalfStarVisible: (rating: number) => boolean;
//getColor: (rating: number, numOfStars: number, staticColor?: starRatingColors) => starRatingColors;
//Output
///////////////////////////////////////////////////////////////////////////////////////////
@Output() onClick: EventEmitter<IStarRatingOnClickEvent>;
@Output() onUpdate: EventEmitter<IStarRatingOnUpdateEvent>;
//CTRL ONLY
///////////////////////////////////////////////////////////////////////////////////////////
classEmpty: string;
classHalf: string;
classFilled: string;
pathEmpty: string;
pathHalf: string;
pathFilled: string;
color: starRatingColors;
stars: Array<number>;
ratingAsInteger: number;
halfStarVisible: boolean;
constructor(protected config: StarRatingConfig) {
//set default ctrl props
this.classEmpty = config.classEmpty;
this.classHalf = config.classHalf;
this.classFilled = config.classFilled;
this.pathEmpty = config.svgPathEmpty;
this.pathHalf = config.svgPathHalf;
this.pathFilled = config.svgPathFilled;
//set default Component Inputs
//this.getColor = config.getColor;
//this.getHalfStarVisible = config.getHalfStarVisible;
this.numOfStars = config.numOfStars;
this.rating = 0;
}
/**
* onStarClicked
*
* Is fired when a star is clicked. And updated the rating value.
* This function returns if the disabled or readOnly
* property is set. If provided it emits the onClick event
* handler with the actual rating value.
*
* @param rating
*/
protected onStarClicked(rating: number): void {
//fire onClick event
let $event: IStarRatingOnClickEvent = {rating: rating};
//this.onClick.emit($event);
if (this.readOnly || this.disabled) {
return;
}
this.rating = rating;
}
ngOnInit() {
}
ngOnChanges(changes) {
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;
};
//---------------------------------------
//functions
//boolean
if (valueChanged('showHalfStars', changes)) {
this.showHalfStars = changes.showHalfStars.currentValue;
}
if (valueChanged('space', changes)) {
this.space = changes.space.currentValue;
}
if (valueChanged('readOnly', changes)) {
this.readOnly = changes.readOnly.currentValue;
}
if (valueChanged('disabled', changes)) {
this.disabled = !!changes.disabled.currentValue;
}
//number
if (valueChanged('rating', changes)) {
this.rating = changes.rating.currentValue;
}
if (valueChanged('numOfStars', changes)) {
this.numOfStars = changes.numOfStars.currentValue;
}
//string
if (valueChanged('labelText', changes)) {
this.labelText = changes.labelText.currentValue;
}
if (valueChanged('staticColor', changes)) {
this.staticColor = changes.staticColor.currentValue;
}
if (valueChanged('size', changes)) {
this.size = changes.size.currentValue;
}
if (valueChanged('speed', changes)) {
this.speed = changes.speed.currentValue;
}
if (valueChanged('labelPosition', changes)) {
this.labelPosition = changes.labelPosition.currentValue;
}
if (valueChanged('starType', changes)) {
this.starType = changes.starType.currentValue;
}
}
}
dist/assets/images/star-rating.icons.svg
dist/star-rating.controller.d.ts
dist/star-rating.structs.d.ts
src/index.spec.ts
src/index.ts
src/star-rating.controller.spec.ts
src/star-rating.controller.ts
src/star-rating.structs.ts
src/star-rating.tpl.html
CHANGELOG.md→CHANGELOG.md
.npmignore

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

dist/index.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc