ngx-star-rating
Version:
Simple Angular rating control from angular2 application using fontawesome icon.
57 lines • 9.64 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 {
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']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXN0YXItcmF0aW5nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1zdGFyLXJhdGluZy9zcmMvbGliL25neC1zdGFyLXJhdGluZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtc3Rhci1yYXRpbmcvc3JjL2xpYi9uZ3gtc3Rhci1yYXRpbmcuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsVUFBVSxFQUFFLFlBQVksRUFBeUIsTUFBTSxlQUFlLENBQUM7QUFDMUcsT0FBTyxFQUF3QixpQkFBaUIsRUFBaUIsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBY3hGLE1BQU0sT0FBTyxzQkFBc0I7SUFTakM7UUFOQSxVQUFLLEdBQUcsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsRUFBRSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFtQ2hCLG9CQUFlLEdBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRSxHQUFHLENBQUMsQ0FBQztRQTVCeEMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdkI7SUFDSCxDQUFDO0lBRUQsUUFBUSxLQUFLLENBQUM7SUFFZCxJQUFJLENBQUMsSUFBSTtRQUNQLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFO1lBQ2xCLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLENBQUM7U0FDNUI7SUFDSCxDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQUs7UUFDZCxJQUFJLElBQUksQ0FBQyxXQUFXLElBQUksS0FBSyxLQUFLLElBQUksRUFBRTtZQUN0QyxJQUFJLENBQUMsV0FBVyxDQUFDLE9BQU8sQ0FBQyxDQUFDLFFBQW9CLEVBQUUsRUFBRTtnQkFDaEQsUUFBUSxDQUFDLGFBQWEsQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1lBQ3pDLENBQUMsQ0FBQyxDQUFDO1NBQ0o7UUFDRCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssQ0FBQztJQUNyQixDQUFDO0lBRUQsZ0JBQWdCLENBQUMsRUFBRTtRQUNqQixJQUFJLENBQUMsZUFBZSxHQUFHLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRUQsaUJBQWlCLENBQUMsRUFBRSxJQUFJLENBQUM7O21IQXBDZCxzQkFBc0I7dUdBQXRCLHNCQUFzQixzRkFSdEI7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxzQkFBc0IsQ0FBQztZQUNyRCxLQUFLLEVBQUUsSUFBSTtTQUNaO0tBQ0YseUhDYkgsa2FBT0E7MkZEUWEsc0JBQXNCO2tCQVpsQyxTQUFTOytCQUNFLGlCQUFpQixhQUdoQjt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSx1QkFBdUIsQ0FBQzs0QkFDckQsS0FBSyxFQUFFLElBQUk7eUJBQ1o7cUJBQ0Y7MEVBT1EsRUFBRTtzQkFBVixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ3VCLFdBQVc7c0JBQXZDLFlBQVk7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgZm9yd2FyZFJlZiwgVmlld0NoaWxkcmVuLCBRdWVyeUxpc3QsIEVsZW1lbnRSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ29udHJvbFZhbHVlQWNjZXNzb3IsIE5HX1ZBTFVFX0FDQ0VTU09SLCBOR19WQUxJREFUT1JTIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduZ3gtc3Rhci1yYXRpbmcnLFxyXG4gIHRlbXBsYXRlVXJsOiAnbmd4LXN0YXItcmF0aW5nLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnbmd4LXN0YXItcmF0aW5nLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgcHJvdmlkZXJzOiBbXHJcbiAgICB7XHJcbiAgICAgIHByb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLFxyXG4gICAgICB1c2VFeGlzdGluZzogZm9yd2FyZFJlZigoKSA9PiBOZ3hTdGFyUmF0aW5nQ29tcG9uZW50KSxcclxuICAgICAgbXVsdGk6IHRydWUsXHJcbiAgICB9XHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmd4U3RhclJhdGluZ0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQ29udHJvbFZhbHVlQWNjZXNzb3Ige1xyXG4gIG9uQ2hhbmdlO1xyXG4gIHZhbHVlO1xyXG4gIHN0YXJzID0gWzUsIDQsIDMsIDIsIDFdO1xyXG5cclxuICBASW5wdXQoKSBpZDogc3RyaW5nO1xyXG4gIEBJbnB1dCgpIGRpc2FibGVkOiBib29sZWFuO1xyXG4gIEBWaWV3Q2hpbGRyZW4oJ25neENoZWNrYm94Jykgbmd4Q2hlY2tib3g6IFF1ZXJ5TGlzdDxFbGVtZW50UmVmPjtcclxuXHJcbiAgY29uc3RydWN0b3IoKSB7XHJcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcclxuICAgICAgdGhpcy5kaXNhYmxlZCA9IGZhbHNlO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7IH1cclxuXHJcbiAgcmF0ZShyYXRlKSB7XHJcbiAgICBpZiAoIXRoaXMuZGlzYWJsZWQpIHtcclxuICAgICAgdGhpcy5wcm9wYWdhdGVDaGFuZ2UocmF0ZSk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICB3cml0ZVZhbHVlKHZhbHVlKSB7XHJcbiAgICBpZiAodGhpcy5uZ3hDaGVja2JveCAmJiB2YWx1ZSA9PT0gbnVsbCkge1xyXG4gICAgICB0aGlzLm5neENoZWNrYm94LmZvckVhY2goKGNoZWNrYm94OiBFbGVtZW50UmVmKSA9PiB7XHJcbiAgICAgICAgY2hlY2tib3gubmF0aXZlRWxlbWVudC5jaGVja2VkID0gZmFsc2U7XHJcbiAgICAgIH0pO1xyXG4gICAgfVxyXG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xyXG4gIH1cclxuXHJcbiAgcmVnaXN0ZXJPbkNoYW5nZShmbikge1xyXG4gICAgdGhpcy5wcm9wYWdhdGVDaGFuZ2UgPSBmbjtcclxuICB9XHJcblxyXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuKSB7IH1cclxuXHJcbiAgcHJpdmF0ZSBwcm9wYWdhdGVDaGFuZ2UgPSAoXzogYW55KSA9PiB7IH07XHJcbn1cclxuIiwiPGZvcm0gYWN0aW9uPVwiXCI+XHJcbiAgPG5nLXRlbXBsYXRlIG5nRm9yIGxldC1zdGFyIFtuZ0Zvck9mXT1cInN0YXJzXCIgbGV0LWk9XCJpbmRleFwiPlxyXG4gICAgPGlucHV0ICNuZ3hDaGVja2JveCBjbGFzcz1cInN0YXIgc3Rhci17eyBzdGFyIH19XCIgaWQ9XCJzdGFyLXt7IHN0YXIgfX0te3sgaWQgfX1cIiB0eXBlPVwicmFkaW9cIiBuYW1lPVwic3RhclwiIChjbGljayk9XCJyYXRlKHN0YXIpXCJcclxuICAgICAgW2NoZWNrZWRdPVwidmFsdWUgPT0gc3RhclwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIC8+XHJcbiAgICA8bGFiZWwgY2xhc3M9XCJzdGFyIHN0YXIte3sgc3RhciB9fVwiIGZvcj1cInN0YXIte3sgc3RhciB9fS17eyBpZCB9fVwiPjwvbGFiZWw+XHJcbiAgPC9uZy10ZW1wbGF0ZT5cclxuPC9mb3JtPlxyXG4iXX0=