@sreyaj/ng-star-rating/bundles/sreyaj-ng-star-rating.umd.js

A Simple and Customizable SVG based Star Rating Component For Angular

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('@sreyaj/ng-star-rating', ['exports', '@angular/core', '@angular/common'], factory) :
    (global = global || self, factory((global.sreyaj = global.sreyaj || {}, global.sreyaj['ng-star-rating'] = {}), global.ng.core, global.ng.common));
}(this, function (exports, core, common) { 'use strict';

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var StarRatingComponent = /** @class */ (function () {
        function StarRatingComponent() {
            this.total = 5;
            this.rating = 0;
            this.readonly = false;
            this.size = '24px';
            this.type = 'hollow';
            this.filledColor = '#3db700';
            this.emptyColor = '#e0e0e0';
            this.rated = new core.EventEmitter();
            this.ratings = [];
        }
        /**
         * @return {?}
         */
        StarRatingComponent.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            for (var i = 1; i <= this.total; i++) {
                this.ratings.push(i);
            }
        };
        /**
         * @param {?} index
         * @return {?}
         */
        StarRatingComponent.prototype.getRatingColor = /**
         * @param {?} index
         * @return {?}
         */
        function (index) {
            return this.rating >= index || this.rating >= index - 0.5
                ? this.filledColor
                : this.emptyColor;
        };
        /**
         * @param {?} index
         * @return {?}
         */
        StarRatingComponent.prototype.getIcon = /**
         * @param {?} index
         * @return {?}
         */
        function (index) {
            if (this.rating >= index) {
                return 'star';
            }
            else {
                if (this.rating >= index - 0.5) {
                    return 'star_half';
                }
                else {
                    return this.type === 'hollow' ? 'star_border' : 'star';
                }
            }
        };
        /**
         * @param {?} index
         * @return {?}
         */
        StarRatingComponent.prototype.rate = /**
         * @param {?} index
         * @return {?}
         */
        function (index) {
            if (!this.readonly) {
                this.rating = index;
                this.rated.emit(index);
            }
        };
        StarRatingComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'ngx-star-rating',
                        template: "<div>\r\n  <span *ngFor=\"let item of ratings\" (click)=\"rate(item)\" [ngClass]=\"{'hover': !readonly}\">\r\n    <svg *ngIf=\"getIcon(item) === 'star'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\r\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n      <path [attr.fill]=\"getRatingColor(item)\"\r\n            d=\"M12 17.3l6.2 3.7-1.7-7L22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7z\" />\r\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n    </svg>\r\n    <svg *ngIf=\"getIcon(item) === 'star_border'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\">\r\n      <path [attr.fill]=\"getRatingColor(item)\"\r\n            d=\"M22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7 6.2-3.7 6.2 3.7-1.6-7L22 9.2zm-10 6.2l-3.8 2.3 1-4.3L6 10.5l4.4-.4 1.7-4 1.7 4 4.4.4-3.3 2.9 1 4.3-3.8-2.3z\" />\r\n      <path d=\"M0 0h24v24H0z\" fill=\"none\" />\r\n    </svg>\r\n    <svg *ngIf=\"getIcon(item) === 'star_half'\" xmlns=\"http://www.w3.org/2000/svg\"\r\n         xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"24\" height=\"24\">\r\n      <defs>\r\n        <path id=\"a\" d=\"M0 0h24v24H0V0z\" />\r\n      </defs>\r\n      <clipPath id=\"b\">\r\n        <use xlink:href=\"#a\" overflow=\"visible\" />\r\n      </clipPath>\r\n      <path [attr.fill]=\"getRatingColor(item)\" clip-path=\"url(#b)\"\r\n            d=\"M22 9.2l-7.2-.6L12 2 9.2 8.6 2 9.2 7.5 14l-1.7 7 6.2-3.7 6.2 3.7-1.6-7L22 9.2zm-10 6.2V6.1l1.7 4 4.4.4-3.3 2.9 1 4.3-3.8-2.3z\" />\r\n    </svg>\r\n  </span>\r\n</div>\r\n",
                        styles: [".hover{cursor:pointer}"]
                    }] }
        ];
        /** @nocollapse */
        StarRatingComponent.ctorParameters = function () { return []; };
        StarRatingComponent.propDecorators = {
            total: [{ type: core.Input }],
            rating: [{ type: core.Input }],
            readonly: [{ type: core.Input }],
            size: [{ type: core.Input }],
            type: [{ type: core.Input }],
            filledColor: [{ type: core.Input }],
            emptyColor: [{ type: core.Input }],
            rated: [{ type: core.Output }]
        };
        return StarRatingComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var StarRatingModule = /** @class */ (function () {
        function StarRatingModule() {
        }
        StarRatingModule.decorators = [
            { type: core.NgModule, args: [{
                        declarations: [StarRatingComponent],
                        imports: [common.CommonModule],
                        exports: [StarRatingComponent]
                    },] }
        ];
        return StarRatingModule;
    }());

    exports.StarRatingComponent = StarRatingComponent;
    exports.StarRatingModule = StarRatingModule;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=sreyaj-ng-star-rating.umd.js.map