angular-star-rating - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/index.d.ts

 import { ModuleWithProviders } from '@angular/core';
+export * from './src/star-rating-struct';
 export * from './src/star-rating.component';
@@ -3,0 +4,0 @@ export * from './src/star-rating-config';

dist/src/star-rating-config.js

@@ -41,9 +41,9 @@ "use strict";
         rating = rating || 0;
-        //if a fix color is set use this one
+        // 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
+        // calculate size of smallest fraction
+        const fractionSize = numOfStars / 3;
+        // apply color by fraction
         let color = 'default';
@@ -50,0 +50,0 @@ if (rating > 0) {

dist/src/star-rating-struct.d.ts

@@ -1,8 +0,8 @@
-export declare type starRatingSizes = "small" | "medium" | "large";
-export declare type starRatingColor = "default" | "negative" | "ok" | "positive";
-export declare type starRatingSpeed = "immediately" | "noticeable" | "slow";
-export declare type starRatingPosition = "left" | "right" | "top" | "bottom";
-export declare type starRatingStarTypes = "svg" | "icon" | "image";
-export declare type starRatingStarSpace = "no" | "between" | "around";
-export declare type starRatingDirection = "rtl" | "ltr";
+export declare type starRatingSizes = 'small' | 'medium' | 'large';
+export declare type starRatingColor = 'default' | 'negative' | 'ok' | 'positive';
+export declare type starRatingSpeed = 'immediately' | 'noticeable' | 'slow';
+export declare type starRatingPosition = 'left' | 'right' | 'top' | 'bottom';
+export declare type starRatingStarTypes = 'svg' | 'icon' | 'image';
+export declare type starRatingStarSpace = 'no' | 'between' | 'around';
+export declare type starRatingDirection = 'rtl' | 'ltr';
 export interface IStarRatingOnClickEvent {
@@ -14,1 +14,4 @@ rating: number;
 }
+export interface IStarRatingIOnHoverRatingChangeEvent {
+    hoverRating: number;
+}

dist/src/star-rating.component.d.ts

@@ -1,6 +0,6 @@
-import { OnChanges, EventEmitter, OnInit } from "@angular/core";
-import { IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven } from "./star-rating-struct";
+import { OnChanges, EventEmitter } from "@angular/core";
+import { IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven, IStarRatingIOnHoverRatingChangeEvent } from "./star-rating-struct";
 import { StarRatingController } from "./star-rating.controller";
 import { ControlValueAccessor } from "@angular/forms";
-export declare class StarRatingComponent extends StarRatingController implements OnChanges, OnInit, ControlValueAccessor {
+export declare class StarRatingComponent extends StarRatingController implements OnChanges, ControlValueAccessor {
     onClick: EventEmitter<IStarRatingOnClickEvent>;
@@ -10,2 +10,4 @@ saveOnClick($event: IStarRatingOnClickEvent): void;
     saveOnRatingChange($event: IStarRatingOnRatingChangeEven): void;
+    onHoverRatingChange: EventEmitter<IStarRatingIOnHoverRatingChangeEvent>;
+    saveOnHover($event: IStarRatingIOnHoverRatingChangeEvent): void;
     onTouch: Function;
@@ -17,6 +19,7 @@ onModelChange: Function;
     saveOnModelChange(value: number): void;
-    /**ACCESSEBILITY **/
+    /**ACCESSIBILITY **/
     onKeyDown(event: KeyboardEvent): void;
     onBlur(event: FocusEvent): void;
     onFocus(event: FocusEvent): void;
+    onStarHover(rating: number): void;
     /**Form Control - ControlValueAccessor implementation**/
@@ -44,3 +47,2 @@ writeValue(obj: any): void;
     ngOnChanges(changes: any): void;
-    ngOnInit(): void;
 }

dist/src/star-rating.controller.d.ts

@@ -30,2 +30,7 @@ import { starRatingSizes, starRatingSpeed, starRatingColor, starRatingPosition, starRatingStarSpace, starRatingStarTypes, starRatingDirection } from "./star-rating-struct";
     /**
+     * hoverEnabled
+     */
+    protected _hoverEnabled: boolean;
+    hoverEnabled: boolean;
+    /**
      * staticColor
@@ -46,2 +51,7 @@ */
     /**
+     * hoverRating
+     */
+    protected _hoverRating: number;
+    hoverRating: number;
+    /**
      * speed
@@ -114,2 +124,3 @@ */
     svgVisible(): boolean;
+    interactionPossible(): boolean;
     setColor(): void;
@@ -116,0 +127,0 @@ setHalfStarVisible(): void;

dist/src/star-rating.controller.js

@@ -36,2 +36,8 @@ "use strict";
     }
+    get hoverEnabled() {
+        return this._hoverEnabled;
+    }
+    set hoverEnabled(value) {
+        this._hoverEnabled = (value !== undefined) ? !!value : false;
+    }
     get staticColor() {
@@ -61,2 +67,8 @@ return this._staticColor;
     }
+    get hoverRating() {
+        return this._hoverRating;
+    }
+    set hoverRating(value) {
+        this._hoverRating = (value > 0) ? value : 0;
+    }
     get speed() {
@@ -165,2 +177,5 @@ return this._speed;
     }
+    interactionPossible() {
+        return !this.readOnly && !this.disabled;
+    }
     setColor() {
@@ -194,2 +209,5 @@ //check if custom function is given
         classNames.push(this.halfStarVisible ? 'half' : '');
+        classNames.push(this.hoverEnabled ? 'hover' : '');
+        let hoverRating = (this.hoverRating ? 'hover-' + this.hoverRating : 'hover-0');
+        classNames.push(this.hoverEnabled ? hoverRating : '');
         classNames.push(this.space ? 'space-' + this.space : '');
@@ -207,5 +225,5 @@ classNames.push(this.labelPosition ? 'label-' + this.labelPosition : '');
     increment() {
-        //increment to net higher step
+        //increment to next higher step
         let absDiff = Math.abs(this.rating % this.step);
-        this.rating = this.rating + (absDiff > 0 ? absDiff : this.step);
+        this.rating = this.rating + (absDiff > 0 ? this.step - absDiff : this.step);
     }
@@ -212,0 +230,0 @@ decrement() {

index.ts

 import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+
+import {starRatingDirection, starRatingColor, starRatingPosition, starRatingSizes, starRatingSpeed, starRatingStarSpace, starRatingStarTypes} from './src/star-rating-struct';
 import { StarRatingComponent } from './src/star-rating.component';
 import  { StarRatingConfig } from './src/star-rating-config';
 
+export * from './src/star-rating-struct';
 export * from './src/star-rating.component';
@@ -7,0 +10,0 @@ export * from './src/star-rating-config';

package.json

 {
   "name": "angular-star-rating",
   "description": "Angular Star Rating is a Angular2 component written in typescript.",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "scripts": {
@@ -13,3 +13,3 @@ "build": "ngc -p tsconfig.json",
     "copyAssets": "copyfiles assets/**/* dist",
-    "updateExample": "npm run tsc && copyfiles dist/**/* examples/angular2/node_modules/angular-star-rating/dist",
+    "updateExample": "npm run tsc && copyfiles dist/**/* examples/angular2/node_modules/angular-star-rating",
     "coverage": "http-server -c-1 -o -p 9875 ./coverage",
@@ -39,2 +39,3 @@ "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "Star-Rating",
+    "star-rating",
     "Starrating",
@@ -58,3 +59,5 @@ "Icon",
   "main": "./dist/index.js",
-  "dependencies": {},
+  "dependencies": {
+    "css-star-rating": "^1.1.3"
+  },
   "devDependencies": {
@@ -61,0 +64,0 @@ "@angular/common": "^4.0.0",

README.MD

 # Angular Star Rating ⭐⭐⭐⭐⭐
-#### ⭐ Angular Star Rating is a >2 Angular made with ❤, based on css only techniques. ⭐
+#### ⭐ Angular Star Rating is a Angular 2+ component made with ❤, based on css only techniques. ⭐
 
@@ -9,6 +9,7 @@ ![License](https://img.shields.io/npm/l/angular-star-rating.svg)
 
-Angular Star Rating is a >2 Angular made with ❤.  
+Angular Star Rating is a Angular 2+ component made with ❤.  
 
 It is based on best practice UX/UI methods, accessibility in mind and an eye for details. 
-In love with reactive forms the easy to control over the keybord it is a perfect fit for all angular projects with ⭐'s.  
+In love with reactive forms the component is easy to control over the keybord.  
+It is a perfect fit for all angular projects with ⭐'s.  
    
@@ -35,2 +36,3 @@ To keep it as flexible as possible a major part of the logic is based on [css only techniques](https://github.com/BioPhoton/css-star-rating). The component simple applies the state depending css modifiers.
 - [x] it's **keyboard control** is even better than a native input once :-)
+- [x] mouse enter and leave events are used to generate a nice **on hover interaction**
 - [x] importable as a **angular ngModule** it is a plug and play to use
@@ -123,12 +125,15 @@
 import {Component} from "@angular/core";
-import {FormGroup, FormControl} from "@angular/forms";
-import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven} from "angular-star-rating/src/star-rating-struct";
+import {IStarRatingOnClickEvent, IStarRatingOnRatingChangeEven, IStarRatingIOnHoverRatingChangeEvent} from "angular-star-rating/src/star-rating-struct";
 
 @Component({
-    selector: 'my-event-component',
+    selector: 'my-events-component',
     template: `    
+        
             <star-rating-comp   [starType]="'svg'" 
+                                [hoverEnabled]="true"
                                 (onClick)="onClick($event)" 
-                                (onRatingChange)="onRatingChange($event)">                             
+                                (onRatingChange)="onRatingChange($event)"
+                                (onHoverRatingChange)="onHoverRatingChange($event)">                             
             </star-rating-comp>
+            <p>onHoverRatingChangeResult: {{onHoverRatingChangeResult | json}}</p>
             <p>onClickResult: {{onClickResult | json}}</p>
@@ -141,2 +146,3 @@ <p>onRatingChangeResult: {{onRatingChangeResult | json}}</p>
     onClickResult:IStarRatingOnClickEvent;
+    onHoverRatingChangeResult:IStarRatingIOnHoverRatingChangeEvent;
     onRatingChangeResult:IStarRatingOnRatingChangeEven;
@@ -154,2 +160,7 @@
 
+    onHoverRatingChange = ($event:IStarRatingIOnHoverRatingChangeEvent) => {
+        console.log('onHoverRatingChange $event: ', $event);
+        this.onHoverRatingChangeResult = $event;
+    };
+
 }
@@ -267,3 +278,3 @@ ```
 Possible color names for the stars.  
-Options: default, negative, middle, positive  
+Options: default, negative, ok, positive  
 Default: undefined  
@@ -282,3 +293,3 @@
 Options: small, medium, large  
-Default: middle  
+Default: medium  
 
@@ -341,3 +352,3 @@ ```html
 
-#### Cotrol modifier
+#### Control modifier
 
@@ -399,3 +410,2 @@ **rating**: number (Optional)
 
-
 **getColor**: Function (Optional)  
@@ -417,3 +427,3 @@ Calculation of the color by rating.
 ```html
-<star-rating-comp [getHalfStarClass]="ctrl.getHalfStarClass(rating)" rating="3.2"></star-rating-comp>
+<star-rating-comp [getHalfStarClass]="ctrl.getHalfStarClass(rating)" [rating]="3.2"></star-rating-comp>
 ```
@@ -442,2 +452,9 @@ <img src="https://raw.githubusercontent.com/BioPhoton/angular-star-rating/master/resources/properties/prop-get_half_star_visible-default.PNG" width="290">
 
+**onHoverRatingChange**: Function (Optional)  
+Callback function for hoverRating change event 
+Params: $event
+```html
+<star-rating-comp (onHoverRatingChange)="ctrl.onHoverRatingChange($event)"></star-rating-comp>
+```
+
 ## Shields and other draft
@@ -444,0 +461,0 @@ [![Standard Version](https://img.shields.io/badge/release-standard%20version-brightgreen.svg)](https://github.com/BioPhoton/angular-star-rating)

src/star-rating-config.ts

@@ -51,3 +51,3 @@ import {Injectable} from '@angular/core';
 
-    //if a fix color is set use this one
+    // if a fix color is set use this one
     if (staticColor) {
@@ -57,6 +57,6 @@ return staticColor;
 
-    //calculate size of smallest fraction
-    let fractionSize = numOfStars / 3;
+    // calculate size of smallest fraction
+    const fractionSize = numOfStars / 3;
 
-    //apply color by fraction
+    // apply color by fraction
     let color: starRatingColor = 'default';
@@ -63,0 +63,0 @@ if (rating > 0) {

src/star-rating-struct.ts

@@ -1,8 +0,8 @@
-export type starRatingSizes = "small" | "medium" | "large";
-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 type starRatingSizes = 'small' | 'medium' | 'large';
+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';
 
@@ -16,1 +16,5 @@ export interface IStarRatingOnClickEvent {
 }
+
+export interface IStarRatingIOnHoverRatingChangeEvent {
+  hoverRating : number;
+}

src/star-rating.controller.ts

@@ -9,4 +9,3 @@ import {Component, Input, OnChanges, Output, EventEmitter} from "@angular/core";
     starRatingStarTypes,
-    IStarRatingOnClickEvent,
-    IStarRatingOnRatingChangeEven, starRatingDirection
+    starRatingDirection
 } from "./star-rating-struct";
@@ -93,3 +92,16 @@ import {StarRatingConfig} from "./star-rating-config";
 
+    /**
+     * hoverEnabled
+     */
+    protected _hoverEnabled: boolean;
+    get hoverEnabled(): boolean {
+        return this._hoverEnabled;
+    }
 
+    set hoverEnabled(value: boolean) {
+        this._hoverEnabled = (value !== undefined) ? !!value : false;
+    }
+
+    /////////////////////////////////////////////
+
     /**
@@ -151,2 +163,17 @@ * staticColor
     /**
+     * hoverRating
+     */
+    protected _hoverRating: number;
+
+    get hoverRating(): number {
+        return this._hoverRating;
+    }
+
+    set hoverRating(value: number) {
+        this._hoverRating = (value > 0) ? value : 0;
+    }
+
+    /////////////////////////////////////////////
+
+    /**
      * speed
@@ -374,2 +401,6 @@ */
 
+    interactionPossible():boolean {
+        return  !this.readOnly && !this.disabled;
+    }
+
     setColor(): void {
@@ -406,2 +437,7 @@ //check if custom function is given
         classNames.push(this.halfStarVisible?'half':'');
+        classNames.push(this.hoverEnabled?'hover':'');
+
+        let hoverRating = (this.hoverRating?'hover-'+this.hoverRating:'hover-0');
+        classNames.push(this.hoverEnabled? hoverRating :'');
+
         classNames.push(this.space?'space-'+this.space:'');
@@ -421,5 +457,5 @@ classNames.push(this.labelPosition?'label-'+this.labelPosition:'');
     increment() {
-        //increment to net higher step
+        //increment to next higher step
         let absDiff = Math.abs(this.rating%this.step);
-        this.rating = this.rating + (absDiff>0?absDiff:this.step);
+        this.rating = this.rating + (absDiff>0?this.step - absDiff:this.step);
     }
@@ -426,0 +462,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

255456

increased by40.06%

Lines of code

2832

increased by14.15%

Number of lines in readme file

460

increased by3.84%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Addedcss-star-rating@^1.1.3

• + Addedcss-star-rating@1.3.1(transitive)