@sunbird-cb/consumption 0.0.77 → 0.0.78

package/fesm2015/sunbird-cb-consumption.js

@@ -13846,21 +13846,43 @@ class CompetencyPassbookComponent {
                 const response = yield this.callCompetencySearch(request);
                 if (response && response.results) {
                     if (response.results.result.facets) {
-                        this.competencyArea = response.results.result.facets[0].values;
-                        this.competencyStrength = this.competencyArea.reduce((/**
-                         * @param {?} partialSum
-                         * @param {?} data
+                        response.results.result.facets.forEach((/**
+                         * @param {?} fact
                          * @return {?}
                          */
-                        (partialSum, data) => partialSum + data.count), 0);
+                        (fact) => {
+                            if (fact.name === 'competencies_v5.competencyArea') {
+                                this.competencyArea = fact.values;
+                            }
+                        }));
                         this.selectedValue = this.competencyArea[0].name.toLowerCase();
-                        /** @type {?} */
-                        let addFilter = {
-                            "createdFor": [
-                                this.providerId
-                            ]
-                        };
-                        this.getcompetencyTheme(this.competencyArea[0].name, addFilter);
+                        this.competencyArea.forEach((/**
+                         * @param {?} area
+                         * @param {?} indexValue
+                         * @return {?}
+                         */
+                        (area, indexValue) => __awaiter(this, void 0, void 0, function* () {
+                            /** @type {?} */
+                            let addFilter = {
+                                "createdFor": [
+                                    this.providerId
+                                ]
+                            };
+                            /** @type {?} */
+                            let data = yield this.getcompetencyThemeCount(area, addFilter);
+                            area['themeData'] = data;
+                            area['count'] = data.length;
+                            if (indexValue === 0) {
+                                this.competencyStrength = 0;
+                                this.getThemeDataByArea(area);
+                                this.competencyStrength = this.competencyArea.reduce((/**
+                                 * @param {?} partialSum
+                                 * @param {?} data
+                                 * @return {?}
+                                 */
+                                (partialSum, data) => partialSum + data.count), 0);
+                            }
+                        })));
                         this.loadCompetencyArea = false;
                     }
                 }
@@ -13919,7 +13941,7 @@ class CompetencyPassbookComponent {
             };
         }
         this.temeletryResponse.emit(e.name);
-        this.getcompetencyTheme(e.name, addfilter);
+        this.getThemeDataByArea(e);
         this.selectedValue = e.name;
     }
     /**
@@ -14023,6 +14045,111 @@ class CompetencyPassbookComponent {
             }
         });
     }
+    /**
+     * @param {?} areaData
+     * @return {?}
+     */
+    getThemeDataByArea(areaData) {
+        /** @type {?} */
+        let competencyThemeData = areaData.themeData;
+        this.originalCompetencyArray.forEach((/**
+         * @param {?} element
+         * @return {?}
+         */
+        (element) => {
+            if (element.name.toLowerCase() === areaData.name) {
+                this.competencyTheme = competencyThemeData.filter((/**
+                 * @param {?} ele1
+                 * @return {?}
+                 */
+                (ele1) => {
+                    return element.children.find((/**
+                     * @param {?} ele2
+                     * @return {?}
+                     */
+                    (ele2) => ele2.name.toLowerCase() === ele1.name.toLowerCase()));
+                }));
+                this.showAllTheme = [{ name: 'Show all', showAll: false }];
+                this.competencyThemeLength = 6;
+            }
+        }));
+        /** @type {?} */
+        let addfilter = {};
+        if (this.providerId) {
+            addfilter = {
+                "createdFor": [
+                    this.providerId
+                ],
+            };
+        }
+        this.getcompetencySubTheme(areaData, addfilter);
+    }
+    /**
+     * @param {?} area
+     * @param {?=} addFilter
+     * @return {?}
+     */
+    getcompetencyThemeCount(area, addFilter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            let request = {
+                "request": {
+                    "query": "",
+                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": area.name, "status": [
+                            "Live"
+                        ] }),
+                    "sort_by": {
+                        "lastUpdatedOn": "desc"
+                    },
+                    "facets": [
+                        "competencies_v5.competencyTheme"
+                    ],
+                    "limit": 0,
+                    "offset": 0,
+                    "fields": []
+                }
+            };
+            try {
+                /** @type {?} */
+                let returnedData = this.loadCometency = true;
+                /** @type {?} */
+                const response = yield this.callCompetencySearch(request);
+                if (response && response.results) {
+                    if (response.results.result.facets) {
+                        /** @type {?} */
+                        let competencyThemeData = response.results.result.facets[0].values;
+                        this.originalCompetencyArray.forEach((/**
+                         * @param {?} element
+                         * @return {?}
+                         */
+                        (element) => {
+                            if (element.name.toLowerCase() === area.name) {
+                                returnedData = competencyThemeData.filter((/**
+                                 * @param {?} ele1
+                                 * @return {?}
+                                 */
+                                (ele1) => {
+                                    return element.children.find((/**
+                                     * @param {?} ele2
+                                     * @return {?}
+                                     */
+                                    (ele2) => ele2.name.toLowerCase() === ele1.name.toLowerCase()));
+                                }));
+                                this.showAllTheme = [{ name: 'Show all', showAll: false }];
+                                this.competencyThemeLength = 6;
+                            }
+                        }));
+                    }
+                    this.loadCometency = false;
+                    return returnedData;
+                }
+            }
+            catch (error) {
+                // Handle errors
+                // console.error('Error:', error);
+            }
+        });
+    }
     /**
      * @return {?}
      */
@@ -14058,13 +14185,89 @@ class CompetencyPassbookComponent {
      * @return {?}
      */
     navigateToCompetency(compData) {
-        this.router.navigateByUrl(`app/learn/browse-by/competency/${compData.name}`);
+        this.router.navigateByUrl(`/app/learn/browse-by/competency/${compData.name}`);
+    }
+    /**
+     * @param {?} compArea
+     * @param {?=} addFilter
+     * @return {?}
+     */
+    getcompetencySubTheme(compArea, addFilter) {
+        return __awaiter(this, void 0, void 0, function* () {
+            /** @type {?} */
+            let request = {
+                "request": {
+                    "query": "",
+                    "filters": Object.assign({ "contentType": "Course" }, addFilter, { "competencies_v5.competencyArea": compArea.name, "status": [
+                            "Live"
+                        ] }),
+                    "sort_by": {
+                        "lastUpdatedOn": "desc"
+                    },
+                    "facets": [
+                        "competencies_v5.competencySubThemeId"
+                    ],
+                    "limit": 0,
+                    "offset": 0,
+                    "fields": []
+                }
+            };
+            try {
+                this.loadCometency = true;
+                /** @type {?} */
+                const response = yield this.callCompetencySearch(request);
+                if (response && response.results) {
+                    if (response.results.result.facets) {
+                        /** @type {?} */
+                        let competencySubThemeData = response.results.result.facets[0].values;
+                        this.competencyArea.forEach((/**
+                         * @param {?} areaEle
+                         * @return {?}
+                         */
+                        (areaEle) => {
+                            if (areaEle.name === compArea.name) {
+                                areaEle.themeData.forEach((/**
+                                 * @param {?} themeEle
+                                 * @return {?}
+                                 */
+                                (themeEle) => {
+                                    if (this.allcompetencyTheme[themeEle.name.toLowerCase()] &&
+                                        this.allcompetencyTheme[themeEle.name.toLowerCase()].children &&
+                                        this.allcompetencyTheme[themeEle.name.toLowerCase()].children.length) {
+                                        /** @type {?} */
+                                        let data = this.allcompetencyTheme[themeEle.name.toLowerCase()].children.filter((/**
+                                         * @param {?} obj1
+                                         * @return {?}
+                                         */
+                                        obj1 => competencySubThemeData.some((/**
+                                         * @param {?} obj2
+                                         * @return {?}
+                                         */
+                                        obj2 => Object.keys(obj1).every((/**
+                                         * @param {?} key
+                                         * @return {?}
+                                         */
+                                        key => obj1['id'] === Number(obj2['name'])))))));
+                                        this.allcompetencyTheme[themeEle.name.toLowerCase()]['children'] = data;
+                                    }
+                                }));
+                            }
+                        }));
+                    }
+                    this.loadCometency = false;
+                }
+            }
+            catch (error) {
+                // Handle errors
+                // console.error('Error:', error);
+            }
+        });
     }
 }
 CompetencyPassbookComponent.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-competency-passbook',
-                template: " <div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
+                template: " <div class=\"competency-title\" *ngIf=\"objectData?.title\">{{objectData?.title}} \n    <span class=\"competency-count\">\n        ({{competencyStrength}})\n    </span>\n</div>\n<div class=\"flex items-center justify-{{dynamicAlignPills}} gap-8 mt-5 mb-5 competency-filters\">\n    <sb-uic-pills [pillsData]=\"competencyArea\" [dynamicColor]=\"dynamicColor\"\n    [isLoading]=\"loadCompetencyArea\" (pillClick)=\"competencyChange($event)\" [selectedValue]=\"selectedValue\"></sb-uic-pills>\n</div>\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\" *ngIf=\"!loadCometency\">\n    <div class=\"competency-card\" *ngFor=\"let obj of competencyTheme| slice:0:competencyThemeLength\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center\">\n                            <div class=\"name\">{{allcompetencyTheme[obj?.name]?.name}}</div>\n                            <!-- <div class=\"flex items-baseline\">\n                                <img src=\"assets/icons/competency/cp-arrow.svg\" class=\"arrow-img cursor-pointer\" alt=\"cp arrow img\" (click)=\"navigateToCompetency(obj)\" />\n                            </div> -->\n                        </div>\n                    </div>\n                    <div class=\"flex flex-row pt-3 pb-3 description\">\n                        {{ allcompetencyTheme[obj.name]?.description }} \n                    </div>\n                    <!-- <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\">school</mat-icon>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count === 1\">{{obj.count}} Content</div>\n                        <div class=\"no-of-contents\" *ngIf=\"obj.count !== 1\">{{obj.count}} Contents</div>\n                    </div> -->\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <ng-container *ngFor=\"let child of allcompetencyTheme[obj.name]?.children| slice:0: allcompetencyTheme[obj.name]?.viewMore ? allcompetencyTheme[obj.name]?.children?.length : 3; let i = index\">\n                            <div class=\"chip rounded-full p-2 text-xs chip-ellipsis\" [title]=\"child?.name\" >\n                                {{ child.name }}\n                            </div>\n                        </ng-container>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && !allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View more\n                        </div>\n                        <div class=\"p-2 info-btn cursor-pointer\"\n                            *ngIf=\"allcompetencyTheme[obj.name]?.children.length > 3 && allcompetencyTheme[obj.name]?.viewMore\" (click)=\"viewMoreChildren(allcompetencyTheme[obj.name])\">\n                            View less\n                        </div>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n<ng-container *ngIf=\"competencyTheme.length > 6 && !loadCometency\">\n    <div class=\"flex items-center justify-center gap-8 mt-5 mb-5 competency-filters\">\n        <sb-uic-pills [pillsData]=\"showAllTheme\" [requiredTitlecase]=\"false\" [dynamicColor]=\"dynamicColor\" (pillClick)=\"displayAllTheme($event)\"></sb-uic-pills>\n    </div>\n</ng-container> \n\n<ng-container *ngIf=\"loadCometency\">\n\n<div class=\"grid grid-cols-1 md:grid-cols-{{cardDisplayCount}} w-full grid-flow-row gap-5\">\n    <div *ngFor=\"let obj of [0,1,2,3,4,5]\">\n        <div class=\"flex-1 flex-col\">\n            <div class=\"competency-theme\"></div>\n            <div class=\"details flex flex-col\">\n                <div class=\"flex flex-col p-4\">\n                    <div class=\"flex flex-row cursor-pointer\">\n                        <div class=\"flex flex-row gap-2 items-center w-full\">\n                            <div class=\"name w-full\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                                [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"pt-3 pb-3 description\">\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'100%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-full\" [bindingClass]=\"'flex rounded'\" [width]=\"'80%'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                    <div class=\"flex flex-row gap-3 items-center\">\n                        <mat-icon class=\"content-icon\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded mb-2'\" [width]=\"'24px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></mat-icon>\n                        <div class=\"no-of-contents\"><sb-uic-skeleton-loader  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                            [height]=\"'24px'\"></sb-uic-skeleton-loader></div>\n                    </div>\n                    <div class=\"line mt-3 mt-2\"></div>\n                    <div class=\"flex flex-wrap gap-3 pt-4 chip-container\">\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\"  [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                        <sb-uic-skeleton-loader class=\"w-2/5\" [bindingClass]=\"'flex rounded '\" [width]=\"'100px'\"\n                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                    </div>\n                </div>        \n            </div>\n        </div>\n    </div>\n</div>\n</ng-container>",
                 styles: [".competencies-backgroud{background-color:#1b2133}.competency-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;color:#fff}.competency-count{color:#f3962f}.filter-button{padding:12px 16px;border-radius:50px;border:1px solid #fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;background-color:transparent;color:#fff;cursor:pointer}.filter-button.active{background:#1b4ca1}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-background{background:#1b4ca1}.competency-theme{height:16px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:#f8b861}.details{background-color:#fff;border-radius:12px;position:relative;top:-8px;min-height:278px}.name{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;height:42px;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.no-of-contents{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;color:#1b4ca1}.content-icon{color:#1b4ca1}.line{border-top:1px solid #e2dddd}.chip{padding:8px 16px;gap:8px;border-radius:50px;border:1px solid #1b4ca1;color:#1b4ca1;font-family:Lato;font-size:14px;font-weight:700;text-align:center}.chip-ellipsis{white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}.info-btn{font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;text-align:center;opacity:.7;padding:12px 5px}.hide{display:none}.behavioral{background-color:#f8b861}.functional{background-color:#e24577}.domain{background-color:#7b47a4}.competency-card{z-index:999}"]
             }] }
 ];
@@ -15536,7 +15739,7 @@ ProvidersV2Component.decorators = [
     { type: Component, args: [{
                 selector: 'sb-uic-providers-v2',
                 template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n    <div class=\"flex flex-col flex-1\">\n        <ng-container *ngIf=\"sectionList?.length\">\n            <ng-container *ngFor=\"let section of sectionList\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\">\n                        <ng-container *ngFor=\"let column of section.column\">\n                            <div id=\"{{column?.key}}\" class=\"col-span-{{column.colspan || 12}} \">\n                                <ng-container *ngIf=\"column?.enabled\" [ngSwitch]=\"column?.key\">\n                                    <ng-container *ngSwitchCase=\"'topSection'\" [ngTemplateOutlet]=\"topSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'trainingCalendar'\" [ngTemplateOutlet]=\"trainingCalendar\"\n                                        [ngTemplateOutletContext]=\"{trainingCalendar: column.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'contributors'\" [ngTemplateOutlet]=\"contributors\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'infra'\" [ngTemplateOutlet]=\"infra\"\n                                        [ngTemplateOutletContext]=\"{infra: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'contentTopStrip'\" [ngTemplateOutlet]=\"contentStripTemplate\"\n                                        [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container> \n                                    <ng-container *ngSwitchCase=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                        [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>   \n                                        <ng-container *ngSwitchCase=\"'learnerReview'\" [ngTemplateOutlet]=\"learnerReviewBlock\"\n                                            [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>                         \n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </section>\n                </ng-container>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n<div class=\"container-fluid\" *ngIf=\"navList?.length\">\n    <div class=\"flex sticky-navigator gap-4\">\n        <mat-icon class=\"nav-up-arrow cursor-pointer\" (click)=\"scrollToSection('section-micro-sites')\">arrow_upwards</mat-icon>\n        <ng-container *ngFor=\"let section of navList\">\n            <ng-container *ngIf=\"section.navigation\">\n                <div class=\"nav-button\" (click)=\"scrollToSection(section?.key); raiseNavTelemetry(section?.title)\">{{section?.title}}</div>\n            </ng-container>\n        </ng-container>\n    </div>\n</div>\n\n<ng-template #topSection let-data=\"data\">\n    <!-- <div class=\"w-full grid grid-cols-12 gap-4\"> -->\n        <div class=\"col-span-12 \">\n            <div class=\"grid grid-cols-12\">\n                <div class=\"hidden md:block p-5 custombgsection\">\n                    <sb-uic-data-points  [providerId]=\"providerId\" [fetchDataFromApi]=\"true\" [objectData]=\"data?.metrics?.data\" [layoutType]=\"'multipleRows-V2'\"></sb-uic-data-points>\n                </div>\n                <div class=\"col-span-3\"></div>\n                <div class=\"col-span-12 md:col-span-9\">\n                    <div class=\"slider h-full\" *ngIf=\"data?.sliderData?.sliders\">\n                        <sb-uic-sliders [title]=\"providerName\" [widgetData]=\"data?.sliderData?.sliders\" [styleData]=\"data?.sliderData?.styleData\" [type]=\"'atictitop'\"></sb-uic-sliders>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12 title-section px-5 md:py-5 mob-container\">\n            <div class=\"container flex flex-col md:flex-row\">\n                <div class=\"mr-4 logo-box-container\">\n                    <div class=\"flex logo-box-rounded top mr-4\">\n                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                    </div>\n                </div>\n                <div class=\"w-full md:w-9/12 flex-1 flex flex-col\">\n                    <h1 class=\" txt-ellipsis-2 break-words\">{{data?.title || providerName}}</h1>\n                    <p>{{data?.description | slice:0:descriptionMaxLength}}\n                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                    </p>\n                    <div class=\"block md:hidden overflow-y-auto mb-3\">\n                        <sb-uic-data-points [providerId]=\"providerId\" [fetchDataFromApi]=\"true\"  [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow-v2'\"></sb-uic-data-points>\n                    </div>\n                    <button\n                        (click)=\"raiseTelemetry(data?.contentButton?.title)\"\n                        [routerLink]=\"[data?.contentButton?.redirectUrl, providerName, providerId, 'all-CBP']\"\n                        [queryParams]=\"{pageDetails: true}\" mat-button type=\"button\"\n                        class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n                        <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n                            {{data?.contentButton?.title}}\n                        </span>\n                    </button>\n                </div>\n            </div>\n        </div>\n    <!-- </div> -->\n</ng-template>\n\n<ng-template #contentStripTemplate let-data=\"data\">\n    <ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n        <div class=\"flex justify-center relative\">\n            <img class=\"absolute {{data?.contentStrip?.sectionImagePosition}}\" src=\"{{data?.contentStrip?.sectionImage}}\" alt=\"\">\n            <div class=\"container \">\n                <div class=\"w-full\">\n                    <sb-uic-content-strip-with-tabs\n                        [emitViewAll]=\"true\"\n                        (viewAllResponse)=\"showAllContent($event,data)\"\n                        (emptyResponse)=\"hideContentStrip($event, data)\"\n                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                        [providerId]=\"providerId\"\n                        [widgetData]=\"data?.contentStrip\">\n                    </sb-uic-content-strip-with-tabs>\n                </div>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #contributors  let-data=\"data\">\n    <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n                <div class=\"col-span-12 md:col-span-3 contributor-desc\">\n                    <div class=\"infra-box flex flex-col\">\n                        <div class=\"infra-title-v2 hidden md:block\">\n                            {{data.detaulTitle}}<span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n                        </div>\n                        <div class=\"infra-title-v2 hidden md:block\">\n                            {{data.myTitle}}<span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n                        </div>\n                        <div class=\"block md:hidden\">\n                            <span class=\"infra-title-v2\">{{data.detaulTitle}}</span>\n                            <span class=\"infra-title2-v2\">{{data.defaultTitle1}}</span>\n                            <span class=\"infra-title-v2\"> {{data.myTitle}}</span>\n                            <span class=\"infra-title2-v2\">{{data.myTitle1}}</span>\n                        </div>\n                        <div class=\"infra-description padding-top-s\">\n                            {{data.description}}\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-9\">\n                    <sb-uic-common-strip [widgetData]=\"data\"></sb-uic-common-strip>\n                </div>\n            </div>\n            <div class=\"w-full section-divider pt-6\">\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #infra let-infra=\"infra\">\n    <div class=\"infra-background px-5\" [style.background]=\"infra?.background\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 infra-sec margin-bottom-xl\">\n                <div class=\"col-span-12 md:col-span-4 infra-sec-desc margin-bottom-xl\">\n                    <div class=\"infra-box flex flex-col\">\n                        <div class=\"infra-title2 hidden md:block\">\n                            {{infra?.detaulTitle}}\n                        </div>\n                        <div class=\"block md:hidden\">\n                            <span class=\"infra-title2\">{{infra?.detaulTitle}}</span>\n                        </div>\n                        <div class=\"infra-description padding-top-s\">\n                            {{infra?.description}}\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-8 margin-bottom-xl\">\n                    <sb-uic-data-points [objectData]=\"infra\" [layoutType]=\"'gridLayout'\"></sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n    </div>\n    <div class=\"infra-background slider-background\" [style.background]=\"infra?.background\">\n    </div>\n    <div class=\"slider-background1 mb-8\">\n        <div class=\"container-balanced w-full slider-background-2\">\n            <div class=\"info-slider\">\n                <sb-uic-sliders class=\"infobanner\" [widgetData]=\"infra?.sliderData?.sliders\" [styleData]=\"infra?.sliderData?.styleData\"></sb-uic-sliders>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<!-- Start Competencies -->\n<ng-template #competency let-competency=\"competency\">\n    <div class=\"padding-top-l padding-bottom-l relative\"  [style.background]=\"competency?.background\" *ngIf=\"!hideCompetencyBlock\">\n        <div class=\"w-full container-balanced\">\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook\n                    (emptyResponse)=\"hideCompetency($event, competency)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\"\n                    [objectData]=\"competency\"\n                    [providerId]=\"providerId\">\n                </sb-uic-competency-passbook>\n            </div>\n        </div>\n        <img class=\"absolute comp-back-img\" src=\"assets/icons/microsite/competency.svg\" alt=\"\">\n    </div>\n</ng-template>\n<!-- End Competencies -->\n\n<ng-template #trainingCalendar let-trainingCalendar=\"trainingCalendar\">\n    <div class=\"hidden md:block\">\n        <div class=\"col-span-12 px-8 py-8\" [style.background]=\"trainingCalendar?.background\">\n            <div class=\"container-balanced flex flex-col\">\n                <div class=\"col-span-12 mat-subheading-1 margin-remove\">{{trainingCalendar?.title}}:  {{currentMonthAndYear}}</div>\n                <sb-uic-calender\n                    [objectData]=\"trainingCalendar\"\n                    [fetchDataFromApi]=\"true\"\n                    [layoutType]=\"'grid'\"\n                    [defaultDays]=\"trainingCalendar?.defaultDays\"\n                    [providerId]=\"providerId\">\n                </sb-uic-calender>\n            </div>\n            <div class=\"flex item-center justify-center\">\n                <button mat-button type=\"button\"\n                    (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n                    [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n                    class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n                    <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n                        {{trainingCalendar?.contentButton?.title}}\n                    </span>\n                </button>\n            </div>\n        </div>\n    </div>\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12 px-5 py-3 mob-header\">{{trainingCalendar?.title}}:  {{currentMonthAndYear}}</div>\n        <div class=\"col-span-12\">\n            <sb-uic-calender\n                [objectData]=\"trainingCalendar\"\n                [fetchDataFromApi]=\"true\"\n                [layoutType]=\"'row'\"\n                [defaultDays]=\"trainingCalendar?.defaultDays\"\n                [providerId]=\"providerId\">\n            </sb-uic-calender>\n        </div>\n        <div class=\"col-span-12 flex item-center justify-center\">\n            <button mat-button type=\"button\"\n                (click)=\"raiseTelemetry(trainingCalendar?.contentButton?.title)\"\n                [routerLink]=\"[trainingCalendar?.contentButton?.redirectUrl, providerName, providerId, 'training-calendar']\"\n                class=\"view-btn margin-left-xs margin-right-xs small-button blue-border flex-auto-display\">\n                <span class=\"mat-heading-1 bold ws-mat-default-text\" i18n>\n                    {{trainingCalendar?.contentButton?.title}}\n                </span>\n            </button>\n        </div>\n    </div>\n</ng-template>\n<ng-template #learnerReviewBlock  let-data=\"data\">\n    <div class=\"contributors-background px-5 py-5\" [style.background]=\"data?.background\" *ngIf=\"!data?.hideSection\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 padding-top-l mb-6\">\n                <div class=\"col-span-12 md:col-span-4 contributor-desc\">\n                    <div class=\"infra-box-review flex flex-col\">\n                        <div class=\"learner-title hidden md:block\">\n                            {{data?.detaulTitle}}\n                        </div>\n                        <div class=\"infra-title2 hidden md:block\">\n                            {{data?.myTitle}}\n                        </div>\n                        <div class=\"block md:hidden\">\n                            <span class=\"learner-title\">{{data?.detaulTitle}}</span> <span class=\"infra-title2\"> {{data?.myTitle}}</span>\n                        </div>  \n                    </div> \n                </div>\n                <div class=\"col-span-12 md:col-span-8\">\n                    <sb-uic-user-content-rating (emptyResponse)=\"hideLearnerReview($event, data)\"  [formData]=\"data\" [providerId]=\"providerId\"></sb-uic-user-content-rating>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n",
-                styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0;z-index:-1}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:768px) and (max-width:1023px){.custombgsection{height:16em!important;width:22%;padding:.75rem 1rem!important}}@media screen and (max-width:768px){::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}@media screen and (min-width:1023px){.custombgsection{width:38%;height:15em}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.custombgsection{width:42%;height:21.3em}.infobanner.banner-container{width:1014px!important}}"]
+                styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.section-divider{border-bottom:1px solid rgba(0,0,0,.16)}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.logo-box{vertical-align:middle;max-width:250px;background:#f5fdf1;padding:8px;border:1px solid rgba(0,0,0,.5)}.title-section{position:relative;display:flex;justify-content:center;background-color:#fff}.logo-box-container{width:180px;position:relative}@media only screen and (max-width:599px){.logo-box-container{width:112px;height:72px}}.view-btn{width:160px;background:#fff;padding:0 16px;border-radius:49px;border:1px solid #1b4ca9;font-weight:700!important;font-size:14px;margin-top:4px;margin-bottom:4px;line-height:36px;cursor:pointer}.logo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px 0 rgba(0,0,0,.06)}.logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width:599px){.view-btn{margin-top:12px;margin-bottom:16px}.logo-box-rounded{width:112px;height:112px}.logo-box-rounded .logo-img{max-width:84px}}.slider-box{max-width:30%}.stats-container{justify-content:space-around;display:flex;flex-wrap:wrap}.stats-item{display:flex;align-items:center;flex-wrap:nowrap;padding:8px 16px;margin-bottom:16px}.banner-metrics{background:linear-gradient(180deg,#f9cb97 -107.59%,#ef951e 110.74%)}.infra-sec-desc{padding-top:32px}.contributors-background,.infra-background{align-items:center;justify-content:center;display:flex}.contributor-desc{align-items:center;display:inline-flex;margin-top:-24px}.infra-box{width:256px}.infra-box-review{width:100%}.infra-title-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2-v2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#fff}.infra-title2{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#ef951e}.infra-description{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.overlay{position:absolute;top:-20px}.slider-background{height:160px}.slider-background1{height:195px}.slider-background-2{position:relative}.info-slider{position:absolute;top:-12em;left:50%;transform:translateX(-50%)}.sticky-navigator{padding:15px 5px;background-color:#fdead5;align-items:center;overflow:auto;position:fixed;left:0;bottom:0;width:100%;z-index:1002;justify-content:center}.nav-button{padding:12px 16px;border-radius:40px;border:1px solid #000;text-align:center;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;cursor:pointer;min-width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.nav-up-arrow{height:28px}.img-left{left:0}.img-right{right:0;z-index:-1}.learner-title{font-family:Montserrat;font-size:24px;font-weight:600;line-height:29.26px;text-align:left;color:#000}@media screen and (max-width:1201px){.img-left,.img-right{display:none}}@media screen and (max-width:767px){.infra-sec{padding:0}.infra-box,.infra-box-review{width:99%;height:auto}.infra-sec-desc{padding-top:0}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:bottom 0 right 0;background-repeat:no-repeat}.infra-title,.infra-title-v2,.infra-title2,.infra-title2-v2{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left}.slider-background,.slider-background1{height:150px}.info-slider{position:absolute;top:-155px;width:94%}.sticky-navigator{align-items:center;justify-content:left;bottom:63px}.logo-box-rounded.top{position:absolute;top:-50px}.learner-title{font-size:16px}}.competencies-backgroud{background-color:#1b2133}.txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.comp-back-img{bottom:0;left:0;right:0;margin-left:auto;margin-right:auto;width:50%;z-index:-1;filter:brightness(100)}.mob-header{font-family:Lato;font-size:16px;font-weight:600}.custombgsection{background:url(/assets/icons/microsite/side_banner.png) 0 0/cover no-repeat;width:40%;position:absolute;z-index:99;left:0;height:21.3em}@media screen and (min-width:768px) and (max-width:1023px){.custombgsection{height:16em!important;width:22%;padding:.75rem 1rem!important}}@media screen and (max-width:768px){::ng-deep.featuredContents .mat-tab-header{padding-left:20px}::ng-deep.topContents .mat-tab-header{padding-left:20px}}@media screen and (min-width:1023px){.custombgsection{width:34%;height:15em}}@media screen and (min-width:1014px){.info-slider{width:1014px!important}}@media screen and (min-width:1280px){.custombgsection{width:36%;height:21.3em}.infobanner.banner-container{width:1014px!important}}"]
             }] }
 ];
 /** @nocollapse */