@zulkarnainshah/ng-rating-bar/fesm2015/zulkarnainshah-ng-rating-bar.mjs

Fully customizable rating bar component for Angular based apps

import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

class NgRatingBarComponent {
    constructor() {
        this.rating = 0;
        this.filledImgSrc = '../../assets/ng-rating-bar/star_filled.png';
        this.emptyImgSrc = '../../assets/ng-rating-bar/star_empty.png';
        this.halfFilledImgSrc = '../../assets/ng-rating-bar/star_half.png';
        this.size = '15px';
        this.totalStars = 5;
        this.disabled = false;
        this.animateOnHover = true;
        this.gap = '3px';
        this.ratingChanged = new EventEmitter();
        this.editableRating = 0;
        this.filledStars = 0;
        this.hasFractions = false;
        this.emptyStars = 5;
    }
    ngOnInit() {
        this.editableRating = this.rating;
        this.calculateStars();
    }
    calculateStars() {
        var _a, _b;
        //If totalStars supplied by user is a number with decimal point
        this.totalStars = Math.ceil(this.totalStars);
        if (this.editableRating != null && this.editableRating > this.totalStars) {
            this.editableRating = this.totalStars;
        }
        let tokens = this.editableRating
            ? (_a = this.editableRating) === null || _a === void 0 ? void 0 : _a.toString().split('.')
            : null;
        if (tokens) {
            var wholeNumbers = tokens[0]
                ? tokens[0]
                : (_b = this.editableRating) === null || _b === void 0 ? void 0 : _b.toString();
            this.hasFractions = tokens[1] ? true : false;
            this.filledStars = wholeNumbers ? parseInt(wholeNumbers) : 0;
            this.emptyStars = this.totalStars - Math.ceil(this.editableRating);
        }
    }
    mouseEnteredFilledStar(event, index) {
        this.filledStars = index + 1;
        this.editableRating = this.filledStars;
        this.calculateStars();
        if (this.animateOnHover) {
            event.target.classList.add('hover-animation');
        }
    }
    mouseEnteredEmptyStar(event, index) {
        this.editableRating = this.filledStars + (index + 1);
        this.calculateStars();
        if (this.animateOnHover) {
            event.target.classList.add('hover-animation');
        }
    }
    mouseEnteredHalfStar(event) {
        if (this.animateOnHover) {
            event.target.classList.add('hover-animation');
        }
    }
    mouseLeftFilledStar(event, index) {
        this.editableRating = this.filledStars - (index - 1);
        this.calculateStars();
        if (this.animateOnHover) {
            event.target.classList.remove('hover-animation');
        }
    }
    mouseLeftEmptyStar(event) {
        if (this.animateOnHover) {
            event.target.classList.remove('hover-animation');
        }
    }
    mouseLeftHalfStar(event) {
        if (this.animateOnHover) {
            event.target.classList.remove('hover-animation');
        }
    }
    onMouseLeftContainer() {
        this.editableRating = this.rating;
        this.calculateStars();
    }
    filledStarClicked(index) {
        var _a;
        this.rating = index + 1;
        this.editableRating = this.rating;
        this.calculateStars();
        (_a = this.ratingChanged) === null || _a === void 0 ? void 0 : _a.emit(this.rating);
    }
}
NgRatingBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgRatingBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: NgRatingBarComponent, selector: "ng-rating-bar", inputs: { rating: "rating", filledImgSrc: "filledImgSrc", emptyImgSrc: "emptyImgSrc", halfFilledImgSrc: "halfFilledImgSrc", size: "size", totalStars: "totalStars", disabled: "disabled", animateOnHover: "animateOnHover", gap: "gap" }, outputs: { ratingChanged: "ratingChanged" }, ngImport: i0, template: "<div class=\"container\" (mouseleave)=\"onMouseLeftContainer()\">\n  <!-- Full-filled stars -->\n  <img\n    *ngFor=\"let _ of [].constructor(filledStars); let i = index\"\n    src=\"{{ filledImgSrc }}\"\n    class=\"star\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredFilledStar($event, i)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftFilledStar($event, i)\"\n    (click)=\"disabled ? '' : filledStarClicked(i)\"\n  />\n\n  <!-- Half-filled stars -->\n  <img\n    *ngIf=\"hasFractions\"\n    src=\"{{ halfFilledImgSrc }}\"\n    class=\"star\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredHalfStar($event)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftHalfStar($event)\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n  />\n\n  <!-- Empty stars -->\n  <img\n    *ngFor=\"let _ of [].constructor(emptyStars); let i = index\"\n    src=\"{{ emptyImgSrc }}\"\n    class=\"star\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredEmptyStar($event, i)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftEmptyStar($event)\"\n  />\n</div>\n", styles: [".star{width:15px;transition:all .3s}.hover-animation{transform:rotate(-20deg) scale(1.3)}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ng-rating-bar', template: "<div class=\"container\" (mouseleave)=\"onMouseLeftContainer()\">\n  <!-- Full-filled stars -->\n  <img\n    *ngFor=\"let _ of [].constructor(filledStars); let i = index\"\n    src=\"{{ filledImgSrc }}\"\n    class=\"star\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredFilledStar($event, i)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftFilledStar($event, i)\"\n    (click)=\"disabled ? '' : filledStarClicked(i)\"\n  />\n\n  <!-- Half-filled stars -->\n  <img\n    *ngIf=\"hasFractions\"\n    src=\"{{ halfFilledImgSrc }}\"\n    class=\"star\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredHalfStar($event)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftHalfStar($event)\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n  />\n\n  <!-- Empty stars -->\n  <img\n    *ngFor=\"let _ of [].constructor(emptyStars); let i = index\"\n    src=\"{{ emptyImgSrc }}\"\n    class=\"star\"\n    [ngStyle]=\"{ width: size, margin: '0px' + ' ' + gap }\"\n    (mouseenter)=\"disabled ? '' : mouseEnteredEmptyStar($event, i)\"\n    (mouseleave)=\"disabled ? '' : mouseLeftEmptyStar($event)\"\n  />\n</div>\n", styles: [".star{width:15px;transition:all .3s}.hover-animation{transform:rotate(-20deg) scale(1.3)}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { rating: [{
                type: Input
            }], filledImgSrc: [{
                type: Input
            }], emptyImgSrc: [{
                type: Input
            }], halfFilledImgSrc: [{
                type: Input
            }], size: [{
                type: Input
            }], totalStars: [{
                type: Input
            }], disabled: [{
                type: Input
            }], animateOnHover: [{
                type: Input
            }], gap: [{
                type: Input
            }], ratingChanged: [{
                type: Output
            }] } });

class NgRatingBarModule {
}
NgRatingBarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgRatingBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarModule, declarations: [NgRatingBarComponent], imports: [BrowserModule], exports: [NgRatingBarComponent] });
NgRatingBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarModule, imports: [[BrowserModule]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NgRatingBarModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [NgRatingBarComponent],
                    imports: [BrowserModule],
                    exports: [NgRatingBarComponent],
                }]
        }] });

/*
 * Public API Surface of ng-rating-bar
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgRatingBarComponent, NgRatingBarModule };
//# sourceMappingURL=zulkarnainshah-ng-rating-bar.mjs.map