@aesys/ngx-rating/fesm2015/aesys-ngx-rating.js

Angular Library for creating RATING elements.

import * as i0 from '@angular/core';
import { Injectable, Component, Input, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { BehaviorSubject } from 'rxjs';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from 'ng2-tooltip-directive';
import { TooltipModule } from 'ng2-tooltip-directive';

class NgxRatingService {
    constructor() { }
}
NgxRatingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
NgxRatingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingService, providedIn: 'root' });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingService, decorators: [{
            type: 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(item => {
            return Object.assign(Object.assign({}, item), { color: getColor(255, 0, 0) });
        });
    }
    if (!items[0].color) {
        console.error("SET FIRST ITEM'S COLOR FIELD");
        let toReturn = items;
        toReturn[0].color = getColor(255, 0, 0);
    }
    if (items[0].color && !items[items.length - 1].color) {
        const color = items[0].color;
        return items.map(item => { return Object.assign(Object.assign({}, item), { color: color }); });
    }
    else {
        let toReturn = [items[0]];
        while (toReturn.length !== items.length) {
            let toCalculate = [];
            let first = toReturn[toReturn.length - 1].color || {};
            for (let i = toReturn.length; !items[i].color && i < items.length; i++) {
                toCalculate.push(items[i]);
            }
            let 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) {
    const difference = getColor(last.red - first.red, last.green - first.green, last.blue - first.blue);
    return items.map((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) {
    let integrity = true;
    items.forEach(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;
}

class NgxRatingComponent {
    constructor() {
        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 BehaviorSubject('-');
        this.showDescription$ = this.showDescriptionBS.asObservable();
        this.actualDescription = '-';
        this.showSelection = -1;
        this.actualSelection = -1;
        this.color = [];
        this.onChange = (item) => { };
        this.onTouch = (item) => { };
    }
    ngOnInit() {
        this.items = this.settings.items || [];
        this.items = getColorScale(this.items);
        this.color = this.items.map(item => 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();
    }
    writeValue(item) {
        if (Object.keys(item).length !== 0) {
            this.actualDescription = item.description;
            this.showDescriptionBS.next(item.description);
            this.actualSelection = this.items.indexOf(this.items.find(el => item.id === el.id) || {});
            this.showSelection = this.actualSelection;
        }
        else {
            this.actualDescription = '-';
            this.showDescriptionBS.next('-');
        }
    }
    registerOnChange(fn) {
        this.onChange = fn;
    }
    registerOnTouched(fn) {
        this.onTouch = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    mouseOver(selectedIdx, item) {
        if (!this.disabled) {
            this.showDescriptionBS.next(item.description);
            this.showSelection = selectedIdx;
        }
    }
    mouseLeave() {
        this.showSelection = this.actualSelection;
        this.showDescriptionBS.next(this.actualDescription);
    }
    getScaleItemChange(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);
        }
    }
    marginDetect() {
        if (this.settings.itemMargin) {
            if (this.settings.itemMargin === 'auto') {
                this.autoMargin = true;
            }
            else {
                const parsed = Number.parseInt(this.settings.itemMargin);
                if (!Number.isNaN(parsed)) {
                    this.margin = parsed;
                    this.autoMargin = false;
                }
            }
        }
    }
}
NgxRatingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxRatingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.0.5", type: NgxRatingComponent, selector: "ngx-rating", inputs: { settings: "settings" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: NgxRatingComponent
        }
    ], ngImport: i0, 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.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i1.AsyncPipe } });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingComponent, decorators: [{
            type: Component,
            args: [{
                    selector: 'ngx-rating',
                    templateUrl: './ngx-rating.component.html',
                    styles: [
                        `
    .rating-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .title {
      text-transform: lowercase;
    }

    .container-scale {
      display: flex;
      align-items: center;
      width: 100%;
    }
    `
                    ],
                    providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: NgxRatingComponent
                        }
                    ]
                }]
        }], ctorParameters: function () { return []; }, propDecorators: { settings: [{
                type: Input
            }] } });

class NgxRatingModule {
}
NgxRatingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgxRatingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingModule, declarations: [NgxRatingComponent], imports: [CommonModule,
        //BrowserModule,
        TooltipModule], exports: [NgxRatingComponent] });
NgxRatingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingModule, imports: [[
            CommonModule,
            //BrowserModule,
            TooltipModule
        ]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.0.5", ngImport: i0, type: NgxRatingModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [
                        NgxRatingComponent
                    ],
                    imports: [
                        CommonModule,
                        //BrowserModule,
                        TooltipModule
                    ],
                    exports: [
                        NgxRatingComponent
                    ]
                }]
        }] });

/*
 * Public API Surface of ngx-rating
 */

/**
 * Generated bundle index. Do not edit.
 */

export { NgxRatingComponent, NgxRatingModule, NgxRatingService };
//# sourceMappingURL=aesys-ngx-rating.js.map