import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../../_services/rating.service";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/legacy-progress-bar";
import * as i4 from "@angular/material/icon";
import * as i5 from "@angular/material/legacy-tooltip";
import * as i6 from "@sunbird-cb/utils-v2";
import * as i7 from "@ngx-translate/core";
export class RatingSummaryComponent {
    constructor(ratingService) {
        this.ratingService = ratingService;
        this.ratingSummary = null;
    }
    ngOnInit() {
    }
    ngOnChanges() {
    }
    getRatingIcon(ratingIndex, avg) {
        return this.ratingService.getRatingIcon(ratingIndex, avg);
    }
    getRatingIconClass(ratingIndex, avg) {
        return this.ratingService.getRatingIconClass(ratingIndex, avg);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, deps: [{ token: i1.RatingService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RatingSummaryComponent, selector: "ws-widget-rating-summary", inputs: { ratingSummary: "ratingSummary" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"ratingSummary\">\n    <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-row gap-4 items-center\">\n            <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n            <div class=\"flex flex-col gap-1\">\n                <div class=\"flex flex-row gap-2\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n                    </mat-icon>\n                </div>\n                <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n                    {{'ratingsummary.ratings' | translate}}\n                </div>\n            </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n            <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n                <div class=\"flex flex-row gap-4 items-center\">\n                    <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n                    <div class=\"flex items-center rating-progress nodtranslate\">\n                        <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n                            [value]=\"rating?.percent\" class=\"rating-bar\"\n                            [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n                            [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n                            [color]=\"ratingColor\"\n                            i18n-aria-label>\n                            {{rating?.percent}} %\n                        </mat-progress-bar>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatLegacyProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i6.PipeCountTransformPipe, name: "pipeCountTransform" }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RatingSummaryComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-rating-summary', template: "<ng-container *ngIf=\"ratingSummary\">\n    <div class=\"flex flex-col gap-6\">\n        <div class=\"flex flex-row gap-4 items-center\">\n            <div class=\"rating-value ws-mat-default-text nodtranslate\">{{ ratingSummary?.avgRating }}</div>\n            <div class=\"flex flex-col gap-1\">\n                <div class=\"flex flex-row gap-2\">\n                    <mat-icon class=\"mat-icon material-icons rating-icon ws-mat-black16-text nodtranslate\"\n                        [ngClass]=\"{'ws-mat-orange-text': getRatingIconClass(rating, ratingSummary?.avgRating)}\"\n                        *ngFor=\"let rating of [1, 2, 3, 4, 5]\">\n                        {{ getRatingIcon(rating, ratingSummary?.avgRating) }}\n                    </mat-icon>\n                </div>\n                <div class=\"text-base nodtranslate\">{{ ratingSummary?.total_number_of_ratings | pipeCountTransform }}\n                    {{'ratingsummary.ratings' | translate}}\n                </div>\n            </div>\n        </div>\n        <div class=\"flex flex-col gap-2\">\n            <ng-container *ngFor=\"let rating of ratingSummary?.breakDown?.slice().reverse()\">\n                <div class=\"flex flex-row gap-4 items-center\">\n                    <div class=\"flex-none font-bold nodtranslate\">{{ rating.key }} {{ 'ratingsummary.star' | translate }}</div>\n                    <div class=\"flex items-center rating-progress nodtranslate\">\n                        <mat-progress-bar [mode]=\"'determinate'\" [matTooltip]=\"rating?.percent + ' %'\"\n                            [value]=\"rating?.percent\" class=\"rating-bar\"\n                            [attr.aria-labelledby]=\"'m-c-'+ contentId\"\n                            [ngClass]=\"{ 'visibility-0': rating === undefined, 'thick': className}\"\n                            [color]=\"ratingColor\"\n                            i18n-aria-label>\n                            {{rating?.percent}} %\n                        </mat-progress-bar>\n                    </div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>\n", styles: [".rating-value{font-size:54px;line-height:56px;font-weight:700}.rating-icon{transform:scale(1.2)}.rating-progress{width:100%;max-width:300px;border-radius:4px}.rating-bar.mat-progress-bar{height:8px;border-radius:12px;background-color:#00000014}.ratingColor{background-color:#00000014}.rating-bar .mat-progress-bar-fill:after{background:red}::ng-deep .theme-igot.day-mode .rating-bar .mat-progress-bar-fill:after{background:#ff9800;border-radius:12px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.RatingService }]; }, propDecorators: { ratingSummary: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 