@aesys/ngx-rating
Version:
Angular Library for creating RATING elements.
292 lines (280 loc) • 24.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/forms'), require('rxjs'), require('/common'), require('ng2-tooltip-directive')) :
typeof define === 'function' && define.amd ? define('/ngx-rating', ['exports', '@angular/core', '@angular/forms', 'rxjs', '@angular/common', 'ng2-tooltip-directive'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.aesys = global.aesys || {}, global.aesys["ngx-rating"] = {}), global.ng.core, global.ng.forms, global.rxjs, global.ng.common, global.i2));
})(this, (function (exports, i0, forms, rxjs, i1, i2) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
var NgxRatingService = /** @class */ (function () {
function NgxRatingService() {
}
return NgxRatingService;
}());
NgxRatingService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
NgxRatingService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingService, providedIn: 'root' });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingService, decorators: [{
type: i0.Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return []; } });
function getColorScale(items) {
if (!checkIntegrity(items)) {
console.error("ALL RGB VALUES MUST BE BETWEEN 0 AND 255");
return items.map(function (item) {
return Object.assign(Object.assign({}, item), { color: getColor(255, 0, 0) });
});
}
if (!items[0].color) {
console.error("SET FIRST ITEM'S COLOR FIELD");
var toReturn = items;
toReturn[0].color = getColor(255, 0, 0);
}
if (items[0].color && !items[items.length - 1].color) {
var color_1 = items[0].color;
return items.map(function (item) { return Object.assign(Object.assign({}, item), { color: color_1 }); });
}
else {
var toReturn = [items[0]];
while (toReturn.length !== items.length) {
var toCalculate = [];
var first = toReturn[toReturn.length - 1].color || {};
for (var i = toReturn.length; !items[i].color && i < items.length; i++) {
toCalculate.push(items[i]);
}
var last = items[toReturn.length + toCalculate.length].color || {};
toReturn = toReturn.concat(calculateColors(first, last, toCalculate));
toReturn.push(items[toReturn.length]);
}
return toReturn;
}
}
function getColor(red, green, blue) {
return {
red: red,
green: green,
blue: blue
};
}
function calculateColors(first, last, items) {
var difference = getColor(last.red - first.red, last.green - first.green, last.blue - first.blue);
return items.map(function (item, idx) {
return Object.assign(Object.assign({}, item), { color: getColor(first.red + ((difference.red / (items.length + 1)) * (idx + 1)), first.green + ((difference.green / (items.length + 1)) * (idx + 1)), first.blue + ((difference.blue / (items.length + 1)) * (idx + 1))) });
});
}
function toColorString(color) {
return "rgb(" + color.red + "," + color.green + "," + color.blue + ")";
}
function checkIntegrity(items) {
var integrity = true;
items.forEach(function (item) {
if (item.color) {
if (!checkItem(item.color)) {
integrity = false;
}
}
});
return integrity;
}
function checkItem(color) {
if (color.red < 0 || color.red > 255) {
return false;
}
if (color.green < 0 || color.green > 255) {
return false;
}
if (color.blue < 0 || color.blue > 255) {
return false;
}
return true;
}
var NgxRatingComponent = /** @class */ (function () {
function NgxRatingComponent() {
this.items = [];
this.theme = 'squares';
this.styles = [];
this.showTitle = false;
this.tooltip = false;
this.tooltipSettings = {};
this.titlePosition = 'top';
this.details = {};
this.style = [];
this.margin = 10;
this.autoMargin = false;
this.disabled = false;
this.showDescriptionBS = new rxjs.BehaviorSubject('-');
this.showDescription$ = this.showDescriptionBS.asObservable();
this.actualDescription = '-';
this.showSelection = -1;
this.actualSelection = -1;
this.color = [];
this.onChange = function (item) { };
this.onTouch = function (item) { };
}
NgxRatingComponent.prototype.ngOnInit = function () {
this.items = this.settings.items || [];
this.items = getColorScale(this.items);
this.color = this.items.map(function (item) { return toColorString(item.color || {}); });
this.theme = this.settings.theme || 'squares';
if ('images' in this.settings) {
this.images = this.settings.images;
}
this.showTitle = this.settings.showTitle;
if (this.settings.tooltip) {
this.tooltip = this.settings.tooltip;
this.tooltipSettings = {
'placement': this.titlePosition,
'delay': 200,
'theme': 'light'
};
}
else {
this.tooltip = false;
}
this.titlePosition = this.settings.titlePosition || 'top';
this.details = this.settings.itemDetail;
this.marginDetect();
};
NgxRatingComponent.prototype.writeValue = function (item) {
if (Object.keys(item).length !== 0) {
this.actualDescription = item.description;
this.showDescriptionBS.next(item.description);
this.actualSelection = this.items.indexOf(this.items.find(function (el) { return item.id === el.id; }) || {});
this.showSelection = this.actualSelection;
}
else {
this.actualDescription = '-';
this.showDescriptionBS.next('-');
}
};
NgxRatingComponent.prototype.registerOnChange = function (fn) {
this.onChange = fn;
};
NgxRatingComponent.prototype.registerOnTouched = function (fn) {
this.onTouch = fn;
};
NgxRatingComponent.prototype.setDisabledState = function (isDisabled) {
this.disabled = isDisabled;
};
NgxRatingComponent.prototype.mouseOver = function (selectedIdx, item) {
if (!this.disabled) {
this.showDescriptionBS.next(item.description);
this.showSelection = selectedIdx;
}
};
NgxRatingComponent.prototype.mouseLeave = function () {
this.showSelection = this.actualSelection;
this.showDescriptionBS.next(this.actualDescription);
};
NgxRatingComponent.prototype.getScaleItemChange = function (indexSelected, item) {
if (this.actualSelection !== indexSelected && !this.disabled) {
this.actualSelection = indexSelected;
this.showSelection = indexSelected;
this.actualDescription = item.description;
this.showDescriptionBS.next(item.description);
this.onChange(item);
}
};
NgxRatingComponent.prototype.marginDetect = function () {
if (this.settings.itemMargin) {
if (this.settings.itemMargin === 'auto') {
this.autoMargin = true;
}
else {
var parsed = Number.parseInt(this.settings.itemMargin);
if (!Number.isNaN(parsed)) {
this.margin = parsed;
this.autoMargin = false;
}
}
}
};
return NgxRatingComponent;
}());
NgxRatingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
NgxRatingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: NgxRatingComponent, selector: "ngx-rating", inputs: { settings: "settings" }, providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
multi: true,
useExisting: NgxRatingComponent
}
], ngImport: i0__namespace, template: "<div class=\"rating-container\"\n [ngStyle]=\"{'flex-direction': (titlePosition === 'top') ? 'column' : (titlePosition === 'left') ? 'row' : (titlePosition === 'right') ? 'row-reverse' : 'column-reverse'}\"\n>\n <div\n class=\"title\"\n *ngIf=\"showTitle && !tooltip\"\n [ngStyle]=\"{\n 'margin': titlePosition === 'top' ? '0 0 20px 0' :\n titlePosition === 'bottom' ? '20px 0 0 0' :\n titlePosition === 'left' ? '0 20px 0 0' :\n titlePosition === 'right' ? '0 0 0 20px' : ''\n }\"\n >\n {{showDescription$ | async}}\n </div>\n <div class=\"container-scale\" *ngIf=\"settings\"\n [ngStyle]=\"{\n 'justify-content': autoMargin ? 'space-between' : 'center'\n }\">\n <ng-container *ngFor=\"let item of items; let idx = index\">\n <div *ngIf=\"(tooltip && (!disabled || (disabled && actualSelection === idx))); else noTooltip\" tooltip={{item.description}} [options]=\"tooltipSettings\" >\n <div [ngSwitch]=\"theme\">\n <div\n *ngSwitchCase=\"'squares'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey'\n }\"\n >\n </div>\n <div\n *ngSwitchCase=\"'rounded_squares'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey',\n 'border-radius': idx === 0 ? '8px 0 0 8px' : idx === items.length-1 ? '0 8px 8px 0' : ''\n }\"\n >\n </div>\n\n <div\n *ngSwitchCase=\"'single_icon'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n >\n <div\n *ngIf=\"images\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.mask.url]=\"images[0]\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[0]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey'\n }\"\n >\n </div>\n </div>\n\n <div\n *ngSwitchCase=\"'multiple_icons'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n >\n <div\n *ngIf=\"images\"\n >\n <div *ngIf=\"idx <= showSelection; else falseItems\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.backgroundColor]=\"color[idx]\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask: url({{images[0]}});\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[0]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px;\"\n >\n </div>\n <ng-template #falseItems>\n <div\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.backgroundColor]=\"'grey'\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask: url({{images[1]}});\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[1]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px;\"\n >\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </div>\n <ng-template #noTooltip>\n <div [ngSwitch]=\"theme\">\n <div\n *ngSwitchCase=\"'squares'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey'\n }\"\n >\n </div>\n <div\n *ngSwitchCase=\"'rounded_squares'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey',\n 'border-radius': idx === 0 ? '8px 0 0 8px' : idx === items.length-1 ? '0 8px 8px 0' : ''\n }\"\n >\n </div>\n\n <div\n *ngSwitchCase=\"'single_icon'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n >\n <div\n *ngIf=\"images\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.mask.url]=\"images[0]\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[0]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px\"\n [ngStyle]=\"{\n 'background-color': (idx <= showSelection) ? color[idx] : 'grey'\n }\"\n >\n </div>\n </div>\n\n <div\n *ngSwitchCase=\"'multiple_icons'\"\n (mouseover)=\"mouseOver(idx, item)\"\n (mouseleave)=\"mouseLeave()\"\n (click)=\"getScaleItemChange(idx, item)\"\n >\n <div\n *ngIf=\"images\"\n >\n <div *ngIf=\"idx <= showSelection; else falseItems\"\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.backgroundColor]=\"color[idx]\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask: url({{images[0]}});\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[0]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px;\"\n >\n </div>\n <ng-template #falseItems>\n <div\n [style.width.px]=\"details.width\"\n [style.height.px]=\"details.height\"\n [style.backgroundColor]=\"'grey'\"\n [style.marginRight.px]=\"!autoMargin ? margin : ''\"\n style=\"\n mask: url({{images[1]}});\n mask-size: {{details.width}}px {{details.height}}px;\n -webkit-mask: url({{images[1]}}) no-repeat center;\n -webkit-mask-size: {{details.width}}px {{details.height}}px;\"\n >\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </ng-template>\n\n </ng-container>\n </div>\n</div>\n", styles: ["\n .rating-container {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .title {\n text-transform: lowercase;\n }\n\n .container-scale {\n display: flex;\n align-items: center;\n width: 100%;\n }\n "], directives: [{ type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.TooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }, { type: i1__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i1__namespace.AsyncPipe } });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingComponent, decorators: [{
type: i0.Component,
args: [{
selector: 'ngx-rating',
templateUrl: './ngx-rating.component.html',
styles: [
"\n .rating-container {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .title {\n text-transform: lowercase;\n }\n\n .container-scale {\n display: flex;\n align-items: center;\n width: 100%;\n }\n "
],
providers: [
{
provide: forms.NG_VALUE_ACCESSOR,
multi: true,
useExisting: NgxRatingComponent
}
]
}]
}], ctorParameters: function () { return []; }, propDecorators: { settings: [{
type: i0.Input
}] } });
var NgxRatingModule = /** @class */ (function () {
function NgxRatingModule() {
}
return NgxRatingModule;
}());
NgxRatingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NgxRatingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingModule, declarations: [NgxRatingComponent], imports: [i1.CommonModule,
//BrowserModule,
i2.TooltipModule], exports: [NgxRatingComponent] });
NgxRatingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingModule, imports: [[
i1.CommonModule,
//BrowserModule,
i2.TooltipModule
]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0__namespace, type: NgxRatingModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
NgxRatingComponent
],
imports: [
i1.CommonModule,
//BrowserModule,
i2.TooltipModule
],
exports: [
NgxRatingComponent
]
}]
}] });
/*
* Public API Surface of ngx-rating
*/
/**
* Generated bundle index. Do not edit.
*/
exports.NgxRatingComponent = NgxRatingComponent;
exports.NgxRatingModule = NgxRatingModule;
exports.NgxRatingService = NgxRatingService;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=aesys-ngx-rating.umd.js.map