@sunbird-cb/consumption 0.1.24-cbrelease-4.8.27-multilingual → 0.1.24-cbrelease-4.8.28

package/fesm2022/sunbird-cb-consumption.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, Pipe, ContentChild } from '@angular/core';
+import { Injectable, Component, EventEmitter, Input, Output, ViewChild, NgModule, Inject, HostBinding, Directive, HostListener, CUSTOM_ELEMENTS_SCHEMA, ViewChildren, Pipe, Injector, ChangeDetectionStrategy, ContentChild } from '@angular/core';
 import * as i2$2 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/router';
@@ -49,10 +49,11 @@ import { MatLegacyTooltipModule } from '@angular/material/legacy-tooltip';
 import * as i7 from '@sunbird-cb/resolver-v2';
 import { WidgetBaseComponent, SbUiResolverModule } from '@sunbird-cb/resolver-v2';
 import * as _ from 'lodash';
+import { cloneDeep } from 'lodash';
 import * as moment from 'moment';
 import moment__default from 'moment';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClient } from '@angular/common/http';
+import { HttpHeaders, HttpClient, HttpClientModule } from '@angular/common/http';
 import 'rxjs/add/observable/of';
 import dayjs from 'dayjs';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
@@ -66,11 +67,16 @@ import * as i4$1 from '@angular/material/legacy-menu';
 import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
 import * as i2$3 from '@angular/material/legacy-progress-bar';
 import { MatLegacyProgressBarModule } from '@angular/material/legacy-progress-bar';
-import * as i1$5 from '@angular/material/dialog';
-import * as i1$6 from '@angular/material/snack-bar';
+import * as i3$1 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i1$5 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { MatDividerModule } from '@angular/material/divider';
-import * as i4$2 from '@angular/platform-browser';
+import * as i1$6 from '@angular/platform-browser';
+import * as i11 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i10 from '@angular/material/legacy-slide-toggle';
+import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
 
 class ConsumptionService {
     constructor() { }
@@ -1681,6 +1687,10 @@ class WidgetContentLibService {
         return [];
     }
     async getResourseLink(content, enrollmentList, checkForResume, baseContentRead, multilingualId) {
+        if (content && content.publicCard && content.publicCard.baseUrl) {
+            window.open(content.publicCard.baseUrl +
+                '/public/toc/' + content?.identifier + '/overview', '_blank');
+        }
         if (content && content.content && content.content.category === 'Event') {
             const urlData = {
                 url: `app/event-hub/home/${content.content.identifier}`,
@@ -3589,6 +3599,7 @@ class ContentStripWithTabsLibComponent extends WidgetBaseComponent {
                 content,
                 ...(content.batch && { batch: content.batch }),
                 cardSubType: strip.stripConfig && strip.stripConfig.cardSubType,
+                ...(strip.stripConfig && strip.stripConfig.publicCard && { publicCard: strip.stripConfig.publicCard }),
                 cardCustomeClass: strip.customeClass ? strip.customeClass : '',
                 context: { pageSection: strip.key, position: idx },
                 intranetMode: strip.stripConfig && strip.stripConfig.intranetMode,
@@ -5683,7 +5694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
-class TopLearnersComponent {
+let TopLearnersComponent$1 = class TopLearnersComponent {
     constructor(insightSvc) {
         this.insightSvc = insightSvc;
         this.slwConfig = {};
@@ -5790,8 +5801,8 @@ class TopLearnersComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersComponent, deps: [{ token: InsiteDataService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TopLearnersComponent, selector: "sb-uic-top-learners", inputs: { objectData: "objectData", channelId: "channelId", channnelName: "channnelName", slwConfig: "slwConfig" }, ngImport: i0, template: "<div class=\"flex flex-center\">\n    <div class=\"flex items-center flex-wrap justify-center\">\n        <div class=\"title-border w-full\"></div>\n        <div class=\"title w-full\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n        <div class=\"title-border w-full\"></div>\n    </div>    \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n    <div class=\"w-full margin-bottom-l margin-top-l\">\n        <div class=\"flex gap-3\">\n            <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n                <div class=\"flex-item user-box {{objectData?.customClass}}\" [style.height]=\"objectData?.cardHeight\" [style.minHeight]=\"objectData?.cardMinHeight\">\n                    <div class=\"flex gap-3 img-name-sec\">\n                        <div class=\"flex gap-3\">\n                            <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n                                <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n                            </div>\n                            <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n                                [style.backgroundColor]=\"colors[i]\"\n                                >\n                                {{createInititals(obj?.fullName || obj?.fullname)}}\n                            </div>\n                            <div class=\"flex flex-col gap-1\">\n                                <div class=\"name-sec\" *ngIf=\"(obj?.fullName || obj?.fullname)?.length >= 24\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.fullName || obj?.fullname}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.fullName || obj?.fullname}}\n                                </div>\n                                <div class=\"name-sec\" *ngIf=\"(obj?.fullName || obj?.fullname)?.length < 24\">\n                                    {{obj?.fullName || obj?.fullname}}\n                                </div>\n                                <div class=\"designation-sec\" *ngIf=\"obj?.designation?.length >= 32\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.designation}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.designation}}\n                                </div>\n                                <div class=\"designation-sec\"  *ngIf=\"obj?.designation?.length < 32\">{{obj?.designation}}</div>\n                                <div class=\"designation-sec\" *ngIf=\"(obj?.orgName || obj?.org_name)?.length >= 32\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.orgName || obj?.org_name}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.orgName || obj?.org_name}}\n                                </div>\n                                <div class=\"designation-sec\" *ngIf=\"(obj?.orgName || obj?.org_name)?.length < 32\">{{obj?.orgName || obj?.org_name}}</div>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-3\">                                                       \n                            <div class=\"rank-sec\">{{getRank(+obj?.row_num)}}</div>\n                        </div>                        \n                    </div>\n                    <div class=\"flex gap-2 kp-section\" *ngIf=\"!objectData?.hideEle?.includes('karma-points')\">\n                        <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n                        <div class=\"points\">{{obj?.total_points || 0}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n    <div class=\"margin-top-l noData\">\n        No data\n    </div>\n</div>\n\n<ng-container>\n    <div class=\"top-learners-container\" *ngIf=\"loading\">\n        <div class=\"w-full margin-bottom-l margin-top-l\">\n            <div class=\"flex gap-3\">\n                <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n                    <div class=\"flex-item user-box\" >\n                        <div class=\"flex gap-3 img-name-sec\">\n                            <div class=\"flex gap-3\">\n                                <div class=\"profile-pic\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex flex-col gap-1\">\n                                    <div class=\"name-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-3\">                                                       \n                                <div class=\"rank-sec\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>                        \n                        </div>\n                        <div class=\"flex gap-2 kp-section\">\n                            <div class=\"kp-icon\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>   \n                            </div>\n                            <div class=\"points\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>", styles: [".title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:15px}.title-border{margin:10px;width:240px;height:3px;background:linear-gradient(90deg,#fff0,#ef951e 20% 80%,#fff0)}.noData{border:1px solid #1B4CA1;padding:15px;display:flex;justify-content:center;border-radius:12px}.top-learners-container{overflow:auto}::-webkit-scrollbar{height:10px!important}::-webkit-scrollbar-track{border-radius:10px;background:#eff3f9!important}.user-box{width:360px;height:134px;border-radius:8px;background-color:#fff;padding:16px;position:relative}.flex-container{display:flex}.flex-item{flex:0 0 auto;white-space:nowrap}.img-name-sec{justify-content:space-between}.initial{width:44px;height:44px;border-radius:50%;align-items:center;display:flex;justify-content:center;font-weight:700;color:#fff}.user-image{width:44px;height:44px;border-radius:50%}.name-sec{font-family:Lato;font-size:16px;font-weight:700;line-height:19.2px;text-align:left;width:200px!important;overflow:hidden;text-overflow:ellipsis}.designation-sec{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6;width:200px!important;overflow:hidden;text-overflow:ellipsis}.rank-sec{font-family:Montserrat;font-size:36px;font-weight:700;line-height:43.88px;text-align:left;color:#ef951e}.kp-section{justify-content:flex-end;position:absolute;right:18px;bottom:16px;align-items:center}.kp-image{width:32px;height:32px;padding-top:3px}.points{font-family:Lato;font-size:24px;font-weight:700;line-height:28.8px;text-align:left;color:#1b4ca1;padding-bottom:3px}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}@media screen and (max-width: 768px){.user-box{width:343px}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SkeletonLoaderLibComponent, selector: "sb-uic-skeleton-loader", inputs: ["bindingClass", "height", "width"] }, { kind: "directive", type: i4.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersComponent, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersComponent$1, decorators: [{
             type: Component,
             args: [{ selector: 'sb-uic-top-learners', template: "<div class=\"flex flex-center\">\n    <div class=\"flex items-center flex-wrap justify-center\">\n        <div class=\"title-border w-full\"></div>\n        <div class=\"title w-full\" [style.color]=\"objectData?.titleFontColor\">{{objectData?.title}} ({{month}})</div>\n        <div class=\"title-border w-full\"></div>\n    </div>    \n</div>\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length\">\n    <div class=\"w-full margin-bottom-l margin-top-l\">\n        <div class=\"flex gap-3\">\n            <div *ngFor=\"let obj of results; let i=index\" class=\"flex-container\">\n                <div class=\"flex-item user-box {{objectData?.customClass}}\" [style.height]=\"objectData?.cardHeight\" [style.minHeight]=\"objectData?.cardMinHeight\">\n                    <div class=\"flex gap-3 img-name-sec\">\n                        <div class=\"flex gap-3\">\n                            <div class=\"profile-pic\" *ngIf=\"obj?.profile_image\">\n                                <img [src]=\"obj?.profile_image\" class=\"user-image\"/>\n                            </div>\n                            <div class=\"initial\" *ngIf=\"!obj?.profile_image\"\n                                [style.backgroundColor]=\"colors[i]\"\n                                >\n                                {{createInititals(obj?.fullName || obj?.fullname)}}\n                            </div>\n                            <div class=\"flex flex-col gap-1\">\n                                <div class=\"name-sec\" *ngIf=\"(obj?.fullName || obj?.fullname)?.length >= 24\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.fullName || obj?.fullname}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.fullName || obj?.fullname}}\n                                </div>\n                                <div class=\"name-sec\" *ngIf=\"(obj?.fullName || obj?.fullname)?.length < 24\">\n                                    {{obj?.fullName || obj?.fullname}}\n                                </div>\n                                <div class=\"designation-sec\" *ngIf=\"obj?.designation?.length >= 32\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.designation}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.designation}}\n                                </div>\n                                <div class=\"designation-sec\"  *ngIf=\"obj?.designation?.length < 32\">{{obj?.designation}}</div>\n                                <div class=\"designation-sec\" *ngIf=\"(obj?.orgName || obj?.org_name)?.length >= 32\"\n                                    #tooltip=\"matTooltip\"\n                                    [matTooltipClass]=\"'below'\"\n                                    matTooltip=\"{{obj?.orgName || obj?.org_name}}\"\n                                    [matTooltipPosition]=\"'below'\">\n                                        {{obj?.orgName || obj?.org_name}}\n                                </div>\n                                <div class=\"designation-sec\" *ngIf=\"(obj?.orgName || obj?.org_name)?.length < 32\">{{obj?.orgName || obj?.org_name}}</div>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-3\">                                                       \n                            <div class=\"rank-sec\">{{getRank(+obj?.row_num)}}</div>\n                        </div>                        \n                    </div>\n                    <div class=\"flex gap-2 kp-section\" *ngIf=\"!objectData?.hideEle?.includes('karma-points')\">\n                        <div class=\"kp-icon\"><img [src]=\"objectData?.kpIcon\" class=\"kp-image\"/></div>\n                        <div class=\"points\">{{obj?.total_points || 0}}</div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n\n<div class=\"top-learners-container\" *ngIf=\"!loading && results.length === 0\">\n    <div class=\"margin-top-l noData\">\n        No data\n    </div>\n</div>\n\n<ng-container>\n    <div class=\"top-learners-container\" *ngIf=\"loading\">\n        <div class=\"w-full margin-bottom-l margin-top-l\">\n            <div class=\"flex gap-3\">\n                <div *ngFor=\"let obj of [1,2,3]\" class=\"flex-container\">\n                    <div class=\"flex-item user-box\" >\n                        <div class=\"flex gap-3 img-name-sec\">\n                            <div class=\"flex gap-3\">\n                                <div class=\"profile-pic\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                                <div class=\"flex flex-col gap-1\">\n                                    <div class=\"name-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'24px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                    <div class=\"designation-sec\">\n                                        <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'200px'\"\n                                        [height]=\"'16px'\"></sb-uic-skeleton-loader>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"flex gap-3\">                                                       \n                                <div class=\"rank-sec\">\n                                    <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'44px'\"\n                                        [height]=\"'44px'\"></sb-uic-skeleton-loader>\n                                </div>\n                            </div>                        \n                        </div>\n                        <div class=\"flex gap-2 kp-section\">\n                            <div class=\"kp-icon\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                [height]=\"'32px'\"></sb-uic-skeleton-loader>   \n                            </div>\n                            <div class=\"points\">\n                                <sb-uic-skeleton-loader [bindingClass]=\"'flex rounded objIcon'\" [width]=\"'32px'\"\n                                        [height]=\"'32px'\"></sb-uic-skeleton-loader>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-container>", styles: [".title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:center;padding:15px}.title-border{margin:10px;width:240px;height:3px;background:linear-gradient(90deg,#fff0,#ef951e 20% 80%,#fff0)}.noData{border:1px solid #1B4CA1;padding:15px;display:flex;justify-content:center;border-radius:12px}.top-learners-container{overflow:auto}::-webkit-scrollbar{height:10px!important}::-webkit-scrollbar-track{border-radius:10px;background:#eff3f9!important}.user-box{width:360px;height:134px;border-radius:8px;background-color:#fff;padding:16px;position:relative}.flex-container{display:flex}.flex-item{flex:0 0 auto;white-space:nowrap}.img-name-sec{justify-content:space-between}.initial{width:44px;height:44px;border-radius:50%;align-items:center;display:flex;justify-content:center;font-weight:700;color:#fff}.user-image{width:44px;height:44px;border-radius:50%}.name-sec{font-family:Lato;font-size:16px;font-weight:700;line-height:19.2px;text-align:left;width:200px!important;overflow:hidden;text-overflow:ellipsis}.designation-sec{font-family:Lato;font-size:12px;font-weight:400;line-height:14.4px;text-align:left;opacity:.6;width:200px!important;overflow:hidden;text-overflow:ellipsis}.rank-sec{font-family:Montserrat;font-size:36px;font-weight:700;line-height:43.88px;text-align:left;color:#ef951e}.kp-section{justify-content:flex-end;position:absolute;right:18px;bottom:16px;align-items:center}.kp-image{width:32px;height:32px;padding-top:3px}.points{font-family:Lato;font-size:24px;font-weight:700;line-height:28.8px;text-align:left;color:#1b4ca1;padding-bottom:3px}::-webkit-scrollbar{height:4px}::-webkit-scrollbar-track{border-radius:10px;background:#000}::-webkit-scrollbar-thumb{background:#cccc;border-radius:10px}@media screen and (max-width: 768px){.user-box{width:343px}}\n"] }]
         }], ctorParameters: function () { return [{ type: InsiteDataService }]; }, propDecorators: { objectData: [{
@@ -5806,9 +5817,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
 
 class TopLearnersModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersModule, declarations: [TopLearnersComponent], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersModule, declarations: [TopLearnersComponent$1], imports: [CommonModule,
             SkeletonLoaderLibModule,
-            MatLegacyTooltipModule], exports: [TopLearnersComponent] }); }
+            MatLegacyTooltipModule], exports: [TopLearnersComponent$1] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersModule, imports: [CommonModule,
             SkeletonLoaderLibModule,
             MatLegacyTooltipModule] }); }
@@ -5816,13 +5827,13 @@ class TopLearnersModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [TopLearnersComponent],
+                    declarations: [TopLearnersComponent$1],
                     imports: [
                         CommonModule,
                         SkeletonLoaderLibModule,
                         MatLegacyTooltipModule
                     ],
-                    exports: [TopLearnersComponent],
+                    exports: [TopLearnersComponent$1],
                 }]
         }] });
 
@@ -6461,6 +6472,9 @@ class CardPortraitComponent {
         if (this.widgetData && this.widgetData.context && this.widgetData.context.pageSection) {
             contentData['typeOfTelemetry'] = this.widgetData.context.pageSection;
         }
+        if (this.widgetData && this.widgetData.publicCard) {
+            contentData['publicCard'] = this.widgetData.publicCard;
+        }
         if (this.widgetData && this.widgetData.sakshamAIGenerated) {
             contentData['sakshamAIGenerated'] = this.widgetData.sakshamAIGenerated;
         }
@@ -7347,11 +7361,11 @@ class CertificateDialogComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateDialogComponent, deps: [{ token: 'environment' }, { token: i2.EventService }, { token: i2$1.TranslateService }, { token: i2.MultilingualTranslationsService }, { token: i1$3.MatLegacyDialogRef }, { token: MAT_LEGACY_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateDialogComponent, selector: "sb-uic-certificate-dialog", host: { classAttribute: "certificate-inner-dialog-panel" }, ngImport: i0, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex gap-4 flex-row-reverse\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}.close-icon{transition:1s ease-in-out;color:#fff!important}.close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;top:-52px;right:-52px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important;border-radius:50%!important}.ws-mat-accent-border{border:1px solid rgba(255,255,255,.08)}.ws-mat-accent-border-active{border:1px solid rgb(27,76,161);color:#1b4ca1}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button,.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-icon{position:absolute!important;top:19px!important;right:18px!important}\n"], dependencies: [{ kind: "component", type: i4$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatLegacyCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i2.PipeSafeSanitizerPipe, name: "pipeSafeSanitizer" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CertificateDialogComponent, selector: "sb-uic-certificate-dialog", host: { classAttribute: "certificate-inner-dialog-panel" }, ngImport: i0, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex gap-4 flex-row-reverse\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}.close-icon{transition:1s ease-in-out;color:#fff!important}.close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;top:-52px;right:-52px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important;border-radius:60%!important;min-width:0!important}.ws-mat-accent-border{border:1px solid rgba(255,255,255,.08)}.ws-mat-accent-border-active{border:1px solid rgb(27,76,161);color:#1b4ca1}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button,.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-icon{position:absolute!important;top:4px!important;right:4px!important;color:#fff!important;vertical-align:middle}\n"], dependencies: [{ kind: "component", type: i4$1.MatLegacyMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i4$1.MatLegacyMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$1.MatLegacyMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$1.MatLegacyCard, selector: "mat-card", exportAs: ["matCard"] }, { kind: "directive", type: i6$1.MatLegacyCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }, { kind: "directive", type: i6$1.MatLegacyCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i8.MatLegacyAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i2.PipeSafeSanitizerPipe, name: "pipeSafeSanitizer" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CertificateDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sb-uic-certificate-dialog', host: { class: 'certificate-inner-dialog-panel' }, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex gap-4 flex-row-reverse\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}.close-icon{transition:1s ease-in-out;color:#fff!important}.close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;top:-52px;right:-52px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important;border-radius:50%!important}.ws-mat-accent-border{border:1px solid rgba(255,255,255,.08)}.ws-mat-accent-border-active{border:1px solid rgb(27,76,161);color:#1b4ca1}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button,.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-icon{position:absolute!important;top:19px!important;right:18px!important}\n"] }]
+            args: [{ selector: 'sb-uic-certificate-dialog', host: { class: 'certificate-inner-dialog-panel' }, template: "<mat-card class=\"no-shadow certificate-img-box\">\n    <button mat-icon-button class=\"close-button\" [mat-dialog-close]=\"true\">\n        <mat-icon class=\"close-icon\" color=\"warn\">close</mat-icon>\n    </button>\n    <!-- <mat-card-title>\n\n    </mat-card-title> -->\n    <mat-card-content class=\"certificate-img-content\">\n        <img #certificate [src]=\"url| pipeSafeSanitizer: 'url'\" alt=\"Certificate\" role=\"image\" class=\"certificate-banner-image\">\n    </mat-card-content>\n    <mat-card-actions class=\"flex gap-4 flex-row-reverse\">\n        <!-- <ws-widget-svg-to-pdf></ws-widget-svg-to-pdf> -->\n        <a mat-button (click)=\"shareCert()\" class=\"ws-mat-accent-border-active mat-accent btn-custom\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">share</mat-icon>\n            Share\n        </a>\n        <a mat-button [matMenuTriggerFor]=\"menu\" class=\"ws-mat-accent-border-active mat-accent btn-custom\" (click)=\"raiseIntreactTelemetry()\">\n            <mat-icon class=\"mat-icon material-icons-outlined download_icon margin-right-xs\">cloud_download</mat-icon>\n            {{'certificatedialog.download' | translate}}\n        </a>\n        <mat-menu #menu=\"matMenu\">\n            <button mat-menu-item (click)='downloadCertPdf()'>\n                <mat-icon>picture_as_pdf</mat-icon>\n                <span>{{'certificatedialog.pdf' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCertPng()'>\n                <mat-icon>photo</mat-icon>\n                <span>{{'certificatedialog.png' | translate}}</span>\n            </button>\n            <button mat-menu-item (click)='downloadCert()'>\n                <mat-icon>photo_size_select_actual</mat-icon>\n                <span>{{'certificatedialog.svg' | translate}}</span>\n            </button>\n        </mat-menu>\n    </mat-card-actions>\n</mat-card>\n", styles: [".no-shadow{box-shadow:none!important}.certificate-banner-image{height:30rem;display:flex;width:auto;margin:0 auto}@media only screen and (max-width: 1279px){.certificate-banner-image{width:100%;height:auto;flex:1}}.certificate-img-box{max-height:35rem;overflow-y:auto;overflow-x:hidden}.certificate-img-content{overflow:hidden}a.download_btn{background-color:#f0f0f0;border-radius:4px;float:right;height:40px;padding:0 16px;text-align:center;line-height:40px;text-decoration:none;color:#0009;font-size:14px;font-weight:600;margin-top:16px;margin-right:0}.download_icon{font-size:16px;vertical-align:text-top}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important}.close-icon{transition:1s ease-in-out;color:#fff!important}.close-icon:hover{transform:rotate(180deg)}::ng-deep .icon-outside .close-button{float:right;top:-52px;right:-52px}::ng-deep .icon-outside .mat-dialog-container{overflow:unset}::ng-deep .cdk-overlay-pane{max-height:96%!important;overflow-y:auto!important}.certificate-banner-image svg{width:500;height:500}@media only screen and (max-width: 1279px){.certificate-banner-image svg{width:auto;height:auto;flex:1}}.close-button{float:right;top:-16px;right:-12px;height:30px;width:30px;line-height:30px;background:#000!important;color:#fff!important;border-radius:60%!important;min-width:0!important}.ws-mat-accent-border{border:1px solid rgba(255,255,255,.08)}.ws-mat-accent-border-active{border:1px solid rgb(27,76,161);color:#1b4ca1}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button,.btn-custom{box-sizing:border-box;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.close-icon{position:absolute!important;top:4px!important;right:4px!important;color:#fff!important;vertical-align:middle}\n"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
@@ -8068,20 +8082,20 @@ class AddCompetencyPopupComponent {
     submitCompetency() {
         this.modalRef.close(this.selectedList);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCompetencyPopupComponent, deps: [{ token: i1$5.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCompetencyPopupComponent, deps: [{ token: i3$1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AddCompetencyPopupComponent, selector: "sb-uic-add-competency-popup", ngImport: i0, template: "<div class=\"text-center mt-4\">\n    <p mat-dialog-title class=\"ff-montserrat font-bold text-xl\">Select skills which you want to learn.</p>\n    <p class=\"lato font-normal text-sm\">Based on you choice, We will recommend best suitable content for you.</p>\n</div>\n<mat-dialog-content>\n    <div class=\"enrollment-list-wrapper\">\n        <div class=\"flex iteams-center justify-between flex-col\">\n            <div>\n                <div class=\"mat-full-radius\">\n                    <mat-form-field appearance=\"outline\" class=\"margin-top-xs stakeholders w-full\">\n                        <mat-icon matPrefix>search</mat-icon>\n                        <input matInput #search maxlength=\"70\" i18n-placeholder placeholder=\"Search\"\n                            [formControl]=\"searchTextCtrl\">\n                    </mat-form-field>\n                </div>\n                <div class=\"form_item_full\">\n                    <div class=\"max-height-320\" *ngIf=\"selectedList && selectedList?.length > 0\">\n                        <div class=\"flex flex-row justify-between w-full\">\n                            <div class=\"flex flex-row w-90\">\n                                <div class=\"font-normal mt-5 w-17\">Selected Items <span\n                                        *ngIf=\"selectedList && selectedList?.length\">({{(selectedList) ?\n                                        (selectedList?.length) :\n                                        '0'}})</span>\n                                    :</div>\n                                <div class=\"flex flex-row flex-wrap\" [ngClass]=\"showMore ? 'w-78':''\">\n                                    <ng-container *ngFor=\"let org of selectedList | slice : 0:sliceCount\">\n                                        <div class=\"flex items-center orgBoxChip margin-bottom-s px-4 py-3 mt-2 ml-4\">\n                                            <div class=\"flex-col flex-1\">\n                                                <h3\n                                                    class=\"mat-h2 margin-remove inline-block flex-1 long-text-wrap-new-ui\">\n                                                    <span *ngIf=\"org?.orgName?.length > 25\">{{org?.orgName | slice : 0 :\n                                                        25}}...</span>\n                                                    <span *ngIf=\"org?.orgName?.length < 25\">{{org?.orgName}}</span>\n                                                </h3>\n                                            </div>\n                                            <mat-icon matPrefix\n                                                class=\"flex items-right justify-right margin-right-0 cursor-pointer close-rounded ml-6\"\n                                                (click)=\"removeSelectedOrg(org)\">close</mat-icon>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                                <div class=\"more mt-5 ml-2 w-10\"\n                                    *ngIf=\"selectedList?.length > 0 && sliceCount < selectedList?.length\">\n                                    <a href=\"javascript:void(0)\" (click)=\"showMoreSelectedOrg()\">+{{selectedList?.length\n                                        -\n                                        sliceCount}}\n                                        more</a>\n                                </div>\n                                <div class=\"more mt-5 ml-2\"\n                                    *ngIf=\"showMore && selectedList?.length > 0 && selectedList?.length === sliceCount\">\n                                    <a href=\"javascript:void(0)\" (click)=\"showLessSelectedOrg()\">Show less</a>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row mt-5 w-10 justify-end\">\n                                <div class=\"more\" *ngIf=\"selectedList?.length > 1 \">\n                                    <a href=\"javascript:void(0)\" (click)=\"clearAll()\">Clear all</a>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div class=\"max-height-320 padding-left-s mt-3 border-section\">\n                    <div *ngFor=\"let value of orgList\" class=\"custome-checkbox margin-bottom-s\">\n                        <mat-checkbox (change)=\"selectedOrgChange($event.checked, value)\" [checked]=\"value.checked\">\n                            <div class=\"margin-left-sm\">\n                                <h3 class=\"margin-remove inline-block flex-1 long-text-wrap\">\n                                    {{value.orgName}}\n                                </h3>\n                            </div>\n                        </mat-checkbox>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex justify-center py-4 gap-4\">\n    <button mat-button mat-dialog-close class=\"mat-btn-outline\" (click)=\"cancelModal()\">Cancel</button>\n    <button mat-button class=\"mat-btn-flat\" (click)=\"submitCompetency()\">Submit</button>\n</mat-dialog-actions>", styles: [".ff-montserrat{font-family:Montserrat}.section-btn{height:32px;width:100px;background-color:#fff!important;color:#0006!important;font:700 14px Lato;border-radius:16px;border:1px solid rgba(0,0,0,.4)}.section-btn.active-section-btn{background-color:#1b4ca129!important;border:1px solid #1B4CA1;color:#1b4ca1!important}.subtite-color{color:#0009}.border-bottom-c{border-bottom:2px solid rgba(0,0,0,.0784313725)!important}.long-text-wrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:14px;font-family:Lato;color:#000000de}.long-text-wrap-new-ui{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:131px;line-height:14px;color:#0000008a;font-size:14px;font-weight:400}.custome-icon-font-size{font-size:12px;line-height:12px}.subheading{font-size:12px;color:#0009}.custome-checkbox ::ng-deep .mat-checkbox-layout{margin-bottom:10px}.orgBox{background-color:#f5f5f5;border-radius:5px}.max-height-320{max-height:230px;overflow-y:auto}.max-height-320::-webkit-scrollbar{width:5px}.max-height-320::-webkit-scrollbar-track{background:#f1f1f1}.max-height-320::-webkit-scrollbar-thumb{background:#888;border-radius:100vw}.max-height-320::-webkit-scrollbar-thumb:hover{background:#555}.custome-slide{font-size:14px;font-weight:400!important;width:auto}.disable{opacity:.3;pointer-events:none;cursor:none}::ng-deep .stakeholders .mat-form-field-wrapper{padding:0}.border-section{border-radius:8px;border:1px solid rgba(0,0,0,.0784313725);padding:16px;background-color:#fff;padding:1.2rem}.orgBoxChip{background-color:#fff;border-radius:27px;border:1px solid rgba(0,0,0,.08);height:23px}.align-center{align-items:center}.more{color:#1b4ca1;margin-left:6px;font-weight:700;font-size:14px}.margin-right-0{margin-right:0!important}.w-90{width:90%}.w-10{width:10%}.w-78{width:78%}.w-17{width:15%}.black-text{color:#000!important}.enrollment-list-wrapper{padding:1rem}.margin-left-sm{margin-left:4px}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:30px}::ng-deep .mat-full-radius .mat-form-field .mat-form-field-outline-end{border-radius:0 30px 30px 0!important}::ng-deep .mat-full-radius .mat-form-field .mat-form-field-outline-start{border-radius:30px 0 0 30px!important;flex-grow:1}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-infix{padding:6px 0 15px}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(5%)}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-flex{padding:0 16px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i1$3.MatLegacyDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$3.MatLegacyDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$3.MatLegacyDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$3.MatLegacyDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i5.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLegacyPrefix, selector: "[matPrefix]" }, { kind: "directive", type: i7$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i7$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7$2.MatLegacyCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddCompetencyPopupComponent, decorators: [{
             type: Component,
             args: [{ selector: "sb-uic-add-competency-popup", template: "<div class=\"text-center mt-4\">\n    <p mat-dialog-title class=\"ff-montserrat font-bold text-xl\">Select skills which you want to learn.</p>\n    <p class=\"lato font-normal text-sm\">Based on you choice, We will recommend best suitable content for you.</p>\n</div>\n<mat-dialog-content>\n    <div class=\"enrollment-list-wrapper\">\n        <div class=\"flex iteams-center justify-between flex-col\">\n            <div>\n                <div class=\"mat-full-radius\">\n                    <mat-form-field appearance=\"outline\" class=\"margin-top-xs stakeholders w-full\">\n                        <mat-icon matPrefix>search</mat-icon>\n                        <input matInput #search maxlength=\"70\" i18n-placeholder placeholder=\"Search\"\n                            [formControl]=\"searchTextCtrl\">\n                    </mat-form-field>\n                </div>\n                <div class=\"form_item_full\">\n                    <div class=\"max-height-320\" *ngIf=\"selectedList && selectedList?.length > 0\">\n                        <div class=\"flex flex-row justify-between w-full\">\n                            <div class=\"flex flex-row w-90\">\n                                <div class=\"font-normal mt-5 w-17\">Selected Items <span\n                                        *ngIf=\"selectedList && selectedList?.length\">({{(selectedList) ?\n                                        (selectedList?.length) :\n                                        '0'}})</span>\n                                    :</div>\n                                <div class=\"flex flex-row flex-wrap\" [ngClass]=\"showMore ? 'w-78':''\">\n                                    <ng-container *ngFor=\"let org of selectedList | slice : 0:sliceCount\">\n                                        <div class=\"flex items-center orgBoxChip margin-bottom-s px-4 py-3 mt-2 ml-4\">\n                                            <div class=\"flex-col flex-1\">\n                                                <h3\n                                                    class=\"mat-h2 margin-remove inline-block flex-1 long-text-wrap-new-ui\">\n                                                    <span *ngIf=\"org?.orgName?.length > 25\">{{org?.orgName | slice : 0 :\n                                                        25}}...</span>\n                                                    <span *ngIf=\"org?.orgName?.length < 25\">{{org?.orgName}}</span>\n                                                </h3>\n                                            </div>\n                                            <mat-icon matPrefix\n                                                class=\"flex items-right justify-right margin-right-0 cursor-pointer close-rounded ml-6\"\n                                                (click)=\"removeSelectedOrg(org)\">close</mat-icon>\n                                        </div>\n                                    </ng-container>\n                                </div>\n                                <div class=\"more mt-5 ml-2 w-10\"\n                                    *ngIf=\"selectedList?.length > 0 && sliceCount < selectedList?.length\">\n                                    <a href=\"javascript:void(0)\" (click)=\"showMoreSelectedOrg()\">+{{selectedList?.length\n                                        -\n                                        sliceCount}}\n                                        more</a>\n                                </div>\n                                <div class=\"more mt-5 ml-2\"\n                                    *ngIf=\"showMore && selectedList?.length > 0 && selectedList?.length === sliceCount\">\n                                    <a href=\"javascript:void(0)\" (click)=\"showLessSelectedOrg()\">Show less</a>\n                                </div>\n                            </div>\n                            <div class=\"flex flex-row mt-5 w-10 justify-end\">\n                                <div class=\"more\" *ngIf=\"selectedList?.length > 1 \">\n                                    <a href=\"javascript:void(0)\" (click)=\"clearAll()\">Clear all</a>\n                                </div>\n                            </div>\n                        </div>\n\n                    </div>\n                </div>\n                <div class=\"max-height-320 padding-left-s mt-3 border-section\">\n                    <div *ngFor=\"let value of orgList\" class=\"custome-checkbox margin-bottom-s\">\n                        <mat-checkbox (change)=\"selectedOrgChange($event.checked, value)\" [checked]=\"value.checked\">\n                            <div class=\"margin-left-sm\">\n                                <h3 class=\"margin-remove inline-block flex-1 long-text-wrap\">\n                                    {{value.orgName}}\n                                </h3>\n                            </div>\n                        </mat-checkbox>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n    </div>\n</mat-dialog-content>\n<mat-dialog-actions class=\"flex justify-center py-4 gap-4\">\n    <button mat-button mat-dialog-close class=\"mat-btn-outline\" (click)=\"cancelModal()\">Cancel</button>\n    <button mat-button class=\"mat-btn-flat\" (click)=\"submitCompetency()\">Submit</button>\n</mat-dialog-actions>", styles: [".ff-montserrat{font-family:Montserrat}.section-btn{height:32px;width:100px;background-color:#fff!important;color:#0006!important;font:700 14px Lato;border-radius:16px;border:1px solid rgba(0,0,0,.4)}.section-btn.active-section-btn{background-color:#1b4ca129!important;border:1px solid #1B4CA1;color:#1b4ca1!important}.subtite-color{color:#0009}.border-bottom-c{border-bottom:2px solid rgba(0,0,0,.0784313725)!important}.long-text-wrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;line-height:14px;font-family:Lato;color:#000000de}.long-text-wrap-new-ui{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:131px;line-height:14px;color:#0000008a;font-size:14px;font-weight:400}.custome-icon-font-size{font-size:12px;line-height:12px}.subheading{font-size:12px;color:#0009}.custome-checkbox ::ng-deep .mat-checkbox-layout{margin-bottom:10px}.orgBox{background-color:#f5f5f5;border-radius:5px}.max-height-320{max-height:230px;overflow-y:auto}.max-height-320::-webkit-scrollbar{width:5px}.max-height-320::-webkit-scrollbar-track{background:#f1f1f1}.max-height-320::-webkit-scrollbar-thumb{background:#888;border-radius:100vw}.max-height-320::-webkit-scrollbar-thumb:hover{background:#555}.custome-slide{font-size:14px;font-weight:400!important;width:auto}.disable{opacity:.3;pointer-events:none;cursor:none}::ng-deep .stakeholders .mat-form-field-wrapper{padding:0}.border-section{border-radius:8px;border:1px solid rgba(0,0,0,.0784313725);padding:16px;background-color:#fff;padding:1.2rem}.orgBoxChip{background-color:#fff;border-radius:27px;border:1px solid rgba(0,0,0,.08);height:23px}.align-center{align-items:center}.more{color:#1b4ca1;margin-left:6px;font-weight:700;font-size:14px}.margin-right-0{margin-right:0!important}.w-90{width:90%}.w-10{width:10%}.w-78{width:78%}.w-17{width:15%}.black-text{color:#000!important}.enrollment-list-wrapper{padding:1rem}.margin-left-sm{margin-left:4px}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:30px}::ng-deep .mat-full-radius .mat-form-field .mat-form-field-outline-end{border-radius:0 30px 30px 0!important}::ng-deep .mat-full-radius .mat-form-field .mat-form-field-outline-start{border-radius:30px 0 0 30px!important;flex-grow:1}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-infix{padding:6px 0 15px}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-select-arrow-wrapper{transform:translateY(5%)}::ng-deep .mat-full-radius .mat-form-field-appearance-outline .mat-form-field-flex{padding:0 16px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$5.MatDialogRef }]; } });
+        }], ctorParameters: function () { return [{ type: i3$1.MatDialogRef }]; } });
 
 class SnackbarComponent {
     constructor(data, snackBarRef) {
         this.data = data;
         this.snackBarRef = snackBarRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$6.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$5.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SnackbarComponent, selector: "sb-uic-snackbar", ngImport: i0, template: "<div class=\"snackbar-wrapper\">\n    <div class=\"flex items-center justify-between\">\n      <div class=\"message flex items-center gap-4\">\n        <mat-icon *ngIf=\"data?.type === 'success'\" class=\"text-white\">check</mat-icon>\n        <!-- <mat-icon *ngIf=\"data?.type === 'error'\" class=\"text-white\">close</mat-icon> -->\n        <span *ngIf=\"data?.message\" class=\"text-white\">{{data?.message}}</span>\n      </div>\n      <div class=\"close\">\n        <mat-icon class=\"cursor-pointer\" (click)=\"snackBarRef.dismiss()\" class=\"text-white\">close</mat-icon>\n      </div>\n    </div>\n  </div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SnackbarComponent, decorators: [{
@@ -8090,7 +8104,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
-                }] }, { type: i1$6.MatSnackBarRef }]; } });
+                }] }, { type: i1$5.MatSnackBarRef }]; } });
 
 class ConfirmationDialogComponent {
     constructor(dialogRef, data) {
@@ -10965,7 +10979,7 @@ class ContentStripWithTabsPillsComponent extends WidgetBaseComponent {
             this.stripsResultDataMap[strip.key].showOnLoader = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentStripWithTabsPillsComponent, deps: [{ token: 'environment' }, { token: WidgetContentLibService }, { token: i2.LoggerService }, { token: i2.EventService }, { token: i2.ConfigurationsService }, { token: i2.UtilityService }, { token: i1$1.Router }, { token: WidgetUserServiceLib }, { token: i2$1.TranslateService }, { token: MultilingualTranslationsService }, { token: i2.WidgetEnrollService }, { token: i1$5.MatDialog }, { token: i1$6.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentStripWithTabsPillsComponent, deps: [{ token: 'environment' }, { token: WidgetContentLibService }, { token: i2.LoggerService }, { token: i2.EventService }, { token: i2.ConfigurationsService }, { token: i2.UtilityService }, { token: i1$1.Router }, { token: WidgetUserServiceLib }, { token: i2$1.TranslateService }, { token: MultilingualTranslationsService }, { token: i2.WidgetEnrollService }, { token: i3$1.MatDialog }, { token: i1$5.MatSnackBar }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentStripWithTabsPillsComponent, selector: "sb-uic-content-strip-with-tabs-pills", inputs: { widgetData: "widgetData", providerId: "providerId", emitViewAll: "emitViewAll", channnelName: "channnelName" }, outputs: { emptyResponse: "emptyResponse", viewAllResponse: "viewAllResponse", telemtryResponse: "telemtryResponse" }, host: { properties: { "id": "this.id" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"!contentAvailable; else otherTemplate\"></ng-container>\n<ng-template #otherTemplate>\n  <!-- <div *ngIf=\"showParentLoader\" class=\"text-center my-2\">\n    <mat-spinner class=\"inline-block\"></mat-spinner>\n  </div> -->\n  <ng-container *ngIf=\"showParentError\" [sbUiResolverWidget]=\"widgetData.errorWidget\"></ng-container>\n  <ng-container *ngIf=\"showParentNoData\" [sbUiResolverWidget]=\"widgetData.noDataWidget\"></ng-container>\n  <ng-container *ngFor=\"let key of stripsKeyOrder; let i = index; trackBy: identify\">\n    <ng-container *ngIf=\"isStripShowing(stripsResultDataMap[key]) && canShowHeading(stripsResultDataMap[key])\">\n      <a name=\"{{stripsResultDataMap[key]?.stripTitle}}\" [class]=\"key\">\n        <div *ngIf=\"stripsResultDataMap && (getLength(stripsResultDataMap[key]) ||\n                    stripsResultDataMap[key]?.showOnNoData ||\n                    stripsResultDataMap[key]?.showOnLoader ||\n                    stripsResultDataMap[key]?.showOnError)\n                  \" [ngClass]=\"\n                    !widgetData?.isChannelStrip ? 'xs:px-8 sx:px-10ss' : i > 0 ? 'mt-12' : ''\n                  \" [id]=\"key\" [ngClass]=\"!widgetData?.isChannelStrip ? 'margin-bottom-custom' : 'margin-bottom-xs'\">\n          <div [ngClass]=\"{ pad: stripsResultDataMap[key]?.stripBackground }\"\n            [ngStyle]=\"{ 'background-color': stripsResultDataMap[key]?.stripBackground }\">\n            <div class=\"flex flex-col pl-4 pr-4 md:pr-0 md:pl-0 \" [ngClass]=\"\n                        !widgetData?.isChannelStrip\n                          ? ''\n                          : stripsResultDataMap[key]?.stripTitle\n                          ? 'mb-8'\n                          : ''\n                      \">\n              <div class=\"flex flex-1 items-center\">\n                <p class=\"mat-subheading-1 margin-remove inline-block \" *ngIf=\"stripsResultDataMap[key]?.stripTitle\">\n                  <span class=\"capitalize\" *ngIf=\"stripsResultDataMap[key]?.disableTranslate\">\n                    {{stripsResultDataMap[key]?.stripTitle}}\n                  </span>\n                  <span *ngIf=\"!stripsResultDataMap[key]?.disableTranslate\">\n                    {{ translateLabels(stripsResultDataMap[key]?.stripTitle, 'home') }}\n                  </span>\n                </p>\n\n                <button *ngIf=\"stripsResultDataMap[key]?.stripInfo?.icon\" type=\"button\" mat-icon-button\n                  (click)=\"toggleInfo(stripsResultDataMap[key])\" i18n-matTooltip matTooltip=\"info\"\n                  class=\"margin-left-xs\">\n                  <mat-icon>{{ stripsResultDataMap[key]?.stripInfo?.icon.icon }}</mat-icon>\n                </button>\n                <a *ngIf=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [routerLink]=\"stripsResultDataMap[key]?.stripTitleLink?.link\"\n                  [queryParams]=\"stripsResultDataMap[key]?.stripTitleLink?.link?.queryParams\">\n                  <mat-icon class=\"ws-mat-primary-primary-text ws-mat-default-text\" [color]=\"'accent'\">{{\n                    stripsResultDataMap[key]?.stripTitleLink?.icon }}</mat-icon>\n                </a>\n                <span class=\"spacer\"></span>\n                <!-- viewAll start-->\n                <div *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key])\" class=\"block md:hidden\">\n                  <div class=\"ml-4 pl-2 view-more ws-mat-default-text  \">\n                    <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\"\n                      (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                      <span i18n\n                        class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0]?.viewMoreUrl?.viewMoreText,'home')\n                        || 'See all'}}</span>\n                      <mat-icon class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\"\n                        color=\"accent\">navigate_next</mat-icon>\n                    </a>\n                  </div>\n                </div>\n                <!-- viewAll end-->\n              </div>\n              <button mat-icon-button (click)=\"setHiddenForStrip(key)\" *ngIf=\"stripsResultDataMap[key]?.canHideStrip\">\n                <mat-icon>close</mat-icon>\n              </button>\n              <mat-icon class=\"cursor-pointer\" *ngIf=\"stripsResultDataMap[key]?.mode === 'accordion' && isMobile\"\n                (click)=\"showAccordionData = !showAccordionData\">{{ showAccordionData ? 'expand_less' : 'expand_more' }}\n              </mat-icon>\n            </div>\n\n            <div class=\"mb-4\" *ngIf=\"checkVisible(stripsResultDataMap[key])\">\n              <ng-container [sbUiResolverWidget]=\"getdata(stripsResultDataMap[key])\">\n              </ng-container>\n            </div>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnNoData\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.noDataWidget\"></ng-container>\n            <ng-container *ngIf=\"stripsResultDataMap[key]?.showOnError\"\n              [sbUiResolverWidget]=\"stripsResultDataMap[key]?.errorWidget\"></ng-container>\n            <!-- IF no errors then proceed to show tabs or non tabs strip -->\n            <ng-container *ngIf=\"!stripsResultDataMap[key]?.showOnNoData && !stripsResultDataMap[key]?.showOnError\">\n              <ng-container *ngIf=\"stripsResultDataMap[key].tabs && stripsResultDataMap[key].tabs.length\">\n                <mat-tab-group animationDuration=\"0ms\" [selectedIndex]=\"getSelectedIndex(stripsResultDataMap[key], key)\"\n                  class=\"mat-tab-labels w-full strips-tabgroup padding-bottom-tabs\" dynamicHeight\n                  (selectedIndexChange)=\"tabClicked($event, 0, stripsResultDataMap[key], key)\">\n                  <ng-container *ngFor=\"let tab of stripsResultDataMap[key].tabs; let last = last;let tabIndex = index\">\n                    <mat-tab *ngIf=\"!tab?.hideTab\">\n                      <ng-template mat-tab-label>\n                        <ng-container *ngIf=\"tab?.value !== sakshamAIEnum.SakshamAI\">\n                          <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                          <span *ngIf=\"tab?.showTabDataCount && tab?.widgets?.length\">({{tab?.widgets?.length}})</span>\n                        </ng-container>\n                        <ng-container *ngIf=\"tab?.value === sakshamAIEnum.SakshamAI\">\n                          <div class=\"flex items-center\">\n                            <img src=\"/assets/images/sakshamAI/ai-icon.svg\" alt=\"loader\" width=\"16\" height=\"16\"\n                              class=\"mr-2\">\n                            <span>{{ translateLabels(tab?.label, 'home') }} &nbsp;</span>\n                            <mat-icon svgIcon=\"info-outline\"\n                              class=\"margin-remove w-16-px cursor-pointer request-id-toolTip m-px\"\n                              [matTooltip]=\"'home.sakshamAITooltip' | translate\" [matTooltipPosition]=\"'above'\"\n                              matTooltipClass=\"request-id-toolTip\"></mat-icon>\n                          </div>\n                        </ng-container>\n                      </ng-template>\n                      <div class=\"wfull wrapper-saksham\"\n                        *ngIf=\"tab?.pillsData && tab?.pillsData?.length && !tab?.hideTab\"\n                        [ngClass]=\"{'overlay-max-height': recommendationPopup || sakshamFeedbackPopup}\">\n                        <div class=\"pt-3 flex justify-between item-center\">\n                          <ng-container *ngIf=\"tab?.value !== sakshamAIEnum.SakshamAI\">\n                            <div class=\" flex items-center\">\n                              <mat-chip-list class=\"content-pill\" aria-label=\"Fish selection\">\n                                <ng-container *ngFor=\"let pill of tab?.pillsData;let p = index\">\n                                  <mat-chip [selected]=\"pill?.selected\"\n                                    (click)=\"pillClicked($event, stripsResultDataMap[key], key, p, tabIndex)\">\n                                    <span class=\"pill-name\">{{pill?.label}}</span></mat-chip>\n                                </ng-container>\n                              </mat-chip-list>\n                            </div>\n                          </ng-container>\n                          <!-- viewAll start-->\n                          <div\n                            *ngIf=\"checkCondition(widgetData , stripsResultDataMap[key]) && tab?.value !== sakshamAIEnum.SakshamAI\"\n                            class=\" hidden md:block\">\n                            <div class=\"ml-4 pl-2 view-more ws-mat-default-text\">\n                              <a class=\"flex ws-mat-default-text items-center justify-center mat-body-1 cursor-pointer\"\n                                (click)=\"raiseTelemetry(stripsResultDataMap[key]);redirectViewAll(stripsResultDataMap[key], stripsResultDataMap[key]?.viewMoreUrl?.path, stripsResultDataMap[key]?.viewMoreUrl?.queryParams )\">\n                                <span i18n\n                                  class=\"ws-mat-default-text\">{{translateLabels(widgetData.strips[0]?.viewMoreUrl?.viewMoreText,'home')\n                                  || 'See all'}}</span>\n                                <mat-icon\n                                  class=\"ws-mat-default-text mat-icon notranslate material-icons mat-icon-no-color\"\n                                  color=\"accent\">navigate_next</mat-icon>\n                              </a>\n                            </div>\n                          </div>\n                          <!-- viewAll end-->\n                        </div>\n                        <div *ngIf=\"(stripsResultDataMap && stripsResultDataMap[key]?.showOnLoader ||\n                         !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus) && !sakshamLoader\"\n                          class=\"text-center my-2\">\n                          <sb-uic-horizontal-scroller-v2 [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                            [id]=\"key+'-scroller'\" [loadStatus]=\"'fetching'\"\n                            [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\">\n                            <ng-container\n                              *ngFor=\"let widget of stripsResultDataMap[key]?.loaderWidgets; trackBy: tracker\">\n                              <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                            </ng-container>\n                          </sb-uic-horizontal-scroller-v2>\n                        </div>\n                        <ng-container\n                          *ngIf=\"tab?.pillsData && tab?.pillsData.length && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]\">\n                          <div\n                            *ngIf=\"((tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus && tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done') &&\n                         (!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets || !tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length))\">\n                            <ng-container\n                              *ngIf=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.value === 'inprogress'; else msgTemp\">\n                              <div class=\"w-full flex flex-col items-center justify-center\">\n                                <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.svg\">\n                                <div class=\"mat-subheading-1 text-center info-content\">{{\n                                  'contentstripmultiple.getReadyForLearningAdventure' | translate }} -\n                                  <a class=\"click-here\"\n                                    [routerLink]=\"tab?.label === 'Events' ? '/app/event-hub/home':'/page/learn'\">{{\n                                    'contentstripmultiple.clickHere' | translate }}</a> <span\n                                    *ngIf=\" tab?.label === 'Events'\">{{'contentstripmultiple.toEnrollNextEvents' |\n                                    translate }}</span>\n                                  <span *ngIf=\" tab?.label !== 'Events'\">{{ 'contentstripmultiple.toEnrollNextCourse' |\n                                    translate }}</span>\n                                </div>\n                              </div>\n                            </ng-container>\n                            <ng-template #msgTemp>\n                              <div class=\"w-full flex flex-col items-center justify-center\">\n                                <img alt=\"\" class=\"mt-4 mb-4\" src=\"assets/icons/home/nodataDefault.png\">\n                                <div class=\"mat-subheading-1 text-center\">{{\n                                  translateLabels(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.nodataMsg,\n                                  'home') }}</div>\n                              </div>\n                            </ng-template>\n                          </div>\n                        </ng-container>\n                        <ng-container\n                          *ngIf=\"(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.fetchTabStatus === 'done' || tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length)\">\n                          <ng-container *ngIf=\"!tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.tabLoading\">\n                            <sb-uic-horizontal-scroller-v2 [id]=\"key+'-scroller'\"\n                              [sliderConfig]=\"stripsResultDataMap[key]?.sliderConfig\"\n                              [widgetsLength]=\"tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets?.length\"\n                              *ngIf=\"getContineuLearningLenth(stripsResultDataMap[key]) && showAccordion(key)\"\n                              [loadStatus]=\"'done'\" [defaultMaxWidgets]=\"tab?.value === sakshamAIEnum.SakshamAI ? maxWidgetsSakshamAI : tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                               stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets\"\n                              [stripConfig]=\"stripsResultDataMap[key]?.stripConfig\" [extraMeta]=\"tab\">\n                              <!-- <ng-container\n                                *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets| slice:0:(tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                               stripsResultDataMap[key]?.sliderConfig?.maxWidgets || defaultMaxWidgets); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container> -->\n                              <ng-container\n                                *ngFor=\"let widget of tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.widgets | slice:0:(\n                                  tab?.value === sakshamAIEnum.SakshamAI \n                                    ? maxWidgetsSakshamAI \n                                    : tab?.pillsData[getSelectedPillIndex(tab ,tabIndex)]?.maxWidgets ||\n                                      stripsResultDataMap[key]?.sliderConfig?.maxWidgets || \n                                      defaultMaxWidgets\n                                ); trackBy: tracker\">\n                                <ng-container [sbUiResolverWidget]=\"widget\"></ng-container>\n                              </ng-container>\n\n                            </sb-uic-horizontal-scroller-v2>\n                          </ng-container>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"tab?.value === sakshamAIEnum.SakshamAI\">\n                          <ng-container *ngIf=\"recommendationPopup\">\n                            <div class=\"greet-overlay\" @fadeInOut>\n                              <img src=\"/assets/images/sakshamAI/lady-greet.svg\" alt=\"greet\" width=\"106\">\n                              <div class=\"overlay-text mt-4 text-white\">\n                                {{'home.sakshamaidesc' | translate}}\n                              </div>\n                              <button mat-raised-button class=\"overlay-button\"\n                                (click)=\"recommendationPopup = false\">{{'profileInfo.ok' | translate}}</button>\n                            </div>\n                          </ng-container>\n\n                          <ng-container *ngIf=\"sakshamFeedbackPopup\" >\n                            <div class=\"greet-overlay feedback-overlay\" @fadeInOut>\n                              <div class=\"overlay-text mt-4 text-white\">\n                                {{'home.sakshamaifeedbackText' | translate}}\n                              </div>\n                              <mat-form-field class=\"feedback-text w-4/5 mt-4\" appearance=\"outline\">\n                                <textarea matInput placeholder=\"Enter your feedback...\" rows=\"4\" #feedback [maxLength]=\"500\"></textarea>\n                              </mat-form-field>\n                              <div class=\"action-feedback mt-4 flex gap-4 justify-center items-center\">\n                                <button mat-raised-button class=\"overlay-button\"\n                                  (click)=\"saveFeedback(feedback.value)\">{{'userProfile.submit' | translate}}\n                                </button>\n                                <button mat-raised-button class=\"overlay-button-transparent\"\n                                  (click)=\"cancelFeedbackPopup()\">{{'userProfile.cancel' | translate}}</button>\n                              </div>\n                            </div>\n                          </ng-container>\n\n                          <ng-container *ngIf=\"sakshamAddCompetency\">\n                            <div class=\"text-center py-6\">\n                              <div class=\"saksham-load-text text-sm font-normal lato\">\n                                Let us know what do you want to learn today!\n                              </div>\n                              <button mat-raised-button class=\"overlay-button mt-4\" (click)=\"addCompetency()\">\n                                <mat-icon class=\"mb-1\">add</mat-icon>\n                                Add Competency</button>\n\n                            </div>\n                          </ng-container>\n\n                          <!-- Loader and Content -->\n                          <ng-container *ngIf=\"sakshamLoader\">\n                            <div class=\"w-full text-center py-6\">\n                              <img src=\"/assets/images/sakshamAI/saksham_ai_loader-2.gif\" alt=\"loader\" class=\"mb-3\"\n                                width=\"100\" height=\"100\">\n                              <div class=\"saksham-load-text text-sm font-normal lato\">\n                                {{'home.sakshamaiLoaderText' | translate}}\n                              </div>\n                            </div>\n                          </ng-container>\n                        </ng-container>\n                      </div>\n\n                    </mat-tab>\n                  </ng-container>\n                </mat-tab-group>\n              </ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </a>\n\n    </ng-container>\n  </ng-container>\n</ng-template>", styles: [".view-more{display:flex;align-items:center;text-align:center;height:40px;justify-content:center}.view-more .icon{font-size:24px;width:24px;height:24px;border:1px solid;border-radius:50%;padding:8px;margin-bottom:8px}.view-more:hover{background-color:#dcdfe5}::ng-deep .strips-tabgroup .mat-tab-header{border-bottom:2px solid rgba(0,0,0,.12)}::ng-deep .strips-tabgroup.padding-bottom-tabs .mat-tab-body{padding:0!important;box-sizing:border-box;overflow-y:initial!important}::ng-deep .strips-tabgroup .mat-tab-body-wrapper{overflow:inherit!important}::ng-deep .strips-tabgroup .mat-tab-label{border-bottom:0px solid rgba(0,0,0,.1);margin-right:0;opacity:1}::ng-deep .strips-tabgroup .mat-tab-label .mat-tab-label-content{text-transform:inherit;font:400 14px/20px Lato}::ng-deep .strips-tabgroup .mat-tab-label-active .mat-tab-label-content{font-weight:700!important}::ng-deep .mat-tab-header-pagination{display:none!important}.click-here{color:#1b4ca1}.info-content{opacity:1;color:#000000de;font:700 14px/20px Lato-Bold;text-align:center}.active{background:#1b4ca1!important}.active .pill-name{color:#fff!important}::ng-deep .content-pill .mat-chip-selected{background-color:#1b4ca1!important}::ng-deep .content-pill .mat-chip-selected .pill-name{color:#fff!important}.saksham-load-text{line-height:16.8px}.lato{font-family:Lato}.wrapper-saksham{position:relative}.overlay-max-height{min-height:348px}.greet-overlay{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:999;background:#0000008f;border-radius:12px}.overlay-text{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;max-width:454px}.overlay-button,.overlay-button-transparent{margin-top:20px;color:#000!important;height:40px;border-radius:41px;font-size:14px;font-weight:700!important}.overlay-button-transparent{background:transparent!important;border:1px solid #ffffff;color:#fff!important}:host ::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline{border-radius:4px}::ng-deep .request-id-toolTip.mat-icon{width:16px!important;margin-top:-3px!important;vertical-align:middle;height:16px}\n"], dependencies: [{ kind: "directive", type: i7.SbUiResolverDirective, selector: "[sbUiResolverWidget]", inputs: ["sbUiResolverWidget"] }, { kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: HorizontalScrollerV2Component, selector: "sb-uic-horizontal-scroller-v2", inputs: ["loadStatus", "id", "onHover", "sliderConfig", "widgetsLength", "defaultMaxWidgets", "stripConfig", "extraMeta"], outputs: ["loadNext"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4.MatLegacyTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i14.MatLegacyChipList, selector: "mat-chip-list", inputs: ["role", "aria-describedby", "errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { kind: "directive", type: i14.MatLegacyChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "role", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { kind: "component", type: i5.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i13.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }], animations: [fadeAnimation] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentStripWithTabsPillsComponent, decorators: [{
@@ -10974,7 +10988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
-                }] }, { type: WidgetContentLibService }, { type: i2.LoggerService }, { type: i2.EventService }, { type: i2.ConfigurationsService }, { type: i2.UtilityService }, { type: i1$1.Router }, { type: WidgetUserServiceLib }, { type: i2$1.TranslateService }, { type: MultilingualTranslationsService }, { type: i2.WidgetEnrollService }, { type: i1$5.MatDialog }, { type: i1$6.MatSnackBar }]; }, propDecorators: { widgetData: [{
+                }] }, { type: WidgetContentLibService }, { type: i2.LoggerService }, { type: i2.EventService }, { type: i2.ConfigurationsService }, { type: i2.UtilityService }, { type: i1$1.Router }, { type: WidgetUserServiceLib }, { type: i2$1.TranslateService }, { type: MultilingualTranslationsService }, { type: i2.WidgetEnrollService }, { type: i3$1.MatDialog }, { type: i1$5.MatSnackBar }]; }, propDecorators: { widgetData: [{
                 type: Input
             }], emptyResponse: [{
                 type: Output
@@ -12958,7 +12972,991 @@ class MdoChannelV2Component {
             && this.route.snapshot.data.formData.data.result.form
             && this.route.snapshot.data.formData.data.result.form.data
             && this.route.snapshot.data.formData.data.result.form.data.sectionList) {
-            this.sectionList = this.route.snapshot.data.formData.data.result.form.data.sectionList;
+            this.sectionList = [
+                {
+                    "active": true,
+                    "enabled": true,
+                    "title": "",
+                    "key": "sectionTopBanner",
+                    "order": 1,
+                    "column": [
+                        {
+                            "active": true,
+                            "enabled": true,
+                            "key": "topSection",
+                            "title": "",
+                            "colspan": 12,
+                            "background": "",
+                            "bannerBackgroudClass": "web-banner-background",
+                            "data": {
+                                "background": "#1B4CA1",
+                                "logo": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745380667949_Maharashtra Logo Strip.png",
+                                "logoMobile": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745380774459_Logo 4.jpeg",
+                                "bannerBackgroundWebMobile": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1735299398814_ctd_logo.png",
+                                "title": "महाराष्ट्र टेक लर्निंग वीक",
+                                "titleClass": "main-title",
+                                "titleColor": "#fca311",
+                                "subTitle": "",
+                                "subTitleClass": "sub-title",
+                                "subTitleColor": "#FFFFFF",
+                                "subTitleColorMobile": "#000",
+                                "subTitleTwo": "महाराष्ट्र",
+                                "subTitleColorTwo": "#FFFFFF",
+                                "subTitleColorTwoMobile": "#000",
+                                "description": "महाराष्ट्र नेहमीच प्रगतीच्या अग्रस्थानी राहिला आहे. शिक्षण, आरोग्य, उद्योग, कृषी आणि प्रशासन या क्षेत्रांमध्ये नवोन्मेषाला प्रोत्साहन देत आला आहे. डिजिटल युगातील परिवर्तनाच्या गतीनुसार त्याच्या बरोबरीने शासकीय कामकाज देखील विकसित होणं आवश्यक आहे.  टेक-वारी - महाराष्ट्राचा टेक लर्निंग वीक, हे त्या दृष्टीने एक पाउल आहे.  ज्यात तंत्रज्ञान, परंपरा आणि परिवर्तन यांच्या त्रिवेणी  संगमाच्या माध्यमातून शासकीय कर्मचारी लोकाभिमुख प्रशासनासाठी सज्ज होईल.",
+                                "descriptionColor": "#FFFFFF",
+                                "sliderData": {
+                                    "styleData": {
+                                        "bannerMetaClass": "",
+                                        "bannerMeta": "visible",
+                                        "bannerMetaAlign": "right",
+                                        "navigationArrows": "visible",
+                                        "borderRadius": "12px",
+                                        "customHeight": "334px",
+                                        "arrowsPlacement": "",
+                                        "imageBorderWidth": 3,
+                                        "imageBorderColor": "#FFFFFF",
+                                        "imageBorderStyle": "solid",
+                                        "responsive": {
+                                            "bannerMetaClass": "inline-meta",
+                                            "customHeight": "232px",
+                                            "bannerMetaAlign": "center",
+                                            "navigationArrows": "visible",
+                                            "dots": "hidden",
+                                            "arrowsPlacement": "middle-inline"
+                                        }
+                                    },
+                                    "sliders": [
+                                        {
+                                            "active": true,
+                                            "banners": {
+                                                "l": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg",
+                                                "m": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg",
+                                                "s": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg",
+                                                "xl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg",
+                                                "xs": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg",
+                                                "xxl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381273661_Maharashtra SLW 1.jpeg"
+                                            },
+                                            "redirectUrl": "",
+                                            "queryParams": {},
+                                            "title": ""
+                                        },
+                                        {
+                                            "active": true,
+                                            "banners": {
+                                                "l": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg",
+                                                "m": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg",
+                                                "s": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg",
+                                                "xl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg",
+                                                "xs": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg",
+                                                "xxl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745381330450_Maharashtra SLW 4.jpeg"
+                                            },
+                                            "redirectUrl": "",
+                                            "queryParams": {},
+                                            "title": ""
+                                        }
+                                    ]
+                                },
+                                "metrics": {
+                                    "background": "#1B4CA1",
+                                    "data": [
+                                        {
+                                            "icon": "https://portal.karmayogi.nic.in/content-store/content/do_114061821837287424110/artifact/do_114061821837287424110_1716531049564_network.svg",
+                                            "iconColor": "#FFFFFF",
+                                            "value": "9876",
+                                            "valueColor": "#FFFFFF",
+                                            "label": "Total Users",
+                                            "labelColor": "#FFFFFF",
+                                            "linebreak": false,
+                                            "background": "#1B4CA1"
+                                        },
+                                        {
+                                            "icon": "https://portal.karmayogiqa.nic.in/content-store/orgStore/0135071359030722569/1715676445834_badges.svg",
+                                            "iconColor": "#FFFFFF",
+                                            "value": "2678",
+                                            "valueColor": "#FFFFFF",
+                                            "label": "Certificates",
+                                            "labelColor": "#FFFFFF",
+                                            "linebreak": false,
+                                            "background": "#1B4CA1"
+                                        },
+                                        {
+                                            "icon": "https://portal.karmayogi.nic.in/content-store/content/do_114061824512778240111/artifact/do_114061824512778240111_1716531357219_knowledge-resources.svg",
+                                            "iconColor": "#FFFFFF",
+                                            "value": "9867",
+                                            "valueColor": "#FFFFFF",
+                                            "label": "Enrolments",
+                                            "labelColor": "#FFFFFF",
+                                            "linebreak": false,
+                                            "background": "#1B4CA1"
+                                        },
+                                        {
+                                            "icon": "https://portal.karmayogi.nic.in/content-store/content/do_114061847565107200114/artifact/do_114061847565107200114_1716534165064_program1.svg",
+                                            "iconColor": "#FFFFFF",
+                                            "value": "12",
+                                            "valueColor": "#FFFFFF",
+                                            "label": "Content Published",
+                                            "labelColor": "#FFFFFF",
+                                            "linebreak": false,
+                                            "background": "#1B4CA1"
+                                        },
+                                        {
+                                            "icon": "https://portal.karmayogi.nic.in/content-store/content/do_114061826604261376113/artifact/do_114061826604261376113_1716531614554_percent.svg",
+                                            "iconColor": "#FFFFFF",
+                                            "value": "40",
+                                            "valueColor": "#FFFFFF",
+                                            "label": "24hr Login",
+                                            "labelColor": "#FFFFFF",
+                                            "linebreak": false,
+                                            "background": "#1B4CA1"
+                                        }
+                                    ]
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    "active": true,
+                    "enabled": true,
+                    "title": "",
+                    "key": "sectionLookerpro",
+                    "order": 4,
+                    "column": [
+                        {
+                            "active": true,
+                            "enabled": true,
+                            "key": "lookerSection",
+                            "title": "",
+                            "colspan": 12,
+                            "background": "banner",
+                            "data": {
+                                "header": {
+                                    "headerText": "Performance Dashboard",
+                                    "description": "View MDO performance based on their learning activities for the week, with real-time insights into progress, engagement, and development across various MDOs."
+                                },
+                                "disableDynamicHeight": false,
+                                "mobileHeight": "500px",
+                                "desktopHeight": "280px",
+                                "lookerProDesktopUrl": "https://lookerstudio.google.com/embed/reporting/17028145-cdd5-459d-bb13-b3de2ef62aee/page/fyd9D",
+                                "lookerProMobileUrl": "https://lookerstudio.google.com/embed/reporting/17028145-cdd5-459d-bb13-b3de2ef62aee/page/fyd9D"
+                            }
+                        }
+                    ]
+                },
+                {
+                    "active": false,
+                    "enabled": false,
+                    "title": "",
+                    "key": "sectionTopLearners",
+                    "order": 2,
+                    "column": [
+                        {
+                            "active": true,
+                            "enabled": true,
+                            "key": "topLearners",
+                            "title": "Top 10 Learners",
+                            "colspan": 12,
+                            "background": "",
+                            "data": {
+                                "title": "Top 10 Learners",
+                                "enableMonth": false,
+                                "titleFontColor": "#000000",
+                                "kpIcon": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1728035311295_karma-badge.svg",
+                                "learners": [],
+                                "customClass": "min-h-20",
+                                "cardHeight": "64px",
+                                "carMinHeight": "100px",
+                                "hideEle": [
+                                    "karma-points"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    "active": true,
+                    "enabled": true,
+                    "title": "",
+                    "key": "sectionMain",
+                    "order": 3,
+                    "wrapperClass": "",
+                    "column": [
+                        {
+                            "active": true,
+                            "enabled": true,
+                            "key": "mainContent",
+                            "title": "",
+                            "colspan": 12,
+                            "background": "",
+                            "data": {
+                                "tabSection": {
+                                    "colspan": 8,
+                                    "disable": true,
+                                    "contentTab": [
+                                        {
+                                            "active": false,
+                                            "enabled": false,
+                                            "title": "Certifications of the Week",
+                                            "navigation": true,
+                                            "key": "sectionCertificationsOfWeeks",
+                                            "order": 3,
+                                            "navOrder": 1,
+                                            "column": [
+                                                {
+                                                    "active": true,
+                                                    "enabled": true,
+                                                    "key": "contentcertificationsOfWeekStrip",
+                                                    "title": "Recommended Courses",
+                                                    "data": {
+                                                        "sectionImagePosition": "img-left",
+                                                        "sectionImage": "assets/icons/microsite/left_arrow.svg",
+                                                        "order": 4,
+                                                        "strips": [
+                                                            {
+                                                                "active": true,
+                                                                "key": "certificationsOfWeek",
+                                                                "logo": "school",
+                                                                "title": "Certifications of the Week",
+                                                                "stripTitleLink": {
+                                                                    "link": "",
+                                                                    "icon": ""
+                                                                },
+                                                                "customeClass": "min-width-763",
+                                                                "sliderConfig": {
+                                                                    "showNavs": true,
+                                                                    "showDots": true,
+                                                                    "maxWidgets": 12,
+                                                                    "showNavsSpacing": true,
+                                                                    "cerificateCardMargin": true
+                                                                },
+                                                                "loader": true,
+                                                                "stripBackground": "",
+                                                                "titleDescription": "Certifications of the Week",
+                                                                "stripConfig": {
+                                                                    "cardSubType": "card-wide-v2"
+                                                                },
+                                                                "loaderConfig": {
+                                                                    "cardSubType": "card-wide-v2-skelton"
+                                                                },
+                                                                "viewMoreUrl": {
+                                                                    "path": "/app/seeAll",
+                                                                    "viewMoreText": "Show all",
+                                                                    "queryParams": {
+                                                                        "key": "certificationsOfWeek"
+                                                                    },
+                                                                    "loaderConfig": {
+                                                                        "cardSubType": "card-portrait-click-skeleton"
+                                                                    },
+                                                                    "stripConfig": {
+                                                                        "cardSubType": "card-portrait-click"
+                                                                    }
+                                                                },
+                                                                "tabs": [],
+                                                                "filters": [],
+                                                                "request": {
+                                                                    "trendingSearch": {
+                                                                        "request": {
+                                                                            "filters": {
+                                                                                "contextType": [
+                                                                                    "certifications"
+                                                                                ],
+                                                                                "organisation": "<orgID>"
+                                                                            },
+                                                                            "limit": 5
+                                                                        },
+                                                                        "responseKey": "certifications"
+                                                                    }
+                                                                }
+                                                            }
+                                                        ]
+                                                    }
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "active": false,
+                                            "enabled": false,
+                                            "title": "Trending",
+                                            "navigation": true,
+                                            "key": "sectionRecommendedProgram",
+                                            "order": 3,
+                                            "navOrder": 1,
+                                            "column": [
+                                                {
+                                                    "active": true,
+                                                    "enabled": true,
+                                                    "key": "contentRecommendedProgramStrip",
+                                                    "title": "Popular courses",
+                                                    "data": {
+                                                        "sectionImagePosition": "img-left",
+                                                        "sectionImage": "assets/icons/microsite/left_arrow.svg",
+                                                        "order": 4,
+                                                        "strips": [
+                                                            {
+                                                                "active": true,
+                                                                "customeClass": "width-238",
+                                                                "key": "recommendedProgram",
+                                                                "logo": "school",
+                                                                "disableTranslate": true,
+                                                                "title": "Trending",
+                                                                "stripTitleLink": {
+                                                                    "link": "",
+                                                                    "icon": ""
+                                                                },
+                                                                "sliderConfig": {
+                                                                    "showNavs": true,
+                                                                    "showDots": true,
+                                                                    "maxWidgets": 12,
+                                                                    "showNavsSpacing": true
+                                                                },
+                                                                "stripBackground": "",
+                                                                "titleDescription": "Recently Added",
+                                                                "stripConfig": {
+                                                                    "cardSubType": "card-portrait-lib"
+                                                                },
+                                                                "viewMoreUrl": {
+                                                                    "path": "/app/seeAll",
+                                                                    "viewMoreText": "Show all",
+                                                                    "queryParams": {
+                                                                        "key": "recentlyAdded"
+                                                                    },
+                                                                    "loaderConfig": {
+                                                                        "cardSubType": "card-portrait-lib-skeleton"
+                                                                    },
+                                                                    "stripConfig": {
+                                                                        "cardSubType": "card-portrait-lib"
+                                                                    }
+                                                                },
+                                                                "loader": true,
+                                                                "loaderConfig": {
+                                                                    "cardSubType": "card-portrait-lib-skeleton"
+                                                                },
+                                                                "tabsType": "pills-tab",
+                                                                "tabs": [
+                                                                    {
+                                                                        "label": "Courses",
+                                                                        "value": "course",
+                                                                        "computeDataOnClick": false,
+                                                                        "computeDataOnClickKey": "",
+                                                                        "requestRequired": true,
+                                                                        "showTabDataCount": false,
+                                                                        "maxWidgets": 12,
+                                                                        "nodataMsg": "nocontent",
+                                                                        "request": {
+                                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                            "playlistRead": {
+                                                                                "type": "MDO_RECOMMENDED_COURSES"
+                                                                            }
+                                                                        }
+                                                                    },
+                                                                    {
+                                                                        "label": "Programs",
+                                                                        "value": "program",
+                                                                        "computeDataOnClick": false,
+                                                                        "computeDataOnClickKey": "",
+                                                                        "requestRequired": true,
+                                                                        "showTabDataCount": false,
+                                                                        "maxWidgets": 12,
+                                                                        "nodataMsg": "nocontent",
+                                                                        "request": {
+                                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                            "playlistRead": {
+                                                                                "type": "MDO_RECOMMENDED_PROGRAMS"
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                ],
+                                                                "filters": [],
+                                                                "request": {
+                                                                    "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                    "playlistRead": {
+                                                                        "type": "MDO_RECOMMENDED_PROGRAMS"
+                                                                    }
+                                                                }
+                                                            }
+                                                        ]
+                                                    }
+                                                }
+                                            ]
+                                        },
+                                        {
+                                            "active": false,
+                                            "enabled": false,
+                                            "title": "Featured",
+                                            "navigation": true,
+                                            "key": "sectionFeatureCourses",
+                                            "order": 3,
+                                            "navOrder": 1,
+                                            "column": [
+                                                {
+                                                    "active": true,
+                                                    "enabled": true,
+                                                    "key": "contentFeaturedStrip",
+                                                    "title": "Featured",
+                                                    "data": {
+                                                        "sectionImagePosition": "img-left",
+                                                        "sectionImage": "assets/icons/microsite/left_arrow.svg",
+                                                        "order": 4,
+                                                        "strips": [
+                                                            {
+                                                                "active": true,
+                                                                "customeClass": "width-238",
+                                                                "key": "featuredCourses",
+                                                                "logo": "school",
+                                                                "disableTranslate": true,
+                                                                "title": "Featured",
+                                                                "stripTitleLink": {
+                                                                    "link": "",
+                                                                    "icon": ""
+                                                                },
+                                                                "sliderConfig": {
+                                                                    "showNavs": true,
+                                                                    "showDots": true,
+                                                                    "maxWidgets": 12,
+                                                                    "showNavsSpacing": true
+                                                                },
+                                                                "stripBackground": "",
+                                                                "titleDescription": "Recently Added",
+                                                                "stripConfig": {
+                                                                    "cardSubType": "card-portrait-lib"
+                                                                },
+                                                                "viewMoreUrl": {
+                                                                    "path": "/app/seeAll",
+                                                                    "viewMoreText": "Show all",
+                                                                    "queryParams": {
+                                                                        "key": "recentlyAdded"
+                                                                    },
+                                                                    "loaderConfig": {
+                                                                        "cardSubType": "card-portrait-lib-skeleton"
+                                                                    },
+                                                                    "stripConfig": {
+                                                                        "cardSubType": "card-portrait-lib"
+                                                                    }
+                                                                },
+                                                                "loader": true,
+                                                                "loaderConfig": {
+                                                                    "cardSubType": "card-portrait-lib-skeleton"
+                                                                },
+                                                                "tabsType": "pills-tab",
+                                                                "tabs": [
+                                                                    {
+                                                                        "label": "Courses",
+                                                                        "value": "course",
+                                                                        "computeDataOnClick": false,
+                                                                        "computeDataOnClickKey": "",
+                                                                        "requestRequired": true,
+                                                                        "showTabDataCount": false,
+                                                                        "maxWidgets": 12,
+                                                                        "nodataMsg": "nocontent",
+                                                                        "request": {
+                                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                            "playlistRead": {
+                                                                                "type": "MDO_FEATURED_COURSES"
+                                                                            }
+                                                                        }
+                                                                    },
+                                                                    {
+                                                                        "label": "Programs",
+                                                                        "value": "program",
+                                                                        "computeDataOnClick": false,
+                                                                        "computeDataOnClickKey": "",
+                                                                        "requestRequired": true,
+                                                                        "showTabDataCount": false,
+                                                                        "maxWidgets": 12,
+                                                                        "nodataMsg": "nocontent",
+                                                                        "request": {
+                                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                            "playlistRead": {
+                                                                                "type": "MDO_FEATURED_PROGRAMS"
+                                                                            }
+                                                                        }
+                                                                    }
+                                                                ],
+                                                                "filters": [],
+                                                                "request": {
+                                                                    "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                    "playlistRead": {
+                                                                        "type": "MDO_FEATURED_COURSES"
+                                                                    }
+                                                                }
+                                                            }
+                                                        ]
+                                                    }
+                                                }
+                                            ]
+                                        }
+                                    ],
+                                    "coreAreasTab": [
+                                        {
+                                            "active": false,
+                                            "enabled": false,
+                                            "title": "Core Expertise",
+                                            "navigation": true,
+                                            "key": "sectionCompetency",
+                                            "order": 5,
+                                            "navOrder": 3,
+                                            "column": [
+                                                {
+                                                    "active": true,
+                                                    "enabled": true,
+                                                    "key": "competency",
+                                                    "title": "",
+                                                    "colspan": 12,
+                                                    "background": "",
+                                                    "data": []
+                                                }
+                                            ]
+                                        }
+                                    ],
+                                    "tabs": [
+                                        {
+                                            "name": "content"
+                                        },
+                                        {
+                                            "name": "Core Areas"
+                                        }
+                                    ]
+                                },
+                                "announcementSection": {
+                                    "disable": true,
+                                    "colspan": 4,
+                                    "data": {
+                                        "title": "Key Announcements",
+                                        "logoUrl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1728035426855_key-announcements1.svg",
+                                        "mobileIcon": "https://portal.karmayogi.nic.in/content-store/content/do_114061893940887552115/artifact/do_114061893940887552115_1716539807520_campaign_black.svg",
+                                        "header": {
+                                            "background": "#1B4CA1",
+                                            "color": "#FFFFFF"
+                                        },
+                                        "panelborder": "#1B4CA1",
+                                        "panelBackground": "#FFFFFF",
+                                        "listItem": {
+                                            "border": "#F3962F",
+                                            "background": "#FCEEDB"
+                                        },
+                                        "ViewMoreColor": "#1B4CA1",
+                                        "pageSize": 15,
+                                        "list": [
+                                            {
+                                                "value": "Hon. Chief Minister of Gujarat will launch MDO Channel of SPIPA on IGoT Karmayogi Portal on occasion of Good Governance Day.",
+                                                "expanded": false
+                                            },
+                                            {
+                                                "value": "Hon. Chief Minister of Gujarat will launch MDO Channel of SPIPA on IGoT Karmayogi Portal on occasion of Good Governance Day.",
+                                                "expanded": false
+                                            }
+                                        ]
+                                    }
+                                },
+                                "stateLearningWeekSection": {
+                                    "lookerSection": {
+                                        "active": true,
+                                        "enabled": true,
+                                        "key": "lookerSection",
+                                        "title": "",
+                                        "colspan": 12,
+                                        "background": "banner",
+                                        "data": {
+                                            "header": {
+                                                "headerText": "Performance Dashboard",
+                                                "description": "View MDO performance based on their learning activities for the week, with real-time insights into progress, engagement, and development across various MDOs."
+                                            },
+                                            "lookerProDesktopUrl": "https://lookerstudio.google.com/embed/reporting/17028145-cdd5-459d-bb13-b3de2ef62aee/page/fyd9D",
+                                            "lookerProMobileUrl": "https://lookerstudio.google.com/embed/reporting/17028145-cdd5-459d-bb13-b3de2ef62aee/page/fyd9D"
+                                        }
+                                    },
+                                    "keyHighlights": {
+                                        "enabled": true,
+                                        "backgroundColor": "#FFFFFF",
+                                        "titleMaxLength": 200,
+                                        "content": [
+                                            {
+                                                "title": "Enroll in the courses and contribute to your continuous learning journey and growth"
+                                            },
+                                            {
+                                                "title": "Be a learning champion - complete courses and inspire your peers on iGOT!"
+                                            }
+                                        ],
+                                        "sliderData": {
+                                            "styleData": {
+                                                "borderRadius": "0",
+                                                "customHeight": "100px",
+                                                "bannerMeta": "visible",
+                                                "dots": "hidden",
+                                                "arrowsPlacement": "middle-inline",
+                                                "responsive": {
+                                                    "customHeight": "80px",
+                                                    "bannerMetaAlign": "left",
+                                                    "navigationArrows": "visible",
+                                                    "dots": "hidden",
+                                                    "arrowsPlacement": "middle-inline"
+                                                }
+                                            }
+                                        }
+                                    },
+                                    "speakerOftheDay": {
+                                        "enabled": false,
+                                        "data": {
+                                            "title": "Speaker of the day",
+                                            "infoText": "Join insightful webinars and masterclasses hosted by prominent speakers and thought leaders.",
+                                            "infoIcon": "https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726652230008_info_icon.svg",
+                                            "sliderData": {
+                                                "styleData": {
+                                                    "borderRadius": "12px",
+                                                    "customHeight": "",
+                                                    "bannerMeta": "visible",
+                                                    "bannerMetaClass": "cbp-card-1",
+                                                    "responsive": {
+                                                        "bannerMetaClass": "cbp-card-1"
+                                                    }
+                                                }
+                                            },
+                                            "list": [
+                                                {
+                                                    "title": "Ms Arushi Malhotra",
+                                                    "description": "Beyond the Desk: Using Behavioral Science to Improve Workplace Well-Being",
+                                                    "profileImage": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1742617698083_IMG_9084.jpg",
+                                                    "identifier": "do_1142743067745812481229"
+                                                },
+                                                {
+                                                    "title": "Prof Bimlesh Kumar Singh",
+                                                    "description": "Maintenance of Transformers",
+                                                    "profileImage": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1742617868268_Bimlesh.jpg",
+                                                    "identifier": "do_1142743211854888961161"
+                                                },
+                                                {
+                                                    "title": "Prof. Dr. Sanjukkta Bhaduril",
+                                                    "description": "Resilient tourism infrastructure for Rajasthan Islands",
+                                                    "profileImage": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1742618016728_Dr. Sanjukkta.jpeg",
+                                                    "identifier": "do_1142743114401218561137"
+                                                }
+                                            ]
+                                        }
+                                    },
+                                    "weekHighlights": {
+                                        "enabled": true,
+                                        "data": {
+                                            "title": "Highlights of the week",
+                                            "sliderData": {
+                                                "styleData": {
+                                                    "borderRadius": "12px",
+                                                    "customHeight": "",
+                                                    "bannerMetaClass": "cbp-card",
+                                                    "responsive": {
+                                                        "bannerMetaClass": "cbp-card"
+                                                    }
+                                                }
+                                            },
+                                            "list": [
+                                                {
+                                                    "title": "Get ready for Maharashtra Tech Learning Week",
+                                                    "description": "Tech-Wari, Maharashtra’s Tech Learning Week, blends technology, tradition & transformation—empowering government employees for citizen-first governance through future-ready digital learning.",
+                                                    "videoUrl": "https://portal.igotkarmayogi.gov.in/content-store/orgStore/0133783095823810560/1745394867601_IMG_8833.MP4"
+                                                }
+                                            ]
+                                        }
+                                    },
+                                    "myprogress": {
+                                        "enabled": true,
+                                        "data": {
+                                            "title": "Your week's progress",
+                                            "infoText": "During Rajya Karmayogi Saptah, stay informed about your learning journey. Monitor your Learning Hours, and earn Certificates.",
+                                            "infoIcon": "https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726652230008_info_icon.svg",
+                                            "profleDetails": {},
+                                            "hideEle": [
+                                                "karma-points"
+                                            ],
+                                            "insights": {
+                                                "data": {
+                                                    "sliderData": {
+                                                        "styleData": {
+                                                            "borderRadius": "12px",
+                                                            "customHeight": "83px",
+                                                            "bannerMeta": "visible",
+                                                            "bannerMetaClass": "cbp-card",
+                                                            "responsive": {
+                                                                "bannerMetaClass": "cbp-card",
+                                                                "customHeight": "83px"
+                                                            }
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        }
+                                    },
+                                    "mdoLeaderboard": {
+                                        "enabled": true,
+                                        "data": {
+                                            "title": "Leaderboard",
+                                            "infoText": "Celebrate top performers! The leaderboard showcases the Departments and Organizations based on total learning hours earned during State Learning Week.",
+                                            "infoIcon": "https://portal.dev.karmayogibharat.net/content-store/orgStore/0135071359030722569/1726652230008_info_icon.svg",
+                                            "currentTab": "S",
+                                            "customClass": "",
+                                            "cardHeight": "",
+                                            "carMinHeight": "",
+                                            "searchHint": "Search Departments",
+                                            "hideEle": [
+                                                "karma-points"
+                                            ],
+                                            "options": [
+                                                {
+                                                    "label": "1 - 500",
+                                                    "value": "XS"
+                                                },
+                                                {
+                                                    "label": "501 - 1000",
+                                                    "value": "S"
+                                                },
+                                                {
+                                                    "label": "1001 - 5000",
+                                                    "value": "M"
+                                                },
+                                                {
+                                                    "label": "5001 and 20000",
+                                                    "value": "L"
+                                                },
+                                                {
+                                                    "label": "20001 and adove",
+                                                    "value": "XL"
+                                                }
+                                            ]
+                                        }
+                                    },
+                                    "mandatoryCourse": {
+                                        "enabled": true,
+                                        "navigation": true,
+                                        "key": "sectionMandatoryCourses",
+                                        "order": 3,
+                                        "navOrder": 1,
+                                        "column": [
+                                            {
+                                                "active": true,
+                                                "enabled": true,
+                                                "key": "contentMandatoryCoursesStrip",
+                                                "data": {
+                                                    "order": 4,
+                                                    "strips": [
+                                                        {
+                                                            "active": true,
+                                                            "title": "Recommended Courses for Maharashtra Tech Learning Week",
+                                                            "titleClass": "mat-title",
+                                                            "customeClass": "width-238",
+                                                            "key": "Recommended Courses for Maharashtra Tech Learning Week",
+                                                            "logo": "school",
+                                                            "disableTranslate": true,
+                                                            "stripTitleLink": {
+                                                                "link": "",
+                                                                "icon": ""
+                                                            },
+                                                            "sliderConfig": {
+                                                                "showNavs": true,
+                                                                "showDots": true,
+                                                                "maxWidgets": 18,
+                                                                "showNavsSpacing": true
+                                                            },
+                                                            "stripBackground": "",
+                                                            "titleDescription": "Recommended Courses for Rajasthan state learning week",
+                                                            "stripConfig": {
+                                                                "cardSubType": "card-portrait-lib"
+                                                            },
+                                                            "loader": true,
+                                                            "loaderConfig": {
+                                                                "cardSubType": "card-portrait-lib-skeleton"
+                                                            },
+                                                            "filters": [],
+                                                            "request": {
+                                                                "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                                "playlistRead": {
+                                                                    "type": "Mdo_RECOMMENDED_COURSES_MAHARASHTRA"
+                                                                }
+                                                            }
+                                                        }
+                                                    ]
+                                                }
+                                            }
+                                        ]
+                                    },
+                                    "exploreLearningContent": {
+                                        "enabled": true,
+                                        "strips": [
+                                            {
+                                                "active": true,
+                                                "key": "featuredContents",
+                                                "logo": "school",
+                                                "title": "Explore Learning Contents",
+                                                "titleClass": "mat-title",
+                                                "type": "learningContent",
+                                                "disableTranslate": true,
+                                                "stripTitleLink": {
+                                                    "link": "",
+                                                    "icon": ""
+                                                },
+                                                "sliderConfig": {
+                                                    "showNavs": true,
+                                                    "showDots": true,
+                                                    "maxWidgets": 100,
+                                                    "showNavsSpacing": true
+                                                },
+                                                "stripBackground": "",
+                                                "titleDescription": "For you",
+                                                "stripConfig": {
+                                                    "cardSubType": "card-portrait-lib",
+                                                    "hideShowAll": true
+                                                },
+                                                "viewMoreUrl": {},
+                                                "hideViewMoreUrl": true,
+                                                "loader": true,
+                                                "loaderConfig": {
+                                                    "cardSubType": "card-portrait-lib-skeleton"
+                                                },
+                                                "tabs": [
+                                                    {
+                                                        "label": "Group A",
+                                                        "value": "Group A",
+                                                        "computeDataOnClick": false,
+                                                        "disableTranslate": true,
+                                                        "computeDataOnClickKey": "",
+                                                        "requestRequired": true,
+                                                        "showTabDataCount": false,
+                                                        "maxWidgets": 100,
+                                                        "nodataMsg": "no Data Course",
+                                                        "contentShuffel": true,
+                                                        "request": {
+                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                            "playlistRead": {
+                                                                "type": "MDO_GROUP_A_MAHARASHTRA"
+                                                            }
+                                                        }
+                                                    },
+                                                    {
+                                                        "label": "Group B",
+                                                        "value": "Group B",
+                                                        "computeDataOnClick": false,
+                                                        "disableTranslate": true,
+                                                        "computeDataOnClickKey": "",
+                                                        "requestRequired": true,
+                                                        "showTabDataCount": false,
+                                                        "maxWidgets": 100,
+                                                        "nodataMsg": "no Data Course",
+                                                        "contentShuffel": true,
+                                                        "request": {
+                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                            "playlistRead": {
+                                                                "type": "MDO_GROUP_B_MAHARASHTRA"
+                                                            }
+                                                        }
+                                                    },
+                                                    {
+                                                        "label": "Group C",
+                                                        "value": "Group C",
+                                                        "computeDataOnClick": false,
+                                                        "disableTranslate": true,
+                                                        "computeDataOnClickKey": "",
+                                                        "requestRequired": true,
+                                                        "showTabDataCount": false,
+                                                        "maxWidgets": 100,
+                                                        "nodataMsg": "no Data Course",
+                                                        "contentShuffel": true,
+                                                        "request": {
+                                                            "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                            "playlistRead": {
+                                                                "type": "MDO_GROUP_C_MAHARASHTRA"
+                                                            }
+                                                        }
+                                                    }
+                                                ],
+                                                "filters": [],
+                                                "stripRequestType": "post",
+                                                "stripRequestFor": "search",
+                                                "onTabClickRequest": false,
+                                                "request": {
+                                                    "apiUrl": "/apis/proxies/v8/playList/read/<playlistKey>/<orgID>",
+                                                    "playlistRead": {
+                                                        "type": "ORG_FEATURED_COURSES"
+                                                    }
+                                                }
+                                            }
+                                        ]
+                                    },
+                                    "events": {
+                                        "active": false,
+                                        "enabled": false,
+                                        "title": "Explore events",
+                                        "navigation": true,
+                                        "key": "sectionExploreEvents",
+                                        "order": 3,
+                                        "navOrder": 1,
+                                        "column": [
+                                            {
+                                                "maxContent": 3,
+                                                "active": true,
+                                                "enabled": true,
+                                                "key": "exploreEventsContent",
+                                                "title": "Explore events",
+                                                "defaultImage": "https://portal.dev.karmayogibharat.net/content-store/orgStore/01390354700029132834/1727084157602_Image.svg",
+                                                "request": {
+                                                    "locale": [
+                                                        "en"
+                                                    ],
+                                                    "query": "",
+                                                    "request": {
+                                                        "query": "",
+                                                        "filters": {
+                                                            "resourceType": [
+                                                                "Karmayogi Saptah",
+                                                                "Karmayogi Talks",
+                                                                "Rajya Karmayogi Saptah"
+                                                            ],
+                                                            "status": [
+                                                                "Live"
+                                                            ],
+                                                            "contentType": "Event",
+                                                            "category": "Event",
+                                                            "startDate": "<startDateObj>"
+                                                        },
+                                                        "sort_by": {
+                                                            "startDate": "desc"
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        ]
+                                    }
+                                }
+                            }
+                        }
+                    ]
+                },
+                {
+                    "active": true,
+                    "enabled": true,
+                    "title": "",
+                    "key": "sectionSupport",
+                    "order": 5,
+                    "customClass": "contact-us-wrapper mt-20",
+                    "column": [
+                        {
+                            "active": true,
+                            "enabled": true,
+                            "key": "supportSection",
+                            "title": "",
+                            "colspan": 12,
+                            "background": "banner",
+                            "data": {
+                                "title": "Maharashtra Tech Learning Week Dedicated Technical Support",
+                                "thumbnail": "https://dev.karmayogibharat.net/assets/videoconference/thumbnail.png",
+                                "text": "For any support required",
+                                "date": "April 01, 2025 - May 09, 2025 ",
+                                "time": "9:00am – 5:00pm · Time zone: Asia/Kolkata",
+                                "technicalSupport": "For any technical issues please contact",
+                                "plsContact": "igot-mh[at]mah[dot]gov[dot]in",
+                                "plsContacts": "igot-mh@mah.gov.in"
+                            }
+                        }
+                    ]
+                }
+            ];
         }
         this.langtranslations.languageSelectedObservable.subscribe(() => {
             if (localStorage.getItem('websiteLanguage')) {
@@ -13087,13 +14085,13 @@ class MdoChannelV2Component {
             this.router.navigate([`/app/learn/mdo-channels/${this.channnelName}/${this.orgId}/all-content`], { queryParams: { tabSelected, key: columnData.sectionKey } });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MdoChannelV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2.EventService }, { token: i2$1.TranslateService }, { token: i2.MultilingualTranslationsService }, { token: i2.ConfigurationsService }, { token: i4$2.DomSanitizer }, { token: i2.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MdoChannelV2Component, selector: "sb-uic-mdo-channel-v2", inputs: { sectionList: "sectionList", slwConfiguration: "slwConfiguration" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\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  | orderBy: 'order'\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4 {{section?.customClass}}\"\n                        [ngClass]=\"{'container': section.wrapperClass}\" >\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=\"'lookerSection'\" [ngTemplateOutlet]=\"lookerproSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                        <ng-container *ngSwitchCase=\"'supportSection'\" [ngTemplateOutlet]=\"supportSection\"\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\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"hidden md:block\">\n        <div class=\"web-banner-background\">\n            <div class=\"flex  items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\">\n                    </div>\n                    <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n                                <div class=\"\">\n                                    <div class=\"flex items-center logo-square \">\n                                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                                    </div>\n                                    <h1 class=\"  txt-ellipsis-2 break-words pt-10  mt-2 {{data?.titleClass}}\" [style.color]=\"data?.titleColor\">\n                                        {{data.title || channnelName}}</h1>\n                                    <h4 *ngIf=\"data?.subTitle\" class=\"  txt-ellipsis-2 break-words {{data?.subTitleClass}}\" [style.color]=\"data?.subTitleColor\">\n                                        {{data?.subTitle}}</h4>\n\n                                    <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwo\">\n                                        {{data?.subTitleTwo}}</h4>\n                                    <p class=\"mat-body-1\" [style.color]=\"data?.descriptionColor\">\n                                        {{data?.description | slice:0:descriptionMaxLength}}\n                                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n    </div>\n\n\n    <div class=\"hidden md:block\">\n        <div class=\"col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                <sb-uic-speakers [layoutType]=\"'mobile'\"\n                    [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                </sb-uic-speakers>\n            </div>\n\n        </div>\n    </div>\n\n    <!-- top section m-site layout -->\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12\">\n            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n            </div>\n        </div>\n        <div class=\"container px-4 flex flex-col mob-container\">\n            <div class=\"mr-4 logo-box-container\">\n                <div class=\"flex logo-box-square top mr-4\">\n                    <img alt=\"Application Logo\" class=\"logo-img logo-img-mb {{data?.customMobileClass}}\" [src]=\"data?.logoMobile || 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 || channnelName}}</h1>\n                <h4 *ngIf=\"data?.subTitle\" class=\" sub-title txt-ellipsis-2 break-words \" [style.color]=\"data?.subTitleColorMobile\">\n                    {{data?.subTitle}}</h4>\n\n                <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwoMobile\">\n                    {{data?.subTitleTwo}}</h4>\n                <p class=\"mat-body-2\">\n                    {{data?.description | slice:0:descriptionMaxLength}}\n                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                </p>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container metrics-section\">\n            <div class=\"hidden md:block\">\n                <div class=\"metrics\" [ngStyle]=\"{'background': data?.metrics?.background}\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleFlexeRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n            <div class=\"block md:hidden  pt-14 px-4\">\n                <div class=\"mob-metrics mob-metrics-sec\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #mainContent let-data=\"data\">\n    <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"container\">\n            <ng-container *ngIf=\"isMobile\">\n                <ng-container>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                        <sb-uic-key-highlights\n                            (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                            [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                            [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                        <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                            <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                            </sb-uic-user-progress>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                            <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                            </sb-uic-speakers>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                            <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n                    <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                        [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                    </sb-uic-cbp-plan>\n                </div>\n                <div class=\"block md:hidden col-span-12 mt-6\" *ngIf=\"!data?.announcementSection?.disable\">\n                    <sb-uic-announcements [layoutType]=\"'mobile'\" (openDialog)=\"triggerOpenDialog($event)\"\n                        [objectData]=\"data?.announcementSection?.data\" [fetchDataFromApi]=\"false\" [channelId]=\"orgId\">\n                    </sb-uic-announcements>\n                    <div class=\"announcements-container\" *ngIf=\"showModal\">\n                        <div class=\"cursor-pointer close-share-dialog\">\n                            <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n                        </div>\n                        <div class=\"share-modal px-3 pt-8\">\n                            <sb-uic-announcements [layoutType]=\"'web'\" (openDialog)=\"triggerOpenDialog($event)\"\n                                [objectData]=\"data?.announcementSection?.data\" [mobileHeight]=\"true\"\n                                [fetchDataFromApi]=\"true\" [channelId]=\"orgId\">\n                            </sb-uic-announcements>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <div class=\"col-span-12\">\n                <div class=\"flex items-center justify-center\">\n                    <div class=\"container margin-top-xl\"  >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                            <sb-uic-key-highlights\n                                (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                                [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                                [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n                    <ng-container >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                            <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                            </sb-uic-highlights-of-week>\n                        </div>\n\n                        <div>\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.mandatoryCourse?.enabled && data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"\">\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.exploreLearningContent?.enabled \n                                && data?.stateLearningWeekSection?.exploreLearningContent?.strips[0]\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.exploreLearningContent\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div *ngIf=\"data?.stateLearningWeekSection?.events?.enabled && data?.stateLearningWeekSection?.events?.column?.length &&\n                            data?.stateLearningWeekSection?.events?.column[0]\">\n                            <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events?.column[0]\"\n                                [nwlEventsConfig]=\"slwConfiguration\"></sb-uic-events>\n                        </div>\n                    </ng-container>\n                    <!-- Tabs Section -->\n                     <ng-container *ngIf=\"!data?.tabSection?.disable\">\n\n                        <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n                        [selectedIndex]=\"selectedIndex\"\n                        (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n                        <mat-tab label=\"Content\">\n                            <ng-template mat-tab-label i18n>\n                                Learn\n                            </ng-template>\n                            <ng-container *ngIf=\"data?.tabSection?.contentTab?.length === contentTabEmptyResponseCount\">\n                                <div class=\"flex justify-center w-full\">\n                                    <div class=\"margin-xl text-center\">\n                                        <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive\n                                            alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n                                        <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' |\n                                            translate}}</h2>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <div class=\"padding-top-l \">\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                        <mat-tab label=\"Core Areas\">\n                            <ng-template mat-tab-label i18n>\n                                Competency\n                            </ng-template>\n                            <div>\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                    </mat-tab-group>\n                     </ng-container>\n                </div>\n                <!-- <div class=\"col-span-12 md:col-span-8\">\n                    <div\n                        *ngIf=\"data?.stateLearningWeekSection?.events.enabled && data?.stateLearningWeekSection?.events.column[0]\">\n                        <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events.column[0]\"\n                            [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                    </div>\n                </div> -->\n                <div class=\"col-span-12 md:col-span-4\">\n                    <ng-container *ngIf=\"!isMobile\">\n                        <ng-container >\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                                    <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                        [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                                    </sb-uic-user-progress>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                                    <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                                    </sb-uic-speakers>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                                    <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                        (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                                </div>\n                            </div>\n                        </ng-container>\n    \n                        <div class=\"hidden md:block padding-top-xl padding-bottom-m\" *ngIf=\"data?.cbpPlanSection?.data\">\n                            <div class=\"pt-4\">\n                                <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                                </sb-uic-cbp-plan>\n                            </div>\n                        </div>\n                        <div class=\"hidden md:block\" *ngIf=\"!data?.announcementSection?.disable\">\n                            <div class=\"pt-4\">\n                                <sb-uic-announcements [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.announcementSection?.data\">\n                                </sb-uic-announcements>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n    <div class=\"flex  items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"w-full\">\n            Announcement Section -->\n<!-- <h1>Announcement</h1>\n        </div>\n    </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n    <ng-container *ngIf=\"data?.length\">\n        <ng-container *ngFor=\"let section of data\">\n            <ng-container *ngIf=\"section?.enabled\">\n                <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\"\n                    [ngClass]=\"{'container': section.wrapperClass}\">\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=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                    [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </section>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\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\"\n        *ngIf=\"!hideCompetencyBlock;else noData\">\n        <div class=\"w-full container-balanced\">\n            <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">This section shows the list of top competencies users in\n                this MDO are learning, based on the courses they've completed and enrolled in.</p>\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook-mdo [dynamicColor]=\"'#999999'\" [dynamicAlignPills]=\"'start'\"\n                    [cardDisplayCount]=\"2\" (emptyResponse)=\"hideCompetency($event)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\" [objectData]=\"competency\"\n                    [providerId]=\"orgId\">\n                </sb-uic-competency-passbook-mdo>\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<ng-template #contentStripTemplate let-data=\"data\">\n    <ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n        <div class=\"flex mb-8\">\n            <div class=\"w-full\">\n                <sb-uic-content-strip-with-tabs [emitViewAll]=\"true\" (viewAllResponse)=\"showAllContent($event, data)\"\n                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" [providerId]=\"orgId\"\n                    [widgetData]=\"data?.contentStrip\" [channnelName]=\"channnelName\">\n                </sb-uic-content-strip-with-tabs>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noData>\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container top-learners margin-bottom-l margin-top-l\">\n            <sb-uic-top-learners [objectData]=\"data\" [channnelName]=\"channnelName\" [channelId]=\"orgId\" [slwConfig]=\"slwConfiguration\">\n            </sb-uic-top-learners>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #lookerproSection let-data=\"data\">\n    <div class=\"flex items-center justify-center flex-wrap\">\n        <div class=\" w-full flex flex-col items-center justify-center\">\n            <h2 *ngIf=\"data?.header?.headerText\" class=\"pt-4\">{{data?.header?.headerText}}</h2>\n            <p *ngIf=\"data?.header?.description\">{{data?.header?.description}}</p>\n        </div>\n        <div class=\"container mt-4 mb-4\" *ngIf=\"lookerProUrl\">\n            <iframe class=\"w-full \" height=\"{{iframeHeight}}\"\n            [src]=\"lookerProUrl\"\n            frameborder=\"0\" style=\"border:0\" allowfullscreen\n            sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"></iframe>\n        </div>\n    </div>\n</ng-template>\n<ng-template #supportSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container support-section\">\n            <sb-uic-video-conference [videoConf]=\"data\"></sb-uic-video-conference>\n        </div>\n    </div>\n</ng-template>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnnouncementsComponent, selector: "sb-uic-announcements", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: TopLearnersComponent, selector: "sb-uic-top-learners", inputs: ["objectData", "channelId", "channnelName", "slwConfig"] }, { kind: "component", type: CbpPlanComponent, selector: "sb-uic-cbp-plan", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: CompetencyPassbookMdoComponent, selector: "sb-uic-competency-passbook-mdo", inputs: ["objectData", "providerId", "cardDisplayCount", "dynamicClass", "dynamicColor", "dynamicAlignPills"], outputs: ["emptyResponse", "temeletryResponse"] }, { kind: "component", type: ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse"] }, { kind: "component", type: DataPointsComponent, selector: "sb-uic-data-points", inputs: ["objectData", "layoutType", "fetchDataFromApi", "providerId", "pageLayout", "title", "slwConfig"] }, { kind: "component", type: SlidersLibComponent, selector: "sb-uic-sliders", inputs: ["widgetData", "styleData", "title", "type"] }, { kind: "component", type: HighlightsOfWeekComponent, selector: "sb-uic-highlights-of-week", inputs: ["objectData"] }, { kind: "component", type: UserProgressComponent, selector: "sb-uic-user-progress", inputs: ["objectData", "rootOrgId"] }, { kind: "component", type: EventsComponent, selector: "sb-uic-events", inputs: ["object", "nwlEventsConfig"] }, { kind: "component", type: SpeakersComponent, selector: "sb-uic-speakers", inputs: ["objectData"] }, { kind: "component", type: MdoLeaderboardComponent, selector: "sb-uic-mdo-leaderboard", inputs: ["orgId", "object", "slwConfig"], outputs: ["tabClicked"] }, { kind: "component", type: KeyHighlightsComponent, selector: "sb-uic-key-highlights", inputs: ["providerId", "formData", "mode"], outputs: ["emptyResponse"] }, { kind: "component", type: i13.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: VideoConferenceComponent, selector: "sb-uic-video-conference", inputs: ["videoConf"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MdoChannelV2Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2.EventService }, { token: i2$1.TranslateService }, { token: i2.MultilingualTranslationsService }, { token: i2.ConfigurationsService }, { token: i1$6.DomSanitizer }, { token: i2.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MdoChannelV2Component, selector: "sb-uic-mdo-channel-v2", inputs: { sectionList: "sectionList", slwConfiguration: "slwConfiguration" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0, template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\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  | orderBy: 'order'\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4 {{section?.customClass}}\"\n                        [ngClass]=\"{'container': section.wrapperClass}\" >\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=\"'lookerSection'\" [ngTemplateOutlet]=\"lookerproSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                        <ng-container *ngSwitchCase=\"'supportSection'\" [ngTemplateOutlet]=\"supportSection\"\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\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"hidden md:block\">\n        <div class=\"web-banner-background\">\n            <div class=\"flex  items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\">\n                    </div>\n                    <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n                                <div class=\"\">\n                                    <div class=\"flex items-center logo-square \">\n                                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                                    </div>\n                                    <h1 class=\"  txt-ellipsis-2 break-words pt-10  mt-2 {{data?.titleClass}}\" [style.color]=\"data?.titleColor\">\n                                        {{data.title || channnelName}}</h1>\n                                    <h4 *ngIf=\"data?.subTitle\" class=\"  txt-ellipsis-2 break-words {{data?.subTitleClass}}\" [style.color]=\"data?.subTitleColor\">\n                                        {{data?.subTitle}}</h4>\n\n                                    <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwo\">\n                                        {{data?.subTitleTwo}}</h4>\n                                    <p class=\"mat-body-1\" [style.color]=\"data?.descriptionColor\">\n                                        {{data?.description | slice:0:descriptionMaxLength}}\n                                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n    </div>\n\n\n    <div class=\"hidden md:block\">\n        <div class=\"col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                <sb-uic-speakers [layoutType]=\"'mobile'\"\n                    [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                </sb-uic-speakers>\n            </div>\n\n        </div>\n    </div>\n\n    <!-- top section m-site layout -->\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12\">\n            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n            </div>\n        </div>\n        <div class=\"container px-4 flex flex-col mob-container\">\n            <div class=\"mr-4 logo-box-container\">\n                <div class=\"flex logo-box-square top mr-4\">\n                    <img alt=\"Application Logo\" class=\"logo-img logo-img-mb {{data?.customMobileClass}}\" [src]=\"data?.logoMobile || 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 || channnelName}}</h1>\n                <h4 *ngIf=\"data?.subTitle\" class=\" sub-title txt-ellipsis-2 break-words \" [style.color]=\"data?.subTitleColorMobile\">\n                    {{data?.subTitle}}</h4>\n\n                <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwoMobile\">\n                    {{data?.subTitleTwo}}</h4>\n                <p class=\"mat-body-2\">\n                    {{data?.description | slice:0:descriptionMaxLength}}\n                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                </p>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container metrics-section\">\n            <div class=\"hidden md:block\">\n                <div class=\"metrics\" [ngStyle]=\"{'background': data?.metrics?.background}\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleFlexeRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n            <div class=\"block md:hidden  pt-14 px-4\">\n                <div class=\"mob-metrics mob-metrics-sec\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #mainContent let-data=\"data\">\n    <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"container\">\n            <ng-container *ngIf=\"isMobile\">\n                <ng-container>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                        <sb-uic-key-highlights\n                            (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                            [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                            [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                        <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                            <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                            </sb-uic-user-progress>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                            <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                            </sb-uic-speakers>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                            <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n                    <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                        [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                    </sb-uic-cbp-plan>\n                </div>\n                <div class=\"block md:hidden col-span-12 mt-6\" *ngIf=\"!data?.announcementSection?.disable\">\n                    <sb-uic-announcements [layoutType]=\"'mobile'\" (openDialog)=\"triggerOpenDialog($event)\"\n                        [objectData]=\"data?.announcementSection?.data\" [fetchDataFromApi]=\"false\" [channelId]=\"orgId\">\n                    </sb-uic-announcements>\n                    <div class=\"announcements-container\" *ngIf=\"showModal\">\n                        <div class=\"cursor-pointer close-share-dialog\">\n                            <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n                        </div>\n                        <div class=\"share-modal px-3 pt-8\">\n                            <sb-uic-announcements [layoutType]=\"'web'\" (openDialog)=\"triggerOpenDialog($event)\"\n                                [objectData]=\"data?.announcementSection?.data\" [mobileHeight]=\"true\"\n                                [fetchDataFromApi]=\"true\" [channelId]=\"orgId\">\n                            </sb-uic-announcements>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <div class=\"col-span-12\">\n                <div class=\"flex items-center justify-center\">\n                    <div class=\"container margin-top-xl\"  >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                            <sb-uic-key-highlights\n                                (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                                [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                                [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n                    <ng-container >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                            <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                            </sb-uic-highlights-of-week>\n                        </div>\n\n                        <div>\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.mandatoryCourse?.enabled && data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"\">\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.exploreLearningContent?.enabled \n                                && data?.stateLearningWeekSection?.exploreLearningContent?.strips[0]\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.exploreLearningContent\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div *ngIf=\"data?.stateLearningWeekSection?.events?.enabled && data?.stateLearningWeekSection?.events?.column?.length &&\n                            data?.stateLearningWeekSection?.events?.column[0]\">\n                            <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events?.column[0]\"\n                                [nwlEventsConfig]=\"slwConfiguration\"></sb-uic-events>\n                        </div>\n                    </ng-container>\n                    <!-- Tabs Section -->\n                     <ng-container *ngIf=\"!data?.tabSection?.disable\">\n\n                        <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n                        [selectedIndex]=\"selectedIndex\"\n                        (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n                        <mat-tab label=\"Content\">\n                            <ng-template mat-tab-label i18n>\n                                Learn\n                            </ng-template>\n                            <ng-container *ngIf=\"data?.tabSection?.contentTab?.length === contentTabEmptyResponseCount\">\n                                <div class=\"flex justify-center w-full\">\n                                    <div class=\"margin-xl text-center\">\n                                        <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive\n                                            alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n                                        <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' |\n                                            translate}}</h2>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <div class=\"padding-top-l \">\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                        <mat-tab label=\"Core Areas\">\n                            <ng-template mat-tab-label i18n>\n                                Competency\n                            </ng-template>\n                            <div>\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                    </mat-tab-group>\n                     </ng-container>\n                </div>\n                <!-- <div class=\"col-span-12 md:col-span-8\">\n                    <div\n                        *ngIf=\"data?.stateLearningWeekSection?.events.enabled && data?.stateLearningWeekSection?.events.column[0]\">\n                        <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events.column[0]\"\n                            [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                    </div>\n                </div> -->\n                <div class=\"col-span-12 md:col-span-4\">\n                    <ng-container *ngIf=\"!isMobile\">\n                        <ng-container >\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                                    <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                        [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                                    </sb-uic-user-progress>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                                    <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                                    </sb-uic-speakers>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                                    <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                        (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                                </div>\n                            </div>\n                        </ng-container>\n    \n                        <div class=\"hidden md:block padding-top-xl padding-bottom-m\" *ngIf=\"data?.cbpPlanSection?.data\">\n                            <div class=\"pt-4\">\n                                <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                                </sb-uic-cbp-plan>\n                            </div>\n                        </div>\n                        <div class=\"hidden md:block\" *ngIf=\"!data?.announcementSection?.disable\">\n                            <div class=\"pt-4\">\n                                <sb-uic-announcements [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.announcementSection?.data\">\n                                </sb-uic-announcements>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n    <div class=\"flex  items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"w-full\">\n            Announcement Section -->\n<!-- <h1>Announcement</h1>\n        </div>\n    </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n    <ng-container *ngIf=\"data?.length\">\n        <ng-container *ngFor=\"let section of data\">\n            <ng-container *ngIf=\"section?.enabled\">\n                <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\"\n                    [ngClass]=\"{'container': section.wrapperClass}\">\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=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                    [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </section>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\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\"\n        *ngIf=\"!hideCompetencyBlock;else noData\">\n        <div class=\"w-full container-balanced\">\n            <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">This section shows the list of top competencies users in\n                this MDO are learning, based on the courses they've completed and enrolled in.</p>\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook-mdo [dynamicColor]=\"'#999999'\" [dynamicAlignPills]=\"'start'\"\n                    [cardDisplayCount]=\"2\" (emptyResponse)=\"hideCompetency($event)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\" [objectData]=\"competency\"\n                    [providerId]=\"orgId\">\n                </sb-uic-competency-passbook-mdo>\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<ng-template #contentStripTemplate let-data=\"data\">\n    <ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n        <div class=\"flex mb-8\">\n            <div class=\"w-full\">\n                <sb-uic-content-strip-with-tabs [emitViewAll]=\"true\" (viewAllResponse)=\"showAllContent($event, data)\"\n                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" [providerId]=\"orgId\"\n                    [widgetData]=\"data?.contentStrip\" [channnelName]=\"channnelName\">\n                </sb-uic-content-strip-with-tabs>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noData>\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container top-learners margin-bottom-l margin-top-l\">\n            <sb-uic-top-learners [objectData]=\"data\" [channnelName]=\"channnelName\" [channelId]=\"orgId\" [slwConfig]=\"slwConfiguration\">\n            </sb-uic-top-learners>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #lookerproSection let-data=\"data\">\n    <div class=\"flex items-center justify-center flex-wrap\">\n        <div class=\" w-full flex flex-col items-center justify-center\">\n            <h2 *ngIf=\"data?.header?.headerText\" class=\"pt-4\">{{data?.header?.headerText}}</h2>\n            <p *ngIf=\"data?.header?.description\">{{data?.header?.description}}</p>\n        </div>\n        <div class=\"container mt-4 mb-4\" *ngIf=\"lookerProUrl\">\n            <iframe class=\"w-full \" height=\"{{iframeHeight}}\"\n            [src]=\"lookerProUrl\"\n            frameborder=\"0\" style=\"border:0\" allowfullscreen\n            sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"></iframe>\n        </div>\n    </div>\n</ng-template>\n<ng-template #supportSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container support-section\">\n            <sb-uic-video-conference [videoConf]=\"data\"></sb-uic-video-conference>\n        </div>\n    </div>\n</ng-template>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnnouncementsComponent, selector: "sb-uic-announcements", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: TopLearnersComponent$1, selector: "sb-uic-top-learners", inputs: ["objectData", "channelId", "channnelName", "slwConfig"] }, { kind: "component", type: CbpPlanComponent, selector: "sb-uic-cbp-plan", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: CompetencyPassbookMdoComponent, selector: "sb-uic-competency-passbook-mdo", inputs: ["objectData", "providerId", "cardDisplayCount", "dynamicClass", "dynamicColor", "dynamicAlignPills"], outputs: ["emptyResponse", "temeletryResponse"] }, { kind: "component", type: ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse"] }, { kind: "component", type: DataPointsComponent, selector: "sb-uic-data-points", inputs: ["objectData", "layoutType", "fetchDataFromApi", "providerId", "pageLayout", "title", "slwConfig"] }, { kind: "component", type: SlidersLibComponent, selector: "sb-uic-sliders", inputs: ["widgetData", "styleData", "title", "type"] }, { kind: "component", type: HighlightsOfWeekComponent, selector: "sb-uic-highlights-of-week", inputs: ["objectData"] }, { kind: "component", type: UserProgressComponent, selector: "sb-uic-user-progress", inputs: ["objectData", "rootOrgId"] }, { kind: "component", type: EventsComponent, selector: "sb-uic-events", inputs: ["object", "nwlEventsConfig"] }, { kind: "component", type: SpeakersComponent, selector: "sb-uic-speakers", inputs: ["objectData"] }, { kind: "component", type: MdoLeaderboardComponent, selector: "sb-uic-mdo-leaderboard", inputs: ["orgId", "object", "slwConfig"], outputs: ["tabClicked"] }, { kind: "component", type: KeyHighlightsComponent, selector: "sb-uic-key-highlights", inputs: ["providerId", "formData", "mode"], outputs: ["emptyResponse"] }, { kind: "component", type: i13.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: VideoConferenceComponent, selector: "sb-uic-video-conference", inputs: ["videoConf"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }, { kind: "pipe", type: OrderByPipe, name: "orderBy" }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MdoChannelV2Component, decorators: [{
             type: Component,
             args: [{ selector: 'sb-uic-mdo-channel-v2', template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: titles }\">\n</ws-widget-btn-page-back>\n\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  | orderBy: 'order'\">\n                <ng-container *ngIf=\"section?.enabled\">\n                    <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4 {{section?.customClass}}\"\n                        [ngClass]=\"{'container': section.wrapperClass}\" >\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=\"'lookerSection'\" [ngTemplateOutlet]=\"lookerproSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'topLearners'\" [ngTemplateOutlet]=\"topLearners\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                    <ng-container *ngSwitchCase=\"'mainContent'\" [ngTemplateOutlet]=\"mainContent\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                        <ng-container *ngSwitchCase=\"'supportSection'\" [ngTemplateOutlet]=\"supportSection\"\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\n\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"hidden md:block\">\n        <div class=\"web-banner-background\">\n            <div class=\"flex  items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\">\n                    </div>\n                    <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n                                <div class=\"\">\n                                    <div class=\"flex items-center logo-square \">\n                                        <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                                    </div>\n                                    <h1 class=\"  txt-ellipsis-2 break-words pt-10  mt-2 {{data?.titleClass}}\" [style.color]=\"data?.titleColor\">\n                                        {{data.title || channnelName}}</h1>\n                                    <h4 *ngIf=\"data?.subTitle\" class=\"  txt-ellipsis-2 break-words {{data?.subTitleClass}}\" [style.color]=\"data?.subTitleColor\">\n                                        {{data?.subTitle}}</h4>\n\n                                    <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwo\">\n                                        {{data?.subTitleTwo}}</h4>\n                                    <p class=\"mat-body-1\" [style.color]=\"data?.descriptionColor\">\n                                        {{data?.description | slice:0:descriptionMaxLength}}\n                                        <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                    </p>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-span-12 md:col-span-6\">\n                            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n    </div>\n\n\n    <div class=\"hidden md:block\">\n        <div class=\"col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                <sb-uic-speakers [layoutType]=\"'mobile'\"\n                    [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                </sb-uic-speakers>\n            </div>\n\n        </div>\n    </div>\n\n    <!-- top section m-site layout -->\n    <div class=\"block md:hidden\">\n        <div class=\"col-span-12\">\n            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData && data?.sliderData?.sliders\">\n                <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                    [styleData]=\"data?.sliderData?.styleData\"></sb-uic-sliders>\n            </div>\n        </div>\n        <div class=\"container px-4 flex flex-col mob-container\">\n            <div class=\"mr-4 logo-box-container\">\n                <div class=\"flex logo-box-square top mr-4\">\n                    <img alt=\"Application Logo\" class=\"logo-img logo-img-mb {{data?.customMobileClass}}\" [src]=\"data?.logoMobile || 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 || channnelName}}</h1>\n                <h4 *ngIf=\"data?.subTitle\" class=\" sub-title txt-ellipsis-2 break-words \" [style.color]=\"data?.subTitleColorMobile\">\n                    {{data?.subTitle}}</h4>\n\n                <h4 *ngIf=\"data?.subTitleTwo\" class=\" sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwoMobile\">\n                    {{data?.subTitleTwo}}</h4>\n                <p class=\"mat-body-2\">\n                    {{data?.description | slice:0:descriptionMaxLength}}\n                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                </p>\n            </div>\n        </div>\n    </div>\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container metrics-section\">\n            <div class=\"hidden md:block\">\n                <div class=\"metrics\" [ngStyle]=\"{'background': data?.metrics?.background}\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleFlexeRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n            <div class=\"block md:hidden  pt-14 px-4\">\n                <div class=\"mob-metrics mob-metrics-sec\">\n                    <sb-uic-data-points [providerId]=\"orgId\" [fetchDataFromApi]=\"true\"\n                        [objectData]=\"data?.metrics?.data\" [layoutType]=\"'singleRow'\" [pageLayout]=\"'mdo'\" [slwConfig]=\"slwConfiguration\">\n                    </sb-uic-data-points>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n<ng-template #mainContent let-data=\"data\">\n    <div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"container\">\n            <ng-container *ngIf=\"isMobile\">\n                <ng-container>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                        <sb-uic-key-highlights\n                            (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                            [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                            [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                    <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                        <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                            <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                            </sb-uic-user-progress>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                            <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                            </sb-uic-speakers>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden \">\n                        <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                            <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n                    <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                        [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                    </sb-uic-cbp-plan>\n                </div>\n                <div class=\"block md:hidden col-span-12 mt-6\" *ngIf=\"!data?.announcementSection?.disable\">\n                    <sb-uic-announcements [layoutType]=\"'mobile'\" (openDialog)=\"triggerOpenDialog($event)\"\n                        [objectData]=\"data?.announcementSection?.data\" [fetchDataFromApi]=\"false\" [channelId]=\"orgId\">\n                    </sb-uic-announcements>\n                    <div class=\"announcements-container\" *ngIf=\"showModal\">\n                        <div class=\"cursor-pointer close-share-dialog\">\n                            <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n                        </div>\n                        <div class=\"share-modal px-3 pt-8\">\n                            <sb-uic-announcements [layoutType]=\"'web'\" (openDialog)=\"triggerOpenDialog($event)\"\n                                [objectData]=\"data?.announcementSection?.data\" [mobileHeight]=\"true\"\n                                [fetchDataFromApi]=\"true\" [channelId]=\"orgId\">\n                            </sb-uic-announcements>\n                        </div>\n                    </div>\n                </div>\n            </ng-container>\n\n            <div class=\"col-span-12\">\n                <div class=\"flex items-center justify-center\">\n                    <div class=\"container margin-top-xl\"  >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n                            <sb-uic-key-highlights\n                                (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n                                [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" [providerId]=\"providerId\"\n                                [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                        </div>\n\n                    </div>\n                </div>\n            </div>\n            <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n                    <ng-container >\n                        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n                            <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\">\n                            </sb-uic-highlights-of-week>\n                        </div>\n\n                        <div>\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.mandatoryCourse?.enabled && data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"\">\n                            <div\n                                *ngIf=\"data?.stateLearningWeekSection?.exploreLearningContent?.enabled \n                                && data?.stateLearningWeekSection?.exploreLearningContent?.strips[0]\">\n                                <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                    <sb-uic-content-strip-with-tabs [emitViewAll]=\"false\" \n                                        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n                                        [providerId]=\"orgId\"\n                                        [widgetData]=\"data?.stateLearningWeekSection?.exploreLearningContent\"\n                                        [channnelName]=\"'channnelName'\">\n                                    </sb-uic-content-strip-with-tabs>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div *ngIf=\"data?.stateLearningWeekSection?.events?.enabled && data?.stateLearningWeekSection?.events?.column?.length &&\n                            data?.stateLearningWeekSection?.events?.column[0]\">\n                            <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events?.column[0]\"\n                                [nwlEventsConfig]=\"slwConfiguration\"></sb-uic-events>\n                        </div>\n                    </ng-container>\n                    <!-- Tabs Section -->\n                     <ng-container *ngIf=\"!data?.tabSection?.disable\">\n\n                        <mat-tab-group animationDuration=\"0ms\" class=\"mat-tab-labels mytabs w-full \"\n                        [selectedIndex]=\"selectedIndex\"\n                        (selectedTabChange)=\"selectedIndex = $event.index; tabClicked($event)\">\n                        <mat-tab label=\"Content\">\n                            <ng-template mat-tab-label i18n>\n                                Learn\n                            </ng-template>\n                            <ng-container *ngIf=\"data?.tabSection?.contentTab?.length === contentTabEmptyResponseCount\">\n                                <div class=\"flex justify-center w-full\">\n                                    <div class=\"margin-xl text-center\">\n                                        <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive\n                                            alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n                                        <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' |\n                                            translate}}</h2>\n                                    </div>\n                                </div>\n                            </ng-container>\n                            <div class=\"padding-top-l \">\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.contentTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                        <mat-tab label=\"Core Areas\">\n                            <ng-template mat-tab-label i18n>\n                                Competency\n                            </ng-template>\n                            <div>\n                                <ng-container [ngTemplateOutlet]=\"columnSectionDisplay\"\n                                    [ngTemplateOutletContext]=\"{data: data.tabSection.coreAreasTab}\"></ng-container>\n                            </div>\n                        </mat-tab>\n                    </mat-tab-group>\n                     </ng-container>\n                </div>\n                <!-- <div class=\"col-span-12 md:col-span-8\">\n                    <div\n                        *ngIf=\"data?.stateLearningWeekSection?.events.enabled && data?.stateLearningWeekSection?.events.column[0]\">\n                        <sb-uic-events [object]=\"data?.stateLearningWeekSection?.events.column[0]\"\n                            [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                    </div>\n                </div> -->\n                <div class=\"col-span-12 md:col-span-4\">\n                    <ng-container *ngIf=\"!isMobile\">\n                        <ng-container >\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n                                    <sb-uic-user-progress [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                                        [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n                                    </sb-uic-user-progress>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n                                    <sb-uic-speakers [layoutType]=\"'web'\" [mobileHeight]=\"false\"\n                                        [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n                                    </sb-uic-speakers>\n                                </div>\n                            </div>\n                            <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n                                <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n                                    <sb-uic-mdo-leaderboard [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" [slwConfig]=\"slwConfiguration\"\n                                        (tabClicked)=\"raiseTabClick($event)\" [orgId]=\"orgId\"></sb-uic-mdo-leaderboard>\n                                </div>\n                            </div>\n                        </ng-container>\n    \n                        <div class=\"hidden md:block padding-top-xl padding-bottom-m\" *ngIf=\"data?.cbpPlanSection?.data\">\n                            <div class=\"pt-4\">\n                                <sb-uic-cbp-plan [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.cbpPlanSection?.data\">\n                                </sb-uic-cbp-plan>\n                            </div>\n                        </div>\n                        <div class=\"hidden md:block\" *ngIf=\"!data?.announcementSection?.disable\">\n                            <div class=\"pt-4\">\n                                <sb-uic-announcements [layoutType]=\"'web'\" [mobileHeight]=\"false\" [fetchDataFromApi]=\"true\"\n                                    [channelId]=\"orgId\" [objectData]=\"data?.announcementSection?.data\">\n                                </sb-uic-announcements>\n                            </div>\n                        </div>\n                    </ng-container>\n                </div>\n\n\n            </div>\n        </div>\n    </div>\n</ng-template>\n<!-- \n<ng-template #announcement let-data=\"data\">\n    <div class=\"flex  items-center justify-center\" [ngStyle]=\"{'background': data.background}\">\n        <div class=\"w-full\">\n            Announcement Section -->\n<!-- <h1>Announcement</h1>\n        </div>\n    </div>\n</ng-template> -->\n\n\n<ng-template #columnSectionDisplay let-data=\"data\">\n    <ng-container *ngIf=\"data?.length\">\n        <ng-container *ngFor=\"let section of data\">\n            <ng-container *ngIf=\"section?.enabled\">\n                <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\"\n                    [ngClass]=\"{'container': section.wrapperClass}\">\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=\"'competency'\" [ngTemplateOutlet]=\"competency\"\n                                    [ngTemplateOutletContext]=\"{competency: column}\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedProgramStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentRecommendedCoursesStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentFeaturedStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                                <ng-container *ngSwitchCase=\"'contentcertificationsOfWeekStrip'\"\n                                    [ngTemplateOutlet]=\"contentStripTemplate\" [ngTemplateOutletContext]=\"{\n                                        data: {contentStrip: column?.data, sectionKey: section.key}\n                                        }\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </ng-container>\n                </section>\n            </ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n\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\"\n        *ngIf=\"!hideCompetencyBlock;else noData\">\n        <div class=\"w-full container-balanced\">\n            <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">This section shows the list of top competencies users in\n                this MDO are learning, based on the courses they've completed and enrolled in.</p>\n            <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n                <sb-uic-competency-passbook-mdo [dynamicColor]=\"'#999999'\" [dynamicAlignPills]=\"'start'\"\n                    [cardDisplayCount]=\"2\" (emptyResponse)=\"hideCompetency($event)\"\n                    (temeletryResponse)=\"raiseCompetencyTelemetry($event)\" [objectData]=\"competency\"\n                    [providerId]=\"orgId\">\n                </sb-uic-competency-passbook-mdo>\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<ng-template #contentStripTemplate let-data=\"data\">\n    <ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n        <div class=\"flex mb-8\">\n            <div class=\"w-full\">\n                <sb-uic-content-strip-with-tabs [emitViewAll]=\"true\" (viewAllResponse)=\"showAllContent($event, data)\"\n                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" [providerId]=\"orgId\"\n                    [widgetData]=\"data?.contentStrip\" [channnelName]=\"channnelName\">\n                </sb-uic-content-strip-with-tabs>\n            </div>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noData>\n    <div class=\"flex justify-center w-full\">\n        <div class=\"margin-xl text-center\">\n            <img src=\"/assets/common/error-pages/empty_search.svg\" wsUtilsImageResponsive alt=\"No results\"\n                class=\"margin-top-l margin-bottom-s\">\n            <h2 class=\"mat-h2\" i18n=\"search route no result\">{{'learnsearch.noResults' | translate}}</h2>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #topLearners let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container top-learners margin-bottom-l margin-top-l\">\n            <sb-uic-top-learners [objectData]=\"data\" [channnelName]=\"channnelName\" [channelId]=\"orgId\" [slwConfig]=\"slwConfiguration\">\n            </sb-uic-top-learners>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #lookerproSection let-data=\"data\">\n    <div class=\"flex items-center justify-center flex-wrap\">\n        <div class=\" w-full flex flex-col items-center justify-center\">\n            <h2 *ngIf=\"data?.header?.headerText\" class=\"pt-4\">{{data?.header?.headerText}}</h2>\n            <p *ngIf=\"data?.header?.description\">{{data?.header?.description}}</p>\n        </div>\n        <div class=\"container mt-4 mb-4\" *ngIf=\"lookerProUrl\">\n            <iframe class=\"w-full \" height=\"{{iframeHeight}}\"\n            [src]=\"lookerProUrl\"\n            frameborder=\"0\" style=\"border:0\" allowfullscreen\n            sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"></iframe>\n        </div>\n    </div>\n</ng-template>\n<ng-template #supportSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container support-section\">\n            <sb-uic-video-conference [videoConf]=\"data\"></sb-uic-video-conference>\n        </div>\n    </div>\n</ng-template>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2.EventService }, { type: i2$1.TranslateService }, { type: i2.MultilingualTranslationsService }, { type: i2.ConfigurationsService }, { type: i4$2.DomSanitizer }, { type: i2.UtilityService }]; }, propDecorators: { sectionList: [{
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2.EventService }, { type: i2$1.TranslateService }, { type: i2.MultilingualTranslationsService }, { type: i2.ConfigurationsService }, { type: i1$6.DomSanitizer }, { type: i2.UtilityService }]; }, propDecorators: { sectionList: [{
                 type: Input
             }], slwConfiguration: [{
                 type: Input
@@ -13214,7 +14212,7 @@ class SafeUrlPipe {
     transform(url) {
         return this.sanitizer.bypassSecurityTrustResourceUrl(url);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i4$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
     static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SafeUrlPipe, name: "safeUrl" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeUrlPipe, decorators: [{
@@ -13222,7 +14220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{
                     name: 'safeUrl'
                 }]
-        }], ctorParameters: function () { return [{ type: i4$2.DomSanitizer }]; } });
+        }], ctorParameters: function () { return [{ type: i1$6.DomSanitizer }]; } });
 
 class SafeUrlPipeModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeUrlPipeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -13260,9 +14258,994 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class EditorDialogComponent {
+    constructor(fb, http, dialogRef, data) {
+        this.fb = fb;
+        this.http = http;
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this.uploadStatus = '';
+        this.isUploading = false;
+        // Slider specific properties
+        this.sliderData = {
+            sliders: [],
+            styleData: {
+                dots: true,
+                infinite: true,
+                speed: 500,
+                slidesToShow: 1,
+                slidesToScroll: 1
+            }
+        };
+        this.isEditingSlider = false;
+        this.editingIndex = -1;
+        this.formType = data.fieldType || 'text';
+    }
+    ngOnInit() {
+        this.initForm();
+        this.initSliderItemForm();
+    }
+    initForm() {
+        // Create form based on field type
+        switch (this.formType) {
+            case 'textarea':
+                this.editorForm = this.fb.group({
+                    value: [this.data.value, [Validators.required]]
+                });
+                break;
+            case 'color':
+                this.editorForm = this.fb.group({
+                    value: [this.data.value, [Validators.required, Validators.pattern(/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/)]]
+                });
+                break;
+            case 'image':
+                this.editorForm = this.fb.group({
+                    value: [this.data.value, [Validators.required]]
+                });
+                break;
+            case 'boolean':
+                this.editorForm = this.fb.group({
+                    value: [!!this.data.value]
+                });
+                break;
+            case 'metrics':
+                this.editorForm = this.fb.group({
+                    value: [this.data.value]
+                });
+                break;
+            case 'slider':
+                // Initialize slider data from the input or use defaults
+                if (this.data.value && this.data.value.sliders && this.data.value.styleData) {
+                    this.sliderData = this.data.value;
+                }
+                else if (this.data.sliderData) {
+                    this.sliderData = this.data.sliderData;
+                }
+                this.editorForm = this.fb.group({
+                    value: [this.sliderData]
+                });
+                break;
+            default:
+                this.editorForm = this.fb.group({
+                    value: [this.data.value, [Validators.required]]
+                });
+        }
+    }
+    initSliderItemForm(item) {
+        this.sliderItemForm = this.fb.group({
+            active: [item?.active !== undefined ? item.active : true],
+            banners: this.fb.group({
+                l: [item?.banners?.l || '', [Validators.required]],
+                m: [item?.banners?.m || ''],
+                s: [item?.banners?.s || ''],
+                xl: [item?.banners?.xl || ''],
+                xs: [item?.banners?.xs || ''],
+                xxl: [item?.banners?.xxl || '']
+            }),
+            redirectUrl: [item?.redirectUrl || ''],
+            queryParams: [item?.queryParams || {}],
+            title: [item?.title || '']
+        });
+    }
+    // General image upload methods
+    onFileSelected(event) {
+        const file = event.target.files[0];
+        if (file) {
+            this.uploadImage(file);
+        }
+    }
+    uploadImage(file) {
+        this.isUploading = true;
+        this.uploadStatus = 'Uploading...';
+        const formData = new FormData();
+        formData.append('file', file);
+        // Headers as specified in the curl command
+        const headers = new HttpHeaders({
+            'Accept': 'application/json, text/plain, */*',
+            'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
+            'Cache-Control': 'no-cache',
+            'Pragma': 'no-cache',
+            'locale': 'en',
+            'org': 'dopt',
+            'rootOrg': 'igot'
+        });
+        this.http.post('http://localhost:3000/apis/proxies/v8/storage/orgStoreUpload', formData, { headers })
+            .subscribe({
+            next: (response) => {
+                this.isUploading = false;
+                if (response.responseCode === 'OK' && response.result && response.result.url) {
+                    // Transform the URL
+                    const transformedUrl = this.transformImageUrl(response.result.url);
+                    // Update the form with the new URL
+                    this.editorForm.get('value')?.setValue(transformedUrl);
+                    this.uploadStatus = 'Upload successful!';
+                    // Clear status after 3 seconds
+                    setTimeout(() => {
+                        this.uploadStatus = '';
+                    }, 3000);
+                }
+                else {
+                    this.uploadStatus = 'Upload failed. Invalid response.';
+                }
+            },
+            error: (error) => {
+                this.isUploading = false;
+                this.uploadStatus = 'Upload failed. Please try again.';
+                console.error('Upload error:', error);
+            }
+        });
+    }
+    // Slider specific methods
+    onSliderClick(event) {
+        console.log('Slider click:', event);
+    }
+    onSliderImageSelected(event) {
+        const file = event.target.files[0];
+        if (file) {
+            this.uploadSliderImage(file);
+        }
+    }
+    uploadSliderImage(file) {
+        this.uploadStatus = 'Uploading...';
+        const formData = new FormData();
+        formData.append('file', file);
+        const headers = new HttpHeaders({
+            'Accept': 'application/json, text/plain, */*',
+            'Accept-Language': 'en-GB,en-US;q=0.9,en;q=0.8',
+            'Cache-Control': 'no-cache',
+            'Pragma': 'no-cache',
+            'locale': 'en',
+            'org': 'dopt',
+            'rootOrg': 'igot'
+        });
+        this.http.post('http://localhost:3000/apis/proxies/v8/storage/orgStoreUpload', formData, { headers })
+            .subscribe({
+            next: (response) => {
+                if (response.responseCode === 'OK' && response.result && response.result.url) {
+                    // Transform the URL
+                    const transformedUrl = this.transformImageUrl(response.result.url);
+                    // Update all banner sizes with the same URL
+                    const bannersControl = this.sliderItemForm.get('banners');
+                    if (bannersControl) {
+                        bannersControl.get('l')?.setValue(transformedUrl);
+                        bannersControl.get('m')?.setValue(transformedUrl);
+                        bannersControl.get('s')?.setValue(transformedUrl);
+                        bannersControl.get('xl')?.setValue(transformedUrl);
+                        bannersControl.get('xs')?.setValue(transformedUrl);
+                        bannersControl.get('xxl')?.setValue(transformedUrl);
+                    }
+                    this.uploadStatus = 'Upload successful!';
+                    // Clear status after 3 seconds
+                    setTimeout(() => {
+                        this.uploadStatus = '';
+                    }, 3000);
+                }
+                else {
+                    this.uploadStatus = 'Upload failed. Invalid response.';
+                }
+            },
+            error: (error) => {
+                this.uploadStatus = 'Upload failed. Please try again.';
+                console.error('Upload error:', error);
+            }
+        });
+    }
+    addSliderItem() {
+        this.isEditingSlider = true;
+        this.editingIndex = -1;
+        this.initSliderItemForm();
+    }
+    editSliderItem(index) {
+        this.isEditingSlider = true;
+        this.editingIndex = index;
+        this.initSliderItemForm(this.sliderData.sliders[index]);
+    }
+    removeSliderItem(index) {
+        this.sliderData.sliders.splice(index, 1);
+        this.updateEditorFormValue();
+    }
+    saveSliderItem() {
+        if (this.sliderItemForm.valid) {
+            const item = this.sliderItemForm.value;
+            // Ensure all banner sizes have the same URL if not already set
+            const mainImageUrl = item.banners.l;
+            if (mainImageUrl) {
+                item.banners.m = item.banners.m || mainImageUrl;
+                item.banners.s = item.banners.s || mainImageUrl;
+                item.banners.xl = item.banners.xl || mainImageUrl;
+                item.banners.xs = item.banners.xs || mainImageUrl;
+                item.banners.xxl = item.banners.xxl || mainImageUrl;
+            }
+            // Ensure queryParams is an object
+            if (!item.queryParams || typeof item.queryParams !== 'object') {
+                item.queryParams = {};
+            }
+            if (this.editingIndex === -1) {
+                // Add new item
+                this.sliderData.sliders.push(item);
+            }
+            else {
+                // Update existing item
+                this.sliderData.sliders[this.editingIndex] = item;
+            }
+            this.updateEditorFormValue();
+            this.cancelSliderItemEdit();
+        }
+    }
+    cancelSliderItemEdit() {
+        this.isEditingSlider = false;
+        this.editingIndex = -1;
+    }
+    updateEditorFormValue() {
+        // Update the main form with the new slider data
+        this.editorForm.get('value')?.setValue({ ...this.sliderData });
+    }
+    transformImageUrl(originalUrl) {
+        // Replace 'https://storage.googleapis.com/igotqa/' with 'https://portal.qa.karmayogibharat.net/content-store/'
+        return originalUrl.replace('https://storage.googleapis.com/igotqa/', 'https://portal.qa.karmayogibharat.net/content-store/');
+    }
+    onSubmit() {
+        if (this.editorForm.valid) {
+            this.dialogRef.close(this.editorForm.value.value);
+        }
+    }
+    onCancel() {
+        this.dialogRef.close();
+    }
+    dropSliderItem(event) {
+        moveItemInArray(this.sliderData.sliders, event.previousIndex, event.currentIndex);
+        this.updateEditorFormValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDialogComponent, deps: [{ token: i7$1.FormBuilder }, { token: i1.HttpClient }, { token: i3$1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditorDialogComponent, selector: "app-editor-dialog", ngImport: i0, template: "<h2 mat-dialog-title>Edit {{data.displayName}}</h2>\n<mat-dialog-content>\n  <form [formGroup]=\"editorForm\" class=\"editor-form\">\n    <div [ngSwitch]=\"formType\">\n      <!-- Text input -->\n      <mat-form-field *ngSwitchCase=\"'text'\" appearance=\"outline\" class=\"full-width\">\n        <input matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\">\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n      \n      <!-- Textarea -->\n      <mat-form-field *ngSwitchCase=\"'textarea'\" appearance=\"outline\" class=\"full-width\">\n        <textarea matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\" rows=\"5\"></textarea>\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n      \n      <!-- Color picker -->\n      <div *ngSwitchCase=\"'color'\" class=\"color-picker-container\">\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <input matInput formControlName=\"value\" placeholder=\"Enter color code (e.g., #FF5733)\">\n          <mat-error *ngIf=\"editorForm.get('value')?.hasError('required')\">Color is required</mat-error>\n          <mat-error *ngIf=\"editorForm.get('value')?.hasError('pattern')\">Invalid color format</mat-error>\n        </mat-form-field>\n        <div class=\"color-preview\" [style.background-color]=\"editorForm.get('value')?.value\"></div>\n      </div>\n      \n      <!-- Image URL with upload option -->\n      <div *ngSwitchCase=\"'image'\" class=\"image-container\">\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <input matInput formControlName=\"value\" placeholder=\"Enter image URL\">\n          <mat-error *ngIf=\"editorForm.get('value')?.invalid\">Valid image URL is required</mat-error>\n        </mat-form-field>\n        \n        <div class=\"upload-section\">\n          <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"fileInput.click()\">\n            <mat-icon>cloud_upload</mat-icon> Upload Image\n          </button>\n          <input hidden (change)=\"onFileSelected($event)\" #fileInput type=\"file\" accept=\"image/*\">\n          <span *ngIf=\"uploadStatus\" class=\"upload-status\">{{uploadStatus}}</span>\n        </div>\n        \n        <div class=\"image-preview\">\n          <img [src]=\"editorForm.get('value')?.value\" alt=\"Image Preview\" *ngIf=\"editorForm.get('value')?.value\">\n        </div>\n      </div>\n      \n      <!-- Boolean toggle -->\n      <mat-slide-toggle *ngSwitchCase=\"'boolean'\" formControlName=\"value\" color=\"primary\">\n        {{editorForm.get('value')?.value ? 'Enabled' : 'Disabled'}}\n      </mat-slide-toggle>\n      \n      <!-- For complex types like metrics -->\n      <div *ngSwitchCase=\"'metrics'\" class=\"complex-editor\">\n        <p>Metrics editor not yet implemented</p>\n        <!-- Implement metrics editor UI here -->\n      </div>\n      \n      <!-- Slider implementation -->\n      <div *ngSwitchCase=\"'slider'\" class=\"slider-editor\">\n        <!-- Slider Preview -->\n        <div class=\"slider-preview-container\">\n          <h3>Preview</h3>\n          <div class=\"slider-preview\">\n            <sb-uic-sliders \n              [widgetData]=\"sliderData.sliders\" \n              [styleData]=\"sliderData.styleData\"\n              (clickEvent)=\"onSliderClick($event)\">\n            </sb-uic-sliders>\n          </div>\n        </div>\n        \n        <!-- Slider Items Management -->\n        <div class=\"slider-items-container\">\n          <h3>Slider Items</h3>\n          \n          <div class=\"slider-items\" *ngIf=\"sliderData.sliders.length\" cdkDropList (cdkDropListDropped)=\"dropSliderItem($event)\">\n            <div *ngFor=\"let item of sliderData.sliders; let i = index\" class=\"slider-item\" cdkDrag>\n              <div class=\"drag-handle\" cdkDragHandle>\n                <mat-icon>drag_indicator</mat-icon>\n              </div>\n              <div class=\"item-preview\">\n                <img [src]=\"item?.banners?.l\" alt=\"Slider image\" class=\"item-image\">\n                <div class=\"item-details\">\n                  <div class=\"item-title\">{{item.title || 'No title'}}</div>\n                  <div class=\"item-status\" [class.active]=\"item.active\">\n                    {{item.active ? 'Active' : 'Inactive'}}\n                  </div>\n                </div>\n              </div>\n              <div class=\"item-actions\">\n                <button mat-icon-button color=\"primary\" (click)=\"editSliderItem(i)\">\n                  <mat-icon>edit</mat-icon>\n                </button>\n                <button mat-icon-button color=\"warn\" (click)=\"removeSliderItem(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          \n          <div *ngIf=\"!sliderData.sliders.length\" class=\"no-items\">\n            No slider items available. Add some items to see them here.\n          </div>\n          <button mat-raised-button color=\"primary\" class=\"add-item-btn\" (click)=\"addSliderItem()\">\n            <mat-icon>add</mat-icon> Add Slider Item\n          </button>\n        </div>\n        \n        <!-- Item Editor (when editing) -->\n        <div *ngIf=\"isEditingSlider\" class=\"slider-item-editor\">\n          <h3>{{editingIndex === -1 ? 'Add' : 'Edit'}} Slider Item</h3>\n          <form [formGroup]=\"sliderItemForm\" class=\"slider-item-form\">\n            <div class=\"form-section\">\n              <h4>Basic Information</h4>\n              \n              <div class=\"toggle-container\">\n                <label class=\"toggle-label\">Item Status:</label>\n                <mat-slide-toggle formControlName=\"active\" color=\"primary\" class=\"active-toggle\">\n                  <span class=\"toggle-text\">{{sliderItemForm.get('active')?.value ? 'Active' : 'Inactive'}}</span>\n                </mat-slide-toggle>\n              </div>\n              \n              <mat-form-field appearance=\"outline\" class=\"full-width\">\n                <input matInput formControlName=\"title\" placeholder=\"Enter title\">\n              </mat-form-field>\n            </div>\n            \n            <div class=\"form-section\" formGroupName=\"banners\">\n              <h4>Banner Image</h4>\n              \n              <div class=\"image-container\">\n                <mat-form-field appearance=\"outline\" class=\"full-width\">\n                  <input matInput formControlName=\"l\" placeholder=\"Enter image URL\">\n                  <mat-error *ngIf=\"sliderItemForm.get('banners.l')?.invalid\">Valid image URL is required</mat-error>\n                </mat-form-field>\n                \n                <div class=\"upload-section\">\n                  <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"sliderFileInput.click()\">\n                    <mat-icon>cloud_upload</mat-icon> Upload Image\n                  </button>\n                  <input hidden (change)=\"onSliderImageSelected($event)\" #sliderFileInput type=\"file\" accept=\"image/*\">\n                  <span *ngIf=\"uploadStatus\" class=\"upload-status\">{{uploadStatus}}</span>\n                </div>\n                \n                <div class=\"image-preview\">\n                  <img [src]=\"sliderItemForm.get('banners.l')?.value\" alt=\"Image Preview\" *ngIf=\"sliderItemForm.get('banners.l')?.value\">\n                </div>\n                \n                <div class=\"note\">\n                  <small>\n                    <mat-icon class=\"small-icon\">info</mat-icon>\n                    The same image will be used for all banner sizes (L, M, S, XL, XS, XXL)\n                  </small>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"form-section\">\n              <h4>Navigation</h4>\n              \n              <mat-form-field appearance=\"outline\" class=\"full-width\">\n                <input matInput formControlName=\"redirectUrl\" placeholder=\"Enter redirect URL (optional)\">\n              </mat-form-field>\n            </div>\n            \n            <div class=\"item-form-actions\">\n              <button mat-button (click)=\"cancelSliderItemEdit()\">Cancel</button>\n              <button mat-raised-button color=\"primary\" [disabled]=\"sliderItemForm.invalid\" (click)=\"saveSliderItem()\">\n                Save Item\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>\n      \n      <!-- Default case -->\n      <mat-form-field *ngSwitchDefault appearance=\"outline\" class=\"full-width\">\n        <input matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\">\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n    </div>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button (click)=\"onCancel()\">Cancel</button>\n  <button mat-raised-button color=\"primary\" [disabled]=\"editorForm.invalid\" (click)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>", styles: [".editor-form{min-width:150px;width:100%;padding:16px 0}h2.mat-dialog-title{margin-top:0;font-size:20px;font-weight:500;color:#333}mat-dialog-content{padding:0 8px}mat-form-field{margin-bottom:16px}.color-picker-container{display:flex;align-items:center;gap:16px;margin-bottom:16px}.color-preview{width:40px;height:40px;border-radius:4px;border:1px solid #ccc;box-shadow:0 2px 4px #0000001a}.image-container{margin-bottom:16px}.upload-section{display:flex;align-items:center;margin:16px 0;gap:16px}.upload-status{margin-left:12px;font-size:14px;color:#666}.image-preview{margin-top:16px;max-width:100%;background-color:#f5f5f5;border-radius:4px;padding:8px}.image-preview img{max-width:100%;max-height:200px;object-fit:contain;border-radius:4px;box-shadow:0 2px 4px #0000001a}.complex-editor{margin:16px 0;padding:16px;border:1px solid #e0e0e0;border-radius:4px;background-color:#f9f9f9}mat-slide-toggle{margin:16px 0;display:block}mat-dialog-actions{padding:16px 0;margin-bottom:0}button[mat-button],button[mat-raised-button]{min-width:88px;margin-left:8px}.slider-editor{display:flex;flex-direction:column;gap:20px}.slider-preview-container{margin-bottom:20px}.slider-preview{border:1px solid #ddd;border-radius:4px;padding:16px;background-color:#f9f9f9}.slider-items-container{margin-bottom:20px}.slider-items{max-height:300px;overflow-y:auto;margin-bottom:15px}.slider-item{display:flex;align-items:center;padding:10px;border:1px solid #ddd;border-radius:4px;margin-bottom:10px;background-color:#fff;cursor:move}.slider-item:hover{border-color:#aaa;background-color:#f8f8f8}.slider-item.cdk-drag-placeholder{opacity:0}.slider-item.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.item-preview{display:flex;align-items:center;gap:10px;flex:1}.item-image{width:80px;height:50px;object-fit:cover;border-radius:4px}.item-details{display:flex;flex-direction:column}.item-title{font-weight:700}.item-description{font-size:.9em;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.item-actions{display:flex;gap:5px}.no-items{padding:15px;text-align:center;color:#666;background-color:#f9f9f9;border-radius:4px;margin-bottom:15px}.add-item-btn{margin-bottom:15px}.slider-item-editor{border:1px solid #ddd;border-radius:4px;padding:15px;margin-top:20px}.slider-item-form{display:flex;flex-direction:column;gap:15px}.image-container{display:flex;flex-direction:column;gap:10px}.upload-section{display:flex;align-items:center;gap:10px}.upload-status{color:#3f51b5;font-style:italic}.image-preview{margin-top:10px}.image-preview img{max-width:100%;max-height:200px;border-radius:4px;border:1px solid #ddd}.item-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.full-width{width:100%}.toggle-container{display:flex;align-items:center;margin-bottom:16px;padding:10px;border-radius:4px;background-color:#f5f5f5}.toggle-label{margin-right:12px;font-weight:500;color:#333}.active-toggle{display:flex;align-items:center}.active-toggle .mat-slide-toggle-content{font-weight:500}.toggle-text{margin-left:8px;font-weight:500;color:#333}.toggle-text:empty:before{content:\"Inactive\";color:#888}.cdk-drop-list-dragging .slider-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.form-section{margin-bottom:24px}.form-section h4{margin-bottom:12px;font-weight:500;color:#333;border-bottom:1px solid #eee;padding-bottom:8px}.note{margin-top:8px;background-color:#f8f9fa;padding:8px;border-radius:4px;border-left:3px solid #3f51b5}.small-icon{font-size:16px;height:16px;width:16px;vertical-align:middle;margin-right:4px}\n"], dependencies: [{ kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2$2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SlidersLibComponent, selector: "sb-uic-sliders", inputs: ["widgetData", "styleData", "title", "type"] }, { kind: "directive", type: i7$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i7$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i7$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i7$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i3$1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i3$1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i5.MatLegacyError, selector: "mat-error", inputs: ["id"] }, { kind: "component", type: i5.MatLegacyFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8$1.MatLegacyInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", exportAs: ["matInput"] }, { kind: "component", type: i8.MatLegacyButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i10.MatLegacySlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-editor-dialog', template: "<h2 mat-dialog-title>Edit {{data.displayName}}</h2>\n<mat-dialog-content>\n  <form [formGroup]=\"editorForm\" class=\"editor-form\">\n    <div [ngSwitch]=\"formType\">\n      <!-- Text input -->\n      <mat-form-field *ngSwitchCase=\"'text'\" appearance=\"outline\" class=\"full-width\">\n        <input matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\">\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n      \n      <!-- Textarea -->\n      <mat-form-field *ngSwitchCase=\"'textarea'\" appearance=\"outline\" class=\"full-width\">\n        <textarea matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\" rows=\"5\"></textarea>\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n      \n      <!-- Color picker -->\n      <div *ngSwitchCase=\"'color'\" class=\"color-picker-container\">\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <input matInput formControlName=\"value\" placeholder=\"Enter color code (e.g., #FF5733)\">\n          <mat-error *ngIf=\"editorForm.get('value')?.hasError('required')\">Color is required</mat-error>\n          <mat-error *ngIf=\"editorForm.get('value')?.hasError('pattern')\">Invalid color format</mat-error>\n        </mat-form-field>\n        <div class=\"color-preview\" [style.background-color]=\"editorForm.get('value')?.value\"></div>\n      </div>\n      \n      <!-- Image URL with upload option -->\n      <div *ngSwitchCase=\"'image'\" class=\"image-container\">\n        <mat-form-field appearance=\"outline\" class=\"full-width\">\n          <input matInput formControlName=\"value\" placeholder=\"Enter image URL\">\n          <mat-error *ngIf=\"editorForm.get('value')?.invalid\">Valid image URL is required</mat-error>\n        </mat-form-field>\n        \n        <div class=\"upload-section\">\n          <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"fileInput.click()\">\n            <mat-icon>cloud_upload</mat-icon> Upload Image\n          </button>\n          <input hidden (change)=\"onFileSelected($event)\" #fileInput type=\"file\" accept=\"image/*\">\n          <span *ngIf=\"uploadStatus\" class=\"upload-status\">{{uploadStatus}}</span>\n        </div>\n        \n        <div class=\"image-preview\">\n          <img [src]=\"editorForm.get('value')?.value\" alt=\"Image Preview\" *ngIf=\"editorForm.get('value')?.value\">\n        </div>\n      </div>\n      \n      <!-- Boolean toggle -->\n      <mat-slide-toggle *ngSwitchCase=\"'boolean'\" formControlName=\"value\" color=\"primary\">\n        {{editorForm.get('value')?.value ? 'Enabled' : 'Disabled'}}\n      </mat-slide-toggle>\n      \n      <!-- For complex types like metrics -->\n      <div *ngSwitchCase=\"'metrics'\" class=\"complex-editor\">\n        <p>Metrics editor not yet implemented</p>\n        <!-- Implement metrics editor UI here -->\n      </div>\n      \n      <!-- Slider implementation -->\n      <div *ngSwitchCase=\"'slider'\" class=\"slider-editor\">\n        <!-- Slider Preview -->\n        <div class=\"slider-preview-container\">\n          <h3>Preview</h3>\n          <div class=\"slider-preview\">\n            <sb-uic-sliders \n              [widgetData]=\"sliderData.sliders\" \n              [styleData]=\"sliderData.styleData\"\n              (clickEvent)=\"onSliderClick($event)\">\n            </sb-uic-sliders>\n          </div>\n        </div>\n        \n        <!-- Slider Items Management -->\n        <div class=\"slider-items-container\">\n          <h3>Slider Items</h3>\n          \n          <div class=\"slider-items\" *ngIf=\"sliderData.sliders.length\" cdkDropList (cdkDropListDropped)=\"dropSliderItem($event)\">\n            <div *ngFor=\"let item of sliderData.sliders; let i = index\" class=\"slider-item\" cdkDrag>\n              <div class=\"drag-handle\" cdkDragHandle>\n                <mat-icon>drag_indicator</mat-icon>\n              </div>\n              <div class=\"item-preview\">\n                <img [src]=\"item?.banners?.l\" alt=\"Slider image\" class=\"item-image\">\n                <div class=\"item-details\">\n                  <div class=\"item-title\">{{item.title || 'No title'}}</div>\n                  <div class=\"item-status\" [class.active]=\"item.active\">\n                    {{item.active ? 'Active' : 'Inactive'}}\n                  </div>\n                </div>\n              </div>\n              <div class=\"item-actions\">\n                <button mat-icon-button color=\"primary\" (click)=\"editSliderItem(i)\">\n                  <mat-icon>edit</mat-icon>\n                </button>\n                <button mat-icon-button color=\"warn\" (click)=\"removeSliderItem(i)\">\n                  <mat-icon>delete</mat-icon>\n                </button>\n              </div>\n            </div>\n          </div>\n          \n          <div *ngIf=\"!sliderData.sliders.length\" class=\"no-items\">\n            No slider items available. Add some items to see them here.\n          </div>\n          <button mat-raised-button color=\"primary\" class=\"add-item-btn\" (click)=\"addSliderItem()\">\n            <mat-icon>add</mat-icon> Add Slider Item\n          </button>\n        </div>\n        \n        <!-- Item Editor (when editing) -->\n        <div *ngIf=\"isEditingSlider\" class=\"slider-item-editor\">\n          <h3>{{editingIndex === -1 ? 'Add' : 'Edit'}} Slider Item</h3>\n          <form [formGroup]=\"sliderItemForm\" class=\"slider-item-form\">\n            <div class=\"form-section\">\n              <h4>Basic Information</h4>\n              \n              <div class=\"toggle-container\">\n                <label class=\"toggle-label\">Item Status:</label>\n                <mat-slide-toggle formControlName=\"active\" color=\"primary\" class=\"active-toggle\">\n                  <span class=\"toggle-text\">{{sliderItemForm.get('active')?.value ? 'Active' : 'Inactive'}}</span>\n                </mat-slide-toggle>\n              </div>\n              \n              <mat-form-field appearance=\"outline\" class=\"full-width\">\n                <input matInput formControlName=\"title\" placeholder=\"Enter title\">\n              </mat-form-field>\n            </div>\n            \n            <div class=\"form-section\" formGroupName=\"banners\">\n              <h4>Banner Image</h4>\n              \n              <div class=\"image-container\">\n                <mat-form-field appearance=\"outline\" class=\"full-width\">\n                  <input matInput formControlName=\"l\" placeholder=\"Enter image URL\">\n                  <mat-error *ngIf=\"sliderItemForm.get('banners.l')?.invalid\">Valid image URL is required</mat-error>\n                </mat-form-field>\n                \n                <div class=\"upload-section\">\n                  <button type=\"button\" mat-raised-button color=\"primary\" (click)=\"sliderFileInput.click()\">\n                    <mat-icon>cloud_upload</mat-icon> Upload Image\n                  </button>\n                  <input hidden (change)=\"onSliderImageSelected($event)\" #sliderFileInput type=\"file\" accept=\"image/*\">\n                  <span *ngIf=\"uploadStatus\" class=\"upload-status\">{{uploadStatus}}</span>\n                </div>\n                \n                <div class=\"image-preview\">\n                  <img [src]=\"sliderItemForm.get('banners.l')?.value\" alt=\"Image Preview\" *ngIf=\"sliderItemForm.get('banners.l')?.value\">\n                </div>\n                \n                <div class=\"note\">\n                  <small>\n                    <mat-icon class=\"small-icon\">info</mat-icon>\n                    The same image will be used for all banner sizes (L, M, S, XL, XS, XXL)\n                  </small>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"form-section\">\n              <h4>Navigation</h4>\n              \n              <mat-form-field appearance=\"outline\" class=\"full-width\">\n                <input matInput formControlName=\"redirectUrl\" placeholder=\"Enter redirect URL (optional)\">\n              </mat-form-field>\n            </div>\n            \n            <div class=\"item-form-actions\">\n              <button mat-button (click)=\"cancelSliderItemEdit()\">Cancel</button>\n              <button mat-raised-button color=\"primary\" [disabled]=\"sliderItemForm.invalid\" (click)=\"saveSliderItem()\">\n                Save Item\n              </button>\n            </div>\n          </form>\n        </div>\n      </div>\n      \n      <!-- Default case -->\n      <mat-form-field *ngSwitchDefault appearance=\"outline\" class=\"full-width\">\n        <input matInput formControlName=\"value\" placeholder=\"Enter {{data.displayName}}\">\n        <mat-error *ngIf=\"editorForm.get('value')?.invalid\">This field is required</mat-error>\n      </mat-form-field>\n    </div>\n  </form>\n</mat-dialog-content>\n<mat-dialog-actions align=\"end\">\n  <button mat-button (click)=\"onCancel()\">Cancel</button>\n  <button mat-raised-button color=\"primary\" [disabled]=\"editorForm.invalid\" (click)=\"onSubmit()\">Save</button>\n</mat-dialog-actions>", styles: [".editor-form{min-width:150px;width:100%;padding:16px 0}h2.mat-dialog-title{margin-top:0;font-size:20px;font-weight:500;color:#333}mat-dialog-content{padding:0 8px}mat-form-field{margin-bottom:16px}.color-picker-container{display:flex;align-items:center;gap:16px;margin-bottom:16px}.color-preview{width:40px;height:40px;border-radius:4px;border:1px solid #ccc;box-shadow:0 2px 4px #0000001a}.image-container{margin-bottom:16px}.upload-section{display:flex;align-items:center;margin:16px 0;gap:16px}.upload-status{margin-left:12px;font-size:14px;color:#666}.image-preview{margin-top:16px;max-width:100%;background-color:#f5f5f5;border-radius:4px;padding:8px}.image-preview img{max-width:100%;max-height:200px;object-fit:contain;border-radius:4px;box-shadow:0 2px 4px #0000001a}.complex-editor{margin:16px 0;padding:16px;border:1px solid #e0e0e0;border-radius:4px;background-color:#f9f9f9}mat-slide-toggle{margin:16px 0;display:block}mat-dialog-actions{padding:16px 0;margin-bottom:0}button[mat-button],button[mat-raised-button]{min-width:88px;margin-left:8px}.slider-editor{display:flex;flex-direction:column;gap:20px}.slider-preview-container{margin-bottom:20px}.slider-preview{border:1px solid #ddd;border-radius:4px;padding:16px;background-color:#f9f9f9}.slider-items-container{margin-bottom:20px}.slider-items{max-height:300px;overflow-y:auto;margin-bottom:15px}.slider-item{display:flex;align-items:center;padding:10px;border:1px solid #ddd;border-radius:4px;margin-bottom:10px;background-color:#fff;cursor:move}.slider-item:hover{border-color:#aaa;background-color:#f8f8f8}.slider-item.cdk-drag-placeholder{opacity:0}.slider-item.cdk-drag-preview{box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.item-preview{display:flex;align-items:center;gap:10px;flex:1}.item-image{width:80px;height:50px;object-fit:cover;border-radius:4px}.item-details{display:flex;flex-direction:column}.item-title{font-weight:700}.item-description{font-size:.9em;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.item-actions{display:flex;gap:5px}.no-items{padding:15px;text-align:center;color:#666;background-color:#f9f9f9;border-radius:4px;margin-bottom:15px}.add-item-btn{margin-bottom:15px}.slider-item-editor{border:1px solid #ddd;border-radius:4px;padding:15px;margin-top:20px}.slider-item-form{display:flex;flex-direction:column;gap:15px}.image-container{display:flex;flex-direction:column;gap:10px}.upload-section{display:flex;align-items:center;gap:10px}.upload-status{color:#3f51b5;font-style:italic}.image-preview{margin-top:10px}.image-preview img{max-width:100%;max-height:200px;border-radius:4px;border:1px solid #ddd}.item-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}.full-width{width:100%}.toggle-container{display:flex;align-items:center;margin-bottom:16px;padding:10px;border-radius:4px;background-color:#f5f5f5}.toggle-label{margin-right:12px;font-weight:500;color:#333}.active-toggle{display:flex;align-items:center}.active-toggle .mat-slide-toggle-content{font-weight:500}.toggle-text{margin-left:8px;font-weight:500;color:#333}.toggle-text:empty:before{content:\"Inactive\";color:#888}.cdk-drop-list-dragging .slider-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.form-section{margin-bottom:24px}.form-section h4{margin-bottom:12px;font-weight:500;color:#333;border-bottom:1px solid #eee;padding-bottom:8px}.note{margin-top:8px;background-color:#f8f9fa;padding:8px;border-radius:4px;border-left:3px solid #3f51b5}.small-icon{font-size:16px;height:16px;width:16px;vertical-align:middle;margin-right:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i7$1.FormBuilder }, { type: i1.HttpClient }, { type: i3$1.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class TopSectionComponent {
+    constructor(data, channelName, orgId, isMobile, slwConfig, isEdit, eventCallback, sanitizer) {
+        this.data = data;
+        this.channelName = channelName;
+        this.orgId = orgId;
+        this.isMobile = isMobile;
+        this.slwConfig = slwConfig;
+        this.isEdit = isEdit;
+        this.eventCallback = eventCallback;
+        this.sanitizer = sanitizer;
+        this.descriptionMaxLength = 500;
+        if (this.isEdit) {
+            console.log('Edit mode active for top section');
+        }
+    }
+    ngOnInit() {
+        this.stripWidth = `${(window.innerWidth - 1200 + 135) / 2}px`;
+    }
+    emitEvent(action, id, data) {
+        this.eventCallback({
+            action,
+            source: 'topSection',
+            id,
+            data: data || this.data
+        });
+    }
+    openEditor(fieldName, displayName, currentValue) {
+        this.eventCallback({
+            action: 'edit',
+            source: 'topSection',
+            id: fieldName,
+            data: {
+                fieldName,
+                displayName,
+                currentValue,
+                path: fieldName,
+                fieldType: this.getFieldType(fieldName, currentValue),
+                parentData: this.data
+            }
+        });
+    }
+    getFieldType(fieldName, value) {
+        if (fieldName === 'logo' || fieldName === 'logoMobile' || fieldName.includes('banner')) {
+            return 'image';
+        }
+        else if (fieldName === 'sliderData') {
+            return 'slider';
+        }
+        else if (fieldName === 'metrics') {
+            return 'metrics';
+        }
+        else if (typeof value === 'string' && value.startsWith('#')) {
+            return 'color';
+        }
+        else if (typeof value === 'boolean') {
+            return 'boolean';
+        }
+        else if (fieldName.includes('description')) {
+            return 'textarea';
+        }
+        else {
+            return 'text';
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopSectionComponent, deps: [{ token: 'sectionData' }, { token: 'channelName' }, { token: 'orgId' }, { token: 'isMobile' }, { token: 'slwConfiguration' }, { token: 'isEdit' }, { token: 'eventCallback' }, { token: i1$6.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TopSectionComponent, selector: "app-top-section", ngImport: i0, template: "<div class=\"hidden md:block\" *ngIf=\"!isMobile\">\n  <div class=\"web-banner-background\" [style.background]=\"data?.background\">\n    <div class=\"flex items-center justify-center\">\n      <div class=\"container\">\n        <div *ngIf=\"!isEdit\" class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\"></div>\n        <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n          <div class=\"col-span-12 md:col-span-6\">\n            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n              <div class=\"\">\n                <div class=\"flex items-center logo-square\">\n                  <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('logo', 'Logo', data?.logo)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </div>\n                <h1 class=\"txt-ellipsis-2 break-words pt-10 mt-2 {{data?.titleClass}}\" [style.color]=\"data?.titleColor\">\n                  {{data.title || channelName}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('title', 'Title', data?.title || channelName)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h1>\n                <h4 *ngIf=\"data?.subTitle\" class=\"txt-ellipsis-2 break-words {{data?.subTitleClass}}\" [style.color]=\"data?.subTitleColor\">\n                  {{data?.subTitle}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('subTitle', 'Subtitle', data?.subTitle)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h4>\n                <h4 *ngIf=\"data?.subTitleTwo\" class=\"sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwo\">\n                  {{data?.subTitleTwo}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('subTitleTwo', 'Secondary Subtitle', data?.subTitleTwo)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h4>\n                <p class=\"mat-body-1\" [style.color]=\"data?.descriptionColor\">\n                  {{data?.description | slice:0:descriptionMaxLength}}\n                  <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('description', 'Description', data?.description)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </p>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-span-12 md:col-span-6\">\n            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData?.sliders\">\n              <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                [styleData]=\"data?.sliderData?.styleData\" (clickEvent)=\"emitEvent('slider-click', $event)\"></sb-uic-sliders>\n              <button *ngIf=\"isEdit\" class=\"edit-icon slider-edit\" (click)=\"openEditor('sliderData', 'Slider Images', data?.sliderData)\">\n                <i class=\"material-icons\">edit</i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"block md:hidden\" *ngIf=\"isMobile\">\n  <!-- Mobile view simplified -->\n  <div class=\"col-span-12\">\n    <div class=\"slider slider-box\" *ngIf=\"data?.sliderData?.sliders\">\n      <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\" \n        [styleData]=\"data?.sliderData?.styleData\" (clickEvent)=\"emitEvent('slider-click', $event)\"></sb-uic-sliders>\n    </div>\n  </div>\n  <div class=\"container px-4 flex flex-col mob-container\">\n    <div class=\"mr-4 logo-box-container\">\n      <div class=\"flex logo-box-square top mr-4\">\n        <img alt=\"Application Logo\" class=\"logo-img logo-img-mb {{data?.customMobileClass}}\" [src]=\"data?.logoMobile || data?.logo\">\n      </div>\n    </div>\n    <div class=\"w-full flex-1 flex flex-col\">\n      <h1 class=\"txt-ellipsis-2 break-words\">{{data?.title || channelName}}</h1>\n      <h4 *ngIf=\"data?.subTitle\" class=\"sub-title txt-ellipsis-2 break-words\" [style.color]=\"data?.subTitleColorMobile\">\n        {{data?.subTitle}}</h4>\n      <p class=\"mat-body-2\">{{data?.description | slice:0:descriptionMaxLength}}</p>\n    </div>\n  </div>\n</div>\n\n<div class=\"flex items-center justify-center\">\n  <div class=\"container metrics-section\">\n    <div [class]=\"isMobile ? 'block md:hidden pt-14 px-4' : 'hidden md:block'\">\n      <div [class]=\"isMobile ? 'mob-metrics mob-metrics-sec' : 'metrics'\" [ngStyle]=\"{'background': data?.metrics?.background}\">\n        <sb-uic-data-points \n          [providerId]=\"orgId\" \n          [fetchDataFromApi]=\"true\"\n          [objectData]=\"data?.metrics?.data\" \n          [layoutType]=\"isMobile ? 'singleRow' : 'singleFlexeRow'\" \n          [pageLayout]=\"'mdo'\" \n          [slwConfig]=\"slwConfig\"\n          (metricClick)=\"emitEvent('metric-click', $event)\">\n        </sb-uic-data-points>\n        <button *ngIf=\"isEdit\" class=\"edit-icon metrics-edit\" (click)=\"openEditor('metrics', 'Metrics', data?.metrics)\">\n          <i class=\"material-icons\">edit</i>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center;position:relative}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}.edit-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#00000080;color:#fff;border:none;cursor:pointer;margin-left:8px;transition:all .2s ease;position:relative;z-index:10}.edit-icon:hover{background-color:#000c;transform:scale(1.1)}.edit-icon i{font-size:16px}.slider-edit{position:absolute;top:8px;right:8px;z-index:100}.metrics-edit{position:absolute;top:8px;right:8px}.slider-box,.metrics{position:relative}\n"], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: DataPointsComponent, selector: "sb-uic-data-points", inputs: ["objectData", "layoutType", "fetchDataFromApi", "providerId", "pageLayout", "title", "slwConfig"] }, { kind: "component", type: SlidersLibComponent, selector: "sb-uic-sliders", inputs: ["widgetData", "styleData", "title", "type"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-top-section', template: "<div class=\"hidden md:block\" *ngIf=\"!isMobile\">\n  <div class=\"web-banner-background\" [style.background]=\"data?.background\">\n    <div class=\"flex items-center justify-center\">\n      <div class=\"container\">\n        <div *ngIf=\"!isEdit\" class=\"flex sticky-logo-square\" [style.width]=\"stripWidth\"></div>\n        <div class=\"grid grid-cols-12 gap-4 padding-top-xxxl mb-10\">\n          <div class=\"col-span-12 md:col-span-6\">\n            <div class=\"flex-1 flex flex-col mr-4 ws-mat-black-text\">\n              <div class=\"\">\n                <div class=\"flex items-center logo-square\">\n                  <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.logo\">\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('logo', 'Logo', data?.logo)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </div>\n                <h1 class=\"txt-ellipsis-2 break-words pt-10 mt-2 {{data?.titleClass}}\" [style.color]=\"data?.titleColor\">\n                  {{data.title || channelName}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('title', 'Title', data?.title || channelName)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h1>\n                <h4 *ngIf=\"data?.subTitle\" class=\"txt-ellipsis-2 break-words {{data?.subTitleClass}}\" [style.color]=\"data?.subTitleColor\">\n                  {{data?.subTitle}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('subTitle', 'Subtitle', data?.subTitle)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h4>\n                <h4 *ngIf=\"data?.subTitleTwo\" class=\"sub-title-two txt-ellipsis-2 break-words pt-4 mb-8\" [style.color]=\"data?.subTitleColorTwo\">\n                  {{data?.subTitleTwo}}\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('subTitleTwo', 'Secondary Subtitle', data?.subTitleTwo)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </h4>\n                <p class=\"mat-body-1\" [style.color]=\"data?.descriptionColor\">\n                  {{data?.description | slice:0:descriptionMaxLength}}\n                  <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                  <button *ngIf=\"isEdit\" class=\"edit-icon\" (click)=\"openEditor('description', 'Description', data?.description)\">\n                    <i class=\"material-icons\">edit</i>\n                  </button>\n                </p>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-span-12 md:col-span-6\">\n            <div class=\"slider slider-box\" *ngIf=\"data?.sliderData?.sliders\">\n              <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\"\n                [styleData]=\"data?.sliderData?.styleData\" (clickEvent)=\"emitEvent('slider-click', $event)\"></sb-uic-sliders>\n              <button *ngIf=\"isEdit\" class=\"edit-icon slider-edit\" (click)=\"openEditor('sliderData', 'Slider Images', data?.sliderData)\">\n                <i class=\"material-icons\">edit</i>\n              </button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"block md:hidden\" *ngIf=\"isMobile\">\n  <!-- Mobile view simplified -->\n  <div class=\"col-span-12\">\n    <div class=\"slider slider-box\" *ngIf=\"data?.sliderData?.sliders\">\n      <sb-uic-sliders [widgetData]=\"data?.sliderData?.sliders\" \n        [styleData]=\"data?.sliderData?.styleData\" (clickEvent)=\"emitEvent('slider-click', $event)\"></sb-uic-sliders>\n    </div>\n  </div>\n  <div class=\"container px-4 flex flex-col mob-container\">\n    <div class=\"mr-4 logo-box-container\">\n      <div class=\"flex logo-box-square top mr-4\">\n        <img alt=\"Application Logo\" class=\"logo-img logo-img-mb {{data?.customMobileClass}}\" [src]=\"data?.logoMobile || data?.logo\">\n      </div>\n    </div>\n    <div class=\"w-full flex-1 flex flex-col\">\n      <h1 class=\"txt-ellipsis-2 break-words\">{{data?.title || channelName}}</h1>\n      <h4 *ngIf=\"data?.subTitle\" class=\"sub-title txt-ellipsis-2 break-words\" [style.color]=\"data?.subTitleColorMobile\">\n        {{data?.subTitle}}</h4>\n      <p class=\"mat-body-2\">{{data?.description | slice:0:descriptionMaxLength}}</p>\n    </div>\n  </div>\n</div>\n\n<div class=\"flex items-center justify-center\">\n  <div class=\"container metrics-section\">\n    <div [class]=\"isMobile ? 'block md:hidden pt-14 px-4' : 'hidden md:block'\">\n      <div [class]=\"isMobile ? 'mob-metrics mob-metrics-sec' : 'metrics'\" [ngStyle]=\"{'background': data?.metrics?.background}\">\n        <sb-uic-data-points \n          [providerId]=\"orgId\" \n          [fetchDataFromApi]=\"true\"\n          [objectData]=\"data?.metrics?.data\" \n          [layoutType]=\"isMobile ? 'singleRow' : 'singleFlexeRow'\" \n          [pageLayout]=\"'mdo'\" \n          [slwConfig]=\"slwConfig\"\n          (metricClick)=\"emitEvent('metric-click', $event)\">\n        </sb-uic-data-points>\n        <button *ngIf=\"isEdit\" class=\"edit-icon metrics-edit\" (click)=\"openEditor('metrics', 'Metrics', data?.metrics)\">\n          <i class=\"material-icons\">edit</i>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center;position:relative}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}.edit-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#00000080;color:#fff;border:none;cursor:pointer;margin-left:8px;transition:all .2s ease;position:relative;z-index:10}.edit-icon:hover{background-color:#000c;transform:scale(1.1)}.edit-icon i{font-size:16px}.slider-edit{position:absolute;top:8px;right:8px;z-index:100}.metrics-edit{position:absolute;top:8px;right:8px}.slider-box,.metrics{position:relative}\n"] }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['sectionData']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['channelName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['orgId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['isMobile']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['slwConfiguration']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['isEdit']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }, { type: i1$6.DomSanitizer }]; } });
+
+class LookerSectionComponent {
+    constructor(data, isMobile, sanitizer, eventCallback) {
+        this.data = data;
+        this.isMobile = isMobile;
+        this.sanitizer = sanitizer;
+        this.eventCallback = eventCallback;
+    }
+    ngOnInit() {
+        this.iframeHeight = `${window.innerWidth * 0.667}px`;
+        this.setLookerUrl();
+    }
+    setLookerUrl() {
+        const url = this.isMobile ?
+            this.data?.lookerProMobileUrl :
+            this.data?.lookerProDesktopUrl;
+        if (url) {
+            this.lookerUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
+            this.eventCallback({
+                action: 'looker-loaded',
+                source: 'lookerSection',
+                id: 'looker-dashboard'
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LookerSectionComponent, deps: [{ token: 'sectionData' }, { token: 'isMobile' }, { token: i1$6.DomSanitizer }, { token: 'eventCallback' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LookerSectionComponent, selector: "app-looker-section", ngImport: i0, template: "<div class=\"flex items-center justify-center flex-wrap\">\n  <div class=\"w-full flex flex-col items-center justify-center\">\n    <h2 *ngIf=\"data?.header?.headerText\" class=\"pt-4\">{{data?.header?.headerText}}</h2>\n    <p *ngIf=\"data?.header?.description\">{{data?.header?.description}}</p>\n  </div>\n  <div class=\"container mt-4 mb-4\" *ngIf=\"lookerUrl\">\n    <iframe class=\"w-full\" height=\"{{iframeHeight}}\"\n      [src]=\"lookerUrl\"\n      frameborder=\"0\" style=\"border:0\" allowfullscreen\n      sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\">\n    </iframe>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LookerSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-looker-section', template: "<div class=\"flex items-center justify-center flex-wrap\">\n  <div class=\"w-full flex flex-col items-center justify-center\">\n    <h2 *ngIf=\"data?.header?.headerText\" class=\"pt-4\">{{data?.header?.headerText}}</h2>\n    <p *ngIf=\"data?.header?.description\">{{data?.header?.description}}</p>\n  </div>\n  <div class=\"container mt-4 mb-4\" *ngIf=\"lookerUrl\">\n    <iframe class=\"w-full\" height=\"{{iframeHeight}}\"\n      [src]=\"lookerUrl\"\n      frameborder=\"0\" style=\"border:0\" allowfullscreen\n      sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\">\n    </iframe>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['sectionData']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['isMobile']
+                }] }, { type: i1$6.DomSanitizer }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }]; } });
+
+class TopLearnersComponent {
+    constructor(data, channelName, orgId, slwConfig, eventCallback) {
+        this.data = data;
+        this.channelName = channelName;
+        this.orgId = orgId;
+        this.slwConfig = slwConfig;
+        this.eventCallback = eventCallback;
+    }
+    onEventFromLeaders(event) {
+        this.eventCallback({
+            action: 'top-learners',
+            source: 'topLearners',
+            id: event.id || 'learner-event',
+            data: event
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersComponent, deps: [{ token: 'sectionData' }, { token: 'channelName' }, { token: 'orgId' }, { token: 'slwConfiguration' }, { token: 'eventCallback' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TopLearnersComponent, selector: "app-top-learners", ngImport: i0, template: "<div class=\"flex items-center justify-center\">\n  <div class=\"container top-learners margin-bottom-l margin-top-l\">\n    <sb-uic-top-learners \n      [objectData]=\"data\" \n      [channnelName]=\"channelName\" \n      [channelId]=\"orgId\" \n      [slwConfig]=\"slwConfig\"\n      (learnerEvent)=\"onEventFromLeaders($event)\">\n    </sb-uic-top-learners>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: TopLearnersComponent$1, selector: "sb-uic-top-learners", inputs: ["objectData", "channelId", "channnelName", "slwConfig"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TopLearnersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-top-learners', template: "<div class=\"flex items-center justify-center\">\n  <div class=\"container top-learners margin-bottom-l margin-top-l\">\n    <sb-uic-top-learners \n      [objectData]=\"data\" \n      [channnelName]=\"channelName\" \n      [channelId]=\"orgId\" \n      [slwConfig]=\"slwConfig\"\n      (learnerEvent)=\"onEventFromLeaders($event)\">\n    </sb-uic-top-learners>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['sectionData']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['channelName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['orgId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['slwConfiguration']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }]; } });
+
+class CompetencyComponent {
+    constructor(orgId, eventCallback) {
+        this.orgId = orgId;
+        this.eventCallback = eventCallback;
+        this.emptyResponse = new EventEmitter();
+        this.telemetryResponse = new EventEmitter();
+        this.hideCompetencyBlock = false;
+    }
+    hideCompetency(event) {
+        this.hideCompetencyBlock = event;
+        this.emptyResponse.emit(event);
+        this.eventCallback({
+            action: 'hide-competency',
+            source: 'competency',
+            id: 'competency-block'
+        });
+    }
+    raiseCompetencyTelemetry(name) {
+        this.telemetryResponse.emit(name);
+        this.eventCallback({
+            action: 'competency-click',
+            source: 'competency',
+            id: `${name}-core-expertise`
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CompetencyComponent, deps: [{ token: 'orgId' }, { token: 'eventCallback' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CompetencyComponent, selector: "app-competency", inputs: { competency: "competency" }, outputs: { emptyResponse: "emptyResponse", telemetryResponse: "telemetryResponse" }, ngImport: i0, template: "<div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\"\n     *ngIf=\"!hideCompetencyBlock; else noData\">\n  <div class=\"w-full container-balanced\">\n    <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">\n      This section shows the list of top competencies users in this MDO are learning, \n      based on the courses they've completed and enrolled in.\n    </p>\n    <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n      <sb-uic-competency-passbook-mdo \n        [dynamicColor]=\"'#999999'\" \n        [dynamicAlignPills]=\"'start'\"\n        [cardDisplayCount]=\"2\" \n        (emptyResponse)=\"hideCompetency($event)\"\n        (temeletryResponse)=\"raiseCompetencyTelemetry($event)\" \n        [objectData]=\"competency\"\n        [providerId]=\"orgId\">\n      </sb-uic-competency-passbook-mdo>\n    </div>\n  </div>\n</div>\n\n<ng-template #noData>\n  <div class=\"flex justify-center w-full\">\n    <div class=\"margin-xl text-center\">\n      <img src=\"/assets/common/error-pages/empty_search.svg\" alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n      <h2 class=\"mat-h2\">{{'learnsearch.noResults' | translate}}</h2>\n    </div>\n  </div>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CompetencyPassbookMdoComponent, selector: "sb-uic-competency-passbook-mdo", inputs: ["objectData", "providerId", "cardDisplayCount", "dynamicClass", "dynamicColor", "dynamicAlignPills"], outputs: ["emptyResponse", "temeletryResponse"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CompetencyComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-competency', template: "<div class=\"padding-top-l padding-bottom-l relative\" [style.background]=\"competency?.background\"\n     *ngIf=\"!hideCompetencyBlock; else noData\">\n  <div class=\"w-full container-balanced\">\n    <p class=\"mat-body-1 pl-5 pr-4 md:pl-0 md:pr-0\">\n      This section shows the list of top competencies users in this MDO are learning, \n      based on the courses they've completed and enrolled in.\n    </p>\n    <div class=\"pl-4 pr-4 md:pl-0 md:pr-0\">\n      <sb-uic-competency-passbook-mdo \n        [dynamicColor]=\"'#999999'\" \n        [dynamicAlignPills]=\"'start'\"\n        [cardDisplayCount]=\"2\" \n        (emptyResponse)=\"hideCompetency($event)\"\n        (temeletryResponse)=\"raiseCompetencyTelemetry($event)\" \n        [objectData]=\"competency\"\n        [providerId]=\"orgId\">\n      </sb-uic-competency-passbook-mdo>\n    </div>\n  </div>\n</div>\n\n<ng-template #noData>\n  <div class=\"flex justify-center w-full\">\n    <div class=\"margin-xl text-center\">\n      <img src=\"/assets/common/error-pages/empty_search.svg\" alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n      <h2 class=\"mat-h2\">{{'learnsearch.noResults' | translate}}</h2>\n    </div>\n  </div>\n</ng-template>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['orgId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }]; }, propDecorators: { competency: [{
+                type: Input
+            }], emptyResponse: [{
+                type: Output
+            }], telemetryResponse: [{
+                type: Output
+            }] } });
+
+class ContentStripComponent {
+    constructor(orgId, channelName, eventCallback) {
+        this.orgId = orgId;
+        this.channelName = channelName;
+        this.eventCallback = eventCallback;
+        this.viewAllResponse = new EventEmitter();
+        this.telemetryResponse = new EventEmitter();
+    }
+    showAllContent(event) {
+        this.viewAllResponse.emit({
+            event: event,
+            data: this.data
+        });
+        this.eventCallback({
+            action: 'view-all',
+            source: 'contentStrip',
+            id: this.data?.sectionKey || 'content-section',
+            data: event
+        });
+    }
+    raiseTelemetryInteratEvent(event) {
+        this.telemetryResponse.emit(event);
+        this.eventCallback({
+            action: 'telemetry',
+            source: 'contentStrip',
+            id: event.id || 'content-interaction',
+            data: event
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentStripComponent, deps: [{ token: 'orgId' }, { token: 'channelName' }, { token: 'eventCallback' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentStripComponent, selector: "app-content-strip", inputs: { data: "data" }, outputs: { viewAllResponse: "viewAllResponse", telemetryResponse: "telemetryResponse" }, ngImport: i0, template: "<ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n  <div class=\"flex mb-8\">\n    <div class=\"w-full\">\n      <sb-uic-content-strip-with-tabs \n        [emitViewAll]=\"true\" \n        (viewAllResponse)=\"showAllContent($event)\"\n        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n        [providerId]=\"orgId\"\n        [widgetData]=\"data?.contentStrip\" \n        [channnelName]=\"channelName\">\n      </sb-uic-content-strip-with-tabs>\n    </div>\n  </div>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentStripComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-content-strip', template: "<ng-container *ngIf=\"!data?.contentStrip?.hideSection\">\n  <div class=\"flex mb-8\">\n    <div class=\"w-full\">\n      <sb-uic-content-strip-with-tabs \n        [emitViewAll]=\"true\" \n        (viewAllResponse)=\"showAllContent($event)\"\n        (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n        [providerId]=\"orgId\"\n        [widgetData]=\"data?.contentStrip\" \n        [channnelName]=\"channelName\">\n      </sb-uic-content-strip-with-tabs>\n    </div>\n  </div>\n</ng-container>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['orgId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['channelName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }]; }, propDecorators: { data: [{
+                type: Input
+            }], viewAllResponse: [{
+                type: Output
+            }], telemetryResponse: [{
+                type: Output
+            }] } });
+
+class ColumnSectionDisplayComponent {
+    constructor() {
+        this.data = [];
+        this.competencyEvent = new EventEmitter();
+        this.competencyTelemetry = new EventEmitter();
+        this.contentTelemetry = new EventEmitter();
+        this.viewAllEvent = new EventEmitter();
+        this.filteredData = [];
+    }
+    ngOnInit() {
+        this.filteredData = this.data?.filter(section => section?.enabled) || [];
+    }
+    onCompetencyEvent(event) {
+        this.competencyEvent.emit(event);
+    }
+    onCompetencyTelemetry(event) {
+        this.competencyTelemetry.emit(event);
+    }
+    onContentTelemetry(event) {
+        this.contentTelemetry.emit(event);
+    }
+    onViewAllEvent(event, data) {
+        this.viewAllEvent.emit({
+            event: event,
+            data: data
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnSectionDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ColumnSectionDisplayComponent, selector: "app-column-section-display", inputs: { data: "data", orgId: "orgId", channelName: "channelName" }, outputs: { competencyEvent: "competencyEvent", competencyTelemetry: "competencyTelemetry", contentTelemetry: "contentTelemetry", viewAllEvent: "viewAllEvent" }, ngImport: i0, template: "<ng-container *ngIf=\"filteredData?.length\">\n  <ng-container *ngFor=\"let section of filteredData\">\n    <ng-container *ngIf=\"section?.enabled\">\n      <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\"\n              [ngClass]=\"{'container': section.wrapperClass}\">\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\">\n              <!-- Competency component -->\n              <app-competency \n                *ngIf=\"column?.key === 'competency'\"\n                [competency]=\"column\"\n                (emptyResponse)=\"onCompetencyEvent($event)\"\n                (telemetryResponse)=\"onCompetencyTelemetry($event)\">\n              </app-competency>\n              \n              <!-- Content strip components -->\n              <app-content-strip\n                *ngIf=\"column?.key.includes('content')\"\n                [data]=\"{contentStrip: column?.data, sectionKey: section.key}\"\n                (viewAllResponse)=\"onViewAllEvent($event.event, $event.data)\"\n                (telemetryResponse)=\"onContentTelemetry($event)\">\n              </app-content-strip>\n            </ng-container>\n          </div>\n        </ng-container>\n      </section>\n    </ng-container>\n  </ng-container>\n</ng-container>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CompetencyComponent, selector: "app-competency", inputs: ["competency"], outputs: ["emptyResponse", "telemetryResponse"] }, { kind: "component", type: ContentStripComponent, selector: "app-content-strip", inputs: ["data"], outputs: ["viewAllResponse", "telemetryResponse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ColumnSectionDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-column-section-display', template: "<ng-container *ngIf=\"filteredData?.length\">\n  <ng-container *ngFor=\"let section of filteredData\">\n    <ng-container *ngIf=\"section?.enabled\">\n      <section id=\"{{section?.key}}\" class=\"w-full grid grid-cols-12 gap-4\"\n              [ngClass]=\"{'container': section.wrapperClass}\">\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\">\n              <!-- Competency component -->\n              <app-competency \n                *ngIf=\"column?.key === 'competency'\"\n                [competency]=\"column\"\n                (emptyResponse)=\"onCompetencyEvent($event)\"\n                (telemetryResponse)=\"onCompetencyTelemetry($event)\">\n              </app-competency>\n              \n              <!-- Content strip components -->\n              <app-content-strip\n                *ngIf=\"column?.key.includes('content')\"\n                [data]=\"{contentStrip: column?.data, sectionKey: section.key}\"\n                (viewAllResponse)=\"onViewAllEvent($event.event, $event.data)\"\n                (telemetryResponse)=\"onContentTelemetry($event)\">\n              </app-content-strip>\n            </ng-container>\n          </div>\n        </ng-container>\n      </section>\n    </ng-container>\n  </ng-container>\n</ng-container>" }]
+        }], propDecorators: { data: [{
+                type: Input
+            }], orgId: [{
+                type: Input
+            }], channelName: [{
+                type: Input
+            }], competencyEvent: [{
+                type: Output
+            }], competencyTelemetry: [{
+                type: Output
+            }], contentTelemetry: [{
+                type: Output
+            }], viewAllEvent: [{
+                type: Output
+            }] } });
+
+class MobileSectionsComponent {
+    constructor() {
+        this.leaderboardTabClicked = new EventEmitter();
+    }
+    onTabClicked(event) {
+        this.leaderboardTabClicked.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileSectionsComponent, selector: "app-mobile-sections", inputs: { myProgressData: "myProgressData", speakersData: "speakersData", leaderboardData: "leaderboardData", rootOrgId: "rootOrgId", orgId: "orgId", slwConfig: "slwConfig" }, outputs: { leaderboardTabClicked: "leaderboardTabClicked" }, ngImport: i0, template: "<div class=\"block md:hidden\">\n  <div *ngIf=\"myProgressData?.enabled\">\n    <sb-uic-user-progress \n      [layoutType]=\"'web'\" \n      [mobileHeight]=\"false\"\n      [objectData]=\"myProgressData?.data\"\n      [rootOrgId]=\"rootOrgId\">\n    </sb-uic-user-progress>\n  </div>\n</div>\n\n<div class=\"block md:hidden\">\n  <div *ngIf=\"speakersData?.enabled\">\n    <sb-uic-speakers \n      [layoutType]=\"'web'\" \n      [mobileHeight]=\"false\"\n      [objectData]=\"speakersData?.data\">\n    </sb-uic-speakers>\n  </div>\n</div>\n\n<div class=\"block md:hidden\">\n  <div *ngIf=\"leaderboardData?.enabled\">\n    <sb-uic-mdo-leaderboard \n      [object]=\"leaderboardData?.data\" \n      [slwConfig]=\"slwConfig\"\n      (tabClicked)=\"onTabClicked($event)\" \n      [orgId]=\"orgId\">\n    </sb-uic-mdo-leaderboard>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UserProgressComponent, selector: "sb-uic-user-progress", inputs: ["objectData", "rootOrgId"] }, { kind: "component", type: SpeakersComponent, selector: "sb-uic-speakers", inputs: ["objectData"] }, { kind: "component", type: MdoLeaderboardComponent, selector: "sb-uic-mdo-leaderboard", inputs: ["orgId", "object", "slwConfig"], outputs: ["tabClicked"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileSectionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-mobile-sections', template: "<div class=\"block md:hidden\">\n  <div *ngIf=\"myProgressData?.enabled\">\n    <sb-uic-user-progress \n      [layoutType]=\"'web'\" \n      [mobileHeight]=\"false\"\n      [objectData]=\"myProgressData?.data\"\n      [rootOrgId]=\"rootOrgId\">\n    </sb-uic-user-progress>\n  </div>\n</div>\n\n<div class=\"block md:hidden\">\n  <div *ngIf=\"speakersData?.enabled\">\n    <sb-uic-speakers \n      [layoutType]=\"'web'\" \n      [mobileHeight]=\"false\"\n      [objectData]=\"speakersData?.data\">\n    </sb-uic-speakers>\n  </div>\n</div>\n\n<div class=\"block md:hidden\">\n  <div *ngIf=\"leaderboardData?.enabled\">\n    <sb-uic-mdo-leaderboard \n      [object]=\"leaderboardData?.data\" \n      [slwConfig]=\"slwConfig\"\n      (tabClicked)=\"onTabClicked($event)\" \n      [orgId]=\"orgId\">\n    </sb-uic-mdo-leaderboard>\n  </div>\n</div>" }]
+        }], propDecorators: { myProgressData: [{
+                type: Input
+            }], speakersData: [{
+                type: Input
+            }], leaderboardData: [{
+                type: Input
+            }], rootOrgId: [{
+                type: Input
+            }], orgId: [{
+                type: Input
+            }], slwConfig: [{
+                type: Input
+            }], leaderboardTabClicked: [{
+                type: Output
+            }] } });
+
+class MainContentComponent {
+    constructor(data, channelName, orgId, isMobile, providerId, slwConfig, eventCallback, configSvc) {
+        this.data = data;
+        this.channelName = channelName;
+        this.orgId = orgId;
+        this.isMobile = isMobile;
+        this.providerId = providerId;
+        this.slwConfig = slwConfig;
+        this.eventCallback = eventCallback;
+        this.configSvc = configSvc;
+        this.selectedIndex = 0;
+        this.hideCompetencyBlock = false;
+        this.contentTabEmptyResponseCount = 0;
+        this.showModal = false;
+    }
+    ngOnInit() {
+        // Initialization logic
+    }
+    tabClicked(event) {
+        this.selectedIndex = event.index;
+        this.eventCallback({
+            action: 'tab-click',
+            source: 'mainContent',
+            id: `${event.tab.textLabel}-tab`
+        });
+    }
+    raiseTabClick(event) {
+        this.eventCallback({
+            action: 'mdo-leaderboard',
+            source: 'mainContent',
+            id: `${event}-tab`
+        });
+    }
+    hideKeyHightlight(event, data) {
+        if (event) {
+            data.enabled = false;
+            this.eventCallback({
+                action: 'hide-highlight',
+                source: 'mainContent',
+                id: 'key-highlight'
+            });
+        }
+    }
+    triggerOpenDialog(event) {
+        if (event) {
+            this.showModal = true;
+            document.body.style.overflow = 'hidden';
+        }
+        this.eventCallback({
+            action: 'open-dialog',
+            source: 'mainContent',
+            id: 'key-announcements'
+        });
+    }
+    onClose() {
+        this.showModal = false;
+        document.body.style.overflow = 'auto';
+        this.eventCallback({
+            action: 'close-dialog',
+            source: 'mainContent',
+            id: 'key-announcements'
+        });
+    }
+    raiseTelemetryInteratEvent(event) {
+        this.eventCallback({
+            action: 'telemetry',
+            source: 'mainContent',
+            id: event.id || 'content-interaction',
+            data: event
+        });
+    }
+    showAllContent(event, data) {
+        this.eventCallback({
+            action: 'view-all',
+            source: 'mainContent',
+            id: data?.sectionKey || 'content-section',
+            data: event
+        });
+    }
+    hideCompetency(event) {
+        if (event) {
+            this.hideCompetencyBlock = true;
+            this.eventCallback({
+                action: 'hide-competency',
+                source: 'mainContent',
+                id: 'competency-block'
+            });
+        }
+    }
+    raiseCompetencyTelemetry(name) {
+        this.eventCallback({
+            action: 'competency-click',
+            source: 'mainContent',
+            id: `${name}-core-expertise`
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainContentComponent, deps: [{ token: 'sectionData' }, { token: 'channelName' }, { token: 'orgId' }, { token: 'isMobile' }, { token: 'providerId' }, { token: 'slwConfiguration' }, { token: 'eventCallback' }, { token: i2.ConfigurationsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MainContentComponent, selector: "app-main-content", ngImport: i0, template: "<div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data?.background}\">\n  <div class=\"container\">\n    <!-- Mobile view components -->\n    <ng-container *ngIf=\"isMobile\">\n      <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n        <sb-uic-key-highlights\n          (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n          [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" \n          [providerId]=\"providerId\"\n          [mode]=\"'mobile'\">\n        </sb-uic-key-highlights>\n      </div>\n      \n      <!-- Other mobile sections (condensed) -->\n      <div class=\"block md:hidden\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n        <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\"></sb-uic-highlights-of-week>\n      </div>\n      \n      <!-- Mobile progress, speakers, leaderboard -->\n      <ng-container *ngIf=\"isMobile\">\n        <app-mobile-sections \n          [myProgressData]=\"data?.stateLearningWeekSection?.myprogress\"\n          [speakersData]=\"data?.stateLearningWeekSection?.speakerOftheDay\"\n          [leaderboardData]=\"data?.stateLearningWeekSection?.mdoLeaderboard\"\n          [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\"\n          [orgId]=\"orgId\"\n          [slwConfig]=\"slwConfig\"\n          (leaderboardTabClicked)=\"raiseTabClick($event)\">\n        </app-mobile-sections>\n      </ng-container>\n      \n      <!-- Mobile CBP Plan -->\n      <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n        <sb-uic-cbp-plan \n          [layoutType]=\"'web'\" \n          [mobileHeight]=\"false\" \n          [fetchDataFromApi]=\"true\"\n          [channelId]=\"orgId\" \n          [objectData]=\"data?.cbpPlanSection?.data\">\n        </sb-uic-cbp-plan>\n      </div>\n      \n      <!-- Mobile announcements -->\n      <div class=\"block md:hidden col-span-12 mt-6\" *ngIf=\"!data?.announcementSection?.disable\">\n        <sb-uic-announcements \n          [layoutType]=\"'mobile'\" \n          (openDialog)=\"triggerOpenDialog($event)\"\n          [objectData]=\"data?.announcementSection?.data\" \n          [fetchDataFromApi]=\"false\" \n          [channelId]=\"orgId\">\n        </sb-uic-announcements>\n        \n        <!-- Announcement dialog -->\n        <div class=\"announcements-container\" *ngIf=\"showModal\">\n          <div class=\"cursor-pointer close-share-dialog\">\n            <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n          </div>\n          <div class=\"share-modal px-3 pt-8\">\n            <sb-uic-announcements \n              [layoutType]=\"'web'\" \n              (openDialog)=\"triggerOpenDialog($event)\"\n              [objectData]=\"data?.announcementSection?.data\" \n              [mobileHeight]=\"true\"\n              [fetchDataFromApi]=\"true\" \n              [channelId]=\"orgId\">\n            </sb-uic-announcements>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    \n    <!-- Desktop Key Highlights -->\n    <div class=\"col-span-12\">\n      <div class=\"flex items-center justify-center\">\n        <div class=\"container margin-top-xl\">\n          <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n            <sb-uic-key-highlights\n              (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n              [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" \n              [providerId]=\"providerId\"\n              [mode]=\"'desktop'\">\n            </sb-uic-key-highlights>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Main grid layout -->\n    <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n      <!-- Main tab section -->\n      <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n        <!-- Week highlights (desktop) -->\n        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n          <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\"></sb-uic-highlights-of-week>\n        </div>\n        \n        <!-- Mandatory courses -->\n        <ng-container *ngIf=\"data?.stateLearningWeekSection?.mandatoryCourse?.enabled && \n                            data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\">\n          <div class=\"margin-top-l nlw-mandatoryCourse\">\n            <sb-uic-content-strip-with-tabs \n              [emitViewAll]=\"false\" \n              (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n              [providerId]=\"orgId\"\n              [widgetData]=\"data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\"\n              [channnelName]=\"channelName\">\n            </sb-uic-content-strip-with-tabs>\n          </div>\n        </ng-container>\n        \n        <!-- Learning content -->\n        <ng-container *ngIf=\"data?.stateLearningWeekSection?.exploreLearningContent?.enabled && \n                           data?.stateLearningWeekSection?.exploreLearningContent?.strips[0]\">\n          <div class=\"margin-top-l nlw-mandatoryCourse\">\n            <sb-uic-content-strip-with-tabs \n              [emitViewAll]=\"false\" \n              (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n              [providerId]=\"orgId\"\n              [widgetData]=\"data?.stateLearningWeekSection?.exploreLearningContent\"\n              [channnelName]=\"channelName\">\n            </sb-uic-content-strip-with-tabs>\n          </div>\n        </ng-container>\n        \n        <!-- Events -->\n        <div *ngIf=\"data?.stateLearningWeekSection?.events?.enabled && \n                  data?.stateLearningWeekSection?.events?.column?.length &&\n                  data?.stateLearningWeekSection?.events?.column[0]\">\n          <sb-uic-events \n            [object]=\"data?.stateLearningWeekSection?.events?.column[0]\"\n            [nwlEventsConfig]=\"slwConfig\">\n          </sb-uic-events>\n        </div>\n        \n        <!-- Tabs -->\n        <ng-container *ngIf=\"!data?.tabSection?.disable\">\n          <mat-tab-group \n            animationDuration=\"0ms\" \n            class=\"mat-tab-labels mytabs w-full\"\n            [selectedIndex]=\"selectedIndex\"\n            (selectedTabChange)=\"tabClicked($event)\">\n            \n            <!-- Content Tab -->\n            <mat-tab label=\"Content\">\n              <ng-template mat-tab-label i18n>Learn</ng-template>\n              <!-- Empty state -->\n              <ng-container *ngIf=\"data?.tabSection?.contentTab?.length === contentTabEmptyResponseCount\">\n                <div class=\"flex justify-center w-full\">\n                  <div class=\"margin-xl text-center\">\n                    <img src=\"/assets/common/error-pages/empty_search.svg\" alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n                    <h2 class=\"mat-h2\">{{'learnsearch.noResults' | translate}}</h2>\n                  </div>\n                </div>\n              </ng-container>\n              \n              <!-- Content tab content -->\n              <div class=\"padding-top-l\">\n                <app-column-section-display \n                  [data]=\"data.tabSection.contentTab\"\n                  [orgId]=\"orgId\"\n                  [channelName]=\"channelName\"\n                  (competencyEvent)=\"hideCompetency($event)\"\n                  (competencyTelemetry)=\"raiseCompetencyTelemetry($event)\"\n                  (contentTelemetry)=\"raiseTelemetryInteratEvent($event)\"\n                  (viewAllEvent)=\"showAllContent($event.event, $event.data)\">\n                </app-column-section-display>\n              </div>\n            </mat-tab>\n            \n            <!-- Competency Tab -->\n            <mat-tab label=\"Core Areas\">\n              <ng-template mat-tab-label i18n>Competency</ng-template>\n              <div>\n                <app-column-section-display \n                  [data]=\"data.tabSection.coreAreasTab\"\n                  [orgId]=\"orgId\"\n                  [channelName]=\"channelName\"\n                  (competencyEvent)=\"hideCompetency($event)\"\n                  (competencyTelemetry)=\"raiseCompetencyTelemetry($event)\"\n                  (contentTelemetry)=\"raiseTelemetryInteratEvent($event)\"\n                  (viewAllEvent)=\"showAllContent($event.event, $event.data)\">\n                </app-column-section-display>\n              </div>\n            </mat-tab>\n          </mat-tab-group>\n        </ng-container>\n      </div>\n      \n      <!-- Sidebar -->\n      <div class=\"col-span-12 md:col-span-4\">\n        <ng-container *ngIf=\"!isMobile\">\n          <!-- Progress -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n              <sb-uic-user-progress \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\"\n                [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n              </sb-uic-user-progress>\n            </div>\n          </div>\n          \n          <!-- Speakers -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n              <sb-uic-speakers \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\"\n                [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n              </sb-uic-speakers>\n            </div>\n          </div>\n          \n          <!-- Leaderboard -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n              <sb-uic-mdo-leaderboard \n                [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" \n                [slwConfig]=\"slwConfig\"\n                (tabClicked)=\"raiseTabClick($event)\" \n                [orgId]=\"orgId\">\n              </sb-uic-mdo-leaderboard>\n            </div>\n          </div>\n          \n          <!-- CBP Plan -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\" *ngIf=\"data?.cbpPlanSection?.data\">\n            <div class=\"pt-4\">\n              <sb-uic-cbp-plan \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\" \n                [fetchDataFromApi]=\"true\"\n                [channelId]=\"orgId\" \n                [objectData]=\"data?.cbpPlanSection?.data\">\n              </sb-uic-cbp-plan>\n            </div>\n          </div>\n          \n          <!-- Announcements -->\n          <div class=\"hidden md:block\" *ngIf=\"!data?.announcementSection?.disable\">\n            <div class=\"pt-4\">\n              <sb-uic-announcements \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\" \n                [fetchDataFromApi]=\"true\"\n                [channelId]=\"orgId\" \n                [objectData]=\"data?.announcementSection?.data\">\n              </sb-uic-announcements>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: AnnouncementsComponent, selector: "sb-uic-announcements", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: CbpPlanComponent, selector: "sb-uic-cbp-plan", inputs: ["objectData", "layoutType", "mobileHeight", "fetchDataFromApi", "channelId"], outputs: ["openDialog"] }, { kind: "component", type: ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse"] }, { kind: "component", type: HighlightsOfWeekComponent, selector: "sb-uic-highlights-of-week", inputs: ["objectData"] }, { kind: "component", type: UserProgressComponent, selector: "sb-uic-user-progress", inputs: ["objectData", "rootOrgId"] }, { kind: "component", type: EventsComponent, selector: "sb-uic-events", inputs: ["object", "nwlEventsConfig"] }, { kind: "component", type: SpeakersComponent, selector: "sb-uic-speakers", inputs: ["objectData"] }, { kind: "component", type: MdoLeaderboardComponent, selector: "sb-uic-mdo-leaderboard", inputs: ["orgId", "object", "slwConfig"], outputs: ["tabClicked"] }, { kind: "component", type: KeyHighlightsComponent, selector: "sb-uic-key-highlights", inputs: ["providerId", "formData", "mode"], outputs: ["emptyResponse"] }, { kind: "component", type: i13.MatLegacyTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { kind: "directive", type: i13.MatLegacyTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i13.MatLegacyTab, selector: "mat-tab", inputs: ["disabled"], exportAs: ["matTab"] }, { kind: "component", type: ColumnSectionDisplayComponent, selector: "app-column-section-display", inputs: ["data", "orgId", "channelName"], outputs: ["competencyEvent", "competencyTelemetry", "contentTelemetry", "viewAllEvent"] }, { kind: "component", type: MobileSectionsComponent, selector: "app-mobile-sections", inputs: ["myProgressData", "speakersData", "leaderboardData", "rootOrgId", "orgId", "slwConfig"], outputs: ["leaderboardTabClicked"] }, { kind: "pipe", type: i2$1.TranslatePipe, name: "translate" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-main-content', template: "<div class=\"flex items-center justify-center\" [ngStyle]=\"{'background': data?.background}\">\n  <div class=\"container\">\n    <!-- Mobile view components -->\n    <ng-container *ngIf=\"isMobile\">\n      <div class=\"block md:hidden mb-4\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n        <sb-uic-key-highlights\n          (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n          [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" \n          [providerId]=\"providerId\"\n          [mode]=\"'mobile'\">\n        </sb-uic-key-highlights>\n      </div>\n      \n      <!-- Other mobile sections (condensed) -->\n      <div class=\"block md:hidden\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n        <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\"></sb-uic-highlights-of-week>\n      </div>\n      \n      <!-- Mobile progress, speakers, leaderboard -->\n      <ng-container *ngIf=\"isMobile\">\n        <app-mobile-sections \n          [myProgressData]=\"data?.stateLearningWeekSection?.myprogress\"\n          [speakersData]=\"data?.stateLearningWeekSection?.speakerOftheDay\"\n          [leaderboardData]=\"data?.stateLearningWeekSection?.mdoLeaderboard\"\n          [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\"\n          [orgId]=\"orgId\"\n          [slwConfig]=\"slwConfig\"\n          (leaderboardTabClicked)=\"raiseTabClick($event)\">\n        </app-mobile-sections>\n      </ng-container>\n      \n      <!-- Mobile CBP Plan -->\n      <div class=\"block md:hidden col-span-12 padding-left-m padding-right-m padding-top-m padding-bottom-m\">\n        <sb-uic-cbp-plan \n          [layoutType]=\"'web'\" \n          [mobileHeight]=\"false\" \n          [fetchDataFromApi]=\"true\"\n          [channelId]=\"orgId\" \n          [objectData]=\"data?.cbpPlanSection?.data\">\n        </sb-uic-cbp-plan>\n      </div>\n      \n      <!-- Mobile announcements -->\n      <div class=\"block md:hidden col-span-12 mt-6\" *ngIf=\"!data?.announcementSection?.disable\">\n        <sb-uic-announcements \n          [layoutType]=\"'mobile'\" \n          (openDialog)=\"triggerOpenDialog($event)\"\n          [objectData]=\"data?.announcementSection?.data\" \n          [fetchDataFromApi]=\"false\" \n          [channelId]=\"orgId\">\n        </sb-uic-announcements>\n        \n        <!-- Announcement dialog -->\n        <div class=\"announcements-container\" *ngIf=\"showModal\">\n          <div class=\"cursor-pointer close-share-dialog\">\n            <mat-icon (click)=\"onClose()\" class=\"close-icon\">close</mat-icon>\n          </div>\n          <div class=\"share-modal px-3 pt-8\">\n            <sb-uic-announcements \n              [layoutType]=\"'web'\" \n              (openDialog)=\"triggerOpenDialog($event)\"\n              [objectData]=\"data?.announcementSection?.data\" \n              [mobileHeight]=\"true\"\n              [fetchDataFromApi]=\"true\" \n              [channelId]=\"orgId\">\n            </sb-uic-announcements>\n          </div>\n        </div>\n      </div>\n    </ng-container>\n    \n    <!-- Desktop Key Highlights -->\n    <div class=\"col-span-12\">\n      <div class=\"flex items-center justify-center\">\n        <div class=\"container margin-top-xl\">\n          <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.keyHighlights?.enabled\">\n            <sb-uic-key-highlights\n              (emptyResponse)=\"hideKeyHightlight($event, data?.stateLearningWeekSection?.keyHighlights)\"\n              [formData]=\"data?.stateLearningWeekSection?.keyHighlights\" \n              [providerId]=\"providerId\"\n              [mode]=\"'desktop'\">\n            </sb-uic-key-highlights>\n          </div>\n        </div>\n      </div>\n    </div>\n    \n    <!-- Main grid layout -->\n    <div class=\"grid grid-cols-12 gap-4 padding-top-m mb-6\">\n      <!-- Main tab section -->\n      <div class=\"col-span-12 md:col-span-{{data.tabSection.colspan}}\">\n        <!-- Week highlights (desktop) -->\n        <div class=\"hidden md:block\" *ngIf=\"data?.stateLearningWeekSection?.weekHighlights?.enabled\">\n          <sb-uic-highlights-of-week [objectData]=\"data?.stateLearningWeekSection?.weekHighlights?.data\"></sb-uic-highlights-of-week>\n        </div>\n        \n        <!-- Mandatory courses -->\n        <ng-container *ngIf=\"data?.stateLearningWeekSection?.mandatoryCourse?.enabled && \n                            data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\">\n          <div class=\"margin-top-l nlw-mandatoryCourse\">\n            <sb-uic-content-strip-with-tabs \n              [emitViewAll]=\"false\" \n              (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n              [providerId]=\"orgId\"\n              [widgetData]=\"data?.stateLearningWeekSection?.mandatoryCourse?.column[0]?.data\"\n              [channnelName]=\"channelName\">\n            </sb-uic-content-strip-with-tabs>\n          </div>\n        </ng-container>\n        \n        <!-- Learning content -->\n        <ng-container *ngIf=\"data?.stateLearningWeekSection?.exploreLearningContent?.enabled && \n                           data?.stateLearningWeekSection?.exploreLearningContent?.strips[0]\">\n          <div class=\"margin-top-l nlw-mandatoryCourse\">\n            <sb-uic-content-strip-with-tabs \n              [emitViewAll]=\"false\" \n              (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\" \n              [providerId]=\"orgId\"\n              [widgetData]=\"data?.stateLearningWeekSection?.exploreLearningContent\"\n              [channnelName]=\"channelName\">\n            </sb-uic-content-strip-with-tabs>\n          </div>\n        </ng-container>\n        \n        <!-- Events -->\n        <div *ngIf=\"data?.stateLearningWeekSection?.events?.enabled && \n                  data?.stateLearningWeekSection?.events?.column?.length &&\n                  data?.stateLearningWeekSection?.events?.column[0]\">\n          <sb-uic-events \n            [object]=\"data?.stateLearningWeekSection?.events?.column[0]\"\n            [nwlEventsConfig]=\"slwConfig\">\n          </sb-uic-events>\n        </div>\n        \n        <!-- Tabs -->\n        <ng-container *ngIf=\"!data?.tabSection?.disable\">\n          <mat-tab-group \n            animationDuration=\"0ms\" \n            class=\"mat-tab-labels mytabs w-full\"\n            [selectedIndex]=\"selectedIndex\"\n            (selectedTabChange)=\"tabClicked($event)\">\n            \n            <!-- Content Tab -->\n            <mat-tab label=\"Content\">\n              <ng-template mat-tab-label i18n>Learn</ng-template>\n              <!-- Empty state -->\n              <ng-container *ngIf=\"data?.tabSection?.contentTab?.length === contentTabEmptyResponseCount\">\n                <div class=\"flex justify-center w-full\">\n                  <div class=\"margin-xl text-center\">\n                    <img src=\"/assets/common/error-pages/empty_search.svg\" alt=\"No results\" class=\"margin-top-l margin-bottom-s\">\n                    <h2 class=\"mat-h2\">{{'learnsearch.noResults' | translate}}</h2>\n                  </div>\n                </div>\n              </ng-container>\n              \n              <!-- Content tab content -->\n              <div class=\"padding-top-l\">\n                <app-column-section-display \n                  [data]=\"data.tabSection.contentTab\"\n                  [orgId]=\"orgId\"\n                  [channelName]=\"channelName\"\n                  (competencyEvent)=\"hideCompetency($event)\"\n                  (competencyTelemetry)=\"raiseCompetencyTelemetry($event)\"\n                  (contentTelemetry)=\"raiseTelemetryInteratEvent($event)\"\n                  (viewAllEvent)=\"showAllContent($event.event, $event.data)\">\n                </app-column-section-display>\n              </div>\n            </mat-tab>\n            \n            <!-- Competency Tab -->\n            <mat-tab label=\"Core Areas\">\n              <ng-template mat-tab-label i18n>Competency</ng-template>\n              <div>\n                <app-column-section-display \n                  [data]=\"data.tabSection.coreAreasTab\"\n                  [orgId]=\"orgId\"\n                  [channelName]=\"channelName\"\n                  (competencyEvent)=\"hideCompetency($event)\"\n                  (competencyTelemetry)=\"raiseCompetencyTelemetry($event)\"\n                  (contentTelemetry)=\"raiseTelemetryInteratEvent($event)\"\n                  (viewAllEvent)=\"showAllContent($event.event, $event.data)\">\n                </app-column-section-display>\n              </div>\n            </mat-tab>\n          </mat-tab-group>\n        </ng-container>\n      </div>\n      \n      <!-- Sidebar -->\n      <div class=\"col-span-12 md:col-span-4\">\n        <ng-container *ngIf=\"!isMobile\">\n          <!-- Progress -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.myprogress?.enabled\">\n              <sb-uic-user-progress \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\"\n                [objectData]=\"data?.stateLearningWeekSection?.myprogress?.data\"\n                [rootOrgId]=\"configSvc?.unMappedUser?.rootOrgId\">\n              </sb-uic-user-progress>\n            </div>\n          </div>\n          \n          <!-- Speakers -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.speakerOftheDay?.enabled\">\n              <sb-uic-speakers \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\"\n                [objectData]=\"data?.stateLearningWeekSection?.speakerOftheDay?.data\">\n              </sb-uic-speakers>\n            </div>\n          </div>\n          \n          <!-- Leaderboard -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\">\n            <div *ngIf=\"data?.stateLearningWeekSection?.mdoLeaderboard?.enabled\">\n              <sb-uic-mdo-leaderboard \n                [object]=\"data?.stateLearningWeekSection?.mdoLeaderboard?.data\" \n                [slwConfig]=\"slwConfig\"\n                (tabClicked)=\"raiseTabClick($event)\" \n                [orgId]=\"orgId\">\n              </sb-uic-mdo-leaderboard>\n            </div>\n          </div>\n          \n          <!-- CBP Plan -->\n          <div class=\"hidden md:block padding-top-xl padding-bottom-m\" *ngIf=\"data?.cbpPlanSection?.data\">\n            <div class=\"pt-4\">\n              <sb-uic-cbp-plan \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\" \n                [fetchDataFromApi]=\"true\"\n                [channelId]=\"orgId\" \n                [objectData]=\"data?.cbpPlanSection?.data\">\n              </sb-uic-cbp-plan>\n            </div>\n          </div>\n          \n          <!-- Announcements -->\n          <div class=\"hidden md:block\" *ngIf=\"!data?.announcementSection?.disable\">\n            <div class=\"pt-4\">\n              <sb-uic-announcements \n                [layoutType]=\"'web'\" \n                [mobileHeight]=\"false\" \n                [fetchDataFromApi]=\"true\"\n                [channelId]=\"orgId\" \n                [objectData]=\"data?.announcementSection?.data\">\n              </sb-uic-announcements>\n            </div>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['sectionData']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['channelName']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['orgId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['isMobile']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['providerId']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['slwConfiguration']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }, { type: i2.ConfigurationsService }]; } });
+
+class SupportSectionComponent {
+    constructor(data, eventCallback) {
+        this.data = data;
+        this.eventCallback = eventCallback;
+    }
+    onVideoEvent(event) {
+        this.eventCallback({
+            action: 'video-conference',
+            source: 'supportSection',
+            id: event.id || 'video-event',
+            data: event
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SupportSectionComponent, deps: [{ token: 'sectionData' }, { token: 'eventCallback' }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SupportSectionComponent, selector: "app-support-section", ngImport: i0, template: "<div class=\"flex items-center justify-center\">\n  <div class=\"container support-section\">\n    <sb-uic-video-conference \n      [videoConf]=\"data\"\n      (videoEvent)=\"onVideoEvent($event)\">\n    </sb-uic-video-conference>\n  </div>\n</div>", styles: [""], dependencies: [{ kind: "component", type: VideoConferenceComponent, selector: "sb-uic-video-conference", inputs: ["videoConf"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SupportSectionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-support-section', template: "<div class=\"flex items-center justify-center\">\n  <div class=\"container support-section\">\n    <sb-uic-video-conference \n      [videoConf]=\"data\"\n      (videoEvent)=\"onVideoEvent($event)\">\n    </sb-uic-video-conference>\n  </div>\n</div>" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['sectionData']
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['eventCallback']
+                }] }]; } });
+
+class MdoChannelV3Component {
+    constructor(route, router, eventSvc, translate, langTranslations, configSvc, sanitizer, utilsSvc, injector, cdr, dialog // Add this
+    ) {
+        this.route = route;
+        this.router = router;
+        this.eventSvc = eventSvc;
+        this.translate = translate;
+        this.langTranslations = langTranslations;
+        this.configSvc = configSvc;
+        this.sanitizer = sanitizer;
+        this.utilsSvc = utilsSvc;
+        this.injector = injector;
+        this.cdr = cdr;
+        this.dialog = dialog;
+        this.sectionList = [];
+        this.isEdit = false;
+        this.activeSections = [];
+        this.providerId = '123456789';
+        this.isMobile = false;
+        this.navigationTitles = [
+            { title: 'Learn', url: '/page/learn', icon: 'school', disableTranslate: false },
+            { title: 'MDO Channels', url: '/app/learn/mdo-channels/all-channels', icon: '', disableTranslate: true }
+        ];
+        this.componentRegistry = {
+            'topSection': TopSectionComponent,
+            'lookerSection': LookerSectionComponent,
+            'topLearners': TopLearnersComponent,
+            'mainContent': MainContentComponent,
+            'supportSection': SupportSectionComponent
+        };
+        this.injectorCache = new Map();
+        this.isMobile = this.utilsSvc.isMobile;
+    }
+    ngOnInit() {
+        // Get active sections
+        this.activeSections = this.sectionList?.filter(section => section.enabled)
+            .sort((a, b) => (a.order || 0) - (b.order || 0)) || [];
+        // Get channel info from route
+        this.route.params.subscribe(params => {
+            debugger;
+            if (params.channelId) {
+                this.channelName = params.channelName || '';
+                this.orgId = params.channelId;
+                this.cdr.markForCheck();
+            }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes.sectionList || changes.slwConfiguration) {
+            // Clear injector cache when inputs change
+            this.injectorCache.clear();
+        }
+    }
+    handleSectionEvent(event) {
+        // Handle events from child components
+        console.log('Section event:', event);
+        // Raise telemetry for the event
+        if (event.action) {
+            this.raiseTelemetry(`${event.source}-${event.id}`);
+        }
+        // Handle specific events
+        if (event.action === 'view-all' && event.data?.viewMoreUrl) {
+            this.router.navigateByUrl(event.data.viewMoreUrl);
+        }
+        // Handle edit events
+        if (event.action === 'edit') {
+            this.openEditorDialog(event);
+        }
+    }
+    getSectionComponent(key) {
+        return this.componentRegistry[key] || null;
+    }
+    createInjector(section, column) {
+        // Create a stable reference to the callback function
+        if (!this._eventCallbackFn) {
+            this._eventCallbackFn = (event) => this.handleSectionEvent(event);
+        }
+        // Create a cache key based on section and column keys
+        const cacheKey = `${section.key}-${column.key}`;
+        // Return cached injector if available
+        if (this.injectorCache.has(cacheKey)) {
+            return this.injectorCache.get(cacheKey);
+        }
+        // Create new injector
+        const injector = Injector.create({
+            providers: [
+                { provide: 'sectionData', useValue: column.data },
+                { provide: 'channelName', useValue: this.channelName },
+                { provide: 'orgId', useValue: this.orgId },
+                { provide: 'isMobile', useValue: this.isMobile },
+                ...(this.isEdit ? [{ provide: 'isEdit', useValue: this.isEdit }] : [{ provide: 'isEdit', useValue: this.isEdit }]),
+                { provide: 'slwConfiguration', useValue: this.slwConfiguration },
+                { provide: 'providerId', useValue: this.orgId },
+                { provide: 'eventCallback', useValue: this._eventCallbackFn }
+            ],
+            parent: this.injector
+        });
+        // Cache the injector
+        this.injectorCache.set(cacheKey, injector);
+        return injector;
+    }
+    trackByFn(index, item) {
+        return item.key || index;
+    }
+    raiseTelemetry(name) {
+        this.eventSvc.raiseInteractTelemetry({
+            type: 'click',
+            subType: 'mdo-channel',
+            id: `${_.kebabCase(name).toLowerCase()}`
+        }, {}, { module: 'LEARN' });
+    }
+    // Add new method to handle edit dialog
+    openEditorDialog(event) {
+        const dialogRef = this.dialog.open(EditorDialogComponent, {
+            width: this.getDialogWidth(event.data.fieldType),
+            data: {
+                fieldName: event.data.fieldName,
+                displayName: event.data.displayName,
+                value: event.data.currentValue,
+                fieldType: event.data.fieldType,
+                section: event.source
+            }
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result) {
+                // Update the section data
+                this.updateSectionData(event.source, event.data.fieldName, result);
+            }
+        });
+    }
+    // Helper method to determine dialog width based on field type
+    getDialogWidth(fieldType) {
+        switch (fieldType) {
+            case 'textarea':
+            case 'slider':
+            case 'metrics':
+                return '800px';
+            case 'image':
+                return '600px';
+            default:
+                return '400px';
+        }
+    }
+    // Method to update section data
+    updateSectionData(sectionType, fieldName, newValue) {
+        // Make a deep copy to avoid modifying the original reference
+        const updatedSections = cloneDeep(this.sectionList);
+        // Find the relevant section and column
+        for (const section of updatedSections) {
+            if (!section.enabled)
+                continue;
+            for (const column of section.column) {
+                if (column.key === sectionType && column.data) {
+                    // Update the specific field
+                    this.updateNestedField(column.data, fieldName, newValue);
+                    break;
+                }
+            }
+        }
+        // Clear the injector cache to force component recreation
+        this.injectorCache.clear();
+        // Update the sectionList (this will trigger change detection)
+        this.sectionList = updatedSections;
+        console.log('Updated sectionList:', this.sectionList);
+        // Update active sections
+        this.activeSections = this.sectionList.filter(section => section.enabled)
+            .sort((a, b) => (a.order || 0) - (b.order || 0));
+        // Force change detection to ensure UI updates
+        this.cdr.detectChanges(); // Use detectChanges instead of markForCheck
+    }
+    // Helper method to update nested fields
+    updateNestedField(obj, path, value) {
+        // Handle nested paths (e.g., "sliderData.styleData.borderRadius")
+        const parts = path.split('.');
+        let current = obj;
+        // Navigate to the parent object
+        for (let i = 0; i < parts.length - 1; i++) {
+            if (!current[parts[i]]) {
+                current[parts[i]] = {};
+            }
+            current = current[parts[i]];
+        }
+        // Update the final property
+        current[parts[parts.length - 1]] = value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MdoChannelV3Component, deps: [{ token: i1$1.ActivatedRoute }, { token: i1$1.Router }, { token: i2.EventService }, { token: i2$1.TranslateService }, { token: i2.MultilingualTranslationsService }, { token: i2.ConfigurationsService }, { token: i1$6.DomSanitizer }, { token: i2.UtilityService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MdoChannelV3Component, selector: "sb-uic-mdo-channel-v3", inputs: { sectionList: "sectionList", slwConfiguration: "slwConfiguration", isEdit: "isEdit", providerId: "providerId", channelName: "channelName", orgId: "orgId" }, usesOnChanges: true, ngImport: i0, template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: navigationTitles }\"></ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n  <ng-container *ngFor=\"let section of activeSections; trackBy: trackByFn\">\n    <section [id]=\"section.key\" class=\"w-full grid grid-cols-12 gap-4 {{section.customClass}}\" \n             [ngClass]=\"{'container': section.wrapperClass}\">\n      <ng-container *ngFor=\"let column of section.column; trackBy: trackByFn\">\n        <div *ngIf=\"column?.enabled\" [id]=\"column.key\" class=\"col-span-{{column.colspan || 12}}\">\n          <ng-container *ngIf=\"getSectionComponent(column.key)\"\n                       [ngComponentOutlet]=\"getSectionComponent(column.key)\"\n                       [ngComponentOutletInjector]=\"createInjector(section, column)\">\n          </ng-container>\n        </div>\n      </ng-container>\n    </section>\n  </ng-container>\n</div>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MdoChannelV3Component, decorators: [{
+            type: Component,
+            args: [{ selector: 'sb-uic-mdo-channel-v3', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ws-widget-btn-page-back [widgetData]=\"{ url: 'home', titles: navigationTitles }\"></ws-widget-btn-page-back>\n<div class=\"container-fluid\" id=\"section-micro-sites\">\n  <ng-container *ngFor=\"let section of activeSections; trackBy: trackByFn\">\n    <section [id]=\"section.key\" class=\"w-full grid grid-cols-12 gap-4 {{section.customClass}}\" \n             [ngClass]=\"{'container': section.wrapperClass}\">\n      <ng-container *ngFor=\"let column of section.column; trackBy: trackByFn\">\n        <div *ngIf=\"column?.enabled\" [id]=\"column.key\" class=\"col-span-{{column.colspan || 12}}\">\n          <ng-container *ngIf=\"getSectionComponent(column.key)\"\n                       [ngComponentOutlet]=\"getSectionComponent(column.key)\"\n                       [ngComponentOutletInjector]=\"createInjector(section, column)\">\n          </ng-container>\n        </div>\n      </ng-container>\n    </section>\n  </ng-container>\n</div>", styles: [".container-balanced{max-width:1202px;margin-left:auto!important;margin-right:auto!important}.container{max-width:1200px}.padding-top-xxxl{padding-top:47px}.banner-container{align-items:center;background:#eee;padding:16px;gap:2.5rem;justify-content:center}.web-banner-background{background-image:url(/assets/icons/microsite/MDO-channel-banner.png);background-size:cover;min-height:464px}.mob-container{background-image:url(/assets/icons/microsite/MDOChannel_RightGraphic.svg);background-position:right;background-repeat:no-repeat}.sub-title{font-size:24px;font-weight:400}.sub-title-two{font-size:24px;font-weight:600}.main-title{font-size:32px;font-size:48px;font-weight:700}.sticky-logo-square{position:absolute;top:215px;border-bottom-right-radius:12px;border-top-right-radius:12px;background:#fff;display:flex;padding:10px;justify-content:end;height:53px;left:0}.logo-square{width:fit-content;max-height:73px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;padding:16px 16px 16px 0;box-sizing:border-box}.logo-box-container{width:157px;position:relative;height:64px}.logo-box-square{height:99px;width:157px;background:#fff;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000000f}.logo-box-square .logo-img{max-width:122px}.logo-box-square.top{position:absolute;top:-54px}.logo-img{object-fit:contain;max-height:52px;height:96px;z-index:10}.logo-img-mb{max-height:unset}.metrics{border:3px solid #fff;border-radius:10px;align-items:center}.mob-metrics{overflow:auto}.metrics-section{margin-top:-30px}.empty-div{height:15px}.mob-metrics-sec{padding-top:1rem}.announcements-container{position:fixed;height:calc(100vh - 67px);background:#131313a3;width:100vw;top:0;left:0;z-index:1000}.close-announcements-dialog{position:absolute;right:30px;top:30px}.close-icon{color:#fff;border-radius:15px;float:right;position:absolute;top:15px;right:15px}@media screen and (max-width: 768px){::ng-deep .recommendedProgram .mat-tab-header{padding-left:20px}::ng-deep .featuredCourses .mat-tab-header{padding-left:20px}.metrics-section{margin-top:0}.top-learners{padding-left:30px}}::ng-deep .mytabs .mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),::ng-deep .mytabs .mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled){font-weight:700;color:#000;opacity:1}.contact-us-wrapper{background:linear-gradient(106.94deg,#3a70cf 3.96%,#1146a2 39.76%)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$1.ActivatedRoute }, { type: i1$1.Router }, { type: i2.EventService }, { type: i2$1.TranslateService }, { type: i2.MultilingualTranslationsService }, { type: i2.ConfigurationsService }, { type: i1$6.DomSanitizer }, { type: i2.UtilityService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.MatDialog }]; }, propDecorators: { sectionList: [{
+                type: Input
+            }], slwConfiguration: [{
+                type: Input
+            }], isEdit: [{
+                type: Input
+            }], providerId: [{
+                type: Input
+            }], channelName: [{
+                type: Input
+            }], orgId: [{
+                type: Input
+            }] } });
+
 class MDOChannelModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MDOChannelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MDOChannelModule, declarations: [MdoChannelV1Component, MdoChannelV2Component], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: MDOChannelModule, declarations: [MdoChannelV1Component, MdoChannelV2Component,
+            MdoChannelV3Component,
+            TopSectionComponent,
+            LookerSectionComponent,
+            TopLearnersComponent,
+            MainContentComponent,
+            SupportSectionComponent,
+            CompetencyComponent,
+            ContentStripComponent,
+            ColumnSectionDisplayComponent,
+            MobileSectionsComponent,
+            EditorDialogComponent], imports: [CommonModule,
             MatIconModule,
             MatLegacyChipsModule,
             SkeletonLoaderLibModule,
@@ -13285,7 +15268,17 @@ class MDOChannelModule {
             MatLegacyTabsModule,
             OrderByPipeModule,
             SafeUrlPipeModule,
-            VideoConferenceModule, i2$1.TranslateModule], exports: [MdoChannelV1Component, MdoChannelV2Component] }); }
+            VideoConferenceModule,
+            SbUiResolverModule,
+            FormsModule,
+            ReactiveFormsModule, i2$1.TranslateModule, MatDialogModule,
+            MatLegacyFormFieldModule,
+            MatLegacyInputModule,
+            MatLegacyButtonModule,
+            MatLegacySlideToggleModule,
+            DragDropModule,
+            HttpClientModule,
+            MatIconModule], exports: [MdoChannelV1Component, MdoChannelV2Component, MdoChannelV3Component] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MDOChannelModule, providers: [
             CommonMethodsService
         ], imports: [CommonModule,
@@ -13312,18 +15305,41 @@ class MDOChannelModule {
             OrderByPipeModule,
             SafeUrlPipeModule,
             VideoConferenceModule,
+            SbUiResolverModule,
+            FormsModule,
+            ReactiveFormsModule,
             TranslateModule.forRoot({
                 loader: {
                     provide: TranslateLoader,
                     useFactory: HttpLoaderFactory,
                     deps: [HttpClient],
                 },
-            })] }); }
+            }),
+            MatDialogModule,
+            MatLegacyFormFieldModule,
+            MatLegacyInputModule,
+            MatLegacyButtonModule,
+            MatLegacySlideToggleModule,
+            DragDropModule,
+            HttpClientModule,
+            MatIconModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MDOChannelModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MdoChannelV1Component, MdoChannelV2Component],
+                    declarations: [MdoChannelV1Component, MdoChannelV2Component,
+                        MdoChannelV3Component,
+                        TopSectionComponent,
+                        LookerSectionComponent,
+                        TopLearnersComponent,
+                        MainContentComponent,
+                        SupportSectionComponent,
+                        CompetencyComponent,
+                        ContentStripComponent,
+                        ColumnSectionDisplayComponent,
+                        MobileSectionsComponent,
+                        EditorDialogComponent
+                    ],
                     imports: [
                         CommonModule,
                         MatIconModule,
@@ -13349,6 +15365,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         OrderByPipeModule,
                         SafeUrlPipeModule,
                         VideoConferenceModule,
+                        SbUiResolverModule,
+                        FormsModule,
+                        ReactiveFormsModule,
                         TranslateModule.forRoot({
                             loader: {
                                 provide: TranslateLoader,
@@ -13356,8 +15375,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 deps: [HttpClient],
                             },
                         }),
+                        MatDialogModule,
+                        MatLegacyFormFieldModule,
+                        MatLegacyInputModule,
+                        MatLegacyButtonModule,
+                        MatLegacySlideToggleModule,
+                        DragDropModule,
+                        HttpClientModule,
+                        MatIconModule,
                     ],
-                    exports: [MdoChannelV1Component, MdoChannelV2Component],
+                    exports: [MdoChannelV1Component, MdoChannelV2Component, MdoChannelV3Component],
                     providers: [
                         CommonMethodsService
                     ],
@@ -13653,7 +15680,7 @@ class NationalLearningComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NationalLearningComponent, deps: [{ token: 'environment' }, { token: i1$1.Router }, { token: i2.EventService }, { token: i4$2.DomSanitizer }, { token: i2.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NationalLearningComponent, deps: [{ token: 'environment' }, { token: i1$1.Router }, { token: i2.EventService }, { token: i1$6.DomSanitizer }, { token: i2.UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NationalLearningComponent, selector: "sb-uic-national-learning", inputs: { sectionList: "sectionList", configDetails: "configDetails", nwlConfiguration: "nwlConfiguration" }, ngImport: i0, template: "<div class=\"container-fluid white-background nlm-micro-sites micro-white\" id=\"nlm-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 white-bg\" [ngClass]=\"{'container': section.wrapperClass}\">\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=\"'contentSection'\" [ngTemplateOutlet]=\"contentSection\"\n                                        [ngTemplateOutletContext]=\"{data: column?.data}\"></ng-container>\n                                        <ng-container *ngSwitchCase=\"'lookerSection'\" [ngTemplateOutlet]=\"lookerTemplate\"\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\n<ng-template #topSection let-data=\"data\">\n    <!-- top section desktop layout -->\n    <div class=\"w-full topSection\">\n        <div *ngIf=\"data.sliderData && data.sliderData.sliders\">\n            <sb-uic-sliders [widgetData]=\"data.sliderData.sliders\" [styleData]=\"data.sliderData.styleData\" ></sb-uic-sliders>\n        </div>\n        <div *ngIf=\"data && data.metrics\">\n            <div class=\"block md:hidden\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwCol'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n            <div class=\"hidden md:block\">\n                <sb-uic-data-points\n                    [providerId]=\"providerId\"\n                    [fetchDataFromApi]=\"true\"\n                    [objectData]=\"data?.metrics?.data\"\n                    [layoutType]=\"'nlwRow'\"\n                    [title]=\"data?.metrics?.title\"\n                    [pageLayout]=\"'nlw'\">\n                </sb-uic-data-points>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"block md:hidden\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'mobile'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container\">\n                    <div class=\"hidden md:block\">\n                        <div class=\"flex flex items-center justify-center gap-10\">\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?.imageUrl\">\n                                </div>\n                            </div>\n                            <div class=\"w-full md:w-9/12 flex-1 flex flex-col pr-3\">\n                                <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                                <div class=\"description\">{{data?.description | slice:0:descriptionMaxLength}}\n                                    <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden\">\n                        <div class=\"flex flex-col items-center justify-center margin-bottom-xl px-5\">\n                            <div class=\"mlogo-box-rounded\">\n                                <img alt=\"Application Logo\" class=\"logo-img\" [src]=\"data?.imageUrl\">\n                            </div>\n                        </div>\n                        <div class=\"flex flex-col px-5\">\n                            <div class=\" txt-ellipsis-2 break-words description-title\">{{data?.title}}</div>\n                            <div class=\"mdescription\">{{data?.description | slice:0:descriptionMaxLength}}\n                                <span *ngIf=\"data?.description?.length > descriptionMaxLength\">...</span>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n        <div class=\"col-span-12\">\n            <div class=\"flex items-center justify-center\">\n                <div class=\"container margin-top-xl\">\n                    <div class=\"hidden md:block\">\n                        <sb-uic-key-highlights (emptyResponse)=\"hideKeyHightlight($event, data.keyHighlights)\"  [formData]=\"data.keyHighlights\" [providerId]=\"providerId\" [mode]=\"'desktop'\"></sb-uic-key-highlights>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n<ng-template #contentSection let-data=\"data\">\n    <div class=\"flex items-center justify-center\">\n        <div class=\"container\">\n            <div class=\"grid grid-cols-12 gap-4 mb-6\">\n                <div class=\"col-span-12 md:col-span-{{data.leftContent.colspan}}\">\n                    <div *ngIf=\"data.leftContent.data.weekHighlights.data\">\n                        <sb-uic-highlights-of-week\n                            [objectData]=\"data.leftContent.data.weekHighlights.data\">\n                        </sb-uic-highlights-of-week>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data?.leftContent?.data?.exploreLearningContent?.strips[0]\">\n                            <!-- <sb-uic-content-strip-facet-filter [widgetData]=\"data?.leftContent?.data?.exploreLearningContent\"></sb-uic-content-strip-facet-filter> -->\n                            <sb-uic-content-strip-with-tabs\n                            [emitViewAll]=\"false\"\n                            (viewAllResponse)=\"''\"\n                            (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                            (emptyResponse)=\"''\"\n                            [providerId]=\"environment?.spvorgID\"\n                            [widgetData]=\"data?.leftContent?.data?.exploreLearningContent\"\n                            [channnelName]=\"'channnelName'\">\n                        </sb-uic-content-strip-with-tabs>\n                        </div>\n                    </div>\n                    <div class=\"hidden md:block\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"col-span-12 md:col-span-{{data.rightContent.colspan}}\">\n                    <div *ngIf=\"data.rightContent.data.myprogress\">\n                        <sb-uic-user-progress\n                            [objectData]=\"data.rightContent.data.myprogress.data\" [rootOrgId]=\"configDetails?.unMappedUser?.rootOrgId\">\n                        </sb-uic-user-progress>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.speakerOftheDay\">\n                        <sb-uic-speakers\n                            [objectData]=\"data.rightContent.data.speakerOftheDay.data\">\n                        </sb-uic-speakers>\n                    </div>\n                    <div *ngIf=\"data.rightContent.data.mdoLeaderboard\">\n                        <sb-uic-mdo-leaderboard\n                            [object]=\"data.rightContent.data.mdoLeaderboard.data\"\n                            (tabClicked)=\"raiseTabClick($event)\"></sb-uic-mdo-leaderboard>\n                    </div>\n\n                    <div class=\"block md:hidden\">\n                        <div *ngIf=\"data.leftContent.data.mandatoryCourse.enabled && data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\">\n                            <div class=\"margin-top-l nlw-mandatoryCourse\">\n                                <sb-uic-content-strip-with-tabs\n                                    [emitViewAll]=\"false\"\n                                    (viewAllResponse)=\"''\"\n                                    (telemtryResponse)=\"raiseTelemetryInteratEvent($event)\"\n                                    (emptyResponse)=\"''\"\n                                    [providerId]=\"'123456789'\"\n                                    [widgetData]=\"data?.leftContent?.data?.mandatoryCourse?.column[0]?.data\"\n                                    [channnelName]=\"'channnelName'\">\n                                </sb-uic-content-strip-with-tabs>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data?.leftContent?.data?.exploreLearningContent?.strips[0]\">\n                            <sb-uic-content-strip-facet-filter [widgetData]=\"data?.leftContent?.data?.exploreLearningContent\"></sb-uic-content-strip-facet-filter>\n                        </div>\n                    </div>\n                    <div class=\"block md:hidden px-4 md-px-0\">\n                        <div *ngIf=\"data.leftContent.data.events.enabled && data.leftContent.data.events.column[0]\">\n                            <sb-uic-events [object]=\"data.leftContent.data.events.column[0]\" [nwlEventsConfig]=\"nwlConfiguration\"></sb-uic-events>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n\n\n\n<ng-template #lookerTemplate let-data=\"data\">\n    <div class=\"flex items-center justify-center\" >\n        <div class=\"container  mt-8\">\n            <div class=\"key-speakers flex-wrap flex items-center justify-center\">\n                <h1 class=\"featured  text-center\">{{data?.header?.headerText}}</h1>\n                <p class=\"featured-description  p-4 md:p-0 text-center\">{{data?.header?.description}}</p>\n            </div>\n            <div class=\"lookpro\" *ngIf=\"lookerProUrl\">\n                <iframe title=\"{{data?.header?.headerText}}\" width=\"100%\" height=\"520\" [src]=\"lookerProUrl\" frameborder=\"0\" style=\"border:0\" sandbox=\"allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox\"></iframe>\n            </div>\n        </div>\n    </div>\n</ng-template>", styles: [".white-bg{background:#fff!important}.nlw-mandatoryCourse ::ng-deep .capitalize{font-size:20px;line-height:24.38px}.nlm-micro-sites ::ng-deep .container{max-width:1200px!important}.nlm-micro-sites ::ng-deep .banner-container{padding-bottom:0!important}.topSection ::ng-deep .prev{margin-left:15px!important}.topSection ::ng-deep .next{margin-right:15px!important}.topSection .stats-header{display:flex;align-items:center;justify-content:center;position:absolute;left:43.5%;top:-20px;text-transform:capitalize}.topSection .stats-title{display:flex;align-items:center;justify-content:center;background-color:#f3962f;padding:12px 16px;color:#fff;font-family:Lato;font-size:14px;font-weight:700;line-height:16.8px;border-radius:35px}.topSection .my-arrow{font-size:12px}.topSection .less-opacity1{opacity:.75}.topSection .less-opacity2{opacity:.5}.topSection .details-wrapper{padding:16px;display:flex;gap:50px}.topSection .logo-box-container{width:180px;position:relative}@media only screen and (max-width: 599px){.topSection .logo-box-container{width:112px;height:72px}}.topSection .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 #0000000f}@media only screen and (max-width: 599px){.topSection .logo-box-rounded{width:112px;height:112px}}.topSection .logo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width: 599px){.topSection .logo-box-rounded .logo-img{max-width:84px}}.topSection .mlogo-box-rounded{height:180px;width:180px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:1px 1px 8px 3px #0000000f}@media only screen and (max-width: 599px){.topSection .mlogo-box-rounded{width:112px;height:112px}}.topSection .mlogo-box-rounded .logo-img{max-width:122px}@media only screen and (max-width: 599px){.topSection .mlogo-box-rounded .logo-img{max-width:84px}}.topSection .txt-ellipsis-2{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.topSection .description-title{font-family:Montserrat;font-size:16px;font-weight:600;line-height:19.5px;text-align:left;padding-bottom:16px}.topSection .description{font-family:Lato;font-size:16px;font-weight:400;line-height:24px;text-align:left}.topSection .mdescription{font-family:Lato;font-size:14px;font-weight:400;line-height:16.8px;text-align:left}@media screen and (min-width: 320px) and (max-width: 769px){.topSection ::ng-deep .prev{margin-left:15px!important}.topSection ::ng-deep .next{margin-right:15px!important}.topSection ::ng-deep .banner-container{min-height:212px!important}}\n"], dependencies: [{ kind: "directive", type: i2$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2$2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: SlidersLibComponent, selector: "sb-uic-sliders", inputs: ["widgetData", "styleData", "title", "type"] }, { kind: "component", type: KeyHighlightsComponent, selector: "sb-uic-key-highlights", inputs: ["providerId", "formData", "mode"], outputs: ["emptyResponse"] }, { kind: "component", type: ContentStripWithTabsLibComponent, selector: "sb-uic-content-strip-with-tabs", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryResponse"] }, { kind: "component", type: DataPointsComponent, selector: "sb-uic-data-points", inputs: ["objectData", "layoutType", "fetchDataFromApi", "providerId", "pageLayout", "title", "slwConfig"] }, { kind: "component", type: EventsComponent, selector: "sb-uic-events", inputs: ["object", "nwlEventsConfig"] }, { kind: "component", type: MdoLeaderboardComponent, selector: "sb-uic-mdo-leaderboard", inputs: ["orgId", "object", "slwConfig"], outputs: ["tabClicked"] }, { kind: "component", type: HighlightsOfWeekComponent, selector: "sb-uic-highlights-of-week", inputs: ["objectData"] }, { kind: "component", type: SpeakersComponent, selector: "sb-uic-speakers", inputs: ["objectData"] }, { kind: "component", type: UserProgressComponent, selector: "sb-uic-user-progress", inputs: ["objectData", "rootOrgId"] }, { kind: "component", type: ContentStripFacetFilterComponent, selector: "sb-uic-content-strip-facet-filter", inputs: ["widgetData", "providerId", "emitViewAll", "channnelName"], outputs: ["emptyResponse", "viewAllResponse", "telemtryLearningContentResponse"] }, { kind: "pipe", type: i2$2.SlicePipe, name: "slice" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NationalLearningComponent, decorators: [{
@@ -13662,7 +15689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: ['environment']
-                }] }, { type: i1$1.Router }, { type: i2.EventService }, { type: i4$2.DomSanitizer }, { type: i2.UtilityService }]; }, propDecorators: { sectionList: [{
+                }] }, { type: i1$1.Router }, { type: i2.EventService }, { type: i1$6.DomSanitizer }, { type: i2.UtilityService }]; }, propDecorators: { sectionList: [{
                 type: Input
             }], configDetails: [{
                 type: Input
@@ -14234,5 +16261,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddCompetencyPopupComponent, AnnouncementsComponent, AnnouncementsModule, AvailableLanguagesComponent, AvatarPhotoLibComponent, AvatarPhotoLibModule, CalenderComponent, CalenderModule, CardKarmaProgramsComponent, CardKarmaProgramsV2Component, CardLandscapeComponent, CardMDOChannelComponent, CardPortraitComponent, CardPortraitExtComponent, CardResourceComponent, CardUserComponent, CardWideComponent, CardWideV2Component, CardsComponent, CardsModule, CbpPlanComponent, CbpPlanModule, CertificateDialogComponent, CommonMethodsService, CommonStripComponent, CommonStripModule, CommunitySuggestionsComponent, CommunitySuggestionsModule, CompetencyPassbookComponent, CompetencyPassbookMdoComponent, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConfirmationDialogComponent, ConnectionHoverCardComponent, ConnectionNameComponent, ConnectionNameModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentLanguageService, ContentProgressComponent, ContentProgressModule, ContentStripFacetFilterComponent, ContentStripFacetFilterModule, ContentStripWithTabsLibComponent, ContentStripWithTabsLibModule, ContentStripWithTabsPillsComponent, ContentStripWithTabsPillsModule, DataPointsComponent, DataPointsModule, DialogComponentsModule, EventCardComponent, EventsComponent, EventsModule, HighlightsOfWeekComponent, HighlightsOfWeekModule, HorizontalScrollerV2Component, HorizontalScrollerV2Module, HttpLoaderFactory, HttpLoaderFactory1, KeyHighlightsComponent, KeyHighlightsModule, MDOChannelModule, MdoChannelV1Component, MdoChannelV2Component, MdoLeaderboardComponent, MdoLeaderboardModule, NationalLearningComponent, NationalLearningModule, NbspModule, NbspPipe, ProvidersModule, ProvidersV2Component, ROOT_WIDGET_CONFIG, SakshamAI, SlidersLibComponent, SlidersLibModule, SnackbarComponent, SpeakersComponent, SpeakersModule, TOCMultiLingualDialogComponent, TOCMultiLingualDialogModule, TooltipDirective, TooltipModule, TopLearnersComponent, TopLearnersModule, UserContentRatingLibComponent, UserContentRatingLibModule, UserProgressComponent, UserProgressModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentLibService, WidgetUserServiceLib };
+export { AddCompetencyPopupComponent, AnnouncementsComponent, AnnouncementsModule, AvailableLanguagesComponent, AvatarPhotoLibComponent, AvatarPhotoLibModule, CalenderComponent, CalenderModule, CardKarmaProgramsComponent, CardKarmaProgramsV2Component, CardLandscapeComponent, CardMDOChannelComponent, CardPortraitComponent, CardPortraitExtComponent, CardResourceComponent, CardUserComponent, CardWideComponent, CardWideV2Component, CardsComponent, CardsModule, CbpPlanComponent, CbpPlanModule, CertificateDialogComponent, CommonMethodsService, CommonStripComponent, CommonStripModule, CommunitySuggestionsComponent, CommunitySuggestionsModule, CompetencyPassbookComponent, CompetencyPassbookMdoComponent, CompetencyPassbookMdoModule, CompetencyPassbookModule, ConfirmationDialogComponent, ConnectionHoverCardComponent, ConnectionNameComponent, ConnectionNameModule, ConsumptionComponent, ConsumptionModule, ConsumptionService, ContentLanguageService, ContentProgressComponent, ContentProgressModule, ContentStripFacetFilterComponent, ContentStripFacetFilterModule, ContentStripWithTabsLibComponent, ContentStripWithTabsLibModule, ContentStripWithTabsPillsComponent, ContentStripWithTabsPillsModule, DataPointsComponent, DataPointsModule, DialogComponentsModule, EventCardComponent, EventsComponent, EventsModule, HighlightsOfWeekComponent, HighlightsOfWeekModule, HorizontalScrollerV2Component, HorizontalScrollerV2Module, HttpLoaderFactory, HttpLoaderFactory1, KeyHighlightsComponent, KeyHighlightsModule, MDOChannelModule, MdoChannelV1Component, MdoChannelV2Component, MdoChannelV3Component, MdoLeaderboardComponent, MdoLeaderboardModule, NationalLearningComponent, NationalLearningModule, NbspModule, NbspPipe, ProvidersModule, ProvidersV2Component, ROOT_WIDGET_CONFIG, SakshamAI, SlidersLibComponent, SlidersLibModule, SnackbarComponent, SpeakersComponent, SpeakersModule, TOCMultiLingualDialogComponent, TOCMultiLingualDialogModule, TooltipDirective, TooltipModule, TopLearnersComponent$1 as TopLearnersComponent, TopLearnersModule, UserContentRatingLibComponent, UserContentRatingLibModule, UserProgressComponent, UserProgressModule, WIDGET_REGISTERED_LIB_MODULES, WIDGET_REGISTRATION_LIB_CONFIG, WidgetContentLibService, WidgetUserServiceLib };
 //# sourceMappingURL=sunbird-cb-consumption.mjs.map