import { Component, Input } from '@angular/core';
import { Subject, debounceTime, takeUntil } from "rxjs";
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "tango-app-ui-global";
import * as i3 from "tango-app-ui-shared";
import * as i4 from "../../../services/trax.service";
import * as i5 from "@angular/common";
import * as i6 from "@ng-bootstrap/ng-bootstrap";
;
export class MonthlyperformanceDatepickerComponent {
    route;
    router;
    gs;
    changeDetector;
    toast;
    TraxService;
    currentYear = new Date().getFullYear();
    currentMonth = new Date().getMonth();
    dayNames = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
    monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    headerData;
    performanceData = []; // This will store the performance data from the API response
    detach = new Subject();
    destroy$ = new Subject();
    receivedData = "Checklist";
    selectedvalue;
    monthlyPeformanceLoading = true;
    monthlyPeformanceNoData = false;
    monthlyperformce;
    monthlyToDate;
    userEmailes = [];
    constructor(route, router, gs, changeDetector, toast, TraxService) {
        this.route = route;
        this.router = router;
        this.gs = gs;
        this.changeDetector = changeDetector;
        this.toast = toast;
        this.TraxService = TraxService;
        this.userEmailes = JSON.parse(localStorage.getItem("usersEmail-info") || "[]");
    }
    ngOnDestroy() {
        this.detach.next(true);
        this.detach.complete();
    }
    ngOnChanges(changes) {
        if (this.headerData) {
            this.headerData;
            this.getMonthlyPeformanceData();
        }
    }
    ngOnInit() {
        this.route?.queryParams
            ?.pipe(takeUntil(this.detach))
            .subscribe((params) => {
            if (params.type === 'Checklist') {
                this.selectedvalue = params.checklist;
                this.receivedData = 'Checklist';
                // this.infoCardsData = params.checklistData ? JSON.parse(params.checklistData) : null;
            }
            else if (params.type === 'store') {
                this.selectedvalue = params.store_id;
                this.receivedData = 'Store';
            }
            else if (params.type === 'user') {
                this.selectedvalue = params.userEmail;
                this.receivedData = 'User';
            }
        });
        this.gs.dataRangeValue
            .pipe(takeUntil(this.destroy$), debounceTime(300))
            .subscribe((data) => {
            if (data) {
                this.headerData = data;
            }
        });
    }
    getMonthlyPeformanceData() {
        this.monthlyPeformanceLoading = true;
        this.monthlyPeformanceNoData = true;
        const requestData = {
            fromDate: this.headerData.date.startDate,
            toDate: this.headerData.date.endDate,
            storeId: this.headerData.stores.filter((store) => store.checked).map((store) => store.storeId),
            userEmailes: this.userEmailes,
            clientId: this.headerData.client,
            groupByType: this.receivedData,
            groupByValue: this.monthlyperformce,
            monthDate: this.monthlyToDate,
        };
        this.TraxService.getMonthlyPeformanceData(requestData).pipe(takeUntil(this.destroy$)).subscribe((response) => {
            if (response?.code === 200 && response?.status === "success") {
                this.performanceData = response.data?.monthlyChartData || [];
                this.monthlyPeformanceLoading = false;
                this.monthlyPeformanceNoData = false;
                this.changeDetector.detectChanges();
            }
            else {
                this.performanceData = [];
                this.monthlyPeformanceLoading = false;
                this.monthlyPeformanceNoData = true;
            }
        }, error => {
            this.performanceData = [];
            this.monthlyPeformanceLoading = false;
            this.monthlyPeformanceNoData = true;
            this.changeDetector.detectChanges();
        });
    }
    getDaysInMonth() {
        const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
        return Array.from({ length: daysInMonth }, (_, i) => i + 1);
    }
    getEmptyDays() {
        const firstDayOfMonth = new Date(this.currentYear, this.currentMonth, 1).getDay();
        return Array(firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1).fill(0);
    }
    getDayClass(day) {
        const predefinedDay = this.performanceData.find(d => d.date === day);
        return predefinedDay ? predefinedDay.colorClass : '';
    }
    previousMonth() {
        if (this.currentMonth === 0) {
            this.currentMonth = 11;
            this.currentYear--;
        }
        else {
            this.currentMonth--;
        }
        let formattedMonth = (this.currentMonth + 1).toString().padStart(2, '0');
        this.monthlyToDate = `${this.currentYear}-${formattedMonth}-25`;
        this.getMonthlyPeformanceData();
    }
    nextMonth() {
        if (this.currentMonth === 11) {
            this.currentMonth = 0;
            this.currentYear++;
        }
        else {
            this.currentMonth++;
        }
        let formattedMonth = (this.currentMonth + 1).toString().padStart(2, '0');
        this.monthlyToDate = `${this.currentYear}-${formattedMonth}-25`;
        this.getMonthlyPeformanceData();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthlyperformanceDatepickerComponent, deps: [{ token: i1.ActivatedRoute }, { token: i1.Router }, { token: i2.GlobalStateService }, { token: i0.ChangeDetectorRef }, { token: i3.ToastService }, { token: i4.TraxService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MonthlyperformanceDatepickerComponent, selector: "lib-monthlyperformance-datepicker", inputs: { monthlyperformce: "monthlyperformce" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"calendar-container p-5\">\r\n  <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n    [ngbTooltip]=\"tooltipContent\"\r\n    placement=\"bottom\"\r\n    triggers=\"mouseenter:mouseleave\"\r\n    tooltipClass=\"custom-tooltip\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n      <g clip-path=\"url(#clip0_3701_29180)\">\r\n      <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </g>\r\n      <defs>\r\n      <clipPath id=\"clip0_3701_29180\">\r\n      <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n      </clipPath>\r\n      </defs>\r\n      </svg>\r\n  </span>\r\n  \r\n  <ng-template #tooltipContent>\r\n    <div class=\"tooltip-container\">\r\n      <div class=\"performance-box\">\r\n        <div class=\"performance-item\">\r\n          <span class=\"number primary900\">1</span>\r\n          <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number blue33B5FF\">2</span>\r\n          <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number lightBlue6BCAFF\">3</span>\r\n          <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number orangeF79009\">4</span>\r\n          <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number redF04438\">5</span>\r\n          <span class=\"performancetext\">Overall performance below 40%</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  </div>\r\n \r\n  <div  class=\"calendar\">\r\n    <div class=\"calendar-header my-3\">\r\n      <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path d=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n      <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n      <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"calendar-body my-5\">\r\n      <!-- <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n        <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n        <div class=\"row no-scrollbar\">\r\n            <div class=\"col-lg-12 my-7\">\r\n                <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                    <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container> -->\r\n    <!-- *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\" -->\r\n      <div >\r\n      <div class=\"day-names\">\r\n        <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n      </div>\r\n      <div class=\"calendar-days\">\r\n        <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n        <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n          <span [ngClass]=\"getDayClass(day)\"  class=\"symbol-label\">\r\n            {{ day }}\r\n          </span>\r\n      </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i6.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MonthlyperformanceDatepickerComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-monthlyperformance-datepicker', template: "<div class=\"calendar-container p-5\">\r\n  <div class=\"performanceheading\">Monthly Performance <span class=\"cursor-pointer\"\r\n    [ngbTooltip]=\"tooltipContent\"\r\n    placement=\"bottom\"\r\n    triggers=\"mouseenter:mouseleave\"\r\n    tooltipClass=\"custom-tooltip\">\r\n    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"17\" viewBox=\"0 0 16 17\" fill=\"none\">\r\n      <g clip-path=\"url(#clip0_3701_29180)\">\r\n      <path d=\"M7.9987 11.1666V8.49992M7.9987 5.83325H8.00536M14.6654 8.49992C14.6654 12.1818 11.6806 15.1666 7.9987 15.1666C4.3168 15.1666 1.33203 12.1818 1.33203 8.49992C1.33203 4.81802 4.3168 1.83325 7.9987 1.83325C11.6806 1.83325 14.6654 4.81802 14.6654 8.49992Z\" stroke=\"#101828\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </g>\r\n      <defs>\r\n      <clipPath id=\"clip0_3701_29180\">\r\n      <rect width=\"16\" height=\"16\" fill=\"white\" transform=\"translate(0 0.5)\"/>\r\n      </clipPath>\r\n      </defs>\r\n      </svg>\r\n  </span>\r\n  \r\n  <ng-template #tooltipContent>\r\n    <div class=\"tooltip-container\">\r\n      <div class=\"performance-box\">\r\n        <div class=\"performance-item\">\r\n          <span class=\"number primary900\">1</span>\r\n          <span class=\"performancetext\">Overall performance 86 to 100%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number blue33B5FF\">2</span>\r\n          <span class=\"performancetext\">Overall performance 71 to 85%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number lightBlue6BCAFF\">3</span>\r\n          <span class=\"performancetext\">Overall performance 56 to 70%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number orangeF79009\">4</span>\r\n          <span class=\"performancetext\">Overall performance 41 to 55%</span>\r\n        </div>\r\n        <div class=\"performance-item\">\r\n          <span class=\"number redF04438\">5</span>\r\n          <span class=\"performancetext\">Overall performance below 40%</span>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n  </div>\r\n \r\n  <div  class=\"calendar\">\r\n    <div class=\"calendar-header my-3\">\r\n      <span class=\"cursor-pointer\" (click)=\"previousMonth()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path d=\"M12.5 15L7.5 10L12.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n      <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>\r\n      <span class=\"cursor-pointer\" (click)=\"nextMonth()\">\r\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n          <path d=\"M7.5 15L12.5 10L7.5 5\" stroke=\"#667085\" stroke-width=\"1.67\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n        </svg>\r\n      </span>\r\n    </div>\r\n\r\n    <div class=\"calendar-body my-5\">\r\n      <!-- <ng-container *ngIf=\"monthlyPeformanceLoading\">\r\n        <div class=\"row loader no-scrollbar d-flex justify-content-center align-items-center\">\r\n            <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"shimmer\">\r\n                <div class=\"wrapper\">\r\n                    <div class=\"stroke animate title\"></div>\r\n                    <div class=\"stroke animate link\"></div>\r\n                    <div class=\"stroke animate description\"></div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"monthlyPeformanceNoData && !monthlyPeformanceLoading\">\r\n        <div class=\"row no-scrollbar\">\r\n            <div class=\"col-lg-12 my-7\">\r\n                <div class=\"card-body mb-6 d-flex justify-content-center align-items-center flex-column\">\r\n                    <img class=\"img-src\" src=\"./assets/tango/Icons/Nodata1.svg\" alt=\"\">\r\n                    <div class=\"nodatamaintext mt-3\">No data found</div>\r\n                    <div class=\"nodatasubtext\">There is no result for Monthly Performance\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </ng-container> -->\r\n    <!-- *ngIf=\"!monthlyPeformanceLoading && !monthlyPeformanceNoData\" -->\r\n      <div >\r\n      <div class=\"day-names\">\r\n        <div *ngFor=\"let day of dayNames\">{{ day }}</div>\r\n      </div>\r\n      <div class=\"calendar-days\">\r\n        <div *ngFor=\"let _ of getEmptyDays()\" class=\"empty-day\"></div>\r\n        <div *ngFor=\"let day of getDaysInMonth()\" class=\"symbol symbol-35px symbol-circle\">\r\n          <span [ngClass]=\"getDayClass(day)\"  class=\"symbol-label\">\r\n            {{ day }}\r\n          </span>\r\n      </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [".calendar-container{display:flex;flex-direction:column;gap:12px;border-radius:8px;background:#fff}.calendar{display:flex;flex-direction:column;align-items:center;max-height:315px;overflow-y:scroll;scrollbar-width:none}.calendar::-webkit-scrollbar{display:none}.calendar-header{display:flex;justify-content:space-between;width:100%;color:var(--Gray-700, #344054);text-align:center;font-size:16px;font-style:normal;font-weight:500;line-height:24px;position:sticky!important;top:0!important;background-color:#fff;z-index:2}.calendar-body{display:flex;flex-direction:column;width:100%}.day-names{display:grid;grid-template-columns:repeat(7,1fr);font-weight:700;margin-bottom:10px;text-align:center}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.empty-day{visibility:hidden}.calendar-days div{text-align:center;border-radius:50%;cursor:not-allowed;margin-top:10%;margin-left:19%}.selected-day{background-color:#00a3ff;color:#fff}.disabled-day{cursor:not-allowed}button{background-color:transparent;border:none;cursor:pointer;font-size:16px}.performanceheading{color:var(--Gray-900, #101828);font-size:18px;font-style:normal;font-weight:600;line-height:28px}.primary900{background-color:var(--Primary-900, #0085D2);color:#fff}.blue33B5FF{background-color:#33b5ff;color:#fff}.lightBlue6BCAFF{background-color:#6bcaff;color:#fff}.orangeF79009{background-color:#f79009;color:#fff}.redF04438{background-color:#f04438;color:#fff}.calendar-day{width:85%;height:90%}.calendar-day:hover{opacity:.8}.empty-day{width:40px;height:40px;display:inline-block}.nodatamaintext{font-family:Inter;font-size:16px;font-weight:600;line-height:24px;text-align:center;color:#101828}.nodatasubtext{font-family:Inter;font-size:14px;font-weight:400;line-height:20px;text-align:center;color:#667085}.loader .title{width:65%}.loader .link{width:85%}.loader .description{width:95%}.loader .shimmer{padding:15px;width:95%;height:120px;margin:10px auto;background:#fff}.loader .shimmer .image-card{height:90px;width:90px;float:right;border-radius:8px}.loader .stroke{height:15px;background:#777;margin-top:20px}.loader .wrapper{width:0px;animation:fullView .5s forwards linear}@keyframes fullView{to{width:100%}}.loader .animate{animation:shimmer 3s;animation-iteration-count:infinite;background:linear-gradient(to right,#e6e6e6 5%,#ccc 25%,#e6e6e6 35%);background-size:1000px 100%}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.custom-tooltip .tooltip-container{display:flex;flex-direction:column;padding:10px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 0 10px #0000001a;width:130%!important}.tooltip{display:flex;align-items:center}.tooltip-icon{font-weight:700;margin-right:5px}.tooltip-text{font-size:14px;color:#333}.performance-box{margin-top:10px}.performance-item{display:flex;align-items:center;margin-bottom:5px}.number{display:inline-block;width:25px;height:20px;text-align:center;border-radius:50%;margin-right:10px;margin-bottom:10px}.performancetext{color:#000;text-align:center;font-size:12px;font-weight:600;line-height:20px}.no-scrollbar{overflow:hidden;padding:0;margin:0}\n"] }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i1.Router }, { type: i2.GlobalStateService }, { type: i0.ChangeDetectorRef }, { type: i3.ToastService }, { type: i4.TraxService }], propDecorators: { monthlyperformce: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 