ngx-stars-rating/fesm2015/ngx-stars-rating.mjs

## Overview Ngx Stars Rating is a straightforward Angular module designed for Angular 14 and above. It offers customizable star icons using Material Icons, Antd Icons, and other options.

import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';

const DEFAULT_RATING_OPTIONS = {
    starsCount: 5
};

class NgxStarsRatingComponent {
    constructor() {
        this._rate = 0;
        this._onRateEvent = new EventEmitter();
        this.isHovering = false;
        this.starItems = [];
        this._options = DEFAULT_RATING_OPTIONS;
    }
    set options($event) {
        if (!$event) {
            return;
        }
        this._options = $event;
    }
    set rate($event) {
        this._rate = $event;
        this._calculateStartIndexes();
    }
    get options() {
        return this._options;
    }
    ngOnInit() {
        this._setStarItems();
    }
    _setStarItems() {
        const { starsCount } = this._options;
        this.starItems = Array.from(Array(starsCount));
        this._calculateStartIndexes();
    }
    onStarHover(starIndex) {
        if (!this._options.hoverable) {
            return;
        }
        this.hoveringStarIndex = starIndex;
        this.isHovering = true;
    }
    onMouseLeave() {
        if (!this._options.hoverable) {
            return;
        }
        this.hoveringStarIndex = -1;
        this.isHovering = false;
    }
    onClickRating(rateIndex) {
        if (!this._options.clickable) {
            return;
        }
        const rate = rateIndex + 1;
        this._onRateEvent.emit(rate);
    }
    _calculateStartIndexes() {
        this.activeStarIndex = Math.floor(this._rate) - 1;
        this.halfStarIndex = Math.ceil(this._rate) - 1;
        this.starFillPercentage = (this._rate - Math.floor(this._rate)) * 100;
        if (this.starFillPercentage > 100) {
            this.starFillPercentage = 100;
        }
    }
}
NgxStarsRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxStarsRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxStarsRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NgxStarsRatingComponent, selector: "ngx-stars-rating", inputs: { options: "options", rate: "rate", starTemplate: "starTemplate" }, outputs: { _onRateEvent: "onRate" }, ngImport: i0, template: `
  <div class="rating-wrapper" (mouseleave)="onMouseLeave()">
    <div class="stars-container">
        <span class="star-item-wrapper" *ngFor="let item of starItems; let ind=index" (click)="onClickRating(ind)">
            <span class="star-item" [class.star-item-hoverable]="options.hoverable" [class.active-star]="ind <= activeStarIndex || ind<=hoveringStarIndex" (mouseenter)="onStarHover(ind)">
                <ng-container *ngIf="!starTemplate;else starTemplateRef">
                    &#x2605;
                </ng-container>
                <ng-template #starTemplateRef [ngTemplateOutlet]="starTemplate">
                </ng-template>
            </span>
            <span class="star-item star-item-fill" *ngIf="halfStarIndex === ind && !isHovering"
                [style.width.%]="starFillPercentage">
                <ng-container *ngIf="!starTemplate;else starTemplateRef">
                    &#x2605;
                </ng-container>
                <ng-template #starTemplateRef [ngTemplateOutlet]="starTemplate">
                </ng-template>
            </span>
        </span>
    </div>
  </div>
  `, isInline: true, styles: [".rating-wrapper{width:150px;position:relative;color:transparent}.rating-wrapper .stars-container{white-space:nowrap;display:flex}.rating-wrapper .star-item-wrapper{position:relative}.rating-wrapper .star-item-wrapper .star-item{font-size:30px;cursor:pointer;white-space:nowrap;overflow:hidden;display:flex;color:#bdbdbd}.rating-wrapper .star-item-wrapper .star-item-hoverable:hover{color:gold}.rating-wrapper .star-item-wrapper .star-item-fill{position:absolute;inset:0;width:0;color:gold}.rating-wrapper .active-star{color:gold!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NgxStarsRatingComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ngx-stars-rating', template: `
  <div class="rating-wrapper" (mouseleave)="onMouseLeave()">
    <div class="stars-container">
        <span class="star-item-wrapper" *ngFor="let item of starItems; let ind=index" (click)="onClickRating(ind)">
            <span class="star-item" [class.star-item-hoverable]="options.hoverable" [class.active-star]="ind <= activeStarIndex || ind<=hoveringStarIndex" (mouseenter)="onStarHover(ind)">
                <ng-container *ngIf="!starTemplate;else starTemplateRef">
                    &#x2605;
                </ng-container>
                <ng-template #starTemplateRef [ngTemplateOutlet]="starTemplate">
                </ng-template>
            </span>
            <span class="star-item star-item-fill" *ngIf="halfStarIndex === ind && !isHovering"
                [style.width.%]="starFillPercentage">
                <ng-container *ngIf="!starTemplate;else starTemplateRef">
                    &#x2605;
                </ng-container>
                <ng-template #starTemplateRef [ngTemplateOutlet]="starTemplate">
                </ng-template>
            </span>
        </span>
    </div>
  </div>
  `, encapsulation: ViewEncapsulation.None, styles: [".rating-wrapper{width:150px;position:relative;color:transparent}.rating-wrapper .stars-container{white-space:nowrap;display:flex}.rating-wrapper .star-item-wrapper{position:relative}.rating-wrapper .star-item-wrapper .star-item{font-size:30px;cursor:pointer;white-space:nowrap;overflow:hidden;display:flex;color:#bdbdbd}.rating-wrapper .star-item-wrapper .star-item-hoverable:hover{color:gold}.rating-wrapper .star-item-wrapper .star-item-fill{position:absolute;inset:0;width:0;color:gold}.rating-wrapper .active-star{color:gold!important}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { options: [{
                type: Input
            }], rate: [{
                type: Input
            }], starTemplate: [{
                type: Input
            }], _onRateEvent: [{
                type: Output,
                args: ['onRate']
            }] } });

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

/*
 * Public API Surface of ngx-stars-rating
 */

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

export { NgxStarsRatingComponent, NgxStarsRatingModule };
//# sourceMappingURL=ngx-stars-rating.mjs.map