ion-rating-stars/fesm2022/ion-rating-stars.mjs

Ionic 7/8 rating stars component using Angular

import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component } from '@angular/core';
import { IonIcon } from '@ionic/angular/standalone';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import { starHalfOutline, starHalf, starOutline, star } from 'ionicons/icons';
import { addIcons } from 'ionicons';

class IonRatingStarsComponent {
    constructor() {
        this.stars = [1, 2, 3, 4, 5];
        this.rating = 0;
        this.size = 20;
        this.color = 'grey';
        this.filledColor = 'orange';
        this.margin = 5;
        this.disabled = false;
        this.opacity = 0.5;
        this.isHalfStar = false;
        this.ratingChange = new EventEmitter();
        addIcons({ star, starOutline, starHalf, starHalfOutline });
    }
    ngOnInit() {
    }
    rateChange(i) {
        if (this.isHalfStar) {
            if (this.rating === i + 0.5) {
                // If the clicked star is already half-filled, make it full
                this.rating = i + 1;
            }
            else if (this.rating === i + 1) {
                // If the clicked star is already full, make it empty
                this.rating = i + 0.5;
            }
            else {
                // Otherwise, set it to half-filled
                this.rating = i + 0.5;
            }
        }
        else {
            this.rating = i + 1;
        }
        this.ratingChange.emit(this.rating);
    }
    getStarColor(index) {
        if (this.rating >= index + 1) {
            return this.filledColor;
        }
        else if (this.rating >= index + 0.5) {
            return this.filledColor;
        }
        else {
            return this.color;
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IonRatingStarsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: IonRatingStarsComponent, isStandalone: true, selector: "ion-rating-stars", inputs: { rating: "rating", size: "size", color: "color", filledColor: "filledColor", margin: "margin", disabled: "disabled", opacity: "opacity", isHalfStar: "isHalfStar" }, outputs: { ratingChange: "ratingChange" }, ngImport: i0, template: "<div>\r\n  @for(star of stars; track $index;){\r\n  <ion-icon\r\n    [name]=\"($index + 1) <= rating ? 'star' : (isHalfStar && rating === $index + 0.5) ? 'star-half-outline' : 'star-outline'\"\r\n    [ngStyle]=\"{\r\n      'color': getStarColor($index),\r\n      'font-size': size + 'px',\r\n      'margin-right': margin + 'px',\r\n      'opacity': disabled ? opacity : '1',\r\n      'pointer-events': disabled ? 'none' : ''\r\n    }\"\r\n    (click)=\"rateChange($index)\">\r\n  </ion-icon>\r\n  }\r\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: IonRatingStarsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ion-rating-stars', standalone: true, imports: [CommonModule, IonIcon], template: "<div>\r\n  @for(star of stars; track $index;){\r\n  <ion-icon\r\n    [name]=\"($index + 1) <= rating ? 'star' : (isHalfStar && rating === $index + 0.5) ? 'star-half-outline' : 'star-outline'\"\r\n    [ngStyle]=\"{\r\n      'color': getStarColor($index),\r\n      'font-size': size + 'px',\r\n      'margin-right': margin + 'px',\r\n      'opacity': disabled ? opacity : '1',\r\n      'pointer-events': disabled ? 'none' : ''\r\n    }\"\r\n    (click)=\"rateChange($index)\">\r\n  </ion-icon>\r\n  }\r\n</div>" }]
        }], ctorParameters: () => [], propDecorators: { rating: [{
                type: Input
            }], size: [{
                type: Input
            }], color: [{
                type: Input
            }], filledColor: [{
                type: Input
            }], margin: [{
                type: Input
            }], disabled: [{
                type: Input
            }], opacity: [{
                type: Input
            }], isHalfStar: [{
                type: Input
            }], ratingChange: [{
                type: Output
            }] } });

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

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

export { IonRatingStarsComponent };
//# sourceMappingURL=ion-rating-stars.mjs.map