ng-star-rate/esm2015/lib/rating/rating.component.js

A simple star rating library

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
import { Component, Output, Input, EventEmitter, ElementRef } from '@angular/core';
export class RatingComponent {
    /**
     * @param {?} el
     */
    constructor(el) {
        this.el = el;
        this.ratingSelection = new EventEmitter();
    }
    /**
     * @return {?}
     */
    ngOnInit() {
        const /** @type {?} */ style = `
    .active {color :${this.selctedColor}; }
    .list:hover .star {color: ${this.selctedColor}; }
   `;
        this.createStyle(style);
        this.generateRating();
    }
    /**
     * @param {?} style
     * @return {?}
     */
    createStyle(style) {
        const /** @type {?} */ styleElement = document.createElement('style');
        styleElement.appendChild(document.createTextNode(style));
        this.el.nativeElement.appendChild(styleElement);
    }
    /**
     * @return {?}
     */
    generateRating() {
        this.stars = Array.from({ length: this.maxRating }, (v, k) => k + 1);
    }
    /**
     * @param {?} item
     * @return {?}
     */
    rate(item) {
        this.star = (item <= this.maxRating && item >= 0) ?
            (this.star = this.star === item ? item - 1 : item) : this.star;
        this.ratingSelection.emit(this.star);
    }
}
RatingComponent.decorators = [
    { type: Component, args: [{
                selector: 'lib-star-rate',
                // templateUrl: './rating.component.html',
                template: `
  <div class="rating">
    <ul class="list">
      <li
        id="starId"
        class="star"
        *ngFor="let item of stars"
        [ngClass]="{'active': item <= star}"
        (click)="rate(item)">
        <i class="fa" [ngClass]="item <= star ? 'fa-star' : 'fa-star-o'" aria-hidden="true"></i>
      </li>
    </ul>
    <span *ngIf="showRatingCounter">{{ star }} of {{ maxRating }}</span>
  </div>
  `,
                styles: [
                    `
      .rating {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        font-size: 22px;
        color: #a7a8a8;
      }
      .list {
        margin: 0 0 5px 0;
        padding: 0;
        list-style-type: none;
      }
      .star {
        display: inline-block;
        cursor: pointer;
      }
      .star:hover ~ .star:not(.active) {
        color: inherit;
      }
  `
                ]
            },] },
];
/** @nocollapse */
RatingComponent.ctorParameters = () => [
    { type: ElementRef }
];
RatingComponent.propDecorators = {
    selctedColor: [{ type: Input }],
    star: [{ type: Input }],
    maxRating: [{ type: Input }],
    showRatingCounter: [{ type: Input }],
    ratingSelection: [{ type: Output }]
};
function RatingComponent_tsickle_Closure_declarations() {
    /** @type {?} */
    RatingComponent.prototype.selctedColor;
    /** @type {?} */
    RatingComponent.prototype.star;
    /** @type {?} */
    RatingComponent.prototype.maxRating;
    /** @type {?} */
    RatingComponent.prototype.showRatingCounter;
    /** @type {?} */
    RatingComponent.prototype.ratingSelection;
    /** @type {?} */
    RatingComponent.prototype.stars;
    /** @type {?} */
    RatingComponent.prototype.el;
}

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmF0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25nLXN0YXItcmF0ZS8iLCJzb3VyY2VzIjpbImxpYi9yYXRpbmcvcmF0aW5nLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxNQUFNLEVBQUUsS0FBSyxFQUFFLFlBQVksRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUEwQzNGLE1BQU07Ozs7SUFRSixZQUFvQixFQUFjO1FBQWQsT0FBRSxHQUFGLEVBQUUsQ0FBWTsrQkFIZ0IsSUFBSSxZQUFZLEVBQVU7S0FHckM7Ozs7SUFFdkMsUUFBUTtRQUNOLHVCQUFNLEtBQUssR0FBRztzQkFDSSxJQUFJLENBQUMsWUFBWTtnQ0FDUCxJQUFJLENBQUMsWUFBWTtJQUM3QyxDQUFDO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUN4QixJQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7S0FDdkI7Ozs7O0lBRUQsV0FBVyxDQUFDLEtBQWE7UUFDdkIsdUJBQU0sWUFBWSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckQsWUFBWSxDQUFDLFdBQVcsQ0FBQyxRQUFRLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUM7UUFDekQsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFDO0tBQ2pEOzs7O0lBRUQsY0FBYztRQUNaLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxJQUFJLENBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7S0FDdEU7Ozs7O0lBRUQsSUFBSSxDQUFDLElBQVk7UUFDZixJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsSUFBSSxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksSUFBSSxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDakQsQ0FBQyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQztRQUNqRSxJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7S0FDdEM7OztZQXpFRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGVBQWU7O2dCQUV6QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7O0dBY1Q7Z0JBQ0QsTUFBTSxFQUFFO29CQUNOOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQkQ7aUJBQ0E7YUFDRjs7OztZQXpDd0QsVUFBVTs7OzJCQTJDaEUsS0FBSzttQkFDTCxLQUFLO3dCQUNMLEtBQUs7Z0NBQ0wsS0FBSzs4QkFDTCxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIE91dHB1dCwgSW5wdXQsIEV2ZW50RW1pdHRlciwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItc3Rhci1yYXRlJyxcbiAgLy8gdGVtcGxhdGVVcmw6ICcuL3JhdGluZy5jb21wb25lbnQuaHRtbCcsXG4gIHRlbXBsYXRlOiBgXG4gIDxkaXYgY2xhc3M9XCJyYXRpbmdcIj5cbiAgICA8dWwgY2xhc3M9XCJsaXN0XCI+XG4gICAgICA8bGlcbiAgICAgICAgaWQ9XCJzdGFySWRcIlxuICAgICAgICBjbGFzcz1cInN0YXJcIlxuICAgICAgICAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzdGFyc1wiXG4gICAgICAgIFtuZ0NsYXNzXT1cInsnYWN0aXZlJzogaXRlbSA8PSBzdGFyfVwiXG4gICAgICAgIChjbGljayk9XCJyYXRlKGl0ZW0pXCI+XG4gICAgICAgIDxpIGNsYXNzPVwiZmFcIiBbbmdDbGFzc109XCJpdGVtIDw9IHN0YXIgPyAnZmEtc3RhcicgOiAnZmEtc3Rhci1vJ1wiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvaT5cbiAgICAgIDwvbGk+XG4gICAgPC91bD5cbiAgICA8c3BhbiAqbmdJZj1cInNob3dSYXRpbmdDb3VudGVyXCI+e3sgc3RhciB9fSBvZiB7eyBtYXhSYXRpbmcgfX08L3NwYW4+XG4gIDwvZGl2PlxuICBgLFxuICBzdHlsZXM6IFtcbiAgICBgXG4gICAgICAucmF0aW5nIHtcbiAgICAgICAgZm9udC1mYW1pbHk6IFwiQXZlbmlyXCIsIEhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWY7XG4gICAgICAgIGZvbnQtc2l6ZTogMjJweDtcbiAgICAgICAgY29sb3I6ICNhN2E4YTg7XG4gICAgICB9XG4gICAgICAubGlzdCB7XG4gICAgICAgIG1hcmdpbjogMCAwIDVweCAwO1xuICAgICAgICBwYWRkaW5nOiAwO1xuICAgICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XG4gICAgICB9XG4gICAgICAuc3RhciB7XG4gICAgICAgIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgICAgICAgY3Vyc29yOiBwb2ludGVyO1xuICAgICAgfVxuICAgICAgLnN0YXI6aG92ZXIgfiAuc3Rhcjpub3QoLmFjdGl2ZSkge1xuICAgICAgICBjb2xvcjogaW5oZXJpdDtcbiAgICAgIH1cbiAgYFxuICBdXG59KVxuZXhwb3J0IGNsYXNzIFJhdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dCgpIHNlbGN0ZWRDb2xvcjogc3RyaW5nO1xuICBASW5wdXQoKSBzdGFyOiBudW1iZXI7XG4gIEBJbnB1dCgpIG1heFJhdGluZzogbnVtYmVyO1xuICBASW5wdXQoKSBzaG93UmF0aW5nQ291bnRlcjogYm9vbGVhbjtcbiAgQE91dHB1dCgpIHJhdGluZ1NlbGVjdGlvbjogRXZlbnRFbWl0dGVyPG51bWJlcj4gPSBuZXcgRXZlbnRFbWl0dGVyPG51bWJlcj4oKTtcbiAgc3RhcnM6IEFycmF5PG51bWJlcj47XG5cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbDogRWxlbWVudFJlZikgeyB9XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgY29uc3Qgc3R5bGUgPSBgXG4gICAgLmFjdGl2ZSB7Y29sb3IgOiR7dGhpcy5zZWxjdGVkQ29sb3J9OyB9XG4gICAgLmxpc3Q6aG92ZXIgLnN0YXIge2NvbG9yOiAke3RoaXMuc2VsY3RlZENvbG9yfTsgfVxuICAgYDtcbiAgICB0aGlzLmNyZWF0ZVN0eWxlKHN0eWxlKTtcbiAgICB0aGlzLmdlbmVyYXRlUmF0aW5nKCk7XG4gIH1cblxuICBjcmVhdGVTdHlsZShzdHlsZTogc3RyaW5nKTogdm9pZCB7XG4gICAgY29uc3Qgc3R5bGVFbGVtZW50ID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKTtcbiAgICBzdHlsZUVsZW1lbnQuYXBwZW5kQ2hpbGQoZG9jdW1lbnQuY3JlYXRlVGV4dE5vZGUoc3R5bGUpKTtcbiAgICB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQuYXBwZW5kQ2hpbGQoc3R5bGVFbGVtZW50KTtcbiAgfVxuXG4gIGdlbmVyYXRlUmF0aW5nKCkge1xuICAgIHRoaXMuc3RhcnMgPSBBcnJheS5mcm9tKHsgbGVuZ3RoOiB0aGlzLm1heFJhdGluZyB9LCAodiwgaykgPT4gayArIDEpO1xuICB9XG5cbiAgcmF0ZShpdGVtOiBudW1iZXIpIHtcbiAgICB0aGlzLnN0YXIgPSAoaXRlbSA8PSB0aGlzLm1heFJhdGluZyAmJiBpdGVtID49IDApID9cbiAgICAgICh0aGlzLnN0YXIgPSB0aGlzLnN0YXIgPT09IGl0ZW0gPyBpdGVtIC0gMSA6IGl0ZW0pIDogdGhpcy5zdGFyO1xuICAgIHRoaXMucmF0aW5nU2VsZWN0aW9uLmVtaXQodGhpcy5zdGFyKTtcbiAgfVxufVxuIl19