neutron-star-rating/esm2015/neutron-star-rating.js

Built on angular 5, star rating library. Can be used for your angular applications.

import { Component, EventEmitter, Input, NgModule, Output } from '@angular/core';
import { CommonModule } from '@angular/common';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class NeutronRatingComponent {
    constructor() {
        this.fullIcon = "★";
        this.emptyIcon = "☆";
        this.ratingArr = [];
        this.existingRatingArr = [];
        this.ratingClicked = new EventEmitter();
        this.initializeStars = () => {
            this.rating = Math.floor(this.rating);
            let /** @type {?} */ numberOfStars = (this.starNum) ? this.starNum : 5;
            let /** @type {?} */ newRating = (this.rating > numberOfStars) ? numberOfStars : this.rating;
            if (this.rating > numberOfStars) {
                console.log("Warning: your rating exceeds the number of stars hence the rating = number of stars ");
            }
            else { }
            for (let /** @type {?} */ i = 0; i < newRating; i++) {
                this.ratingArr.push(this.fullIcon);
            }
            let /** @type {?} */ ratingLeft = numberOfStars - this.rating;
            for (let /** @type {?} */ j = 0; j < ratingLeft; j++) {
                this.ratingArr.push(this.emptyIcon);
            }
            this.existingRatingArr = this.ratingArr;
            console.log(this.ratingArr);
        };
        this.passNewRating = (newRating) => {
            if (!this.readOnly) {
                let /** @type {?} */ numberOfStars = (this.starNum) ? this.starNum : 5;
                newRating = (newRating > numberOfStars) ? numberOfStars : newRating;
                newRating = Math.floor(newRating);
                this.rating = newRating;
                //console.log("new rating is " + newRating);
                this.ratingArr = [];
                for (let /** @type {?} */ i = 0; i < newRating; i++) {
                    this.ratingArr.push(this.fullIcon);
                }
                let /** @type {?} */ ratingLeft = numberOfStars - newRating;
                for (let /** @type {?} */ j = 0; j < ratingLeft; j++) {
                    this.ratingArr.push(this.emptyIcon);
                }
                this.ratingClicked.emit(newRating);
                this.existingRatingArr = this.ratingArr;
            }
            return;
        };
        this.onHoverEvent = (hoveredRating) => {
            if (!this.readOnly) {
                let /** @type {?} */ numberOfStars = (this.starNum) ? this.starNum : 5;
                this.ratingArr = [];
                for (let /** @type {?} */ i = 0; i < hoveredRating; i++) {
                    this.ratingArr.push(this.fullIcon);
                }
                let /** @type {?} */ ratingLeft = numberOfStars - hoveredRating;
                for (let /** @type {?} */ j = 0; j < ratingLeft; j++) {
                    this.ratingArr.push(this.emptyIcon);
                }
                this.initialHoveredRating = hoveredRating;
            }
            return;
        };
        this.changeHovered = (a) => {
            //console.log("moving 1");
            //console.log(a);
        };
        this.overStars = ($event) => {
        };
        this.onHoverExitEvent = () => {
            this.ratingArr = this.existingRatingArr;
        };
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        this.initializeStars();
    }
    /**
     * @return {?}
     */
    ngOnChanges() {
    }
}
NeutronRatingComponent.decorators = [
    { type: Component, args: [{
                selector: 'neutron-rating',
                template: `<div class="crop" [ngClass]="{'clickable': !readOnly}" [title]="rating?rating:''" (mouseleave)="onHoverExitEvent()">
  <div [style.font-size.em]="starSize?starSize:1">
    <div>
      <span *ngFor="let singleRating of ratingArr; let i = index">
        <a [style.color]="starColour?starColour:'yellow'" (click)="passNewRating(i+1)" (mouseenter)="onHoverEvent(i+1)">{{singleRating}}</a>
      </span>
    </div>
  </div>
</div>

<!-- <fa name="star" style="color: #FDD835; font-size: 4em;"></fa> (mouseleave) ="onHoverExitEvent($event)" (mouseover)="overStars($event)" (mousemove)="changeHovered($event)" -->
`,
                styles: [`.crop {
  overflow: hidden;
}
.clickable {
  cursor: pointer;
}
`]
            },] },
];
/** @nocollapse */
NeutronRatingComponent.ctorParameters = () => [];
NeutronRatingComponent.propDecorators = {
    "rating": [{ type: Input },],
    "starSize": [{ type: Input },],
    "starColour": [{ type: Input },],
    "starNum": [{ type: Input },],
    "readOnly": [{ type: Input },],
    "ratingClicked": [{ type: Output },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class NeutronRatingModule {
}
NeutronRatingModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule
                ],
                declarations: [
                    NeutronRatingComponent
                ],
                exports: [
                    NeutronRatingComponent
                ]
            },] },
];
/** @nocollapse */
NeutronRatingModule.ctorParameters = () => [];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
/**
 * Generated bundle index. Do not edit.
 */

export { NeutronRatingModule, NeutronRatingComponent as ɵa };
//# sourceMappingURL=neutron-star-rating.js.map