ang-rating
Version:
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.3.18.
251 lines (245 loc) • 9.75 kB
JavaScript
import { forwardRef, EventEmitter, Component, Renderer2, ElementRef, Input, Output, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { MatSelectModule } from '@angular/material/select';
import { MatCardModule } from '@angular/material/card';
/**
* @fileoverview added by tsickle
* Generated from: lib/ang-rating.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const customValueProvider = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => AngRatingComponent)),
multi: true
};
class AngRatingComponent {
/**
* @param {?} _renderer
* @param {?} _elementRef
*/
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this._value = '';
this.propagateChange = (/**
* @return {?}
*/
() => { });
this.max = 25;
this.min = 5;
this.step = 5;
this.icon = 'star';
this.type = 'icon';
this.color = ['green'];
this.input = false;
this.rateChange = new EventEmitter(true);
this.items = [];
}
;
/**
* @return {?}
*/
ngOnInit() {
this.type = !this.type ? 'icon' : this.type;
this.max = !this.max ? 25 : this.max;
this.min = !this.min ? 5 : this.min;
this.step = !this.step ? 5 : this.step;
this.icon = !this.icon ? 'star' : this.icon;
this.color = !this.color || !this.color.length ? ['green'] : this.color;
this.createRating();
}
/**
* @param {?} value
* @return {?}
*/
writeValue(value) {
if (value != undefined) {
this._value = value;
this.indxValue = this.items.indexOf(value);
/** @type {?} */
let indx = this.items.indexOf(value);
/** @type {?} */
let percentage = ((indx + 1) / this.items.length) * 100;
/** @type {?} */
let minRateColor = 100 / this.color.length;
/** @type {?} */
let rateArray = [];
for (let i = minRateColor; i < 101; i += minRateColor) {
rateArray.push(i);
}
for (let i = 0; i < this.color.length; i++) {
if (rateArray[0] >= percentage) {
this.rateColor = this.color[0];
}
if (rateArray[i] < percentage && percentage <= rateArray[i + 1]) {
this.rateColor = this.color[i + 1];
}
}
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.propagateChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) { }
/**
* @return {?}
*/
createRating() {
if (this.min < this.max) {
for (let i = this.min; i <= this.max; i += this.step) {
this.items.push(i);
}
}
else {
for (let i = this.min; i >= this.max; i -= this.step) {
this.items.push(i);
}
}
}
/**
* @param {?} event
* @param {?} id
* @return {?}
*/
update(event, id) {
this._value = id;
this.rateChange.emit(id);
}
}
AngRatingComponent.decorators = [
{ type: Component, args: [{
selector: 'ang-rating',
template: "<mat-card>\r\n <mat-card-content>\r\n <mat-card-title>{{type }}</mat-card-title>\r\n <div *ngIf=\"type == 'dropdown'\" class=\"dropdown-block\">\r\n <mat-select placeholder=\"Select rating\" [(ngModel)]=\"_value\" (ngModelChange)=\"update($event,_value)\" [ngClass]=\"{'disabled': !input}\">\r\n <mat-option *ngFor=\"let item of items\" [value]=\"item\">\r\n {{item}} {{title}}\r\n </mat-option>\r\n </mat-select>\r\n </div>\r\n <div *ngIf=\"type == 'number'\" class=\"number-block\">\r\n <ul class=\"rating-list\">\r\n <li *ngFor=\"let item of items; let i = index\" (click)=\"update($event,item)\" [ngClass]=\"{'disabled': !input}\">\r\n <span class=\"rating-icon\" [style.background-color]=\"indxValue >= i ? rateColor : ''\">\r\n <!-- <div class=\"rating-number\">{{item | positivenumber}}</div> -->\r\n <div class=\"rating-number\">{{item}}</div>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n <div *ngIf=\"type != 'number' && type != 'dropdown'\" class=\"icon-block\">\r\n <ul class=\"rating-list\">\r\n <li *ngFor=\"let item of items; let i = index\" (click)=\"update($event,item)\" [ngClass]=\"{'disabled': !input}\">\r\n <span class=\"rating-icon\" [style.color]=\"indxValue >= i ? rateColor : ''\">\r\n <i class=\"material-icons\">{{type}}</i>\r\n </span>\r\n </li>\r\n </ul>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>",
providers: [customValueProvider],
styles: [".number-block ul.rating-list li{list-style-type:none;display:inline-block}.number-block ul.rating-list li .rating-icon{width:33px;display:inline-block;border:1px solid #ccc;border-radius:50%;height:33px;margin-right:10px;cursor:pointer;background-color:#ccc;color:#fff}.number-block ul.rating-list li .rating-icon .rating-number{margin:4px auto 0;display:table}.icon-block ul.rating-list li{list-style-type:none;display:inline-block}.icon-block ul.rating-list li .rating-icon{height:33px;margin-right:10px;color:gray;cursor:pointer}.icon-block ul.rating-list li .rating-icon .rating-number{margin:4px auto 0;display:table}.disabled{pointer-events:none;opacity:.6}"]
}] }
];
/** @nocollapse */
AngRatingComponent.ctorParameters = () => [
{ type: Renderer2 },
{ type: ElementRef }
];
AngRatingComponent.propDecorators = {
ratingObject: [{ type: Input }],
max: [{ type: Input }],
min: [{ type: Input }],
step: [{ type: Input }],
icon: [{ type: Input }],
type: [{ type: Input }],
title: [{ type: Input }],
color: [{ type: Input }],
input: [{ type: Input }],
rateChange: [{ type: Output }]
};
if (false) {
/** @type {?} */
AngRatingComponent.prototype.indxValue;
/** @type {?} */
AngRatingComponent.prototype._value;
/** @type {?} */
AngRatingComponent.prototype.propagateChange;
/** @type {?} */
AngRatingComponent.prototype.ratingObject;
/** @type {?} */
AngRatingComponent.prototype.max;
/** @type {?} */
AngRatingComponent.prototype.min;
/** @type {?} */
AngRatingComponent.prototype.step;
/** @type {?} */
AngRatingComponent.prototype.icon;
/** @type {?} */
AngRatingComponent.prototype.type;
/** @type {?} */
AngRatingComponent.prototype.title;
/** @type {?} */
AngRatingComponent.prototype.color;
/** @type {?} */
AngRatingComponent.prototype.input;
/** @type {?} */
AngRatingComponent.prototype.rateChange;
/** @type {?} */
AngRatingComponent.prototype.items;
/** @type {?} */
AngRatingComponent.prototype.rateColor;
/**
* @type {?}
* @private
*/
AngRatingComponent.prototype._renderer;
/**
* @type {?}
* @private
*/
AngRatingComponent.prototype._elementRef;
/* Skipping unhandled member: ;*/
}
/**
* @record
*/
function RatingFieldConfig() { }
if (false) {
/** @type {?|undefined} */
RatingFieldConfig.prototype.type;
/** @type {?} */
RatingFieldConfig.prototype.value;
/** @type {?|undefined} */
RatingFieldConfig.prototype.min;
/** @type {?|undefined} */
RatingFieldConfig.prototype.max;
/** @type {?|undefined} */
RatingFieldConfig.prototype.steps;
/** @type {?|undefined} */
RatingFieldConfig.prototype.title;
/** @type {?|undefined} */
RatingFieldConfig.prototype.icon;
/** @type {?|undefined} */
RatingFieldConfig.prototype.input;
/** @type {?|undefined} */
RatingFieldConfig.prototype.color;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ang-rating.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class AngRatingModule {
}
AngRatingModule.decorators = [
{ type: NgModule, args: [{
declarations: [AngRatingComponent],
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatSelectModule,
MatCardModule,
],
exports: [AngRatingComponent]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ang-rating.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { AngRatingComponent, AngRatingModule };
//# sourceMappingURL=ang-rating.js.map