ngx-star-rating-latest
Version:
----(Forked)--- Updated to latest Angular V.Simple Angular rating control from angular2 application using fontawesome icon. (Upodated)
62 lines • 9.56 kB
JavaScript
import { Component, Input, forwardRef, ViewChildren } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NgxStarRatingComponent {
onChange;
value;
stars = [5, 4, 3, 2, 1];
id;
disabled;
ngxCheckbox;
constructor() {
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) { }
propagateChange = (_) => { };
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.7", ngImport: i0, type: NgxStarRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.7", 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=\"\">\n <ng-template ngFor let-star [ngForOf]=\"stars\" let-i=\"index\">\n <input #ngxCheckbox class=\"star star-{{ star }}\" id=\"star-{{ star }}-{{ id }}\" type=\"radio\" name=\"star\" (click)=\"rate(star)\"\n [checked]=\"value == star\" [disabled]=\"disabled\" />\n <label class=\"star star-{{ star }}\" for=\"star-{{ star }}-{{ id }}\"></label>\n </ng-template>\n</form>\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"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.7", 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=\"\">\n <ng-template ngFor let-star [ngForOf]=\"stars\" let-i=\"index\">\n <input #ngxCheckbox class=\"star star-{{ star }}\" id=\"star-{{ star }}-{{ id }}\" type=\"radio\" name=\"star\" (click)=\"rate(star)\"\n [checked]=\"value == star\" [disabled]=\"disabled\" />\n <label class=\"star star-{{ star }}\" for=\"star-{{ star }}-{{ id }}\"></label>\n </ng-template>\n</form>\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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXN0YXItcmF0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdGFyLXJhdGluZy9zcmMvbGliL25neC1zdGFyLXJhdGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3Rhci1yYXRpbmcvc3JjL2xpYi9uZ3gtc3Rhci1yYXRpbmcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBeUIsTUFBTSxlQUFlLENBQUM7QUFDMUcsT0FBTyxFQUF3QixpQkFBaUIsRUFBaUIsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBY3hGLE1BQU0sT0FBTyxzQkFBc0I7SUFDakMsUUFBUSxDQUFDO0lBQ1QsS0FBSyxDQUFDO0lBQ04sS0FBSyxHQUFHLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBRWYsRUFBRSxDQUFTO0lBQ1gsUUFBUSxDQUFVO0lBQ0UsV0FBVyxDQUF3QjtJQUVoRTtRQUNFLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQztJQUVELFFBQVEsS0FBSyxDQUFDO0lBRWQsSUFBSSxDQUFDLElBQUk7UUFDUCxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNsQixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO1NBQzVCO0lBQ0gsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFLO1FBQ2QsSUFBSSxJQUFJLENBQUMsV0FBVyxJQUFJLEtBQUssS0FBSyxJQUFJLEVBQUU7WUFDdEMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxPQUFPLENBQUMsQ0FBQyxRQUFvQixFQUFFLEVBQUU7Z0JBQ2hELFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQztZQUN6QyxDQUFDLENBQUMsQ0FBQztTQUNKO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUM7SUFDckIsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQUU7UUFDakIsSUFBSSxDQUFDLGVBQWUsR0FBRyxFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQUUsSUFBSSxDQUFDO0lBRWpCLGVBQWUsR0FBRyxDQUFDLENBQU0sRUFBRSxFQUFFLEdBQUcsQ0FBQyxDQUFDO3VHQXRDL0Isc0JBQXNCOzJGQUF0QixzQkFBc0Isc0ZBUnRCO1lBQ1Q7Z0JBQ0UsT0FBTyxFQUFFLGlCQUFpQjtnQkFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztnQkFDckQsS0FBSyxFQUFFLElBQUk7YUFDWjtTQUNGLHlIQ2JILG9aQU9BOzsyRkRRYSxzQkFBc0I7a0JBWmxDLFNBQVM7K0JBQ0UsaUJBQWlCLGFBR2hCO3dCQUNUOzRCQUNFLE9BQU8sRUFBRSxpQkFBaUI7NEJBQzFCLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLHVCQUF1QixDQUFDOzRCQUNyRCxLQUFLLEVBQUUsSUFBSTt5QkFDWjtxQkFDRjswRUFPUSxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDdUIsV0FBVztzQkFBdkMsWUFBWTt1QkFBQyxhQUFhIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIElucHV0LCBmb3J3YXJkUmVmLCBWaWV3Q2hpbGRyZW4sIFF1ZXJ5TGlzdCwgRWxlbWVudFJlZiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SLCBOR19WQUxJREFUT1JTIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtc3Rhci1yYXRpbmcnLFxuICB0ZW1wbGF0ZVVybDogJ25neC1zdGFyLXJhdGluZy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWyduZ3gtc3Rhci1yYXRpbmcuY29tcG9uZW50LnNjc3MnXSxcbiAgcHJvdmlkZXJzOiBbXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOZ3hTdGFyUmF0aW5nQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hTdGFyUmF0aW5nQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBDb250cm9sVmFsdWVBY2Nlc3NvciB7XG4gIG9uQ2hhbmdlO1xuICB2YWx1ZTtcbiAgc3RhcnMgPSBbNSwgNCwgMywgMiwgMV07XG5cbiAgQElucHV0KCkgaWQ6IHN0cmluZztcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW47XG4gIEBWaWV3Q2hpbGRyZW4oJ25neENoZWNrYm94Jykgbmd4Q2hlY2tib3g6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcbiAgICAgIHRoaXMuZGlzYWJsZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cblxuICBuZ09uSW5pdCgpIHsgfVxuXG4gIHJhdGUocmF0ZSkge1xuICAgIGlmICghdGhpcy5kaXNhYmxlZCkge1xuICAgICAgdGhpcy5wcm9wYWdhdGVDaGFuZ2UocmF0ZSk7XG4gICAgfVxuICB9XG5cbiAgd3JpdGVWYWx1ZSh2YWx1ZSkge1xuICAgIGlmICh0aGlzLm5neENoZWNrYm94ICYmIHZhbHVlID09PSBudWxsKSB7XG4gICAgICB0aGlzLm5neENoZWNrYm94LmZvckVhY2goKGNoZWNrYm94OiBFbGVtZW50UmVmKSA9PiB7XG4gICAgICAgIGNoZWNrYm94Lm5hdGl2ZUVsZW1lbnQuY2hlY2tlZCA9IGZhbHNlO1xuICAgICAgfSk7XG4gICAgfVxuICAgIHRoaXMudmFsdWUgPSB2YWx1ZTtcbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm4pIHtcbiAgICB0aGlzLnByb3BhZ2F0ZUNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm4pIHsgfVxuXG4gIHByaXZhdGUgcHJvcGFnYXRlQ2hhbmdlID0gKF86IGFueSkgPT4geyB9O1xufVxuIiwiPGZvcm0gYWN0aW9uPVwiXCI+XG4gIDxuZy10ZW1wbGF0ZSBuZ0ZvciBsZXQtc3RhciBbbmdGb3JPZl09XCJzdGFyc1wiIGxldC1pPVwiaW5kZXhcIj5cbiAgICA8aW5wdXQgI25neENoZWNrYm94IGNsYXNzPVwic3RhciBzdGFyLXt7IHN0YXIgfX1cIiBpZD1cInN0YXIte3sgc3RhciB9fS17eyBpZCB9fVwiIHR5cGU9XCJyYWRpb1wiIG5hbWU9XCJzdGFyXCIgKGNsaWNrKT1cInJhdGUoc3RhcilcIlxuICAgICAgW2NoZWNrZWRdPVwidmFsdWUgPT0gc3RhclwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIC8+XG4gICAgPGxhYmVsIGNsYXNzPVwic3RhciBzdGFyLXt7IHN0YXIgfX1cIiBmb3I9XCJzdGFyLXt7IHN0YXIgfX0te3sgaWQgfX1cIj48L2xhYmVsPlxuICA8L25nLXRlbXBsYXRlPlxuPC9mb3JtPlxuIl19