import { Component, Input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "@angular/material/icon";
import * as i4 from "@ngx-translate/core";
export class TipsForLearnerCardComponent {
    constructor(router) {
        this.router = router;
    }
    ngOnInit() {
        this.displayRandomlearnAdvisoryData();
    }
    displayRandomlearnAdvisoryData() {
        if (this.learnAdvisoryData && this.learnAdvisoryData.length) {
            const randomIndex = Math.floor(Math.random() * this.learnAdvisoryData.length);
            this.randomlearnAdvisoryObj = this.learnAdvisoryData[randomIndex];
        }
    }
    showAllTips() {
        this.router.navigate(['/learner-advisory']);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TipsForLearnerCardComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TipsForLearnerCardComponent, selector: "ws-widget-tips-for-learner-card", inputs: { learnAdvisoryData: "learnAdvisoryData" }, ngImport: i0, template: "<div class=\"tips-container\" *ngIf=\"randomlearnAdvisoryObj\">\n    <!-- <div class=\"circle-box\">\n        <div class=\"background-circle\">\n\n        </div>\n    </div> -->\n    <div class=\"tips-header\">\n        <!-- <h3>Tips for Learners</h3> -->\n        <p class=\"mat-subheading-1 margin-bottom-none\">Tips for Learners</p>\n        <div class=\"ml-4 pl-2 view-more ws-mat-default-text ng-star-inserted\">\n            <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\"\n                (click)=\"showAllTips()\">\n                <span class=\"ws-mat-default-text\">{{ 'career.readMore' | translate }}</span>\n                <mat-icon class=\"ws-mat-default-text\" color=\"accent\" role=\"img\"\n                    aria-hidden=\"true\">navigate_next</mat-icon>\n            </a>\n        </div>\n    </div>\n    <div class=\"tip-content\">\n        <div class=\"background\">\n            <img class=\"book-icon\" src=\"{{randomlearnAdvisoryObj?.contentImg}}\"\n                alt=\"{{randomlearnAdvisoryObj?.content}}\">\n        </div>\n        <div class=\"tip-data\">\n            <p>{{randomlearnAdvisoryObj?.content}}</p>\n        </div>\n        <!-- <div class=\"tip-count\">\n            {{randomlearnAdvisoryObj?.id}}/{{learnAdvisoryData?.length}}\n        </div> -->\n    </div>\n</div>", styles: [".tips-container{background-color:#f9cb97;padding:16px 16px 0;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:1rem;overflow:hidden;width:385px;box-sizing:border-box}@media screen and (max-width: 1000px){.tips-container{width:100%}}.tips-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;z-index:10}.tips-header button{background:none;border:none;color:#01468f;cursor:pointer;font-family:Lato;font-size:14px;z-index:10}.tip-content{display:flex;z-index:10;padding-top:6px;margin-bottom:16px;box-sizing:border-box}.tip-content p{color:#000;font-family:Lato;font-size:14px;z-index:10;line-height:20px}.tip-count{display:flex;justify-content:center;align-items:center;color:#000;font-family:Montserrat!important;font-size:16px!important;padding:10px 3px;z-index:10;font-weight:600;line-height:19.5px;width:45px}.tip-data{margin-left:12px}.background-circle{position:absolute;z-index:1;right:-6.5em;top:2.8em;width:178px;height:178px;border-radius:100%;background-color:#fcd2a3}.circle-box{position:relative;width:100%;height:0px}.book-icon{width:32px;height:32px;padding:5px}.background{background-color:#fff;width:56px;height:42px;border-radius:5px;text-align:center}.view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more:hover{background-color:#dcdfe5}.margin-bottom-none{margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TipsForLearnerCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ws-widget-tips-for-learner-card', template: "<div class=\"tips-container\" *ngIf=\"randomlearnAdvisoryObj\">\n    <!-- <div class=\"circle-box\">\n        <div class=\"background-circle\">\n\n        </div>\n    </div> -->\n    <div class=\"tips-header\">\n        <!-- <h3>Tips for Learners</h3> -->\n        <p class=\"mat-subheading-1 margin-bottom-none\">Tips for Learners</p>\n        <div class=\"ml-4 pl-2 view-more ws-mat-default-text ng-star-inserted\">\n            <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\"\n                (click)=\"showAllTips()\">\n                <span class=\"ws-mat-default-text\">{{ 'career.readMore' | translate }}</span>\n                <mat-icon class=\"ws-mat-default-text\" color=\"accent\" role=\"img\"\n                    aria-hidden=\"true\">navigate_next</mat-icon>\n            </a>\n        </div>\n    </div>\n    <div class=\"tip-content\">\n        <div class=\"background\">\n            <img class=\"book-icon\" src=\"{{randomlearnAdvisoryObj?.contentImg}}\"\n                alt=\"{{randomlearnAdvisoryObj?.content}}\">\n        </div>\n        <div class=\"tip-data\">\n            <p>{{randomlearnAdvisoryObj?.content}}</p>\n        </div>\n        <!-- <div class=\"tip-count\">\n            {{randomlearnAdvisoryObj?.id}}/{{learnAdvisoryData?.length}}\n        </div> -->\n    </div>\n</div>", styles: [".tips-container{background-color:#f9cb97;padding:16px 16px 0;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;margin-bottom:1rem;overflow:hidden;width:385px;box-sizing:border-box}@media screen and (max-width: 1000px){.tips-container{width:100%}}.tips-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;z-index:10}.tips-header button{background:none;border:none;color:#01468f;cursor:pointer;font-family:Lato;font-size:14px;z-index:10}.tip-content{display:flex;z-index:10;padding-top:6px;margin-bottom:16px;box-sizing:border-box}.tip-content p{color:#000;font-family:Lato;font-size:14px;z-index:10;line-height:20px}.tip-count{display:flex;justify-content:center;align-items:center;color:#000;font-family:Montserrat!important;font-size:16px!important;padding:10px 3px;z-index:10;font-weight:600;line-height:19.5px;width:45px}.tip-data{margin-left:12px}.background-circle{position:absolute;z-index:1;right:-6.5em;top:2.8em;width:178px;height:178px;border-radius:100%;background-color:#fcd2a3}.circle-box{position:relative;width:100%;height:0px}.book-icon{width:32px;height:32px;padding:5px}.background{background-color:#fff;width:56px;height:42px;border-radius:5px;text-align:center}.view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more:hover{background-color:#dcdfe5}.margin-bottom-none{margin-bottom:0!important}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.Router }]; }, propDecorators: { learnAdvisoryData: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 