ngx-star-rating
Version:
Simple Angular rating control from angular2 application using fontawesome icon.
100 lines (93 loc) • 7.16 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, forwardRef, Component, Input, ViewChildren, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
class NgxStarRatingService {
constructor() { }
}
NgxStarRatingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxStarRatingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
class NgxStarRatingComponent {
constructor() {
this.stars = [5, 4, 3, 2, 1];
this.propagateChange = (_) => { };
if (!this.disabled) {
this.disabled = false;
}
}
ngOnInit() { }
rate(rate) {
if (!this.disabled) {
this.propagateChange(rate);
}
}
writeValue(value) {
if (this.ngxCheckbox && value === null) {
this.ngxCheckbox.forEach((checkbox) => {
checkbox.nativeElement.checked = false;
});
}
this.value = value;
}
registerOnChange(fn) {
this.propagateChange = fn;
}
registerOnTouched(fn) { }
}
NgxStarRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxStarRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.1", type: NgxStarRatingComponent, selector: "ngx-star-rating", inputs: { id: "id", disabled: "disabled" }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxStarRatingComponent),
multi: true,
}
], viewQueries: [{ propertyName: "ngxCheckbox", predicate: ["ngxCheckbox"], descendants: true }], ngImport: i0, template: "<form action=\"\">\r\n <ng-template ngFor let-star [ngForOf]=\"stars\" let-i=\"index\">\r\n <input #ngxCheckbox class=\"star star-{{ star }}\" id=\"star-{{ star }}-{{ id }}\" type=\"radio\" name=\"star\" (click)=\"rate(star)\"\r\n [checked]=\"value == star\" [disabled]=\"disabled\" />\r\n <label class=\"star star-{{ star }}\" for=\"star-{{ star }}-{{ id }}\"></label>\r\n </ng-template>\r\n</form>\r\n", styles: ["*{margin:0;padding:0;font-family:roboto}body{background:#000}.cont{width:93%;max-width:350px;text-align:center;margin:4% auto;padding:30px 0;background:#111;color:#eee;border-radius:5px;border:thin solid #444;overflow:hidden}hr{margin:20px;border:none;border-bottom:thin solid rgba(255,255,255,.1)}div.title{font-size:2em}h1 span{font-weight:300;color:#fd4}div.stars{width:270px;display:inline-block}input.star{display:none}label.star{float:right;padding:10px;font-size:36px;color:#444;transition:all .2s}input.star:checked~label.star:before{content:\"\\f005\";color:#fd4;transition:all .25s}input.star-5:checked~label.star:before{color:#fe7;text-shadow:0 0 20px #952}input.star-1:checked~label.star:before{color:#f62}label.star:hover{transform:rotate(-15deg) scale(1.3)}label.star:before{content:\"\\f006\";font-family:FontAwesome}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-star-rating', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => NgxStarRatingComponent),
multi: true,
}
], template: "<form action=\"\">\r\n <ng-template ngFor let-star [ngForOf]=\"stars\" let-i=\"index\">\r\n <input #ngxCheckbox class=\"star star-{{ star }}\" id=\"star-{{ star }}-{{ id }}\" type=\"radio\" name=\"star\" (click)=\"rate(star)\"\r\n [checked]=\"value == star\" [disabled]=\"disabled\" />\r\n <label class=\"star star-{{ star }}\" for=\"star-{{ star }}-{{ id }}\"></label>\r\n </ng-template>\r\n</form>\r\n", styles: ["*{margin:0;padding:0;font-family:roboto}body{background:#000}.cont{width:93%;max-width:350px;text-align:center;margin:4% auto;padding:30px 0;background:#111;color:#eee;border-radius:5px;border:thin solid #444;overflow:hidden}hr{margin:20px;border:none;border-bottom:thin solid rgba(255,255,255,.1)}div.title{font-size:2em}h1 span{font-weight:300;color:#fd4}div.stars{width:270px;display:inline-block}input.star{display:none}label.star{float:right;padding:10px;font-size:36px;color:#444;transition:all .2s}input.star:checked~label.star:before{content:\"\\f005\";color:#fd4;transition:all .25s}input.star-5:checked~label.star:before{color:#fe7;text-shadow:0 0 20px #952}input.star-1:checked~label.star:before{color:#f62}label.star:hover{transform:rotate(-15deg) scale(1.3)}label.star:before{content:\"\\f006\";font-family:FontAwesome}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
type: Input
}], disabled: [{
type: Input
}], ngxCheckbox: [{
type: ViewChildren,
args: ['ngxCheckbox']
}] } });
class NgxStarRatingModule {
}
NgxStarRatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxStarRatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingModule, declarations: [NgxStarRatingComponent], imports: [CommonModule], exports: [NgxStarRatingComponent] });
NgxStarRatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.1", ngImport: i0, type: NgxStarRatingModule, decorators: [{
type: NgModule,
args: [{
declarations: [NgxStarRatingComponent],
imports: [
CommonModule
],
exports: [NgxStarRatingComponent]
}]
}] });
/*
* Public API Surface of ngx-star-rating
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxStarRatingComponent, NgxStarRatingModule, NgxStarRatingService };
//# sourceMappingURL=ngx-star-rating.mjs.map