ngx-material-rating/fesm2015/ngx-material-rating.js

A Material Design rating component

import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
import { forwardRef, EventEmitter, Component, ChangeDetectorRef, Input, Output, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { NgxRangeModule } from 'ngx-range';

const NGX_MATERIAL_RATING_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => NgxMaterialRatingComponent),
    multi: true,
};
class NgxMaterialRatingComponent {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this.color = undefined;
        this._max = 5;
        this._value = null;
        this._roundToDecimal = 1;
        this._disabled = false;
        this._dense = false;
        this._readonly = false;
        this.change = new EventEmitter();
        this.valueChange = new EventEmitter();
        this.onTouched = () => { };
        this._cvaChangeFn = () => { };
    }
    get max() {
        return this._max;
    }
    set max(v) {
        this._max = coerceNumberProperty(v, this._max);
        this._changeDetectorRef.markForCheck();
    }
    get value() {
        if (this._value === null) {
            this.value = 0;
        }
        return this._value;
    }
    set value(v) {
        if (v !== this._value) {
            let value = coerceNumberProperty(v);
            if (this._roundToDecimal && value !== 0 && value !== this.max) {
                value = parseFloat(value.toFixed(this._roundToDecimal));
            }
            this._value = value;
            this._changeDetectorRef.markForCheck();
        }
    }
    get disabled() {
        return this._disabled;
    }
    set disabled(value) {
        this._disabled = coerceBooleanProperty(value);
    }
    get dense() {
        return this._dense;
    }
    set dense(value) {
        this._dense = coerceBooleanProperty(value);
    }
    get readonly() {
        return this._readonly;
    }
    set readonly(value) {
        this._readonly = coerceBooleanProperty(value);
    }
    writeValue(value) {
        this.value = value;
    }
    registerOnChange(fn) {
        this._cvaChangeFn = fn;
    }
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
    }
    onClick(index) {
        if (this.disabled || this.readonly) {
            return;
        }
        const newValue = index + 1;
        this.value = this.value === newValue ? index : newValue;
        this._emitChangeEvent();
    }
    getStar(index) {
        const value = this.value || 0;
        if (index < value) {
            return 'star';
        }
        return 'star_border';
    }
    _emitChangeEvent() {
        this._cvaChangeFn(this.value);
        this.valueChange.emit(this.value);
        this.change.emit({ source: this, value: this.value });
    }
}
NgxMaterialRatingComponent.decorators = [
    { type: Component, args: [{
                selector: 'ngx-material-rating',
                exportAs: 'ngxMaterialRating',
                providers: [NGX_MATERIAL_RATING_VALUE_ACCESSOR],
                template: "<ng-container *ngxRange=\"let index from 0 to max\">\r\n  <button mat-icon-button [class.dense]=\"dense\" [class.readonly]=\"readonly\" [color]=\" color\" [disabled]=\"disabled\"\r\n    [disableRipple]=\"readonly\" (click)=\"onClick(index)\">\r\n    <mat-icon>{{getStar(index)}}</mat-icon>\r\n  </button>\r\n</ng-container>\r\n",
                styles: [".dense.mat-icon-button{height:1.5rem;line-height:1.5rem;width:1.5rem}.readonly.mat-icon-button{cursor:default}"]
            },] }
];
NgxMaterialRatingComponent.ctorParameters = () => [
    { type: ChangeDetectorRef }
];
NgxMaterialRatingComponent.propDecorators = {
    color: [{ type: Input }],
    max: [{ type: Input }],
    value: [{ type: Input }],
    disabled: [{ type: Input }],
    dense: [{ type: Input }],
    readonly: [{ type: Input }],
    change: [{ type: Output }]
};

class NgxMaterialRatingModule {
}
NgxMaterialRatingModule.decorators = [
    { type: NgModule, args: [{
                declarations: [NgxMaterialRatingComponent],
                imports: [MatButtonModule, MatIconModule, NgxRangeModule],
                exports: [NgxMaterialRatingComponent],
            },] }
];

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

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

export { NGX_MATERIAL_RATING_VALUE_ACCESSOR, NgxMaterialRatingComponent, NgxMaterialRatingModule };
//# sourceMappingURL=ngx-material-rating.js.map